/* Shared controls stay familiar; each game owns its stage. */
body{transition:background-color .3s,color .3s}
.mode-options{display:grid;gap:18px;margin:28px 0}.mode-options button{text-align:left;padding:24px}.mode-options strong{display:block;font-size:1.75rem}.mode-options span{display:block;font-size:1rem;font-weight:400;margin-top:8px}.mode-switch{display:flex;gap:12px;margin:24px 0}
body[data-game] .stage{position:relative}body[data-game] .stage h2{line-height:1.08}
body[data-game=brain]{background:#f6eee9}body[data-game=brain] .stage{--game-accent:#c55069}body[data-game=brain] .stage h2{color:#983e53}body[data-game=brain] .stage .note,body[data-game=brain] .stage input{border-radius:30px 30px 30px 4px;background:#fff9f4}body[data-game=brain] .stage .answer{font-size:1.875rem;color:#983e53}
body[data-game=number]{background:#e8eee6}body[data-game=number] .stage{border-top:7px solid #326644;padding-top:30px}body[data-game=number] .stage input,body[data-game=number] .timer{font-family:ui-monospace,Menlo,monospace;font-weight:800;color:#204b30}body[data-game=number] .stage h2{font-weight:800;color:#204b30;font-size:clamp(1.625rem,7vw,2.75rem);line-height:1.12;letter-spacing:-.8px;text-wrap:balance}body[data-game=number] .stage input{font-size:2.5rem;border:0;border-bottom:3px solid #326644;border-radius:0;background:transparent}body[data-game=number] .team{border-radius:0;background:#d3dfd0}
body[data-game=draft]{background:#fff3d6}body[data-game=draft] .stage h2{text-transform:uppercase;color:#a33b22}body[data-game=draft] .choices button{background:#a33b22;color:#fff8dd;border-radius:3px;font-size:1.4375rem}body[data-game=draft] .build{background:#fffdf1;border:0;border-top:2px dashed #bc9666;border-bottom:2px dashed #bc9666;border-radius:0;margin-top:22px}body[data-game=draft] .food{background:#f2d89b;color:#693421;border-radius:3px;font-family:ui-monospace,monospace}
body[data-game=draw]{background:#fbf8ec}body[data-game=draw] .stage{background:repeating-linear-gradient(transparent 0 35px,#91b4d52b 35px 36px);padding-bottom:30px}body[data-game=draw] .stage h2{color:#53419d}body[data-game=draw] canvas{border:3px solid #53419d;border-radius:3px;box-shadow:8px 8px 0 #dac8e8;max-width:100%;touch-action:none}body[data-game=draw] .stage button{background:#53419d;color:white;border-radius:4px}
body[data-game=imposter]{background:#e5e9df}body[data-game=imposter] .stage h2{letter-spacing:-1.5px;color:#263e32}body[data-game=imposter] .role-card{background:#263e32;color:#f5f1da;border:0;border-radius:3px}body[data-game=imposter] .role-card strong{color:#e8de9b}body[data-game=imposter] .clue-order span.current{background:#263e32;color:#fff}body[data-game=imposter] .build{border-radius:0;border-left:5px solid #768676;background:#f2f1e6}
body[data-game=shadow]{background:#261c34;color:#fcf0df}body[data-game=shadow] header,body[data-game=shadow] .room-top,body[data-game=shadow] .sidebar,body[data-game=shadow] .simple-help{color:#fcf0df}body[data-game=shadow] .brand,body[data-game=shadow] .roomcode,body[data-game=shadow] .stage h2,body[data-game=shadow] .stage h3{color:#ff8b64}body[data-game=shadow] .stage h2{text-transform:uppercase;font-size:4rem;letter-spacing:1px}body[data-game=shadow] .stage p,body[data-game=shadow] .micro,body[data-game=shadow] .chip-label{color:#ede3f1}body[data-game=shadow] button{background:#ff8b64;color:#251a32}body[data-game=shadow] .physical-scores>div:first-child{color:#ff8b64}body[data-game=shadow] .physical-scores>div:nth-child(2){color:#8edbea}body[data-game=shadow] .beat-stage{border-block:2px solid #725778}
body[data-game=rhythm]{background:#edf6c9}body[data-game=rhythm] .stage h2{font-size:3.625rem;color:#31542b}body[data-game=rhythm] .stage button{background:#31542b;color:#f5ffd9}body[data-game=rhythm] .beat-stage{color:#31542b}body[data-game=rhythm] .physical-order span{background:#d1e49c;color:#274523}
.physical-order{display:flex;flex-wrap:wrap;gap:12px;margin:28px 0}.physical-order span{padding:10px 16px;border-radius:24px;background:#e9e5dc}.category-picks{display:flex;flex-wrap:wrap;gap:8px;margin:24px 0}.category-picks button{font-size:0.875rem;padding:10px 14px}.physical-scores{display:flex;flex-wrap:wrap;justify-content:center;gap:28px;margin:25px 0}.physical-scores>div{display:flex;flex-direction:column;align-items:center;min-width:100px;gap:8px}.physical-scores strong{font:800 4rem ui-monospace,monospace}.physical-scores button{min-width:44px;min-height:44px;padding:8px 16px}.beat-stage{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:200px;margin:25px 0}.beat-stage strong{font-size:clamp(3.75rem,10vw,6.25rem);font-weight:900;letter-spacing:-3px}.beat-stage strong[data-accent=yes]{color:#ce5428;transform:scale(1.08)}.beat-stage span{font-size:1.375rem}.game-tile.is-selected{outline:3px solid var(--focus);outline-offset:4px}
@media(max-width:600px){body[data-game] .stage h2{font-size:2.375rem}.physical-scores{gap:16px}.physical-scores strong{font-size:3rem}.beat-stage{min-height:140px}.mode-switch{flex-wrap:wrap}.category-picks button{font-size:0.875rem}.physical-order{gap:8px}.stage .row{flex-wrap:wrap}}
@media(prefers-reduced-motion:reduce){body{transition:none}.beat-stage strong[data-accent=yes]{transform:none}}
body[data-game=shadow] .sidebar p,body[data-game=shadow] .sidebar h3,body[data-game=shadow] .eyebrow,body[data-game=shadow] .subtitle,body[data-game=shadow] .pill,body[data-game=shadow] #connection{color:#cbbfd7}
body[data-game=shadow] .physical-order span{background:#493850;color:#fff3e4}
body[data-game=shadow] .stage .note{background:#493850;color:#fff3e4}
body[data-game="auction"]{--accent:#985515;--paper:#fff7e4;background:#fff7e4}.auction-budgets{display:flex;flex-wrap:wrap;gap:20px;margin:24px 0}.auction-budgets span{display:flex;gap:12px}.auction-restaurant{font-size:clamp(1.875rem,5vw,4rem);margin:24px 0}body[data-game="quips"]{--accent:#a42f72;background:#fff0f7}body[data-game="quips"] .answer{font-size:clamp(1.5rem,4vw,2.75rem);font-weight:700}body[data-game="quips"] .build{border:0;border-radius:30px 30px 30px 4px;background:#f8d3e7;margin:20px 0}button{min-height:44px}#display{max-width:1200px;margin:auto;padding:32px}#display img{max-width:100%}
@media(max-width:600px){body[data-game="auction"] header{padding:16px 20px}body[data-game="auction"] #app{padding-top:12px}body[data-game="auction"] .room-top{margin-bottom:18px}body[data-game="auction"] .stage h2{margin-bottom:12px}body[data-game="auction"] .auction-budgets{gap:8px 16px;margin:12px 0}body[data-game="auction"] .auction-restaurant{margin:12px 0;font-size:2.125rem}body[data-game="auction"] .big-number{font-size:3.75rem;margin:8px 0}body[data-game="auction"] .stage>p{margin:12px 0}body[data-game="auction"] .build:has(.food){margin-top:16px}body[data-game="auction"] .build:not(:has(.food)){display:none}}
/* Real restaurant marks retain their colors and aspect ratios. */
.restaurant-heading{display:flex;align-items:center;gap:20px;margin:24px 0;font-size:clamp(1.75rem,4vw,3rem);line-height:1.1}
.restaurant-mark{display:inline-flex;flex:0 0 auto;align-items:center;justify-content:center;width:96px;height:96px;padding:10px;background:#fff;border-radius:18px;box-sizing:border-box;overflow:hidden}
.restaurant-mark img{display:block;width:100%;height:100%;max-width:100%;object-fit:contain}
.food:has(.restaurant-mark),.choices button:has(.restaurant-mark){display:inline-flex;align-items:center;gap:10px;text-align:left}
.food .restaurant-mark{width:42px;height:42px;padding:4px;border-radius:8px}
.choices button .restaurant-mark{width:48px;height:48px;padding:5px;border-radius:8px}
.food>span:last-child{min-width:0;overflow-wrap:anywhere}
@media(max-width:600px){.restaurant-heading{gap:14px;margin:18px 0;font-size:1.875rem}.restaurant-heading>.restaurant-mark{width:76px;height:76px;padding:8px}}

/* Small previews remain secondary to picking a game. */
.game-choice{position:relative;min-width:0}
.game-choice>.game-tile{width:100%;height:auto}
.game-preview{position:relative;margin-top:8px;font-size:.85rem}
.game-preview summary{cursor:pointer;color:var(--ink,#253d4b);padding:8px 4px;min-height:44px}
.preview-content{position:absolute;z-index:15;left:0;right:0;top:100%;padding:20px;background:#fffdf7;color:#253d4b;box-shadow:0 12px 32px #172b3a24;border-radius:18px;min-width:230px;animation:preview-enter .18s ease-out}
.preview-content strong,.preview-content small{display:block}.preview-content p{font-size:.95rem;line-height:1.5}.preview-demo{display:block;width:54px;color:#087f94;margin-bottom:10px}.preview-demo svg{width:100%;animation:preview-bob 1.2s ease-in-out 2}
@keyframes preview-enter{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
@keyframes preview-bob{50%{transform:translateY(-5px) rotate(-5deg)}}
@media(hover:none){.preview-content{position:static;min-width:0}.game-choice>.game-tile{height:auto}}
@media(prefers-reduced-motion:reduce){.preview-content,.preview-demo svg{animation:none}}

/* Date Night: Blush paper at level 1, dimming to Candlelight by level 3. */
body[data-game=mixer][data-date-level]{--dn-bg:#FFE6DF;--dn-next:#F7A8A4;--dn-card:#FFF4F0;--dn-ink:#4D1F1A;--dn-muted:#85524A;--dn-line:#F3CFC6;--dn-accent:#E0404B;--dn-on-accent:#fff;--dn-ghost:#D9998F;--ink:var(--dn-ink);--muted:var(--dn-muted);--border:var(--dn-line);--paper:var(--dn-card);background:var(--dn-bg);color:var(--dn-ink);transition:background-color 1s ease,color 1s ease}
body[data-game=mixer][data-date-level="2"]{--dn-bg:#E23B4D;--dn-next:#9E1F3A;--dn-card:#EC5565;--dn-ink:#fff;--dn-muted:#FFE3E5;--dn-line:#F07A86;--dn-accent:#FFD7DA;--dn-on-accent:#7A0E1C;--dn-ghost:#FFF}
body[data-game=mixer][data-date-level="3"]{--dn-bg:#140A1E;--dn-next:#07030B;--dn-card:#221430;--dn-ink:#FDE8F1;--dn-muted:#CDB6CF;--dn-line:#3A2748;--dn-accent:#FF4F8B;--dn-on-accent:#1A0612;--dn-ghost:#9A78AE}
body[data-game=mixer][data-date-level] :is(.brand,h1,h2,h3,strong,summary){color:var(--dn-ink)}
body[data-game=mixer][data-date-level] :is(p,.micro,.eyebrow,#connection,li){color:var(--dn-muted)}
body[data-game=mixer][data-date-level] header{border-color:var(--dn-line)}
body[data-game=mixer][data-date-level] #app:is([data-phase=mixer],[data-phase=mixerReveal]) .stage-heading h2{font-size:0.9375rem;letter-spacing:0;font-weight:700;margin:0;color:var(--dn-muted)}
body[data-game=mixer][data-date-level] .pill{background:transparent;border:0;padding:0;color:var(--dn-muted)}
body[data-game=mixer][data-date-level] a{color:var(--dn-ink)}
body[data-game=mixer][data-date-level] button{background:var(--dn-accent);color:var(--dn-on-accent);transition:background-color 1s ease,color 1s ease,transform .15s,box-shadow .15s}
body[data-game=mixer][data-date-level] button.ghost{background:transparent;color:var(--dn-ink);border-color:var(--dn-ghost)}
body[data-game=mixer][data-date-level] :is(.card,details,.panel){background:transparent;border-color:transparent;box-shadow:none;color:var(--dn-ink)}
body[data-game=mixer][data-date-level] .note{background:var(--dn-card);border-color:var(--dn-line);color:var(--dn-ink)}
@media (prefers-reduced-motion:reduce){body[data-game=mixer][data-date-level],body[data-game=mixer][data-date-level] :is(button){transition:none}}

/* Date Night deepens card by card: --dn-depth (0 to 1) is set from round / total in app.js. */
body[data-game=mixer][data-date-level] button.ghost{border-width:2px}
body[data-game=mixer][data-date-level] .brand-word{color:var(--dn-ink);transition:color 1s ease}
/* Date Night layout (all levels) */
body[data-game=mixer][data-date-level] .room-top{align-items:center}
body[data-game=mixer][data-date-level] .room-top .pill{padding:0;color:var(--dn-muted)}
body[data-game=mixer][data-date-level] .room-top button.ghost{border:0;padding:8px 0;min-height:0}
.dn{max-width:560px}
.dn-top{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.dn-top .eyebrow{margin:0;letter-spacing:1.4px}
.dn-count{font-size:0.75rem;font-weight:700;color:var(--dn-muted);font-variant-numeric:tabular-nums}
.dn-progress{height:6px;border-radius:3px;background:color-mix(in oklab,var(--dn-ink) 14%,transparent);margin:10px 0 18px;overflow:hidden}
.dn-progress span{display:block;height:100%;border-radius:3px;background:var(--dn-accent);transition:width .6s ease}
.dn-turn{font-size:0.8125rem;margin:0 0 10px}
body[data-game=mixer][data-date-level] .dn-prompt{font-size:clamp(1.875rem,8.4vw,2.875rem);line-height:1.12;letter-spacing:-1px;margin:0 0 14px;text-wrap:balance}
.dn-hint{font-size:0.9375rem;margin:0 0 22px}
.dn-actions{display:grid;gap:10px}
.dn-actions button{min-height:56px;font-size:1.125rem}
body[data-game=mixer][data-date-level] .dn-actions button.ghost{border:2px solid var(--dn-ghost)}
.dn-wait{font-weight:700;color:var(--dn-ink)!important}
.dn-quiet{display:flex;justify-content:space-between;gap:16px;margin:18px 2px 6px}
body[data-game=mixer][data-date-level] .dn-quiet button.link{background:none;border:0;padding:6px 0;min-height:0;font-size:0.875rem;font-weight:600;color:var(--dn-muted);text-decoration:underline;text-underline-offset:3px;white-space:nowrap;box-shadow:none;transform:none}
.dn-hint,.dn-turn{text-wrap:pretty}
/* One surface: palette vars live on <html>; the page root deepens card by card (--dn-depth set on <html> in app.js). */
html:has(body[data-game=mixer][data-date-level]){--dn-bg:#FFE6DF;--dn-next:#F7A8A4;--dn-card:#FFF4F0;--dn-ink:#4D1F1A;--dn-muted:#85524A;--dn-line:#F3CFC6;--dn-accent:#E0404B;--dn-on-accent:#fff;--dn-ghost:#D9998F}
html:has(body[data-game=mixer][data-date-level="2"]){--dn-bg:#E23B4D;--dn-next:#9E1F3A;--dn-card:#EC5565;--dn-ink:#fff;--dn-muted:#FFE3E5;--dn-line:#F07A86;--dn-accent:#FFD7DA;--dn-on-accent:#7A0E1C;--dn-ghost:#FFF}
html:has(body[data-game=mixer][data-date-level="3"]){--dn-bg:#140A1E;--dn-next:#07030B;--dn-card:#221430;--dn-ink:#FDE8F1;--dn-muted:#CDB6CF;--dn-line:#3A2748;--dn-accent:#FF4F8B;--dn-on-accent:#1A0612;--dn-ghost:#9A78AE}
html:has(body[data-game=mixer][data-date-level]){background:color-mix(in oklab,var(--dn-bg),var(--dn-next) calc(var(--dn-depth,0) * 45%));transition:background-color 1s ease}
body[data-game=mixer][data-date-level]{background:transparent}
@media (prefers-reduced-motion:reduce){html:has(body[data-game=mixer][data-date-level]){transition:none}}
body[data-game=mixer][data-date-level] button.ghost.full{border:2px solid var(--dn-ghost);min-height:56px;font-size:1.125rem;margin-top:10px}
body[data-game=mixer][data-date-level] button.ghost.full[data-action=mixerEnd]{border:0;min-height:0;font-size:0.9375rem;font-weight:600;color:var(--dn-muted);text-decoration:underline;text-underline-offset:3px}

/* ==========================================================================
   Polish 2026-09-25. One surface system, one button system, one footer.
   Checked by `npm run check:ui` (ui-check.mjs). `:not(#_)` lifts a rule above
   the per-game overrides without !important; it matches every element.
   ========================================================================== */

/* Surface tokens. body[data-surface] is set from catalog.js surfaceFor(). */
:root{--muted:#56606d;--brand-ink:#1c2433;--btn-radius:14px;--btn-fill:#087f98;--btn-on-fill:#fff;--btn-line:#087f98;--btn-text:#066a7f;--quiet-line:#c9d3d6}
body[data-surface=dark]{--muted:#d4c8de;--brand-ink:#fcf0df;--focus:#ffd28a;--quiet-line:#fcf0df66}
body[data-game=shadow]{--btn-fill:#ff8b64;--btn-on-fill:#251a32;--btn-line:#ff8b64;--btn-text:#ffb59a}
body[data-game=mixer][data-date-level]{--muted:var(--dn-muted);--brand-ink:var(--dn-ink);--btn-fill:var(--dn-accent);--btn-on-fill:var(--dn-on-accent);--btn-line:var(--dn-ghost);--btn-text:var(--dn-ink);--quiet-line:var(--dn-line);--focus:var(--dn-ink)}
body[data-game=draft]{--btn-line:#a33b22;--btn-text:#8a3019}
body[data-game=draw]{--btn-line:#53419d;--btn-text:#4a3a8f}
body[data-game=rhythm]{--btn-line:#31542b;--btn-text:#31542b}

/* Muted text on every tinted light background reads at 5:1 or better. */
.eyebrow,.stage-heading .eyebrow,.subtitle,.pill,.room-top .pill,.quick-pill span,.quick-note,.quick-h2h span,.pack-chip span,.theme-card div>span{color:var(--muted)}
.timer{color:var(--btn-text)}
body[data-game=shadow] .timer{background:#493850;color:#fcf0df}
body[data-game=shadow] .team strong{color:#d4c8de}
body[data-game=shadow] .team:nth-child(2) strong{color:#ffb59a}

/* Header lockup: 44px tap area, no clipped glyphs, light ink on dark surfaces. */
.brand{min-height:44px;padding:0 8px;margin-left:-8px;border-radius:12px;-webkit-tap-highlight-color:transparent}
.brand .brand-word{padding:0;line-height:1.15;color:var(--brand-ink)}
body[data-game=shadow] .brand{color:var(--brand-ink)}
.brand:focus{outline:0}
.brand:focus-visible{outline:2.5px solid var(--focus);outline-offset:2px}
/* Brand kit: on dark backgrounds the mark sits on an off-white disc, so its ink outline stays visible. */
body[data-surface=dark] .brand-mark{background:#f8f7f3;border-radius:50%;padding:2px;box-sizing:border-box;box-shadow:0 0 0 1px #f8f7f3}

/* Buttons. Primary = filled; secondary = outlined; ghost = quiet text. One radius, three heights. */
button:not(:is(.choices *,.mode-options *,.game-tile,.q-card,.icon-btn,.pack-chip,.theme-card,.tutorial-launch,.again-chip,.physical-scores *,.raise-row *,.q-bid-row *,.round-options *,.category-picks *)):not(#_){border-radius:var(--btn-radius)}
.stage .row button:not(#_){min-height:48px}
button.secondary:not(#_),.stage .quick-actions button.q-alt:not(#_){background:transparent;color:var(--btn-text);border:2px solid var(--btn-line);box-shadow:none}
button.secondary:not(#_):hover:not(:disabled){background:color-mix(in srgb,var(--btn-line) 10%,transparent)}
button.ghost:not(#_){background:transparent;color:var(--btn-text);border:0;box-shadow:none}
body[data-surface=dark] button.ghost:not(#_){color:var(--brand-ink)}
/* Leave: a compact outlined button that always fits its label. */
.room-top button[data-action=leave]:not(#_){min-height:44px;min-width:44px;padding:0 16px;border:1.5px solid var(--quiet-line);border-radius:var(--btn-radius);background:transparent;color:var(--brand-ink);font-size:0.875rem;font-weight:600;white-space:nowrap;line-height:1}
.room-top button[data-action=leave]:not(#_):hover{border-color:currentColor}

/* Footer: three quiet text links, same size, same colour, 44px tall. */
.simple-help{border-top-color:var(--quiet-line)}
.simple-help :is(button,a):not(#_):not(#_){display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;padding:0 6px;margin:0 -6px;background:transparent;border:0;border-radius:10px;box-shadow:none;color:var(--muted);font:inherit;font-size:0.875rem;font-weight:600;text-decoration:none;white-space:nowrap}
.simple-help :is(button,a):not(#_):not(#_):hover{color:var(--brand-ink);text-decoration:underline;text-underline-offset:3px}

/* Date Night quiet links keep their look but get a real tap area. */
body[data-game=mixer][data-date-level] .dn-quiet button.link:not(#_){min-height:44px;padding:0 4px;border-radius:10px}
:where(details>summary){min-height:44px;box-sizing:border-box;padding-block:12px}

/* Date Night contrast: level 1 buttons and the level 2 red deepen a step so white and blush text pass 4.5:1. */
body[data-game=mixer][data-date-level="1"],html:has(body[data-game=mixer][data-date-level="1"]){--dn-accent:#D1303D}
body[data-game=mixer][data-date-level="2"],html:has(body[data-game=mixer][data-date-level="2"]){--dn-bg:#C92C42;--dn-card:#D63F53;--dn-muted:#FFF4F5}
body[data-game=imposter] .role-card p{color:#d5e0d6}
.scout-row .ovr{color:#066a7f}
.video-fallback a{display:inline-flex;align-items:center;min-height:44px}

/* Action rows: equal-width buttons that wrap cleanly on phones; the one filled action leads. */
.stage .row:is(:has(>button[data-action=replay]),:has(>button[data-action=practice]),.physical-actions){display:flex;flex-wrap:wrap;align-items:stretch;gap:10px}
.stage .row:is(:has(>button[data-action=replay]),:has(>button[data-action=practice]),.physical-actions)>button{flex:1 1 140px;margin:0}
.stage .physical-actions>button:not(.secondary){flex-basis:100%;order:-1}
/* Date Night keeps its outlined "Pass" buttons (ghost there means secondary). */
body[data-game=mixer][data-date-level] :is(.dn-actions button.ghost,button.ghost.full:not([data-action=mixerEnd])):not(#_){border:2px solid var(--dn-ghost);color:var(--dn-ink)}
.stage .row.physical-actions>button:not(.secondary):not(#_){flex-basis:100%;order:-1}
/* Dialogs: the safe choice is outlined, the main one filled; loose buttons in a dialog stack full width. */
.dialog-actions .console-button:not(.primary):not(#_){background:transparent;color:var(--btn-text);border:2px solid var(--btn-line)}
.channel-detail>button:not(.mode-options *):not(#_){display:flex;align-items:center;justify-content:center;width:100%;min-height:48px;margin-top:10px}
.channel-detail>button.ghost:not(#_){border:2px solid var(--btn-line)}
/* Room header: the round pill wraps before the Leave button drops to its own line. */
@media(max-width:560px){.room-top .row{flex-wrap:nowrap;align-items:center}.room-top .pill{white-space:normal;text-align:right;line-height:1.3;text-wrap:balance}}
/* Ballpark's big monospace input: the hint must fit the field. */
body[data-game=number] .stage input::placeholder{font-size:max(1rem,.55em);letter-spacing:0}
.channel-detail button[data-close]:not(.primary):not(#_){background:transparent;color:var(--btn-text);border:2px solid var(--btn-line)}
/* Filled answer cards keep their text off the edges at every width. */
body[data-game=quips] .build{padding:18px 22px}
body[data-game=imposter] .build{padding:14px 16px}
.raise-row small{opacity:1}
body[data-game=imposter] .role-card{padding:18px 20px}

/* ==========================================================================
   Features 2026-09-26: Family / Adults switch, house round, round-2 teach
   card, end-of-night awards, host controls. Tokens only, same button system.
   ========================================================================== */
.audience-switch{border:0;padding:0;margin:18px 0 0;min-width:0}
.audience-switch legend{font-weight:800;font-size:1rem;padding:0;margin-bottom:8px;color:var(--brand-ink)}
.audience-options{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.audience-options button:not(#_){min-height:48px;font-size:1rem;font-weight:800}
.audience-options button.selected:not(#_){background:var(--btn-fill);color:var(--btn-on-fill);border:2px solid var(--btn-fill)}
.audience-switch .micro{margin:8px 0 0}
.audience-note{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:16px 0 0;font-size:0.875rem;color:var(--brand-ink)}
.audience-pill{display:inline-flex;align-items:center;min-height:30px;padding:2px 12px;border-radius:999px;border:2px solid var(--brand-ink);font-weight:800;font-size:0.8125rem}
.teach-card{display:flex;align-items:center;gap:10px;margin:0 0 14px;padding:12px 14px;border:3px solid #1c2433;border-radius:var(--btn-radius);background:#FFF1C7;color:#1c2433;font-weight:800;font-size:1.0625rem;line-height:1.3}
.teach-card span{font-size:1.5rem;line-height:1}
.house-note{margin:6px 0 10px;padding:10px 12px;border-radius:12px;background:#e8f5f8;color:#1c2433;font-weight:700;font-size:0.9375rem}
.awards{margin:22px 0 18px}
.awards h3{margin:0 0 10px;font-size:1.375rem}
.awards ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.award{display:grid;grid-template-columns:44px minmax(0,1fr);align-items:center;gap:12px;padding:12px 14px;border:2px solid #1c2433;border-radius:var(--btn-radius);background:#fff;color:#1c2433}
.award-icon{font-size:1.875rem;line-height:1;text-align:center}
.award b{display:block;font-size:0.75rem;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:#3a4654}
.award .award-who{display:block;font-family:'Baloo 2','Nunito',sans-serif;font-size:1.3125rem;font-weight:800;line-height:1.15;overflow-wrap:anywhere}
.award small{display:block;font-size:0.875rem;color:#3a4654;margin-top:2px}
.host-controls{display:flex;align-items:center;flex-wrap:wrap;gap:4px 12px;margin:22px 0 0;padding-top:10px;border-top:1px solid var(--quiet-line)}
.host-controls>span{font-size:0.75rem;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:var(--muted);margin-right:4px}
.host-controls button:not(#_){min-height:44px;padding:0 10px;font-size:0.9375rem;font-weight:700}
/* Minigames lobby: unpicked games dim their art only, so names and labels stay readable (4.5:1). */
.game-tile[aria-pressed=false]:not(#_){opacity:1}
.game-tile[aria-pressed=false] .art-slot{opacity:.45}
.game-tile[aria-pressed=false] .tile-art{filter:none}
.game-tile .tile-name{color:var(--brand-ink)}
.game-tile .tile-meta{color:var(--muted)}
.tile-check:not(#_){background:#fff;color:#1c2433}
.is-selected .tile-check:not(#_){background:#1c2433;color:#fff}

/* Sound toggle, late join, and "Share my moment" (2026-09-26). */
.header-end{display:flex;align-items:center;gap:12px;min-width:0}
.sound-toggle{width:44px;height:44px;min-height:44px}
.sound-toggle.on{border-color:#087f98;background:#e8f5f8;color:#087f98}
.waiting-screen h2{margin:4px 0 10px}
.waiting-screen>p{font-size:1.0625rem}
.waiting-now{display:grid;gap:4px;margin:18px 0 12px;padding:14px 16px;border:3px solid #1c2433;border-radius:var(--btn-radius,14px);background:#fff;color:#1c2433}
.waiting-now .eyebrow{margin:0;color:#4b5563}
.waiting-now strong{font-family:'Baloo 2','Nunito',sans-serif;font-size:1.5rem;line-height:1.1}
.waiting-next{font-weight:800}
.joined-tag{display:block;font-size:0.75rem;font-weight:700;color:var(--muted);letter-spacing:0;text-transform:none}
.joining-note{margin:10px 0 0;font-weight:800}
.waiting-list{margin-top:16px;padding-top:12px;border-top:1px solid var(--quiet-line,#d8d3c8)}
.waiting-list h3{margin:0 0 6px}
.waiting-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:6px 0}
.waiting-row span{display:grid;min-width:0}.waiting-row b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.waiting-row small{font-size:0.75rem;color:var(--muted)}
.result-actions .full+.full{margin-top:10px}
/* 44px tap targets in More options: the switch keeps its 53x30 track inside a 44px-tall hit area. */
.switch:not(#_){height:44px;min-height:44px;border:7px solid transparent;border-width:7px 0;background-clip:padding-box;border-radius:14px/21px}
.pack-chip,.pack-setting.compact .pack-chip{min-height:44px}

/* ---- HIG batch 2026-10-06 ---- */
/* Dynamic Type: on touch devices Safari sizes -apple-system-body from the Larger Text setting; everything is in rem, so it follows. Android Chrome scales rem natively. Desktop keeps 16px. */
@supports (font:-apple-system-body){@media (hover:none) and (pointer:coarse){html{font:-apple-system-body;font-family:'Nunito',ui-rounded,system-ui,sans-serif;line-height:1.45}}}
/* Liquid Glass: the header is the one functional layer; content scrolls under it. Scroll edge effect instead of a hard border. */
body:not([data-surface=tv]) header{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.58);-webkit-backdrop-filter:blur(18px) saturate(1.5);backdrop-filter:blur(18px) saturate(1.5)}
/* Regular Liquid Glass adjusts luminosity to the content under it: dark game themes get a dark tint so the light wordmark keeps its contrast. */
body[data-surface=dark]:not([data-surface=tv]) header{background:rgba(18,22,30,.62)}body[data-surface=dark]:not([data-surface=tv]) header::after{background:linear-gradient(rgba(18,22,30,.5),rgba(18,22,30,0))}
@media (prefers-reduced-transparency:reduce){body[data-surface=dark]:not([data-surface=tv]) header{background:#161a21;border-bottom-color:#3a4150}}
@media (prefers-contrast:more){body[data-surface=dark]:not([data-surface=tv]) header{background:#0d1016;border-bottom-color:#fff}}
body:not([data-surface=tv]) header::after{content:'';position:absolute;left:0;right:0;top:100%;height:16px;background:linear-gradient(rgba(255,255,255,.65),rgba(255,255,255,0));opacity:0;transition:opacity .2s;pointer-events:none}
body.scrolled:not([data-surface=tv]) header::after{opacity:1}
@media (prefers-reduced-transparency:reduce){body:not([data-surface=tv]) header{background:#fff;backdrop-filter:none;-webkit-backdrop-filter:none;border-bottom:1px solid #dfe5e7}.channel-dialog::backdrop{backdrop-filter:none;background:#253345d9}}
@media (prefers-contrast:more){button,.console-button,.icon-btn{border-color:currentColor}.channel-dialog{border:2px solid #253345}.channel-dialog::backdrop{background:#101820e6;backdrop-filter:none}#toast{border:2px solid #654d23}.chip-track{outline:1px solid #253345}body:not([data-surface=tv]) header{background:#fff;backdrop-filter:none;border-bottom:2px solid #253345}}
/* Unavailable state is distinct, not just dim. */
button:disabled,.round-options button:disabled{cursor:not-allowed;opacity:.42;border-style:dashed;box-shadow:none}
/* Last five seconds: color change first, one buzz on the same frame, pulse only when motion is allowed. */
.timer.urgent{border-color:#ce5428;color:#a3391a;background:#fff1ec}
@media (prefers-reduced-motion:no-preference){.timer.urgent{animation:timer-pulse 1s cubic-bezier(.23,1,.32,1) infinite}}
@keyframes timer-pulse{from{transform:scale(1.1)}to{transform:scale(1)}}
/* Intro animations can be skipped by anyone with a tap; the static sticker takes their place. */
.ga{cursor:pointer}.ga-static{display:grid;place-items:center;min-height:120px}.ga-static svg,.ga-static img{width:120px;height:120px}
.ga-skip-hint{text-align:center;margin:4px 0 0}
.help-haptics{margin:14px 0 0}.help-haptics button{min-height:44px}
/* Header never overflows at large text: the status label yields first, then the brand word. */
body:not([data-surface=tv]) header{gap:8px}body:not([data-surface=tv]) header .brand{min-width:0;flex-shrink:1}body:not([data-surface=tv]) .header-end{min-width:0;flex-shrink:1;gap:6px}#connection{min-width:0;max-width:34vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:420px){#connection{max-width:26vw}}

/* Demo night */
.bot-tag{display:inline-block;font-size:.6875rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;padding:1px 6px;border-radius:999px;background:#e8f5f8;color:#087f98;vertical-align:middle;margin-left:4px}
body[data-surface=dark] .bot-tag{background:#ffffff22;color:var(--brand-ink)}

/* Group-first beta: hierarchy, persistent feedback, and visible session commitment. */
.mode-options{gap:12px;margin:18px 0}
.mode-options button:not(#_){padding:16px 18px;background:#fff;color:#1c2433;border:2px solid #74818b}
.mode-options button strong{font-size:1.25rem}
.mode-options .party-primary:not(#_){background:#087f98;color:#fff;border-color:#087f98;padding:22px}
.mode-options .party-primary strong{font-size:2rem}
.party-primary img{float:right;margin:0 0 8px 12px}
.mode-options .learn-bots:not(#_){background:transparent;border:0;border-top:1px solid #74818b;border-radius:0;margin-top:8px}
.mode-options .learn-bots strong{font-size:1rem;text-decoration:underline;text-underline-offset:4px}
.mode-options button span{line-height:1.45}
.session-presets{border:0;padding:0;margin:16px 0;min-width:0}
.session-presets legend{font-weight:800;margin-bottom:8px}
.session-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.session-options button:not(#_){min-height:64px;padding:12px;background:#fff;color:#1c2433;border:2px solid #74818b;text-align:left}
.session-options button[aria-pressed=true]:not(#_){background:#087f98;color:#fff;border-color:#087f98}
.session-options span{display:block;font-size:.875rem;font-weight:500;margin-top:4px}
.session-options button:disabled{opacity:1;cursor:default}
.locked-response,.round-reaction{display:flex;align-items:center;gap:14px;margin:18px 0}
.locked-response svg,.round-reaction svg{flex-shrink:0}
.locked-response p,.round-reaction p{margin:4px 0;line-height:1.5}
.round-breath{font-size:1rem}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.session-options button:focus-visible,.mode-options button:focus-visible{outline:3px solid #1c2433;outline-offset:4px}
@media(max-width:360px){.session-options{grid-template-columns:1fr}}

.lobby-mode{margin:10px 0}.lobby-mode>summary{min-height:44px;display:list-item;padding:10px 0;font-size:1rem}
.lobby-mode .mode-switch{flex-wrap:wrap}
.lobby-start{margin-top:14px}
.lobby-start .seat-status{margin:6px 0}
.stage .micro{font-size:.875rem;line-height:1.45}
.session-presets{margin:12px 0}
.session-presets .micro{margin:6px 0}

/* Deliberate shared-board mode; scrollable controls work on compact phones too. */
dialog.tabletop-host[open]{position:fixed;inset:0;box-sizing:border-box;width:100%;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;border-radius:0;background:#f8f7f2;color:#233142;display:grid;grid-template-rows:minmax(200px,1fr) auto;overflow:auto}
.tabletop-host iframe{width:100%;height:100%;min-height:200px;border:0;background:#f8f7f2}
.tabletop-controls{padding:18px max(18px,env(safe-area-inset-right)) max(18px,env(safe-area-inset-bottom));display:flex;flex-wrap:wrap;gap:12px;align-content:start;border-top:2px solid #233142}
.tabletop-controls strong,.tabletop-controls p{flex-basis:100%;margin:0}.tabletop-controls p{font-size:1rem;line-height:1.5}.tabletop-controls button{min-height:48px}
.tabletop-cover{grid-area:1/1/3/2;align-self:stretch;padding:32px;display:grid;place-content:center;gap:20px;background:#f8f7f2;font-size:1.3rem}
.tabletop-host [hidden]{display:none!important}
@media(min-height:650px) and (min-width:650px){dialog.tabletop-host[open]{grid-template-rows:minmax(0,1fr) minmax(0,1fr)}.tabletop-controls{overflow:auto}}
/* Native Duo geometry includes the system's reserved fold margins. */
:root[data-duo-division="horizontal"] dialog.tabletop-host[open]{grid-template-rows:var(--duo-before) var(--duo-gap) minmax(0,1fr);grid-template-columns:minmax(0,1fr)}
:root[data-duo-division="horizontal"] .tabletop-host iframe{grid-row:1;min-height:0}
:root[data-duo-division="horizontal"] .tabletop-controls{grid-row:3;overflow:auto}
:root[data-duo-division="vertical"] dialog.tabletop-host[open]{grid-template-columns:var(--duo-before) var(--duo-gap) minmax(0,1fr);grid-template-rows:minmax(0,1fr)}
:root[data-duo-division="vertical"] .tabletop-host iframe{grid-column:1;min-height:0}
:root[data-duo-division="vertical"] .tabletop-controls{grid-column:3;overflow:auto;border-top:0}
:root[data-duo-division] .tabletop-cover{grid-area:1/1/-1/-1}

/* Familiar symbols support short action labels; decorative SVGs do not repeat spoken names. */
.action-symbol{width:1.2em;height:1.2em;display:inline-block;vertical-align:-.23em;margin-inline-end:.45em;flex-shrink:0}

/* Approved shared typography, October 9: exact bundled weights, no network font dependency. */
@font-face{font-family:OopsOutfit;src:url('/fonts/oopsoutfit-semibold.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:OopsNunitoSans;src:url('/fonts/oopsnunitosans-regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
body{font-family:OopsNunitoSans,system-ui,sans-serif}
button,.mode-options strong,.channel-detail h2,.session-presets legend{font-family:OopsOutfit,system-ui,sans-serif;font-weight:600}
.mode-options button:not(#_){padding:14px 16px;min-height:64px}
.mode-options button strong{font-size:1.125rem;letter-spacing:0}
.mode-options button.party-primary strong{font-size:1.875rem}
.mode-options button.party-primary img{background:#f8f7f3;border-radius:50%;padding:6px}
.mode-options button span{font-size:.875rem;line-height:1.4}
.simple-help{flex-wrap:wrap;gap:8px 16px}
.simple-help a{min-height:44px;display:inline-flex;align-items:center}

/* Link options in the mode picker (Chip Scramble, Challenge a friend) match the card buttons beside them. */
.mode-options a.mode-link:not(#_){display:block;padding:14px 16px;min-height:64px;background:#fff;color:#1c2433;border:2px solid #74818b;border-radius:var(--btn-radius,16px);text-decoration:none}
.mode-options a.mode-link:hover{background:#f1f4f4}
.mode-options a.mode-link:focus-visible{outline:3px solid #1c2433;outline-offset:4px}
.mode-options a.mode-link strong{font-size:1.125rem;letter-spacing:0}

/* ===== Oops Stages (release 2026-10-10) =====
   Each game is a place. A framed scene window sits at the top of the play area, like a handheld's top screen,
   with the game's own mascot standing in it. Everything below it (prompt, inputs, chips, results) stays plain.
   Scenes are decorative (pseudo-element, no text a reader needs); --scene, --scene-mascot, --scene-bg per game. */
body:is([data-game=quips],[data-game=number],[data-game=clock],[data-game=brain],[data-game=imposter],[data-game=shadow],[data-game=rhythm],[data-game=auction],[data-game=draft],[data-game=draw]) .stage::before{content:'';display:block;height:clamp(108px,32vw,176px);margin:2px 0 20px;border:3px solid #1c2433;border-radius:22px;box-shadow:0 4px 0 #1c2433;background-color:var(--scene-bg,#CBE8EB);background-repeat:no-repeat;background-image:var(--scene-mascot),var(--scene);background-size:auto 74%,cover;background-position:82% 96%,center}
body[data-game=quips]{--scene:url('/art/stages/quips.svg');--scene-mascot:url('/art/quips.svg');--scene-bg:#4b2140}
body[data-game=number]{--scene:url('/art/stages/number.svg');--scene-mascot:url('/art/number.svg');--scene-bg:#173a5c}
body[data-game=number] .stage{border-top:0;padding-top:0}
body[data-game=number] .stage::before{background-position:94% 96%,center}
body[data-game=clock]{--scene:url('/art/stages/clock.svg');--scene-mascot:url('/art/clock.svg');--scene-bg:#2d3a6b}
body[data-game=brain]{--scene:url('/art/stages/brain.svg');--scene-mascot:url('/art/brain.svg');--scene-bg:#f8d9e0}
body[data-game=imposter]{--scene:url('/art/stages/imposter.svg');--scene-mascot:url('/art/imposter.svg');--scene-bg:#263e32}
body[data-game=shadow]{--scene:url('/art/stages/shadow.svg');--scene-mascot:url('/art/shadow.svg');--scene-bg:#1d2430}
body[data-game=rhythm]{--scene:url('/art/stages/rhythm.svg');--scene-mascot:url('/art/rhythm.svg');--scene-bg:#22301f}
body[data-game=auction]{--scene:url('/art/stages/auction.svg');--scene-mascot:url('/art/auction.svg');--scene-bg:#6b2a24}
body[data-game=draft]{--scene:url('/art/stages/draft.svg');--scene-mascot:url('/art/draft.svg');--scene-bg:#3b2a22}
body[data-game=draw]{--scene:url('/art/stages/draw.svg');--scene-mascot:url('/art/draw.svg');--scene-bg:#fbf8ec}
/* Shadowbox runs on a dark page: give its scene window a cream frame so it reads as a window, not a hole. */
body[data-game=shadow] .stage::before{border-color:#efe4c8;box-shadow:0 4px 0 #efe4c8}
/* Shared HUD (2026-10-10): sticker pills for round, timer, chips, 1v1 score. Same ink outline as the scene window. */
.hud{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 18px;position:relative;z-index:1}
.stage .hud .hud-pill{display:inline-flex;align-items:center;gap:6px;width:auto;height:auto;min-height:34px;padding:3px 12px;border:2.5px solid #1c2433;border-radius:999px;background:#f8f7f3;color:#1c2433;font:800 .9375rem/1 'Baloo 2','Nunito',ui-rounded,sans-serif;font-variant-numeric:tabular-nums;letter-spacing:0;text-transform:none;white-space:nowrap;box-shadow:0 3px 0 #1c2433}
.stage .hud .hud-round{background:#cbe8eb}
.stage .hud .hud-pill.timer{background:#f4cd72;min-width:62px;justify-content:center}
.stage .hud .hud-pill.timer::before{content:'';width:12px;height:12px;border:2.5px solid currentColor;border-radius:50%;background:linear-gradient(currentColor,currentColor) 50% 25%/2.5px 45% no-repeat;flex-shrink:0}
.stage .hud .hud-pill.timer.urgent{background:#e98d7d;color:#1c2433;border-color:#1c2433}
.stage .hud .hud-chips::before{content:'';width:15px;height:15px;border-radius:50%;border:2px solid #1c2433;background:radial-gradient(#f8f7f3 0 34%,#087f98 37% 100%);flex-shrink:0}
/* On a game with a scene window, the pills sit on its bottom edge. */
body:is([data-game=quips],[data-game=number],[data-game=clock],[data-game=brain],[data-game=imposter],[data-game=shadow],[data-game=rhythm],[data-game=auction],[data-game=draft],[data-game=draw]) .stage>.hud{margin:-39px 0 20px 14px}
/* Round title card: the scene grows and the mascot steps forward; name, one-line goal, RULES pill. */
body[data-game] #app[data-phase=reveal] .stage::before{height:clamp(176px,50vw,260px);background-size:auto 90%,cover;background-position:84% 100%,center}
.title-card{margin:0 0 12px}
.title-card .eyebrow{margin-bottom:4px}
.stage .title-card h2{font-size:clamp(2.5rem,11vw,3.75rem);line-height:1;margin:0 0 8px}
.title-card .tc-goal{font-size:1.25rem;font-weight:700;line-height:1.3;margin:0 0 14px}
.tc-rules>summary{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 18px;border:2.5px solid #1c2433;border-radius:999px;background:#f4cd72;color:#1c2433;font:800 .9375rem/1 'Baloo 2','Nunito',ui-rounded,sans-serif;letter-spacing:.08em;text-transform:uppercase;box-shadow:0 3px 0 #1c2433;cursor:pointer;list-style:none;user-select:none;transition:transform 160ms cubic-bezier(.23,1,.32,1),box-shadow 160ms cubic-bezier(.23,1,.32,1)}
.tc-rules>summary::-webkit-details-marker{display:none}
.tc-rules>summary::after{content:'';width:7px;height:7px;border:solid currentColor;border-width:0 2.5px 2.5px 0;transform:translateY(-2px) rotate(45deg);transition:transform 160ms cubic-bezier(.23,1,.32,1)}
.tc-rules[open]>summary::after{transform:translateY(2px) rotate(-135deg)}
.tc-rules>summary:active{transform:translateY(2px);box-shadow:0 1px 0 #1c2433}
.tc-rules>summary:focus-visible{outline:3px solid var(--focus,#087f98);outline-offset:3px}
.tc-rules>p{margin:12px 0 0}
@media(prefers-reduced-motion:reduce){.tc-rules>summary,.tc-rules>summary::after{transition:none}}
body[data-game=draft] .stage::before{background-position:82% 96%,50% 92%}
body[data-game=draft] #app[data-phase=reveal] .stage::before{background-position:96% 100%,50% 92%}
/* Pot view (2026-10-10, Clark picked E + D): top-down table up to 6 players, "who's in" bar above that. */
.pot-view{margin:6px 0 14px}
.pv-table{position:relative;height:clamp(250px,72vw,290px);max-width:440px;margin:6px auto 26px}
.pv-felt{position:absolute;inset:50px 46px 52px;border:3px solid #1c2433;border-radius:50%/46%;background:radial-gradient(ellipse at 50% 38%,#3c8a70,#2f6f5b 72%);box-shadow:inset 0 0 0 7px #24513f,0 4px 0 #1c2433}
.pv-felt>span{position:absolute;translate:-50% -50%}
.pv-chip{display:block;width:22px;height:22px;animation:pv-drop 240ms cubic-bezier(.23,1,.32,1) both;animation-delay:calc(var(--i,0) * 30ms)}
@keyframes pv-drop{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
.pv-total{position:absolute;left:50%;top:60%;translate:-50% -50%;margin:0;padding:3px 12px;background:#f8f7f3;color:#1c2433;border:2.5px solid #1c2433;border-radius:999px;box-shadow:0 3px 0 #1c2433;font:800 1.25rem/1.1 'Baloo 2','Nunito',sans-serif;white-space:nowrap;font-variant-numeric:tabular-nums}
.pv-total span{font-size:.75rem;letter-spacing:.08em;text-transform:uppercase}
.pv-seats{list-style:none;margin:0;padding:0}
.pv-seat{position:absolute;translate:-50% -50%;display:flex;flex-direction:column;align-items:center;gap:2px;font:800 .8125rem/1.1 'Baloo 2','Nunito',sans-serif;text-align:center;color:#1c2433}
.pv-name{background:#f8f7f3;border:2px solid #1c2433;border-radius:999px;padding:1px 7px;max-width:84px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pv-amt{background:#fff;border:2px solid #1c2433;border-radius:999px;padding:1px 8px;font-variant-numeric:tabular-nums}
.pv-seat.is-turn .pv-name{background:#f4cd72}
.pv-seat.is-turn svg{filter:drop-shadow(0 0 7px #f4cd72)}
.pv-seat.is-out svg{opacity:.45}.pv-seat.is-out :is(.pv-name,.pv-amt){color:#4a5361;border-style:dashed}
.pv-bar{background:#fff;color:#1c2433;border:2.5px solid #1c2433;border-radius:18px;box-shadow:0 3px 0 #1c2433;padding:12px 14px}
.pv-head{display:flex;justify-content:space-between;align-items:baseline;margin:0 0 8px;font:800 .8125rem/1 'Baloo 2','Nunito',sans-serif;letter-spacing:.08em;text-transform:uppercase}
.pv-head b{font-size:2rem;letter-spacing:0;font-variant-numeric:tabular-nums}
.pv-track{display:flex;height:24px;border:2.5px solid #1c2433;border-radius:999px;overflow:hidden;background:#eef1f4}
.pv-track span{border-right:2.5px solid #1c2433}.pv-track span:last-child{border-right:0}
.pv-who{list-style:none;margin:10px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px 10px}
.pv-who li{display:flex;align-items:center;gap:6px;min-width:0}
.pv-who b{display:block;font-size:.875rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pv-who small{display:block;font-size:.75rem;color:#55606e}
.pv-who li.is-turn b{background:#f4cd72;border-radius:6px;padding:0 4px}
.pv-who li.is-out svg{opacity:.45}.pv-who li.is-out b{color:#4a5361}
@media(prefers-reduced-motion:reduce){.pv-chip{animation:none}}
/* Chip faces (from release/oops-faces-2026-10-06, f1bf0d7; ported 2026-10-10) */
.face{width:1.5em;height:1.5em;vertical-align:-.45em;margin-right:6px;flex:none}
.lobby-roster span{display:inline-flex;align-items:center}
.chip-label span{display:inline-flex;align-items:center;gap:0}
.score .name{display:inline-flex;align-items:center}
/* The All In moment: one flash, one card, one buzz, same frame. */
.allin-moment{position:fixed;inset:0;z-index:60;display:grid;place-items:center;pointer-events:none}
.allin-flash{position:absolute;inset:0;background:#E98D7D;opacity:0;animation:allin-flash .55s cubic-bezier(.23,1,.32,1) both}
@keyframes allin-flash{0%{opacity:0}12%{opacity:.85}100%{opacity:0}}
.allin-card{position:relative;display:grid;place-items:center;gap:2px;padding:22px 34px 20px;border-radius:28px;background:#fff8ee;color:#1c2433;border:4px solid #1c2433;box-shadow:0 18px 60px #1c243355;transform-origin:center;animation:allin-card 1.8s cubic-bezier(.23,1,.32,1) both}
.allin-card strong{font-family:'Baloo 2','Nunito',sans-serif;font-size:2.6rem;line-height:1;letter-spacing:-.02em;color:#ce5428;text-transform:uppercase}
.allin-card span{font-weight:700;font-size:1rem;color:#4a5560}
.allin-face{margin:0 0 6px}
@keyframes allin-card{0%{opacity:0;transform:scale(.6) rotate(-4deg)}14%{opacity:1;transform:scale(1.06) rotate(1deg)}22%{transform:scale(1) rotate(0)}80%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(.96) translateY(-8px)}}
@media (prefers-reduced-motion:reduce){.allin-flash{display:none}.allin-card{animation:allin-fade 1.8s linear both}@keyframes allin-fade{0%{opacity:0}10%,80%{opacity:1}100%{opacity:0}}}
.allin-card .allin-face{width:110px;height:110px;margin:0 0 6px}
/* Hero art (Clark approved 2026-10-10): the podium at the end of the night. The first screen stays logo + two buttons (Clark). */
.night-art{margin:0 0 18px;aspect-ratio:1264/848;border:3px solid #1c2433;border-radius:22px;box-shadow:0 4px 0 #1c2433;overflow:hidden;background:#0f5a63}
.night-art img{display:block;width:100%;height:100%;object-fit:cover}

/* October 15: keep the room's color continuous behind the sticky controls. */
body:not([data-surface=tv]) header{background:inherit;backdrop-filter:none;-webkit-backdrop-filter:none}
body:not([data-surface=tv]) header::after{background:none}
.answer-reveal-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:16px;margin:22px 0}
.answer-reveal-card{min-width:0;padding:18px;background:var(--card,#fff);border:2px solid currentColor;border-radius:18px;box-shadow:0 4px 0 currentColor}
.answer-reveal-card .answer-player{display:flex;gap:10px;align-items:center;font-weight:700}
.answer-reveal-card .answer-value{font:600 1.65rem/1.25 OopsOutfit,system-ui,sans-serif;margin:18px 0 12px;overflow-wrap:anywhere;color:var(--text)}
.answer-reveal-card .answer-note{font-size:.95rem;margin:0}
.answer-reveal-card.is-winner{border-color:var(--accent,#087f98)}
.answer-reveal-card.reveal-once{animation:answer-turn .5s ease-out both;animation-delay:calc(var(--answer-order) * 110ms);transform-origin:50% 0}
@keyframes answer-turn{from{opacity:0;transform:perspective(600px) rotateX(-75deg)}to{opacity:1;transform:none}}
.pot-controls{padding:20px;border:2px solid currentColor;border-radius:20px;background:var(--card,#fff);box-shadow:0 4px 0 currentColor;margin:20px 0}
.pot-controls .pot-rule{font:600 1.35rem/1.3 OopsOutfit,system-ui,sans-serif;margin:0 0 14px}
.pot-controls .pot-status,.pot-controls .pot-mine{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:12px 14px;border-radius:12px;background:var(--bg);margin:10px 0}
.pot-controls .pot-status b{font-size:1.5rem}
.pot-controls .pot-waiting{display:flex;gap:12px;align-items:center;font-weight:700}
@media(prefers-reduced-motion:reduce){.answer-reveal-card.reveal-once{animation:none}}

.finale-modes[hidden]{display:none}

.pot-controls{background:#f8f7f3;color:#1c2433}
body[data-game] .pot-controls p{color:#1c2433}
.pot-controls .pot-status,.pot-controls .pot-mine{background:#e5eff0}

.result-prompt{font-weight:700;font-size:1.2rem;margin:24px 0 0}