/* The Late Show - host screen (show.html) and phone controller (play.html).
   Same palette as the rest of Blocks Against Boredom: night, cyan, magenta, purple, a gold accent.

   Motion follows the cinema layer (cinema.js / cinema.css): every animation here is gated on
   html[data-motion='cinematic'], and a hidden start state exists only under that gate, so calm and
   no-JS show every screen as it is (cinema.css's calm reset stills any transition). The broadcast
   layer (curtain, lights, cuts, card flips, the follow-spot) is near the end of this file. */
:root {
  --bg: #0b0620;
  --bg-2: #140a33;
  --ink: #fbf8ff;
  --muted: #bbb4dd;
  --pink: #ff3fd7;
  --cyan: #39f6ff;
  --purple: #8d5cff;
  --yellow: #ffe45c;
  --green: #5dffb3;
  --danger: #ff6767;
  --card: #fbf8ff;
  --card-ink: #140d26;
  --glass: rgba(20, 14, 46, 0.78);
  --line: rgba(255, 255, 255, 0.14);
  --font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body.show-page { min-height: 100vh; background: var(--bg); color: var(--ink); font-family: var(--font); -webkit-font-smoothing: antialiased; }
button, input, textarea { font: inherit; color: inherit; }
.hidden { display: none !important; }
.kicker { margin: 0; color: var(--cyan); font-size: 12px; font-weight: 1000; letter-spacing: 0.18em; text-transform: uppercase; }
.muted { color: var(--muted); }
.composed-answer { padding: 0 0.1em; border-radius: 0.2em; background: linear-gradient(180deg, transparent 52%, rgba(255, 196, 0, 0.5) 52%); color: inherit; font-weight: 1000; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.composed-answer.typing::after { content: "▌"; color: var(--pink); }
html[data-motion='cinematic'] .composed-answer.typing::after { animation: caret 0.7s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.censored { color: var(--muted); font-style: italic; }

/* ---- the studio (host screen) --------------------------------------------------------------------- */
/* Three rows: the bar, the studio (whatever height is left), and the foot, where the score chips share
   one row with the host controls instead of sitting under them. The foot is at least the old 96 px
   strip, and grows by a row when the chips wrap (eight or more players on a 1280 screen); the studio
   gives that height back, so a chip never covers Enzo's caption. Everything else on this page is
   fixed, so these four are the only grid items. */
body.host-screen { height: 100vh; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto minmax(0, 1fr) minmax(96px, auto); }
.show-bar, .show-main { grid-column: 1 / -1; }
.stage { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.backdrop { position: absolute; inset: 0; background:
  radial-gradient(ellipse 60% 45% at 50% 30%, rgba(141, 92, 255, 0.35), transparent 70%),
  radial-gradient(ellipse 40% 40% at 20% 80%, rgba(255, 63, 215, 0.18), transparent 70%),
  radial-gradient(ellipse 40% 40% at 80% 80%, rgba(57, 246, 255, 0.14), transparent 70%),
  linear-gradient(180deg, #120836 0%, #0b0620 60%, #07041a 100%); }
.neon-sign { position: absolute; top: 9vh; left: 50%; transform: translateX(-50%); font-size: clamp(28px, 4.6vw, 92px); font-weight: 1000; letter-spacing: 0.04em; font-style: italic; color: #ffd6f6; text-shadow: 0 0 6px #ff3fd7, 0 0 18px #ff3fd7, 0 0 44px rgba(255, 63, 215, 0.8); opacity: 0.16; white-space: nowrap; }
@keyframes neon-buzz { 0%, 92%, 100% { opacity: 0.16; } 93% { opacity: 0.05; } 95% { opacity: 0.2; } }
.spot { position: absolute; top: -20vh; width: 60vw; height: 140vh; background: conic-gradient(from 168deg at 50% 0%, transparent 0deg, rgba(255, 245, 210, 0.11) 10deg, rgba(255, 245, 210, 0.02) 20deg, transparent 24deg); mix-blend-mode: screen; transform-origin: 50% 0; }
.spot-a { left: -10vw; }
.spot-b { right: -10vw; }
@keyframes sweep-a { from { transform: rotate(-16deg); } to { transform: rotate(12deg); } }
@keyframes sweep-b { from { transform: rotate(14deg); } to { transform: rotate(-12deg); } }
.curtain { position: absolute; top: 0; bottom: 0; width: 8vw; background:
  linear-gradient(90deg, rgba(0, 0, 0, 0.55), transparent 40%, rgba(0, 0, 0, 0.35)),
  repeating-linear-gradient(90deg, #6b0f5c 0, #b51f8e 1.6vw, #4a0a44 3.2vw); box-shadow: 0 0 40px rgba(0, 0, 0, 0.6); }
.curtain.left { left: 0; border-bottom-right-radius: 60% 20%; }
.curtain.right { right: 0; border-bottom-left-radius: 60% 20%; transform: scaleX(-1); }
/* One bulb period wider than the stage on the left, so the chase can slide it by a period. */
.marquee { position: absolute; top: 0; left: -30px; right: 0; height: 18px; background: radial-gradient(circle at 9px 9px, #ffe9a8 0 3px, rgba(255, 228, 92, 0.35) 4px, transparent 6px) 0 0 / 30px 18px repeat-x; filter: drop-shadow(0 0 6px rgba(255, 228, 92, 0.7)); }
@keyframes chase { to { transform: translate3d(30px, 0, 0); } }
.floor { position: absolute; left: 0; right: 0; bottom: 0; height: 22vh; background: linear-gradient(180deg, transparent, rgba(141, 92, 255, 0.1)), repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.03) 0 2px, transparent 2px 9vw); }

.show-bar { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; padding: 22px 10vw 8px; }
.show-brand { display: flex; align-items: center; gap: 12px; }
.show-brand img { border-radius: 10px; }
.show-brand span { display: grid; line-height: 1.1; }
.show-brand strong { font-size: 15px; }
.show-brand em { color: var(--pink); font-style: normal; font-weight: 1000; letter-spacing: 0.08em; text-transform: uppercase; font-size: 12px; }
.show-segments { display: flex; gap: 8px; }
.seg { padding: 6px 12px; border-radius: 999px; background: rgba(255, 255, 255, 0.06); border: 1px solid var(--line); color: var(--muted); font-size: 13px; font-weight: 900; }
.seg.done { color: var(--green); border-color: rgba(93, 255, 179, 0.35); }
.seg.now { color: #12081f; background: var(--yellow); border-color: var(--yellow); box-shadow: 0 0 18px rgba(255, 228, 92, 0.5); }
.show-tools { display: flex; gap: 8px; justify-content: flex-end; align-items: center; }
.tool { width: 44px; height: 44px; border-radius: 14px; border: 1px solid var(--line); background: var(--glass); cursor: pointer; font-size: 19px; }
.tool:focus-visible, .show-btn:focus-visible, .phone-btn:focus-visible, .ctl:focus-visible { outline: 3px solid var(--cyan); outline-offset: 2px; }
.room-chip { padding: 9px 14px; border-radius: 999px; background: var(--glass); border: 1px solid rgba(57, 246, 255, 0.4); font-weight: 1000; letter-spacing: 0.12em; }

/* The one row is the studio's height, never its content's: Enzo's and the meter's canvases size their
   bitmaps from their own boxes, so a row sized by content grew a little with every tall board and
   pushed Enzo (and the podium) off the bottom of a 1280x800 screen. The page grid sizes the studio
   (minmax(0, 1fr)), never the board in it. */
.show-main { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(220px, 23vw) minmax(0, 1fr) minmax(70px, 6.5vw); grid-template-rows: minmax(0, 1fr); gap: 2vw; min-height: 0; padding: 0 10vw; }
.host-desk { display: grid; grid-template-rows: minmax(0, 1fr) auto; align-self: end; height: 100%; min-height: 0; }
.enzo { width: 100%; height: 100%; min-height: 0; display: block; filter: drop-shadow(0 18px 30px rgba(0, 0, 0, 0.5)); }
/* Enzo's captions live in their OWN strip under his desk - reserved space, never over the board. */
.caption { min-height: 4.6em; margin: 6px 0 0; padding: 12px 16px; border-radius: 16px; background: rgba(8, 5, 24, 0.82); border: 1px solid rgba(255, 197, 84, 0.45); color: #fff3d6; font-size: clamp(14px, 1.15vw, 22px); line-height: 1.3; font-weight: 700; opacity: 0.25; }
.caption.on { opacity: 1; }
/* "safe": a board taller than the studio starts at the top instead of spilling up under the bar. */
.show-board { display: flex; flex-direction: column; justify-content: center; justify-content: safe center; min-height: 0; min-width: 0; }
.laugh-col { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 10px; align-items: end; justify-items: center; padding-bottom: 8px; }
.laugh-sign { padding: 8px 10px; border-radius: 10px; border: 2px solid rgba(255, 63, 215, 0.35); color: rgba(255, 63, 215, 0.35); font-weight: 1000; letter-spacing: 0.16em; font-size: clamp(11px, 0.9vw, 16px); }
.laugh-sign.lit { color: #fff; background: var(--pink); border-color: #fff; box-shadow: 0 0 28px var(--pink), 0 0 60px rgba(255, 63, 215, 0.6); }
@keyframes sign-flash { 50% { filter: brightness(1.6); } }
.laugh-meter { width: 100%; height: 100%; min-height: 160px; }
.audience-count { margin: 0; color: var(--muted); font-size: 12px; text-align: center; }

.show-scores { position: relative; z-index: 2; grid-row: 3; grid-column: 1; align-self: end; min-width: 0; display: flex; gap: 10px; justify-content: center; align-content: flex-end; flex-wrap: wrap; padding: 10px 16px 16px 10vw; }
/* No host controls (the final frame): the chips take the strip between the curtains again. */
.host-controls:empty ~ .show-scores { padding-right: 10vw; }
.score-chip { position: relative; display: flex; align-items: center; gap: 8px; padding: 8px 14px 8px 8px; border-radius: 999px; background: var(--glass); border: 1px solid var(--line); }
.score-chip.leader { border-color: var(--yellow); box-shadow: 0 0 20px rgba(255, 228, 92, 0.3); }
.score-chip.is-judge { border-color: rgba(141, 92, 255, 0.8); }
.score-chip .who em { margin-left: 4px; padding: 1px 6px; border-radius: 999px; background: rgba(141, 92, 255, 0.4); font-style: normal; font-size: 10px; letter-spacing: 0.1em; }
.score-chip .pts { font-size: 18px; color: var(--yellow); }
.score-chip .gain { position: absolute; top: -14px; right: 6px; color: var(--green); font-weight: 1000; }
@keyframes gain-up { from { transform: translateY(8px); opacity: 0; } 20% { opacity: 1; } to { transform: translateY(-8px); opacity: 0; } }
.avatar { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(135deg, hsl(var(--hue, 300) 90% 60%), hsl(calc(var(--hue, 300) + 60) 90% 55%)); color: #12081f; font-weight: 1000; font-size: 14px; flex: none; }
.avatar.big { width: 64px; height: 64px; font-size: 28px; }
/* At most about three controls a row (two rows on air), so the chips keep the width: eight players
   then take one row of chips at 1920 and two at 1280. */
.host-controls { position: relative; z-index: 3; grid-row: 3; grid-column: 2; align-self: end; display: flex; flex-wrap: wrap; justify-content: flex-end; align-content: flex-end; gap: 8px; max-width: calc(340px + 2vw); padding: 0 2vw 16px 0; }
.ctl { padding: 10px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--glass); cursor: pointer; font-weight: 900; }
.ctl.danger { border-color: rgba(255, 103, 103, 0.6); }
/* The TV's notices under the bar, stacked in one column: the reconnect notice, the re-seat code and
   the host's status line each had their own fixed spot at the same place and covered each other. */
.tv-notices { position: fixed; z-index: 6; left: 50%; top: 78px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; width: max-content; max-width: calc(100vw - 32px); pointer-events: none; }
.host-status { margin: 0; padding: 0 12px; color: var(--yellow); font-weight: 800; text-align: center; text-shadow: 0 2px 8px #000; }
.host-status:empty { display: none; }
body.signal-lost .tv-notices::before { content: "Reconnecting to the studio…"; padding: 6px 12px; border-radius: 999px; background: rgba(255, 103, 103, 0.2); color: #ffd0d0; font-size: 13px; font-weight: 800; }

/* Board pieces. */
.show-prompt { margin: 0 auto; width: min(100%, 980px); padding: clamp(18px, 2.2vw, 40px); border-radius: clamp(18px, 1.8vw, 32px); background: linear-gradient(160deg, #fffaf4, #e6deff); color: var(--card-ink); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.6); }
.show-prompt .card-label { color: #6b3df5; font-size: clamp(11px, 0.8vw, 15px); font-weight: 1000; letter-spacing: 0.16em; }
.show-prompt-text { margin: 10px 0 0; font-size: clamp(24px, 2.9vw, 58px); line-height: 1.16; font-weight: 1000; letter-spacing: -0.01em; }
.show-prompt.slim .show-prompt-text { font-size: clamp(18px, 1.7vw, 32px); }
.show-prompt.composed .composed-answer { color: #3a1d00; }
.answer-meta { display: flex; align-items: center; justify-content: center; gap: 18px; margin: 22px 0 14px; }
.how { margin: 0; font-size: clamp(16px, 1.3vw, 24px); color: var(--muted); }
.how strong { color: var(--ink); }
.timer { --p: 1; position: relative; width: 64px; height: 64px; border-radius: 50%; background: conic-gradient(var(--yellow) calc(var(--p) * 360deg), rgba(255, 255, 255, 0.1) 0); display: grid; place-items: center; flex: none; }
.timer::before { content: ""; position: absolute; inset: 6px; border-radius: 50%; background: var(--bg-2); }
.timer span { position: relative; font-weight: 1000; font-size: 22px; }
.lineup { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.chip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 6px; border-radius: 999px; background: var(--glass); border: 1px solid var(--line); font-weight: 800; }
.chip.ok { border-color: rgba(93, 255, 179, 0.6); color: var(--green); }
.chip.judge { border-color: rgba(141, 92, 255, 0.7); }
.chip.ghost { padding: 10px 16px; color: var(--muted); font-weight: 700; }
.chip em { font-style: normal; color: var(--yellow); font-size: 11px; letter-spacing: 0.08em; }
.lineup.big .chip { font-size: 18px; }
@keyframes chip-pop { from { transform: scale(0.6); opacity: 0; } }
.reveal-dots { display: flex; gap: 8px; justify-content: center; margin-top: 18px; }
.reveal-dots span { width: 12px; height: 12px; border-radius: 50%; background: rgba(255, 255, 255, 0.18); }
.reveal-dots .done { background: var(--purple); }
.reveal-dots .now { background: var(--yellow); box-shadow: 0 0 14px var(--yellow); }
.pick-head { display: flex; align-items: center; justify-content: center; gap: 18px; margin: 16px 0 12px; }
.board-head { margin: 0; font-size: clamp(16px, 1.4vw, 26px); font-weight: 900; }
.answer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 14px; }
.answer-grid.small { margin-top: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.answer-tile { position: relative; margin: 0; padding: 18px 18px 14px; border-radius: 20px; background: linear-gradient(150deg, #19143a, #24104a 55%, #0d2133); border: 1px solid rgba(57, 246, 255, 0.25); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4); }
.answer-tile .composed-line { margin: 0; font-size: clamp(15px, 1.25vw, 24px); line-height: 1.25; font-weight: 700; }
.answer-tile .letter { position: absolute; top: -12px; left: -10px; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--yellow); color: #12081f; font-weight: 1000; }
.answer-tile footer { display: flex; gap: 12px; margin-top: 10px; color: var(--muted); font-size: 14px; }
.answer-tile .author { color: var(--cyan); font-weight: 900; }
.answer-tile.winner { background: linear-gradient(160deg, #fffaf4, #ffe9a8); color: var(--card-ink); border-color: var(--yellow); box-shadow: 0 0 0 3px rgba(255, 228, 92, 0.7), 0 30px 90px rgba(255, 228, 92, 0.25); }
.answer-tile.winner .composed-line { font-size: clamp(22px, 2.4vw, 46px); font-weight: 900; }
.answer-tile.winner .author { color: #6b3df5; font-size: clamp(16px, 1.3vw, 24px); }
.answer-tile.winner .composed-answer { color: #3a1d00; }
.answer-tile.is-censored { opacity: 0.5; }
.answer-tile.picked { outline: 3px solid var(--danger); }
/* A full studio fits the TV (show-host.js marks it .crowded at seven answers or players): three
   answers across in a smaller type under a slimmer block card; on the result the winner stays the
   star and the rest of the room's answers sit smaller under it; the lobby lists names two across. */
.phase-pick.crowded .answer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.phase-pick.crowded .answer-tile { padding: 16px 14px 10px 20px; } /* clear of the vote's letter badge */
.phase-result.crowded .answer-grid.small .answer-tile { padding: 12px 14px 10px; }
.phase-pick.crowded .answer-tile .composed-line { font-size: clamp(13px, 0.95vw, 18px); }
.phase-pick.crowded .show-prompt.slim { padding: clamp(12px, 1.4vw, 24px); }
.phase-pick.crowded .show-prompt.slim .show-prompt-text { font-size: clamp(16px, 1.3vw, 25px); }
.phase-pick.crowded .pick-head { margin: 10px 0; }
.answer-grid.small .answer-tile .composed-line { font-size: clamp(13px, 1vw, 19px); }
.phase-result.crowded .answer-tile.winner .composed-line { font-size: clamp(20px, 1.8vw, 34px); }
.phase-result.crowded .answer-grid.small .answer-tile .composed-line { font-size: clamp(12px, 0.9vw, 17px); }
.lobby-side h2.long { font-size: clamp(26px, 2.4vw, 46px); }
.lobby.crowded .lineup.big { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lobby.crowded .lineup.big .chip { min-width: 0; font-size: 15px; }
.chip .nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.show-scores.crowded .score-chip .nm { display: inline-block; max-width: 8.5em; vertical-align: bottom; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.winner-stack { position: relative; isolation: isolate; display: grid; gap: 14px; }
@keyframes push-in { from { transform: scale(0.82); opacity: 0; filter: blur(4px); } }
.points-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 16px 0 0; padding: 0; list-style: none; }
.points-list li { padding: 6px 12px; border-radius: 999px; background: rgba(93, 255, 179, 0.12); border: 1px solid rgba(93, 255, 179, 0.4); }
.points-list strong { color: var(--green); }
.points-list em { color: var(--muted); font-style: normal; font-size: 13px; }

.title-card { text-align: center; }
.title-card h1 { margin: 8px 0; font-size: clamp(44px, 6.4vw, 128px); line-height: 0.95; font-weight: 1000; letter-spacing: -0.03em; background: linear-gradient(90deg, #fff, #ffd6f6 40%, #b8f9ff); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 6px 30px rgba(255, 63, 215, 0.45)); }
.title-card.lightning h1 { background: linear-gradient(90deg, #fff7b0, #ffe45c, #39f6ff); -webkit-background-clip: text; background-clip: text; }
.title-card .sub { margin: 0; color: var(--muted); font-size: clamp(16px, 1.6vw, 30px); font-weight: 700; }
.board-message { text-align: center; }

.lobby { display: grid; grid-template-columns: minmax(260px, 0.8fr) minmax(0, 1fr); gap: 3vw; align-items: center; }
.join-card { padding: 22px; border-radius: 28px; background: rgba(255, 255, 255, 0.96); color: var(--card-ink); text-align: center; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5); }
.join-card .kicker { color: #6b3df5; }
.join-card .qr svg { width: min(100%, 300px); height: auto; margin: 10px auto 0; display: block; }
.join-url { margin: 8px 0 0; font-weight: 800; color: #4a3c7a; word-break: break-all; }
.room-code { display: flex; align-items: baseline; justify-content: center; gap: 10px; margin: 6px 0 0; font-size: clamp(30px, 3vw, 56px); font-weight: 1000; letter-spacing: 0.1em; color: var(--card-ink); }
.room-code small { color: #6b3df5; font-size: 0.32em; letter-spacing: 0.16em; text-transform: uppercase; }
.badge-18, .badge-friendly { margin: 6px 0 0; font-weight: 900; }
.lobby-side h2 { margin: 0; font-size: clamp(30px, 3.4vw, 64px); line-height: 1; }
.lobby-sub { margin: 8px 0 18px; color: var(--muted); font-size: clamp(14px, 1.2vw, 22px); }
.lobby-side .lineup { justify-content: flex-start; }
.lobby-count { color: var(--muted); }
.show-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 24px; border-radius: 16px; border: 1px solid var(--line); background: var(--glass); color: var(--ink); font-weight: 1000; font-size: 18px; cursor: pointer; text-decoration: none; }
.show-btn.primary { border: 0; background: linear-gradient(90deg, var(--pink), var(--purple)); box-shadow: 0 12px 34px rgba(255, 63, 215, 0.35); }
.show-btn[disabled] { opacity: 0.45; cursor: default; }
.show-btn.big { width: 100%; padding: 18px; font-size: 20px; }
.hint { color: var(--muted); font-size: 14px; }

.final-board { display: grid; gap: 18px; }
.podium { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: end; max-width: 860px; margin: 0 auto; width: 100%; }
.step { display: grid; justify-items: center; gap: 6px; padding: 16px 10px; border-radius: 18px 18px 6px 6px; background: linear-gradient(180deg, rgba(141, 92, 255, 0.45), rgba(57, 246, 255, 0.12)); border: 1px solid var(--line); }
.step.s1 { min-height: 250px; background: linear-gradient(180deg, rgba(255, 228, 92, 0.55), rgba(255, 63, 215, 0.2)); border-color: var(--yellow); }
.step.s2 { min-height: 200px; }
.step.s3 { min-height: 170px; }
.step strong { font-size: clamp(16px, 1.5vw, 28px); }
.step .pts { color: var(--yellow); font-weight: 1000; font-size: clamp(18px, 1.6vw, 30px); }
.step .place { color: var(--muted); font-weight: 900; }
.step.empty { visibility: hidden; }
@keyframes rise { from { transform: translateY(60px); opacity: 0; } }
.supers { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.super { padding: 10px 16px; border-radius: 16px; background: var(--glass); border: 1px solid rgba(255, 228, 92, 0.4); text-align: center; }
.super-label { display: block; color: var(--yellow); font-size: 12px; font-weight: 1000; letter-spacing: 0.12em; text-transform: uppercase; }
.best-lines { max-width: 980px; margin: 0 auto; }
.best-lines .composed-line { margin: 6px 0 0; font-size: clamp(14px, 1.1vw, 20px); }
.best-lines em { color: var(--cyan); font-style: normal; font-weight: 800; }
.final-actions { display: flex; gap: 12px; justify-content: center; }

.reaction-layer { position: fixed; left: 34vw; right: 18vw; bottom: 0; height: 70vh; z-index: 4; pointer-events: none; overflow: hidden; }
.float-reaction { position: absolute; bottom: -40px; font-size: clamp(28px, 2.6vw, 52px); }
html[data-motion='cinematic'] .float-reaction { animation: float-up 2.5s cubic-bezier(.2, .8, .4, 1) forwards; }
@keyframes float-up { to { transform: translate(var(--drift), -62vh) rotate(var(--spin)); opacity: 0; } }

.setup-card { position: fixed; z-index: 5; top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(720px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow: auto; padding: 28px; border-radius: 28px; background: rgba(14, 9, 36, 0.94); border: 1px solid rgba(255, 63, 215, 0.35); box-shadow: 0 40px 120px rgba(0, 0, 0, 0.7), 0 0 60px rgba(255, 63, 215, 0.15); }
.setup-card h1 { margin: 6px 0; font-size: clamp(36px, 5vw, 64px); line-height: 1; font-style: italic; color: #ffe2f8; text-shadow: 0 0 18px rgba(255, 63, 215, 0.8); }
.setup-lede { color: var(--muted); margin: 0 0 16px; }
.field { display: grid; gap: 8px; margin: 0 0 14px; padding: 0; border: 0; }
.field > span, .field legend { color: var(--muted); font-size: 13px; font-weight: 900; letter-spacing: 0.04em; margin-bottom: 4px; }
.field input[type="text"], .field textarea { width: 100%; padding: 12px 14px; border-radius: 14px; border: 1px solid rgba(57, 246, 255, 0.3); background: rgba(3, 3, 10, 0.55); }
.field.check { display: flex; gap: 10px; align-items: center; }
.field.check input { accent-color: var(--cyan); }
/* Option pills: one shape for every choice on the setup screen (Running time, Tonight's cards, The
   Finale). The radio is drawn as a dot that fills gold when chosen, so the choice reads without :has()
   (older TV browsers); where :has() works the whole pill lights and carries the focus ring. */
.pill { display: inline-flex; align-items: center; gap: 10px; margin: 0 8px 8px 0; padding: 9px 16px 9px 11px; border-radius: 999px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.04); cursor: pointer; font-weight: 700; line-height: 1.25; }
.pill input[type="radio"] { -webkit-appearance: none; appearance: none; flex: none; width: 18px; height: 18px; margin: 0; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.45); background: transparent; cursor: pointer; }
.pill input[type="radio"]:checked { border-color: var(--yellow); background: var(--yellow); box-shadow: inset 0 0 0 3px #1b1240; }
.pill input[type="radio"]:focus-visible { outline: 3px solid var(--cyan); outline-offset: 2px; }
.pill:has(input:checked) { border-color: var(--yellow); background: rgba(255, 228, 92, 0.14); box-shadow: inset 0 0 0 1px var(--yellow); }
@supports selector(:has(*)) {
  .pill:has(input:focus-visible) { outline: 3px solid var(--cyan); outline-offset: 2px; }
  .pill input[type="radio"]:focus-visible { outline: none; }
}
.setup-note { color: var(--muted); font-size: 13px; text-align: center; }
/* The host's status line while the setup card is up, in the card's flow under its heading (floating
   over the studio it covered the kicker and the title). On air the floating .host-status speaks. */
.setup-status { margin: -4px 0 12px; color: var(--yellow); font-weight: 800; }
.setup-status:empty { display: none; }
body.on-air .setup-card { display: none; }
body[data-phase="setup"] .show-main .show-board { visibility: hidden; }

/* Smaller host windows (a laptop, a stream preview). */
@media (max-width: 1100px) {
  .show-main { grid-template-columns: minmax(160px, 24vw) minmax(0, 1fr) 56px; padding: 0 3vw; }
  .show-bar { padding: 16px 3vw 6px; }
  .curtain { width: 3vw; }
  .lobby { grid-template-columns: 1fr; }
  .show-scores { padding-left: 3vw; }
  .host-controls:empty ~ .show-scores { padding-right: 3vw; }
}
/* A laptop-height host window (1280x800) with a full stage. Ten score chips took three rows and the
   last answer row sat under them (measured in Chromium: 33 px on the judge board, 130 px on a
   ten-answer vote, 84 px on the result, which also ran up under the bar). There a full studio gets
   shorter chips, a smaller clock and tighter tiles, a ten-answer board four across, and the other
   answers on the result three across. Taller screens keep the 1920x1080 layout, which fits. */
@media (min-width: 721px) and (max-height: 900px) {
  .show-scores.crowded { gap: 6px; padding-top: 6px; padding-bottom: 10px; }
  .show-scores.crowded .score-chip { gap: 6px; padding: 4px 10px 4px 4px; font-size: 14px; }
  .show-scores.crowded .score-chip .avatar { width: 24px; height: 24px; font-size: 12px; }
  .show-scores.crowded .score-chip .pts { font-size: 15px; }
  .phase-pick.crowded .show-prompt.slim { padding: 10px 14px; }
  .phase-pick.crowded .pick-head { margin: 6px 0 8px; }
  .phase-pick.crowded .timer { width: 48px; height: 48px; }
  .phase-pick.crowded .timer span { font-size: 18px; }
  .phase-pick.crowded .answer-tile { padding: 12px 12px 8px 18px; }
  .phase-pick.crowded .answer-tile .composed-line { line-height: 1.2; }
  .phase-pick.crowded .answer-tile footer:empty { display: none; }
  .phase-pick.crowded .answer-grid.n10 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .phase-result.crowded .answer-tile.winner { padding: 12px 16px 10px; }
  .phase-result.crowded .answer-tile.winner .composed-line { font-size: clamp(17px, 1.5vw, 28px); }
  .phase-result.crowded .points-list { margin-top: 8px; }
  .phase-result.crowded .answer-grid.small { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 8px; }
}
@media (max-width: 720px) {
  body.host-screen { display: block; overflow: auto; height: auto; }
  .show-main { display: block; height: auto; padding: 0 16px 16px; }
  /* The scores follow the board down the page, clear of the host controls fixed at the bottom. */
  .show-scores, .host-controls:empty ~ .show-scores { margin: 0 16px; padding: 0 0 120px; }
  .host-desk { height: 260px; }
  .laugh-col { display: none; }
  /* The brand on its own row and the tools under it: on air the room chip plus four tools are wider
     than a phone, and they pushed the page sideways. The host controls wrap inside the screen too. */
  .show-bar { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 12px 16px; }
  .show-tools { justify-content: flex-start; flex-wrap: wrap; }
  .host-controls { position: fixed; left: 16px; right: 16px; bottom: 16px; max-width: none; padding: 0; justify-content: flex-end; pointer-events: none; }
  .host-controls > * { pointer-events: auto; }
  .show-segments { display: none; }
}

/* ---- the phone ------------------------------------------------------------------------------------- */
body.phone { min-height: 100dvh; background: radial-gradient(ellipse at 50% 0%, rgba(141, 92, 255, 0.3), transparent 60%), var(--bg); }
.phone-join { max-width: 480px; margin: 0 auto; padding: 24px 16px calc(24px + env(safe-area-inset-bottom)); }
.join-brand { text-align: center; margin-bottom: 18px; }
.join-brand img { border-radius: 14px; }
.join-brand h1 { margin: 4px 0 0; font-size: 40px; font-style: italic; color: #ffe2f8; text-shadow: 0 0 16px rgba(255, 63, 215, 0.8); }
.join-form .field input { font-size: 20px; padding: 14px 16px; }
#join-code { letter-spacing: 0.14em; text-transform: uppercase; font-weight: 1000; }
.join-preview { display: grid; gap: 4px; margin: -4px 0 14px; padding: 0 4px; }
.join-preview:empty { display: none; }
.join-preview em { color: var(--muted); font-style: normal; }
.join-gate { display: flex; align-items: center; gap: 10px; justify-content: center; margin-top: 10px; }
.phone-btn { display: flex; width: 100%; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 12px 18px; margin: 10px 0 0; border-radius: 16px; border: 1px solid var(--line); background: var(--glass); color: var(--ink); font-weight: 1000; font-size: 17px; cursor: pointer; text-decoration: none; }
.phone-btn.primary { border: 0; background: linear-gradient(90deg, var(--pink), var(--purple)); box-shadow: 0 10px 30px rgba(255, 63, 215, 0.35); }
.phone-btn.ghost { background: transparent; }
.phone-btn.big { min-height: 60px; font-size: 19px; }
.phone-btn[disabled] { opacity: 0.45; }

.phone-stage { min-height: 100dvh; display: flex; flex-direction: column; }
.phone-bar { position: sticky; top: 0; z-index: 6; display: flex; align-items: center; gap: 10px; padding: calc(10px + env(safe-area-inset-top)) 16px 10px; background: rgba(11, 6, 32, 0.96); border-bottom: 1px solid var(--line); }
.phone-bar .room { color: var(--cyan); font-weight: 1000; letter-spacing: 0.1em; font-size: 13px; }
.phone-bar .role { flex: 1; text-align: center; font-weight: 800; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.phone-bar .score { color: var(--yellow); font-size: 18px; }
.phone-bar .left { min-width: 2.6em; text-align: right; color: var(--muted); font-weight: 900; font-variant-numeric: tabular-nums; }
.phone-bar .left.urgent { color: var(--pink); }
/* Messages sit over the BAR (never over the pinned block card or the hand). */
.phone-toast { position: fixed; top: env(safe-area-inset-top); left: 0; right: 0; z-index: 8; margin: 0; padding: 12px 16px; background: #1d1150; color: var(--ink); font-weight: 800; font-size: 14px; text-align: center; transform: translateY(-110%); border-bottom: 1px solid rgba(255, 228, 92, 0.5); }
.phone-toast.on { transform: none; }
/* The block card, pinned under the bar on every phone screen: the question is always in view. */
.phone-prompt { position: sticky; top: calc(46px + env(safe-area-inset-top)); z-index: 5; margin: 10px 12px 0; padding: 12px 14px; border-radius: 16px; background: linear-gradient(160deg, #fffaf4, #e6deff); color: var(--card-ink); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5); }
.phone-prompt .card-label { color: #6b3df5; font-size: 10px; font-weight: 1000; letter-spacing: 0.14em; }
.phone-prompt p { margin: 4px 0 0; font-size: 18px; line-height: 1.25; font-weight: 900; }
.phone-main { flex: 1; padding: 14px 12px calc(120px + env(safe-area-inset-bottom)); }
body.phone[data-phase="answer"] .phone-main, body.phone[data-phase="write"] .phone-main { padding-bottom: calc(190px + env(safe-area-inset-bottom)); }
/* The VIP's drawer (.vip-tools, its top 140 px up) sits above the pad: the last answer and its censor
   button scroll clear of it instead of ending under it. */
body.phone.vip-on:not([data-phase="answer"]):not([data-phase="write"]) .phone-main { padding-bottom: calc(156px + env(safe-area-inset-bottom)); }
.phone-title, .phone-lobby, .phone-locked, .phone-result, .phone-final { text-align: center; padding: 18px 6px; }
.phone-title h2, .phone-lobby h2, .phone-locked h2, .phone-result h2, .phone-final h2 { margin: 6px 0; font-size: 28px; line-height: 1.1; }
.phone-title p, .phone-lobby p { color: var(--muted); }
.look { font-size: 18px; color: var(--ink) !important; }
.mini-lineup { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin: 14px 0; }
.mini-lineup span { padding: 6px 10px; border-radius: 999px; background: var(--glass); border: 1px solid var(--line); font-weight: 800; font-size: 14px; }
.mini-lineup .me { border-color: var(--cyan); color: var(--cyan); }
.hand-head { margin: 4px 4px 10px; color: var(--muted); font-weight: 800; }
.hand-head strong { color: var(--yellow); }
.hand-list { display: grid; gap: 10px; }
.hand-card { position: relative; width: 100%; padding: 14px 14px 14px 16px; border-radius: 16px; border: 1px solid rgba(57, 246, 255, 0.22); background: linear-gradient(150deg, #19143a, #24104a 55%, #0d2133); text-align: left; font-size: 16px; line-height: 1.3; cursor: pointer; }
.hand-card.picked { border-color: var(--yellow); box-shadow: 0 0 0 2px rgba(255, 228, 92, 0.6); }
.hand-card .order { position: absolute; top: -8px; right: -6px; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--yellow); color: #12081f; font-weight: 1000; }
.hand-card .composed-answer, .choice .composed-answer, .phone-locked .composed-answer, .phone-result .composed-answer, .phone-write .composed-answer, .gallery-offer .composed-answer { color: var(--yellow); background: linear-gradient(180deg, transparent 60%, rgba(255, 228, 92, 0.25) 60%); }
.hand-action { position: fixed; left: 0; right: 0; bottom: 0; z-index: 7; padding: 10px 12px calc(12px + env(safe-area-inset-bottom)); background: rgba(11, 6, 32, 0.97); border-top: 1px solid var(--line); box-shadow: 0 -14px 30px rgba(0, 0, 0, 0.45); }
.hand-action .phone-btn { margin: 0; }
.hand-preview { margin: 0 4px 8px; font-size: 14px; line-height: 1.3; color: var(--muted); }
.composed-line.big { font-size: 22px; line-height: 1.25; font-weight: 800; }
.phone-write textarea { width: 100%; padding: 14px; border-radius: 16px; border: 1px solid rgba(57, 246, 255, 0.35); background: rgba(3, 3, 10, 0.6); font-size: 18px; resize: none; }
.write-meta { margin: 6px 4px; color: var(--muted); font-size: 13px; }
.write-error { margin: 6px 4px; color: #ffb3b3; font-weight: 800; }
.write-error:empty { display: none; }
.choice-list { display: grid; gap: 10px; }
.choice-row { display: flex; gap: 8px; align-items: stretch; }
.choice { position: relative; flex: 1; display: flex; gap: 10px; align-items: flex-start; padding: 14px; border-radius: 16px; border: 1px solid rgba(57, 246, 255, 0.22); background: linear-gradient(150deg, #19143a, #24104a 55%, #0d2133); text-align: left; font-size: 16px; line-height: 1.3; cursor: pointer; }
.choice.picked { border-color: var(--green); box-shadow: 0 0 0 2px rgba(93, 255, 179, 0.6); }
.choice.mine { opacity: 0.55; }
.choice em { position: absolute; top: 6px; right: 10px; color: var(--muted); font-size: 11px; font-style: normal; }
.choice .letter { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--yellow); color: #12081f; font-weight: 1000; font-size: 13px; }
.choice .letter:empty { display: none; }
.choice.censored { color: var(--muted); }
.censor { flex: none; width: 46px; border-radius: 14px; border: 1px solid rgba(255, 103, 103, 0.5); background: rgba(255, 103, 103, 0.12); }
.phone-result.won h2 { color: var(--yellow); }
.phone-result .by { color: var(--cyan); font-weight: 800; }
.total { font-size: 18px; }
.total strong { color: var(--yellow); font-size: 24px; }
.super { margin: 8px auto; display: inline-block; }
.gallery-offer { margin: 18px 0; padding: 14px; border-radius: 16px; background: var(--glass); border: 1px solid var(--line); }
.vip-tools { position: fixed; right: 12px; bottom: calc(96px + env(safe-area-inset-bottom)); z-index: 7; display: flex; gap: 6px; align-items: center; }
.vip-tools:empty { display: none; }
.vip-tools span { color: var(--yellow); font-size: 11px; font-weight: 1000; letter-spacing: 0.12em; }
.vip-tools button { padding: 8px 10px; border-radius: 12px; border: 1px solid var(--line); background: rgba(20, 14, 46, 0.95); font-size: 13px; font-weight: 900; }
.react-pad { position: fixed; left: 0; right: 0; bottom: 0; z-index: 6; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; padding: 10px 12px calc(12px + env(safe-area-inset-bottom)); background: rgba(11, 6, 32, 0.96); border-top: 1px solid var(--line); }
.react { height: 64px; border-radius: 20px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.06); font-size: 32px; cursor: pointer; touch-action: manipulation; }
@keyframes react-pop { 40% { transform: scale(1.18); filter: brightness(1.5) drop-shadow(0 0 10px rgba(255, 63, 215, 0.7)); } }
body.signal-lost .phone-bar::after { content: "Reconnecting…"; color: #ffb3b3; font-size: 12px; font-weight: 800; }

/* A paused show: everything waits. */
body.host-screen.paused .show-board::after { content: "⏸ PAUSED"; position: fixed; left: 50%; top: 46%; transform: translate(-50%, -50%); z-index: 4; padding: 18px 34px; border-radius: 22px; background: rgba(8, 5, 24, 0.9); border: 2px solid var(--yellow); color: var(--yellow); font-size: clamp(28px, 3vw, 56px); font-weight: 1000; letter-spacing: 0.14em; }
body.phone.paused .phone-bar::before { content: "⏸ Paused"; color: var(--yellow); font-weight: 1000; font-size: 13px; }

/* Tonight's best closers (daily board). */
.board-title { display: block; margin: 14px 0 6px; color: var(--yellow); font-size: 12px; font-weight: 1000; letter-spacing: 0.14em; text-transform: uppercase; }
.daily-board { margin: 0; padding-left: 20px; text-align: left; color: var(--ink); }
.daily-board li { margin: 4px 0; font-size: 14px; line-height: 1.35; }
.daily-board em { color: var(--muted); font-style: normal; font-size: 12px; }
.board-rank { margin: 0 0 8px; color: var(--yellow); font-weight: 1000; }

/* ---- The TV's first screen (review m1): two columns, the CTA always in view, Enzo uncovered. ---- */
/* One column of option rows: each group's pills sit on one line where the card is wide enough and
   wrap whole (never a broken segment) where it is not. */
#setup-form { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; }
#setup-form fieldset.field { display: flex; flex-wrap: wrap; gap: 8px; align-content: flex-start; }
#setup-form fieldset.field legend { flex-basis: 100%; }
#setup-form .pill { margin: 0; }
#setup-form .show-btn.big { position: sticky; bottom: 0; z-index: 1; margin-top: 4px; }
.setup-card .setup-lede { margin-bottom: 12px; }
@media (min-width: 1101px) {
  /* Centred on the board, between Enzo's desk and the laugh meter. */
  .setup-card { left: 58.25vw; width: min(760px, 50vw); padding: 24px 28px; }
  .setup-card h1 { font-size: clamp(36px, 4vw, 56px); }
}
/* "Your open shows" on the setup screen (review M4): resume or end, so the 2-show cap never locks a
   host out. */
.my-shows { margin: 0 0 14px; padding: 12px 14px; border-radius: 16px; border: 1px solid rgba(255, 228, 92, 0.45); background: rgba(255, 228, 92, 0.08); }
.my-shows p { margin: 0 0 8px; font-weight: 900; }
.my-show { display: flex; align-items: center; gap: 10px; justify-content: space-between; padding: 6px 0; border-top: 1px solid var(--line); }
.my-show span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.my-show div { display: flex; gap: 8px; flex: none; }

/* Seats: the host's door list (review M2/m2): kick in the lobby, rename or hide, re-seat. */
.seats-panel { position: fixed; z-index: 7; right: 2vw; bottom: 72px; width: min(460px, calc(100vw - 32px)); max-height: 70vh; overflow: auto; padding: 16px; border-radius: 20px; background: rgba(14, 9, 36, 0.97); border: 1px solid var(--line); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6); }
.seats-panel header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.seats-panel h2 { margin: 0; font-size: 20px; }
.seat-row { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-top: 1px solid var(--line); }
.seat-row .who { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; unicode-bidi: isolate; }
.seat-row .ctl { padding: 6px 10px; font-size: 13px; }
.seats-panel h3 { margin: 12px 0 4px; color: var(--muted); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; }
.reseat-banner { padding: 12px 20px; border-radius: 16px; background: rgba(14, 9, 36, 0.96); border: 1px solid var(--yellow); font-weight: 900; font-size: clamp(16px, 1.6vw, 24px); }
.reseat-banner strong { color: var(--yellow); letter-spacing: 0.12em; }
/* Names isolate their direction: an RTL name never reorders the text around it. */
.who, .chip, .score-chip, .podium strong, .super strong, .best-lines em, .author { unicode-bidi: isolate; }

/* ---- Mobile controls (2026-10, mobile lane): 44 px targets on phones and touch screens, a
   VIP drawer a thumb can hit, and a short-screen (phone on its side) phone layout. ------------------ */
@media (pointer: coarse), (max-width: 720px) {
  .pill, .show-btn, .phone-btn, .tool { min-height: 44px; }
  .pill { padding: 10px 16px 10px 12px; }
  .pill input[type="checkbox"], .pill input[type="radio"], .field.check input { width: 22px; height: 22px; accent-color: var(--cyan); flex: none; }
  .field.check { min-height: 44px; }
  .rejoin > summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; }
  .ctl, .seat-row .ctl, .my-show .show-btn { min-height: 44px; min-width: 44px; padding: 8px 12px; }
  .censor { min-height: 44px; min-width: 44px; }
  .join-gate .tool { min-width: 44px; min-height: 44px; }
}
/* The VIP drawer (pause / skip / censor): 44 px buttons, 10 px apart, above the reaction pad. */
.vip-tools { gap: 10px; }
.vip-tools button { min-width: 44px; min-height: 44px; padding: 8px 12px; border-radius: 14px; }
/* Phone on its side: the bar and the pinned block card stay one line each, the lists use the width. */
@media (max-height: 500px) and (orientation: landscape) {
  .phone-prompt { margin: 6px 12px 0; padding: 6px 12px; top: calc(40px + env(safe-area-inset-top)); }
  .phone-prompt p { font-size: 16px; margin-top: 2px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .phone-bar { padding-top: calc(4px + env(safe-area-inset-top)); padding-bottom: 4px; }
  .hand-list, .choice-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .phone-main { padding-bottom: calc(110px + env(safe-area-inset-bottom)); }
  body.phone[data-phase="answer"] .phone-main, body.phone[data-phase="write"] .phone-main { padding-bottom: calc(130px + env(safe-area-inset-bottom)); }
  .hand-action { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; }
  .hand-action .phone-btn { width: auto; min-width: 170px; }
  .react-pad { grid-template-columns: repeat(4, 1fr); gap: 6px; padding-top: 6px; }
  .react { height: 48px; font-size: 26px; }
  .vip-tools { bottom: calc(66px + env(safe-area-inset-bottom)); }
  body.phone.vip-on:not([data-phase="answer"]):not([data-phase="write"]) .phone-main { padding-bottom: calc(124px + env(safe-area-inset-bottom)); }
}
/* A tip line on the phone join/hand screens (mobile.js) sits in the page flow. */
.phone-main .bab-coach, .phone-join .bab-coach { margin: 0 4px 10px; }

/* ==== The broadcast (cinema layer) ===================================================================
   Everything below that moves is gated on html[data-motion='cinematic']. Decoration (the curtain,
   the follow-spot) is aria-hidden in the markup and never takes a pointer. Only transform, opacity,
   filter and clip-path animate; entrances use `backwards` fill so the element's own style is the end
   state, and a board that is rebuilt mid-entrance passes --t0 (a negative delay) to carry on. */

/* -- The house curtain: closed as the TV loads, it gathers into the side drapes. ------------------- */
.house-curtain { display: none; }
html[data-motion='cinematic'] .house-curtain { display: block; position: fixed; inset: 0; z-index: 28; overflow: hidden; pointer-events: none; --gather: 0.16; }
.house-curtain__drape { position: absolute; top: 0; bottom: 0; width: 50.5vw; pointer-events: none; background:
  linear-gradient(180deg, rgba(0, 0, 0, 0.42), transparent 26%, transparent 78%, rgba(0, 0, 0, 0.5)),
  linear-gradient(90deg, rgba(0, 0, 0, 0.5), transparent 18%, transparent 82%, rgba(0, 0, 0, 0.55)),
  repeating-linear-gradient(90deg, #6b0f5c 0, #b51f8e 1.6vw, #4a0a44 3.2vw);
  box-shadow: inset 0 -5px 0 rgba(255, 214, 120, 0.55), 0 0 60px rgba(0, 0, 0, 0.7); }
.house-curtain__drape.left { left: 0; transform-origin: 0 50%; }
.house-curtain__drape.right { right: 0; transform-origin: 100% 50%; }
html[data-motion='cinematic'] .house-curtain__drape { animation: show-curtain-open 2.2s var(--ease-cine-in-out) 0.35s both; }
@keyframes show-curtain-open {
  0% { transform: none; opacity: 1; }
  82% { opacity: 1; }
  100% { transform: scaleX(var(--gather)); opacity: 0; }
}

/* -- Stage lights: they start crossed on the curtain gap and swing out into their sweep. ----------- */
html[data-motion='cinematic'] .spot-a { animation: show-spot-in-a 2.6s var(--ease-cine) 0.5s backwards, sweep-a 11s ease-in-out infinite alternate; }
html[data-motion='cinematic'] .spot-b { animation: show-spot-in-b 2.6s var(--ease-cine) 0.5s backwards, sweep-b 13s ease-in-out infinite alternate; }
@keyframes show-spot-in-a { from { opacity: 0; rotate: -34deg; } 30% { opacity: 1; } }
@keyframes show-spot-in-b { from { opacity: 0; rotate: 34deg; } 30% { opacity: 1; } }
html[data-motion='cinematic'] .marquee { animation: chase 1.2s steps(2) infinite; }
/* The sign strikes like a neon tube, then settles into its buzz (same resting opacity). */
html[data-motion='cinematic'] .neon-sign { animation: show-neon-on 1.5s steps(1) 1.2s backwards, neon-buzz 6s 2.7s infinite; }
@keyframes show-neon-on { 0% { opacity: 0; } 12% { opacity: 0.22; } 18% { opacity: 0.02; } 30% { opacity: 0.26; } 36% { opacity: 0.06; } 52% { opacity: 0.2; } }

/* -- The setup card arrives as the curtain parts. ------------------------------------------------- */
html[data-motion='cinematic'] .setup-card { animation: show-arrive 1.1s var(--ease-cine) 0.8s backwards; }
@keyframes show-arrive { from { opacity: 0; scale: 0.94; filter: blur(12px); } }
html[data-motion='cinematic'] .setup-card[data-returned] { animation: none; }

/* No night sky (html[data-cine-sky]) on the TV: the studio's back wall is opaque, so the sky barely
   showed, and every phase change is a cut, during which cinema.css names the sky and its picture
   paints over the whole stage. The film grain (html[data-cine-grain]) is on. */

/* -- Segment title cards: the kicker wipes on, the title comes out of the light, the line follows. - */
html[data-motion='cinematic'] .title-card .kicker { animation: show-wipe 700ms var(--ease-cine-in-out) 120ms backwards; }
html[data-motion='cinematic'] .title-card h1 { animation: show-title-in 1.1s var(--ease-cine) 160ms backwards; }
html[data-motion='cinematic'] .title-card .sub { animation: show-rise 800ms var(--ease-cine) 620ms backwards; }
@keyframes show-wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes show-title-in {
  from { opacity: 0; transform: scale(1.2); filter: blur(16px) drop-shadow(0 6px 30px rgba(255, 63, 215, 0)); }
  to { opacity: 1; transform: none; filter: blur(0) drop-shadow(0 6px 30px rgba(255, 63, 215, 0.45)); }
}
@keyframes show-rise { from { opacity: 0; transform: translate3d(0, 18px, 0); } }

/* -- Cards: the block card is dealt, each answer flips over on the reveal, the ballot flips in. ---- */
html[data-motion='cinematic'] .phase-answer .show-prompt { animation: show-deal 850ms var(--ease-cine) var(--t0, 0ms) backwards; }
html[data-motion='cinematic'] .phase-reveal .show-prompt { animation: show-flip 800ms var(--ease-cine) backwards; }
html[data-motion='cinematic'] .phase-pick .answer-tile { animation: show-flip 760ms var(--ease-cine) backwards; animation-delay: calc(var(--t0, 0ms) + 200ms + var(--i, 0) * 110ms); }
@keyframes show-deal { from { opacity: 0; transform: perspective(1400px) translate3d(0, 46px, 0) rotateX(26deg) scale(0.96); } }
@keyframes show-flip { from { opacity: 0; transform: perspective(1600px) rotateY(-88deg); } 40% { opacity: 1; } }

/* -- The result: the follow-spot hunts during the drumroll and lands as the winner does. ---------- */
.follow-spot { position: absolute; z-index: -1; left: 1%; right: 1%; top: -30%; bottom: -30%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255, 238, 196, 0.3), rgba(255, 238, 196, 0.1) 62%, transparent); }
.follow-spot::before { content: ""; position: absolute; left: 22%; right: 22%; bottom: 50%; height: 140vh; pointer-events: none;
  background: linear-gradient(0deg, rgba(255, 238, 196, 0.13), rgba(255, 238, 196, 0.03) 60%, transparent);
  clip-path: polygon(44% 0, 56% 0, 100% 100%, 0 100%); }
html[data-motion='cinematic'] .follow-spot { animation: show-follow 1.3s var(--ease-cine-in-out) backwards; }
@keyframes show-follow {
  0% { opacity: 0; transform: translate3d(-48vw, 0, 0) scale(0.5); }
  22% { opacity: 1; }
  62% { transform: translate3d(7vw, 0, 0) scale(0.72); }
}
html[data-motion='cinematic'] .phase-result .answer-tile.winner { animation: push-in 900ms cubic-bezier(.2, 1.4, .3, 1) 0.95s backwards; }
html[data-motion='cinematic'] .phase-result .answer-tile.winner.cine-sheen[data-sheen='mount']::after { animation-delay: 1.5s; }
html[data-motion='cinematic'] .phase-result .points-list { animation: show-rise 700ms var(--ease-cine) 1.6s backwards; }
html[data-motion='cinematic'] .phase-result .answer-grid.small .answer-tile { animation: show-rise 700ms var(--ease-cine) backwards; animation-delay: calc(1.8s + var(--i, 0) * 90ms); }

/* -- Scores and the board's beats. ---------------------------------------------------------------- */
html[data-motion='cinematic'] .score-chip .gain { animation: gain-up 1.6s ease var(--t0, 0ms) forwards; }
html[data-motion='cinematic'] .chip.pop { animation: chip-pop 420ms cubic-bezier(.2, 1.6, .4, 1) backwards; }
html[data-motion='cinematic'] .laugh-sign.lit { animation: sign-flash 0.5s steps(2) 4; }
html[data-motion='cinematic'] .caption { transition: opacity 240ms ease; }
html[data-motion='cinematic'] .step { animation: rise 900ms cubic-bezier(.2, 1.2, .3, 1) backwards; }
html[data-motion='cinematic'] .step.s2 { animation-delay: 300ms; }
html[data-motion='cinematic'] .step.s1 { animation-delay: 600ms; }
html[data-motion='cinematic'] .final-board .supers { animation: show-rise 700ms var(--ease-cine) 1.3s backwards; }
html[data-motion='cinematic'] .final-board .best-lines { animation: show-rise 700ms var(--ease-cine) 1.5s backwards; }
html[data-motion='cinematic'] .final-board .final-actions { animation: show-rise 700ms var(--ease-cine) 1.7s backwards; }

/* -- Cuts (BAB_CINEMA.cut): the chrome around the screen holds still while the screen changes. Named
   only for the life of a cut (html[data-vt]), as cinema.css asks. ----------------------------------- */
html[data-vt] .show-bar { view-transition-name: show-bar; }
html[data-vt] .host-desk { view-transition-name: show-host-desk; }
html[data-vt] .laugh-col { view-transition-name: show-laugh-col; }
html[data-vt] .show-scores { view-transition-name: show-scores; }
html[data-vt] .host-controls { view-transition-name: show-host-controls; }
html[data-vt] .phone-bar { view-transition-name: phone-bar; }
html[data-vt] .phone-prompt { view-transition-name: phone-prompt; }
html[data-vt] .react-pad { view-transition-name: phone-react-pad; }
html[data-vt] .vip-tools { view-transition-name: phone-vip-tools; }
/* Holding still means showing the new chrome at once: no morph, no cross-fade (a caption that changed
   length would otherwise ghost two copies of itself for the length of the fade). */
::view-transition-group(show-bar), ::view-transition-group(show-host-desk), ::view-transition-group(show-laugh-col),
::view-transition-group(show-scores), ::view-transition-group(show-host-controls), ::view-transition-group(phone-bar),
::view-transition-group(phone-prompt), ::view-transition-group(phone-react-pad), ::view-transition-group(phone-vip-tools),
::view-transition-new(show-bar), ::view-transition-new(show-host-desk), ::view-transition-new(show-laugh-col),
::view-transition-new(show-scores), ::view-transition-new(show-host-controls), ::view-transition-new(phone-bar),
::view-transition-new(phone-prompt), ::view-transition-new(phone-react-pad), ::view-transition-new(phone-vip-tools) { animation: none; }
::view-transition-old(show-bar), ::view-transition-old(show-host-desk), ::view-transition-old(show-laugh-col),
::view-transition-old(show-scores), ::view-transition-old(show-host-controls), ::view-transition-old(phone-bar),
::view-transition-old(phone-prompt), ::view-transition-old(phone-react-pad), ::view-transition-old(phone-vip-tools) { display: none; }

/* -- Presses: tactile on touch and mouse alike, with no hover in it. Calm keeps the light, drops the
   squash. ----------------------------------------------------------------------------------------- */
:is(.phone-btn, .hand-card, .choice, .react, .censor, .vip-tools button, .tool, .show-btn, .ctl, .pill) { -webkit-tap-highlight-color: transparent; }
:is(.phone-btn, .hand-card, .choice, .react, .censor, .vip-tools button, .tool, .show-btn, .ctl, .pill):active:not([disabled]) { filter: brightness(1.2); }
html[data-motion='cinematic'] :is(.phone-btn, .hand-card, .choice, .react, .censor, .vip-tools button, .tool, .show-btn, .ctl, .pill) { transition: transform 220ms var(--ease-spring), filter 160ms ease; }
html[data-motion='cinematic'] :is(.phone-btn, .hand-card, .choice, .react, .censor, .vip-tools button, .tool, .show-btn, .ctl, .pill):active:not([disabled]) { transform: scale(0.96); transition-duration: 70ms; }
html[data-motion='cinematic'] .react.pop { animation: react-pop 260ms ease; }
html[data-motion='cinematic'] .phone-toast { transition: transform 260ms var(--ease-cine); }

/* -- The phone: a hand is dealt, a win lands. ----------------------------------------------------- */
html[data-motion='cinematic'] .hand-card { animation: show-deal-small 460ms var(--ease-cine) backwards; animation-delay: calc(var(--i, 0) * 45ms); }
@keyframes show-deal-small { from { opacity: 0; transform: translate3d(0, 22px, 0) scale(0.97); } }
html[data-motion='cinematic'] .phone-result.won h2 { animation: show-win 700ms var(--ease-spring) backwards; }
@keyframes show-win { from { opacity: 0; transform: scale(0.6); } }
html[data-motion='cinematic'] .join-brand h1 { animation: show-neon-title 1.3s steps(1) 0.2s backwards; }
@keyframes show-neon-title { 0% { opacity: 0.15; } 14% { opacity: 1; } 20% { opacity: 0.3; } 34% { opacity: 1; } 40% { opacity: 0.5; } 56% { opacity: 1; } }