/* Fill the Blank - aplexotools.com/blank. Self-contained: the site's own fonts, no outside requests.
   One page, four views on <body data-view>: front (the door), seat (name + character), board (a TV), phone (a hand
   in a TV game) and online (the table with characters and a chat). The stage, the prompt, the hand and the seats are
   the same DOM in every view; only the layout changes. Motion follows the gate at the top (--m / --play / --k-*). */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('/fonts/inter-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Sora'; font-style: normal; font-weight: 600 700; font-display: swap; src: url('/fonts/sora-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Inter Fallback'; src: local('Arial'), local('Helvetica'); size-adjust: 107%; ascent-override: 90%; descent-override: 22%; line-gap-override: 0%; }
@font-face { font-family: 'Sora Fallback'; src: local('Arial'), local('Helvetica'); size-adjust: 113%; }

:root {
  color-scheme: dark;
  --css-v: 12;       /* this stylesheet's stamp (the ?v= index.html loads it with): the script asks for its own stylesheet if another is on the page */
  --bg: #0a0910; --surface: #14121c; --surface-2: #1a1826; --line: rgba(255,255,255,.08); --line-2: rgba(255,255,255,.14);
  --text: #f2f0f8; --muted: #a8a4b9; --dim: #716d82;
  --purple: #a335ee; --orange: #ff8000; --pink: #e268a8; --gold: #e5cc80; --teal: #2dd4bf; --blue: #3b82f6; --red: #f43f5e; --green: #3aa655;
  --parse: linear-gradient(90deg, var(--purple), var(--pink) 55%, var(--gold));
  --acc-grad: linear-gradient(135deg, #b23ef0, #d04aa6 60%, #e0659d);
  --paper: #fbf8f1; --paper-2: #efe9dc; --ink: #1a1620;
  --display: Sora, 'Sora Fallback', Inter, system-ui, sans-serif; --font: Inter, 'Inter Fallback', system-ui, -apple-system, "Segoe UI", sans-serif;
  --ease: cubic-bezier(.2,.7,.2,1); --bounce: cubic-bezier(.34,1.56,.64,1);
  --sat: env(safe-area-inset-top, 0px); --sab: env(safe-area-inset-bottom, 0px);
  /* ---- motion gate ----
     Full is the default for everyone, also on a device that asks for less motion (no media query here switches anything
     off). Calm (html.motion-reduced) is the visitor's own choice, made in Settings here or on the front page.
     Loops are built so their 0% frame is a complete still pose, so pausing them (Calm) leaves nothing missing.
     One-shot entrances take their keyframe name from --k-*, which is `none` in Calm. The script reads --m too. */
  --m: 1; --play: running; --k-rise: rise; --k-pop: pop; --k-deal: deal; --k-flip: flip; --k-land: land; --k-win: win; --k-react: react; --k-shake: shake; --k-in: fade-in; --k-plus: plus;
}
html.motion-reduced { --m: 0; --play: paused; --k-rise: none; --k-pop: none; --k-deal: none; --k-flip: none; --k-land: none; --k-win: none; --k-react: none; --k-shake: none; --k-in: none; --k-plus: none; }
html.hidden-tab { --play: paused; } /* loops rest while the tab is in the background */

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { background: var(--bg); -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; min-height: 100dvh; color: var(--text); font: 15px/1.55 var(--font); overflow-x: hidden; -webkit-tap-highlight-color: transparent;
  background:
    radial-gradient(900px 560px at 15% -10%, rgba(163,53,238,.22), transparent 62%),
    radial-gradient(700px 480px at 100% 10%, rgba(226,104,168,.12), transparent 60%),
    radial-gradient(800px 500px at 60% 110%, rgba(229,204,128,.07), transparent 60%),
    var(--bg);
}
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background-image: radial-gradient(rgba(255,255,255,.07) 1px, transparent 1.2px); background-size: 22px 22px;
  mask-image: radial-gradient(70% 55% at 50% 0%, rgba(0,0,0,.9), transparent); -webkit-mask-image: radial-gradient(70% 55% at 50% 0%, rgba(0,0,0,.9), transparent);
}
a { color: inherit; text-decoration: none; }
button, input, select, output { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--pink); outline-offset: 3px; border-radius: 8px; }
.ic { width: 1.1em; height: 1.1em; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 14px; border-radius: 10px; background: var(--pink); color: #fff; font-weight: 600; }
.skip:focus { top: 12px; }
header, main { position: relative; z-index: 1; }
.grad { background: var(--parse); -webkit-background-clip: text; background-clip: text; color: transparent; }
kbd { font: 600 11px var(--font); letter-spacing: .04em; padding: 1px 6px; border-radius: 6px; background: rgba(0,0,0,.3); border: 1px solid rgba(255,255,255,.16); color: rgba(255,255,255,.8); }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--pink); margin: 0 0 12px; }
.eyebrow::before { content: ""; width: 20px; height: 2px; border-radius: 2px; background: var(--parse); }
.lbl2 { font-weight: 600; font-size: 13.5px; }
.lbl-hint { color: var(--dim); font-size: 12px; }
.link-btn { background: none; border: 0; padding: 0; color: var(--pink); font-weight: 600; font-size: inherit; cursor: pointer; }
.link-btn:hover { text-decoration: underline; }
.form-err { margin: 8px 0 0; min-height: 1.3em; color: #ffb4c0; font-size: 13px; }
.form-err:empty { display: none; }

/* ---------- header ---------- */
.top { display: flex; align-items: center; gap: 10px; padding: calc(12px + var(--sat)) 16px 10px; z-index: 30; }
.brand { display: flex; align-items: center; gap: 10px; font: 700 17px var(--display); letter-spacing: -.01em; white-space: nowrap; }
.brand img { width: 34px; height: 34px; border-radius: 10px; box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 8px 24px -10px rgba(226,104,168,.8); }
.crumb { color: var(--muted); font-weight: 500; font-size: 14px; white-space: nowrap; }
.crumb .sep { color: var(--dim); margin: 0 10px 0 2px; }
.code-chip { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; border-radius: 11px; border: 1px solid rgba(229,204,128,.35); background: rgba(229,204,128,.08); color: var(--text); font-weight: 600; font-size: 13px; transition: background .15s, border-color .15s; }
.code-chip:hover { background: rgba(229,204,128,.14); border-color: rgba(229,204,128,.6); }
.code-chip .code-lbl { color: var(--dim); font-weight: 500; }
.code-chip b { font: 700 15px var(--display); letter-spacing: .14em; color: var(--gold); }
.code-chip .ic { width: 14px; height: 14px; color: var(--dim); }
.conn { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 600; color: #ffd9a8; background: rgba(255,128,0,.12); border: 1px solid rgba(255,128,0,.4); }
.conn i { width: 8px; height: 8px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 0 rgba(255,128,0,.6); animation: pulse 1.4s ease-out infinite var(--play); }
.conn.down { color: #ffb4c0; background: rgba(244,63,94,.12); border-color: rgba(244,63,94,.4); } .conn.down i { background: var(--red); }
@keyframes pulse { 70% { box-shadow: 0 0 0 7px rgba(255,128,0,0); } 100% { box-shadow: 0 0 0 0 rgba(255,128,0,0); } }
.top-actions { margin-left: auto; display: flex; gap: 6px; }
.icon-btn { position: relative; width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--line-2); background: rgba(255,255,255,.03); color: var(--muted); display: grid; place-items: center; cursor: pointer; transition: color .15s, background .15s, border-color .15s; }
.icon-btn:hover { color: var(--text); background: rgba(255,255,255,.07); }
.icon-btn .ic { width: 20px; height: 20px; }
.icon-btn .off { display: none; }
.icon-btn[aria-pressed="true"] .on { display: none; }
.icon-btn[aria-pressed="true"] .off { display: block; }
#speechBtn[aria-pressed="true"] { color: var(--gold); border-color: rgba(229,204,128,.5); background: rgba(229,204,128,.1); }
#speechBtn[aria-pressed="true"] .on { display: block; }
.icon-btn[aria-expanded="true"] { color: var(--pink); border-color: rgba(226,104,168,.4); background: rgba(226,104,168,.1); }
.icon-btn .cnt { position: absolute; top: -5px; right: -5px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--pink); color: #fff; font: 700 11px/18px var(--font); text-align: center; }
@media (max-width: 760px) { .crumb { display: none; } }
@media (max-width: 600px) { .brand span { display: none; } .top { padding-left: 12px; padding-right: 12px; } }
@media (max-width: 420px) { .top-actions { gap: 4px; } .icon-btn { width: 36px; height: 36px; } .code-chip { height: 34px; padding: 0 9px; } .code-chip .code-lbl { display: none; } }
@media (max-width: 360px) { #helpBtn { display: none; } }
@media (max-width: 340px) { .top { gap: 6px; padding-left: 8px; padding-right: 8px; } .code-chip { padding: 0 7px; gap: 5px; } }   /* the smallest phones: an online table's header (code, players, chat, settings, leave) was 4 px wider than the screen */
/* an online table has one button more up here (reading aloud): on a phone the sound button steps aside (Sounds is in Settings too), or the row is wider than the screen */
@media (max-width: 420px) { body[data-mode="online"]:not([data-view="front"]) #soundBtn { display: none; } }

/* ---------- shared controls (the house style) ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 16px; border-radius: 12px; border: 1px solid var(--line-2); background: rgba(255,255,255,.04); color: var(--text); font-weight: 600; font-size: 14px; cursor: pointer; transition: background .15s, border-color .15s, transform .15s var(--ease), filter .15s; min-height: 44px; }
.btn:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.25); }
.btn.primary { border-color: transparent; color: #fff; background: var(--acc-grad); box-shadow: 0 10px 28px -12px rgba(214,71,170,.9), inset 0 1px 0 rgba(255,255,255,.18); }
.btn.primary:hover { filter: brightness(1.07); transform: translateY(calc(-1px * var(--m))); }
.btn.gold { border-color: transparent; color: #2a2010; background: linear-gradient(135deg, #f6e3a1, #e5cc80 60%, #d9b45c); box-shadow: 0 10px 28px -12px rgba(229,204,128,.9), inset 0 1px 0 rgba(255,255,255,.4); }
.btn.gold:hover { filter: brightness(1.05); }
.btn.ghost { border-color: transparent; background: transparent; color: var(--muted); }
.btn.ghost:hover { color: var(--text); background: rgba(255,255,255,.05); }
.btn.danger { border-color: rgba(244,63,94,.5); color: #ffb4c0; background: rgba(244,63,94,.1); }
.btn.danger:hover { background: var(--red); border-color: var(--red); color: #fff; }
.btn.big { padding: 14px 26px; font-size: 16px; border-radius: 16px; min-height: 52px; }
.btn[disabled], .mini-btn[disabled] { opacity: .5; cursor: default; pointer-events: none; }
.mini-btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 11px; border-radius: 9px; border: 1px solid var(--line-2); background: rgba(255,255,255,.03); color: var(--muted); font-size: 12.5px; font-weight: 500; cursor: pointer; transition: color .15s, background .15s, border-color .15s; min-height: 32px; }
.mini-btn .ic { width: 14px; height: 14px; }
.mini-btn:hover { color: var(--text); background: rgba(255,255,255,.07); }
.mini-btn.danger:hover { color: #ffb4c0; border-color: rgba(244,63,94,.45); }
.mini-btn.armed { color: #fff; background: var(--red); border-color: var(--red); }
.win-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
@media (max-width: 480px) { .win-actions { flex-direction: column; } .win-actions .btn { width: 100%; } }
.seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; padding: 4px; border-radius: 12px; background: rgba(0,0,0,.28); border: 1px solid var(--line); }
.seg label { position: relative; display: block; min-width: 0; }
.seg input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.seg span { display: block; text-align: center; padding: 8px 8px; border-radius: 9px; font-size: 13px; font-weight: 600; color: var(--muted); transition: background .2s, color .2s, box-shadow .2s; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.seg input:checked + span { color: #fff; background: rgba(255,255,255,.1); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
.seg input:focus-visible + span { outline: 2px solid var(--pink); outline-offset: 2px; }
.seg input:hover:not(:checked):not(:disabled) + span { color: var(--text); background: rgba(255,255,255,.05); }
.seg input:disabled + span { cursor: default; }
.seg input:disabled:checked + span { color: var(--gold); }
.row { display: grid; gap: 8px; }
.row + .row { margin-top: 18px; }
.row-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.row-note { margin: 2px 0 0; color: var(--muted); font-size: 12.5px; line-height: 1.5; }
.row-note b { color: var(--text); font-weight: 600; }
.row-end { display: flex; flex-wrap: wrap; gap: 8px; }
.voice-pick { display: flex; gap: 8px; align-items: stretch; }
.voice-pick select { flex: 1; min-width: 0; min-height: 44px; padding: 8px 12px; border-radius: 12px; border: 1px solid var(--line-2); background: rgba(0,0,0,.3); color: var(--text); font-size: 14px; }
.voice-pick select:focus { outline: none; border-color: rgba(226,104,168,.6); box-shadow: 0 0 0 3px rgba(226,104,168,.18); }
.voice-pick select option { background: #14121c; color: #f2f0f8; }
.row.toggles { gap: 14px; }
input[type="range"] { width: 100%; accent-color: var(--pink); }
.switch { position: relative; display: flex; align-items: flex-start; gap: 12px; cursor: pointer; font-size: 13.5px; font-weight: 500; }
.switch input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.switch .track { flex: none; width: 40px; height: 24px; border-radius: 999px; background: rgba(255,255,255,.1); border: 1px solid var(--line-2); position: relative; transition: background .2s, border-color .2s; margin-top: 1px; }
.switch .track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.5); transition: transform .2s var(--ease); }
.switch input:checked + .track { background: var(--acc-grad); border-color: transparent; }
.switch input:checked + .track::after { transform: translateX(16px); }
.switch input:focus-visible + .track { outline: 2px solid var(--pink); outline-offset: 2px; }
.switch-text { display: flex; flex-direction: column; gap: 1px; }
.switch-text small { color: var(--dim); font-size: 12px; font-weight: 400; }
.field { display: grid; gap: 6px; font-weight: 600; font-size: 13.5px; }
.field input, .join-row input, .chat-form input { width: 100%; min-height: 48px; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--line-2); background: rgba(0,0,0,.3); color: var(--text); font-size: 16px; font-weight: 500; transition: border-color .15s, box-shadow .15s; }
.field input:focus, .join-row input:focus, .chat-form input:focus { outline: none; border-color: rgba(226,104,168,.6); box-shadow: 0 0 0 3px rgba(226,104,168,.18); }
.field input::placeholder, .join-row input::placeholder, .chat-form input::placeholder { color: var(--dim); font-weight: 400; }
.hint { margin: 8px 0 0; color: var(--dim); font-size: 12.5px; }
.chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 500; color: var(--muted); padding: 4px 10px; border-radius: 999px; background: rgba(255,255,255,.04); border: 1px solid var(--line); white-space: nowrap; }
.chip b { color: var(--text); font-weight: 600; }

/* ---------- dialogs & toast ---------- */
.overlay { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 16px; overflow-y: auto; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); animation: var(--k-in) .25s both; background: rgba(6,5,10,.74); }
@keyframes fade-in { from { opacity: 0; } }
@keyframes pop { from { opacity: 0; transform: translateY(18px) scale(.94); } 60% { transform: translateY(-3px) scale(1.01); } to { opacity: 1; transform: none; } }
.dlg { position: relative; width: min(100%, 520px); max-height: calc(100dvh - 32px); overflow-y: auto; padding: 28px 24px 22px; border-radius: 26px; background: linear-gradient(180deg, rgba(255,255,255,.05), transparent 40%), var(--surface);
  border: 1px solid rgba(255,255,255,.12); box-shadow: 0 40px 100px -30px rgba(0,0,0,.9), 0 0 0 1px rgba(0,0,0,.4); animation: var(--k-pop) .45s var(--ease) both; outline: none; scrollbar-width: thin; }
.dlg.wide { width: min(100%, 640px); }
.close-x { position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--line); background: rgba(255,255,255,.03); color: var(--muted); display: grid; place-items: center; cursor: pointer; z-index: 2; }
.close-x:hover { color: var(--text); background: rgba(255,255,255,.08); }
.dlg-title { margin: 0 0 14px; font: 700 22px/1.2 var(--display); letter-spacing: -.02em; display: flex; align-items: center; gap: 10px; }
.dlg-text { margin: 0 0 12px; color: var(--text); font-size: 14px; line-height: 1.55; }
.dlg-text.dim { color: var(--muted); font-size: 13px; }
.dlg-text b { color: var(--text); }
.dlg-text a { color: var(--pink); text-decoration: underline; text-underline-offset: 2px; }
.help section + section { margin-top: 14px; }
.help h3 { margin: 0 0 4px; font: 700 15px var(--display); }
.help p { margin: 0; color: var(--muted); font-size: 14px; }
.help b { color: var(--text); }
.help + .win-actions { margin-top: 18px; }
@media (max-width: 420px) { .dlg { padding: 24px 18px 18px; } }
.toast { position: fixed; left: 50%; bottom: calc(22px + var(--sab)); z-index: 70; translate: -50% 16px; opacity: 0; padding: 10px 16px; border-radius: 12px; background: #221e30; color: var(--text); font-weight: 500; font-size: 14px; border: 1px solid var(--line-2); box-shadow: 0 16px 40px -16px rgba(0,0,0,.9); pointer-events: none; transition: opacity .25s, translate .25s var(--ease); max-width: calc(100vw - 32px); text-align: center; }
.toast.show { opacity: 1; translate: -50% 0; }
.players-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.prow { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; background: rgba(255,255,255,.03); border: 1px solid var(--line); }
.prow b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prow .tags { color: var(--dim); font-size: 12px; margin-left: auto; white-space: nowrap; }
.prow .mini-btn { flex: none; }

/* ---------- characters ---------- */
.ch-wrap { display: block; width: 100%; aspect-ratio: 120 / 126; position: relative; }
.ch-wrap.mini { width: 28px; flex: none; }
.ch { display: block; width: 100%; height: 100%; overflow: visible; }
.ch .c-head { transform-box: fill-box; transform-origin: 50% 92%; animation: bob 3.4s ease-in-out infinite var(--play); animation-delay: var(--d, 0s); }
.ch .c-eyes { transform-box: fill-box; transform-origin: center; animation: blink 4.8s linear infinite var(--play); animation-delay: var(--d2, 0s); }
.ch .c-arm { transform-box: fill-box; transform-origin: 50% 0; transition: transform .35s var(--bounce); }
.ch .c-brow { transform-box: fill-box; transform-origin: center; transition: transform .25s var(--ease); }
.ch .c-pupil { transition: transform .25s var(--ease); }
.ch .c-shut, .ch .m-grin, .ch .m-open, .ch .m-tongue, .ch .m-flat, .ch .m-o, .ch .m-frown, .ch .c-fx > g { display: none; }
.ch .flame { transform-box: fill-box; transform-origin: 50% 100%; animation: flicker 1.3s ease-in-out infinite var(--play); }
@keyframes bob { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-1.5px) rotate(1.2deg); } }
@keyframes blink { 0%, 93%, 100% { transform: scaleY(1); } 96% { transform: scaleY(.08); } }
@keyframes flicker { 0%, 100% { transform: scaleY(1) scaleX(1); } 50% { transform: scaleY(1.07) scaleX(.96); } }
/* moods: set on the element around the character (a seat, a picker tile) */
[data-mood="think"] .m-smile { display: none; } [data-mood="think"] .m-flat, [data-mood="think"] .fx-dots { display: block; }
[data-mood="think"] .c-brow.l { transform: translateY(-2px) rotate(-10deg); } [data-mood="think"] .c-pupil { transform: translate(1.2px, -1.6px); }
[data-mood="think"] .fx-dots { animation: float 2.4s ease-in-out infinite var(--play); transform-box: fill-box; transform-origin: center; }
[data-mood="locked"] .m-smile { display: none; } [data-mood="locked"] .m-grin, [data-mood="locked"] .fx-check { display: block; }
[data-mood="locked"] .fx-check { animation: var(--k-pop) .4s var(--bounce) both; transform-box: fill-box; transform-origin: center; }
[data-mood="laugh"] .c-eyes, [data-mood="laugh"] .m-smile { display: none; } [data-mood="laugh"] .c-shut, [data-mood="laugh"] .m-open, [data-mood="laugh"] .m-tongue { display: block; }
[data-mood="laugh"] .c-head { animation: laugh .42s ease-in-out infinite var(--play); }
@keyframes laugh { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-3px) rotate(-3deg); } }
[data-mood="win"] .m-smile { display: none; } [data-mood="win"] .m-open, [data-mood="win"] .m-tongue, [data-mood="win"] .fx-spark { display: block; }
[data-mood="win"] .c-arm.l { transform: translate(-4px, -30px) rotate(-20deg); } [data-mood="win"] .c-arm.r { transform: translate(4px, -30px) rotate(20deg); }
[data-mood="win"] .c-head { animation: cheer .7s ease-in-out infinite var(--play); }
[data-mood="win"] .fx-spark path { transform-box: fill-box; transform-origin: center; animation: twinkle 1.2s ease-in-out infinite var(--play); }
[data-mood="win"] .fx-spark .s2 { animation-delay: -.4s; } [data-mood="win"] .fx-spark .s3 { animation-delay: -.8s; }
@keyframes cheer { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes twinkle { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(.4) rotate(40deg); opacity: .5; } }
[data-mood="away"] .ch { filter: grayscale(1) opacity(.5); } [data-mood="away"] .c-eyes { display: none; } [data-mood="away"] .c-shut, [data-mood="away"] .fx-zzz { display: block; }
[data-mood="away"] .c-head { animation: none; transform: rotate(6deg); }
[data-mood="away"] .fx-zzz text { transform-box: fill-box; transform-origin: center; animation: float 2.2s ease-in-out infinite var(--play); } [data-mood="away"] .fx-zzz text:nth-child(2) { animation-delay: -.7s; } [data-mood="away"] .fx-zzz text:nth-child(3) { animation-delay: -1.4s; }
@keyframes float { 0%, 100% { transform: translateY(0); opacity: 1; } 50% { transform: translateY(-3px); opacity: .7; } }
[data-mood="shock"] .m-smile { display: none; } [data-mood="shock"] .m-o { display: block; }
[data-mood="shock"] .c-eyes { transform: scale(1.25); } [data-mood="shock"] .c-brow { transform: translateY(-3px); }
[data-mood="groan"] .m-smile { display: none; } [data-mood="groan"] .m-frown, [data-mood="groan"] .fx-sweat { display: block; }
[data-mood="groan"] .c-eyes { transform: scaleY(.5); } [data-mood="groan"] .c-brow.l { transform: rotate(12deg); } [data-mood="groan"] .c-brow.r { transform: rotate(-12deg); }
[data-mood="love"] .m-smile, [data-mood="love"] .c-eyes { display: none; } [data-mood="love"] .m-grin, [data-mood="love"] .c-shut, [data-mood="love"] .fx-heart { display: block; }
[data-mood="love"] .fx-heart path { transform-box: fill-box; transform-origin: center; animation: twinkle 1.1s ease-in-out infinite var(--play); } [data-mood="love"] .fx-heart .h2 { animation-delay: -.5s; }
[data-mood="clap"] .m-smile { display: none; } [data-mood="clap"] .m-grin { display: block; }
[data-mood="clap"] .c-arm.l { animation: clap-l .3s ease-in-out infinite var(--play); } [data-mood="clap"] .c-arm.r { animation: clap-r .3s ease-in-out infinite var(--play); }
@keyframes clap-l { 0%, 100% { transform: translate(0, -18px); } 50% { transform: translate(22px, -22px); } }
@keyframes clap-r { 0%, 100% { transform: translate(0, -18px); } 50% { transform: translate(-22px, -22px); } }
[data-mood="skull"] .m-smile { display: none; } [data-mood="skull"] .m-flat, [data-mood="skull"] .fx-skull { display: block; }
[data-mood="skull"] .c-pupil { transform: scale(.55); } [data-mood="skull"] .c-head { animation: none; }
[data-mood="sad"] .m-smile { display: none; } [data-mood="sad"] .m-frown { display: block; } [data-mood="sad"] .c-brow.l { transform: rotate(14deg) translateY(1px); } [data-mood="sad"] .c-brow.r { transform: rotate(-14deg) translateY(1px); }

/* ---------- screens ---------- */
.screen { position: relative; }
.front, .seat, .dead { width: min(100% - 32px, 1040px); margin: 0 auto; padding: 10px 0 40px; }
.hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 420px); gap: 24px 48px; align-items: center; padding: 26px 0 30px; }
.hero-copy > * { animation: var(--k-rise) .7s var(--ease) both; }
.hero-copy > :nth-child(2) { animation-delay: .06s; } .hero-copy > :nth-child(3) { animation-delay: .12s; } .hero-copy > :nth-child(4) { animation-delay: .18s; }
@keyframes rise { from { opacity: 0; transform: translateY(12px); } }
.logo { margin: 0 0 16px; font: 700 clamp(38px, 7vw, 72px)/1.02 var(--display); letter-spacing: -.035em; text-wrap: balance; }
.logo .grad { background: linear-gradient(90deg, var(--purple), var(--pink) 30%, var(--gold) 50%, var(--pink) 70%, var(--purple)); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; animation: shimmer 7s linear infinite var(--play); }
@keyframes shimmer { to { background-position: 200% 0; } }
.lead { color: var(--muted); font-size: clamp(15px, 1.5vw, 18px); max-width: 56ch; margin: 0 0 18px; }
.facts { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0; padding: 0; list-style: none; color: var(--dim); font-size: 13.5px; font-weight: 500; }
.facts li { display: inline-flex; align-items: center; gap: 8px; }
.facts li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--pink); opacity: .8; }
/* hero art: a prompt card and three answers queueing for the blank. The loop's 0% frame is the still pose. */
.hero-art { position: relative; height: 260px; animation: var(--k-rise) .9s var(--ease) .1s both; }
.ha-prompt { position: absolute; left: 6%; top: 8%; width: 70%; padding: 20px 22px 28px; border-radius: 20px; background: linear-gradient(160deg, #221a36, #130f1d); border: 1px solid rgba(229,204,128,.35); box-shadow: 0 30px 60px -30px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.08); font: 700 17px/1.35 var(--display); color: #fff; transform: rotate(-4deg); }
.ha-blank { display: inline-block; width: 44%; height: 1em; margin-left: .3em; border-bottom: 3px solid var(--gold); vertical-align: -.2em; }
.ha-ans { position: absolute; width: 46%; padding: 14px 14px 22px; border-radius: 14px; background: linear-gradient(180deg, var(--paper), var(--paper-2)); color: var(--ink); font: 600 13px/1.3 var(--font); box-shadow: 0 16px 40px -18px rgba(0,0,0,.9); border: 1px solid rgba(0,0,0,.12); animation: hover-a 6s ease-in-out infinite var(--play); }
.ha-ans.a1 { right: 2%; top: 32%; transform: rotate(7deg); animation-delay: 0s; }
.ha-ans.a2 { right: 20%; top: 58%; transform: rotate(-3deg); animation-delay: -2s; }
.ha-ans.a3 { left: 2%; top: 64%; transform: rotate(-9deg); animation-delay: -4s; }
@keyframes hover-a { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }
.choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 16px; }
.choice { position: relative; display: grid; grid-template-rows: auto 1fr auto; gap: 14px; text-align: left; padding: 0 0 22px; border-radius: 22px; overflow: hidden; border: 1px solid var(--line); background: linear-gradient(180deg, rgba(255,255,255,.035), transparent 40%), var(--surface); color: var(--text); transition: transform .25s var(--ease), border-color .2s, box-shadow .25s; animation: var(--k-rise) .7s var(--ease) both; animation-delay: .25s; }
.choice.online { animation-delay: .33s; }
.choice::after { content: ""; position: absolute; left: 26px; right: 26px; bottom: 0; height: 2px; background: var(--parse); opacity: .55; transition: opacity .2s; }
.choice:is(:hover, :focus-visible) { transform: translateY(calc(-4px * var(--m))); border-color: rgba(226,104,168,.38); box-shadow: 0 30px 60px -30px rgba(226,104,168,.55); }
.choice:is(:hover, :focus-visible)::after { opacity: 1; }
.choice-art { position: relative; height: 150px; display: block; border-bottom: 1px solid var(--line); overflow: hidden; }
.choice.tv .choice-art { background: radial-gradient(120% 100% at 15% 0%, rgba(163,53,238,.3), transparent 60%); }
.choice.online .choice-art { background: radial-gradient(110% 100% at 90% 0%, rgba(229,204,128,.18), transparent 60%), radial-gradient(70% 70% at 0% 100%, rgba(45,212,191,.16), transparent 70%); }
.tvset { position: absolute; left: 50%; top: 22px; width: 150px; height: 88px; translate: -50% 0; border-radius: 10px; background: #0d0b14; border: 3px solid #2a2638; box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 20px 40px -16px rgba(0,0,0,.9); }
.tvset::after { content: ""; position: absolute; left: 50%; bottom: -14px; width: 50px; height: 10px; translate: -50% 0; border-radius: 0 0 8px 8px; background: #2a2638; }
.tvset b { position: absolute; left: 16px; right: 16px; top: 16px; height: 34px; border-radius: 6px; background: linear-gradient(160deg, #221a36, #130f1d); border: 1px solid rgba(229,204,128,.4); }
.tvset b::after { content: ""; position: absolute; left: 10px; top: 10px; width: 60%; height: 4px; border-radius: 2px; background: rgba(255,255,255,.7); box-shadow: 0 10px 0 -1px var(--gold); }
.phone { position: absolute; bottom: 10px; width: 26px; height: 44px; border-radius: 6px; background: #1a1826; border: 2px solid #3a3747; box-shadow: 0 10px 20px -10px rgba(0,0,0,.9); animation: phone-up 5s ease-in-out infinite var(--play); }
.phone::after { content: ""; position: absolute; left: 4px; right: 4px; bottom: 6px; height: 14px; border-radius: 3px; background: var(--paper); }
.phone.p1 { left: 22%; transform: rotate(-10deg); } .phone.p2 { left: 47%; animation-delay: -1.6s; } .phone.p3 { left: 70%; transform: rotate(10deg); animation-delay: -3.2s; }
@keyframes phone-up { 0%, 100% { translate: 0 0; } 50% { translate: 0 -6px; } }
.tbl { position: absolute; left: 50%; top: 58px; width: 170px; height: 70px; translate: -50% 0; border-radius: 50%; background: radial-gradient(ellipse at 50% 40%, #3a2a1e, #221812 70%); border: 4px solid #4a3625; box-shadow: 0 20px 40px -16px rgba(0,0,0,.9), inset 0 0 0 2px rgba(229,204,128,.15); }
.tbl::after { content: ""; position: absolute; left: 50%; top: 50%; width: 36px; height: 48px; translate: -50% -50%; border-radius: 6px; background: linear-gradient(160deg, #221a36, #130f1d); border: 1px solid rgba(229,204,128,.4); }
.chair { position: absolute; width: 28px; height: 28px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 3px rgba(0,0,0,.4), 0 8px 16px -6px rgba(0,0,0,.8); animation: bob-c 3s ease-in-out infinite var(--play); }
.chair.c1 { --c: #2b8a86; left: 18%; top: 48%; } .chair.c2 { --c: #ff7a2a; left: 50%; top: 22%; translate: -50% 0; animation-delay: -1s; } .chair.c3 { --c: #8b5cf6; right: 18%; top: 48%; animation-delay: -2s; } .chair.c4 { --c: #d9483b; left: 50%; bottom: 8px; translate: -50% 0; animation-delay: -1.5s; }
@keyframes bob-c { 0%, 100% { margin-top: 0; } 50% { margin-top: -3px; } }
.bubble { position: absolute; right: 12%; top: 14%; width: 46px; height: 28px; border-radius: 14px 14px 14px 2px; background: #fff; opacity: .9; animation: hover-a 4s ease-in-out infinite var(--play); }
.bubble::after { content: ""; position: absolute; left: 10px; top: 11px; width: 26px; height: 5px; border-radius: 3px; background: #c9c3d6; }
.choice-body { display: grid; gap: 6px; padding: 0 22px; }
.choice-body b { font: 700 22px/1.15 var(--display); letter-spacing: -.02em; }
.choice-body span { color: var(--muted); font-size: 14px; }
.choice-go { display: inline-flex; align-items: center; gap: 8px; padding: 0 22px; font-weight: 600; font-size: 14.5px; }
.choice-go .ic { color: var(--pink); transition: transform .2s var(--ease); }
.choice:is(:hover, :focus-visible) .choice-go .ic { transform: translateX(calc(4px * var(--m))); }
.join { margin: 26px auto 0; width: min(100%, 420px); text-align: center; animation: var(--k-rise) .7s var(--ease) .4s both; }
.join-lbl { display: block; margin: 0 0 8px; font-weight: 600; font-size: 13.5px; color: var(--muted); }
.join-row { display: flex; gap: 8px; }
.join-row input { flex: 1; min-width: 0; text-align: center; font: 700 22px var(--display); letter-spacing: .3em; text-transform: uppercase; text-indent: .3em; }
.front-foot { margin: 40px 0 0; padding-top: 18px; border-top: 1px solid var(--line); color: var(--dim); font-size: 12.5px; display: grid; gap: 6px; }
.front-foot p { margin: 0; }
.front-foot a { color: var(--muted); text-decoration: underline; text-underline-offset: 2px; }
.front-foot .small b { color: var(--muted); }
@media (max-width: 860px) { .hero { grid-template-columns: 1fr; gap: 10px; padding-top: 10px; } .hero-art { height: 220px; order: -1; max-width: 420px; } }
@media (max-width: 480px) { .hero-art { height: 200px; } .ha-prompt { font-size: 15px; padding: 16px 16px 22px; } .ha-ans { font-size: 12px; } }

/* taking a seat */
.seat-card { width: min(100%, 640px); margin: 0 auto; padding: 26px 24px 24px; border-radius: 26px; background: linear-gradient(180deg, rgba(255,255,255,.05), transparent 40%), var(--surface); border: 1px solid rgba(255,255,255,.12); box-shadow: 0 40px 100px -40px rgba(0,0,0,.9); animation: var(--k-pop) .45s var(--ease) both; }
.seat-title { margin: 0 0 4px; font: 700 clamp(34px, 8vw, 52px)/1 var(--display); letter-spacing: .14em; color: var(--gold); }
.seat-title.plain { letter-spacing: -.02em; color: var(--text); }
.seat-sub { margin: 0 0 8px; color: var(--muted); font-size: 13.5px; }
.seat-who { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.who { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: 999px; background: rgba(255,255,255,.04); border: 1px solid var(--line); font-size: 13.5px; font-weight: 600; }
.who .who-tag { color: var(--dim); font-weight: 500; font-size: 12px; }
.who.empty { color: var(--dim); font-weight: 500; border-style: dashed; padding-left: 12px; }
.cast-pick { border: 0; padding: 0; margin: 16px 0 0; }
.cast-pick legend { padding: 0; margin: 0 0 8px; font-weight: 600; font-size: 13.5px; }
.cast-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; }
.cast-opt { position: relative; display: block; }
.cast-opt input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.cast-box { display: grid; justify-items: center; gap: 2px; padding: 8px 4px 8px; border-radius: 16px; border: 1px solid var(--line); background: rgba(255,255,255,.03); transition: background .2s, border-color .2s, transform .25s var(--bounce), box-shadow .25s; cursor: pointer; }
.cast-box .ch-wrap { width: 62px; }
.cast-name { font-size: 12px; font-weight: 600; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.cast-opt input:hover + .cast-box { background: rgba(255,255,255,.06); }
.cast-opt input:checked + .cast-box { border-color: var(--acc, var(--pink)); background: color-mix(in srgb, var(--acc, var(--pink)) 14%, transparent); box-shadow: 0 12px 30px -16px var(--acc, var(--pink)); transform: translateY(calc(-3px * var(--m))); }
.cast-opt input:checked + .cast-box .cast-name { color: var(--text); }
.cast-opt input:focus-visible + .cast-box { outline: 2px solid var(--pink); outline-offset: 2px; }
.seat-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 16px; }
.seat-note { margin: 10px 0 0; color: var(--dim); font-size: 13px; }
.seat-note:empty { display: none; }
@media (max-width: 480px) { .seat-card { padding: 22px 16px 18px; } .cast-grid { grid-template-columns: repeat(4, 1fr); gap: 6px; } .cast-box .ch-wrap { width: 52px; } .seat-actions .btn.big { width: 100%; } }
@media (max-width: 340px) { .cast-grid { grid-template-columns: repeat(3, 1fr); } }

/* dead end */
.dead-card { width: min(100%, 520px); margin: 40px auto; text-align: center; padding: 30px 24px; border-radius: 26px; background: var(--surface); border: 1px solid var(--line-2); }
.dead-ic { width: 64px; height: 64px; margin: 0 auto 14px; border-radius: 20px; display: grid; place-items: center; color: var(--pink); background: rgba(226,104,168,.1); border: 1px solid rgba(226,104,168,.3); }
.dead-ic .ic { width: 30px; height: 30px; }
.dead-card h1 { margin: 0 0 8px; font: 700 26px/1.15 var(--display); letter-spacing: -.02em; }
.dead-card p { margin: 0 0 18px; color: var(--muted); }

/* ---------- the table (shared) ---------- */
.table { display: grid; min-height: calc(100dvh - 62px - var(--sat)); }
.stage { position: relative; min-width: 0; }
.felt { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.centre { position: relative; z-index: 2; display: grid; align-content: start; justify-items: center; gap: 12px; min-width: 0; }
.hud { display: flex; align-items: center; justify-content: center; gap: 10px 14px; flex-wrap: wrap; min-height: 28px; }
.hud-round { font: 600 11px var(--font); letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
.hud-title { font: 700 16px/1.2 var(--display); letter-spacing: -.01em; }
.clock { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font: 700 14px var(--display); font-variant-numeric: tabular-nums; color: var(--text); background: rgba(255,255,255,.05); border: 1px solid var(--line-2); }
.clock .ic { width: 15px; height: 15px; color: var(--muted); }
.clock.urgent { color: #ffb4c0; border-color: rgba(244,63,94,.5); background: rgba(244,63,94,.12); animation: tick 1s ease-in-out infinite var(--play); }
.clock.urgent .ic { color: var(--red); }
@keyframes tick { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }

/* lobby */
.lobby { display: grid; gap: 18px; justify-items: center; width: 100%; max-width: 640px; }
.lobby-code { text-align: center; display: grid; justify-items: center; gap: 4px; }
.lobby-code .eyebrow { margin: 0; }
.big-code { font: 700 clamp(44px, 12vw, 92px)/1 var(--display); letter-spacing: .18em; text-indent: .18em; color: var(--gold); text-shadow: 0 0 40px rgba(229,204,128,.35); }
.join-how { margin: 0; color: var(--muted); font-size: 14px; }
.join-how b { color: var(--text); }
.qr { display: block; margin-top: 10px; border-radius: 16px; background: #fff; padding: 8px; width: 180px; height: 180px; box-shadow: 0 20px 50px -20px rgba(0,0,0,.9); }
.invite { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: center; width: 100%; padding: 10px 12px; border-radius: 14px; background: rgba(255,255,255,.03); border: 1px solid var(--line); }
.invite-lbl { color: var(--dim); font-size: 12.5px; font-weight: 600; }
.invite-link { flex: 1; min-width: 0; font: 500 13px/1.3 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.invite .btn { min-height: 38px; padding: 8px 12px; font-size: 13px; }
.lobby-settings { width: 100%; }
.lobby-start { display: grid; justify-items: center; gap: 10px; text-align: center; }
.lobby-line { margin: 0; color: var(--muted); font-size: 14px; }
.lobby-line b { color: var(--text); }
.tset { display: grid; gap: 16px; padding: 16px; border-radius: 18px; background: rgba(255,255,255,.03); border: 1px solid var(--line); text-align: left; }
.tset-row { display: grid; gap: 8px; }
.presets { display: flex; flex-wrap: wrap; gap: 6px; }
.chip-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 999px; border: 1px solid var(--line-2); background: rgba(255,255,255,.03); color: var(--muted); font-size: 12.5px; font-weight: 600; cursor: pointer; transition: color .15s, background .15s, border-color .15s; min-height: 32px; }
.chip-btn:hover { color: var(--text); background: rgba(255,255,255,.07); }
.chip-btn.on { color: #fff; border-color: transparent; background: var(--acc-grad); }
.pack-group { display: grid; gap: 6px; }
.pack-group h4 { margin: 6px 0 0; font: 600 11px var(--font); letter-spacing: .12em; text-transform: uppercase; color: var(--dim); display: flex; align-items: center; gap: 10px; }
.pack-group h4::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.pack-group h4 .warn, .pack-group h4 .note { letter-spacing: 0; text-transform: none; font-weight: 500; }
.pack-group h4 .warn { color: var(--orange); }
.pack-group h4 .note { color: var(--muted); }
@media (max-width: 520px) { /* a phone: the note takes its own line under the heading's rule */
  .pack-group h4 { flex-wrap: wrap; row-gap: 3px; }
  .pack-group h4::after { order: 1; }
  .pack-group h4 .warn, .pack-group h4 .note { order: 2; flex-basis: 100%; }
}
.packs { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
.pack { position: relative; display: block; }
.pack input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.pack-box { display: grid; gap: 1px; padding: 8px 10px 8px 32px; border-radius: 12px; border: 1px solid var(--line); background: rgba(255,255,255,.02); transition: background .15s, border-color .15s; min-height: 44px; }
.pack-box::before { content: ""; position: absolute; left: 10px; top: 50%; width: 16px; height: 16px; translate: 0 -50%; border-radius: 5px; border: 1.5px solid var(--line-2); background: rgba(0,0,0,.3); transition: background .15s, border-color .15s; }
.pack-box::after { content: ""; position: absolute; left: 15px; top: 50%; width: 5px; height: 9px; translate: 0 -62%; rotate: 45deg; border: solid #fff; border-width: 0 2px 2px 0; opacity: 0; }
.pack input:checked + .pack-box { border-color: rgba(226,104,168,.45); background: rgba(226,104,168,.08); }
.pack input:checked + .pack-box::before { background: var(--acc-grad); border-color: transparent; }
.pack input:checked + .pack-box::after { opacity: 1; }
.pack input:focus-visible + .pack-box { outline: 2px solid var(--pink); outline-offset: 2px; }
.pack input:disabled + .pack-box { opacity: .7; cursor: default; }
.pack-box b { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pack-box small { color: var(--dim); font-size: 11.5px; }
.tset-sum { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.goal-out { font: 700 16px var(--display); color: var(--gold); }
/* the mix: what the ticked packs will deal this table. Segments and legend items are keyed by pack; a segment's width
   is its flex-grow, so a share change is one transition and a new pack grows in from nothing. The motion gate (--m)
   turns every duration here to zero in Calm. */
.mix { display: grid; gap: 9px; padding: 10px 12px 11px; border-radius: 12px; background: rgba(0,0,0,.22); border: 1px solid var(--line); }
.mix-lbl { margin: 0; font-size: 12px; font-weight: 600; color: var(--muted); }
.mix-bars { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 6px 10px; }
.mix-bars, .mix-legend { transition: opacity calc(.25s * var(--m)); }
.mix.pending .mix-bars, .mix.pending .mix-legend { opacity: .45; }
.mix-kind { font: 600 10px/1 var(--font); letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }
.mix-bar { display: flex; gap: 2px; height: 12px; border-radius: 999px; overflow: hidden; background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px rgba(255,255,255,.05); }
.mix-bar.prompts { height: 5px; }
.mix-seg { flex: 0 1 0px; min-width: 0; background: var(--c); transition: flex-grow calc(.55s * var(--m)) var(--ease), background calc(.35s * var(--m)); }
.mix-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; }
.mix-item { display: inline-flex; align-items: baseline; gap: 6px; font-size: 12.5px; line-height: 1.4; animation: var(--k-in) .3s both; }
.mix-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c); flex: none; align-self: center; transition: background calc(.35s * var(--m)); }
.mix-name { font-weight: 600; color: var(--text); }
.mix-pct { color: var(--muted); font-variant-numeric: tabular-nums; }
.mix-item.tail .mix-name { color: var(--muted); font-weight: 500; }
.mix-warn-wrap { display: grid; grid-template-rows: 0fr; transition: grid-template-rows calc(.4s * var(--m)) var(--ease); }
.mix-warn-wrap.on { grid-template-rows: 1fr; }
.mix-warn-wrap > div { min-height: 0; overflow: hidden; }
.mix-warn { margin: 1px 0 0; padding: 7px 11px; border-radius: 10px; background: rgba(255,128,0,.1); border: 1px solid rgba(255,128,0,.35); color: #ffd9a8; font-size: 12.5px; line-height: 1.45; visibility: hidden; transition: visibility 0s linear calc(.4s * var(--m)); }
.mix-warn-wrap.on .mix-warn { visibility: visible; transition-delay: 0s; }
/* the read-only line (everyone but the host on a phone): a thin bar, then the shares as text */
.mix-sum { flex: 1 1 100%; display: grid; gap: 7px; justify-items: center; font-size: 12.5px; }
.mix-sum .mix-bar { width: min(100%, 320px); height: 6px; }
.mix-sum .mix-seg { transition: none; }
.mix-sum-text { margin: 0; max-width: 64ch; color: var(--muted); text-align: center; text-wrap: balance; line-height: 1.6; }
.mix-sum-item { white-space: nowrap; }
.mix-sum-text b { color: var(--text); font-weight: 600; }
.mix-sum-item.tail b { color: var(--muted); font-weight: 500; }
.mix-sum-text .mix-dot { display: inline-block; width: .6em; height: .6em; margin-right: .4em; }
.mix-sum-text .sep { color: var(--dim); margin: 0 .5em; }
body[data-view="board"] .mix-sum { font-size: .9em; gap: .5em; }
body[data-view="board"] .mix-sum .mix-bar { width: min(100%, 28em); height: .5em; gap: .15em; }

/* the prompt: the "quote master" */
.prompt-wrap { width: 100%; max-width: 760px; display: grid; gap: 8px; justify-items: center; }
.prompt { position: relative; width: 100%; padding: 22px 24px 30px; border-radius: 22px; color: #fff; background: linear-gradient(160deg, #231a3a, #130f1d 70%); border: 1px solid rgba(229,204,128,.35); box-shadow: 0 30px 70px -30px rgba(0,0,0,.9), 0 0 0 1px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.08); animation: var(--k-pop) .5s var(--ease) both; }
.prompt.pulse { animation: var(--k-land) .6s var(--ease) both; }
@keyframes land { 0% { transform: scale(1); } 30% { transform: scale(1.025); box-shadow: 0 30px 70px -30px rgba(229,204,128,.6), 0 0 0 2px rgba(229,204,128,.6); } 100% { transform: scale(1); } }
.prompt-text { margin: 0; font: 700 clamp(19px, 2.6vw, 30px)/1.32 var(--display); letter-spacing: -.01em; text-wrap: pretty; overflow-wrap: anywhere; }
.prompt[data-len="mid"] .prompt-text { font-size: clamp(17px, 2.2vw, 26px); }
.prompt[data-len="long"] .prompt-text { font-size: clamp(16px, 1.9vw, 22px); }
.blank { display: inline; padding: 0 .1em; margin: 0 .08em; border-bottom: .09em solid var(--gold); color: var(--gold); box-decoration-break: clone; -webkit-box-decoration-break: clone; transition: background .3s; }
.blank.empty { display: inline-block; min-width: 3.2em; vertical-align: baseline; line-height: .9; }
.blank.empty .blank-text::after { content: "\00a0"; }
.blank.filled { background: linear-gradient(180deg, transparent 55%, rgba(229,204,128,.14) 55%); border-radius: 3px; }
.blank.preview { color: #f6e3a1; border-bottom-style: dashed; }
.blank.landing .blank-text { opacity: 0; }
.prompt-extra { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 6px; }
.prompt-extra li { position: relative; padding: 8px 12px 8px 36px; border-radius: 10px; background: rgba(229,204,128,.08); border: 1px solid rgba(229,204,128,.25); color: var(--gold); font: 600 .78em/1.3 var(--display); }
.prompt-extra li::before { content: attr(data-n); position: absolute; left: 10px; top: 50%; translate: 0 -50%; width: 18px; height: 18px; border-radius: 50%; background: var(--gold); color: #2a2010; font: 700 11px/18px var(--font); text-align: center; }
.prompt-extra li.landing span { opacity: 0; }
.prompt-pick { position: absolute; right: 14px; bottom: 10px; font: 600 11px var(--font); letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.45); }
.prompt-by { display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px 4px 6px; border-radius: 999px; background: rgba(255,255,255,.05); border: 1px solid var(--line-2); font-weight: 600; font-size: 13.5px; animation: var(--k-pop) .35s var(--ease) both; }

/* the answers: face down, then sentences; buttons when voting */
.plays { width: 100%; max-width: 980px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 10px; }
.play { display: grid; gap: 6px; min-width: 0; animation: var(--k-rise) .4s var(--ease) both; animation-delay: calc(var(--i, 0) * 60ms); }
.play-card { position: relative; display: block; width: 100%; min-height: 84px; padding: 14px 14px 16px; border-radius: 16px; text-align: left; border: 1px solid rgba(0,0,0,.12); background: linear-gradient(180deg, var(--paper), var(--paper-2)); color: var(--ink); font: 500 14px/1.4 var(--font); box-shadow: 0 1px 0 rgba(255,255,255,.7) inset, 0 14px 34px -18px rgba(0,0,0,.9); transition: transform .25s var(--ease), box-shadow .25s, border-color .2s; overflow-wrap: anywhere; }
.play-card b { color: #5a2d8f; font-weight: 700; }
.play-card .play-list { margin: 8px 0 0; padding: 0 0 0 18px; }
.play-card .play-list li { margin: 2px 0; }
.play[data-shown="0"] .play-card { background: radial-gradient(120% 90% at 50% 0%, #2a2140, #150f22 70%); border-color: rgba(229,204,128,.3); color: rgba(255,255,255,.55); display: grid; place-items: center; font: 700 26px var(--display); animation: var(--k-flip) .5s var(--ease) both; }
.play[data-shown="0"] .play-card::after { content: ""; position: absolute; inset: 7px; border-radius: 11px; border: 1px dashed rgba(229,204,128,.35); }
.play.just .play-card { animation: var(--k-flip) .55s var(--ease) both; }
@keyframes flip { from { transform: rotateY(90deg); opacity: 0; } to { transform: rotateY(0); opacity: 1; } }
.play.on-stage .play-card { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(229,204,128,.6), 0 18px 40px -18px rgba(229,204,128,.6); }
button.play-card { cursor: pointer; }
button.play-card:hover:not([disabled]) { transform: translateY(calc(-3px * var(--m))); box-shadow: 0 1px 0 rgba(255,255,255,.7) inset, 0 22px 40px -18px rgba(0,0,0,.9), 0 0 0 2px rgba(226,104,168,.5); }
button.play-card[disabled] { cursor: default; opacity: .62; }
button.play-card[aria-pressed="true"] { border-color: var(--pink); box-shadow: 0 0 0 3px rgba(226,104,168,.7), 0 18px 40px -18px rgba(226,104,168,.7); }
button.play-card[aria-pressed="true"]::before { content: "Your vote"; position: absolute; top: -10px; right: 12px; padding: 2px 9px; border-radius: 999px; background: var(--pink); color: #fff; font: 700 10.5px/16px var(--font); letter-spacing: .06em; text-transform: uppercase; }
.play[data-winner="1"] .play-card { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(229,204,128,.8), 0 24px 60px -20px rgba(229,204,128,.8); animation: var(--k-win) .8s var(--bounce) both; }
@keyframes win { 0% { transform: scale(.96); } 50% { transform: scale(1.04); } 100% { transform: scale(1); } }
.play-foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-height: 22px; padding: 0 4px; font-size: 12.5px; color: var(--muted); }
.play-who { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--text); min-width: 0; }
.play-who .ch-wrap.mini { width: 22px; }
.play-who span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.play-mine { color: var(--pink); font-weight: 600; }
.play-votes { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.play-votes i { width: 8px; height: 8px; border-radius: 50%; background: var(--pink); display: inline-block; }
.play-win { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 999px; background: rgba(229,204,128,.14); border: 1px solid rgba(229,204,128,.45); color: var(--gold); font-weight: 700; font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; }
.play-win .ic { width: 12px; height: 12px; }

/* status, notices, host controls */
.status { margin: 0; text-align: center; color: var(--muted); font-size: 14px; min-height: 1.4em; max-width: 60ch; text-wrap: balance; }
.status b { color: var(--text); font-weight: 600; }
.status .me { color: var(--gold); font-weight: 700; }
.notice { margin: 0; padding: 8px 14px; border-radius: 12px; background: rgba(255,128,0,.1); border: 1px solid rgba(255,128,0,.35); color: #ffd9a8; font-size: 13.5px; text-align: center; animation: var(--k-pop) .35s var(--ease) both; max-width: 60ch; }
.host-bar { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; }
/* the table keeps moving: a ring that empties while the next round is on its way, with the seconds in it */
.next-ring { display: inline-flex; align-items: center; gap: 9px; font-weight: 600; color: var(--text); }
.ring-dial { position: relative; width: 38px; height: 38px; flex: none; display: grid; place-items: center; }
.ring-dial svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.ring-dial circle { fill: none; stroke-width: 3.4; }
.ring-bg { stroke: rgba(255,255,255,.1); }
.ring-run { stroke: var(--gold); stroke-linecap: round; stroke-dasharray: 100.5; stroke-dashoffset: var(--from, 0); animation: ring-run var(--left, 10s) linear forwards; filter: drop-shadow(0 0 4px rgba(229,204,128,.6)); }
@keyframes ring-run { to { stroke-dashoffset: 100.5; } }
html.motion-reduced .ring-run { animation: none; }
.next-n { position: relative; font: 700 15px var(--display); font-variant-numeric: tabular-nums; color: var(--gold); }
.ring-text { font-size: 14px; color: var(--muted); }
.next-held { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 999px; border: 1px solid rgba(229,204,128,.45); background: rgba(229,204,128,.1); color: var(--gold); font-weight: 700; font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; }
.act-line.next-line { display: flex; justify-content: center; }
body[data-view="board"] .ring-dial { width: 2.9em; height: 2.9em; }
body[data-view="board"] .next-n { font-size: 1.15em; }
body[data-view="board"] .ring-text { font-size: 1.15em; color: var(--text); }
body[data-view="board"] .next-held { font-size: .9em; }

/* game over */
.over { width: 100%; max-width: 640px; display: grid; gap: 14px; justify-items: center; text-align: center; }
.champ { display: grid; justify-items: center; gap: 2px; }
.champ .eyebrow { margin: 0 0 6px; color: var(--gold); } .champ .eyebrow::before { background: var(--gold); }
.champ-ch { position: relative; width: clamp(120px, 20vw, 200px); }
.champ-ch::before { content: ""; position: absolute; inset: -22%; border-radius: 50%; background: radial-gradient(closest-side, rgba(229,204,128,.4), rgba(229,204,128,.12) 50%, transparent 72%); animation: halo 3s ease-in-out infinite var(--play); }
@keyframes halo { 50% { opacity: .55; transform: scale(1.08); } }
.champ-ch .ch-wrap { position: relative; }
.champ h2 { margin: 6px 0 0; font: 700 clamp(28px, 5vw, 44px)/1.1 var(--display); letter-spacing: -.02em; color: var(--gold); overflow-wrap: anywhere; }
.champ p { margin: 2px 0 0; color: var(--muted); }
.standings { list-style: none; margin: 0; padding: 0; width: min(100%, 420px); display: grid; gap: 6px; }
.standings li { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 12px; background: rgba(255,255,255,.03); border: 1px solid var(--line); animation: var(--k-rise) .4s var(--ease) both; animation-delay: calc(var(--i, 0) * 70ms); }
.standings li:first-child { border-color: rgba(229,204,128,.45); background: rgba(229,204,128,.08); }
.standings .rank { width: 22px; font: 700 13px var(--display); color: var(--dim); text-align: center; }
.standings li:first-child .rank { color: var(--gold); }
.standings .nm { flex: 1; min-width: 0; text-align: left; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.standings .pts { font: 700 15px var(--display); font-variant-numeric: tabular-nums; }
/* Tonight's best lines: one winning sentence at a time on a paper card that turns over, with who wrote it; arrows and dots
   to page by hand, and the button that copies them all. With lines on the screen the champion is drawn smaller. */
.over.with-lines .champ-ch { width: clamp(84px, 13vw, 120px); }
.over.with-lines .champ h2 { font-size: clamp(24px, 4.2vw, 34px); }
.lines { width: 100%; display: grid; justify-items: center; gap: 8px; }
.lines-head { margin: 4px 0 2px; color: var(--gold); } .lines-head::before { background: var(--gold); }
.lines-count { margin-left: 4px; color: var(--dim); font-weight: 600; letter-spacing: .04em; text-transform: none; font-variant-numeric: tabular-nums; }
.line-row { width: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px; }   /* no perspective: a card that turns towards the viewer grows wider than a phone for a moment */
.line-card { position: relative; min-height: 132px; display: grid; align-content: center; gap: 12px; padding: 18px 20px 14px; border-radius: 18px; text-align: left; color: var(--ink); background: linear-gradient(180deg, var(--paper), var(--paper-2)); border: 1px solid rgba(0,0,0,.12); box-shadow: 0 0 0 2px rgba(229,204,128,.55), 0 26px 60px -26px rgba(229,204,128,.7); }
.line-card.turn { animation: line-turn .55s var(--ease) backwards; }
.line-card.more { cursor: pointer; }
@keyframes line-turn { from { transform: rotateX(-88deg); opacity: 0; } 60% { transform: rotateX(8deg); opacity: 1; } to { transform: none; } }
.line-text { margin: 0; font: 600 18px/1.4 var(--display); letter-spacing: -.01em; overflow-wrap: anywhere; }
.line-text b { color: #5a2d8f; font-weight: 700; }
.line-text .play-list { margin: 8px 0 0; padding: 0 0 0 18px; font-size: .92em; color: #5a2d8f; }
.line-by { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; font-size: 13px; color: #5d566b; }
.line-by .ch-wrap.mini { width: 26px; flex: none; }
.line-by b { color: var(--ink); font-size: 14px; }
.line-arrow { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line-2); background: rgba(255,255,255,.04); color: var(--muted); display: grid; place-items: center; cursor: pointer; transition: color .15s, background .15s, transform .15s var(--ease); }
.line-arrow:hover { color: var(--text); background: rgba(255,255,255,.1); transform: scale(1.06); }
.line-arrow .ic { width: 18px; height: 18px; }
.line-dots { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px; max-width: 100%; }
.line-dot { width: 20px; height: 20px; padding: 0; border: 0; background: transparent; cursor: pointer; display: grid; place-items: center; }
.line-dot::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.2); transition: background .2s, transform .2s var(--bounce); }
.line-dot[aria-current="true"]::before { background: var(--gold); transform: scale(1.4); box-shadow: 0 0 8px rgba(229,204,128,.8); }
.line-share { display: grid; justify-items: center; gap: 6px; margin-top: 2px; }
.line-share small { color: var(--dim); font-size: 12px; line-height: 1.45; max-width: 46ch; text-wrap: balance; }
@media (max-width: 520px) { .line-row { grid-template-columns: minmax(0, 1fr); } .line-arrow { display: none; } .line-card { padding: 16px 16px 12px; min-height: 120px; } .line-text { font-size: 16.5px; } }

/* the bottom: action bar + hand + reactions */
.bottom { position: relative; z-index: 3; display: grid; gap: 10px; align-content: start; }
.action { display: grid; justify-items: center; gap: 8px; text-align: center; }
.act-line { margin: 0; font-weight: 600; font-size: 14px; color: var(--muted); }
.act-line.me { color: var(--gold); font-size: 15px; }
.act-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.act-btns .btn.big { min-width: 200px; }
.btn.turn { animation: glow 1.6s ease-in-out infinite var(--play); }
@keyframes glow { 0%, 100% { box-shadow: 0 10px 28px -12px rgba(229,204,128,.9), 0 0 0 0 rgba(229,204,128,.5); } 50% { box-shadow: 0 10px 28px -12px rgba(229,204,128,.9), 0 0 0 10px rgba(229,204,128,0); } }
.hand-wrap { min-width: 0; }
.hand { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.hand li { min-width: 0; }
.card { position: relative; display: block; width: 100%; height: 100%; min-height: 96px; padding: 13px 13px 30px; border-radius: 15px; text-align: left; border: 1px solid rgba(0,0,0,.14); background: linear-gradient(180deg, var(--paper), var(--paper-2)); color: var(--ink); font: 600 14.5px/1.35 var(--font); overflow-wrap: anywhere; box-shadow: 0 1px 0 rgba(255,255,255,.7) inset, 0 12px 30px -16px rgba(0,0,0,.9); transition: transform .22s var(--bounce), box-shadow .22s, border-color .2s; cursor: pointer; -webkit-user-select: none; user-select: none; }
.card::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 11px; height: 3px; border-radius: 2px; background: var(--parse); opacity: .45; }
.card:hover { transform: translateY(calc(-4px * var(--m))); box-shadow: 0 1px 0 rgba(255,255,255,.7) inset, 0 20px 36px -16px rgba(0,0,0,.9); }
.card[aria-pressed="true"] { border-color: var(--gold); transform: translateY(calc(-6px * var(--m))); box-shadow: 0 0 0 3px rgba(229,204,128,.8), 0 22px 40px -16px rgba(229,204,128,.6); }
.card[aria-pressed="true"]::after { opacity: 1; background: var(--gold); }
.card .card-n { position: absolute; right: 10px; bottom: 8px; width: 24px; height: 24px; border-radius: 50%; background: var(--gold); color: #2a2010; font: 700 13px/24px var(--display); text-align: center; box-shadow: 0 4px 10px -4px rgba(0,0,0,.6); animation: var(--k-pop) .3s var(--bounce) both; }
.card .card-kbd { position: absolute; right: 10px; top: 8px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 6px; background: rgba(26,22,32,.07); color: rgba(26,22,32,.5); font: 600 10.5px/18px var(--font); text-align: center; letter-spacing: .04em; }
@media (pointer: coarse) { .card .card-kbd { display: none; } }
.card, .play-card, .react, .btn, .mini-btn, .chip-btn, .seg span, .pack-box, .cast-box { touch-action: manipulation; }
.card[disabled] { cursor: default; transform: none; } /* between picks the hand is just there to read */
body[data-phase="pick"] .card[disabled] { opacity: .55; } /* the judge's hand sits this round out */
.card.new { animation: var(--k-deal) .5s var(--bounce) both; animation-delay: calc(var(--i, 0) * 70ms); }
@keyframes deal { from { opacity: 0; transform: translateY(60px) rotate(-6deg) scale(.9); } }
.hand.locked .card:not([aria-pressed="true"]) { opacity: .5; }
.reactions { display: flex; justify-content: center; gap: 6px; flex-wrap: wrap; }
.react { width: 44px; height: 44px; border-radius: 14px; border: 1px solid var(--line-2); background: rgba(255,255,255,.03); color: var(--muted); display: grid; place-items: center; transition: transform .2s var(--bounce), background .15s, color .15s, border-color .15s; }
.react:hover { color: var(--text); background: rgba(255,255,255,.08); transform: translateY(calc(-2px * var(--m))); }
.react:active { transform: scale(.92); }
.react .ic { width: 22px; height: 22px; }
.react[disabled] { opacity: .4; }

/* reactions popping over a seat */
.react-pop { position: absolute; left: 50%; top: -6%; width: 38%; min-width: 30px; max-width: 64px; aspect-ratio: 1; translate: -50% 0; border-radius: 50%; display: grid; place-items: center; color: #fff; background: var(--acc-grad); box-shadow: 0 10px 30px -10px rgba(0,0,0,.9), 0 0 0 2px rgba(255,255,255,.2); z-index: 3; pointer-events: none; opacity: 0; }
.react-pop.go { animation: var(--k-react) 2.2s var(--ease) both; opacity: 1; }
.react-pop .ic { width: 60%; height: 60%; stroke-width: 2.2; }
@keyframes react { 0% { opacity: 0; transform: translateY(10px) scale(.4); } 15% { opacity: 1; transform: translateY(-6px) scale(1.15); } 25% { transform: translateY(-2px) scale(1); } 80% { opacity: 1; transform: translateY(-10px) scale(1); } 100% { opacity: 0; transform: translateY(-26px) scale(.9); } }
html.motion-reduced .react-pop.go { opacity: 1; }

/* seats */
.seats { list-style: none; margin: 0; padding: 0; position: relative; z-index: 2; }
.seat { position: relative; display: flex; align-items: center; gap: 10px; min-width: 0; --acc: var(--pink); }
.seat-ch { position: relative; flex: none; width: 64px; }
.seat-ch .ch-wrap { filter: drop-shadow(0 8px 14px rgba(0,0,0,.5)); }
.seat[data-me="1"] .seat-ch::after { content: ""; position: absolute; inset: 6% -6% -8%; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--acc) 40%, transparent), transparent 72%); z-index: -1; }
.seat-played { position: absolute; right: -10%; bottom: 6%; width: 36%; aspect-ratio: 3 / 4; border-radius: 4px; background: radial-gradient(120% 90% at 50% 0%, #2a2140, #150f22 70%); border: 1px solid rgba(229,204,128,.55); box-shadow: 0 6px 14px -6px rgba(0,0,0,.9); transform: rotate(10deg); animation: var(--k-pop) .35s var(--bounce) both; }
.seat-played::after { content: ""; position: absolute; inset: 3px; border-radius: 2px; border: 1px dashed rgba(229,204,128,.4); }
.seat-info { min-width: 0; display: grid; gap: 2px; }
.seat-top { display: flex; align-items: center; gap: 6px; min-width: 0; }
.seat-name { font: 700 14.5px/1.2 var(--display); letter-spacing: -.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.seat[data-me="1"] .seat-name { color: var(--gold); }
.badge { display: inline-grid; place-items: center; flex: none; height: 18px; min-width: 18px; padding: 0 5px; border-radius: 999px; font: 700 10px/18px var(--font); letter-spacing: .06em; text-transform: uppercase; }
.badge.host { color: #2a2010; background: var(--gold); }
.badge.judge { color: #fff; background: var(--purple); }
.badge .ic { width: 11px; height: 11px; stroke-width: 2.4; }
.seat-meta { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12px; white-space: nowrap; }
.seat-score { font: 700 13px var(--display); color: var(--text); font-variant-numeric: tabular-nums; display: inline-flex; align-items: baseline; gap: 3px; }
.seat-score small { font: 500 11px var(--font); color: var(--dim); }
.seat-score.bump { animation: var(--k-plus) .6s var(--bounce) both; }
@keyframes plus { 30% { transform: scale(1.5); color: var(--gold); } }
.seat-cards { display: inline-flex; align-items: center; gap: 4px; }
.seat-cards::before { content: ""; width: 7px; height: 9px; border-radius: 2px; border: 1px solid currentColor; opacity: .7; }
.seat-status { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--muted); white-space: nowrap; }
.seat-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--dim); flex: none; }
.seat-status[data-s="think"]::before { background: var(--gold); animation: pulse-dot 1.2s ease-in-out infinite var(--play); }
.seat-status[data-s="locked"] { color: #9ff3e6; } .seat-status[data-s="locked"]::before { background: var(--teal); }
.seat-status[data-s="voted"] { color: #9ff3e6; } .seat-status[data-s="voted"]::before { background: var(--teal); }
.seat-status[data-s="turn"] { color: var(--gold); } .seat-status[data-s="turn"]::before { background: var(--gold); animation: pulse-dot 1s ease-in-out infinite var(--play); }
.seat-status[data-s="away"] { color: var(--dim); } .seat-status[data-s="away"]::before { background: var(--red); }
.seat-status[data-s="judge"] { color: #d8b4fe; } .seat-status[data-s="judge"]::before { background: var(--purple); }
.seat-status[data-s="win"] { color: var(--gold); } .seat-status[data-s="win"]::before { background: var(--gold); }
.seat-status[data-s="host"] { color: var(--muted); }
@keyframes pulse-dot { 50% { opacity: .35; transform: scale(.7); } }
.seat.empty .seat-ch { opacity: .35; }
.seat.empty .ch-wrap.ghost { border-radius: 50%; border: 2px dashed rgba(255,255,255,.25); aspect-ratio: 1; }
.seat.empty .seat-status { color: var(--dim); } .seat.empty .seat-status::before { display: none; }
.seat.left { animation: var(--k-rise) .4s var(--ease) both; }
.seat.won .seat-ch { animation: var(--k-win) .8s var(--bounce) both; }

/* the pile in the middle: face-down cards as answers come in */
.pile { position: absolute; left: 50%; top: 50%; z-index: 1; width: 0; height: 0; pointer-events: none; }
.pile-card { position: absolute; left: -22px; top: -30px; width: 44px; height: 60px; border-radius: 6px; background: radial-gradient(120% 90% at 50% 0%, #2a2140, #150f22 70%); border: 1px solid rgba(229,204,128,.5); box-shadow: 0 8px 20px -8px rgba(0,0,0,.9); transform: rotate(calc(var(--r, 0) * 1deg)) translate(calc(var(--i) * 2px), calc(var(--i) * -2px)); animation: var(--k-pop) .3s var(--bounce) both; }

/* flying cards (the script positions them) */
.fx { position: fixed; inset: 0; z-index: 80; pointer-events: none; overflow: hidden; }
.fly { position: fixed; left: 0; top: 0; border-radius: 12px; padding: 10px 12px; background: linear-gradient(180deg, var(--paper), var(--paper-2)); color: var(--ink); font: 600 14px/1.3 var(--font); box-shadow: 0 20px 50px -16px rgba(0,0,0,.9), 0 0 0 1px rgba(0,0,0,.15); overflow: hidden; will-change: transform, opacity; transform-origin: center; }
.fly span { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.fly.back { background: radial-gradient(120% 90% at 50% 0%, #2a2140, #150f22 70%); border: 1px solid rgba(229,204,128,.5); color: transparent; }
.fly.chip { border-radius: 999px; padding: 4px 12px; background: var(--gold); color: #2a2010; font: 700 15px var(--display); box-shadow: 0 10px 30px -10px rgba(229,204,128,.9); }
.confetti { position: fixed; inset: 0; z-index: 75; pointer-events: none; display: none; }

/* ---------- chat ---------- */
.chat { position: relative; z-index: 4; display: flex; flex-direction: column; min-height: 0; border-radius: 18px; background: rgba(20,18,28,.85); border: 1px solid var(--line-2); overflow: hidden; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.chat-head { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border: 0; background: rgba(255,255,255,.03); color: var(--text); font-weight: 600; font-size: 13.5px; border-bottom: 1px solid var(--line); text-align: left; min-height: 44px; }
.chat-head .chev { margin-left: auto; color: var(--dim); transition: transform .25s var(--ease); }
.chat-head[aria-expanded="false"] .chev { transform: rotate(180deg); }
.unread { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--pink); color: #fff; font: 700 11px/20px var(--font); text-align: center; }
.chat-body { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.chat-log { list-style: none; margin: 0; padding: 10px 12px; overflow-y: auto; flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 6px; scrollbar-width: thin; overscroll-behavior: contain; }
.msg { display: grid; gap: 1px; font-size: 13.5px; overflow-wrap: anywhere; animation: var(--k-rise) .25s var(--ease) both; }
.msg-name { font-weight: 700; font-size: 12px; color: var(--pink); }
.msg[data-mine="1"] .msg-name { color: var(--gold); }
.msg-text { color: var(--text); }
.msg.sys { color: var(--dim); font-size: 12.5px; font-style: italic; }
.chat-form { display: flex; gap: 6px; padding: 8px; border-top: 1px solid var(--line); }
.chat-form input { min-height: 42px; font-size: 14px; border-radius: 10px; }
.chat-form .btn { min-height: 42px; padding: 0 14px; border-radius: 10px; }

/* corner: the code for latecomers (board) */
.corner { position: absolute; left: 18px; bottom: 18px; z-index: 3; display: flex; align-items: center; gap: 12px; padding: 10px 14px 10px 10px; border-radius: 16px; background: rgba(20,18,28,.8); border: 1px solid var(--line-2); }
.corner .qr.small { width: 84px; height: 84px; padding: 5px; margin: 0; border-radius: 12px; }
.corner div { display: grid; line-height: 1.2; }
.corner-lbl { font: 600 10.5px var(--font); letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
.corner b { font: 700 28px/1.1 var(--display); letter-spacing: .14em; color: var(--gold); }
.corner small { color: var(--muted); font-size: 12px; }

/* ---------- view: phone (a hand in a TV game) ---------- */
body[data-view="phone"] .table { grid-template-rows: auto 1fr; }
body[data-view="phone"] .stage { padding: 0 12px 8px; }
body[data-view="phone"] .seats { display: flex; gap: 6px; overflow-x: auto; padding: 2px 2px 8px; margin: 0 -12px 8px; padding-left: 12px; padding-right: 12px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
body[data-view="phone"] .seats::-webkit-scrollbar { display: none; }
body[data-view="phone"] .seat { flex: none; gap: 6px; padding: 5px 10px 5px 5px; border-radius: 999px; background: rgba(255,255,255,.04); border: 1px solid var(--line); }
body[data-view="phone"] .seat-ch { width: 32px; }
body[data-view="phone"] .seat-ch .ch-wrap { filter: none; }
body[data-view="phone"] .seat-info { gap: 0; }
body[data-view="phone"] .seat-name { font-size: 12.5px; max-width: 92px; }
body[data-view="phone"] .seat-meta { font-size: 11px; gap: 6px; }
body[data-view="phone"] .seat-cards { display: none; }
body[data-view="phone"] .seat-status { font-size: 11px; }
body[data-view="phone"] .seat-played, body[data-view="phone"] .seat.empty, body[data-view="phone"] .pile, body[data-view="phone"] .corner { display: none; }
body[data-view="phone"] .react-pop { width: 26px; min-width: 26px; top: -40%; }
body[data-view="phone"] .centre { gap: 10px; }
body[data-view="phone"] .prompt { padding: 16px 16px 24px; border-radius: 18px; }
body[data-view="phone"] .prompt-text { font-size: clamp(16px, 4.6vw, 22px); }
body[data-view="phone"] .prompt[data-len="long"] .prompt-text { font-size: clamp(14px, 4vw, 18px); }
body[data-view="phone"] .plays { grid-template-columns: 1fr; gap: 8px; }
body[data-view="phone"] .bottom { padding: 8px 12px calc(12px + var(--sab)); }
body[data-view="phone"] .action { position: sticky; top: calc(8px + var(--sat)); z-index: 5; padding: 10px; border-radius: 16px; background: rgba(10,9,16,.85); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid var(--line); }
body[data-view="phone"] .action:empty { display: none; }
/* A result on a phone is longer than its screen (the prompt, every answer with its author and votes), and it arrives with
   a countdown: so what the table is waiting for is one row pinned to the bottom edge. For the host that row is the ring,
   Hold and Next round now, in reach the moment the result is there; for everyone else the ring and its words, as a
   small pill. The champion screen pins the host's Play again the same way (whoever is not the host has nothing to
   press there, so their line stays where it was). The page keeps room under its last card for the row. */
body[data-view="phone"][data-phase="result"] .action, body[data-view="phone"][data-phase="over"] .action[data-host="1"] { position: fixed; left: 10px; right: 10px; top: auto; bottom: calc(10px + var(--sab)); z-index: 30; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 10px; padding: 8px 10px; background: rgba(10,9,16,.94); border-color: var(--line-2); box-shadow: 0 -14px 34px -14px rgba(0,0,0,.9), 0 0 0 1px rgba(0,0,0,.4); animation: var(--k-pop) .3s var(--ease) both; }
body[data-view="phone"][data-phase="result"] .bottom, body[data-view="phone"][data-phase="over"] .bottom { padding-bottom: calc(86px + var(--sab)); }
body[data-view="phone"][data-phase="result"] .action .act-line, body[data-view="phone"][data-phase="over"] .action[data-host="1"] .act-line { flex: 0 1 auto; font-size: 13.5px; }
body[data-view="phone"][data-phase="result"] .action[data-host="1"] .ring-text { display: none; }   /* the host's buttons say it */
body[data-view="phone"][data-phase="result"] .action .act-btns, body[data-view="phone"][data-phase="over"] .action[data-host="1"] .act-btns { display: flex; flex: 1 1 200px; gap: 8px; min-width: 0; margin: 0; }
body[data-view="phone"][data-phase="result"] .action .act-btns .btn, body[data-view="phone"][data-phase="over"] .action[data-host="1"] .act-btns .btn { flex: 1 1 0; width: auto; min-width: 0; min-height: 46px; padding: 8px 10px; font-size: 14.5px; white-space: nowrap; }
body[data-view="phone"][data-phase="result"] .action #holdBtn { order: -1; flex: 0 0 auto; padding-inline: 14px; }   /* Hold first: the button a laughing host must find */
/* whoever is not the host has nothing to press there: for them the row is a small pill in the middle, so it covers little */
body[data-view="phone"][data-phase="result"] .action[data-host="0"] { width: fit-content; max-width: calc(100vw - 20px); margin-inline: auto; padding: 6px 16px 6px 10px; border-radius: 26px; }
/* an online table on a phone has its chat pill in the bottom corner: the row stands above it */
body[data-view="phone"][data-mode="online"][data-phase="result"] .action, body[data-view="phone"][data-mode="online"][data-phase="over"] .action[data-host="1"] { bottom: calc(66px + var(--sab)); }
body[data-view="phone"][data-mode="online"][data-phase="result"] .bottom, body[data-view="phone"][data-mode="online"][data-phase="over"] .bottom { padding-bottom: calc(146px + var(--sab)); }
body[data-view="phone"] .act-btns .btn.big { width: 100%; min-width: 0; }
body[data-view="phone"] .hand { grid-template-columns: 1fr; gap: 8px; }
@media (min-width: 420px) { body[data-view="phone"] .hand { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 720px) { body[data-view="phone"] .hand { grid-template-columns: repeat(3, minmax(0, 1fr)); } body[data-view="phone"] .plays { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
body[data-view="phone"] .card { min-height: 64px; padding: 12px 12px 26px; font-size: 15px; }
body[data-view="phone"] .lobby .tset { padding: 12px; }
body[data-view="phone"] .lobby-code .big-code { font-size: clamp(36px, 11vw, 60px); }
body[data-view="phone"] .qr { display: none; }
body[data-view="phone"][data-mode="tv"] .chat { display: none; }
/* an online table on a phone (or any screen without room for the table): the chat floats, collapsed to a pill */
body[data-view="phone"][data-mode="online"] .chat { position: fixed; right: 12px; bottom: calc(12px + var(--sab)); left: auto; width: min(360px, calc(100vw - 24px)); max-height: min(70vh, 520px); z-index: 40; box-shadow: 0 30px 60px -20px rgba(0,0,0,.9); }
body[data-view="phone"][data-mode="online"] .chat-head[aria-expanded="false"] { border-bottom: 0; }
body[data-view="phone"][data-mode="online"] .chat:has(.chat-head[aria-expanded="false"]) { width: auto; }
body[data-view="phone"][data-mode="online"] .bottom { padding-bottom: calc(72px + var(--sab)); }

/* ---------- view: online (everyone at their own screen) ----------
   The table with characters needs room: the script uses it from 1200x700 up and the phone layout below that.
   The script places the seats from their measured size so none is clipped, and sets --band-top on the stage:
   the prompt lives in the band below the far seats. The answers and the game-over box take the hand's place
   in the bottom area, so every answer is visible and tappable without scrolling. */
body[data-view="online"] .table { grid-template-columns: minmax(0, 1fr) 320px; grid-template-rows: minmax(340px, 1fr) auto; gap: 0 14px; padding: 0 16px calc(12px + var(--sab)); min-height: calc(100dvh - 62px - var(--sat)); }
@media (max-width: 1365px) { body[data-view="online"] .table { grid-template-columns: minmax(0, 1fr) 280px; } }
body[data-view="online"] .stage { grid-column: 1; grid-row: 1; min-height: 0; overflow: hidden; border-radius: 26px; container-type: size; }
/* the table top: an oval that fits the stage whether it is wide or tall */
body[data-view="online"] .felt { inset: auto; left: 50%; top: 52%; translate: -50% -50%; width: min(78cqw, 125cqh); aspect-ratio: 1.5; border-radius: 50%; background: radial-gradient(ellipse at 50% 40%, #4a3625, #2a1e14 72%); box-shadow: inset 0 0 0 .6em rgba(229,204,128,.14), inset 0 0 60px rgba(0,0,0,.6), 0 30px 80px -30px rgba(0,0,0,.9); }
body[data-view="online"] .stage::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(60% 50% at 50% 50%, rgba(229,204,128,.06), transparent 70%); pointer-events: none; }
body[data-view="online"] .seats { position: absolute; inset: 0; }
body[data-view="online"] .seat { position: absolute; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); translate: -50% -50%; flex-direction: column; gap: 4px; width: clamp(96px, 12vw, 150px); text-align: center; transition: left .5s var(--ease), top .5s var(--ease); }
body[data-view="online"] .seat-ch { width: clamp(44px, min(7.5vw, 13cqh), 96px); } /* smaller on a short stage, so the far seats fit */
body[data-view="online"] .seat-info { justify-items: center; }
body[data-view="online"] .seat-top { justify-content: center; }
body[data-view="online"] .seat-name { max-width: 100%; font-size: 13.5px; }
body[data-view="online"] .seat-meta { font-size: 11.5px; justify-content: center; }
body[data-view="online"] .centre { position: absolute; left: 50%; top: var(--band-top, 24%); bottom: 8px; translate: -50% 0; width: min(58%, 640px); align-content: safe center; overflow-y: auto; scrollbar-width: thin; gap: 6px; padding: 2px 4px; }
body[data-view="online"] .hud { min-height: 22px; }
body[data-view="online"] .prompt { padding: 16px 20px 24px; border-radius: 20px; }
body[data-view="online"] .prompt-text { font-size: clamp(16px, 1.6vw, 24px); }
body[data-view="online"] .prompt[data-len="mid"] .prompt-text { font-size: clamp(15px, 1.4vw, 21px); }
body[data-view="online"] .status { font-size: 13.5px; }
body[data-view="online"] .prompt-by { display: none; } /* the row under the table names the player */
body[data-view="online"] .action { gap: 6px; }
body[data-view="online"] .act-btns .btn.big { min-height: 44px; padding: 10px 22px; }
body[data-view="online"] .react { width: 40px; height: 40px; }
body[data-view="online"] .prompt[data-len="long"] .prompt-text { font-size: clamp(14px, 1.3vw, 19px); }
body[data-view="online"] .corner, body[data-view="online"] .pile { display: none; } /* online, the seats show who has played */
body[data-view="online"] .lobby .big-code { font-size: clamp(32px, 4vw, 56px); }
body[data-view="online"] .qr { display: none; }
/* the bottom: the action line with the reactions beside it, then the hand or the answers across the full width */
body[data-view="online"] .bottom { grid-column: 1; grid-row: 2; padding-top: 8px; gap: 6px 10px; grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
body[data-view="online"] .action { grid-column: 1; grid-row: 1; }
body[data-view="online"] .reactions { grid-column: 2; grid-row: 1; justify-self: end; }
body[data-view="online"] .plays, body[data-view="online"] .over, body[data-view="online"] .hand-wrap { grid-column: 1 / -1; }
body[data-view="online"] .hand { display: flex; gap: 8px; overflow-x: auto; padding: 8px 4px 6px; scroll-snap-type: x proximity; scrollbar-width: thin; }
body[data-view="online"] .hand li { flex: 0 0 clamp(150px, 15vw, 190px); scroll-snap-align: start; }
body[data-view="online"] .card { min-height: 84px; font-size: 13.5px; }
/* the answers: the cards as they were played, one row of up to six (two rows on a narrow table) */
body[data-view="online"] .plays { max-width: none; grid-template-columns: repeat(auto-fit, minmax(136px, 1fr)); gap: 8px; padding: 6px 2px 2px; }
body[data-view="online"] .play-card { font: 600 14px/1.35 var(--font); min-height: 84px; padding: 12px 12px 14px; }
body[data-view="online"] .play[data-shown="0"] .play-card { font-size: 24px; }
body[data-view="online"] .play-foot { font-size: 12px; }
.ans-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.ans-list li { position: relative; padding-left: 24px; }
.ans-list li::before { content: attr(data-n); position: absolute; left: 0; top: 1px; width: 17px; height: 17px; border-radius: 50%; background: var(--gold); color: #2a2010; font: 700 10.5px/17px var(--font); text-align: center; }
/* game over at the table: the champion beside the standings, under the table */
body[data-view="online"] .over { max-width: none; grid-template-columns: auto minmax(0, 1fr); align-items: center; justify-items: stretch; text-align: left; gap: 10px 28px; padding: 6px 2px 2px; }
body[data-view="online"] .champ { justify-items: center; text-align: center; }
body[data-view="online"] .champ-ch { width: clamp(90px, 12vh, 150px); }
body[data-view="online"] .champ h2 { font-size: clamp(22px, 3.5vh, 36px); }
body[data-view="online"] .standings { width: min(100%, 820px); grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 10px; }
body[data-view="online"] .standings li { padding: 6px 12px; }
/* with tonight's lines the champion screen is three columns at the table: the champion, the line on show, the standings */
body[data-view="online"] .over.with-lines { grid-template-columns: auto minmax(0, 1fr) minmax(170px, 230px); gap: 8px 22px; }
body[data-view="online"] .over.with-lines .champ-ch { width: clamp(70px, 10vh, 110px); }
body[data-view="online"] .over.with-lines .champ h2 { font-size: clamp(20px, 3vh, 30px); }
body[data-view="online"] .over.with-lines .standings { grid-template-columns: minmax(0, 1fr); width: 100%; }
body[data-view="online"] .over.with-lines .line-card { min-height: 104px; padding: 14px 18px 11px; gap: 9px; }
body[data-view="online"] .over.with-lines .line-text { font-size: 16.5px; line-height: 1.36; }
body[data-view="online"] .over.with-lines .line-share { grid-template-columns: auto minmax(0, 1fr); align-items: center; justify-items: start; gap: 10px; }
body[data-view="online"] .over.with-lines .line-share small { text-align: left; }
body[data-view="online"] .chat { grid-column: 2; grid-row: 1 / -1; min-height: 0; max-height: calc(100dvh - 62px - var(--sat) - 12px - var(--sab)); position: sticky; top: 0; }
body[data-view="online"] .chat-head[aria-expanded="false"] + .chat-body { display: none; }
body[data-view="online"] .react-pop { width: 42%; }
/* in the online lobby the centre is small: settings open as a dialog, like on the board */
body[data-view="online"] .lobby-settings .tset { display: none; }

/* ---------- view: board (a TV) ---------- */
body[data-view="board"] { overflow: hidden; height: 100dvh; font-size: clamp(13px, 1vw, 28px); }
body[data-view="board"] .top { position: absolute; left: 0; right: 0; top: 0; padding: 1.1em 1.4em .6em; }
body[data-view="board"] .brand { font-size: 1.15em; } body[data-view="board"] .brand img { width: 2.3em; height: 2.3em; }
body[data-view="board"] .crumb { font-size: 1em; }
body[data-view="board"] .icon-btn { width: 2.7em; height: 2.7em; border-radius: .8em; } body[data-view="board"] .icon-btn .ic { width: 1.35em; height: 1.35em; }
body[data-view="board"] .code-chip { display: none; }
body[data-view="board"] .table { height: 100dvh; min-height: 0; grid-template-rows: 1fr; padding: 4.6em 1.4em 1.2em; }
body[data-view="board"] .stage { display: grid; grid-template-columns: minmax(14em, 19%) minmax(0, 1fr) minmax(14em, 19%); grid-template-rows: repeat(3, minmax(0, 1fr)); gap: .8em 1.2em; min-height: 0; }
body[data-view="board"] .seats { display: contents; }
body[data-view="board"] .seat { grid-row: var(--row, auto); grid-column: var(--col, 1); align-self: center; gap: .7em; padding: .7em .9em .7em .6em; border-radius: 1.3em; background: rgba(20,18,28,.78); border: 1px solid var(--line); box-shadow: 0 1.4em 3em -1.6em rgba(0,0,0,.9); transition: border-color .3s, box-shadow .3s, background .3s; min-width: 0; }
body[data-view="board"] .seat[data-col="r"] { flex-direction: row-reverse; text-align: right; }
body[data-view="board"] .seat[data-col="r"] .seat-top { flex-direction: row-reverse; }
body[data-view="board"] .seat[data-col="r"] .seat-meta { justify-content: flex-end; }
body[data-view="board"] .seat[data-col="r"] .seat-status { flex-direction: row-reverse; }
body[data-view="board"] .seat-ch { width: 5.6em; }
body[data-view="board"] .seat-info { gap: .15em; flex: 1; }
body[data-view="board"] .seat-name { font-size: 1.25em; }
body[data-view="board"] .seat-meta { font-size: .95em; gap: .7em; }
body[data-view="board"] .seat-score { font-size: 1.5em; }
body[data-view="board"] .seat-score small { font-size: .55em; }
body[data-view="board"] .seat-status { font-size: .9em; }
body[data-view="board"] .badge { height: 1.3em; min-width: 1.3em; font-size: .7em; line-height: 1.3em; padding: 0 .4em; }
body[data-view="board"] .seat.turn { border-color: rgba(229,204,128,.7); box-shadow: 0 0 0 .15em rgba(229,204,128,.35), 0 1.4em 3em -1.6em rgba(229,204,128,.8); }
body[data-view="board"] .seat.won { border-color: rgba(229,204,128,.8); background: rgba(229,204,128,.1); }
body[data-view="board"] .seat.empty { border-style: dashed; background: rgba(20,18,28,.4); }
body[data-view="board"] .seat-played { width: 34%; right: -8%; }
body[data-view="board"] .react-pop { width: 46%; max-width: none; top: -10%; }
body[data-view="board"] .centre { grid-column: 2; grid-row: 1 / -1; align-content: center; gap: 1em; min-height: 0; overflow: hidden; padding: 0 .4em; }
body[data-view="board"] .hud { gap: .8em 1.2em; }
body[data-view="board"] .hud-round { font-size: .85em; }
body[data-view="board"] .hud-title { font-size: 1.5em; }
body[data-view="board"] .clock { font-size: 1.3em; padding: .25em .7em; } body[data-view="board"] .clock .ic { width: 1em; height: 1em; }
body[data-view="board"] .prompt-wrap { max-width: none; }
body[data-view="board"] .prompt { padding: 1.3em 1.5em 1.8em; border-radius: 1.4em; }
body[data-view="board"] .prompt-text { font-size: 2.3em; line-height: 1.3; }
body[data-view="board"] .prompt[data-len="mid"] .prompt-text { font-size: 1.95em; }
body[data-view="board"] .prompt[data-len="long"] .prompt-text { font-size: 1.6em; }
body[data-view="board"] .prompt-pick { font-size: .8em; right: 1.1em; bottom: .7em; }
body[data-view="board"] .prompt-by { font-size: 1.1em; padding: .3em .9em .3em .4em; }
body[data-view="board"] .prompt-by .ch-wrap.mini { width: 2em; }
body[data-view="board"] .plays { max-width: none; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15em), 1fr)); gap: .7em; }
body[data-view="board"] .plays.many { grid-template-columns: repeat(3, minmax(0, 1fr)); }
body[data-view="board"] .play-card { font-size: 1.05em; padding: .9em 1em 1em; border-radius: 1em; min-height: 5em; }
body[data-view="board"] .play[data-shown="0"] .play-card { font-size: 2em; min-height: 2.6em; }
body[data-view="board"] .play-foot { font-size: .9em; }
body[data-view="board"] .play-who .ch-wrap.mini { width: 1.6em; }
body[data-view="board"] .status { font-size: 1.2em; max-width: none; }
body[data-view="board"] .notice { font-size: 1em; }
body[data-view="board"] .host-bar .mini-btn { font-size: .9em; padding: .5em .8em; }
body[data-view="board"] .lobby { max-width: none; gap: 1.2em; }
body[data-view="board"] .big-code { font-size: 7em; }
body[data-view="board"] .join-how { font-size: 1.25em; }
body[data-view="board"] .qr { width: 12em; height: 12em; }
body[data-view="board"] .lobby-settings { display: flex; justify-content: center; }
body[data-view="board"] .lobby-settings .tset { display: none; }
body[data-view="board"] .lobby-line { font-size: 1.15em; }
body[data-view="board"] .lobby-start .btn.big { font-size: 1.2em; }
body[data-view="board"] .chip { font-size: .9em; }
body[data-view="board"] .over { max-width: none; }
body[data-view="board"] .champ-ch { width: 11em; }
body[data-view="board"] .champ h2 { font-size: 3em; }
body[data-view="board"] .standings { width: min(100%, 30em); } body[data-view="board"] .standings li { font-size: 1.1em; }
/* the board with lines: the champion in a row beside their name, the line large, the standings as one row of chips (the seats carry the points too) */
body[data-view="board"] .over.with-lines { gap: .9em; }
body[data-view="board"] .over.with-lines .champ { grid-template-columns: auto auto; column-gap: 1.2em; align-items: center; justify-items: start; text-align: left; }
body[data-view="board"] .over.with-lines .champ .eyebrow { grid-column: 2; margin: 0; align-self: end; }
body[data-view="board"] .over.with-lines .champ .act-btns { grid-row: 1 / span 3; grid-column: 1; }
body[data-view="board"] .over.with-lines .champ h2 { grid-column: 2; margin: 0; font-size: 2.6em; }
body[data-view="board"] .over.with-lines .champ p:last-child { grid-column: 2; align-self: start; }
body[data-view="board"] .over.with-lines .champ-ch { width: 7em; }
body[data-view="board"] .lines { gap: .6em; }
body[data-view="board"] .lines-head { font-size: .95em; }
body[data-view="board"] .line-card { min-height: 9.5em; padding: 1.3em 1.6em 1.1em; border-radius: 1.4em; gap: .9em; }
body[data-view="board"] .line-text { font-size: 1.85em; line-height: 1.32; }
body[data-view="board"] .line-by { font-size: 1.05em; } body[data-view="board"] .line-by b { font-size: 1.1em; } body[data-view="board"] .line-by .ch-wrap.mini { width: 2.2em; }
body[data-view="board"] .line-arrow { width: 2.6em; height: 2.6em; } body[data-view="board"] .line-arrow .ic { width: 1.2em; height: 1.2em; }
body[data-view="board"] .line-dot { width: 1.4em; height: 1.4em; } body[data-view="board"] .line-dot::before { width: .5em; height: .5em; }
body[data-view="board"] .over.with-lines .standings { display: flex; flex-wrap: wrap; justify-content: center; gap: .5em; width: 100%; }
body[data-view="board"] .over.with-lines .standings li { font-size: .95em; padding: .35em .8em; gap: .5em; }
body[data-view="board"] .over.with-lines .standings .nm { flex: none; }
/* the join code sits in the header band, top centre: every seat row at the sides stays free for a player */
body[data-view="board"] .corner { left: 50%; top: -4.05em; bottom: auto; transform: translateX(-50%); padding: .3em 1em .3em .3em; border-radius: .9em; gap: .7em; white-space: nowrap; }
body[data-view="board"] .corner .qr.small { width: 3.3em; height: 3.3em; padding: .2em; border-radius: .5em; }
body[data-view="board"] .corner div { display: flex; align-items: baseline; gap: .6em; }
body[data-view="board"] .corner b { font-size: 1.6em; } body[data-view="board"] .corner small { font-size: .9em; } body[data-view="board"] .corner-lbl { font-size: .75em; }
body[data-view="board"] .pile-card { width: 3.2em; height: 4.4em; left: -1.6em; top: -2.2em; }
body[data-view="board"] .bottom, body[data-view="board"] .chat, body[data-view="board"] .invite { display: none; }
body[data-view="board"] .toast { font-size: 1.1em; }
body[data-view="board"] .fly { font-size: 1.1em; }
@media (max-aspect-ratio: 4/3) { body[data-view="board"] .stage { grid-template-columns: minmax(10em, 16%) minmax(0, 1fr) minmax(10em, 16%); } body[data-view="board"] .seat { flex-direction: column; text-align: center; } body[data-view="board"] .seat[data-col="r"] { flex-direction: column; text-align: center; } body[data-view="board"] .seat-meta, body[data-view="board"] .seat[data-col="r"] .seat-meta { justify-content: center; } }
/* a board opened on something narrow (a laptop half-screen, a tablet held upright): stack it and let it scroll */
@media (max-width: 720px) {
  body[data-view="board"] { overflow: auto; height: auto; min-height: 100dvh; }
  body[data-view="board"] .top { position: static; }
  body[data-view="board"] .table { height: auto; min-height: 0; padding: .6em 1em 1.2em; }
  body[data-view="board"] .stage { display: flex; flex-direction: column; gap: 1.2em; }
  body[data-view="board"] .seats { display: flex; flex-wrap: wrap; justify-content: center; gap: .6em; order: 2; }
  body[data-view="board"] .seat, body[data-view="board"] .seat[data-col="r"] { flex: 1 1 11em; max-width: 16em; flex-direction: row; text-align: left; }
  body[data-view="board"] .centre { order: 1; overflow: visible; }
  body[data-view="board"] .corner { position: static; transform: none; order: 3; align-self: center; margin-top: .4em; }
}