/* JEV SAYS! — arcade neon pop. Tokens in DESIGN.md. Stage units are px of a 1920×1080 (or 1080×1920) stage. */
:root {
  --night: #0B0624; --plum: #1C0B45; --plum2: #2A1260; --violet: #6C2BD9; --magenta: #FF2E93; --pink: #FF7AC6;
  --yellow: #FFE63B; --gold: #FFB800; --cyan: #19E3FF; --green: #4DFF7C; --orange: #FF8A1F;
  --red: #FF3B4E; --red-l: #FF8A94; --red-d: #B0102A; --blue: #2F7BFF; --blue-l: #8CB6FF; --blue-d: #1446B8;
  --white: #FFF9F0; --ink: #120726;
  --display: 'Bungee', 'Arial Black', system-ui, sans-serif;
  --sans: 'Rubik', 'Arial Rounded MT Bold', system-ui, sans-serif;
  --pixel: 'Press Start 2P', monospace;
  --stroke: 5px; --drop: 8px;
  --team: var(--magenta); --team-l: var(--pink); --team-d: var(--violet);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--night); color: var(--white); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }
kbd { font-family: var(--pixel); font-size: .55em; padding: .45em .55em .35em; border-radius: .45em; background: var(--white); color: var(--ink); border: 3px solid var(--ink); box-shadow: 0 4px 0 var(--ink); vertical-align: .15em; }

#backdrop { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 0; display: block; background: radial-gradient(circle at 50% 45%, #3a1480, var(--night) 70%); }
#viewport { position: fixed; inset: 0; z-index: 1; overflow: hidden; }
#shake { position: absolute; inset: 0; }
#stage { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; transform-origin: 0 0; display: grid; grid-template-rows: 104px 1fr 190px; }
#stage.portrait { width: 1080px; height: 1920px; grid-template-rows: 120px minmax(0, 1fr) auto; }
#fx { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 5; pointer-events: none; }
#flash { position: fixed; inset: 0; z-index: 7; pointer-events: none; opacity: 0; background: #fff; mix-blend-mode: screen; }
#wipe { position: fixed; inset: 0; z-index: 6; pointer-events: none; overflow: hidden; }
body.pause-open #wipe { display: none; }   /* a wipe frozen by PAUSE would cover the menu */
#overlay-layer { position: absolute; inset: 0; pointer-events: none; z-index: 20; }
#overlay-layer > * { pointer-events: auto; }

/* ---------- shared "sticker" vocabulary ---------- */
.outline { color: var(--white); -webkit-text-stroke: var(--stroke) var(--ink); paint-order: stroke fill; text-shadow: 0 var(--drop) 0 var(--ink); }
.panel { background: linear-gradient(180deg, var(--plum2), var(--plum)); border: 6px solid var(--ink); border-radius: 30px; box-shadow: 0 12px 0 var(--ink), inset 0 4px 0 rgba(255,255,255,.14); }
.btn { cursor: pointer; font-family: var(--display); font-size: 40px; letter-spacing: .02em; color: var(--ink); background: linear-gradient(180deg, #fff27a, var(--yellow) 55%, #f5c400); border: 6px solid var(--ink); border-radius: 999px; padding: 18px 44px 14px; box-shadow: 0 10px 0 var(--ink), inset 0 4px 0 rgba(255,255,255,.7); transition: transform .08s, box-shadow .08s, filter .15s; }
.btn.focus { filter: brightness(1.08) saturate(1.1); transform: translateY(-3px) rotate(-1deg); box-shadow: 0 13px 0 var(--ink), inset 0 4px 0 rgba(255,255,255,.7); }
@media (hover: hover) { .btn:hover { filter: brightness(1.08) saturate(1.1); transform: translateY(-3px) rotate(-1deg); box-shadow: 0 13px 0 var(--ink), inset 0 4px 0 rgba(255,255,255,.7); } }
.btn:active { transform: translateY(6px); box-shadow: 0 4px 0 var(--ink), inset 0 4px 0 rgba(255,255,255,.7); }
.btn.pink { background: linear-gradient(180deg, #ff8cc5, var(--magenta) 60%, #d4006d); color: var(--white); -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; }
.btn.cyan { background: linear-gradient(180deg, #9ff4ff, var(--cyan) 60%, #00a9c9); }
.btn.ghost { background: rgba(18,7,38,.55); color: var(--white); box-shadow: 0 8px 0 var(--ink); }
.btn.small { font-size: 26px; padding: 12px 28px 9px; }
.hint { font-family: var(--pixel); font-size: 18px; letter-spacing: .06em; color: var(--white); opacity: .9; text-shadow: 0 3px 0 var(--ink); }

/* ---------- top bar ---------- */
#topbar { display: flex; align-items: center; justify-content: space-between; padding: 18px 34px 0; gap: 24px; position: relative; z-index: 3; }
.mini-logo { font-family: var(--display); font-size: 40px; line-height: .9; display: flex; gap: 10px; transform: rotate(-4deg); }
.mini-logo span:first-child { color: var(--yellow); -webkit-text-stroke: 4px var(--ink); paint-order: stroke fill; text-shadow: 0 5px 0 var(--ink); }
.mini-logo span:last-child { color: var(--magenta); -webkit-text-stroke: 4px var(--ink); paint-order: stroke fill; text-shadow: 0 5px 0 var(--ink); }
.round-badge { font-family: var(--display); font-size: 34px; padding: 12px 30px 8px; border-radius: 999px; background: var(--ink); color: var(--white); border: 5px solid var(--white); box-shadow: 0 0 0 5px var(--ink), 0 10px 0 5px var(--ink); display: flex; gap: 16px; align-items: center; white-space: nowrap; }
.round-badge .mult { color: var(--ink); background: var(--yellow); border-radius: 999px; padding: 2px 14px 0; border: 3px solid var(--ink); }
.chips { display: flex; gap: 14px; }
.chip { cursor: pointer; font-family: var(--pixel); font-size: 20px; padding: 14px 18px 12px; border-radius: 14px; border: 4px solid var(--ink); background: rgba(18,7,38,.72); color: var(--white); box-shadow: 0 6px 0 var(--ink); display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.chip::before { content: ""; width: 14px; height: 14px; border-radius: 50%; background: #777; box-shadow: 0 0 0 3px var(--ink); }
.jev-chip.live::before { background: var(--green); box-shadow: 0 0 0 3px var(--ink), 0 0 16px var(--green); }
.jev-chip.busy::before { background: var(--cyan); animation: blink .35s steps(2) infinite; }
.jev-chip.offline::before { background: var(--orange); }
.jev-chip.error::before { background: var(--red); }
.mic-chip.on::before { background: var(--red); box-shadow: 0 0 0 3px var(--ink), 0 0 18px var(--red); }
.mic-chip.hot { background: var(--red); animation: micpulse .8s ease-in-out infinite; }
@keyframes blink { 50% { opacity: .2; } }
@keyframes micpulse { 50% { transform: scale(1.06); } }

/* ---------- scene ---------- */
#scene { position: relative; min-height: 0; z-index: 2; }
.screen { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; }

/* ---------- bottom: team pods ---------- */
#bottom { display: grid; grid-template-columns: 460px 1fr 460px; align-items: end; gap: 20px; padding: 0 30px 26px; position: relative; z-index: 3; pointer-events: none; }
#bottom > * { pointer-events: auto; }
#bottom-center:empty { pointer-events: none; }
#stage.portrait #bottom { grid-template-columns: 1fr 1fr; grid-template-rows: auto; padding: 0 26px 30px; }
#stage.portrait #bottom-center { grid-column: 1 / -1; grid-row: 1; }
#bottom-center { display: flex; justify-content: center; align-items: flex-end; min-width: 0; }
.pod { position: relative; height: 158px; border: 6px solid var(--ink); border-radius: 34px; box-shadow: 0 12px 0 var(--ink), inset 0 5px 0 rgba(255,255,255,.35); display: grid; grid-template-columns: 112px 1fr; grid-template-rows: 1fr auto; column-gap: 12px; padding: 12px 22px 10px 14px; overflow: visible; transition: filter .2s; }
.pod.red { background: linear-gradient(180deg, var(--red-l), var(--red) 45%, var(--red-d)); }
.pod.blue { background: linear-gradient(180deg, var(--blue-l), var(--blue) 45%, var(--blue-d)); }
.pod.solo { background: linear-gradient(180deg, #ffa3d6, var(--magenta) 45%, #a3004f); }
.pod .mascot { grid-row: 1 / span 2; font-size: 92px; line-height: 1; display: grid; place-items: center; filter: drop-shadow(0 6px 0 var(--ink)); }
.pod .tname { font-family: var(--display); font-size: 26px; line-height: 1.05; color: var(--white); -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; align-self: end; }
.pod .score { font-family: var(--display); font-size: 70px; line-height: .95; color: var(--white); -webkit-text-stroke: 5px var(--ink); paint-order: stroke fill; text-shadow: 0 6px 0 var(--ink); font-variant-numeric: tabular-nums; }
.pod .strikes { position: absolute; right: 16px; top: -34px; display: flex; gap: 8px; }
.pod .strikes i { width: 50px; height: 50px; border-radius: 12px; border: 5px solid var(--ink); background: rgba(18,7,38,.65); display: grid; place-items: center; font-style: normal; font-family: var(--display); font-size: 36px; color: transparent; box-shadow: 0 6px 0 var(--ink); }
.pod .strikes i.on { background: var(--red); color: var(--white); -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; }
.pod .tag { position: absolute; left: 18px; top: -30px; transform: rotate(-3deg); font-family: var(--pixel); font-size: 15px; padding: 10px 14px 8px; background: var(--yellow); color: var(--ink); border: 4px solid var(--ink); border-radius: 10px; box-shadow: 0 5px 0 var(--ink); white-space: nowrap; }
.pod.active { animation: podglow 1s ease-in-out infinite; }
.pod.dim { filter: saturate(.35) brightness(.7); }
.pod .lives { position: absolute; right: 18px; top: -30px; font-size: 44px; display: flex; gap: 4px; filter: drop-shadow(0 4px 0 var(--ink)); }
.pod .lives span.lost { filter: grayscale(1) brightness(.4); transform: scale(.8); }
.pod .combo { position: absolute; left: 18px; top: -30px; font-family: var(--display); font-size: 30px; padding: 4px 16px 0; border-radius: 999px; border: 4px solid var(--ink); background: var(--yellow); color: var(--ink); box-shadow: 0 5px 0 var(--ink); }
@keyframes podglow { 50% { box-shadow: 0 12px 0 var(--ink), inset 0 5px 0 rgba(255,255,255,.35), 0 0 60px 10px var(--yellow); } }

/* ---------- caption (live transcript / announcer text) ---------- */
.caption { position: absolute; left: 50%; bottom: 6px; transform: translateX(-50%); z-index: 15; width: max-content; max-width: 940px; font-family: var(--sans); font-weight: 900; font-size: 38px; line-height: 1.12; text-align: center; padding: 6px 24px 8px; border-radius: 26px; border: 5px solid var(--ink); background: rgba(18,7,38,.86); box-shadow: 0 10px 0 var(--ink); display: flex; gap: 18px; align-items: center; }
#stage.portrait .caption { bottom: 270px; max-width: 1000px; }
#stage.tray-up .caption { bottom: 206px; max-width: 1100px; }
#stage.cue-up .caption { bottom: auto; top: 8px; }
.caption .who { font-family: var(--display); font-size: 26px; padding: 8px 14px 4px; border-radius: 12px; border: 4px solid var(--ink); flex: none; }
.caption.red .who { background: var(--red); } .caption.blue .who { background: var(--blue); } .caption.solo .who { background: var(--magenta); }
.caption .said { color: var(--white); min-width: 160px; flex: 0 30 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }   /* one line: the caption never grows onto the controls; the transcript gives way first */
.caption .said em { font-style: normal; color: var(--yellow); }
.caption .arrow { color: var(--cyan); font-family: var(--display); }
.caption .heard { font-family: var(--display); font-size: 38px; color: var(--ink); background: var(--green); padding: 4px 16px 0; border-radius: 14px; border: 4px solid var(--ink); white-space: nowrap; flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.caption .heard small { font-family: var(--pixel); font-size: 22px; margin-left: 12px; }
.caption .mic-dot { width: 22px; height: 22px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 4px var(--ink), 0 0 20px var(--red); animation: blink .6s steps(2) infinite; flex: none; }

/* ---------- boot ---------- */
.boot { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; background: radial-gradient(circle at 50% 50%, #34106e, var(--night) 70%); cursor: pointer; }
.boot-inner { text-align: center; }
.boot-logo { font-family: 'Bungee Shade', var(--display); font-size: min(22vw, 30vh); line-height: .85; color: var(--yellow); text-shadow: 0 1.2vh 0 var(--magenta), 0 2.4vh 0 var(--ink); animation: bootbob 1.4s ease-in-out infinite; }
.boot-press { margin-top: 5vh; font-family: var(--pixel); font-size: max(14px, 1.6vw); color: var(--white); animation: blink 1s steps(2) infinite; }
.boot-note { margin-top: 2vh; font-family: var(--pixel); font-size: max(10px, .8vw); color: var(--pink); opacity: .8; }
@keyframes bootbob { 50% { transform: translateY(-1.5vh) rotate(-2deg); } }

/* ---------- title ---------- */
.title-screen { justify-content: center; gap: 22px; inset: -6px 0 -170px 0 !important; }
.title-screen > * { flex: none; }
.logo3d { position: relative; font-family: var(--display); font-size: 250px; line-height: .86; text-align: center; height: 470px; width: 1500px; flex: none; }
#stage.portrait .logo3d { font-size: 230px; width: 1000px; height: 440px; }
.logo3d .lg { position: absolute; top: 0; left: 0; display: inline-block; will-change: transform; color: var(--yellow); -webkit-text-stroke: 10px var(--ink); paint-order: stroke fill; text-shadow: 0 6px 0 #ff9d00, 0 12px 0 #ff5c00, 0 18px 0 var(--magenta), 0 24px 0 #b0006a, 0 30px 0 var(--ink), 0 40px 30px rgba(0,0,0,.5); }
.logo3d .lg.says { color: var(--white); text-shadow: 0 6px 0 var(--pink), 0 12px 0 var(--magenta), 0 18px 0 #c4006f, 0 24px 0 var(--violet), 0 30px 0 var(--ink), 0 40px 30px rgba(0,0,0,.5); }
.tagline { font-family: var(--display); font-size: 40px; color: var(--ink); background: var(--cyan); padding: 12px 34px 6px; border: 6px solid var(--ink); border-radius: 14px; transform: rotate(-2deg); box-shadow: 0 10px 0 var(--ink); }
.menu { display: grid; grid-template-columns: repeat(4, 360px); gap: 26px; margin-top: 18px; }
#stage.portrait .menu { grid-template-columns: repeat(2, 460px); }
.menu-btn { cursor: pointer; height: 190px; border: 6px solid var(--ink); border-radius: 34px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; box-shadow: 0 12px 0 var(--ink), inset 0 5px 0 rgba(255,255,255,.4); transition: transform .12s, box-shadow .12s, filter .12s; position: relative; }
.menu-btn .mb-icon { font-size: 62px; line-height: 1; filter: drop-shadow(0 5px 0 var(--ink)); }
.menu-btn .mb-label { font-family: var(--display); font-size: 36px; color: var(--white); -webkit-text-stroke: 4px var(--ink); paint-order: stroke fill; text-shadow: 0 5px 0 var(--ink); }
.menu-btn .mb-sub { font-family: var(--pixel); font-size: 13px; color: var(--ink); background: rgba(255,255,255,.75); padding: 7px 10px 5px; border-radius: 8px; }
.menu-btn:nth-child(1) { background: linear-gradient(180deg, #ff9fcf, var(--magenta) 55%, #b1005c); }
.menu-btn:nth-child(2) { background: linear-gradient(180deg, #b6f9ff, var(--cyan) 55%, #0094b3); }
.menu-btn:nth-child(3) { background: linear-gradient(180deg, #fff59b, var(--yellow) 55%, #e0a800); }
.menu-btn:nth-child(4) { background: linear-gradient(180deg, #caa6ff, var(--violet) 55%, #3f138f); }
.menu-btn.focus { transform: translateY(-8px) rotate(-1.5deg) scale(1.04); box-shadow: 0 20px 0 var(--ink), inset 0 5px 0 rgba(255,255,255,.4), 0 0 0 8px var(--white); }
@media (hover: hover) { .menu-btn:hover { transform: translateY(-8px) rotate(-1.5deg) scale(1.04); box-shadow: 0 20px 0 var(--ink), inset 0 5px 0 rgba(255,255,255,.4), 0 0 0 8px var(--white); } }
.title-foot { display: flex; gap: 20px; align-items: center; }
.press-start { font-family: var(--pixel); font-size: 22px; color: var(--yellow); text-shadow: 0 4px 0 var(--ink); animation: blink 1s steps(2) infinite; }

/* ---------- kinetic text ---------- */
.kt { position: relative; margin: 0 auto; }
.kt-word { position: absolute; top: 0; left: 0; white-space: pre; font-family: var(--sans); font-weight: 900; color: var(--white); -webkit-text-stroke: .11em var(--ink); paint-order: stroke fill; text-shadow: 0 .09em 0 var(--ink); will-change: transform, opacity; transform-origin: 50% 70%; }
.kt-word.hot { color: var(--yellow); }
.kt-word.key { color: var(--cyan); }
.kt.display .kt-word { font-family: var(--display); font-weight: 400; }

/* ---------- category badge + big slam text ---------- */
.cat-badge { font-family: var(--display); font-size: 30px; padding: 10px 26px 6px; border: 5px solid var(--ink); border-radius: 999px; background: var(--white); color: var(--ink); box-shadow: 0 8px 0 var(--ink); display: inline-flex; gap: 12px; align-items: center; transform: rotate(-2deg); }
.slam { position: absolute; left: 50%; top: 50%; translate: -50% -50%; font-family: var(--display); font-size: 200px; line-height: .9; text-align: center; white-space: nowrap; pointer-events: none; z-index: 30; color: var(--yellow); -webkit-text-stroke: 12px var(--ink); paint-order: stroke fill; text-shadow: 0 10px 0 var(--magenta), 0 20px 0 var(--ink); }
.slam .ch { display: inline-block; will-change: transform; }
.slam.red { color: var(--white); text-shadow: 0 10px 0 var(--red), 0 20px 0 var(--ink); }
.slam.blue { color: var(--white); text-shadow: 0 10px 0 var(--blue), 0 20px 0 var(--ink); }
.slam.green { color: var(--green); text-shadow: 0 10px 0 #0a8f3c, 0 20px 0 var(--ink); }
.slam.bad { color: var(--red); text-shadow: 0 10px 0 var(--red-d), 0 20px 0 var(--ink); }
.slam .sub { display: block; font-size: .32em; margin-top: .25em; color: var(--white); -webkit-text-stroke: 6px var(--ink); text-shadow: 0 8px 0 var(--ink); }
#stage.portrait .slam { font-size: 150px; white-space: normal; width: 1000px; }

.sticker { position: absolute; z-index: 40; pointer-events: none; font-family: var(--display); font-size: 64px; color: var(--white); -webkit-text-stroke: 6px var(--ink); paint-order: stroke fill; text-shadow: 0 7px 0 var(--ink); white-space: nowrap; }
.sticker.pill { font-size: 34px; padding: 10px 24px 6px; background: var(--yellow); color: var(--ink); -webkit-text-stroke: 0; text-shadow: none; border: 5px solid var(--ink); border-radius: 999px; box-shadow: 0 7px 0 var(--ink); }
.sticker.green { color: var(--green); } .sticker.gold { color: var(--yellow); } .sticker.red { color: var(--red); } .sticker.cyan { color: var(--cyan); }

.big-x { position: absolute; left: 50%; top: 45%; width: 520px; height: 520px; margin: -260px 0 0 -260px; z-index: 35; pointer-events: none; display: flex; gap: 30px; justify-content: center; align-items: center; }
.big-x span { font-family: var(--display); font-size: 520px; line-height: .8; color: var(--red); -webkit-text-stroke: 18px var(--ink); paint-order: stroke fill; text-shadow: 0 18px 0 var(--ink), 0 0 80px rgba(255,59,78,.8); }
.big-x.many span { font-size: 380px; }

/* ---------- timer ring ---------- */
.timer { position: relative; width: 150px; height: 150px; flex: none; }
.timer svg { width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.timer .track { fill: rgba(18,7,38,.85); stroke: var(--ink); stroke-width: 14; }
.timer .arc { fill: none; stroke: var(--yellow); stroke-width: 16; stroke-linecap: round; }
.timer .num { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--display); font-size: 62px; color: var(--white); -webkit-text-stroke: 4px var(--ink); paint-order: stroke fill; }
.timer.urgent .arc { stroke: var(--red); }
.timer.urgent { animation: throb .5s ease-in-out infinite; }
@keyframes throb { 50% { transform: scale(1.1); } }

/* ---------- face-off ---------- */
.faceoff { justify-content: flex-start; padding-top: 6px; gap: 18px; }
.fo-head { display: flex; align-items: center; gap: 22px; min-height: 64px; }
.q-box { width: 1680px; min-height: 250px; display: grid; place-items: center; }
#stage.portrait .q-box { width: 1000px; min-height: 420px; }
.tiles { display: grid; gap: 26px 34px; width: 1640px; }
.tiles.four { grid-template-columns: 1fr 1fr; }
.tiles.two { grid-template-columns: 1fr 1fr; }
#stage.portrait .tiles { width: 1000px; grid-template-columns: 1fr; gap: 22px; }
.tile { cursor: pointer; position: relative; height: 150px; display: grid; grid-template-columns: 96px 1fr auto; align-items: center; gap: 22px; padding: 0 30px 0 22px; text-align: left; border: 6px solid var(--ink); border-radius: 30px; background: linear-gradient(180deg, #f6f0ff, #d9ccf7 60%, #b8a5ea); color: var(--ink); box-shadow: 0 12px 0 var(--ink), inset 0 5px 0 #fff; overflow: hidden; transform-style: preserve-3d; transition: filter .2s; }
.tile .tile-key { width: 84px; height: 84px; border-radius: 22px; display: grid; place-items: center; font-family: var(--display); font-size: 48px; background: var(--ink); color: var(--yellow); }
.tile .tile-text { font-family: var(--sans); font-weight: 900; font-size: 52px; line-height: 1.02; position: relative; z-index: 2; }
.tile .tile-rank { display: flex; align-items: baseline; gap: 12px; position: relative; z-index: 2; opacity: 0; }
.tile .tile-rank b { font-family: var(--display); font-size: 56px; font-weight: 400; color: var(--white); -webkit-text-stroke: 5px var(--ink); paint-order: stroke fill; }
.tile .tile-rank i { font-style: normal; font-family: var(--display); font-size: 40px; color: var(--ink); }
.tile.locked-red .tile-rank i, .tile.locked-blue .tile-rank i, .tile.locked-solo .tile-rank i { color: var(--white); -webkit-text-stroke: 4px var(--ink); paint-order: stroke fill; }
.tile .tile-bar { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: linear-gradient(90deg, rgba(255,230,59,.0), rgba(255,230,59,.75)); z-index: 1; }
.tile.hover, .tile:hover { filter: brightness(1.06); }
.tile.locked-red { background: linear-gradient(180deg, var(--red-l), var(--red) 60%, var(--red-d)); color: var(--white); }
.tile.locked-blue { background: linear-gradient(180deg, var(--blue-l), var(--blue) 60%, var(--blue-d)); color: var(--white); }
.tile.locked-red .tile-text, .tile.locked-blue .tile-text, .tile.locked-solo .tile-text { -webkit-text-stroke: 4px var(--ink); paint-order: stroke fill; }
.tile.locked-solo { background: linear-gradient(180deg, #ffa3d6, var(--magenta) 60%, #a3004f); color: var(--white); }
.tile.win { background: linear-gradient(180deg, #fff7b0, var(--yellow) 55%, var(--gold)); color: var(--ink); box-shadow: 0 12px 0 var(--ink), inset 0 5px 0 #fff, 0 0 70px 12px rgba(255,230,59,.8); }
.tile.win .tile-text { -webkit-text-stroke: 0; }
.tile.gone { filter: saturate(.55) brightness(.78); }
.tile.revealed .tile-rank { opacity: 1; }
.tile.is-first .tile-rank b { color: var(--yellow); }
.buzz-cue { display: flex; gap: 30px; align-items: center; font-family: var(--display); font-size: 58px; }
.buzz-cue .who { display: flex; align-items: center; gap: 14px; padding: 10px 26px 6px; border-radius: 999px; border: 5px solid var(--ink); box-shadow: 0 8px 0 var(--ink); font-size: 34px; }
.buzz-cue .who.red { background: var(--red); } .buzz-cue .who.blue { background: var(--blue); }
.fo-status { font-family: var(--display); font-size: 46px; min-height: 60px; text-align: center; }

/* ---------- play or pass ---------- */
.pp { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 40px; }
.pp-title { font-family: var(--display); font-size: 110px; }
.pp-row { display: flex; gap: 60px; }
.pp .btn { font-size: 72px; padding: 28px 70px 20px; }

/* ---------- board ---------- */
.board-scene { justify-content: flex-start; gap: 10px; padding-top: 0; }
.board-q { width: 1500px; min-height: 100px; display: grid; place-items: center; }
#stage.portrait .board-q { width: 1000px; min-height: 230px; }
.board-row { display: flex; align-items: center; gap: 22px; }
.board-frame { position: relative; padding: 22px; border-radius: 40px; background: linear-gradient(180deg, #ffd24a, var(--gold) 50%, #d98a00); border: 7px solid var(--ink); box-shadow: 0 14px 0 var(--ink), inset 0 6px 0 rgba(255,255,255,.6); }
.bulbs { position: absolute; inset: 7px; pointer-events: none; border-radius: 30px; }
.bulbs i { position: absolute; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: #fff7c2; box-shadow: 0 0 10px 3px #fff39a; }
.bulbs i.off { background: #9b6a00; box-shadow: none; }
.board-grid { display: grid; grid-auto-flow: column; grid-template-rows: repeat(4, 94px); grid-template-columns: 590px 590px; gap: 12px 16px; padding: 16px; border-radius: 24px; background: #06031a; border: 6px solid var(--ink); }
#stage.portrait .board-grid { grid-auto-flow: row; grid-template-rows: repeat(8, 82px); grid-template-columns: 860px; gap: 10px; }
.slot { perspective: 1200px; position: relative; }
.slot-inner { position: absolute; inset: 0; transform-style: preserve-3d; transition: none; }
.slot-face { position: absolute; inset: 0; backface-visibility: hidden; border-radius: 18px; border: 5px solid var(--ink); display: flex; align-items: center; }
.slot-front { background: linear-gradient(180deg, #5d93ff, var(--blue) 45%, var(--blue-d)); box-shadow: inset 0 4px 0 rgba(255,255,255,.4); justify-content: center; }
.slot-front .slot-num { width: 110px; height: 72px; border-radius: 50%; display: grid; place-items: center; font-family: var(--display); font-size: 50px; color: var(--white); background: #0b2a8a; border: 5px solid var(--white); box-shadow: 0 0 0 4px var(--ink); -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; }
.slot-back { transform: rotateX(180deg); background: linear-gradient(180deg, #6aa1ff, #2a6ef0 45%, #1446B8); justify-content: space-between; padding: 0 0 0 26px; box-shadow: inset 0 4px 0 rgba(255,255,255,.45); }
.slot-back .slot-rank { font-family: var(--display); font-size: 30px; color: var(--yellow); -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; margin-right: 14px; }
.slot-back .slot-text { flex: 1; font-family: var(--sans); font-weight: 900; font-size: 42px; line-height: 1; color: var(--white); -webkit-text-stroke: 4px var(--ink); paint-order: stroke fill; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-transform: uppercase; }
.slot-back .slot-pct { align-self: stretch; width: 112px; display: grid; place-items: center; font-family: var(--display); font-size: 48px; color: var(--white); background: #0b2a8a; border-left: 5px solid var(--ink); border-radius: 0 13px 13px 0; -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; }
.slot.flipped .slot-inner { transform: rotateX(180deg); }
.slot.hit .slot-back { background: linear-gradient(180deg, #fff7b0, var(--yellow) 50%, var(--gold)); }
.slot.hit .slot-back .slot-text { color: var(--ink); -webkit-text-stroke: 0; }
.slot.hit .slot-back .slot-pct { background: var(--green); color: var(--ink); -webkit-text-stroke: 0; }
.slot.miss .slot-back { background: linear-gradient(180deg, #7b6aa8, #4b3a7a 50%, #2d2150); }
.slot.miss .slot-back .slot-pct { background: #2d2150; }
.slot.late .slot-back { background: linear-gradient(180deg, #5a7fc9, #37569a 50%, #1f336a); }
.slot.target .slot-front { background: linear-gradient(180deg, #fff39a, var(--yellow) 45%, var(--gold)); animation: targetpulse .9s ease-in-out infinite; }
.slot.target .slot-front .slot-num { background: var(--magenta); }
.slot .tb { position: absolute; right: 128px; top: -12px; font-family: var(--pixel); font-size: 11px; padding: 6px 7px 4px; background: var(--cyan); color: var(--ink); border: 3px solid var(--ink); border-radius: 8px; z-index: 3; }
@keyframes targetpulse { 50% { box-shadow: inset 0 4px 0 rgba(255,255,255,.4), 0 0 40px 8px rgba(255,230,59,.9); } }
.bank { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 230px; padding: 18px 10px 14px; flex: none; }
.bank .bank-label { font-family: var(--pixel); font-size: 18px; color: var(--yellow); }
.bank .bank-num { font-family: var(--display); font-size: 86px; line-height: 1; color: var(--white); -webkit-text-stroke: 6px var(--ink); paint-order: stroke fill; text-shadow: 0 7px 0 var(--ink); font-variant-numeric: tabular-nums; }
.bank .mult { font-family: var(--display); font-size: 30px; color: var(--ink); background: var(--yellow); border: 4px solid var(--ink); border-radius: 999px; padding: 4px 16px 0; }
.side-cue { width: 230px; flex: none; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.side-cue .big { font-family: var(--display); font-size: 40px; line-height: 1; }
.side-cue .team-flag { font-family: var(--display); font-size: 28px; padding: 10px 18px 6px; border-radius: 16px; border: 5px solid var(--ink); box-shadow: 0 7px 0 var(--ink); }
.side-cue .team-flag.red { background: var(--red); } .side-cue .team-flag.blue { background: var(--blue); } .side-cue .team-flag.solo { background: var(--magenta); }
#stage.portrait .board-row { flex-direction: column; gap: 14px; }
#stage.portrait .board-row .bank, #stage.portrait .board-row .side-cue { flex-direction: row; width: auto; }
.tray { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px 12px; width: 100%; }
#stage.portrait .tray { grid-template-columns: repeat(2, 1fr); max-width: none; }
.chipbtn { cursor: pointer; height: 72px; display: flex; align-items: center; gap: 10px; padding: 0 12px 0 10px; border: 5px solid var(--ink); border-radius: 18px; background: linear-gradient(180deg, #fff, #e4dcff); color: var(--ink); box-shadow: 0 7px 0 var(--ink); font-family: var(--sans); font-weight: 900; font-size: 25px; line-height: 1.02; text-align: left; min-width: 0; }
.chipbtn kbd { font-size: 14px; flex: none; background: var(--ink); color: var(--yellow); border-color: var(--ink); box-shadow: none; }
.chipbtn span { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
@media (hover: hover) { .chipbtn:hover { transform: translateY(-3px); background: linear-gradient(180deg, #fff, var(--yellow)); } }
.chipbtn.used { visibility: hidden; }

/* ---------- hot take ---------- */
.hottake { justify-content: flex-start; gap: 4px; }
.ht-card { position: relative; width: 1500px; min-height: 150px; display: grid; place-items: center; padding: 6px 80px; }
#stage.portrait .ht-card { width: 1000px; min-height: 380px; }
.ht-quote { position: absolute; left: 0; top: -40px; font-family: var(--display); font-size: 200px; color: var(--orange); -webkit-text-stroke: 8px var(--ink); paint-order: stroke fill; transform: rotate(-8deg); }
.ht-sub { font-family: var(--display); font-size: 40px; color: var(--ink); background: var(--orange); padding: 10px 28px 4px; border: 5px solid var(--ink); border-radius: 12px; box-shadow: 0 8px 0 var(--ink); transform: rotate(1.5deg); }
.gauge { position: relative; width: 860px; height: 525px; margin-top: 36px; flex: none; }
.gauge svg { width: 100%; height: 100%; overflow: visible; }
.gauge .g-num { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); font-family: var(--display); font-size: 120px; line-height: 1; color: var(--white); -webkit-text-stroke: 8px var(--ink); paint-order: stroke fill; text-shadow: 0 9px 0 var(--ink); opacity: 0; font-variant-numeric: tabular-nums; }
.gauge .flag { position: absolute; left: 0; top: 0; translate: -50% -100%; transform-origin: 50% 100%; display: flex; flex-direction: column; align-items: center; pointer-events: none; }
.gauge .flag b { font-family: var(--display); font-weight: 400; font-size: 40px; padding: 8px 16px 2px; border-radius: 14px; border: 5px solid var(--ink); box-shadow: 0 6px 0 var(--ink); color: var(--white); -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; white-space: nowrap; }
.gauge .flag.red b { background: var(--red); } .gauge .flag.blue b { background: var(--blue); } .gauge .flag.solo b { background: var(--magenta); }
.gauge .flag i { width: 8px; height: 46px; background: var(--ink); }
.gauge .flag.win b { background: var(--yellow); color: var(--ink); -webkit-text-stroke: 0; box-shadow: 0 6px 0 var(--ink), 0 0 40px 8px var(--yellow); }
.bid-cue { display: flex; gap: 24px; align-items: center; font-family: var(--display); font-size: 50px; min-height: 90px; }
.bid-cue .entry { min-width: 220px; text-align: center; font-size: 70px; padding: 4px 26px 0; border-radius: 20px; border: 6px solid var(--ink); background: var(--white); color: var(--ink); box-shadow: 0 8px 0 var(--ink); }
.bid-cue .team-flag { font-size: 36px; padding: 10px 22px 6px; border-radius: 16px; border: 5px solid var(--ink); box-shadow: 0 7px 0 var(--ink); }
.bid-cue .team-flag.red { background: var(--red); } .bid-cue .team-flag.blue { background: var(--blue); } .bid-cue .team-flag.solo { background: var(--magenta); }

/* ---------- lightning ---------- */
.lightning { justify-content: flex-start; gap: 20px; }
.lt-timer { width: 1640px; height: 34px; border-radius: 999px; border: 6px solid var(--ink); background: rgba(18,7,38,.8); overflow: hidden; box-shadow: 0 8px 0 var(--ink); }
#stage.portrait .lt-timer { width: 1000px; }
.lt-fill { height: 100%; width: 100%; background: linear-gradient(90deg, var(--cyan), var(--yellow), var(--magenta)); transform-origin: 0 50%; }
.lt-q { width: 1640px; min-height: 170px; display: grid; place-items: center; }
#stage.portrait .lt-q { width: 1000px; min-height: 260px; }
.lt-panels { display: grid; grid-template-columns: 1fr 190px 1fr; align-items: center; width: 1680px; }
#stage.portrait .lt-panels { width: 1000px; grid-template-columns: 1fr; grid-template-rows: 1fr 150px 1fr; }
.lt-panel { cursor: pointer; position: relative; height: 330px; border: 7px solid var(--ink); border-radius: 44px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 20px 30px; box-shadow: 0 14px 0 var(--ink), inset 0 6px 0 rgba(255,255,255,.45); }
#stage.portrait .lt-panel { height: 300px; }
.lt-panel.left { background: linear-gradient(180deg, #9ff4ff, var(--cyan) 50%, #0086a3); }
.lt-panel.right { background: linear-gradient(180deg, #ffa3d6, var(--magenta) 50%, #a3004f); }
.lt-panel .lt-key { position: absolute; top: 18px; left: 22px; font-family: var(--pixel); font-size: 18px; }
.lt-panel .lt-text { font-family: var(--sans); font-weight: 900; font-size: 76px; line-height: 1; text-align: center; color: var(--white); -webkit-text-stroke: 7px var(--ink); paint-order: stroke fill; text-shadow: 0 8px 0 var(--ink); }
.lt-panel .lt-pct { font-family: var(--display); font-size: 60px; color: var(--yellow); -webkit-text-stroke: 5px var(--ink); paint-order: stroke fill; opacity: 0; }
.lt-panel.win { background: linear-gradient(180deg, #fff7b0, var(--yellow) 50%, var(--gold)); box-shadow: 0 14px 0 var(--ink), 0 0 90px 16px rgba(255,230,59,.9); }
.lt-panel.win .lt-pct { color: var(--ink); -webkit-text-stroke: 0; }
.lt-panel.lose { filter: saturate(.25) brightness(.5); }
.lt-vs { justify-self: center; font-family: var(--display); font-size: 110px; color: var(--yellow); -webkit-text-stroke: 8px var(--ink); paint-order: stroke fill; text-shadow: 0 10px 0 var(--ink); transform: rotate(-8deg); }
.lt-meta { display: flex; gap: 30px; align-items: center; font-family: var(--display); font-size: 44px; }
.lt-meta .pill { padding: 8px 26px 2px; border-radius: 999px; border: 5px solid var(--ink); box-shadow: 0 7px 0 var(--ink); background: var(--yellow); color: var(--ink); }
.lt-meta .pill.streak { background: var(--orange); }

/* ---------- setup / workshop / settings forms ---------- */
.setup { justify-content: center; gap: 30px; }
.setup-title { font-family: var(--display); font-size: 90px; }
.team-cards { display: flex; gap: 60px; align-items: stretch; }
#stage.portrait .team-cards { flex-direction: column; gap: 40px; }
.team-card { width: 700px; padding: 34px 40px 36px; border: 7px solid var(--ink); border-radius: 44px; display: flex; flex-direction: column; gap: 18px; align-items: center; box-shadow: 0 16px 0 var(--ink), inset 0 6px 0 rgba(255,255,255,.4); }
#stage.portrait .team-card { width: 900px; }
.team-card.red { background: linear-gradient(180deg, var(--red-l), var(--red) 40%, var(--red-d)); }
.team-card.blue { background: linear-gradient(180deg, var(--blue-l), var(--blue) 40%, var(--blue-d)); }
.team-card .tc-mascot { font-size: 150px; line-height: 1; filter: drop-shadow(0 8px 0 var(--ink)); }
.team-card .tc-why { font-family: var(--pixel); font-size: 14px; color: var(--ink); background: rgba(255,255,255,.8); padding: 8px 12px 6px; border-radius: 10px; min-height: 30px; }
.name-input { width: 100%; font-family: var(--display); font-size: 50px; text-align: center; color: var(--ink); background: var(--white); border: 6px solid var(--ink); border-radius: 22px; padding: 14px 10px 8px; box-shadow: 0 8px 0 var(--ink); outline: none; text-transform: uppercase; }
.name-input:focus { box-shadow: 0 8px 0 var(--ink), 0 0 0 8px var(--yellow); }
.buzz-test { display: flex; align-items: center; gap: 16px; font-family: var(--display); font-size: 30px; }
.buzz-test kbd { font-size: 26px; min-width: 90px; text-align: center; }
.buzz-test.flash { animation: throb .25s 2; }
.row { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; justify-content: center; }
.seg { display: inline-flex; border: 5px solid var(--ink); border-radius: 999px; overflow: hidden; box-shadow: 0 7px 0 var(--ink); }
.seg button { cursor: pointer; font-family: var(--display); font-size: 26px; padding: 12px 24px 8px; background: var(--plum2); color: var(--white); border: 0; border-right: 4px solid var(--ink); }
.seg button:last-child { border-right: 0; }
.seg button.on { background: var(--yellow); color: var(--ink); }
.label { font-family: var(--pixel); font-size: 16px; color: var(--white); text-shadow: 0 3px 0 var(--ink); }

.workshop { justify-content: flex-start; gap: 20px; padding-top: 4px; }
.ws-title { font-family: var(--display); font-size: 70px; }
.ws-grid { display: grid; grid-template-columns: 1100px 560px; gap: 30px; }
#stage.portrait .ws-grid { grid-template-columns: 1000px; }
.ws-form { padding: 26px 30px; display: flex; flex-direction: column; gap: 16px; }
.ws-form textarea, .ws-form input { width: 100%; font-family: var(--sans); font-weight: 800; font-size: 34px; color: var(--ink); background: var(--white); border: 5px solid var(--ink); border-radius: 18px; padding: 12px 18px; outline: none; resize: none; }
.ws-form textarea:focus, .ws-form input:focus { box-shadow: 0 0 0 6px var(--yellow); }
.ws-answers { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; }
.ws-answers .ans { display: flex; gap: 10px; align-items: center; }
.ws-answers .ans b { font-family: var(--display); font-size: 30px; width: 40px; text-align: center; }
.mic-btn { cursor: pointer; flex: none; width: 70px; height: 70px; border-radius: 50%; border: 5px solid var(--ink); background: var(--white); font-size: 34px; box-shadow: 0 6px 0 var(--ink); }
.mic-btn.live { background: var(--red); animation: micpulse .6s ease-in-out infinite; }
.ws-side { padding: 26px; display: flex; flex-direction: column; gap: 14px; max-height: 700px; }
.ws-list { overflow: auto; display: flex; flex-direction: column; gap: 10px; padding-right: 6px; }
.ws-item { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: center; padding: 12px 14px; border: 4px solid var(--ink); border-radius: 16px; background: rgba(255,255,255,.1); }
.ws-item .wi-q { font-weight: 800; font-size: 22px; line-height: 1.15; }
.ws-item .wi-meta { font-family: var(--pixel); font-size: 11px; color: var(--pink); margin-top: 6px; }
.ws-status { min-height: 60px; font-family: var(--display); font-size: 34px; text-align: center; }
.ws-status .ok { color: var(--green); } .ws-status .warn { color: var(--orange); } .ws-status .bad { color: var(--red); }
.vault { font-size: 90px; display: inline-block; }

.overlay { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(11,6,36,.72); backdrop-filter: blur(6px); z-index: 60; }
.menu-card { width: 980px; max-height: 960px; overflow: auto; padding: 40px 50px; display: flex; flex-direction: column; gap: 22px; align-items: stretch; }
.menu-card h2 { margin: 0 0 6px; font-family: var(--display); font-weight: 400; font-size: 64px; text-align: center; }
.menu-card .btn { width: 100%; }
.set-row { display: grid; grid-template-columns: 300px 1fr; gap: 20px; align-items: center; }
.set-row .label { font-size: 15px; line-height: 1.5; }
.set-row input[type=range] { width: 100%; accent-color: var(--yellow); height: 30px; }
.keycap { cursor: pointer; font-family: var(--pixel); font-size: 16px; padding: 12px 16px 10px; border-radius: 12px; border: 4px solid var(--ink); background: var(--white); color: var(--ink); box-shadow: 0 5px 0 var(--ink); }
.keycap.listening { background: var(--yellow); animation: blink .5s steps(2) infinite; }

/* ---------- versus / intro / finale ---------- */
.versus { justify-content: center; flex-direction: row; gap: 50px; }
#stage.portrait .versus { flex-direction: column; }
.vs-team { width: 640px; height: 520px; border: 8px solid var(--ink); border-radius: 50px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 14px; box-shadow: 0 18px 0 var(--ink), inset 0 8px 0 rgba(255,255,255,.4); }
#stage.portrait .vs-team { width: 880px; height: 520px; }
.vs-team.red { background: linear-gradient(180deg, var(--red-l), var(--red) 45%, var(--red-d)); }
.vs-team.blue { background: linear-gradient(180deg, var(--blue-l), var(--blue) 45%, var(--blue-d)); }
.vs-team .m { font-size: 190px; line-height: 1; filter: drop-shadow(0 10px 0 var(--ink)); }
.vs-team .n { font-family: var(--display); font-size: 62px; text-align: center; line-height: 1; padding: 0 20px; color: var(--white); -webkit-text-stroke: 6px var(--ink); paint-order: stroke fill; text-shadow: 0 8px 0 var(--ink); }
.vs-mid { font-family: var(--display); font-size: 170px; color: var(--yellow); -webkit-text-stroke: 10px var(--ink); paint-order: stroke fill; text-shadow: 0 14px 0 var(--magenta), 0 26px 0 var(--ink); }

.finale { justify-content: center; gap: 26px; }
.fin-crown { font-size: 200px; line-height: 1; filter: drop-shadow(0 12px 0 var(--ink)); }
.fin-name { font-family: var(--display); font-size: 130px; line-height: .95; text-align: center; max-width: 1700px; flex-shrink: 0; }   /* its words are absolutely placed: never let flex squash the box under them */
.fin-scores { display: flex; gap: 40px; }
.fin-score { font-family: var(--display); font-size: 60px; padding: 14px 40px 8px; border-radius: 26px; border: 6px solid var(--ink); box-shadow: 0 10px 0 var(--ink); }
.fin-score.red { background: var(--red); } .fin-score.blue { background: var(--blue); }
.fin-stats { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; max-width: 1840px; }
#stage.landscape .finale:has(.fin-stats) { gap: 18px; }
#stage.landscape .fin-crown { font-size: 130px; }
.stat { padding: 14px 26px 10px; min-width: 230px; text-align: center; }
.stat b { display: block; font-family: var(--display); font-weight: 400; font-size: 58px; line-height: 1; color: var(--yellow); -webkit-text-stroke: 4px var(--ink); paint-order: stroke fill; }
.stat span { font-family: var(--pixel); font-size: 13px; }

/* ---------- solo: arcade initials + leaderboard ---------- */
.initials { display: flex; gap: 24px; }
.initials .ch { width: 150px; height: 190px; display: grid; place-items: center; font-family: var(--display); font-size: 140px; color: var(--yellow); border: 7px solid var(--ink); border-radius: 26px; background: var(--plum2); box-shadow: 0 12px 0 var(--ink); -webkit-text-stroke: 6px var(--ink); paint-order: stroke fill; }
.initials .ch.cur { border-color: var(--yellow); animation: throb .7s ease-in-out infinite; }
.leader { width: 900px; padding: 24px 40px; }
.leader ol { margin: 0; padding: 0; list-style: none; counter-reset: r; }
.leader li { counter-increment: r; display: grid; grid-template-columns: 80px 1fr auto; gap: 20px; align-items: center; font-family: var(--display); font-size: 42px; padding: 6px 0; border-bottom: 3px dashed rgba(255,255,255,.2); }
.leader li::before { content: counter(r); font-family: var(--pixel); font-size: 22px; color: var(--pink); }
.leader li.me { color: var(--yellow); }

/* ---------- how to play ---------- */
.howto { justify-content: center; gap: 30px; }
.howto-cards { display: grid; grid-template-columns: repeat(4, 400px); gap: 26px; }
#stage.portrait .howto-cards { grid-template-columns: repeat(2, 480px); }
.howto-card { padding: 26px 26px 30px; display: flex; flex-direction: column; gap: 12px; }
.howto-card .hc-icon { font-size: 70px; }
.howto-card h3 { margin: 0; font-family: var(--display); font-weight: 400; font-size: 38px; color: var(--yellow); }
.howto-card p { margin: 0; font-weight: 800; font-size: 26px; line-height: 1.25; }

/* ---------- wipes ---------- */
#wipe .band { position: absolute; top: -20%; height: 140%; width: 36%; border-left: 14px solid var(--ink); border-right: 14px solid var(--ink); visibility: hidden; }
#wipe .wipe-title { position: absolute; left: 50%; top: 50%; font-family: var(--display); font-size: min(11vw, 20vh); line-height: .9; text-align: center; color: var(--white); -webkit-text-stroke: max(6px, .6vw) var(--ink); paint-order: stroke fill; text-shadow: 0 1vh 0 var(--ink); white-space: nowrap; opacity: 0; }
#wipe .wipe-title small { display: block; font-size: .36em; color: var(--yellow); }

/* ---------- calm mode ---------- */
body.calm .logo3d .lg, body.calm .pod.active, body.calm .slot.target .slot-front { animation: none !important; }
.slam { isolation: isolate; }
.slam::before { content: ""; position: absolute; inset: -60px -120px; z-index: -1; background: radial-gradient(closest-side, rgba(11,6,36,.78), rgba(11,6,36,.35) 60%, transparent); pointer-events: none; }

/* compact pods while the board tray needs the bottom row */
#stage.compact #bottom { grid-template-columns: 320px 1fr 320px; gap: 14px; }
#stage.compact .pod { height: 140px; grid-template-columns: 78px 1fr; padding: 10px 16px 8px 10px; }
#stage.compact .pod .mascot { font-size: 64px; }
#stage.compact .pod .tname { font-size: 19px; }
#stage.compact .pod .score { font-size: 56px; }
#stage.compact .pod .strikes i { width: 44px; height: 44px; font-size: 30px; }
#stage.portrait.compact #bottom { grid-template-columns: 1fr 1fr; }
.cue-strikes { display: flex; gap: 8px; }
.cue-strikes i { width: 58px; height: 58px; border-radius: 14px; border: 5px solid var(--ink); background: rgba(18,7,38,.7); display: grid; place-items: center; font-style: normal; font-family: var(--display); font-size: 40px; color: transparent; box-shadow: 0 6px 0 var(--ink); }
.cue-strikes i.on { background: var(--red); color: var(--white); -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; }

#stage.portrait #bottom { row-gap: 18px; align-items: end; }
#stage.portrait .pod { height: 150px; }
#stage.portrait .tray { gap: 10px; }
#stage.portrait .chipbtn { height: 66px; font-size: 24px; }
#stage.portrait .board-q { min-height: 150px; }
/* portrait: the caption docks over the header bar, the one strip no round uses for the question or tray */
#stage.portrait .caption { bottom: auto; top: 8px; width: max-content; max-width: 1060px; font-size: 30px; padding: 10px 24px 12px; gap: 14px; }
#stage.portrait .caption .heard { font-size: 30px; }
#stage.portrait .caption .who { font-size: 22px; }
/* portrait top bar: logo, badge and both chips must fit 1080 wide */
#stage.portrait #topbar { padding: 18px 18px 0; gap: 12px; }
#stage.portrait .chip { font-size: 16px; padding: 12px 12px 10px; gap: 8px; }
#stage.portrait .round-badge { font-size: 30px; padding: 12px 22px 8px; }
#stage.portrait .title-foot { flex-wrap: wrap; justify-content: center; max-width: 960px; row-gap: 18px; }
.screen.tall { inset: -6px 0 -170px 0 !important; }
#stage.portrait .screen.tall { inset: -6px 0 -40px 0 !important; }
.ws-head { display: flex; align-items: center; gap: 40px; }
.menu-card.settings-card { width: 1680px; max-height: 1000px; padding: 30px 44px; gap: 16px; }
#stage.portrait .menu-card.settings-card { width: 1020px; max-height: 1800px; }
.set-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 40px; }
#stage.portrait .set-grid { grid-template-columns: 1fr; }
.settings-card .set-row { grid-template-columns: 230px 1fr; }
.settings-card .seg button { font-size: 22px; padding: 10px 18px 7px; }
.settings-card h2 { font-size: 54px; }
.settings-card .btn { width: auto; align-self: center; padding-left: 90px; padding-right: 90px; }
.hint { line-height: 1.6; }
.pause-card { animation: pausepop .25s cubic-bezier(.3,1.6,.5,1); }
@keyframes pausepop { from { transform: scale(.7); opacity: 0; } }

.sticker.pill.sass { background: var(--magenta); color: var(--white); -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; font-size: 36px; }
.ticker { font-family: var(--pixel); font-size: 20px; color: var(--ink); background: var(--yellow); padding: 12px 20px 9px; border: 4px solid var(--ink); border-radius: 10px; box-shadow: 0 6px 0 var(--ink); transform: rotate(1.5deg); min-width: 820px; text-align: center; }

/* ---------- rounds, batch 2: readable in-round text, clock nudges, pick marks, bank notes ---------- */
.q-box { flex-shrink: 0; }   /* an overflowing question pushes the tiles down instead of hiding behind them */
.chipbtn { font-size: 30px; height: 80px; }
.chipbtn kbd { font-size: 20px; }
#stage.portrait .chipbtn { font-size: 28px; }   /* keeps 66px chips: taller ones cover the side cue */
.slot-back .slot-rank { font-size: 24px; margin-right: 10px; }
.slot .tb { font-size: 16px; }
.lt-panel .lt-key { font-size: 26px; }
.fo-status .hint, .bid-cue .hint, .pp .hint { font-size: 26px; }
.stat span { font-size: 20px; }
.timer.warn:not(.urgent) .arc { stroke: var(--orange); }
.timer.warn:not(.urgent) { animation: micpulse .5s ease-in-out 2; }
body.pause-open .slot.target .slot-front, body.pause-open .timer { animation-play-state: paused; }
.tray.loading { opacity: .55; pointer-events: none; filter: saturate(.4); }
.side-cue .big.loading { font-size: 30px; animation: blink .6s steps(2) infinite; }
.slam .sub.thinking { animation: blink .6s steps(2) infinite; color: var(--cyan); }
.lt-panel.picked { outline: 10px solid var(--pick, var(--white)); outline-offset: 6px; }
.lt-panel.lose.picked { filter: saturate(.55) brightness(.75); }
.sticker.stamp { font-size: 150px; -webkit-text-stroke: 8px var(--ink); }
.gauge .flag b small.off { display: block; font-size: 24px; text-align: center; -webkit-text-stroke: 2px var(--ink); }
.jev-note { display: flex; align-items: center; gap: 18px; max-width: 1200px; padding: 14px 30px 12px; border: 5px solid var(--ink); border-radius: 28px; background: var(--magenta); box-shadow: 0 8px 0 var(--ink); font-family: var(--sans); font-weight: 900; font-size: 38px; line-height: 1.1; color: var(--white); -webkit-text-stroke: 2px var(--ink); paint-order: stroke fill; text-align: left; }
.jev-note b { flex: none; font-family: var(--pixel); font-weight: 400; font-size: 20px; padding: 8px 12px 6px; border-radius: 10px; background: var(--yellow); color: var(--ink); -webkit-text-stroke: 0; }
#stage.portrait .jev-note { max-width: 1020px; font-size: 40px; }

.pod .tname { font-size: 30px; }
.pod .tag { font-size: 17px; }
#stage.compact .pod .tname { font-size: 22px; }

/* ======================================================================================
   TOUCH MODE (body.touch: phones, tablets, touch laptops). Desktop rules above stay as they were.
   --tap = 44 CSS px and --fmin = 12 CSS px, both in stage px (stage.js sets them from the scale),
   so every tap target and every small label holds its size on a phone however far the stage shrinks.
   ====================================================================================== */
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; }
.chip-short { display: none; }
.pause-chip { display: none; }
.pause-chip::before { display: none; }
body.touch.in-game .pause-chip { display: flex; }
.caption.toast { bottom: auto; top: 120px; font-size: 30px; }
.ask-hint { font-size: 44px; }
button.who { cursor: pointer; font: inherit; font-size: 34px; color: inherit; }
.who-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.go-head, .go-entry { display: flex; flex-direction: column; align-items: center; gap: 26px; }
.go-head .hint, .go-entry .hint { background: rgba(18,7,38,.82); padding: 10px 22px 8px; border-radius: 999px; opacity: 1; }   /* readable on the checkerboard */
.initials { align-items: center; }
.initials .ch { cursor: pointer; padding: 0; font-weight: 400; }
body.touch .boot-note { font-size: max(12px, .8vw); }
body.touch .boot-press { font-size: max(16px, 1.6vw); }

/* tap targets */
body.touch #stage .btn, body.touch #stage .keycap, body.touch #stage .seg button, body.touch #stage .mic-btn, body.touch #stage .name-input,
body.touch #stage .ws-form input, body.touch #stage .ws-form textarea, body.touch #stage .initials .ch, body.touch #stage .bid-lock { min-height: var(--tap); }
body.touch #stage .keycap, body.touch #stage .mic-btn { min-width: var(--tap); }
body.touch #stage .btn.small { font-size: max(26px, var(--fmin)); }
body.touch #stage .btn:active, body.touch #stage .keycap:active, body.touch #stage .seg button:active { filter: brightness(1.15); }
body.touch #stage .tile:active, body.touch #stage .chipbtn:active, body.touch #stage .lt-panel:active, body.touch #stage .menu-btn:active { filter: brightness(1.15) saturate(1.1); }
/* top-bar chips stay small to look at but take a 44 px finger (the hit area overhangs) */
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 .pause-chip { gap: .22em; padding-left: .6em; padding-right: .6em; }
.pause-chip i { display: block; width: .3em; height: .95em; border-radius: .08em; background: var(--white); box-shadow: 0 0 0 2px var(--ink); }
body.touch #stage.portrait .mini-logo { display: none; }
body.touch #stage.portrait .chip-more { display: none; }
body.touch #stage.portrait .chip-short { display: inline; }
body.touch #stage.portrait #topbar { gap: 16px; }
body.touch #stage .round-badge { font-size: max(30px, var(--fmin)); }

/* readable small text */
body.touch #stage .hint { font-size: max(18px, var(--fmin)); }
body.touch #stage .fo-status .hint, body.touch #stage .bid-cue .hint, body.touch #stage .pp .hint { font-size: max(26px, var(--fmin)); }
body.touch #stage .label { font-size: max(16px, var(--fmin)); line-height: 1.35; }
body.touch #stage .keycap { font-size: max(16px, var(--fmin)); }
body.touch #stage .mb-sub { font-size: max(13px, var(--fmin)); }
body.touch #stage .tc-why { font-size: max(14px, var(--fmin)); }
body.touch #stage .ticker { font-size: max(20px, var(--fmin)); min-width: 0; max-width: 1000px; }
body.touch #stage .stat span { font-size: max(20px, var(--fmin)); }
body.touch #stage .bank .bank-label { font-size: max(18px, var(--fmin)); }
body.touch #stage .ws-item .wi-q { font-size: max(22px, var(--fmin)); }
body.touch #stage .ws-item .wi-meta { font-size: max(11px, var(--fmin)); line-height: 1.3; }
body.touch #stage .jev-note b { font-size: max(20px, var(--fmin)); }
body.touch #stage .pod .tag { font-size: max(17px, var(--fmin)); }
body.touch #stage .pod .tname, body.touch #stage.compact .pod .tname { font-size: max(22px, var(--fmin)); }
body.touch #stage .slot .tb { font-size: max(16px, var(--fmin)); }
body.touch #stage .caption { font-size: max(30px, var(--fmin)); }
body.touch #stage .caption .who { font-size: max(22px, var(--fmin)); }
body.touch #stage .caption .heard { font-size: max(30px, var(--fmin)); }
body.touch #stage .caption .heard small { font-size: max(22px, var(--fmin)); }
body.touch #stage .caption.toast { font-size: max(30px, var(--fmin)); max-width: 1000px; white-space: normal; }
body.touch #stage .leader li::before { font-size: max(22px, var(--fmin)); }
body.touch #stage .cat-badge { font-size: max(30px, var(--fmin)); }
body.touch #stage .side-cue .team-flag { font-size: max(28px, var(--fmin)); }
body.touch #stage .howto-card p { font-size: max(26px, var(--fmin)); }
body.touch #stage .gauge .flag b small.off { font-size: max(24px, var(--fmin)); }
body.touch #stage .chipbtn kbd { font-size: max(16px, var(--fmin)); }
body.touch #stage .set-row .label { font-size: max(15px, var(--fmin)); }
body.touch #stage .seg button, body.touch #stage .settings-card .seg button { font-size: max(22px, var(--fmin)); }

/* face-off: both teams' names are buzzers, and so are the pods (TAP TO BUZZ! over them) */
body.touch #stage .buzz-cue .who { min-height: var(--tap); padding: 10px 34px 6px; font-size: max(36px, var(--fmin)); color: var(--white); -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; touch-action: none; }
body.touch #stage .buzz-cue .who:active { filter: brightness(1.3); transform: translateY(4px); }
body.touch #stage.portrait .buzz-cue { flex-wrap: wrap; justify-content: center; width: 1000px; row-gap: 18px; }
body.touch #stage.portrait .buzz-cue .buzz-call { order: -1; flex: 0 0 70%; margin: 0 15%; text-align: center; }
body.touch #stage.portrait .buzz-cue .who { flex: 1 1 0; min-width: 0; justify-content: center; }
body.touch #stage .pod { cursor: pointer; touch-action: none; }
body.touch #stage .pod.buzzable::after { content: "TAP TO BUZZ!"; position: absolute; inset: 0; display: grid; place-items: center; border-radius: 28px; background: rgba(18,7,38,.62); font-family: var(--display); font-size: 46px; color: var(--yellow); -webkit-text-stroke: 5px var(--ink); paint-order: stroke fill; text-shadow: 0 6px 0 var(--ink); animation: throb .6s ease-in-out infinite; pointer-events: none; z-index: 2; }
body.touch #stage .pod.buzzable > * { visibility: hidden; }   /* TAP TO BUZZ! alone, not on top of the name and score */
body.touch #stage .ask-hint { font-size: max(40px, var(--fmin)); }
body.touch #stage .slot-back .slot-rank { font-size: max(24px, var(--fmin)); }

/* the board: bigger tray chips (3 across in portrait, the board packs tighter to make room) */
body.touch #stage .chipbtn { height: auto; min-height: var(--tap); padding-top: 6px; padding-bottom: 6px; }
body.touch #stage .chipbtn span { -webkit-line-clamp: 3; }
body.touch #stage.portrait .tray { grid-template-columns: repeat(3, 1fr); }
body.touch #stage.portrait .chipbtn { font-size: max(28px, var(--fmin)); }
body.touch #stage.landscape.compact { grid-template-rows: 104px minmax(0, 1fr) auto; }
body.touch #stage.landscape.tray-up .caption { bottom: auto; top: 8px; }
body.touch #stage .lt-panel .lt-key { display: none; }

/* hot take: drag or tap the dial; −10 −1 beside NOPE, +1 +10 beside TOTALLY (under the gauge in portrait) */
.bid-pad { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.bid-pad .bp-group { position: absolute; bottom: 30px; display: flex; flex-direction: column; gap: 22px; pointer-events: auto; }
.bid-pad .bp-minus { right: calc(100% + 110px); }
.bid-pad .bp-plus { left: calc(100% + 110px); flex-direction: column-reverse; }
#stage.portrait .bid-pad { inset: auto; left: 50%; top: calc(100% + 26px); transform: translateX(-50%); display: flex; gap: 22px; }
#stage.portrait .bid-pad .bp-group { position: static; flex-direction: row; }
.nudge { cursor: pointer; touch-action: none; min-width: max(170px, var(--tap)); min-height: max(110px, var(--tap)); padding: 8px 18px 2px; font-family: var(--display); font-size: 50px; color: var(--white); -webkit-text-stroke: 4px var(--ink); paint-order: stroke fill; border: 6px solid var(--ink); border-radius: 28px; box-shadow: 0 10px 0 var(--ink), inset 0 5px 0 rgba(255,255,255,.45); transition: transform .06s, box-shadow .06s; }
.nudge.minus { background: linear-gradient(180deg, #9ff4ff, var(--cyan) 55%, #0086a3); }
.nudge.plus { background: linear-gradient(180deg, #fff27a, var(--yellow) 55%, #f5c400); }
.nudge:active { transform: translateY(6px); box-shadow: 0 4px 0 var(--ink), inset 0 5px 0 rgba(255,255,255,.45); }
#stage.portrait .nudge { min-width: max(180px, var(--tap)); }
.gauge.dialing svg { cursor: pointer; touch-action: none; }
.bid-lock { font-size: 40px; padding: 10px 34px 6px; white-space: nowrap; }
body.touch #stage .bid-cue { gap: 18px; }
body.touch #stage .bid-cue .team-flag { max-width: 340px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: max(30px, var(--fmin)); }
body.touch #stage .bid-cue .entry { min-width: 190px; font-size: 64px; }

/* solo GAME OVER: an arcade keyboard for the initials */
.go-save { font-size: 44px; padding: 14px 40px 10px; margin-left: 12px; }
.okbd { display: grid; grid-template-columns: repeat(14, max(var(--tap), 96px)); gap: 12px; justify-content: center; }
#stage.portrait .okbd { grid-template-columns: repeat(7, max(var(--tap), 118px)); }
.okey { cursor: pointer; height: max(var(--tap), 96px); padding: 0; font-family: var(--display); font-size: 52px; color: var(--ink); background: linear-gradient(180deg, #fff, #e4dcff); border: 5px solid var(--ink); border-radius: 18px; box-shadow: 0 7px 0 var(--ink); }
.okey:active { transform: translateY(5px); box-shadow: 0 2px 0 var(--ink); background: linear-gradient(180deg, #fff, var(--yellow)); }
.okey-del { background: linear-gradient(180deg, #ffa3d6, var(--magenta) 55%, #a3004f); color: var(--white); -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; }
body.touch #stage.landscape .gameover { gap: 14px; }
body.touch #stage.landscape .gameover .go-head { gap: 8px; }
body.touch #stage.landscape .gameover .go-entry { gap: 16px; }
body.touch #stage.landscape .gameover .setup-title { font-size: 64px; }
body.touch #stage.landscape .gameover .fin-name { font-size: 96px; }
body.touch #stage.landscape .gameover .initials .ch { width: 124px; height: 144px; font-size: 104px; }

/* settings: finger-sized sliders */
body.touch #stage .set-row input[type=range] { -webkit-appearance: none; appearance: none; height: var(--tap); background: transparent; }
body.touch #stage .set-row input[type=range]::-webkit-slider-runnable-track { height: 24px; border-radius: 999px; background: var(--plum2); border: 4px solid var(--ink); }
body.touch #stage .set-row input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: calc(var(--tap) * .8); height: calc(var(--tap) * .8); margin-top: calc(var(--tap) * -.4 + 8px); border-radius: 50%; background: var(--yellow); border: 5px solid var(--ink); box-shadow: 0 5px 0 var(--ink); }
body.touch #stage .set-row input[type=range]::-moz-range-track { height: 24px; border-radius: 999px; background: var(--plum2); border: 4px solid var(--ink); }
body.touch #stage .set-row input[type=range]::-moz-range-thumb { width: calc(var(--tap) * .8); height: calc(var(--tap) * .8); border-radius: 50%; background: var(--yellow); border: 5px solid var(--ink); }

/* long forms scroll with a finger instead of running off a phone */
body.touch #stage .screen.workshop { overflow-y: auto; overscroll-behavior: contain; padding-bottom: 40px; }
body.touch #stage .ws-form textarea { min-height: max(var(--tap), 120px); }
body.touch #stage .wi-msg, .wi-msg { font-family: var(--pixel); font-size: max(14px, var(--fmin)); line-height: 1.35; color: var(--orange); margin-top: 8px; }
body.touch #stage .menu-card { overscroll-behavior: contain; }
body.touch #stage .chip { font-size: max(20px, var(--fmin)); }
body.touch #stage .seg button { min-width: var(--tap); }
body.touch #stage.portrait .menu-card.settings-card { max-height: calc(100% - 140px); }
body.touch #stage.portrait .settings-card .set-row { grid-template-columns: 1fr; gap: 10px; }
.set-foot { display: flex; justify-content: center; flex: none; }
body.touch #stage .set-foot { position: sticky; bottom: -30px; z-index: 2; margin: 0 -44px -30px; padding: 26px 0 30px; background: linear-gradient(180deg, rgba(28,11,69,0), var(--plum) 35%); border-radius: 0 0 24px 24px; }
body.touch #stage.landscape .settings-card .set-row { grid-template-columns: 340px 1fr; }
body.touch #stage .settings-card .set-row .row { flex-wrap: wrap; }
body.touch #stage .buzz-test { font-size: max(30px, var(--fmin)); }
body.touch #stage .buzz-test kbd { font-size: max(26px, var(--fmin)); }
body.touch #stage .ws-answers .ans b { font-size: max(30px, var(--fmin)); }
body.touch #stage .setup-touch { max-width: 960px; text-align: center; }
body.touch #stage .pod .combo { font-size: max(30px, var(--fmin)); }

/* landscape phones are short: menus and setup pack tighter */
body.touch #stage .menu-btn { height: auto; min-height: 190px; padding: 12px 10px; }
body.touch #stage.landscape .menu { grid-template-columns: repeat(4, 440px); }
body.touch #stage.landscape .setup { gap: 20px; }
body.touch #stage.landscape .setup .setup-title { font-size: 72px; }
body.touch #stage.landscape .team-card { padding: 22px 34px 26px; gap: 12px; }
body.touch #stage.landscape .team-card .tc-mascot { font-size: 110px; }
body.touch #stage.landscape .setup-touch { max-width: 1800px; }
body.touch #stage.landscape .howto { gap: 18px; }
body.touch #stage.landscape .howto .setup-title { font-size: 70px; }
body.touch #stage.landscape .howto-card { padding: 20px 22px 22px; gap: 8px; }
body.touch #stage.landscape .howto-card .hc-icon { font-size: 56px; }
body.touch #stage.landscape .ticker { max-width: 1900px; white-space: nowrap; }
body.touch #stage .ws-item { grid-template-columns: minmax(0, 1fr) auto auto; }
body.touch #stage .ws-item .wi-q, body.touch #stage .ws-item .wi-meta { overflow-wrap: anywhere; }
body.touch #stage.landscape .ws-grid { grid-template-columns: 1100px 720px; }
body.touch #stage .chipbtn { font-size: max(30px, var(--fmin)); }
body.touch #stage .chipbtn span { -webkit-hyphens: auto; hyphens: auto; overflow-wrap: anywhere; }
body.touch #stage .go-head .hint, body.touch #stage.portrait .screen > .hint { max-width: 980px; text-align: center; }