/*
 * Tiger Court: a card table at night. Snow cards with thick ink borders and hard offset
 * shadows on a dark green felt, tiger-orange prompts, striped card backs.
 * Dark only. Components keep one class each (.card, .card-back, .prompt-card,
 * .stamp, .score-equation …) and tilt through --tilt, so motion can be layered
 * on later without touching the markup.
 */

/* The pixel face is Jersey 10. Pixelify Sans (the mocks' face) draws C, B and 5 so
 * close to O, G and S that "BOB" read as "GOG" from the sofa, at every weight.
 * Jersey has one weight, already heavy: claiming 400–700 stops browsers faking a
 * bold, and size-adjust brings its cap height up to Pixelify's so layouts hold. */
@font-face {
  font-family: "Jersey 10";
  src: url("/fonts/Jersey10.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
  size-adjust: 125%;
}
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("/fonts/BricolageGrotesque.woff2") format("woff2");
  font-weight: 400 800;
  font-display: swap;
}

:root {
  --table: #0e2a26;
  --table-boss: #1a0f0c;
  --ink: #1a1410;
  --snow: #f4efe6;
  --tiger: #e8742a;
  --chip: #2368b8;
  --chip-ink: #ffffff;
  --muted: #b9c7c2;
  /* --dim clears 4.5:1 on the table even under the strongest glow (the reveal's). */
  --dim: #9aaea8;
  --dashed: #4c6a63; /* disabled and decorative outlines only */
  /* Outlines that are the only edge of a control (an "off" toggle, a switch track):
   * 3:1 on the table, the boss table and their glows (WCAG 1.4.11). */
  --edge: #7a928c;
  --rule: #2b4a44;
  --flame: #ffd36b;
  --on-snow-muted: #5e574d;
  --boss-red: #8c2a17;
  --boss-pink: #f2b8a8;
  --error: #ff9a85;
  --shadow: var(--ink); /* hard offset shadows; black on the boss table so they still show */

  --glow-tiger: rgba(232, 116, 42, 0.18);
  --glow-river: rgba(47, 127, 216, 0.14);
  --glow-snow: rgba(244, 239, 230, 0.06);
  --glow-boss: rgba(214, 64, 40, 0.3);

  --font-pixel: "Jersey 10", ui-monospace, Menlo, monospace;
  --font-card: "Bricolage Grotesque", system-ui, -apple-system, sans-serif;

  /* Card-back stripes: small for phones and table cards, big for TV-sized backs. */
  --stripes: repeating-linear-gradient(118deg, transparent 0 12px, var(--ink) 12px 19px, transparent 19px 30px, var(--ink) 30px 33px, transparent 33px 52px);
  --stripes-big: repeating-linear-gradient(118deg, transparent 0 22px, var(--ink) 22px 34px, transparent 34px 52px, var(--ink) 52px 58px, transparent 58px 90px);

  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background-color: var(--table);
  color: var(--snow);
  font: 600 18px/1.3 var(--font-card);
}
body.is-boss, .screen.is-boss { --shadow: #000; }
body.is-boss { background-color: var(--table-boss); }

h1, h2, p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: var(--snow); }

button, input, textarea, select { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--tiger); outline-offset: 3px; }
/* Headings take focus when a screen changes (see phone.js); they aren't controls, so no ring. */
h1[tabindex="-1"]:focus, h2[tabindex="-1"]:focus { outline: none; }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.pixel { font-family: var(--font-pixel); }

/* ---------- Shared components ---------- */

/* A face-up card. */
.card {
  background: var(--snow);
  color: var(--ink);
  border: var(--card-border, 4px) solid var(--ink);
  border-radius: var(--card-radius, 10px);
  box-shadow: var(--card-shadow, 8px) var(--card-shadow, 8px) 0 var(--shadow);
  transform: rotate(var(--tilt, 0deg));
}

/* A face-down card: the player's colour with ink stripes. */
.card-back {
  display: block;
  flex: none;
  background-color: var(--card-colour, var(--tiger));
  background-image: var(--stripes);
  border: var(--card-border, 3px) solid var(--ink);
  border-radius: var(--card-radius, 6px);
  transform: rotate(var(--tilt, 0deg));
}
.card-back.is-big { background-image: var(--stripes-big); }

/* The stripes on their own, for the colour band across a name card. */
.band {
  display: block;
  background-color: var(--card-colour, var(--tiger));
  background-image: var(--stripes);
  border-bottom: var(--card-border, 4px) solid var(--ink);
}

/* An empty place at the table. */
.slot {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 4px dashed var(--dim);
  border-radius: 8px;
  color: var(--dim);
  font-family: var(--font-pixel);
  text-align: center;
  transform: rotate(var(--tilt, 0deg));
}

.prompt-card {
  background: var(--tiger);
  color: var(--ink);
  border: var(--card-border, 3px) solid var(--ink);
  border-radius: var(--card-radius, 8px);
  box-shadow: var(--card-shadow, 5px) var(--card-shadow, 5px) 0 var(--shadow);
  transform: rotate(var(--tilt, -1deg));
  font-family: var(--font-card);
  font-weight: 800;
  overflow-wrap: break-word;
}
.blank {
  position: relative;
  display: inline-block;
  width: 3.2em;
  height: 0.8em;
  border-bottom: 0.12em solid currentColor;
  vertical-align: baseline;
}
/* The blank's number, matching its answer box, sitting on the line. */
.blank__n { position: absolute; inset: auto 0 0.15em; text-align: center; font-family: var(--font-pixel); font-size: 0.55em; line-height: 1; }
/* A player's words in a filled card: underlined, so the joke reads as one sentence. */
mark.fill { background: none; color: inherit; text-decoration: underline; text-decoration-thickness: 0.1em; text-underline-offset: 0.15em; }

/* Pixel buttons: orange with a hard shadow; ghost when off. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4em;
  min-height: 48px;
  padding: 12px 22px;
  background: var(--tiger);
  color: var(--ink);
  border: 4px solid var(--ink);
  border-radius: 6px;
  box-shadow: 6px 6px 0 var(--shadow);
  font-family: var(--font-pixel);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.1;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transform: rotate(var(--tilt, 0deg));
}
.btn:disabled,
.btn[aria-disabled="true"] {
  background: transparent;
  color: var(--dim);
  border: 4px dashed var(--dashed);
  box-shadow: none;
  cursor: default;
}
.btn.is-wide { width: 100%; }
.toggle[aria-pressed="false"] {
  background: transparent;
  color: var(--snow);
  border-color: var(--edge);
  box-shadow: none;
}

/* A secondary action (the host's MOVE ON): an outline with no shadow, so it never
 * competes with the screen's main button. Armed for a second tap, it turns orange. */
.btn--quiet {
  background: transparent;
  color: var(--snow);
  border: 3px solid var(--edge);
  box-shadow: none;
  font-size: 20px;
}
.btn--quiet.is-armed { border-color: var(--tiger); color: var(--flame); }

/* "NO TIMER": stands where the seconds would be when a phase has no clock. */
.clock-chip {
  display: inline-block;
  padding: 4px 10px;
  border: 3px solid var(--edge);
  border-radius: 6px;
  color: var(--muted);
  font-family: var(--font-pixel);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.1;
  white-space: nowrap;
}

/* "RECONNECTING…": the room is out of reach and the clock is held. Same look as the TV's. */
.link-chip { border-color: var(--flame); background: var(--ink); color: var(--flame); }
.display .link-chip {
  position: absolute;
  top: 8px;
  left: 50%;
  translate: -50% 0;
  z-index: 10;
  padding: 6px 18px;
  border: 4px solid var(--flame);
  border-radius: 6px;
  font-family: var(--font-pixel);
  font-size: 28px;
  line-height: 1.1;
}

.link-btn {
  min-height: 44px;
  padding: 4px 8px;
  background: none;
  border: 0;
  color: var(--dim);
  font-family: var(--font-pixel);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

/* A checkbox drawn as a pixel switch. The real input stays on top, invisible. */
.switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  font-family: var(--font-pixel);
  color: var(--muted);
  cursor: pointer;
}
.switch input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.switch__track {
  flex: none;
  position: relative;
  width: 56px;
  height: 32px;
  border: 3px solid var(--edge);
  border-radius: 6px;
}
.switch__track::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 3px;
  background: var(--dim);
}
.switch input:checked + .switch__track { background: var(--tiger); border-color: var(--ink); }
.switch input:checked + .switch__track::after { left: auto; right: 3px; background: var(--ink); }
.switch input:focus-visible + .switch__track { outline: 3px solid var(--tiger); outline-offset: 3px; }

/* Labels in the pixel face. */
/* Jersey 10 draws small for its size (cap height 0.67em, and narrow), so 18px is
 * the smallest it's set on a phone. */
.label { font-family: var(--font-pixel); font-size: 18px; font-weight: 400; color: var(--muted); text-transform: uppercase; }
.card-label { font-family: var(--font-pixel); font-weight: 400; color: var(--on-snow-muted); text-transform: uppercase; }

.flash {
  padding: 10px 14px;
  border: 3px solid var(--error);
  border-radius: 6px;
  background: var(--ink);
  color: var(--error);
  font-family: var(--font-pixel);
  font-size: 18px;
}
.flash:empty { padding: 0; border: 0; }
/* News rather than a refusal (the TV can't deal yet): calm, not the error colour. */
.flash.is-info { border-color: var(--flame); color: var(--snow); }

/* Chips × mult. */
.score-equation {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--eq-gap, 12px);
  font-family: var(--font-pixel);
}
.chip {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--chip-pad, 8px 12px);
  border: var(--card-border, 3px) solid var(--ink);
  border-radius: 8px;
  box-shadow: var(--card-shadow, 4px) var(--card-shadow, 4px) 0 var(--shadow);
  transform: rotate(var(--tilt, 0deg));
}
.chip--votes { background: var(--chip); color: var(--chip-ink); }
.chip--mult { background: var(--tiger); color: var(--ink); }
.chip__label { font-size: var(--chip-label, 18px); }
.chip__value { font-size: var(--chip-value, 28px); font-weight: 700; line-height: 1; }
.op { font-size: var(--op-size, 28px); font-weight: 700; }
/* "× box" (and "= total") travel together: a row wraps between terms, never inside one. */
.term { display: inline-flex; align-items: center; gap: var(--eq-gap, 12px); white-space: nowrap; }
.score-total { font-size: var(--total-size, 40px); font-weight: 700; line-height: 1; color: var(--flame); }

.stamp {
  display: inline-block;
  padding: 6px 14px;
  border: 5px solid var(--tiger);
  border-radius: 8px;
  background: rgba(14, 42, 38, 0.88);
  color: var(--tiger);
  font-family: var(--font-pixel);
  font-weight: 700;
  line-height: 1.1;
  transform: rotate(var(--tilt, 14deg));
}

.stamp-paw { display: block; width: var(--paw, 40px); height: var(--paw, 40px); transform: rotate(var(--tilt, 0deg)); }
.stamp-paw g { fill: var(--tiger); stroke: var(--ink); stroke-width: 3; }

/* Played-down tag on a card back. */
.tag {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 4px;
  background: var(--ink);
  color: var(--tiger);
  font-family: var(--font-pixel);
  font-weight: 700;
}

.brand { display: flex; align-items: center; gap: 12px; }
.wordmark { font-family: var(--font-pixel); font-weight: 700; letter-spacing: 0.1em; }

/* ---------- Phone ---------- */

body.phone {
  min-height: 100vh;
  min-height: 100dvh;
  --glows: radial-gradient(ellipse 80% 40% at 50% 20%, var(--glow-tiger), transparent 70%);
}
body.phone.is-boss {
  --glows: radial-gradient(ellipse 90% 45% at 50% 25%, var(--glow-boss), transparent 70%);
}
body.phone::before {
  content: "";
  position: fixed;
  inset: -12%;
  z-index: -1;
  pointer-events: none;
  background-image: var(--glows);
}

.phone main {
  max-width: 440px;
  margin: 0 auto;
  padding: max(20px, env(safe-area-inset-top)) 16px max(28px, env(safe-area-inset-bottom));
}

.phone .stack { display: flex; flex-direction: column; gap: 18px; }
.phone .center { align-items: center; text-align: center; }

/* Join */
.join .brand { margin: 8px 0 6px; }
.join .brand .card-back { width: 40px; height: 40px; }
/* TIGER COURT stays on one line down to 320px-wide phones. */
.join .wordmark { font-size: clamp(30px, 11vw, 40px); white-space: nowrap; }
.join .tagline { color: var(--muted); font-weight: 600; }
.field-group { display: flex; flex-direction: column; gap: 8px; }
.field {
  width: 100%;
  min-height: 56px;
  padding: 12px 14px;
  background: var(--snow);
  color: var(--ink);
  border: 3px solid var(--ink);
  border-radius: 8px;
  box-shadow: 5px 5px 0 var(--shadow);
  font-family: var(--font-pixel);
  font-size: 24px;
  text-transform: uppercase;
}
.field--code { font-size: 40px; font-weight: 700; letter-spacing: 0.3em; }
.join .btn { margin-top: 6px; }

/* HUD across the top of every game screen */
.hud {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
  font-family: var(--font-pixel);
  font-size: 20px;
}
.hud__me { min-width: 0; margin-right: auto; overflow-wrap: anywhere; }
.hud .timer { font-size: 28px; font-weight: 700; min-width: 2ch; text-align: right; font-variant-numeric: tabular-nums; }
/* A refusal lies over the HUD instead of pushing the screen down; it goes when the
 * answer is fixed or the screen changes. */
.game { position: relative; }
.game > .flash { position: absolute; top: 0; left: 0; right: 0; z-index: 5; box-shadow: 4px 4px 0 var(--shadow); }
.game > .flash:empty { display: none; }

.note { color: var(--muted); font-weight: 600; }
.big-label { font-family: var(--font-pixel); font-size: 32px; font-weight: 700; line-height: 1.1; }

/* Lobby: your seat card */
.you-card {
  --card-shadow: 8px;
  align-self: center;
  width: min(260px, 100%);
  overflow: hidden;
  --tilt: -2deg;
}
.you-card .band { height: 64px; }
.you-card__body { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 18px 12px 22px; text-align: center; }
.you-card__name { font-family: var(--font-pixel); font-weight: 700; line-height: 1; overflow-wrap: anywhere; }
.you-card .card-label { font-size: 18px; }
.choice { margin: 0; padding: 0; border: 0; min-width: 0; }
.choice legend { padding: 0; margin-bottom: 10px; }
.choice__row { display: flex; flex-wrap: wrap; gap: 12px; }
.choice__row .btn { flex: 1 1 auto; font-size: 20px; }
/* The timer's four paces: two to a row, one under the other when there's no room. */
.choice__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 140px), 1fr)); gap: 12px; }
.choice__grid .btn { font-size: 20px; padding-inline: 12px; }
.choice__note { margin-top: 10px; }
.pace-readout { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 4px 10px; text-align: center; }
.pace-readout__value { font-family: var(--font-pixel); font-size: 22px; font-weight: 700; }
.pace-readout .note { flex-basis: 100%; }
/* The host's MOVE ON, set apart below the screen's own controls. */
.host-tools { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; padding-top: 18px; border-top: 3px solid var(--rule); }
.host-tools .waiting { font-family: var(--font-pixel); font-weight: 400; color: var(--snow); overflow-wrap: anywhere; }
.host-tools .waiting:empty { display: none; }

/* Answer */
.prompt-card.on-phone { padding: 18px 20px; font-size: 24px; line-height: 1.15; }
.prompt-card.on-phone.is-small { padding: 14px 16px; font-size: 20px; }

.boss-rule {
  --card-border: 4px;
  --card-shadow: 6px;
  --tilt: 1deg;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px 18px;
  }
.boss-wordmark {
  font-family: var(--font-pixel);
  font-weight: 700;
  line-height: 1;
  color: var(--tiger);
  -webkit-text-stroke: 0.045em var(--ink);
  paint-order: stroke fill;
}
/* On the snow card the orange letters lean on a thick ink outline for contrast. */
.boss-rule .boss-wordmark { font-size: 34px; -webkit-text-stroke-width: 0.12em; }
.boss-rule .card-label { color: var(--boss-red); font-size: 18px; }
.boss-rule__title { font-size: 30px; font-weight: 800; line-height: 1.05; }
.boss-rule__detail { color: var(--on-snow-muted); font-size: 17px; }

.answer-form { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.answer-card {
  --tilt: 2deg;
  width: min(300px, calc(100% - 16px));
  height: clamp(240px, 46vh, 400px);
  height: clamp(240px, 46dvh, 400px);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.answer-card .card-label { font-size: 18px; }
.answer-card textarea {
  flex: 1;
  width: 100%;
  min-height: 0;
  padding: 0;
  resize: none;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-family: var(--font-card);
  font-size: 28px;
  font-weight: 700;
  line-height: 1.15;
}
/* Inside the snow card the ring is ink: orange on snow is only 2.6:1. */
.answer-card textarea:focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; }
.counter { align-self: flex-end; font-family: var(--font-pixel); font-size: 18px; color: var(--on-snow-muted); }
/* Several blanks: one short box each, ruled off, and the card grows to fit them. */
.answer-card.is-multi, .is-boss .answer-card.is-multi { height: auto; gap: 4px; }
.answer-card.is-multi textarea { flex: none; min-height: 2.4em; font-size: 22px; border-bottom: 2px solid var(--ink); }
.answer-card.is-multi .counter { font-size: 14px; margin-bottom: 6px; }
.swipe-hint { font-family: var(--font-pixel); font-size: 18px; color: var(--muted); }
.card-back-row { display: flex; align-items: center; gap: 12px; }
.card-back-row .card-back { width: 44px; height: 60px; }

/* Played, waiting */
.played { display: flex; flex-direction: column; align-items: center; gap: 18px; padding-top: 12px; text-align: center; }
.played-card {
  --card-border: 4px;
  --tilt: -3deg;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 180px;
  height: 250px;
  box-shadow: 8px 8px 0 var(--shadow);
}
.played-card .tag { font-size: 22px; }
.played__text { color: var(--muted); font: inherit; font-weight: 600; overflow-wrap: anywhere; }

/* Vote */
.hand { display: flex; flex-direction: column; gap: 16px; }
.option {
  --card-border: 3px;
  --card-shadow: 5px;
  --card-radius: 10px;
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 12px;
  width: 100%;
  min-height: 72px;
  padding: 14px 16px;
  text-align: left;
  font-family: var(--font-card);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
  overflow-wrap: anywhere;
}
.option .corner { min-width: 1ch; font-family: var(--font-pixel); font-size: 28px; line-height: 1; }
.option.is-mine {
  background: transparent;
  color: var(--muted);
  border-style: dashed;
  border-color: var(--dashed);
  box-shadow: none;
  cursor: default;
}
.option .mine-tag { display: block; margin-top: 6px; font-family: var(--font-pixel); font-size: 18px; font-weight: 400; color: var(--dim); }
.option.is-picked { outline: 4px solid var(--tiger); outline-offset: 3px; }

/* Reveal: your result */
.result {
  --eq-gap: 10px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.result .score-equation { --chip-value: 26px; --total-size: 44px; }

/* Standings */
.standings { display: flex; flex-direction: column; gap: 10px; }
.standing {
  display: grid;
  grid-template-columns: 2.6ch auto 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-bottom: 3px solid var(--rule);
  font-family: var(--font-pixel);
  font-size: 22px;
}
.standing .card-back { width: 26px; height: 36px; --card-border: 3px; --card-radius: 4px; }
.standing__rank { color: var(--dim); }
.standing__name { min-width: 0; overflow-wrap: anywhere; }
.standing__score { font-weight: 700; font-variant-numeric: tabular-nums; }
.standing.is-me { --card-shadow: 5px; border: 3px solid var(--ink); border-radius: 8px; background: var(--snow); color: var(--ink); box-shadow: 5px 5px 0 var(--shadow); }
.standing.is-me .standing__rank { color: var(--on-snow-muted); }
.screen-title { font-family: var(--font-pixel); font-size: 32px; font-weight: 700; }

/* ---------- Display (browser stand-in for the TV) ---------- */
/* Laid out at 1920 × 1080 like the TV mocks, then scaled to fit the window. */

body.display { height: 100vh; overflow: hidden; }
.stage {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1920px;
  height: 1080px;
  overflow: hidden;
  transform: translate(-50%, -50%) scale(var(--scale, 1));
  font-family: var(--font-card);
}
.screen {
  position: relative;
  isolation: isolate;
  width: 100%;
  height: 100%;
  padding: 64px 96px;
  display: flex;
  flex-direction: column;
  gap: 40px;
  background-color: var(--table);
}
/* The glows sit on their own layer and drift slowly (see "Motion" below). */
.screen::before {
  content: "";
  position: absolute;
  inset: -12%; /* oversized, so drifting never brings its edge on screen */
  z-index: -1;
  pointer-events: none;
  background-image: var(--glows, none);
}
.screen.is-boss { background-color: var(--table-boss); }
.screen--lobby {
  padding: 72px 96px;
  gap: 56px;
  --glows:
    radial-gradient(ellipse 60% 45% at 18% 30%, rgba(232, 116, 42, 0.16), transparent 70%),
    radial-gradient(ellipse 50% 60% at 82% 75%, var(--glow-river), transparent 70%),
    radial-gradient(ellipse 40% 35% at 60% 15%, var(--glow-snow), transparent 70%);
}
.screen--answer {
  --glows:
    radial-gradient(ellipse 60% 45% at 50% 40%, var(--glow-tiger), transparent 70%),
    radial-gradient(ellipse 50% 60% at 90% 90%, rgba(47, 127, 216, 0.12), transparent 70%);
}
.screen--vote {
  gap: 32px;
  --glows:
    radial-gradient(ellipse 70% 50% at 50% 70%, rgba(47, 127, 216, 0.16), transparent 70%),
    radial-gradient(ellipse 40% 40% at 12% 12%, rgba(232, 116, 42, 0.16), transparent 70%);
}
.screen--reveal {
  flex-direction: row;
  gap: 80px;
  --glows:
    radial-gradient(ellipse 55% 55% at 32% 50%, rgba(232, 116, 42, 0.24), transparent 70%),
    radial-gradient(ellipse 45% 50% at 85% 30%, rgba(47, 127, 216, 0.16), transparent 70%);
}
.screen--scores, .screen--end, .screen--home {
  --glows:
    radial-gradient(ellipse 60% 50% at 30% 30%, rgba(232, 116, 42, 0.16), transparent 70%),
    radial-gradient(ellipse 50% 60% at 82% 75%, var(--glow-river), transparent 70%);
}
.screen.is-boss {
  --glows:
    radial-gradient(ellipse 60% 55% at 50% 45%, var(--glow-boss), transparent 70%),
    radial-gradient(ellipse 35% 40% at 10% 90%, var(--glow-tiger), transparent 70%);
}

.display .card-back.is-big { --card-border: 4px; }
.tv-top { display: flex; justify-content: space-between; align-items: center; font-family: var(--font-pixel); }
.tv-label { font-family: var(--font-pixel); font-size: 32px; color: var(--muted); }
.tv-note { font-family: var(--font-pixel); font-size: 26px; color: var(--dim); }
.tv-top .brand { gap: 20px; }
.tv-top .brand .card-back { width: 56px; height: 56px; background-image: var(--stripes-big); }
.tv-top .wordmark { font-size: 56px; letter-spacing: 6px; }
.tv-chip { font-size: 30px; padding: 10px 18px; background: var(--snow); color: var(--ink); border: 3px solid var(--ink); border-radius: 6px; }
.tv-chip.is-boss { background: var(--boss-red); color: var(--snow); }
.tv-row { display: flex; gap: 16px; align-items: center; }
.display .btn { font-size: 34px; padding: 18px 28px; box-shadow: 6px 6px 0 var(--shadow); }
.display .btn--deal { font-size: 44px; padding: 28px 44px; box-shadow: 8px 8px 0 var(--shadow); --tilt: 1deg; }
.display .btn--snow { background: var(--snow); --tilt: -1deg; }
.display .flash { position: absolute; left: 96px; bottom: 24px; font-size: 26px; }
.display .switch { font-size: 28px; }
.display .switch__track { width: 72px; height: 40px; border-width: 4px; }
.display .switch__track::after { width: 24px; height: 24px; top: 4px; left: 4px; }
.display .switch input:checked + .switch__track::after { left: auto; right: 4px; }

/* Home and gone screens */
.screen--home { align-items: center; justify-content: center; gap: 48px; text-align: center; }
.screen--home .brand .card-back { width: 120px; height: 120px; background-image: var(--stripes-big); --card-border: 5px; }
.screen--home .wordmark { font-size: 140px; }
.screen--home p { font-size: 40px; color: var(--muted); }
.screen--home .card { padding: 40px 56px; font-size: 48px; font-weight: 800; --tilt: -2deg; max-width: 1200px; }

/* Lobby */
.lobby-mid { display: flex; gap: 96px; align-items: center; }
.code-card {
  --tilt: -2deg;
  width: 640px;
  height: 360px;
  padding: 32px 40px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 10px 10px 0 var(--shadow);
}
.code-card .card-label { font-size: 30px; }
.code-card__code { font-family: var(--font-pixel); font-size: 150px; font-weight: 700; letter-spacing: 18px; line-height: 1; }
.code-card__url { font-size: 28px; font-weight: 600; overflow-wrap: anywhere; }
.code-card__url strong { font-weight: 800; }
.lobby-settings { flex: 1; display: flex; flex-direction: column; gap: 16px; font-family: var(--font-pixel); }
.lobby-settings .tv-label { font-size: 30px; }
.lobby-settings .switch { margin-top: 20px; }
.lobby-settings .tv-row + .tv-label { margin-top: 12px; }
.lobby-bottom { margin-top: auto; display: flex; gap: 28px; align-items: flex-end; }
.seats { display: flex; gap: 20px; align-items: flex-start; }
.seat { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 150px; }
.seat-card {
  --card-shadow: 6px;
  width: 150px;
  height: 212px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.seat-card .band { height: 62px; flex: none; }
.seat-card__body { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 6px; padding: 0 6px; text-align: center; }
.seat-card__name { font-family: var(--font-pixel); font-weight: 700; line-height: 1; overflow-wrap: anywhere; }
.seat-card .card-label { font-size: 20px; }
.seat.is-away .seat-card { opacity: 0.55; }
.seat .slot { width: 150px; height: 212px; font-size: 22px; border-color: var(--dashed); }
.seat .link-btn { font-size: 20px; }
.deal { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; gap: 16px; padding-bottom: 42px; }

/* Answer */
.deck { display: flex; align-items: center; gap: 18px; }
.deck-stack { position: relative; width: 72px; height: 96px; }
.deck-stack .card-back { position: absolute; width: 64px; height: 88px; background-image: var(--stripes-big); }
.deck-stack .card-back:first-child { left: 8px; top: 8px; }
.deck-stack .card-back:last-child { left: 0; top: 0; }
.deck .tv-label { font-size: 30px; }
.answer-center { display: flex; flex-direction: column; align-items: center; gap: 28px; }
.prompt-card.on-tv {
  --card-border: 5px;
  --card-radius: 10px;
  --card-shadow: 12px;
  --tilt: -1.5deg;
  width: 1180px;
  min-height: 380px;
  padding: 56px 64px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 32px;
}
.prompt-card.on-tv .prompt-text { font-size: 84px; line-height: 1.05; }
.prompt-card__foot { align-self: flex-end; font-family: var(--font-pixel); font-size: 26px; font-weight: 400; }
.fuse-row { width: 1180px; display: flex; align-items: center; gap: 24px; font-family: var(--font-pixel); }
.fuse { flex: 1; height: 28px; border: 4px solid var(--ink); border-radius: 6px; background: var(--ink); overflow: hidden; }
.fuse__burn { height: 100%; width: 100%; background-color: var(--tiger); background-image: repeating-linear-gradient(90deg, transparent 0 18px, var(--ink) 18px 26px); }
.fuse-row .timer { font-size: 56px; font-weight: 700; min-width: 80px; text-align: right; font-variant-numeric: tabular-nums; }
.fuse-free { flex: 1; display: flex; justify-content: center; }
.display .clock-chip { padding: 10px 22px; border-width: 4px; font-size: 34px; }
.display .btn.btn--quiet { font-size: 28px; padding: 12px 22px; border-width: 4px; box-shadow: none; }
.vote-clock .btn--quiet { margin-top: 8px; }
.table-row { margin-top: auto; display: flex; gap: 24px; justify-content: center; align-items: flex-end; }
.table-seat { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 168px; }
.table-seat .card-back { --card-border: 4px; --card-radius: 8px; width: 120px; height: 168px; box-shadow: 6px 6px 0 var(--shadow); background-image: var(--stripes-big); }
.table-seat .slot { width: 120px; height: 168px; font-size: 40px; }
/* One line: display.js shrinks a long name to fit; an ellipsis is the last resort. */
.table-seat__name { max-width: 100%; font-family: var(--font-pixel); font-size: 26px; color: var(--dim); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.table-seat.is-done .table-seat__name { color: var(--snow); }

/* Boss answer */
.boss-head { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.boss-head .tv-label { font-size: 34px; color: var(--boss-pink); letter-spacing: 6px; }
.boss-head .boss-wordmark { font-size: 120px; transform: rotate(-2deg); }
.boss-cards { display: flex; gap: 64px; align-items: center; justify-content: center; }
.boss-rule.on-tv {
  --card-border: 6px;
  --tilt: 2deg;
  width: 620px;
  padding: 36px 44px;
  gap: 16px;
}
.boss-rule.on-tv .card-label { font-size: 28px; }
.boss-rule.on-tv .boss-rule__title { font-size: 76px; line-height: 1; }
.boss-rule.on-tv .boss-rule__detail { font-size: 32px; }
.prompt-card.on-tv.is-boss-prompt { width: 900px; min-height: 0; padding: 44px 52px; --card-shadow: 12px; }
.prompt-card.on-tv.is-boss-prompt .prompt-text { font-size: 60px; }
.screen--answer.is-boss { gap: 32px; }
.screen--answer.is-boss .fuse-row { width: 1584px; }
.screen--answer.is-boss .table-seat .card-back, .screen--answer.is-boss .table-seat .slot { width: 96px; height: 134px; }

/* Vote */
.vote-top { display: flex; justify-content: space-between; align-items: flex-start; }
.prompt-card.on-tv-small {
  --card-border: 4px;
  --card-shadow: 8px;
  --tilt: -2deg;
  width: 760px;
  padding: 28px 36px;
  font-size: 44px;
  line-height: 1.1;
}
.vote-clock { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; font-family: var(--font-pixel); }
.vote-clock .timer { font-size: 72px; font-weight: 700; line-height: 1; }
.vote-clock .tv-label { font-size: 26px; }
.fan { flex: 1; display: flex; justify-content: center; align-items: center; }
.fan-card {
  --card-border: 5px;
  --card-shadow: 10px;
  flex: none;
  width: calc(380px * var(--k, 1));
  height: calc(520px * var(--k, 1));
  margin: 0 -6px;
  padding: calc(24px * var(--k, 1)) calc(28px * var(--k, 1));
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transform: translateY(var(--lift, 0px)) rotate(var(--tilt, 0deg));
}
.fan-card .corner { font-family: var(--font-pixel); font-size: calc(56px * var(--k, 1)); font-weight: 700; line-height: 1; }
.fan-card .corner:last-child { align-self: flex-end; transform: rotate(180deg); }
.fan-card__text { font-size: max(24px, calc(40px * var(--k, 1))); font-weight: 700; line-height: 1.12; overflow-wrap: anywhere; }
.pips { display: flex; justify-content: center; flex-wrap: wrap; gap: 20px; font-family: var(--font-pixel); font-size: 26px; }
.pip { padding: 8px 16px; border-radius: 6px; border: 3px solid var(--dashed); color: var(--muted); }
.pip.is-done { background: var(--chip); border-color: var(--ink); color: var(--chip-ink); }

/* Reveal */
.screen--reveal { gap: 64px; }
.reveal-left { width: 760px; flex: none; display: flex; flex-direction: column; gap: 36px; justify-content: center; }
.reveal-left > .tv-label { font-size: 30px; }
.winner { position: relative; }
.winner-card {
  --card-border: 6px;
  --card-radius: 12px;
  --card-shadow: 14px;
  --tilt: -3deg;
  width: 640px;
  height: 720px;
  padding: 36px 40px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
}
.winner-card .corner { font-family: var(--font-pixel); font-size: 60px; font-weight: 700; line-height: 1; }
.winner-card__text { font-size: 62px; font-weight: 800; line-height: 1.08; overflow-wrap: anywhere; }
.winner-card__foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px; }
.winner-card .paws { --paw: 58px; display: flex; flex-wrap: wrap; gap: 10px; }
.winner-card .paws.is-many { --paw: 46px; gap: 6px; }
.signature { margin-left: auto; font-family: var(--font-pixel); font-size: 40px; font-weight: 700; white-space: nowrap; }
.winner .stamp { position: absolute; right: 40px; top: 90px; font-size: 54px; padding: 10px 22px; border-width: 6px; }
/* Everything keeps its size; only the list of other answers gives way, and the compact
 * sizes (four or more others) make sure it never has to. */
.reveal-right { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 40px; font-family: var(--font-pixel); }
.reveal-right > * { flex: none; }
.reveal-right > .others { flex: 0 1 auto; min-height: 0; overflow: hidden; }
.reveal-right .score-equation {
  --eq-gap: 24px;
  --card-border: 5px;
  --card-shadow: 8px;
  --chip-pad: 20px 28px;
  --chip-label: 26px;
  --chip-value: 76px;
  --op-size: 72px;
}
/* The boxes step down as mults pile up, so five still fit on one row. */
.reveal-right.is-compact .score-equation,
.reveal-right .score-equation:is([data-mults="2"], [data-mults="3"]) { --chip-pad: 14px 20px; --chip-label: 22px; --chip-value: 52px; --op-size: 52px; --eq-gap: 16px; }
.reveal-right .score-equation:is([data-mults="4"], [data-mults="5"]) { --chip-pad: 10px 14px; --chip-label: 20px; --chip-value: 40px; --op-size: 40px; --eq-gap: 10px; --card-shadow: 6px; }
.big-total { position: relative; height: 300px; display: flex; align-items: center; }
.big-total svg { position: absolute; left: 0; top: 0; width: 760px; height: 300px; }
.big-total .flame-back { fill: var(--tiger); stroke: var(--ink); stroke-width: 5; stroke-linejoin: round; }
.big-total .flame-core { fill: var(--flame); }
.big-total__value {
  position: relative;
  padding-left: 90px;
  font-size: 220px;
  font-weight: 700;
  line-height: 1;
  color: #ffffff;
  -webkit-text-stroke: 8px var(--ink);
  paint-order: stroke fill;
  transform: rotate(-2deg);
}
.reveal-right.is-compact { gap: 24px; }
.reveal-right.is-compact .big-total { height: 200px; }
.reveal-right.is-compact .big-total svg { width: 507px; height: 200px; }
.reveal-right.is-compact .big-total__value { padding-left: 60px; font-size: 150px; -webkit-text-stroke-width: 6px; }
.others { display: flex; flex-direction: column; gap: 10px; font-size: 26px; }
.others li { display: flex; justify-content: space-between; gap: 24px; padding: 10px 0; border-bottom: 3px solid var(--rule); text-transform: uppercase; }
.others__text { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.others__by { white-space: nowrap; }
.others .points { flex: none; color: var(--dim); }
.others .points.is-scored { color: var(--snow); }
.reveal-right.is-compact .others, .others.is-columns { gap: 4px; font-size: 22px; }
.reveal-right.is-compact .others li, .others.is-columns li { padding: 6px 0; }
.reveal-empty { align-items: center; justify-content: center; }

/* Dead heat: the tied cards side by side, smaller, with DEAD HEAT stamped across them. */
.dead-heat { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 24px; font-family: var(--font-pixel); }
.dead-heat > .tv-label { font-size: 30px; text-transform: uppercase; }
/* The stamp straddles the cards' top edge, clear of their text. */
.heat-row { position: relative; flex: none; padding-top: 52px; }
.heat-cards { display: flex; justify-content: center; align-items: flex-start; gap: 56px; }
.heat { width: 480px; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.heat-card {
  --card-border: 5px;
  --card-radius: 12px;
  --card-shadow: 10px;
  width: 480px;
  height: 360px;
  padding: 24px 28px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 12px;
  font-family: var(--font-card);
}
.heat-card .corner { font-family: var(--font-pixel); font-size: 44px; font-weight: 700; line-height: 1; }
.heat-card__text { font-size: 40px; font-weight: 800; line-height: 1.08; overflow-wrap: anywhere; }
.heat-card__foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 10px; }
.heat-card .paws { --paw: 40px; display: flex; flex-wrap: wrap; gap: 6px; }
.heat-card .paws.is-many { --paw: 32px; gap: 4px; }
.heat-card .signature { font-size: 30px; }
.heat .score-equation.is-small {
  justify-content: center;
  --eq-gap: 8px;
  --card-border: 4px;
  --card-shadow: 4px;
  --chip-pad: 6px 10px;
  --chip-label: 18px;
  --chip-value: 28px;
  --op-size: 28px;
}
.heat-total {
  font-size: 72px;
  font-weight: 700;
  line-height: 1;
  color: #ffffff;
  -webkit-text-stroke: 4px var(--ink);
  paint-order: stroke fill;
}
.heat--more { width: auto; align-self: center; }
.heat--more .slot { width: 200px; height: 280px; font-size: 40px; border-color: var(--dim); --tilt: 3deg; }
.heat-stamp {
  position: absolute;
  left: 50%;
  top: 0;
  z-index: 2;
  translate: -50% 0;
  font-size: 64px;
  padding: 6px 26px;
  border-width: 7px;
  --tilt: -4deg;
  white-space: nowrap;
}
.others.is-columns { display: grid; grid-template-columns: 1fr 1fr; column-gap: 64px; flex: 0 1 auto; min-height: 0; overflow: hidden; }

/* Scores and end */
.tv-title { font-family: var(--font-pixel); font-size: 96px; font-weight: 700; line-height: 1; }
.tv-standings { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 64px; font-family: var(--font-pixel); }
.tv-standing {
  display: grid;
  grid-template-columns: 2.2ch auto 1fr auto;
  align-items: center;
  gap: 24px;
  padding: 16px 24px;
  border-bottom: 4px solid var(--rule);
  font-size: 44px;
}
.tv-standing .card-back { width: 48px; height: 66px; --card-border: 4px; }
.tv-standing__rank { color: var(--dim); }
.tv-standing__name { min-width: 0; overflow-wrap: anywhere; }
.tv-standing__score { font-weight: 700; font-variant-numeric: tabular-nums; }
.tv-standing.is-top { position: relative; background: var(--snow); color: var(--ink); border: 5px solid var(--ink); border-radius: 10px; box-shadow: 8px 8px 0 var(--shadow); }
.tv-standing.is-top .tv-standing__rank { color: var(--on-snow-muted); }
/* The end screen's one stamp, WINNER or JOINT WINNERS, tilted beside the title. */
.tv-title-row { display: flex; align-items: center; gap: 48px; }
.title-stamp { font-size: 44px; padding: 8px 22px; border-width: 6px; --tilt: -6deg; white-space: nowrap; }
.scores-foot { margin-top: auto; display: flex; justify-content: flex-end; align-items: center; gap: 32px; }
.prompt-text { margin: 0; font: inherit; }
.switch__text { text-transform: uppercase; }
.gone-card { padding: 22px 20px; font-size: 22px; font-weight: 700; --tilt: -1deg; }
.gone-card h1, .gone-title { font: inherit; }
.tv-label { font-weight: 400; }
.boss-note { margin-top: 28px; font-size: 30px; color: var(--boss-pink); }
.reveal-left > .tv-label { text-transform: uppercase; }
.is-boss .answer-card { height: clamp(200px, 30vh, 280px); height: clamp(200px, 30dvh, 280px); }
.result-card {
  --card-border: 4px;
  --card-shadow: 6px;
  --tilt: -2deg;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px;
  font-size: 24px;
  font-weight: 800;
  line-height: 1.15;
  overflow-wrap: anywhere;
}
.result-card .paws { --paw: 36px; display: flex; flex-wrap: wrap; gap: 6px; }
.nowrap { white-space: nowrap; }
/* At 200% zoom a phone is under 260 CSS px wide: a long word and its blank can't share a line. */
@media (max-width: 260px) { .nowrap { white-space: normal; } }

/* ---------- Motion ---------- */
/*
 * The CSS half of the juice: idle loops that run on their own. Dealing, flipping,
 * stamping and counting are in juice.js. Loops animate the individual `rotate`,
 * `translate` and `scale` properties so they stack with each card's `transform`
 * tilt. Their delays include var(--t) (set by keepTime in juice.js) so a rebuilt
 * screen picks each loop up where the old one was instead of jumping.
 */

/* Living cards: a slow sway, out of step from card to card. */
@keyframes sway {
  from { rotate: calc(var(--sway, 1deg) * -1); }
  to { rotate: var(--sway, 1deg); }
}
.prompt-card, .fan-card, .seat-card, .winner-card, .you-card {
  animation: sway var(--sway-time, 3.2s) ease-in-out calc(var(--t, 0ms) + var(--sway-offset, 0ms)) infinite alternate;
}
.prompt-card.on-tv, .winner-card { --sway: 0.6deg; --sway-time: 4.2s; }
.winner-card { --sway-offset: -1.7s; }
.seat:nth-child(4n + 2) .seat-card, .fan-card:nth-child(4n + 2) { --sway-offset: -1.1s; }
.seat:nth-child(4n + 3) .seat-card, .fan-card:nth-child(4n + 3) { --sway-offset: -2.5s; }
.seat:nth-child(4n + 4) .seat-card, .fan-card:nth-child(4n + 4) { --sway-offset: -0.6s; }

/* Living background: the glows drift. Calm while people write, lively at the reveal. */
@keyframes drift {
  0% { translate: calc(var(--drift) * -1) calc(var(--drift) * -0.6); scale: 1; }
  50% { translate: var(--drift) calc(var(--drift) * 0.5); scale: 1.08; }
  100% { translate: calc(var(--drift) * -0.4) var(--drift); scale: 1.02; }
}
.screen::before, body.phone::before {
  --drift: 3%;
  animation: drift var(--drift-time, 30s) ease-in-out var(--t, 0ms) infinite alternate;
}
.screen--answer::before, body.phone[data-phase="answer"]::before { --drift: 2%; --drift-time: 40s; }
.screen--reveal::before, body.phone[data-phase="reveal"]::before { --drift: 7%; --drift-time: 7s; }

/* A card turning over: the striped back that covers the face until halfway. */
.fan-card { position: relative; }
.flip-back {
  position: absolute;
  inset: calc(var(--card-border, 4px) * -1);
  border: var(--card-border, 4px) solid var(--ink);
  border-radius: var(--card-radius, 10px);
  background-color: var(--card-colour, var(--tiger));
  background-image: var(--stripes-big);
  pointer-events: none;
}

/* The fuse burns smoothly between the countdown's quarter-second ticks. */
.fuse__burn { transition: width 0.25s linear; }

/* The last five seconds: the fuse and the seconds pulse. */
@keyframes urgent {
  from { scale: 1; }
  to { scale: 1.12; }
}
@keyframes urgent-fuse {
  from { scale: 1; box-shadow: 0 0 0 0 var(--tiger); }
  to { scale: 1 1.25; box-shadow: 0 0 0 6px var(--tiger); }
}
.is-urgent .fuse-row .timer, .is-urgent .vote-clock .timer, .hud.is-urgent .timer {
  color: var(--flame);
  animation: urgent 0.5s ease-in-out var(--t, 0ms) infinite alternate;
}
.is-urgent .fuse { animation: urgent-fuse 0.5s ease-in-out var(--t, 0ms) infinite alternate; }

/* The flame behind the total flickers in two pixel-ish steps. */
.big-total svg { transform-origin: 50% 100%; }
.big-total .flame-core { transform-box: fill-box; transform-origin: 50% 100%; animation: flicker 0.36s steps(1) infinite; }
@keyframes flicker {
  0% { scale: 1 1; }
  50% { scale: 1.02 1.07; }
}

/* Swipe to play: touch-action stays auto, so the page still scrolls and zooms from the
 * card and a long answer scrolls in its box; juice.js claims only a touch whose first
 * move is upward (see swipeToPlay). */
.answer-card.is-dragging { user-select: none; -webkit-user-select: none; cursor: grabbing; }
.answer-card.is-dragging textarea { pointer-events: none; }
.swipe-hint { text-align: center; animation: nudge 1.4s ease-in-out infinite; }
@keyframes nudge {
  0%, 60%, 100% { translate: 0 0; }
  75% { translate: 0 -5px; }
}

/* The display's sound switch, in the stage's bottom-right margin (stage px, so it
 * scales with the screen and never lands on its content). */
.sound-toggle {
  position: absolute;
  right: 20px;
  bottom: 6px;
  z-index: 10;
  min-height: 48px;
  padding: 4px 12px 4px 8px;
  border-radius: 6px;
  background: rgba(14, 42, 38, 0.8);
}
.display .sound-toggle { font-size: 22px; }
.display .sound-toggle .switch__track { width: 48px; height: 28px; border-width: 3px; }
.display .sound-toggle .switch__track::after { width: 16px; height: 16px; top: 3px; left: 3px; }
.display .sound-toggle input:checked + .switch__track::after { left: auto; right: 3px; }

/* Reduced motion: no loops at all. juice.js swaps its moves for quick fades. */
@media (prefers-reduced-motion: reduce) {
  .prompt-card, .fan-card, .seat-card, .winner-card, .you-card,
  .screen::before, body.phone::before, .big-total .flame-core, .swipe-hint,
  .is-urgent .fuse, .is-urgent .fuse-row .timer, .is-urgent .vote-clock .timer, .hud.is-urgent .timer {
    animation: none;
  }
  .fuse__burn { transition: none; }
}