/* The browser version's displays, over the 3D studio, in the Windows game's
   UiTheme: violet panels in a gold frame with a purple glow, gold headings,
   mint for pieces ready to move, candy seat colours. */
:root {
  --violet: rgba(23, 10, 51, 0.94);
  --violet-deep: rgba(14, 6, 32, 0.94);
  --gold: #ffcc5c;
  --pink: #ff52b8;
  --cyan: #59d9ff;
  --ink: #0a0519;
  --lav: #c7ccf2;
  --mint: #66ffc7;
  --waiting: #ffcc5c;
  --gone: #737090;
  --hot: #ff4d59;
  --text: #f4efff;
  --glow: 0 0 18px rgba(168, 64, 255, 0.45);
  --display: "Lilita One", "Arial Rounded MT Bold", "Trebuchet MS", sans-serif;
  --body: "Nunito", ui-rounded, "Segoe UI", system-ui, sans-serif;
  --glyph: "Noto Sans Symbols 2", "Segoe UI Symbol", "DejaVu Sans", sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; margin: 0; }
/* A pinch on a phone or tablet never zooms the page (over the board the camera takes it): a zoomed
   page can pan the menu button and the mini-map off the screen. Panels still scroll. */
body { background: #6f63b8; color: var(--text); font: 15px/1.5 var(--body); overflow: hidden; touch-action: pan-x pan-y; }
a { color: var(--gold); text-underline-offset: 3px; }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
h1, h2 { font-family: var(--display); font-weight: 400; letter-spacing: 0.01em; margin: 0; text-wrap: balance; }
p { margin: 0; }
kbd { font: 800 11px/1 var(--body); border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 4px; padding: 2px 5px; margin-left: 4px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.stage-host { position: fixed; inset: 0; touch-action: none; }
.stage-host canvas { display: block; width: 100%; height: 100%; cursor: grab; }
.stage-host canvas:active { cursor: grabbing; }

/* The loading screen (index.html, js/loading.js): the show's marquee on its
   own stage, one bar for the whole wait, and a tip. It fades once the studio is in. */
.loading { position: fixed; inset: 0; z-index: 100; display: grid; place-content: center; justify-items: center; gap: 26px; padding: 24px;
  background: radial-gradient(ellipse at 50% 42%, #3f2d8f 0%, #22144d 55%, #120a2b 100%); transition: opacity 0.6s ease; }
.loading.done { opacity: 0; pointer-events: none; }
.loading-logo { width: min(450px, 80vw); height: auto; animation: marquee 2.4s ease-in-out infinite alternate; }
.loading-bar { width: min(400px, 76vw); height: 14px; border-radius: 999px; background: rgba(10, 5, 25, 0.65); border: 2px solid var(--gold);
  overflow: hidden; box-shadow: 0 0 14px rgba(255, 204, 92, 0.3); }
.loading-bar i { display: block; height: 100%; width: 0; transition: width 0.3s ease-out;
  background: linear-gradient(90deg, #ffb833 0%, #ffe9a8 50%, #ffb833 100%); background-size: 200% 100%; animation: bar-shine 1.4s linear infinite; }
.loading-tip { max-width: min(520px, 86vw); min-height: 3em; text-align: center; font: 700 15px/1.5 var(--body); color: #ebe6ff; }
@keyframes marquee { from { filter: drop-shadow(0 0 12px rgba(255, 204, 92, 0.25)); } to { filter: drop-shadow(0 0 30px rgba(255, 204, 92, 0.6)); } }
@keyframes bar-shine { from { background-position: 100% 0; } to { background-position: -100% 0; } }

.card { background: var(--violet); border: 3px solid var(--gold); border-radius: 22px; padding: 14px 18px; box-shadow: var(--glow); }
.eyebrow { font: 800 11px/1.2 var(--body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); }
.muted { color: var(--lav); font-size: 14px; }
.row { display: flex; flex-wrap: wrap; gap: 8px; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; font: 800 14px/1.2 var(--body); color: var(--text);
  background: #2c2670; border: 2px solid var(--gold); border-radius: 14px; padding: 10px 16px; cursor: pointer; text-decoration: none; }
.btn:hover:not(:disabled) { filter: brightness(1.15); }
.btn:disabled { opacity: 0.5; cursor: default; }
.btn.show { background: #c42a7a; box-shadow: 0 0 14px rgba(255, 82, 184, 0.45); }

/* ---- lobby -------------------------------------------------------------------------- */
.lobby { position: fixed; left: 16px; top: calc(16px + env(safe-area-inset-top, 0px)); width: min(420px, calc(100% - 32px));
  display: grid; gap: 14px; max-height: calc(100% - 32px); overflow: auto; }
.lobby h1 { font-size: 34px; line-height: 1.05; }
/* Setting up a show: two choices, each a pair of options, then one button that says what it finds. */
.setup { display: grid; gap: 12px; padding: 12px; border-radius: 16px; background: rgba(13, 8, 32, 0.35); border: 1px solid rgba(255, 255, 255, 0.12); }
.choice { display: grid; gap: 6px; }
.choice-label { font: 800 11px/1 var(--body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); }
.seg { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.seg .opt { display: grid; gap: 3px; align-content: start; text-align: left; padding: 9px 11px; border-radius: 12px; cursor: pointer;
  font: inherit; color: var(--text); background: rgba(13, 8, 32, 0.55); border: 2px solid rgba(199, 204, 242, 0.25);
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s; }
.seg .opt:hover { border-color: rgba(255, 204, 92, 0.6); }
.seg .opt b { font: 400 18px/1.1 var(--display); letter-spacing: 0.02em; }
.seg .opt small { font-size: 12px; font-weight: 600; line-height: 1.3; color: var(--lav); }
.seg .opt[aria-checked="true"] { border-color: var(--gold); background: #2c2670; box-shadow: 0 0 12px rgba(255, 204, 92, 0.35); }
.seg .opt[aria-checked="true"] b { color: var(--gold); }
.seg .opt[aria-checked="true"] small { color: #f7e9ff; }
.lobby .go { padding: 13px 16px; font: 400 21px/1.1 var(--display); letter-spacing: 0.02em; }
/* Sound and screen: settings, on their own, as switches. */
.settings { display: grid; gap: 8px; border-top: 1px solid rgba(255, 255, 255, 0.15); padding-top: 12px; }
.settings h2 { font: 800 11px/1 var(--body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); }
.toggles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; }
.toggle { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--text); cursor: pointer; }
.toggle input { appearance: none; margin: 0; flex: none; position: relative; width: 34px; height: 20px; border-radius: 999px; cursor: pointer;
  background: rgba(255, 255, 255, 0.18); transition: background 0.15s; }
.toggle input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: transform 0.15s; }
.toggle input:checked { background: var(--pink); }
.toggle input:checked::after { transform: translateX(14px); }
/* How they're getting on: rating and level (and what the last match did to them). */
.standing { display: grid; gap: 4px; font-size: 14px; }
.standing p { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.standing b { font: 400 20px/1 var(--display); color: var(--gold); letter-spacing: 0.02em; }
.standing .xp-bar { align-self: center; flex: 1 1 60px; max-width: 120px; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.14); overflow: hidden; }
.standing .xp-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--pink), var(--gold)); }
.standing .change { font: 800 13px/1 var(--body); margin-left: 6px; }
.standing .change.up { color: var(--mint); }
.standing .change.down { color: #ff9aa2; }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--lav); cursor: pointer; }
.check input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--pink); }
.check b { color: var(--text); }
.queue { display: grid; gap: 8px; border-top: 1px solid rgba(255, 255, 255, 0.15); padding-top: 12px; }
.queue h2 { font-size: 22px; color: var(--gold); }
/* The tournament panel: under the show buttons, as on the game's Play Online screen. */
.tourney { display: grid; gap: 6px; border-top: 2px solid rgba(255, 204, 92, 0.35); padding-top: 12px; }
.tourney h2 { font-size: 22px; line-height: 1.1; }
.tourney .row { margin-top: 4px; }
.link-status { font-size: 12px; color: var(--lav); }
.notice { font-size: 14px; color: #ffd0d6; background: rgba(255, 77, 89, 0.14); border-radius: 10px; padding: 8px 10px; }
.stage-error { position: fixed; left: 16px; right: 16px; bottom: 16px; }

/* ---- match: the frame ----------------------------------------------------------------- */
.hud { position: fixed; inset: 0; pointer-events: none; }
.hud > *, .hud .top-right > *, .hud .bottom > * { pointer-events: auto; }
.hud .top-right, .hud .bottom { pointer-events: none; }
/* Hosted shows. The host's lobby: who's waiting, with their camera and microphone. */
.host-waiting { display: grid; gap: 6px; padding: 0; margin: 0; list-style: none; }
.host-waiting li { display: flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 10px; background: rgba(13, 8, 32, 0.6); }
.host-waiting .name { flex: 1; min-width: 0; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.host-waiting .pill { font: 800 11px/1 var(--body); padding: 4px 7px; border-radius: 999px; color: var(--lav); border: 1px solid rgba(199, 204, 242, 0.35); }
.host-waiting .pill.on { color: #0a2a18; background: var(--mint); border-color: var(--mint); }
/* The host's card, the contestants' ready marks and the host's interview buttons. */
.host-card { --seat: var(--gold); }
.ready-mark { color: var(--mint); font: 900 15px/1 var(--body); }
.hc-onair { flex: none; width: 24px; height: 24px; padding: 0; border-radius: 50%; border: 2px solid rgba(255, 204, 92, 0.5);
  background: rgba(13, 8, 32, 0.7); font-size: 11px; line-height: 1; cursor: pointer; }
.hc-onair.on { background: var(--hot); border-color: #fff; box-shadow: 0 0 12px var(--hot); }
.hc-onair[aria-disabled="true"] { opacity: 0.35; filter: grayscale(1); cursor: not-allowed; }
/* A contestant's pre-show card: who's hosting, Ready, the countdown, who's on air. */
.pre-show { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -40%); width: min(420px, calc(100% - 32px));
  display: grid; gap: 8px; justify-items: center; text-align: center; }
.pre-host { font: 30px/1.1 var(--display); color: var(--gold); text-shadow: 0 3px 0 #59148c; }
.pre-count { font: 96px/1 var(--display); color: #fff; text-shadow: 0 0 24px var(--pink), 0 4px 0 #59148c; animation: pre-count 1s ease-out infinite; }
@keyframes pre-count { from { transform: scale(1.25); opacity: 0.6; } to { transform: scale(1); opacity: 1; } }
.on-air-you { font: 900 14px/1 var(--body); color: #fff; background: var(--hot); padding: 7px 12px; border-radius: 999px; box-shadow: 0 0 14px var(--hot); }
/* The host's console, along the bottom: the start, who's heard, the view, their own camera and microphone. */
.host-console { display: grid; gap: 8px; padding: 10px 14px; flex: none; width: min(560px, calc(100vw - 32px)); }
.hc-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.hc-start { font-size: 18px; padding: 10px 18px; }
.hc-note { font: 700 13px/1.2 var(--body); color: var(--lav); }
.hc-live { font: 900 15px/1 var(--body); color: var(--hot); letter-spacing: 0.08em; }
.hc-chip { font: 800 13px/1.2 var(--body); color: var(--text); background: rgba(13, 8, 32, 0.7); border: 2px solid rgba(255, 204, 92, 0.45);
  border-radius: 999px; padding: 6px 12px; cursor: pointer; }
.hc-chip.on { border-color: var(--gold); background: rgba(255, 204, 92, 0.18); color: var(--gold); }
.hc-chip.interview { border-color: var(--hot); background: rgba(255, 77, 89, 0.22); color: #fff; }
.hc-view { display: flex; align-items: center; gap: 6px; font: 800 13px/1 var(--body); color: var(--lav); }
/* The home page's broadcast: out or off, and the switcher, whose shot on air is lit red like a tally light. */
.hc-tally { font: 900 13px/1 var(--body); color: #fff; background: var(--hot); border-radius: 6px; padding: 5px 8px; letter-spacing: 0.06em;
  box-shadow: 0 0 12px var(--hot); }
.hc-chip.go-live { border-color: var(--hot); color: #fff; }
.hc-link { font: 800 13px/1.2 var(--body); color: var(--gold); }
.hc-cut { font: 800 13px/1.2 var(--body); color: var(--text); background: rgba(13, 8, 32, 0.7); border: 2px solid rgba(199, 204, 242, 0.35);
  border-radius: 8px; padding: 6px 10px; cursor: pointer; }
select.hc-cut { max-width: 190px; }
.hc-cut.on { border-color: var(--gold); color: var(--gold); }
.hc-cut.live { border-color: var(--hot); background: rgba(255, 77, 89, 0.3); color: #fff; box-shadow: 0 0 10px rgba(255, 77, 89, 0.6); }
.hc-view select { font: 700 13px/1.2 var(--body); color: var(--text); background: var(--violet-deep); border: 2px solid rgba(255, 204, 92, 0.45); border-radius: 10px; padding: 5px 8px; }
/* The instant replay of the player's knockout, framed like television's: the match's displays step aside for letterbox
   bars, a blinking REPLAY tally and a caption in the colour of whoever did it. */
.hud.replaying > :not(.replay) { visibility: hidden; }
.replay { position: absolute; inset: 0; pointer-events: none; }
.replay-bar { position: absolute; left: 0; right: 0; height: 9vh; background: #000; animation: replay-bars 0.45s ease-out; }
.replay-bar-top { top: 0; transform-origin: top; }
.replay-bar-bottom { bottom: 0; transform-origin: bottom; }
@keyframes replay-bars { from { transform: scaleY(0); } }
.replay-tally { position: absolute; left: 18px; top: calc(9vh + 14px); display: flex; align-items: center; gap: 10px;
  font: 24px/1 var(--display); letter-spacing: 0.08em; color: #fff; text-shadow: 0 2px 8px #000; }
.replay-tally .dot { width: 16px; height: 16px; border-radius: 50%; background: var(--hot); box-shadow: 0 0 14px var(--hot);
  animation: replay-tally 1.1s steps(2, jump-none) infinite; }
@keyframes replay-tally { to { opacity: 0.2; } }
.replay-third { position: absolute; left: 50%; bottom: calc(9vh + 16px); transform: translateX(-50%); width: min(560px, calc(100% - 32px));
  border-color: var(--seat); text-align: center; animation: replay-third 0.5s 0.3s ease-out backwards; }
.replay-line { font: 26px/1.2 var(--display); color: var(--text); margin-top: 2px; }
@keyframes replay-third { from { opacity: 0; transform: translate(-50%, 20px); } }
.replay-skip { position: absolute; right: 18px; top: calc(9vh + 10px); pointer-events: auto; background: var(--violet); border-color: var(--gold); }
@media (max-width: 640px) {
  .replay-tally { font-size: 18px; }
  .replay-line { font-size: 19px; }
}

/* A hosted show's program page (/play/?watch=key), what its stream to Twitch shows: a TV show's graphics over the studio,
   nothing to press. Sized by the frame. */
.watch-card { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(420px, calc(100% - 32px)); text-align: center;
  display: grid; gap: 8px; justify-items: center; }
.bc { position: absolute; inset: 0; pointer-events: none; }
.bc-host-full { position: absolute; inset: 0; background: #000; }
.bc-host-full video, .bc-host-box video { display: block; width: 100%; height: 100%; object-fit: cover; }
.bc-host-box { position: absolute; right: 3vmin; bottom: 3vmin; width: min(30vw, 320px); aspect-ratio: 16 / 9; overflow: hidden;
  border: 3px solid var(--gold); border-radius: 14px; background: #000; box-shadow: var(--glow); }
.bc-bug { position: absolute; left: 3vmin; top: 3vmin; display: flex; align-items: center; gap: 10px; }
.bc-live { font: 900 clamp(11px, 2.2vmin, 17px)/1 var(--body); color: #fff; background: var(--hot); border-radius: 6px; padding: 5px 9px;
  letter-spacing: 0.08em; box-shadow: 0 0 14px var(--hot); }
.bc-brand { font: clamp(14px, 3.2vmin, 28px)/1 var(--display); color: var(--gold); text-shadow: 0 2px 0 #59148c, 0 0 14px rgba(0, 0, 0, 0.6); }
.bc-clock { position: absolute; right: 3vmin; top: 3vmin; display: flex; align-items: baseline; gap: 10px; background: var(--violet);
  border: 2px solid var(--gold); border-radius: 12px; padding: 6px 12px; box-shadow: var(--glow); }
.bc-round { font: 900 clamp(10px, 1.8vmin, 14px)/1 var(--body); color: var(--lav); letter-spacing: 0.08em; text-transform: uppercase; }
.bc-time { font: clamp(16px, 3.6vmin, 32px)/1 var(--display); color: #fff; }
.bc-standings { position: absolute; left: 3vmin; top: calc(3vmin + clamp(28px, 6vmin, 46px)); width: min(250px, 30vw); margin: 0; padding: 0;
  list-style: none; display: grid; gap: 3px; }
.bc-standings li { display: flex; align-items: center; gap: 8px; background: var(--violet); border-left: 4px solid var(--seat); border-radius: 8px;
  padding: 3px 8px; font: 800 clamp(10px, 1.7vmin, 13px)/1.25 var(--body); }
.bc-standings li.out { opacity: 0.45; }
.bc-standings li.on-air { box-shadow: 0 0 0 2px var(--hot); }
.bc-host-shot .bc-standings { display: none; }   /* cut to the host: they fill the frame, as television's presenter does */
.bc-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bc-count { color: var(--gold); }
.bc-lower { position: absolute; left: 3vmin; bottom: 3vmin; max-width: calc(100% - 6vmin - 100px); background: var(--violet);
  border: 3px solid var(--seat, var(--gold)); border-radius: 12px; padding: 8px 14px; font: clamp(15px, 3.4vmin, 30px)/1.1 var(--display); color: #fff;
  box-shadow: var(--glow); }
.bc-lower b { display: block; margin-bottom: 3px; font: 900 clamp(9px, 1.6vmin, 13px)/1 var(--body); color: var(--gold); letter-spacing: 0.08em; }
.bc-lower.small { font-size: clamp(12px, 2.4vmin, 20px); }
.host-banner.bc-call { top: 20%; width: min(640px, 84%); }
.bc-off { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(460px, calc(100% - 32px)); text-align: center;
  display: grid; gap: 8px; justify-items: center; pointer-events: auto; }
/* A small frame: the bug, the clock and the host; the standings would cover the show. */
@media (max-width: 560px) {
  .bc-standings { display: none; }
  .bc-host-box { width: 38vw; }
}

.seat-disc { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; flex: none;
  background: var(--seat); border: 1px solid rgba(255, 255, 255, 0.55); box-shadow: 0 0 6px var(--seat);
  font: 800 13px/1 var(--body); color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8); }
.seat-disc.big { width: 54px; height: 54px; font: 400 26px/1 var(--display); box-shadow: 0 0 14px var(--seat); }
.seat-disc.small { width: 20px; height: 20px; font-size: 11px; }

/* Down the left: who you are, what's happening, the contestants. */
.left-col { position: absolute; left: 14px; top: 10px; bottom: 10px; width: 340px; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; pointer-events: none; }
.left-col > * { pointer-events: auto; }
.me-card { position: relative; width: 340px; flex: none; display: flex; align-items: center; gap: 12px; padding: 12px 16px;
  border-color: var(--seat); box-shadow: 0 0 18px color-mix(in srgb, var(--seat) 55%, transparent); }
.me-text { min-width: 0; flex: 1; }
.me-name { font: 400 26px/1.05 var(--display); color: color-mix(in srgb, var(--seat) 55%, #fff); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  padding-right: 50px; }   /* a long name stops short of the YOU badge */
.me-sub { font: 800 11px/1.4 var(--body); letter-spacing: 0.06em; color: var(--gold); margin-top: 4px; }
.you-pill { position: absolute; right: 12px; top: 10px; font: 800 11px/1 var(--body); color: var(--ink); background: var(--gold); border-radius: 999px; padding: 4px 9px; box-shadow: 0 0 8px rgba(255, 204, 92, 0.6); }
.status-bar { width: 340px; flex: none; border-radius: 16px; padding: 8px 14px; font-size: 13px; line-height: 1.35; }
.status-bar b { font-weight: 800; letter-spacing: 0.06em; color: var(--gold); }
.status-bar span { color: var(--lav); }

/* The contestants, down the left. */
.leaderboard { width: 236px; min-height: 0; flex: 0 1 auto; overflow: hidden auto; margin-top: 4px; display: flex; flex-direction: column; }
.leaderboard h2 { align-self: center; font: 800 13px/1 var(--body); letter-spacing: 0.06em; color: var(--gold); margin-bottom: 6px;
  background: rgba(14, 6, 32, 0.8); border-radius: 999px; padding: 5px 12px; }
.leaderboard ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; }
.chip-row { display: flex; align-items: center; gap: 7px; min-height: 38px; padding: 3px 6px 3px 8px; border-radius: 10px;
  background: rgba(23, 13, 48, 0.88); border: 1px solid color-mix(in srgb, var(--seat) 85%, transparent); border-left-width: 5px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.35); }
.chip-row.me { background: rgba(51, 26, 87, 0.95); border-color: var(--gold); border-width: 2px 2px 2px 5px; box-shadow: 0 0 10px rgba(255, 191, 77, 0.35); }
.chip-row.out { opacity: 0.6; background: rgba(13, 10, 20, 0.7); border-color: rgba(77, 71, 92, 0.5); }
.chip-row.out .seat-disc { background: #403d4d; box-shadow: none; }
.chip-row .who { flex: 1; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; }
.chip-row .line { display: flex; align-items: center; gap: 5px; }
.chip-row .name { flex: 1; min-width: 0; font: 800 13px/1.2 var(--body); color: #ebe6ff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chip-row.me .name { color: var(--gold); }
.chip-row .bot { font: 800 9px/1 var(--body); color: var(--lav); border: 1px solid rgba(199, 204, 242, 0.4); border-radius: 4px; padding: 2px 3px; }
.chip-row .crown { font: 13px/1 var(--glyph); color: #ffe073; }
.chip-row .crown.lost { color: rgba(128, 122, 140, 0.6); }
.chip-row .count { min-width: 30px; text-align: right; font: 800 15px/1 var(--body); color: #fff; font-variant-numeric: tabular-nums; }
.chip-row.out .count { font-size: 11px; color: #ff7373; }
.chip-row .pts { font: 800 10px/1 var(--body); color: var(--gold); white-space: nowrap; font-variant-numeric: tabular-nums; }
.chip-row .bar { height: 4px; border-radius: 2px; background: rgba(255, 255, 255, 0.1); overflow: hidden; }
.chip-row .bar i { display: block; height: 100%; background: color-mix(in srgb, var(--seat) 85%, #fff); }

/* The round clock, top and centre: the headline of the screen. */
.round-clock { position: absolute; left: 50%; top: 10px; transform: translateX(-50%); width: min(580px, calc(100% - 760px));
  min-width: 360px; display: grid; grid-template-columns: 1fr auto; column-gap: 14px; padding: 10px 22px 12px; }
.rc-name { font: 400 34px/1 var(--display); color: var(--gold); text-shadow: 0 0 1px #59148c, 0 2px 0 #59148c, 0 -1px 0 #59148c, 2px 0 0 #59148c, -2px 0 0 #59148c; }
.rc-pace { font-size: 13px; color: var(--lav); margin-top: 6px; }
.rc-right { text-align: right; }
.rc-time { font: 900 50px/0.95 var(--body); color: #fff; font-variant-numeric: tabular-nums; text-shadow: 0 3px 0 var(--ink), 0 0 6px var(--ink); }
.rc-caption { font-size: 13px; color: var(--lav); }
.rc-bar { grid-column: 1 / -1; height: 8px; border-radius: 4px; background: rgba(5, 3, 15, 0.9); overflow: hidden; margin-top: 8px; }
.rc-bar i { display: block; height: 100%; background: var(--gold); border-radius: 4px; transition: width 0.2s linear; }
.round-clock.hot .rc-time { color: var(--hot); animation: tick 1s ease-in-out infinite; }
.round-clock.hot .rc-bar i, .round-clock.ring .rc-bar i { background: var(--hot); }
.round-clock.ring .rc-time { color: #ff9e8c; }
.round-clock.ring .rc-pace { color: #ffb3a8; font-weight: 800; }
.round-clock.pink .rc-time { color: #ffdb73; }
.round-clock.pink .rc-bar i { background: var(--pink); }
@keyframes tick { 0%, 100% { transform: scale(1); } 12% { transform: scale(1.12); } }

.stage-card { position: absolute; top: 10px; left: calc(50% + min(290px, calc((100% - 760px) / 2)) + 12px); width: 180px; padding: 8px 12px;
  border-radius: 16px; text-align: center; }
.stage-name { font: 400 16px/1.15 var(--display); color: var(--gold); margin-top: 2px; }
.stage-line { font-size: 11px; line-height: 1.3; color: var(--lav); margin-top: 3px; }

/* The round's rule, once the prize wheel lands: beside the round clock, in the rule's colour. */
.rule-card { position: absolute; top: 10px; left: calc(50% + min(290px, calc((100% - 760px) / 2)) + 12px); width: 220px; padding: 8px 12px;
  border-radius: 16px; text-align: center; border-color: var(--rule); box-shadow: 0 0 16px color-mix(in srgb, var(--rule) 50%, transparent);
  animation: rule-in 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
.rule-name { font: 400 20px/1.15 var(--display); color: color-mix(in srgb, var(--rule) 70%, #fff); margin-top: 2px; text-shadow: 0 2px 0 var(--ink); }
@keyframes rule-in { from { transform: scale(0.5); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* The prize wheel: drawn by the stage on its own canvas, over everything. */
.prize-wheel { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 40; pointer-events: none; }

/* The host's banner, under the round clock, clear of the columns either side (366px each way). */
.host-banner { position: absolute; left: 50%; top: 150px; transform: translateX(-50%); width: min(760px, calc(100% - 732px)); text-align: center;
  background: rgba(36, 8, 56, 0.95); border: 3px solid var(--seat); border-radius: 40px; padding: 10px 28px;
  box-shadow: 0 0 22px color-mix(in srgb, var(--seat) 55%, transparent); animation: host 3.2s ease both; pointer-events: none; }
.host-head { font: 400 34px/1.05 var(--display); color: color-mix(in srgb, var(--seat) 65%, #fff); text-shadow: 0 3px 0 var(--ink); }
.host-line { font-size: 17px; font-weight: 700; color: #ebebff; margin-top: 2px; }
@keyframes host { 0% { opacity: 0; transform: translateX(-50%) scale(0.6); } 7% { opacity: 1; transform: translateX(-50%) scale(1.04); }
  11% { transform: translateX(-50%) scale(1); } 86% { opacity: 1; } 100% { opacity: 0; transform: translateX(-50%) scale(1); } }

/* Your capture streak, called out big in the middle (HUD.ShowStreak): it lands
   with a twist, holds, and fades. Your colour, warmed toward gold. */
.streak-call { position: absolute; left: 50%; top: max(250px, calc(50% - 190px)); transform: translateX(-50%); width: min(800px, calc(100% - 32px));
  text-align: center; pointer-events: none; z-index: 30; animation: streak-out 0.4s ease-in 1.38s both; }
.streak-name { font: 400 76px/1.1 var(--display); color: color-mix(in srgb, var(--seat) 65%, var(--gold));
  -webkit-text-stroke: 14px var(--ink); paint-order: stroke fill; animation: streak-pop 0.28s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
.streak-sub { font: 800 22px/1.3 var(--body); letter-spacing: 0.04em; color: #fff; -webkit-text-stroke: 6px var(--ink); paint-order: stroke fill; }
.streak-sub.cooled { color: var(--cyan); }
@keyframes streak-pop { from { transform: scale(2.2) rotate(-0.08rad); } to { transform: none; } }
@keyframes streak-out { from { opacity: 1; } to { opacity: 0; } }

/* Top right: the menu, the mini-map, the play-by-play. */
.top-right { position: absolute; right: 12px; top: 10px; width: 262px; display: grid; justify-items: end; gap: 8px; }
.menu-btn { width: 44px; height: 44px; border-radius: 12px; background: var(--violet); border: 2px solid var(--gold); color: #fff; font-size: 22px; line-height: 1; cursor: pointer; box-shadow: var(--glow); }
.menu { position: absolute; right: 0; top: 52px; z-index: 5; width: 230px; padding: 8px; border-radius: 16px; display: grid; gap: 4px; }
.menu button { font: 800 14px/1.2 var(--body); color: var(--text); background: transparent; border: 0; border-radius: 10px; padding: 9px 10px; text-align: left; cursor: pointer; }
.menu button:hover { background: rgba(255, 255, 255, 0.08); }
.menu button.danger { color: #ff9aa3; }
.menu-note { font-size: 13px; color: var(--lav); padding: 4px 10px 0; }
.menu-row { display: flex; gap: 4px; }
.menu-row button { flex: 1; text-align: center; background: rgba(255, 255, 255, 0.06); }
.menu-row button.danger { background: rgba(255, 77, 89, 0.2); }
.minimap { width: 176px; height: 176px; padding: 4px; border-radius: 18px; border-width: 2px; }
.minimap canvas { display: block; width: 100%; height: 100%; }
.pbp { width: 262px; padding: 10px 12px; border-radius: 18px; border-width: 2px; max-height: 300px; overflow: hidden; }
.pbp h2 { font: 800 12px/1 var(--body); letter-spacing: 0.06em; color: var(--gold); text-align: center; padding-bottom: 7px; border-bottom: 1px solid rgba(255, 204, 92, 0.45); margin-bottom: 6px; }
.pbp ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }
.pbp li { font-size: 12.5px; line-height: 1.35; padding: 3px 6px; border-radius: 3px; color: color-mix(in srgb, var(--seat) 65%, #fff); }
.pbp li:nth-child(odd) { background: rgba(41, 20, 77, 0.55); }
.pbp li:nth-child(even) { background: rgba(20, 10, 41, 0.3); }
.pbp li.warn { color: #ff9aa3; font-weight: 800; }

/* The piece clocks, along the bottom. */
.bottom { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); display: flex; align-items: flex-end; gap: 10px; }
.dock { display: flex; gap: 8px; padding: 8px 10px; background: var(--violet-deep); border: 2px solid var(--gold); border-radius: 18px; box-shadow: var(--glow); }
.tile { position: relative; width: 64px; height: 94px; border-radius: 12px; border: 2px solid; display: grid; justify-items: center; align-content: start; padding-top: 5px;
  font-variant-numeric: tabular-nums; }
.tile.ready { background: rgba(26, 36, 61, 0.96); border-color: var(--mint); box-shadow: 0 0 8px rgba(102, 255, 199, 0.45); }
.tile.waiting { background: rgba(31, 15, 61, 0.96); border-color: rgba(255, 204, 92, 0.55); }
.tile.gone { background: rgba(15, 13, 26, 0.7); border-color: rgba(115, 112, 144, 0.35); }
.tile .ring { width: 48px; height: 48px; }
.tile .track { fill: none; stroke: rgba(255, 255, 255, 0.1); stroke-width: 4.5; }
.tile .fill { fill: none; stroke: var(--waiting); stroke-width: 4.5; stroke-linecap: round; transition: stroke-dasharray 0.2s linear; }
.tile.ready .fill { stroke: var(--mint); }
.tile .heat-ring { fill: none; stroke: rgba(255, 115, 38, 0.6); stroke-width: 1.8; }
.tile .glyph { position: absolute; top: 12px; left: 0; right: 0; text-align: center; font: 24px/1 var(--glyph); color: rgba(255, 255, 255, 0.55); }
.tile.ready .glyph { color: #fff; }
.tile.gone .glyph { color: var(--gone); }
.tile .pips { display: flex; gap: 5px; margin-top: 3px; }
.tile .pips i { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, 0.12); }
.tile .pips i.on { background: var(--mint); box-shadow: 0 0 0 1.5px rgba(102, 255, 199, 0.4); }
.tile .cap { font: 800 10px/1 var(--body); letter-spacing: 0.03em; margin-top: 6px; color: var(--mint); white-space: nowrap; }
.tile.waiting .cap { color: var(--waiting); }
.tile.gone .cap { color: var(--gone); }
.tile .heat { position: absolute; right: 4px; top: 3px; font: 800 9px/1 var(--body); color: #ff7326; }
.view-btn { font: 800 13px/1 var(--body); color: #fff; background: var(--violet); border: 2px solid var(--gold); border-radius: 14px; padding: 11px 14px; cursor: pointer; box-shadow: var(--glow); white-space: nowrap; }
.view-btn span { font-family: var(--glyph); margin-right: 4px; color: var(--gold); }
.view-btn:hover { filter: brightness(1.2); }

/* The result. */
.results { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(440px, calc(100% - 32px)); display: grid; gap: 12px; text-align: center; }
.results h2 { font-size: 40px; color: var(--gold); text-shadow: 0 3px 0 #59148c; }
.places { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; }
.places li { display: flex; align-items: center; gap: 10px; text-align: left; padding: 4px 8px; border-radius: 8px; font-weight: 700; }
.places li.me { background: rgba(255, 204, 92, 0.18); color: var(--gold); }
.places .place { width: 3em; font-variant-numeric: tabular-nums; color: var(--lav); }
.results .row { justify-content: center; }

/* ---- the tutorial --------------------------------------------------------------------- */
/* The offer, in the lobby and on the signed-out card, in the cyan of the prize wheel's hints. */
.offer { display: grid; gap: 8px; justify-items: start; padding: 12px 14px; border-radius: 16px;
  background: rgba(89, 217, 255, 0.1); border: 2px solid rgba(89, 217, 255, 0.55); }
.offer p { font-size: 14px; color: #e3f7ff; }
.offer b { color: var(--cyan); }
.btn.quiet { background: transparent; border-color: rgba(255, 204, 92, 0.5); padding: 8px 12px; font-size: 13px; }
/* "Continue with Google" in Google's own button style (its sign-in branding guidelines): white, the four-colour G, Roboto. */
.btn-google { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 46px; padding: 0 18px;
  border-radius: 999px; background: #fff; color: #1f1f1f; border: 1px solid #747775; text-decoration: none;
  font: 500 16px/1.2 Roboto, Arial, sans-serif; letter-spacing: 0.25px; transition: background-color 0.15s, box-shadow 0.15s; }
.btn-google:hover, .btn-google:focus-visible { background: #f2f2f2; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45); }
.btn-google:focus-visible { outline: 3px solid var(--gold, #ffcc5c); outline-offset: 2px; }
.btn-google svg { width: 20px; height: 20px; flex: none; }
.muted.terms { font-size: 12px; }
.muted.terms a { color: inherit; }
.lobby .how-to { justify-self: start; }
.lobby .discord { border-color: #5865f2; color: #c9cdfb; }
.lobby .discord:hover { background: #5865f2; color: #fff; }
.how-to span { font-family: var(--glyph); font-size: 16px; color: var(--gold); }

/* Its own frame over the studio, laid out apart from the match's. */
.tutorial-hud { position: fixed; inset: 0; pointer-events: none; }
.tutorial-hud > *, .tutorial-hud .bottom > * { pointer-events: auto; }
.tutorial-hud .bottom { pointer-events: none; }

/* The lesson's card, top left: the rule, the steps with the one under way lit, and the way on. */
.lesson { position: absolute; left: 14px; top: 10px; width: min(400px, calc(100% - 28px)); max-height: calc(100% - 150px); overflow: auto;
  display: grid; gap: 10px; }
.lesson h1 { font-size: 30px; line-height: 1.05; }
.lesson-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.lesson-pips { display: inline-flex; gap: 5px; flex: none; }
.lesson-pips i { width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, 0.16); }
.lesson-pips i.done { background: var(--mint); }
.lesson-pips i.now { background: var(--gold); box-shadow: 0 0 6px rgba(255, 204, 92, 0.7); }
.lesson-intro { font-size: 14px; color: var(--lav); }
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; counter-reset: step; }
.steps li { counter-increment: step; position: relative; padding: 8px 10px 8px 38px; border-radius: 12px; font-size: 14px; line-height: 1.35;
  color: var(--lav); background: rgba(255, 255, 255, 0.05); border: 2px solid transparent; }
.steps li::before { content: counter(step); position: absolute; left: 9px; top: 8px; width: 20px; height: 20px; border-radius: 50%;
  display: grid; place-items: center; font: 800 12px/1 var(--body); color: var(--ink); background: rgba(199, 204, 242, 0.5); }
.steps li.now { color: var(--text); font-weight: 700; background: rgba(196, 42, 122, 0.22); border-color: var(--pink); }
.steps li.now::before { background: var(--pink); color: #fff; }
.steps li.done { color: var(--mint); }
.steps li.done::before { content: "✓"; background: var(--mint); }
.step-count { color: var(--gold); font-weight: 800; }
.fall-clock { font: 400 22px/1.1 var(--display); color: #ffb3a8; }
.fall-clock b { font-weight: 400; font-size: 32px; color: var(--hot); font-variant-numeric: tabular-nums; }
.lesson-status { font-size: 13px; color: var(--lav); min-height: 1.35em; }

/* The host's calls, centred in the room right of the card. Set in full here, over the match's layouts for
   narrower screens, which flow the banner into their own grid. */
.tutorial-hud .host-banner { position: absolute; top: 16px; left: calc(50% + 207px); transform: translateX(-50%);
  width: min(640px, calc(100% - 456px)); animation-name: host; }

/* The send-off. */
.finish h2 { font-size: 40px; }
.recap { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; text-align: left; font-weight: 700; }
.recap li::before { content: "★ "; color: var(--gold); }

/* Smaller screens: the essentials only. */
/* Podium cams: the camera button on a contestant who's on camera, their camera's menu under the list, a
   moment's camera in the bottom-right corner (clear of the board), and your own "You're on camera" tile under
   it. The videos the studio draws on the podiums' screens play out of sight. */
.cam-holder { position: fixed; right: 0; bottom: 0; width: 2px; height: 2px; overflow: hidden; opacity: 0; pointer-events: none; }
.cam-holder video { width: 2px; height: 2px; }
.cam-thumb { flex: none; position: relative; width: 52px; height: 30px; padding: 0; border-radius: 7px; overflow: hidden; cursor: pointer;
  background: #000; border: 2px solid var(--hot); box-shadow: 0 0 8px rgba(255, 77, 89, 0.45); }
.cam-thumb.off { background: rgba(255, 255, 255, 0.05); border-color: var(--gone); box-shadow: none; }
.cam-thumb.off::after { content: "C9"; position: absolute; inset: 0; display: grid; place-items: center; font: 13px/1 var(--glyph); color: var(--gone); }
.cam-thumb-video { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.cam-thumb.silenced::before { content: "
F507"; position: absolute; right: 1px; bottom: 0; z-index: 1; font-size: 10px; line-height: 1; text-shadow: 0 0 2px #000; }
/* Heard but not seen: a microphone in the row, lit while they talk. */
.cam-mic { flex: none; display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border-radius: 50%; cursor: pointer;
  font: 15px/1 var(--glyph); background: rgba(102, 255, 199, 0.12); border: 2px solid var(--mint); }
.cam-mic.off { background: transparent; border-color: var(--gone); opacity: 0.6; }
/* Whoever is talking (cams.js marks them): their face, microphone or your own tile lights up. */
.cam-thumb[data-speaking], .cam-mic[data-speaking], .cam-self[data-speaking] { border-color: var(--mint); box-shadow: 0 0 0 2px var(--mint), 0 0 14px rgba(102, 255, 199, 0.8); }
.cam-menu-video { width: 100%; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; background: #000; margin-bottom: 4px; }
.cam-menu { width: 236px; flex: none; padding: 8px; border-radius: 16px; border-color: var(--seat, var(--gold)); display: grid; gap: 2px; }
.cam-menu-head { display: flex; align-items: center; gap: 6px; font: 800 12px/1.2 var(--body); letter-spacing: 0.04em; color: var(--text); padding: 2px 4px 4px; }
.cam-menu button:not(.cam-close) { font: 800 14px/1.2 var(--body); color: var(--text); background: transparent; border: 0; border-radius: 10px; padding: 8px 10px; text-align: left; cursor: pointer; }
.cam-menu button:not(.cam-close):hover { background: rgba(255, 255, 255, 0.08); }
.cam-menu button.danger { color: #ff9aa3; }
.cam-close { margin-left: auto; width: 24px; height: 24px; border: 0; border-radius: 8px; background: transparent; color: var(--lav); font-size: 18px; line-height: 1; cursor: pointer; }
.cam-note { width: 340px; flex: none; border-radius: 16px; padding: 8px 14px; font-size: 13px; color: #ffd0d6; border-color: var(--hot); }
.menu .cam-item { color: #ffb3b9; }
/* A moment's camera pops up in the bottom-right corner, above your own tile: the board is round and centred, so
   the corners are clear of it. The streak's call itself stays over the board. */
.cam-spot { position: fixed; z-index: 35; right: 14px; bottom: 130px; transform-origin: 100% 100%; width: min(262px, calc(100% - 28px));
  border: 4px solid var(--seat); border-radius: 22px; overflow: hidden; background: var(--ink); pointer-events: none;
  box-shadow: 0 0 26px color-mix(in srgb, var(--seat) 60%, transparent); animation: spot 3.2s ease both; }
.cam-spot-video { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: #000; }
.cam-spot-text { position: absolute; left: 0; right: 0; top: 8px; text-align: center; font: 400 30px/1 var(--display);
  color: color-mix(in srgb, var(--seat) 60%, #fff); -webkit-text-stroke: 7px var(--ink); paint-order: stroke fill; }
.cam-spot-name { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 7px 10px; font: 400 18px/1.1 var(--display); color: #fff; background: rgba(14, 6, 32, 0.92); }
.cam-spot-seat { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--seat); font-size: 13px; text-shadow: 0 1px 0 var(--ink); }
@keyframes spot { 0% { opacity: 0; transform: scale(0.5); } 8% { opacity: 1; transform: scale(1.04); }
  12% { transform: scale(1); } 88% { opacity: 1; } 100% { opacity: 0; transform: scale(0.96); } }
.cam-self { position: fixed; z-index: 30; right: 14px; bottom: 14px; width: 168px; border: 2px solid var(--hot); border-radius: 14px; overflow: hidden;
  background: var(--violet-deep); box-shadow: 0 0 12px rgba(255, 77, 89, 0.45); }
.cam-self-video { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; transform: scaleX(-1); background: #000; }
.cam-self-live { display: block; padding: 5px 8px 0; font: 800 11px/1.2 var(--body); color: #ff9aa3; letter-spacing: 0.03em; }
.cam-self-row { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px 8px 7px; }
.cam-self button { font: 800 12px/1 var(--body); color: var(--text); background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 8px; padding: 5px 9px; cursor: pointer; }
.cam-self button:hover { background: rgba(255, 255, 255, 0.18); }
.cam-self button.mic.on { border-color: var(--mint); color: var(--mint); }
.cam-self.voice-only { width: auto; min-width: 168px; border-color: var(--mint); box-shadow: 0 0 12px rgba(102, 255, 199, 0.35); }
.cam-self.voice-only .cam-self-live { color: var(--mint); }
.cam-lobby { display: grid; gap: 8px; border-top: 2px solid rgba(255, 82, 184, 0.35); padding-top: 12px; }
.cam-lobby h2 { font-size: 22px; line-height: 1.1; }
.cam-lobby .muted a, .cam-lobby .notice a { color: var(--cyan); }
.cam-preview { display: grid; gap: 8px; justify-items: start; }
.cam-preview video { width: 100%; max-width: 320px; aspect-ratio: 16 / 9; object-fit: cover; transform: scaleX(-1); border-radius: 14px; border: 2px solid var(--pink); background: #000; }
.cam-device { display: flex; gap: 8px; align-items: center; font-size: 13px; color: var(--lav); }
/* The lobby's microphone check: the bar moves with what it hears (cams.js sets --level, 0 to 1). */
.cam-meter { width: 100%; max-width: 320px; height: 10px; border-radius: 5px; background: rgba(255, 255, 255, 0.12); overflow: hidden; }
.cam-meter i { display: block; height: 100%; width: calc(var(--level, 0) * 100%); background: linear-gradient(90deg, var(--mint), var(--gold)); transition: width 60ms linear; }
.cam-device select { font: 700 13px/1.2 var(--body); color: var(--text); background: var(--violet-deep); border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 8px; padding: 5px 8px; max-width: 220px; }

@media (max-width: 1439.98px) {
  /* Below desktop width the round's rule (or the tournament stage) sits under the round clock, compact: just its name. */
  .rule-card, .stage-card { padding: 5px 12px; }
  .rule-card .eyebrow, .rule-card .stage-line, .stage-card .eyebrow, .stage-card .stage-line { display: none; }
}
@media (max-width: 1250px) {
  .stage-card { display: none; }
}
@media (max-width: 1000px) {
  .leaderboard { width: 200px; }
  .chip-row .bot { display: none; }
  .top-right { width: 200px; }
  .pbp { width: 200px; max-height: 200px; }
  .minimap { width: 140px; height: 140px; }
  .cam-spot { width: 200px; }
}
/* Laptops and tablets: the top of the screen as three columns (you and the contestants | the round
   clock, the round's rule under it and the host under that | the menu, mini-map and play-by-play), so
   nothing runs into anything else however wide the window is. Wider screens keep the rule beside the
   clock; phones stack everything (below). */
@media (min-width: 760.02px) and (max-width: 1439.98px) {
  .hud { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: auto auto 1fr;
    align-items: start; column-gap: 12px; row-gap: 8px; padding: 10px 12px 10px 14px; }
  .left-col { position: relative; left: auto; top: auto; bottom: auto; width: auto; grid-column: 1; grid-row: 1 / -1; align-self: stretch; }
  .top-right { position: relative; right: auto; top: auto; grid-column: 3; grid-row: 1 / -1; }
  .round-clock, .rule-card, .stage-card, .host-banner { position: relative; left: auto; top: auto; transform: none; grid-column: 2; justify-self: center; }
  .round-clock { grid-row: 1; width: min(580px, 100%); min-width: 0; }
  .rule-card, .stage-card { grid-row: 2; width: min(300px, 100%); }
  .host-banner { grid-row: 3; width: 100%; animation-name: host-flow; }
}
@media (min-width: 760.02px) and (max-width: 1000px) {
  .me-card, .status-bar { width: 260px; }
  .round-clock { padding: 8px 14px 10px; }
  .rc-name { font-size: 28px; }
  .rc-time { font-size: 40px; }
}
@media (max-width: 760px) {
  /* Phones: the top of the screen as one column (you, the round clock, the round's rule, the host), so
     however the text wraps nothing lands on anything else. The menu button keeps the top right. */
  .hud { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 10px 14px; }
  .left-col, .round-clock, .rule-card, .host-banner { position: relative; left: auto; top: auto; bottom: auto; transform: none; }
  .left-col { align-self: stretch; width: auto; margin-right: 70px; }
  .me-card, .status-bar { width: 100%; }
  .leaderboard, .pbp, .minimap { display: none; }
  .round-clock { width: 100%; min-width: 0; }
  .rc-time { font-size: 36px; }
  .rc-name { font-size: 26px; }
  .rule-card { width: min(300px, 100%); }
  .host-banner { width: 100%; animation-name: host-flow; }
  /* The view button above the piece clocks, so the row fits the screen. */
  .bottom { flex-direction: column-reverse; align-items: center; gap: 8px; }
  .tile { width: 54px; height: 86px; }
  .tile .cap { font-size: 9px; letter-spacing: 0; }   /* "READY ×10" still fits on one line */
  .view-btn { padding: 10px; }
  .view-btn kbd { display: none; }
}
@media (max-width: 420px) {
  /* The narrowest phones: the five piece clocks still fit side by side (308px). */
  .dock { gap: 5px; padding: 6px 7px; }
}
@media (max-width: 760px) {
  /* Phones: the lesson's card across the top with only the step under way, the host's calls just above the
     piece clocks, and the board between. */
  .lesson { left: 10px; top: calc(10px + env(safe-area-inset-top, 0px)); width: calc(100% - 20px); max-height: calc(100% - 200px); gap: 8px; padding: 12px 14px; }
  .lesson h1 { font-size: 24px; }
  .lesson-intro { font-size: 13px; }
  .steps li:not(.now) { display: none; }
  .tutorial-hud .host-banner { top: auto; bottom: 170px; width: calc(100% - 28px); left: 50%; }
  .tutorial-hud .host-head { font-size: 28px; }
}
@media (max-width: 760px) {
  .cam-note, .cam-menu { width: 100%; }
  /* Phones: the board fills the width, so the moment's camera goes over your card at the top instead. */
  .cam-spot { right: auto; bottom: auto; left: 14px; top: calc(10px + env(safe-area-inset-top, 0px)); transform-origin: 0 0;
    width: min(180px, calc(100% - 28px)); border-width: 3px; border-radius: 16px; }
  .cam-spot-text { font-size: 20px; -webkit-text-stroke-width: 5px; }
  .cam-spot-name { font-size: 14px; padding: 5px 8px; }
  /* Your own tile in the corner above the view button's row (dock 112px + gap + button 38px), under the board's
     front edge. Kept short: no label line (the red border says you're live) and its buttons over the video. */
  .cam-self { right: 10px; bottom: calc(166px + env(safe-area-inset-bottom, 0px)); width: 140px; }
  .cam-self:not(.voice-only) .cam-self-live { display: none; }
  .cam-self:not(.voice-only) .cam-self-row { position: absolute; left: 0; right: 0; bottom: 0; flex-wrap: nowrap; justify-content: center;
    padding: 10px 4px 4px; background: linear-gradient(transparent, rgba(14, 6, 32, 0.85)); }
  .cam-self button { font-size: 11px; padding: 3px 5px; white-space: nowrap; }
}
/* The host's entrance, for the phone column (no centring shift: the column centres it). */
@keyframes host-flow { 0% { opacity: 0; transform: scale(0.6); } 7% { opacity: 1; transform: scale(1.04); }
  11% { transform: scale(1); } 86% { opacity: 1; } 100% { opacity: 0; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) {
  .round-clock.hot .rc-time, .host-banner, .rule-card, .streak-name, .loading-logo, .loading-bar i { animation: none; }
}
/* Asked to be interviewed: a card mid-screen, on air only with a yes. */
.interview-ask { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 40; width: min(420px, calc(100% - 32px));
  display: grid; gap: 10px; text-align: center; padding: 16px 18px; border-color: var(--hot); box-shadow: 0 0 22px rgba(255, 77, 89, 0.5); }
.interview-ask p { margin: 0; font-size: 14px; line-height: 1.4; }
.interview-ask-buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }