/* Game shell: header unit, lobby panel, table well, toasts and result screen. */
body.game{min-height:100vh;padding-bottom:40px}
.g-head{width:min(1280px,calc(100% - 24px));margin:16px auto 0;display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;padding:14px 18px}
.g-title{display:flex;align-items:center;gap:12px}
.g-title h1{margin:0;font:600 clamp(20px,2.6vw,28px)/1 var(--f-mark);letter-spacing:.3em}
.g-serial{font-size:12px;letter-spacing:.24em;color:var(--ink-faint);text-transform:uppercase}
.g-tools{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
#app{width:min(1280px,calc(100% - 24px));margin:18px auto 0}

.g-lobby{max-width:760px;margin:0 auto;padding:30px 34px 28px;display:grid;gap:18px}
.g-marquee{padding:26px 24px 20px;text-align:center}
.g-big{position:relative;z-index:1;margin:0;font:600 clamp(32px,7vw,64px)/1 var(--f-mark);letter-spacing:.12em}
.g-sub{position:relative;z-index:1;margin:10px 0 0;font-size:14px;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,181,63,.72)}
.g-row{display:grid;grid-template-columns:150px minmax(0,1fr);gap:14px;align-items:center}
.g-opts{display:grid;gap:14px}
.g-input{height:46px;padding:0 14px;border-radius:4px;border:1px solid #070606;background:#121110;color:#efe6d4;font-size:18px;box-shadow:inset 0 2px 4px rgba(0,0,0,.7),0 1px 0 rgba(255,255,255,.06);min-width:0}
select.g-input{cursor:pointer}
.g-code{width:120px;text-align:center;font:600 22px/1 var(--f-mark);letter-spacing:.2em;color:var(--amber);text-transform:uppercase}
.g-actions{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.g-or{color:var(--ink-faint);font-size:14px;letter-spacing:.2em;text-transform:uppercase}
.g-hint{margin:0;color:var(--ink-dim);font-size:16px}
.g-link{font-size:13px;word-break:break-all}
.g-rules summary{cursor:pointer;color:var(--ink-dim);letter-spacing:.14em;text-transform:uppercase;font-size:14px}
.g-rules p{margin:8px 0;color:var(--ink-dim);font-size:16px;max-width:65ch}
.g-room-l{position:relative;z-index:1;margin:0;color:rgba(255,181,63,.7)}
.g-code-big{position:relative;z-index:1;margin:8px 0 0;font:600 clamp(44px,10vw,84px)/1 var(--f-mark);letter-spacing:.22em}
.g-seats{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.g-seat{display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:5px;background:#1a1916;border:1px solid #39342c;box-shadow:inset 0 2px 4px rgba(0,0,0,.45)}
.g-seat.empty{color:var(--ink-faint)}
.g-seat-name{flex:1}
.g-seat .key{margin:0}

.g-table{position:relative}
.well{border-radius:12px;background:radial-gradient(80% 70% at 50% 45%,#232019,#141311 70%);box-shadow:inset 0 3px 12px rgba(0,0,0,.85),0 0 0 1px #2f2b25,0 1px 0 rgba(255,255,255,.05)}

.g-toast{position:fixed;left:50%;bottom:24px;z-index:50;transform:translate(-50%,30px);opacity:0;pointer-events:none;margin:0;max-width:min(560px,calc(100% - 32px));
  padding:12px 18px;border-radius:6px;background:#1a1006;border:1px solid #6b4a1a;color:var(--amber);text-shadow:0 0 6px rgba(255,160,40,.5);font-size:16px;letter-spacing:.06em;transition:transform .25s,opacity .25s;box-shadow:0 10px 24px rgba(0,0,0,.6)}
.g-toast.show{opacity:1;transform:translate(-50%,0)}

.g-over{position:fixed;inset:0;z-index:40;display:grid;place-content:center;gap:18px;padding:20px;background:rgba(8,7,6,.72);backdrop-filter:blur(3px);animation:fade .3s ease-out}
.g-over .bezel{width:min(560px,calc(100vw - 40px))}
.g-over-screen{padding:34px 24px;text-align:center}
.g-over .g-actions{justify-content:center}
@keyframes fade{from{opacity:0}}

/* Seat badges shared by card/tile tables */
.seat-badge{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:4px;background:#1c1a17;border:1px solid #3a352d;font-size:15px;letter-spacing:.06em;white-space:nowrap}
.seat-badge.turn{border-color:var(--amber-deep);box-shadow:0 0 0 1px var(--amber-deep),0 0 16px rgba(255,170,60,.25);color:#fff1d6}
.seat-badge .count{font:600 14px/1 var(--f-mark);color:#2a1906;background:var(--amber);border-radius:3px;padding:3px 6px;min-width:22px;text-align:center}

@media (max-width:640px){
  .g-lobby{padding:22px 16px}
  .g-row{grid-template-columns:1fr;gap:6px}
  .g-head{padding:12px}
  .g-serial{display:none}
}
.mark-mini{font:600 16px/1 var(--f-mark);letter-spacing:.3em;color:var(--ink-dim)}

/* Compact header while a table is open, so the whole table and your hand fit on one screen. */
body.game:has(.g-table) .g-head{margin-top:8px;padding:8px 14px}
body.game:has(.g-table) #app{margin-top:10px}
body.game:has(.g-table){padding-bottom:12px}
.g-over.peek{background:transparent;backdrop-filter:none;place-content:end center;pointer-events:none}
.g-over.peek .bezel{display:none}
.g-over.peek .g-actions{pointer-events:auto;background:rgba(8,7,6,.85);padding:10px 14px;border-radius:8px}
.g-fair-dl{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:6px 14px;margin:0;font-size:14px}
.g-fair-dl dt{color:var(--ink-faint)}
.g-fair-dl dd{margin:0;word-break:break-all}
.g-fair-dl code{font:12px/1.4 ui-monospace,Menlo,monospace;color:#f2c879}
.g-fair-note{font-size:14px!important;color:var(--ink-faint)!important}
@media (max-width:640px){
  .g-head{margin-top:8px;padding:8px 10px;gap:8px}
  .g-title{gap:8px}.g-title h1{font-size:18px;letter-spacing:.18em}
  .g-tools{gap:6px}
  .g-tools .key--sm{padding:6px 10px;font-size:12px;min-height:34px}
  .g-tools .snd{font-size:0;gap:0}.g-tools .snd::after{content:'♪';font-size:16px}
  .g-fair-dl{grid-template-columns:1fr}
}