/* JEV SAYS! v3. LegalDesign on a big screen, with a show behind it: the v2 bones (one family, hairlines,
   sentence case, one accent, the white card) over a living halftone field, with kinetic type and one
   burst per moment. Contract: research/v3/design/DESIGN-v3.md (+ motion.html). Stage units are px of a
   1920×1080 (or 1080×1920) stage. Every colour is a token; theme.js writes the ground tokens from the
   same palette the canvases use.
   Rule of thumb for legibility: small and medium text never sits bare on the field. It lives on a white
   card, a solid pill (.plate) or a calm solid panel (.panel); only huge display type sits on the field. */

/* ============================================================ 1. TOKENS */
:root {
  /* the ground (theme.js overwrites these per ground and scheme; these are Deep + Default) */
  --bg: #0d0d12; --ink: #f4f4f2; --muted: rgba(244,244,242,.66); --line-g: rgba(244,244,242,.16); --line-g-strong: rgba(244,244,242,.34);
  --plate: #1c1c21; --wash: rgba(13,13,18,.86); --scrim: rgba(0,0,0,.62);
  --accent: #ff3b30; --on-accent: #ffffff; --accent-ink: #d61f12; --accent-g: #ff3b30;
  --team-1: #3d7bff; --on-team-1: #ffffff; --team-2: #ffb020; --on-team-2: #111111;
  --team-1-g: #3d7bff; --team-2-g: #ffb020; --team-1-c: #3d7bff; --team-2-c: #b37a14;
  /* team colour as a fill that carries text: on-team text ≥ 4.6:1 (theme.js deepens Cobalt / Magenta) */
  --team-1-fill: #366ce0; --team-2-fill: #ffb020;
  --shadow-card: 0 2px 6px rgba(0,0,0,.28), 0 28px 72px rgba(0,0,0,.38);
  /* the card: white on every ground, its text always dark (§1.2) */
  --card: #ffffff; --card-ink: #111111; --card-muted: #565656; --line: rgba(17,17,17,.14); --line-strong: rgba(17,17,17,.32); --tint: #f3f3f3;
  --sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --r-control: 6px; --r-card: 12px; --r-pill: 999px;
  --silk: cubic-bezier(.16,1,.3,1);
}
/* Anything on a white card reads the card's tokens: ink, muted and lines go dark, the accent becomes the
   scheme's paper accent (legible on white), team colours use their on-white variants. */
:is(.card, .tile, .pod, .bframe, .chipb, .ltpanel, .tcard, .caption, .jev-note, .initials .ch, .okey) {
  --ink: var(--card-ink); --muted: var(--card-muted); --line-g: var(--line); --line-g-strong: var(--line-strong);
  --accent: var(--accent-ink); --accent-g: var(--accent-ink); --on-accent: #ffffff; --plate: #ffffff;
  --team-1-g: var(--team-1-c); --team-2-g: var(--team-2-c);
  background: var(--card); color: var(--card-ink);
}

/* ============================================================ 2. BASE + STAGE + LAYERS */
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--bg); color: var(--ink); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
button, input, textarea, select { font: inherit; color: inherit; }
[hidden] { display: none !important; }
::selection { background: color-mix(in srgb, var(--accent) 22%, transparent); }
kbd { font: 500 20px/1 var(--sans); padding: 4px 8px; border: 1px solid var(--line-g-strong); border-radius: var(--r-control); color: var(--muted); }
.tab, .n, .sc, .pc, .timer .n { font-variant-numeric: tabular-nums; }
.eyebrow { font-size: 22px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); line-height: 1; }
.eyebrow.acc, .acc { color: var(--accent-g); }
.muted { color: var(--muted); }
.hint { font-size: 22px; line-height: 1.35; color: var(--muted); }
.body { font-size: 26px; line-height: 1.45; }
.heading { font-size: 64px; font-weight: 700; letter-spacing: -.02em; line-height: 1.05; color: var(--ink); }
.row { display: flex; align-items: center; gap: 24px; justify-content: center; }

/* solid backings for text on the field */
.plate { display: inline-flex; align-items: center; gap: 20px; background: var(--plate); color: var(--ink); border: 1px solid var(--line-g); border-radius: var(--r-pill); padding: 12px 30px; }
.panel { background: var(--plate); color: var(--ink); border: 1px solid var(--line-g); border-radius: var(--r-card); }

#viewport { position: fixed; inset: 0; overflow: hidden; background: var(--bg); }
#stage { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; transform-origin: 0 0; background: var(--bg); color: var(--ink);
  display: grid; grid-template-rows: 96px 1fr 160px; overflow: hidden; }
#stage.nopods { grid-template-rows: 96px 1fr 0; }
#stage.compact { grid-template-rows: 96px 1fr 200px; }
#stage.portrait { width: 1080px; height: 1920px; grid-template-rows: 96px minmax(0, 1fr) auto; }
#halftone { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; display: block; }
/* the BUZZER vignette sits on the field, under the scene: the red pulse rings the stage edge and the white
   cards stay white (above them it tinted every card pink) */
#vignette { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; box-shadow: inset 0 0 220px 40px var(--accent); }
#wash { position: absolute; inset: 0; z-index: 29; pointer-events: none; opacity: 0; visibility: hidden; background: var(--wash); }
#fxo { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 30; pointer-events: none; }
body.pause-open :is(#exclaim, #band, #wash, #fxo, #vignette) { visibility: hidden !important; }

/* ============================================================ 3. TOP BAR (a solid strip: its small type never sits on the field) */
#topbar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 48px; background: var(--bg); border-bottom: 1px solid var(--line-g); position: relative; z-index: 3; gap: 16px; }
.wordmark { font-size: 24px; font-weight: 700; letter-spacing: -.02em; white-space: nowrap; }
.roundlbl { display: flex; align-items: center; gap: 14px; grid-column: 2; }
.roundlbl .eyebrow { color: var(--ink); }
.mult { display: inline-block; font-size: 22px; font-weight: 500; line-height: 1; padding: 6px 12px; border: 1px solid var(--line-g-strong); border-radius: var(--r-control); color: var(--ink); letter-spacing: 0; text-transform: none; font-variant-numeric: tabular-nums; }
.chips { display: flex; gap: 12px; align-items: center; justify-content: flex-end; grid-column: 3; }
.chip { cursor: pointer; display: inline-flex; align-items: center; gap: 0; font-size: 20px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; line-height: 1; padding: 10px 16px; border: 1px solid var(--line-g); border-radius: var(--r-control); background: var(--bg); color: var(--ink); white-space: nowrap; }
.chip::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--line-g-strong); flex: none; margin-right: 10px; }
.chip .chip-more { white-space: pre; }
.chip.live::before, .chip.on::before { background: var(--accent); }
.chip.busy::before { background: var(--muted); }
.chip .chip-short { display: none; }
.chip.pause { gap: 6px; padding: 12px 14px; display: none; }
.chip.pause::before { display: none; }
.chip.pause i { display: block; width: 3px; height: 18px; background: var(--ink); }

/* ============================================================ 4. SCENE, SCREENS, THE QUESTION CARD */
#scene { position: relative; min-height: 0; z-index: 2; }
.screen { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; padding: 28px 48px 0; }
.screen.leaving { pointer-events: none; }
.card { border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-card); }
.qcard { position: relative; width: 1500px; padding: 36px 64px 44px; display: flex; flex-direction: column; align-items: center; gap: 22px; will-change: transform, opacity; flex: none; }
.qcard.left { align-items: flex-start; padding-left: 96px; }
.qcard .rule-l { position: absolute; left: 0; top: 36px; bottom: 36px; width: 8px; border-radius: 0 4px 4px 0; background: var(--accent); }
.q { font-weight: 700; letter-spacing: -.02em; text-align: center; margin: 0; color: var(--card-ink); text-wrap: balance; }
.qcard > .eyebrow.cat { font-size: 28px; }
.q.fo { font-size: 84px; line-height: 1.06; }
.q.bd { font-size: 72px; line-height: 1.08; }
.q.lt { font-size: 80px; line-height: 1.05; }
.q.ht { font-size: 72px; font-weight: 500; letter-spacing: -.01em; text-align: left; line-height: 1.12; }
.kt .wm { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .14em; margin-bottom: -.14em; }
.kt .w { display: inline-block; white-space: pre; will-change: transform; }

/* ============================================================ 5. CONTROLS */
.btn { cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 12px; font-size: 30px; font-weight: 500; line-height: 1; padding: 20px 44px; border-radius: var(--r-pill);
  background: var(--accent); color: var(--on-accent); border: 1px solid transparent; white-space: nowrap; transition: border-color .12s, opacity .12s, box-shadow .12s; text-decoration: none; }
@media (hover: hover) { .btn:hover { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent); } .btn.ghost:hover { box-shadow: none; border-color: var(--ink); } }
.btn:active { opacity: .85; }
.btn:focus-visible, .mrow:focus-visible, .tile:focus-visible, .chipb:focus-visible, .ltpanel:focus-visible, .keycap:focus-visible, .seg button:focus-visible, .link:focus-visible, .sw:focus-visible, .cats button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.btn.ghost { background: var(--plate); color: var(--ink); border-color: var(--line-g-strong); }
.btn.sm { font-size: 22px; padding: 12px 24px; }
.btn .key { color: var(--muted); }
.btn:disabled { opacity: .5; cursor: default; }
.seg { display: inline-flex; gap: 8px; flex-wrap: wrap; }
.seg button { cursor: pointer; font-size: 22px; font-weight: 500; line-height: 1; padding: 10px 18px; border: 1px solid var(--line-g-strong); border-radius: var(--r-control); background: var(--plate); color: var(--ink); white-space: nowrap; transition: border-color .12s, color .12s; }
.seg button.on { border-color: var(--accent); color: var(--accent-g); box-shadow: inset 0 0 0 1px var(--accent); }
.keycap { cursor: pointer; display: inline-block; font-size: 22px; font-weight: 500; line-height: 1; padding: 8px 14px; border: 1px solid var(--line-g-strong); border-radius: var(--r-control); background: var(--plate); color: var(--ink); white-space: nowrap; }
.keycap.listening { border-color: var(--accent); color: var(--accent-g); }
.link { cursor: pointer; color: var(--accent-g); font-size: 22px; font-weight: 500; background: none; border: 0; padding: 0; text-decoration: none; }
.link:hover { text-decoration: underline; }
.link.quiet { color: var(--muted); font-size: 20px; font-weight: 400; }
.badge { display: inline-flex; align-items: center; gap: 14px; padding: 14px 28px; border-radius: var(--r-pill); font-size: 32px; font-weight: 500; line-height: 1; white-space: nowrap; border: 0; text-transform: uppercase; letter-spacing: .02em; }
.badge.t1 { background: var(--team-1-fill); color: var(--on-team-1); }
.badge.t2 { background: var(--team-2-fill); color: var(--on-team-2); }
.badge.faded { background: var(--plate); color: var(--muted); box-shadow: inset 0 0 0 1px var(--line-g); }
.badge kbd { font: 500 22px/1 var(--sans); padding: 5px 9px; border: 1px solid currentColor; border-radius: 5px; opacity: .85; color: inherit; }
.badge .bg { font-size: 1em; }
button.badge { cursor: pointer; }
.dots { display: inline-flex; margin-left: 2px; }
.dots i { font-style: normal; animation: dot 1.2s linear infinite; opacity: .2; }
.dots i:nth-child(2) { animation-delay: .2s; } .dots i:nth-child(3) { animation-delay: .4s; }
.dots.beat-dots i { animation: none; opacity: .25; }
@keyframes dot { 0%, 60%, 100% { opacity: .2; } 30% { opacity: 1; } }

input.range { -webkit-appearance: none; appearance: none; width: 100%; max-width: 320px; height: 28px; background: transparent; cursor: pointer; }
input.range::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: var(--line-strong); }
input.range::-webkit-slider-thumb { -webkit-appearance: none; width: 28px; height: 28px; margin-top: -12px; border-radius: 50%; background: var(--accent); border: 1px solid var(--line-strong); }
input.range.plain::-webkit-slider-thumb { background: var(--card); }
input.range::-moz-range-track { height: 4px; border-radius: 2px; background: var(--line-strong); }
input.range::-moz-range-thumb { width: 28px; height: 28px; border-radius: 50%; background: var(--accent); border: 1px solid var(--line-strong); }
input.range.plain::-moz-range-thumb { background: var(--card); }

/* ============================================================ 6. BOTTOM: PODS (white cards, a 6 px team rule when active) */
#bottom { display: grid; grid-template-columns: 460px 1fr 460px; align-items: end; gap: 24px; padding: 0 48px 32px; position: relative; z-index: 3; pointer-events: none; min-height: 0; }
#stage.nopods #bottom { padding: 0; overflow: hidden; }
#bottom > * { pointer-events: auto; }
#bottom-center:empty { pointer-events: none; }
#bottom-center { display: flex; justify-content: center; align-items: flex-end; min-width: 0; }
#stage.compact #bottom { grid-template-columns: 320px 1fr 320px; }
/* A pod reads as its team from the back of the room: a team-colour band carries the glyph (the name and
   score stay on the white card), and the name is 28 px. */
.pod { --team: var(--team-1); --team-c: var(--team-1-c); --team-fill: var(--team-1-fill); --on-team: var(--on-team-1); position: relative; width: 460px; height: 120px; border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-card); padding: 14px 22px 14px 0; display: grid; grid-template-columns: 88px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 22px; align-content: center; will-change: transform, opacity; }
.pod.t2 { --team: var(--team-2); --team-c: var(--team-2-c); --team-fill: var(--team-2-fill); --on-team: var(--on-team-2); }
.pod::before { content: ""; position: absolute; left: -1px; right: -1px; top: -1px; height: 6px; border-radius: var(--r-card) var(--r-card) 0 0; background: var(--team); opacity: 0; transition: opacity .2s; z-index: 1; }
.pod.active::before { opacity: 1; }
.pod .g { grid-row: 1 / 3; align-self: stretch; margin: -14px 0; display: grid; place-items: center; font-size: 48px; line-height: 1; color: var(--on-team); background: var(--team-fill); border-radius: calc(var(--r-card) - 1px) 0 0 calc(var(--r-card) - 1px); }
.pod .nm { font-size: 28px; font-weight: 700; letter-spacing: .04em; line-height: 1.05; text-transform: uppercase; white-space: nowrap; overflow: hidden; display: flex; align-items: center; gap: 12px; min-width: 0; }
.pod .nm-t { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.pod .sc { font-size: 56px; font-weight: 700; line-height: 1; letter-spacing: -.02em; margin-top: 6px; transform-origin: left center; justify-self: start; }
.pod .tap { display: none; font-size: 22px; font-weight: 500; color: var(--team-c); margin-top: 8px; }
/* CONTROL / STEAL sits beside the score (bottom right), so the name keeps its whole width */
.pod .tag { position: absolute; top: auto; bottom: 18px; right: 18px; font-size: 18px; padding: 6px 12px; border-radius: var(--r-pill); background: var(--team-fill); color: var(--on-team); letter-spacing: .12em; }
.pod:has(.combo) .nm { padding-right: 132px; }
.pod .lives { display: inline-flex; gap: 6px; flex: none; }
.pod .lives i { width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--line-strong); transition: background-color .2s, border-color .2s; }
.pod .lives i.on { background: var(--accent); border-color: var(--accent); }
.pod .combo { position: absolute; top: 12px; right: 20px; font-size: 22px; font-weight: 500; line-height: 1; padding: 6px 12px; border: 1px solid var(--line-strong); border-radius: var(--r-control); font-variant-numeric: tabular-nums; }
.pod .combo.hot { border-color: var(--accent); color: var(--accent); }
.pod .strikes { display: flex; gap: 6px; grid-column: 2; margin-top: 6px; }
.pod .strikes i { width: 22px; height: 22px; border: 1px solid var(--line-strong); border-radius: 3px; }
.pod .strikes i.on { background: var(--accent); border-color: var(--accent); }
#stage.compact .pod { width: 320px; height: 112px; padding: 12px 18px 12px 0; grid-template-columns: 64px minmax(0, 1fr); column-gap: 16px; }
#stage.compact .pod .g { font-size: 34px; margin: -12px 0; } #stage.compact .pod .sc { font-size: 48px; } #stage.compact .pod .nm { font-size: 20px; }
#stage.compact .pod .tag { top: auto; bottom: 16px; right: 16px; font-size: 15px; }
#stage.compact:not(.portrait) .pod .tag { bottom: calc(100% + 10px); right: 0; }
#stage.compact .pod:has(.tag) .nm { padding-right: 0; }

/* ============================================================ 7. FOCUS DIM: a solid dim toward the ground, never opacity over the field */
:is(.qcard, .tile, .bframe, .ltpanel, .pod, .chipb, .panel, .plate, .scale-wrap, .badge.buzz-btn)::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--bg); opacity: 0; pointer-events: none; transition: opacity .45s cubic-bezier(.33,1,.68,1); z-index: 6; }
:is(.qcard, .tile, .bframe, .ltpanel, .pod, .chipb, .panel, .plate, .scale-wrap) { transition: scale .45s cubic-bezier(.33,1,.68,1); }
.plate, .panel, .badge.buzz-btn { position: relative; }
.dimmed { scale: .985; }
.dimmed::after { opacity: .7 !important; }
body.touch .dimmed { scale: 1; }
.tile.gone::after { opacity: .6; }
.tile.gone { pointer-events: none; }
.ltpanel.lose::after { opacity: .55; }
.pod.dim::after { opacity: .5; }
.tray.loading .chipb::after { opacity: .5; }

/* ============================================================ 8. LAYERS: overlay, exclamation, band, caption, toast */
#overlay-layer { position: absolute; inset: 0; pointer-events: none; z-index: 20; }
#overlay-layer > * { pointer-events: auto; }
#overlay-layer > .rise, #overlay-layer > .sassline { pointer-events: none; }
.overlay { position: absolute; inset: 0; background: var(--scrim); display: grid; place-items: center; }
.exclaim { position: absolute; inset: 0; z-index: 31; display: flex; flex-direction: column; align-items: center; justify-content: center; padding-bottom: 60px; pointer-events: none; }
.exclaim .x { font-size: 240px; font-weight: 700; line-height: .95; letter-spacing: -.03em; text-transform: uppercase; white-space: nowrap; color: var(--ink); text-align: center; will-change: transform; }
.exclaim .x.acc { color: var(--accent-g); }
.exclaim .x.t1 { color: var(--team-1-g); }
.exclaim .x.t2 { color: var(--team-2-g); }
.exclaim .x.wrap { white-space: normal; max-width: 1000px; font-size: 150px; }
.exclaim .rule { width: 0; height: 3px; background: var(--accent); margin-top: 28px; }
.exclaim .rule.t1 { background: var(--team-1); } .exclaim .rule.t2 { background: var(--team-2); }
.exclaim .sub { font-size: 44px; font-weight: 400; line-height: 1.25; color: var(--ink); margin-top: 28px; max-width: 1500px; text-align: center; }
.exclaim.beat .x { font-size: 110px; letter-spacing: -.02em; line-height: 1; text-transform: none; display: flex; align-items: baseline; }
.exclaim .thinking { display: flex; align-items: baseline; gap: 2px; }
.exclaim .xw { white-space: nowrap; }
#band { position: absolute; inset: 0; z-index: 33; pointer-events: none; visibility: hidden; overflow: hidden; }
#band .band-bg { position: absolute; inset: 0; background-color: var(--accent); background-image: radial-gradient(circle, color-mix(in srgb, var(--on-accent) 14%, transparent) 0 3px, transparent 3.5px); background-size: 28px 28px; transform: scaleX(0); transform-origin: 0 50%; will-change: transform; }
#band .band-in { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 28px; color: var(--on-accent); text-align: center; padding: 0 60px; }
#band .b-eb { color: var(--on-accent); font-size: 34px; }
#band .b-title { font-size: 200px; font-weight: 700; line-height: .95; letter-spacing: -.03em; white-space: nowrap; text-transform: uppercase; }
#band .b-sub { font-size: 40px; line-height: 1.3; }
#band .b-mult { font-size: 28px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; padding: 10px 22px; border: 2px solid currentColor; border-radius: var(--r-pill); }
.rise { position: absolute; font-size: 32px; font-weight: 700; line-height: 1; padding: 10px 18px; border-radius: var(--r-pill); white-space: nowrap; font-variant-numeric: tabular-nums; }
.rise.t1 { background: var(--team-1-fill); color: var(--on-team-1); } .rise.t2 { background: var(--team-2-fill); color: var(--on-team-2); }
.sassline { position: absolute; font-size: 28px; font-weight: 400; line-height: 1.3; color: var(--ink); white-space: nowrap; text-align: center; background: var(--plate); border: 1px solid var(--line-g); border-radius: var(--r-pill); padding: 10px 26px; }

.caption { position: absolute; left: 50%; bottom: 172px; transform: translateX(-50%); z-index: 34; width: max-content; max-width: 1500px; display: flex; gap: 16px; align-items: center;
  padding: 12px 24px; border: 1px solid var(--line); border-radius: var(--r-control); box-shadow: var(--shadow-card); font-size: 30px; font-weight: 500; line-height: 1.2; white-space: nowrap; }
#stage.tray-up .caption { bottom: 212px; }
#stage.cue-up .caption { bottom: auto; top: 108px; }
.caption .mic-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); flex: none; animation: micdot 1.6s linear infinite; }
@keyframes micdot { 0%, 100% { opacity: 1; } 50% { opacity: .4; } }
.caption .who { font-size: 22px; padding: 6px 14px; flex: none; }
.caption .said { color: var(--card-ink); min-width: 120px; flex: 0 30 auto; overflow: hidden; text-overflow: ellipsis; }
.caption .arrow { font-size: 26px; color: var(--card-muted); flex: none; }
.caption .heard { font-weight: 700; flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.caption .tag { font-size: 20px; color: var(--card-muted); text-transform: uppercase; letter-spacing: .06em; font-variant-numeric: tabular-nums; flex: none; }
.caption .tag.err { color: var(--accent-ink); text-transform: none; letter-spacing: 0; font-size: 26px; }
.caption.toast { bottom: auto; top: 120px; z-index: 40; white-space: normal; text-align: center; max-width: 1200px; }
body.pause-open .caption:not(.toast) { visibility: hidden; }

/* ============================================================ 9. BOOT */
.boot { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; background: var(--bg); color: var(--ink); cursor: pointer; }
.boot-inner { text-align: center; padding: 0 16px; }
.boot-logo { font-size: min(18vw, 24vh); font-weight: 700; line-height: .9; letter-spacing: -.035em; }
.boot-press { margin-top: 48px; font-size: max(16px, 1.25vw); font-weight: 500; }
.boot-note { margin-top: 16px; font-size: max(13px, .95vw); color: var(--muted); }

/* ============================================================ 10. TITLE, QUICK MENU, HOW TO */
.title-screen { padding-top: 40px; }
.wordmark-big { font-size: 220px; font-weight: 700; line-height: .9; letter-spacing: -.035em; white-space: nowrap; color: var(--ink); }
.tagline { font-size: 32px; color: var(--ink); margin-top: 28px; }
.menu-panel { width: 1100px; margin-top: 32px; padding: 8px 36px 24px; display: flex; flex-direction: column; box-shadow: var(--shadow-card); }
.menu { width: 100%; }
.mrow { cursor: pointer; width: 100%; display: grid; grid-template-columns: 48px 1fr auto 40px; align-items: center; height: 100px; border: 0; border-bottom: 1px solid var(--line-g); gap: 24px; background: none; padding: 0; text-align: left; color: var(--ink); }
.mrow:last-child { border-bottom: 0; }
.mrow .lbl { font-size: 40px; font-weight: 500; letter-spacing: -.01em; transition: color .12s; }
.mrow .sub { font-size: 22px; color: var(--muted); text-align: right; }
.mrow .arr { font-size: 30px; color: var(--muted); text-align: right; transition: color .12s; }
.mrow.focus .lbl, .mrow.focus .arr { color: var(--accent-g); }
@media (hover: hover) { .mrow:hover .lbl, .mrow:hover .arr { color: var(--accent-g); } }
.title-foot { display: flex; gap: 14px; margin-top: 20px; justify-content: center; flex-wrap: wrap; padding-top: 20px; border-top: 1px solid var(--line-g); }
.ticker { position: absolute; left: 50%; bottom: 32px; transform: translateX(-50%); max-width: 1100px; text-align: center; font-size: 22px; line-height: 1.3; }
.arcade { position: absolute; right: 48px; bottom: 32px; }
#stage .arcade.plate { padding: 10px 22px; font-size: 20px; }
body.touch #stage .arcade.plate { font-size: max(20px, var(--fmin)); }
.quick-screen { padding-top: 40px; }
.quick-screen .menu-panel { margin-top: 28px; }
.quick-screen .mrow { height: 96px; }
.quick-screen .foot { margin-top: 28px; }
.howto { padding-top: 40px; }
.howto-cards { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; width: 1760px; margin-top: 36px; }
.howto-card { padding: 32px 28px; display: flex; flex-direction: column; gap: 20px; }
.howto-card .eyebrow { color: var(--card-ink); }
.howto-card p { margin: 0; font-size: 26px; line-height: 1.45; }
.howto-hint { margin: 32px 0; max-width: 1500px; text-align: center; border-radius: var(--r-card); }

/* ============================================================ 11. SETUP + VERSUS */
.setup { padding-top: 40px; }
.team-cards { display: flex; align-items: center; gap: 48px; margin-top: 40px; }
.team-cards .vs, .vs-row .vs { font-size: 32px; color: var(--ink); padding: 12px 26px; }
.tcard { --team: var(--team-1); --team-c: var(--team-1-c); position: relative; width: 720px; height: 420px; border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-card); padding: 44px 32px 32px; display: flex; flex-direction: column; align-items: center; gap: 20px; will-change: transform, opacity; }
.tcard.t2 { --team: var(--team-2); --team-c: var(--team-2-c); }
.tcard::before { content: ""; position: absolute; left: -1px; right: -1px; top: -1px; height: 6px; border-radius: var(--r-card) var(--r-card) 0 0; background: var(--team); }
.tcard .g { font-size: 96px; line-height: 1; color: var(--team-c); transition: opacity .2s; }
.tcard .g.thinking { opacity: .4; }
.tcard input.name { width: 100%; text-align: center; font-size: 44px; font-weight: 700; text-transform: uppercase; letter-spacing: -.01em; padding: 8px 0 12px; border: 0; border-bottom: 1px solid var(--line-strong); background: transparent; color: var(--card-ink); outline: none; caret-color: var(--accent); border-radius: 0; }
.tcard input.name:focus { border-bottom-color: var(--accent); }
.tcard .why { font-size: 20px; color: var(--card-muted); display: flex; align-items: baseline; }
.tcard .bz { display: flex; align-items: center; gap: 16px; }
.setup-opts { margin-top: 36px; gap: 28px; padding: 14px 28px; }
.setup-go { margin-top: 32px; }
.setup-touch { margin-top: 28px; text-align: center; }
.versus { justify-content: center; padding-bottom: 80px; }
.versus > .plate { font-size: 22px; letter-spacing: .14em; text-transform: uppercase; }
.vs-row { display: flex; align-items: center; gap: 48px; margin-top: 48px; }
.vs-team { display: flex; align-items: center; gap: 24px; padding: 28px 48px; border-radius: var(--r-card); box-shadow: var(--shadow-card); }
.vs-team.t1 { background: var(--team-1-fill); color: var(--on-team-1); } .vs-team.t2 { background: var(--team-2-fill); color: var(--on-team-2); }
.vs-team .g { font-size: 72px; line-height: 1; }
.vs-team .n { font-size: 72px; font-weight: 700; letter-spacing: -.02em; line-height: 1; white-space: nowrap; }
.vs-team .n .xw { white-space: nowrap; }

/* ============================================================ 12. FACE-OFF */
.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; width: 1640px; margin-top: 28px; }
.tile { cursor: pointer; position: relative; height: 150px; display: grid; grid-template-columns: 64px 1fr auto; align-items: center; gap: 22px; padding: 0 28px; border: 2px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-card); overflow: hidden; text-align: left; transition: border-color .2s, background-color .2s, scale .45s cubic-bezier(.33,1,.68,1); will-change: transform, opacity; }
@media (hover: hover) { .tile:hover { border-color: var(--line-strong); } }
.tile .k { width: 64px; height: 64px; display: grid; place-items: center; border: 1px solid var(--line-strong); border-radius: var(--r-control); font-size: 28px; font-weight: 500; color: var(--card-muted); transition: background-color .2s, color .2s, border-color .2s; }
.tile .t { font-size: 52px; font-weight: 500; line-height: 1.1; letter-spacing: -.01em; min-width: 0; text-wrap: balance; }
/* the rank cell keeps its width from the start (the answer never re-wraps when "#1 · 83%" flips in):
   the rank sits over the percent, so the reserve is only as wide as "100%" */
.tile .r { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; min-width: 116px; visibility: hidden; transform-origin: 50% 100%; }
.tile .r b { font-size: 30px; font-weight: 500; line-height: 1; color: var(--card-muted); font-variant-numeric: tabular-nums; }
.tile .r i { font-size: 44px; font-weight: 700; font-style: normal; color: var(--card-ink); font-variant-numeric: tabular-nums; }
.tile .bar { position: absolute; left: 0; bottom: 0; height: 6px; background: var(--accent-ink); width: 0; }
.tile.rev .r { visibility: visible; }
.tile .lk { position: absolute; top: 12px; right: 16px; font-size: 18px; padding: 5px 10px; border-radius: var(--r-pill); letter-spacing: .12em; }
.tile.l1 { border: 3px solid var(--team-1-c); } .tile.l1 .k { background: var(--team-1-fill); color: var(--on-team-1); border-color: var(--team-1-fill); } .tile.l1 .lk { background: var(--team-1-fill); color: var(--on-team-1); }
.tile.l2 { border: 3px solid var(--team-2-c); } .tile.l2 .k { background: var(--team-2-fill); color: var(--on-team-2); border-color: var(--team-2-fill); } .tile.l2 .lk { background: var(--team-2-fill); color: var(--on-team-2); }
.tile.win { background: color-mix(in srgb, var(--accent-ink) 9%, #fff); border: 3px solid var(--accent-ink); }
.tile.win .r b, .tile.win .r i, .tile.is-first .r i { color: var(--accent-ink); }
.tile.win .lk { background: var(--accent-ink); color: #fff; }
.tile.miss .t, .tile.miss .r i { color: var(--card-muted); }
.tile.miss .bar { background: var(--line-strong); }
.tile.rev .lk { display: none; }   /* once the rank is up it says the rest (and "#1" sits where the tag was) */
.fo-status { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-top: 26px; min-height: 76px; }
.cue { display: flex; align-items: center; gap: 28px; font-size: 36px; font-weight: 500; line-height: 1.2; min-height: 72px; }
.buzz-cue .pair { display: contents; }
.buzz-cue .buzz-btn.t1 { order: -1; } .buzz-cue .call { order: 0; } .buzz-cue .buzz-btn.t2 { order: 1; }
.buzz-cue .call { font-size: 36px; }
.floor-line { font-size: 36px; font-weight: 500; line-height: 1.2; }
.floor-line.t1 { color: var(--team-1-g); } .floor-line.t2 { color: var(--team-2-g); }
.ask-row { display: flex; align-items: center; gap: 28px; padding: 8px 32px 8px 10px; }
.ask-row .ask-line, .ask-row .ask-hint { font-size: 34px; font-weight: 500; }
.status { display: flex; align-items: baseline; gap: 24px; font-size: 36px; font-weight: 500; }
.status .hint { font-size: 24px; }

/* timer ring */
.timer { position: relative; width: 120px; height: 120px; flex: none; }
.ask-row .timer { width: 88px; height: 88px; }
.ask-row .timer .n { font-size: 36px; }
.timer svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.timer .tr { fill: none; stroke: var(--line-g); stroke-width: 3; }
.timer .arc { fill: none; stroke: var(--accent); stroke-width: 5; stroke-linecap: round; }
.timer .n { position: absolute; inset: 0; display: grid; place-items: center; font-size: 44px; font-weight: 700; color: var(--ink); }
.timer.urgent .n { color: var(--accent-g); }

/* play or pass: on the wash */
.overlay.pp-overlay { background: var(--wash); }
.pp { display: flex; flex-direction: column; align-items: center; }
.pp-title { font-size: 110px; font-weight: 700; letter-spacing: -.02em; line-height: 1; margin-top: 36px; color: var(--ink); }
.pp-row { display: flex; gap: 48px; margin-top: 52px; }
.pp-row .btn { font-size: 40px; padding: 26px 64px; }
.pp .hint { margin-top: 36px; font-size: 26px; }

/* ============================================================ 13. THE BOARD */
.brow { display: flex; align-items: center; gap: 28px; margin-top: 24px; }
.bank { width: 250px; padding: 26px 16px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.bank .n { font-size: 88px; font-weight: 700; line-height: 1; letter-spacing: -.02em; display: inline-block; }
.bframe { position: relative; padding: 14px; border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-card); will-change: transform, opacity; }
.grid8 { display: grid; grid-auto-flow: column; grid-template-rows: repeat(4, 84px); grid-template-columns: 590px 590px; gap: 10px; }
.slot { position: relative; display: flex; align-items: center; border: 1px solid var(--line); border-radius: 8px; background: var(--tint); overflow: hidden; transition: border-color .2s, background-color .2s; perspective: 900px; }
.slot .num { position: absolute; inset: 0; display: grid; place-items: center; font-size: 32px; font-weight: 500; color: var(--card-muted); }
.slot .face { position: absolute; inset: 0; display: flex; align-items: center; padding-left: 16px; opacity: 0; background: var(--card); transform-origin: 50% 0%; }
.slot.target { border: 2px solid var(--accent-ink); } .slot.target .num { color: var(--accent-ink); }
.slot.shown { background: var(--card); border-color: var(--line-strong); }
.slot .rk { min-width: 56px; padding-right: 10px; flex: none; font-size: 22px; font-weight: 500; color: var(--card-muted); display: flex; align-items: center; gap: 6px; }
.slot .tx { flex: 1; min-width: 0; font-size: 48px; font-weight: 500; line-height: 1; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; color: var(--card-ink); }
.slot .pc { width: 128px; flex: none; align-self: stretch; display: grid; place-items: center; border-left: 1px solid var(--line); font-size: 44px; font-weight: 700; color: var(--card-ink); }
.slot .bar { position: absolute; left: 0; bottom: 0; height: 6px; width: 0; background: var(--accent-ink); }
.slot.miss .tx, .slot.miss .pc, .slot.late .pc, .slot.late .tx { color: var(--card-muted); }
.slot.miss .rk::before { content: "×"; color: var(--accent-ink); font-size: 24px; }
.slot.steal.by-t1 .bar { background: var(--team-1-c); } .slot.steal.by-t2 .bar { background: var(--team-2-c); }
.slot .tied { font-size: 15px; letter-spacing: .12em; color: var(--accent-ink); margin-left: 4px; text-transform: uppercase; }
.side { width: 270px; padding: 24px 16px; display: flex; flex-direction: column; align-items: center; gap: 20px; text-align: center; }
.side .badge { font-size: 22px; padding: 10px 16px; max-width: 250px; white-space: normal; justify-content: center; text-align: center; line-height: 1.1; }
.side .ask { font-size: 36px; font-weight: 500; line-height: 1.2; min-height: 44px; transition: color .2s; }
.side .ask.nudge { color: var(--accent-g); }
.side .ask.loading { font-size: 24px; color: var(--muted); }
.strikes { display: flex; gap: 10px; }
.side .strikes i { width: 44px; height: 44px; border: 1px solid var(--line-g-strong); border-radius: var(--r-control); display: grid; place-items: center; font-size: 28px; font-style: normal; font-weight: 700; color: transparent; transition: background-color .2s, color .2s, border-color .2s; }
.side .strikes i.on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.timer-slot { min-height: 120px; display: grid; place-items: center; }
.board-foot { min-height: 56px; margin-top: 14px; display: flex; justify-content: center; align-items: center; }
.latency { font-size: 22px; color: var(--muted); }
.board-foot .plate { font-size: 24px; padding: 10px 24px; }
.board-foot .status { font-size: 32px; }
.tray { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; width: 100%; max-width: 1180px; }
.chipb { cursor: pointer; position: relative; height: 72px; display: flex; align-items: center; gap: 12px; padding: 0 16px; border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 2px 6px rgba(0,0,0,.2); font-size: 28px; font-weight: 500; line-height: 1.15; text-align: left; min-width: 0; transition: border-color .12s; }
@media (hover: hover) { .chipb:hover { border-color: var(--line-strong); } }
.chipb span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-width: 0; }
.chipb kbd { flex: none; }
.chipb.used { visibility: hidden; }

/* The board on a desktop / projector ("board-desk", set by board.js when there is no touch and the stage is
   landscape): the eight options are what the back row has to read, so the tray takes the whole stage width
   in its own row above full-size pods, one line per option at 44 → 34 px (board.js fits the tray). The
   foot lines (latency, "nobody found #1") and the caption sit between the pods. Phones keep compact. */
#stage.board-desk { grid-template-rows: 96px minmax(0, 1fr) auto; }
#stage.board-desk #bottom { grid-template-rows: auto auto; row-gap: 14px; padding-bottom: 24px; }
#stage.board-desk #bottom-center { grid-row: 1; grid-column: 1 / -1; }
#stage.board-desk #pod-red { grid-row: 2; grid-column: 1; } #stage.board-desk #pod-blue { grid-row: 2; grid-column: 3; }
#stage.board-desk .tray { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 14px; max-width: none; font-size: 44px; }
#stage.board-desk .chipb { height: 66px; font-size: inherit; line-height: 1.1; padding: 0 12px 0 12px; gap: 12px; }
#stage.board-desk .chipb kbd { font-size: 22px; }
#stage.board-desk .chipb span { display: block; flex: 1; white-space: nowrap; overflow: hidden; line-height: 1.3; -webkit-line-clamp: unset; }
#stage.board-desk .caption { bottom: 40px; max-width: 880px; }
#stage.board-desk .board-scene { padding-top: 22px; padding-bottom: 20px; }
#stage.board-desk .board-scene .qcard { padding: 22px 64px 26px; gap: 10px; }
/* the frame takes the height a one-line question leaves (slots up to ~96 px), 76 px slots under two lines */
#stage.board-desk .brow { margin-top: 16px; gap: 24px; align-items: stretch; flex: 1 1 auto; min-height: 0; max-height: 450px; }
#stage.board-desk .bframe { display: flex; }
#stage.board-desk .bank { width: 240px; justify-content: center; }
#stage.board-desk .side { width: 250px; padding: 18px 14px; gap: 14px; justify-content: center; }
#stage.board-desk .timer-slot { min-height: 104px; }
#stage.board-desk .side .timer { width: 104px !important; height: 104px !important; }
#stage.board-desk .grid8 { flex: 1; grid-template-rows: repeat(4, minmax(76px, 1fr)); grid-template-columns: 622px 622px; }
#stage.board-desk .slot .pc { width: 112px; }
.board-foot.desk { position: absolute; left: 50%; bottom: 44px; transform: translateX(-50%); margin: 0; min-height: 0; z-index: 1; pointer-events: none; }
.board-foot.desk .plate { white-space: nowrap; }

/* ============================================================ 14. HOT TAKE */
.screen.hottake { padding-top: 28px; }
.scale-wrap { position: relative; margin-top: 24px; }
.scale svg { height: 312px; overflow: visible; display: block; }
.scale-wrap { margin-bottom: 170px; }
body.touch .scale-wrap { margin-bottom: 0; }
.scale svg.dialing { cursor: pointer; touch-action: none; }
.scale .splate { fill: var(--plate); stroke: var(--line-g); stroke-width: 1; }
.scale .track { stroke: var(--line-g-strong); stroke-width: 3; }
.scale .tick { stroke: var(--line-g-strong); stroke-width: 2; }
.scale text { font-family: var(--sans); fill: var(--muted); font-size: 24px; font-variant-numeric: tabular-nums; }
.scale .stem1 { stroke: var(--team-1); stroke-width: 3; } .scale .stem2 { stroke: var(--team-2); stroke-width: 3; }
.scale .pill1 { fill: var(--team-1-fill); } .scale .pill2 { fill: var(--team-2-fill); }
.scale .pt1 { fill: var(--on-team-1); font-size: 34px; font-weight: 700; } .scale .pt2 { fill: var(--on-team-2); font-size: 34px; font-weight: 700; }
.scale .off { fill: var(--ink); font-size: 30px; font-weight: 500; }
/* the bid being typed, big, on the scale itself (desktop; a phone has the nudges there) */
.scale .bplate { stroke: none; }
.scale .bid-g.t1 .bplate { fill: var(--team-1-fill); } .scale .bid-g.t2 .bplate { fill: var(--team-2-fill); }
.scale .bid-g.t1 text { fill: var(--on-team-1); } .scale .bid-g.t2 text { fill: var(--on-team-2); }
.scale .bid-g .beye { font-size: 22px; font-weight: 500; letter-spacing: .14em; }
.scale .bid-g .bnum { font-size: 120px; font-weight: 700; letter-spacing: -.02em; }
body.touch .scale .bid-g { display: none; }
.scale .mk.win .pill1, .scale .mk.win .pill2 { stroke: var(--ink); stroke-width: 3; }
.scale .needle { stroke: var(--accent); stroke-width: 5; stroke-linecap: round; }
.scale .jplate { fill: var(--plate); stroke: var(--accent); stroke-width: 2; }
.scale .jev { fill: var(--accent-g); font-size: 130px; font-weight: 700; letter-spacing: -.02em; }
.scale .jeye { fill: var(--accent-g); font-size: 22px; font-weight: 500; letter-spacing: .14em; }
.nudges { display: flex; gap: 16px; justify-content: center; margin-top: 8px; }
.nudges .btn { min-width: 120px; height: 56px; }
.bidcue { display: flex; align-items: center; gap: 22px; padding: 10px 30px 10px 12px; }
.bidcue:empty { display: none; }
.bidcue .timer { width: 100px !important; height: 100px !important; }
.bidcue .timer .n { font-size: 38px; }
.bidcue .hint.yb { font-size: 26px; }
.bidcue .entry { display: flex; align-items: baseline; gap: 8px; }
.bidcue .entry b { display: inline-block; min-width: 180px; text-align: center; font-size: 60px; font-weight: 700; line-height: 1; padding-bottom: 8px; border-bottom: 1px solid var(--line-g-strong); font-variant-numeric: tabular-nums; }
.bidcue .entry b.empty { color: var(--line-g-strong); }
.bidcue .entry i { font-style: normal; font-size: 32px; color: var(--muted); }
.bidcue .already { font-size: 22px; color: var(--accent-g); min-width: 0; }
.bidcue .badge { font-size: 26px; padding: 10px 20px; min-width: 0; flex: none; }
.bidcue .hint.yb { white-space: nowrap; }
/* desktop: the number is on the scale (the bid plate); the cue says whose turn it is and how to bid */
body:not(.touch) .bidcue .entry { display: none; }
.badge .bn { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.bidcue .latency { margin: 0 12px; }

/* ============================================================ 15. LIGHTNING */
.ltbar { position: relative; width: 1640px; height: 6px; background: var(--line-g-strong); border-radius: 3px; margin-top: 4px; flex: none; }
.ltbar i { position: absolute; inset: 0; background: var(--accent); transform-origin: 0 50%; border-radius: 3px; }
.ltbar.last i { background: var(--ink); }
.ltbar .lt-count { position: absolute; right: 0; top: 16px; font-size: 26px; font-weight: 700; font-variant-numeric: tabular-nums; padding: 6px 16px; }
.ltbar .lt-count:empty { display: none; }
.lt-card { width: 1640px; min-height: 0; padding: 30px 48px; margin-top: 30px; }
.ltp { display: grid; grid-template-columns: 1fr 120px 1fr; align-items: center; width: 1640px; margin-top: 30px; }
.ltpanel { cursor: pointer; position: relative; height: 320px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; border: 2px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-card); font-size: 80px; font-weight: 700; line-height: 1.05; letter-spacing: -.02em; text-align: center; padding: 0 40px; transition: border-color .2s, background-color .2s, scale .45s cubic-bezier(.33,1,.68,1); will-change: transform, opacity; overflow: hidden; }
.ltpanel .key { position: absolute; top: 20px; left: 24px; font-size: 20px; }
.ltpanel .key.r { left: auto; right: 24px; }
.ltpanel.win { background: color-mix(in srgb, var(--accent-ink) 9%, #fff); border: 3px solid var(--accent-ink); }
.ltpanel.picked.p1 { border: 3px solid var(--team-1-c); }
.ltpanel.picked.p2 { border: 3px solid var(--team-2-c); }
.ltpanel.win.picked.p1, .ltpanel.win.picked.p2 { border-color: var(--accent-ink); }
.ltpanel .pc { font-size: 44px; font-weight: 700; color: var(--accent-ink); min-height: 44px; }
.ltpanel.lose .pc { color: var(--card-muted); }
.ltpanel .mark { position: absolute; top: 16px; right: 24px; font-size: 48px; line-height: 1; color: var(--accent-ink); }
.ltpanel .key.r ~ .mark { right: auto; left: 24px; }
.ltpanel.lose .mark { color: var(--card-muted); }
.ltor { justify-self: center; font-size: 32px; padding: 10px 22px; }
.ltmeta { display: flex; align-items: center; gap: 32px; margin-top: 30px; padding: 8px 32px 8px 10px; }
.ltmeta .sc { font-size: 40px; font-weight: 700; display: inline-block; }
.ltmeta .badge { font-size: 26px; padding: 10px 20px; }
.ltmeta .streak { font-size: 24px; min-width: 150px; }
.ltmeta .streak.acc { color: var(--accent-g); }

/* ============================================================ 16. FINALE, SOLO */
.finale { padding-top: 56px; }
.finale > .plate.eyebrow { font-size: 22px; padding: 10px 24px; }
.headline { font-size: 150px; font-weight: 700; line-height: 1.02; letter-spacing: -.03em; text-align: center; margin-top: 28px; white-space: nowrap; color: var(--ink); }
.headline .team-plate { display: inline-block; padding: .02em .22em .08em; border-radius: 18px; box-shadow: var(--shadow-card); }
.headline .team-plate.t1 { background: var(--team-1-fill); color: var(--on-team-1); } .headline .team-plate.t2 { background: var(--team-2-fill); color: var(--on-team-2); }
.headline .xw { white-space: nowrap; }
.fin-sub { font-size: 32px; margin-top: 20px; }
.scores { display: flex; gap: 40px; margin-top: 40px; flex-wrap: wrap; justify-content: center; }
.fscore { display: flex; align-items: center; gap: 28px; padding: 18px 44px 20px 32px; border-radius: 18px; box-shadow: var(--shadow-card); }
.fscore.t1 { background: var(--team-1-fill); color: var(--on-team-1); } .fscore.t2 { background: var(--team-2-fill); color: var(--on-team-2); }
.fscore .g { font-size: 64px; line-height: 1; }
.fscore .fs-col { display: flex; flex-direction: column; gap: 6px; }
.fscore .eyebrow { color: inherit; font-size: 22px; }
.fscore .num { font-size: 112px; font-weight: 700; line-height: .95; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.stats { display: grid; grid-template-columns: repeat(6, 1fr); width: 1380px; margin-top: 40px; padding: 0; overflow: hidden; }
.stat { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 20px 10px; border-left: 1px solid var(--line); }
.stat:first-child { border-left: 0; }
.stat b { font-size: 40px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.stat .eyebrow { font-size: 18px; text-align: center; white-space: nowrap; letter-spacing: .1em; }
.fin-btns { margin-top: 44px; }
.gameover { padding-top: 48px; }
.go-card { padding: 40px 96px 36px; display: flex; flex-direction: column; align-items: center; }
.go-head, .go-entry { display: flex; flex-direction: column; align-items: center; }
.go-head .hint { margin-top: 18px; }
.bignum { font-size: 130px; font-weight: 700; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; margin-top: 16px; display: inline-block; }
.initials { display: flex; gap: 24px; margin-top: 36px; }
.initials .ch { cursor: pointer; width: 120px; height: 150px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-card); font-size: 96px; font-weight: 700; padding: 0; }
.initials .ch.cur { border: 3px solid var(--accent-ink); }
.go-entry > .hint { margin-top: 28px; border-radius: var(--r-pill); }
.go-save { margin-top: 24px; }
.okbd { display: grid; grid-template-columns: repeat(14, 96px); gap: 12px; justify-content: center; margin-top: 24px; }
.okey { cursor: pointer; height: 96px; padding: 0; font-size: 40px; font-weight: 500; border: 1px solid var(--line-strong); border-radius: var(--r-control); }
.okey-del { font-size: 26px; }
.highscores { padding-top: 40px; }
.highscores > .plate.eyebrow { font-size: 22px; padding: 10px 24px; }
.highscores .heading { margin-top: 18px; }
.hs-card { margin-top: 28px; padding: 16px 32px 20px; }
.table { width: 960px; border-collapse: collapse; }
.table th { text-align: left; padding: 14px 16px 14px; border-bottom: 1px solid var(--line-strong); font-size: 18px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--card-muted); }
.table td { padding: 0 16px; height: 56px; border-bottom: 1px solid var(--line); font-size: 32px; font-weight: 500; font-variant-numeric: tabular-nums; }
.table tr:last-child td { border-bottom: 0; }
.table th.r, .table td.r { text-align: right; }
.table tr.me td { color: var(--accent-ink); }
.table tr.me td:first-child { position: relative; }
.table tr.me td:first-child::before { content: ""; position: absolute; left: 0; top: 0; width: 4px; height: var(--me-h, 100%); background: var(--accent-ink); }
.highscores .fin-btns { margin-top: 36px; }

/* ============================================================ 17. SETTINGS + PAUSE */
.settings { width: 1560px; max-height: 980px; overflow-y: auto; padding: 36px 48px 28px; display: flex; flex-direction: column; gap: 20px; }
.settings h3, .pause-card h3 { margin: 0; font-size: 48px; font-weight: 700; letter-spacing: -.02em; line-height: 1.05; }
.sgrid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 64px; row-gap: 6px; }
.srow { display: grid; grid-template-columns: 240px 1fr; align-items: center; min-height: 62px; gap: 16px; }
.srow.tall { min-height: 100px; }
.srow .ctl { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; min-width: 0; }
.srow .ctl.nowrap { flex-wrap: nowrap; }
.srow .ctl .hint.block { flex-basis: 100%; font-size: 18px; }
.srow .hue-val { font-size: 20px; min-width: 56px; }
.swatches { display: flex; gap: 18px; }
.sw { cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 18px; color: var(--card-muted); background: none; border: 0; padding: 0; }
.sw i { width: 48px; height: 48px; border-radius: var(--r-control); border: 1px solid var(--line-strong); display: grid; place-items: center; background: var(--sw-bg); background-image: radial-gradient(circle, var(--sw-dot) 0 3px, transparent 3.5px); background-size: 12px 12px; }
.sw i::after { content: ""; width: 16px; height: 16px; border-radius: 50%; background: var(--sw-dot); box-shadow: 0 0 0 3px var(--sw-bg); }
.sw.on i { border: 3px solid var(--card-ink); }
.sw.on { color: var(--card-ink); }
.pairs { display: flex; gap: 10px; flex-wrap: wrap; }
.pairs button { cursor: pointer; display: inline-flex; align-items: center; gap: 8px; font-size: 20px; font-weight: 500; padding: 8px 14px; border: 1px solid var(--line-strong); border-radius: var(--r-control); background: #fff; color: var(--card-ink); }
.pairs button.on { border-color: var(--accent-ink); color: var(--accent-ink); box-shadow: inset 0 0 0 1px var(--accent-ink); }
.pairs button i { width: 18px; height: 18px; border-radius: 50%; display: inline-block; }
.cat-row { grid-template-columns: 240px 1fr; align-items: start; }
.cat-row .eyebrow { padding-top: 14px; }
.cats { display: flex; flex-wrap: wrap; gap: 12px; }
.cats button { cursor: pointer; font-size: 22px; font-weight: 500; line-height: 1; padding: 12px 18px; border: 1px solid var(--line-strong); border-radius: var(--r-control); color: var(--card-muted); background: #fff; }
.cats button.on { background: var(--card-ink); color: #fff; border-color: var(--card-ink); }
.set-foot { display: flex; align-items: center; justify-content: center; gap: 32px; }
.pause-card { width: 720px; padding: 48px; display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.pause-btns { margin-top: 24px; }

/* ============================================================ 18. WORKSHOP */
.workshop { padding-top: 28px; overflow-y: auto; padding-bottom: 32px; }
.ws-head { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; width: 1692px; gap: 24px; }
.ws-head > .btn { justify-self: start; }
.ws-head > .plate { justify-self: end; font-size: 22px; padding: 10px 22px; }
.ws-titles { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.ws-titles .plate { font-size: 20px; padding: 8px 18px; }
.ws-grid { display: grid; grid-template-columns: 1100px 560px; gap: 32px; margin-top: 24px; align-items: start; }
.ws-form, .ws-side { padding: 32px; display: flex; flex-direction: column; gap: 18px; }
.ws-form .fmt-hint { font-size: 22px; margin-top: -6px; }
.ws-q { display: flex; gap: 16px; align-items: stretch; }
.ws-q textarea { flex: 1; min-width: 0; resize: none; font-size: 32px; font-weight: 500; line-height: 1.3; padding: 14px 18px; border: 1px solid var(--line-strong); border-radius: var(--r-control); background: #fff; color: var(--card-ink); outline: none; caret-color: var(--accent); }
.ws-form input { width: 100%; min-width: 0; font-size: 26px; font-weight: 500; padding: 10px 14px; border: 1px solid var(--line-strong); border-radius: var(--r-control); background: #fff; color: var(--card-ink); outline: none; caret-color: var(--accent); }
.ws-q textarea:focus, .ws-form input:focus { border-color: var(--accent); }
.mic-btn { flex: none; flex-direction: column; gap: 8px; width: 96px; padding: 12px; font-size: 20px; border-radius: var(--r-card); }
.mic-btn .mic-dot, .btn.live .mic-dot { width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--line-strong); }
.mic-btn.live .mic-dot { background: var(--accent); border-color: var(--accent); }
.btn.ghost.live { border-color: var(--accent); color: var(--accent); }
.ws-anshead { display: flex; align-items: center; justify-content: space-between; }
.ws-answers { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 20px; }
.ws-answers .ans { display: flex; align-items: center; gap: 12px; }
.ws-answers .ans b { font-size: 26px; font-weight: 500; color: var(--card-muted); width: 22px; flex: none; }
.ws-answers > .hint { grid-column: 1 / -1; }
.ws-status { font-size: 26px; line-height: 1.35; min-height: 36px; }
.ws-status .warn, .ws-status .bad { color: var(--accent); }
.ws-lock { justify-content: flex-start; }
.ws-list { display: flex; flex-direction: column; max-height: 700px; overflow-y: auto; border-top: 1px solid var(--line); }
.ws-item { display: flex; gap: 16px; align-items: flex-start; justify-content: space-between; padding: 16px 0; border-bottom: 1px solid var(--line); }
.wi-main { min-width: 0; }
.wi-q { font-size: 26px; font-weight: 500; line-height: 1.25; }
.wi-meta { font-size: 18px; color: var(--card-muted); margin-top: 8px; letter-spacing: .06em; }
.wi-msg { font-size: 20px; color: var(--accent); margin-top: 6px; }
.wi-acts { display: flex; gap: 20px; flex: none; }

/* ============================================================ 19. JEV NOTE */
.jev-note { border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-card); padding: 18px 32px; max-width: 1400px; display: flex; flex-direction: column; gap: 10px; }
.jev-note .nt { font-size: 38px; line-height: 1.3; }

/* ============================================================ 20. PORTRAIT 1080×1920 */
#stage.portrait #topbar { padding: 0 32px; grid-template-columns: auto 1fr auto; }
#stage.portrait .roundlbl { justify-self: center; }
#stage.portrait .screen { padding: 28px 40px 0; }
#stage.portrait #bottom { grid-template-columns: 1fr 1fr; padding: 0 40px 32px; gap: 20px; }
#stage.portrait #bottom-center { grid-column: 1 / -1; grid-row: 1; }
#stage.portrait .pod, #stage.portrait.compact .pod { width: 100%; height: 112px; }
#stage.portrait .pod .sc { font-size: 48px; }
#stage.portrait .caption { bottom: auto; top: 108px; max-width: 1000px; }
#stage.portrait .caption.toast { top: 120px; }
#stage.portrait .title-screen { padding-top: 120px; }
#stage.portrait .wordmark-big { font-size: 170px; }
#stage.portrait .menu-panel { width: 1000px; }
#stage.portrait .mrow { grid-template-columns: 40px 1fr 40px; height: 128px; }
#stage.portrait .mrow .sub { grid-column: 2; grid-row: 2; text-align: left; margin-top: -28px; }
#stage.portrait .mrow .arr { grid-column: 3; grid-row: 1; }
#stage.portrait .quick-screen .mrow { height: 112px; }
#stage.portrait .title-foot { max-width: 960px; }
#stage.portrait .ticker { bottom: 96px; max-width: 1000px; }
#stage.portrait .arcade { right: 40px; bottom: 32px; }
#stage.portrait .team-cards { flex-direction: column; gap: 24px; }
#stage.portrait .tcard { width: 1000px; height: auto; min-height: 400px; }
#stage.portrait .vs-row { flex-direction: column; gap: 36px; }
#stage.portrait .vs-team { max-width: 1000px; }
#stage.portrait .vs-team .n { font-size: 64px; white-space: normal; text-align: center; }
#stage.portrait .qcard { width: 1000px; padding: 32px 36px 40px; }
#stage.portrait .qcard.left { padding-left: 60px; }
#stage.portrait .tiles { grid-template-columns: 1fr; width: 1000px; gap: 20px; }
#stage.portrait .tile { height: 128px; } #stage.portrait .tile .t { font-size: 46px; }
#stage.portrait .cue { flex-direction: column; gap: 20px; width: 1000px; }
#stage.portrait .buzz-cue .pair { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; width: 100%; }
#stage.portrait .buzz-cue .badge { justify-content: center; min-height: 96px; white-space: normal; text-align: center; line-height: 1.1; }
#stage.portrait .ask-row { flex-wrap: wrap; justify-content: center; max-width: 1000px; }
#stage.portrait .status { flex-direction: column; align-items: center; gap: 8px; text-align: center; border-radius: var(--r-card); }
#stage.portrait .grid8 { grid-auto-flow: row; grid-template-rows: repeat(8, 76px); grid-template-columns: 900px; gap: 10px; }
#stage.portrait .slot .tx { font-size: 40px; } #stage.portrait .slot .pc { font-size: 38px; width: 110px; }
#stage.portrait .brow { flex-direction: column; gap: 18px; }
#stage.portrait .brow .bank, #stage.portrait .brow .side { flex-direction: row; width: auto; gap: 24px; padding: 14px 28px; }
#stage.portrait .side .badge { max-width: 360px; }
#stage.portrait .timer-slot { min-height: 96px; }
#stage.portrait .side .timer { width: 96px !important; height: 96px !important; }
#stage.portrait .side .timer .n { font-size: 36px; }
#stage.portrait .bank .n { font-size: 64px; }
#stage.portrait .tray { grid-template-columns: repeat(3, 1fr); gap: 10px; max-width: none; }
#stage.portrait .chipb { height: auto; min-height: 72px; padding: 8px 14px; }
#stage.portrait .scale-wrap { margin-top: 36px; }
#stage.portrait .bidcue { flex-wrap: wrap; justify-content: center; row-gap: 12px; border-radius: var(--r-card); }
#stage.portrait .ltbar { width: 1000px; }
#stage.portrait .lt-card { width: 1000px; }
#stage.portrait .ltp { width: 1000px; grid-template-columns: 1fr; grid-template-rows: 300px 80px 300px; }
#stage.portrait .ltpanel { font-size: 64px; height: 300px; }
#stage.portrait .headline { white-space: normal; max-width: 1000px; }
#stage.portrait .stats { grid-template-columns: repeat(3, 1fr); width: 1000px; }
#stage.portrait .stat:nth-child(4) { border-left: 0; }
#stage.portrait .stat:nth-child(n+4) { border-top: 1px solid var(--line); }
#stage.portrait .okbd { grid-template-columns: repeat(7, 118px); }
#stage.portrait .table { width: 940px; }
#stage.portrait .settings { width: 1020px; max-height: 1800px; }
#stage.portrait .sgrid { grid-template-columns: 1fr; }
#stage.portrait .srow { grid-template-columns: 300px 1fr; }
#stage.portrait .howto-cards { grid-template-columns: 1fr; width: 1000px; gap: 14px; }
#stage.portrait .howto-card { padding: 22px 28px; }
#stage.portrait .ws-head { width: 1000px; grid-template-columns: auto 1fr; }
#stage.portrait .ws-head > .plate { grid-column: 1 / -1; justify-self: center; }
#stage.portrait .ws-grid { grid-template-columns: 1000px; }
#stage.portrait .pp { max-width: 1000px; }
#stage.portrait .pp-title { font-size: 90px; }
#stage.portrait #band .b-title { font-size: 150px; }
#stage.portrait .jev-note { max-width: 1000px; }
#stage.portrait :is(.title-screen, .setup, .quick-screen, .howto, .finale, .gameover, .highscores) { justify-content: center; padding-top: 24px; padding-bottom: 120px; }

/* ============================================================ 21. TOUCH MODE (body.touch)
   --tap = 44 CSS px and --fmin = 12 CSS px, both in stage px (stage.js sets them from the scale). */
html, body { touch-action: manipulation; overscroll-behavior: none; -webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: 100%; }
#viewport, #boot { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
#viewport input, #viewport textarea { -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; }
body:not(.touch) .touch-only { display: none !important; }
body.touch .kbd-only { display: none !important; }
body.touch.in-game .chip.pause { display: inline-flex; }
body.touch #stage .btn, body.touch #stage .keycap, body.touch #stage .seg button, body.touch #stage .link, body.touch #stage .cats button, body.touch #stage .pairs button,
body.touch #stage .ws-form input, body.touch #stage .ws-form textarea, body.touch #stage .initials .ch, body.touch #stage .bid-lock, body.touch #stage .mrow { min-height: var(--tap); }
body.touch #stage .keycap, body.touch #stage .link, body.touch #stage .sw { min-width: var(--tap); }
body.touch #stage :is(.btn, .keycap, .seg button, .tile, .chipb, .ltpanel, .mrow, .okey, .cats button):active { filter: none; }
body.touch #stage :is(.tile, .chipb, .ltpanel, .okey):active { background: var(--tint); }
body.touch #stage .btn:not(.ghost):active { opacity: .85; }
body.touch #stage .chip { position: relative; font-size: max(20px, var(--fmin)); }
body.touch #stage .chip::after { content: ""; position: absolute; left: 50%; top: 50%; width: max(100% + 12px, var(--tap)); height: max(100% + 12px, var(--tap)); transform: translate(-50%, -50%); }
body.touch #stage.portrait .wordmark { display: none; }
body.touch #stage.portrait .chip-more { display: none; }
body.touch #stage.portrait .chip-short { display: inline; }
body.touch #stage .eyebrow { font-size: max(22px, var(--fmin)); }
body.touch #stage .hint { font-size: max(22px, var(--fmin)); }
body.touch #stage .btn.sm { font-size: max(22px, var(--fmin)); }
body.touch #stage .mrow .sub { font-size: max(22px, var(--fmin)); }
body.touch #stage .tcard .why { font-size: max(20px, var(--fmin)); }
body.touch #stage .ticker, body.touch #stage .link.quiet { font-size: max(22px, var(--fmin)); }
body.touch #stage .pod .nm, body.touch #stage.compact .pod .nm { font-size: max(20px, var(--fmin)); }
body.touch #stage .pod .tag { font-size: max(15px, var(--fmin)); }
body.touch #stage .slot .rk, body.touch #stage .slot .tied { font-size: max(16px, var(--fmin)); }
body.touch #stage .chipb kbd, body.touch #stage kbd { font-size: max(16px, var(--fmin)); }
body.touch #stage .caption { font-size: max(30px, var(--fmin)); }
body.touch #stage .caption .who, body.touch #stage .caption .tag { font-size: max(20px, var(--fmin)); }
body.touch #stage .latency, body.touch #stage .wi-meta, body.touch #stage .sw { font-size: max(18px, var(--fmin)); }
body.touch #stage .scale text, body.touch #stage .scale .off { font-size: max(24px, var(--fmin)); }
body.touch #stage .scale .jev { font-size: max(130px, var(--fmin)); }
body.touch #stage .scale .pt1, body.touch #stage .scale .pt2 { font-size: max(34px, var(--fmin)); }
body.touch #stage .scale .jeye { font-size: max(22px, var(--fmin)); }
body.touch #stage .srow .ctl .hint.block { font-size: max(18px, var(--fmin)); }
body.touch #stage input.range { height: var(--tap); max-width: none; }
body.touch #stage input.range::-webkit-slider-thumb { width: calc(var(--tap) * .7); height: calc(var(--tap) * .7); margin-top: calc(var(--tap) * -.35 + 2px); }
body.touch #stage .buzz-cue .badge { min-height: var(--tap); touch-action: none; }
body.touch #stage .pod { cursor: pointer; touch-action: none; }
body.touch #stage .pod.buzzable .sc { display: none; }
body.touch #stage .pod.buzzable .tap { display: block; font-size: max(22px, var(--fmin)); }
body.touch #stage .ask-row .ask-hint { font-size: max(32px, var(--fmin)); }
body.touch #stage .chipb { height: auto; min-height: max(72px, var(--tap)); padding-top: 6px; padding-bottom: 6px; }
body.touch #stage .chipb span { -webkit-line-clamp: 3; }
body.touch #stage.landscape.compact { grid-template-rows: 96px minmax(0, 1fr) auto; }
body.touch #stage.landscape.tray-up .caption { bottom: auto; top: 108px; }
body.touch #stage .ltpanel .key { display: none; }
body.touch #stage .nudges .btn { min-width: max(140px, var(--tap)); height: max(72px, var(--tap)); font-size: max(28px, var(--fmin)); touch-action: none; }
body.touch #stage .bidcue { gap: 18px; }
body.touch #stage .bidcue .badge { font-size: max(24px, var(--fmin)); max-width: none; }
body.touch #stage .okey { height: max(var(--tap), 96px); }
body.touch #stage .okbd { grid-template-columns: repeat(14, max(var(--tap), 96px)); }
body.touch #stage.portrait .okbd { grid-template-columns: repeat(7, max(var(--tap), 118px)); }
body.touch #stage.landscape .gameover { padding-top: 20px; }
body.touch #stage.landscape .gameover .go-card { padding: 20px 64px; }
body.touch #stage.landscape .gameover .bignum { font-size: 88px; margin-top: 8px; }
body.touch #stage.landscape .gameover .initials { margin-top: 16px; }
body.touch #stage.landscape .gameover .initials .ch { width: 104px; height: 124px; font-size: 80px; }
body.touch #stage.landscape .gameover .go-entry > .hint { margin-top: 12px; }
body.touch #stage.landscape .gameover .go-save { margin-top: 12px; }
body.touch #stage.landscape .gameover .okbd { margin-top: 12px; }
body.touch #stage .set-foot { position: sticky; bottom: -28px; background: #fff; padding: 16px 0; margin: 0 -48px -28px; border-top: 1px solid var(--line); }
body.touch #stage.landscape .title-screen { padding-top: 32px; }
body.touch #stage.landscape .wordmark-big { font-size: 170px; }
body.touch #stage.landscape .menu-panel { margin-top: 24px; }
body.touch #stage.landscape .title-screen .mrow { height: 92px; }
body.touch #stage.landscape .title-foot { margin-top: 14px; padding-top: 14px; }
body.touch #stage :is(.ltbar .lt-count, .srow .hue-val, .table th) { font-size: max(20px, var(--fmin)); }
body.touch #stage :is(.seg button, .keycap, .link:not(.quiet), .pod .combo, .cats button, .pairs button, .mult, .bidcue .already, .wordmark, .side .badge, .caption .who) { font-size: max(22px, var(--fmin)); }
body.touch #stage :is(.ltmeta .badge, .bidcue .badge, .ltmeta .streak) { font-size: max(24px, var(--fmin)); }
body.touch #stage :is(.tile .k, .tile .r b, .chipb, .wi-q, .ws-form input, .ws-answers .ans b, .howto-card p, .sassline, .rise, .caption .arrow, .ws-status, .okey-del, .caption .tag.err, .bidcue .hint.yb, .board-foot .plate) { font-size: max(26px, var(--fmin)); }
body.touch #stage :is(.btn:not(.sm), .badge, .slot .num, .jev-note .nt, .ltor, .tagline, .vs) { font-size: max(28px, var(--fmin)); }
body.touch #stage :is(.floor-line, .status, .cue, .fin-sub, .ask-line, .ltmeta .sc, .bidcue .entry i, .side .ask) { font-size: max(32px, var(--fmin)); }
.tiles.small .tile.rev .lk { display: none; }
body.touch #stage .btn { min-width: var(--tap); }
body.touch #stage .tile { height: max(120px, var(--tap)); }
body.touch #stage.landscape .tile { height: max(140px, var(--tap)); }
body.touch #stage .pod, body.touch #stage.compact .pod, body.touch #stage.portrait .pod { height: auto; min-height: max(112px, var(--tap)); }
body.touch #stage :is(.side .strikes i, .body) { font-size: max(24px, var(--fmin)); }
body.touch #stage .mrow .arr { font-size: max(28px, var(--fmin)); }
body.touch #stage.landscape:not(.compact) .pod { min-height: max(120px, var(--tap)); }
body.touch #stage.landscape .quick-screen { padding-top: 20px; }
body.touch #stage.landscape .quick-screen .heading { font-size: 48px; }
body.touch #stage.landscape .quick-screen .menu-panel { width: 1700px; margin-top: 14px; }
body.touch #stage.landscape .quick-screen .menu { display: grid; grid-template-columns: 1fr 1fr; column-gap: 64px; }
body.touch #stage.landscape .quick-screen .mrow { height: max(96px, var(--tap)); border-bottom: 1px solid var(--line-g); }
body.touch #stage.landscape .quick-screen .mrow .sub { display: none; }
body.touch #stage.landscape .quick-screen .foot { margin-top: 16px; }
body.touch #stage .initials .ch { min-width: var(--tap); }
body.touch #stage :is(.wi-msg, .wi-meta) { font-size: max(20px, var(--fmin)); }
#stage.portrait .tile.rev .lk { display: none; }
body.touch #stage .pod .nm { white-space: normal; }
body.touch #stage .pod .nm-t { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.1; overflow-wrap: anywhere; }
body.touch #stage.landscape:not(.nopods) { grid-template-rows: 96px minmax(0, 1fr) auto; }
body.touch #stage.landscape.compact #bottom { grid-template-columns: minmax(320px, 1fr) minmax(0, 1180px) minmax(320px, 1fr); }
body.touch #stage.landscape.compact .pod { width: 100%; max-width: 460px; }
body.touch #stage.landscape.compact #pod-blue { justify-self: end; }
.slot .tx.two { white-space: normal; line-height: 1.05; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; align-self: center; }
body.touch #stage.landscape .bidcue { flex-wrap: wrap; justify-content: center; row-gap: 12px; border-radius: var(--r-card); }
body.touch #stage.landscape .title-screen .ticker { display: none; }
body.touch #stage.landscape .sgrid { grid-template-columns: 1fr; }
body.touch #stage.landscape .settings { width: min(1600px, calc(100% - 96px)); max-height: calc(100% - 48px); }
body.touch #stage :is(.seg button, .cats button, .pairs button) { min-width: var(--tap); }
body.touch #stage .sw { min-height: var(--tap); justify-content: center; }
body.touch #stage .sw i { width: calc(var(--tap) * .6); height: calc(var(--tap) * .6); }
body.touch #stage .sw i::after { width: calc(var(--tap) * .2); height: calc(var(--tap) * .2); }
body.touch #stage .swatches { flex-wrap: wrap; row-gap: 12px; }
body.touch #stage .tcard input.name { min-height: var(--tap); }
body.touch #stage .pod .lives i { width: max(18px, var(--fmin)); height: max(18px, var(--fmin)); }
.gl { display: inline-block; width: 1em; height: 1em; vertical-align: -.12em; flex: none; line-height: 1; }
.gl svg { display: block; width: 100%; height: 100%; fill: currentColor; overflow: visible; }
.badge .gl, .why .gl { width: .78em; height: .78em; vertical-align: -.06em; }
.tcard .why .gl { margin: 0 .3em; }
:is(.pod, .tcard, .vs-team) .g .gl { vertical-align: top; }
body.touch #stage.landscape :is(.setup, .howto) { overflow-y: auto; padding-bottom: 24px; }
body.touch #stage.landscape .setup { padding-top: 20px; }
body.touch #stage.landscape .setup .team-cards { margin-top: 20px; }
body.touch #stage.landscape .tcard { height: auto; min-height: 0; padding: 28px 32px 24px; gap: 16px; }
body.touch #stage.landscape .setup-opts { margin-top: 24px; }
body.touch #stage.landscape .setup-go { margin-top: 18px; }
body.touch #stage.landscape .setup-touch { margin-top: 12px; }
body.touch #stage.landscape .howto { padding-top: 20px; }
body.touch #stage.landscape .howto-cards { width: min(2240px, calc(100% - 96px)); margin-top: 20px; }
body.touch #stage.landscape .howto-card { padding: 20px 24px; gap: 12px; }
body.touch #stage.landscape .howto-hint { margin: 14px 0; }
body.touch #stage .scol { display: flex; flex-direction: column; gap: 12px; }
/* reduced motion: nothing slides (moves.js and stage.js halve durations and swap deals for fades) */
body.reduced .dimmed { scale: 1; }
/* the arcade link is a quiet pill (the .link reset would otherwise drop its plate) */
.link.plate { background: var(--plate); }
/* a landscape phone is short: the board steps down so its last row never runs under the tray */
body.touch #stage.landscape .board-scene .qcard { padding: 22px 48px 26px; gap: 12px; }
body.touch #stage.landscape .board-scene .grid8 { grid-template-rows: repeat(4, 72px); }
body.touch #stage.landscape .board-scene .brow { margin-top: 18px; }
body.touch #stage.landscape .faceoff .qcard { padding: 24px 48px 28px; gap: 14px; }
body.touch #stage.landscape .board-scene .board-foot .latency { display: none; }