@font-face {
  font-family: "Israr";
  src: url("assets/fonts/israr.otf") format("opentype");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

@property --wash-a {
  syntax: "<color>";
  inherits: true;
  initial-value: #694cff;
}

@property --wash-b {
  syntax: "<color>";
  inherits: true;
  initial-value: #35c7d1;
}

@property --wash-c {
  syntax: "<color>";
  inherits: true;
  initial-value: #ff8b69;
}

:root {
  color-scheme: light;
  --ink: #111117;
  --ink-soft: #24212c;
  --paper: #fff4da;
  --paper-bright: #fffaf0;
  --muted: #615a68;
  --electric: #35efbf;
  --sun: #ffd348;
  --coral: #ff5b70;
  --violet: #7157f5;
  --sky: #4bc8eb;
  --wash-a: #694cff;
  --wash-b: #35c7d1;
  --wash-c: #ff8b69;
  --wash-speed: 22s;
  --flow-speed: 30s;
  --speck-speed: 50s;
  --line: rgba(17, 17, 23, .18);
  --paper-line: rgba(255, 250, 240, .24);
  --hard-shadow: 12px 14px 0 rgba(17, 17, 23, .22);
  --soft-shadow: 0 28px 80px rgba(20, 12, 42, .25);
  /* Drop the eventual WOFF2 faces in front of these hooks; the fallbacks stay usable meanwhile. */
  --font: "KBank Text", "Noto Sans Arabic", "Tahoma", "Segoe UI", sans-serif;
  --display-font: "KBank Display", "Noto Kufi Arabic", "Noto Sans Arabic", "Tahoma", sans-serif;
  --motion-enter: cubic-bezier(.18, .82, .22, 1);
  --motion-snap: cubic-bezier(.16, 1.28, .3, 1);
}

* { box-sizing: border-box; }
html, body { min-height: 100%; margin: 0; }
html { background: var(--wash-a); }
body {
  display: flow-root;
  min-height: 100vh;
  overflow-x: hidden;
  color: var(--paper-bright);
  font-family: var(--font);
  direction: rtl;
  background:
    radial-gradient(circle at 12% 18%, color-mix(in srgb, var(--wash-b) 90%, white 10%), transparent 36rem),
    radial-gradient(circle at 88% 82%, color-mix(in srgb, var(--wash-c) 88%, white 12%), transparent 42rem),
    linear-gradient(135deg, var(--wash-a), var(--wash-b) 52%, var(--wash-c));
  background-repeat: no-repeat;
  background-position: -4% -3%, 104% 103%, 50% 50%;
  background-size: 112% 112%, 116% 116%, 120% 120%;
  animation: wash-breathe var(--wash-speed) ease-in-out infinite alternate;
  transition: --wash-a .9s ease, --wash-b .9s ease, --wash-c .9s ease, color .35s ease;
}

body[data-surface="display"] {
  --font: "Israr", "Noto Sans Arabic", "Tahoma", "Segoe UI", sans-serif;
  --display-font: "Israr", "Noto Kufi Arabic", "Noto Sans Arabic", "Tahoma", sans-serif;
}

body::before,
body::after {
  content: "";
  position: fixed;
  inset: -9vmax;
  pointer-events: none;
  z-index: 0;
}

body::before {
  opacity: .47;
  background: url("assets/ui/signal-field.svg") center / cover no-repeat;
  animation: field-drift var(--flow-speed) ease-in-out infinite alternate;
  will-change: transform;
}

body::after {
  inset: 0;
  opacity: .11;
  background: url("assets/ui/paper-grain.svg") center / 240px 240px repeat;
  mix-blend-mode: soft-light;
  animation: grain-weave 6.4s steps(4, end) infinite;
  will-change: transform;
}

body > * { position: relative; z-index: 1; }

.ambient-layer {
  position: fixed;
  pointer-events: none;
  z-index: 0;
}

.ambient-specks {
  inset: -8vmax;
  opacity: .24;
  background: url("assets/ui/signal-specks.svg") center / cover no-repeat;
  mix-blend-mode: soft-light;
  animation: speck-drift var(--speck-speed) ease-in-out infinite alternate;
  will-change: transform;
}

.ambient-pulse {
  inset: -18vmax;
  opacity: 0;
  background: radial-gradient(circle at 50% 52%, rgba(255,255,255,.32), rgba(255,255,255,.08) 22%, transparent 48%);
  mix-blend-mode: soft-light;
  transform: scale(.62);
}

body[data-phase="reveal"] .ambient-pulse,
body[data-phase="finale_reveal"] .ambient-pulse,
body[data-phase="final"] .ambient-pulse {
  animation: ambient-pulse 1.25s cubic-bezier(.18,.72,.24,1) both;
}

body.ambient-paused,
body.ambient-paused::before,
body.ambient-paused::after,
body.ambient-paused .ambient-layer {
  animation-play-state: paused !important;
}

body[data-phase="landing"],
body[data-phase="setup"],
body[data-phase="lobby"] {
  --wash-a: #ff536a;
  --wash-b: #ed6ba5;
  --wash-c: #ffc64c;
  --wash-speed: 27s;
  --flow-speed: 36s;
  --speck-speed: 60s;
}

body[data-phase="category_select"] {
  --wash-a: #6149ef;
  --wash-b: #3ec5de;
  --wash-c: #ff8d78;
}

body[data-phase="countdown"],
body[data-phase="round_intro"] {
  --wash-a: #ff5e68;
  --wash-b: #ff9a66;
  --wash-c: #ffd54f;
}

body[data-phase="question_present"] {
  --wash-a: #493edf;
  --wash-b: #347fc7;
  --wash-c: #c274d8;
}

body[data-phase="answer"] {
  --wash-a: #6846ed;
  --wash-b: #c650bf;
  --wash-c: #ff8c77;
  --wash-speed: 18s;
  --flow-speed: 23s;
  --speck-speed: 39s;
}

body[data-phase="reveal"] {
  --wash-a: #2c86cf;
  --wash-b: #45c8c4;
  --wash-c: #f2a27d;
}

body[data-phase="scoreboard"] {
  --wash-a: #12b7a5;
  --wash-b: #51d8ad;
  --wash-c: #c9db72;
  --flow-speed: 34s;
  --speck-speed: 56s;
}

body[data-phase="finale_intro"],
body[data-phase="finale_present"],
body[data-phase="finale_answer"],
body[data-phase="finale_reveal"] {
  --wash-a: #181522;
  --wash-b: #592850;
  --wash-c: #f05e64;
  --wash-speed: 17s;
  --flow-speed: 20s;
  --speck-speed: 34s;
}

body[data-phase="final"] {
  --wash-a: #ed5661;
  --wash-b: #ffad50;
  --wash-c: #47cfc0;
}

@keyframes field-drift {
  0% { transform: translate3d(-2.4vw, -1.2vh, 0) scale(1.025) rotate(-.45deg); }
  50% { transform: translate3d(1.5vw, 1.7vh, 0) scale(1.065) rotate(.2deg); }
  100% { transform: translate3d(2.8vw, -.8vh, 0) scale(1.04) rotate(.55deg); }
}

@keyframes wash-breathe {
  0% {
    background-position: -4% -3%, 104% 103%, 50% 50%;
    background-size: 112% 112%, 116% 116%, 120% 120%;
  }
  50% {
    background-position: 1% 2%, 99% 98%, 48% 52%;
    background-size: 118% 118%, 111% 111%, 124% 124%;
  }
  100% {
    background-position: 5% 4%, 95% 96%, 52% 48%;
    background-size: 114% 114%, 119% 119%, 121% 121%;
  }
}

@keyframes speck-drift {
  0% { transform: translate3d(2.2vw, 1.3vh, 0) scale(1.025) rotate(.45deg); }
  50% { transform: translate3d(-.6vw, -1.5vh, 0) scale(1.055) rotate(-.25deg); }
  100% { transform: translate3d(-2.6vw, .5vh, 0) scale(1.035) rotate(-.7deg); }
}

@keyframes grain-weave {
  0%, 100% { transform: translate3d(0, 0, 0); }
  25% { transform: translate3d(1px, -1px, 0); }
  50% { transform: translate3d(-1px, 1px, 0); }
  75% { transform: translate3d(1px, 1px, 0); }
}

@keyframes ambient-pulse {
  0% { opacity: 0; transform: scale(.62); }
  28% { opacity: .42; }
  100% { opacity: 0; transform: scale(1.32); }
}

@keyframes container-enter {
  0% { opacity: 0; translate: 0 28px; scale: .975; }
  72% { opacity: 1; translate: 0 -3px; scale: 1.006; }
  100% { opacity: 1; translate: 0 0; scale: 1; }
}

@keyframes copy-rise {
  from { opacity: 0; translate: 0 18px; }
  to { opacity: 1; translate: 0 0; }
}

@keyframes copy-snap {
  0% { opacity: 0; translate: 0 24px; scale: .9; }
  68% { opacity: 1; translate: 0 -3px; scale: 1.025; }
  100% { opacity: 1; translate: 0 0; scale: 1; }
}

@keyframes item-deal {
  from { opacity: 0; translate: 0 20px; scale: .955; }
  to { opacity: 1; translate: 0 0; scale: 1; }
}

@keyframes row-deal {
  from { opacity: 0; translate: var(--entry-x, 28px) 8px; scale: .97; }
  to { opacity: 1; translate: 0 0; scale: 1; }
}

@keyframes line-draw {
  from { opacity: 0; scale: 0 1; }
  to { opacity: 1; scale: 1 1; }
}

@keyframes backing-snap {
  from { opacity: 0; scale: .84 .68; }
  to { opacity: 1; scale: 1 1; }
}

@keyframes chip-snap {
  0% { opacity: 0; translate: 0 -12px; scale: .86; }
  70% { opacity: 1; translate: 0 2px; scale: 1.045; }
  100% { opacity: 1; translate: 0 0; scale: 1; }
}

@keyframes phase-chip-snap {
  0% { opacity: 0; translate: 0 -12px; scale: .86; }
  70% { opacity: 1; translate: 0 2px; scale: 1.045; }
  100% { opacity: 1; translate: 0 0; scale: 1; }
}

@keyframes overlay-enter {
  from { opacity: 0; }
  to { opacity: 1; }
}

button, input, select { font: inherit; }
button, .button {
  min-height: 50px;
  border: 0;
  border-radius: 0;
  padding: .9rem 1.25rem;
  color: var(--ink);
  background: var(--electric);
  font-weight: 900;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  clip-path: polygon(2% 5%, 98% 0, 100% 88%, 95% 100%, 1% 95%, 0 15%);
  box-shadow: none;
  transition: transform .18s ease, filter .18s ease, opacity .18s ease;
}

button:hover, .button:hover { transform: translateY(-3px) rotate(-.6deg); filter: brightness(1.06); }
button:active, .button:active { transform: translateY(1px) scale(.985); }
button:disabled { cursor: not-allowed; opacity: .45; transform: none; }
button:focus-visible, .button:focus-visible, input:focus-visible, select:focus-visible {
  outline: 4px solid var(--paper-bright);
  outline-offset: 4px;
}

.button.secondary, button.secondary { color: var(--paper-bright); background: var(--ink); }
.button.gold, button.gold { color: var(--ink); background: var(--sun); }
.button.danger, button.danger { color: var(--paper-bright); background: #b72645; }

input, select {
  width: 100%;
  min-height: 54px;
  padding: .9rem 1rem;
  border: 3px solid var(--ink);
  border-radius: 0;
  color: var(--ink);
  background: var(--paper-bright);
  outline: none;
  box-shadow: 5px 6px 0 rgba(17, 17, 23, .18);
}

input:focus, select:focus { border-color: var(--violet); }

.shell {
  width: min(1180px, calc(100% - 32px));
  margin: 0 auto;
  padding: 28px 0 48px;
}

.landing-shell {
  min-height: 100vh;
  display: grid;
  align-content: center;
  gap: clamp(24px, 4vw, 46px);
}

.landing-shell > .brand,
.landing-shell > .hero {
  animation: copy-rise .55s var(--motion-enter) both;
}
.landing-shell > .hero { animation-delay: 90ms; }

.brand { display: flex; align-items: center; gap: 14px; }
.brand-mark {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  color: var(--paper-bright);
  background: var(--ink);
  font-size: 1.9rem;
  font-weight: 950;
  line-height: 1;
  clip-path: polygon(7% 4%, 91% 0, 100% 20%, 94% 94%, 23% 100%, 0 81%, 4% 18%);
  transform: rotate(-4deg);
  box-shadow: var(--hard-shadow);
}

.brand h1 { margin: 0; font: 950 clamp(1.5rem, 4vw, 2.25rem)/1.1 var(--display-font); }
.brand p { margin: 4px 0 0; color: currentColor; opacity: .74; font-weight: 700; }

.hero { max-width: 940px; margin: 0 auto; text-align: center; }
.eyebrow, .setup-kicker {
  display: inline-block;
  width: max-content;
  padding: .42rem .85rem;
  color: var(--paper-bright);
  background: var(--ink);
  font-weight: 950;
  letter-spacing: .02em;
  transform: rotate(-1.3deg);
  clip-path: polygon(2% 0, 100% 8%, 97% 100%, 0 92%);
}

.hero h2 {
  max-width: 900px;
  margin: .18em auto .08em;
  font: 950 clamp(2.8rem, 8vw, 6.9rem)/.98 var(--display-font);
  text-wrap: balance;
  text-shadow: 4px 5px 0 rgba(17, 17, 23, .17);
}

.hero p { max-width: 760px; margin: .8rem auto 0; font-size: clamp(1rem, 2.1vw, 1.28rem); line-height: 1.75; font-weight: 700; }
.signal-line {
  width: min(760px, 86%);
  height: 16px;
  margin: 1rem auto;
  background: var(--paper-bright);
  clip-path: polygon(0 44%, 7% 18%, 14% 70%, 22% 28%, 30% 62%, 39% 14%, 47% 68%, 57% 30%, 66% 77%, 75% 23%, 84% 61%, 92% 19%, 100% 48%, 100% 70%, 92% 43%, 84% 83%, 75% 47%, 66% 95%, 57% 54%, 47% 90%, 39% 38%, 30% 84%, 22% 53%, 14% 94%, 7% 42%, 0 68%);
}
.hero-line {
  transform: rotate(-1deg);
  transform-origin: center;
  animation: line-draw .72s var(--motion-enter) 250ms both;
}

.mode-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.release-version {
  width: max-content;
  margin: -18px auto 0;
  padding: .35rem .7rem;
  color: var(--ink);
  border: 2px solid currentColor;
  background: rgba(255, 255, 255, .5);
  font-size: .78rem;
  font-weight: 900;
  direction: ltr;
}
.mode-card {
  position: relative;
  min-height: 225px;
  padding: 28px 24px 23px;
  display: grid;
  align-content: space-between;
  gap: 20px;
  color: var(--ink);
  text-decoration: none;
  background: var(--paper);
  box-shadow: var(--hard-shadow);
  clip-path: polygon(1% 4%, 95% 0, 100% 9%, 98% 96%, 8% 100%, 0 91%);
  transition: transform .2s ease, filter .2s ease;
  animation: item-deal .55s var(--motion-snap) both;
}
.mode-card::before {
  content: attr(data-mark);
  position: absolute;
  top: 14px;
  left: 18px;
  font: 950 2rem/1 var(--display-font);
  opacity: .28;
}
.mode-card:nth-child(1) { transform: rotate(1.2deg); background: #fff0cd; }
.mode-card:nth-child(2) { transform: translateY(-9px) rotate(-1deg); background: #baf5df; }
.mode-card:nth-child(3) { transform: rotate(.7deg); background: #d9d2ff; }
.mode-card:nth-child(1) { animation-delay: 180ms; }
.mode-card:nth-child(2) { animation-delay: 245ms; }
.mode-card:nth-child(3) { animation-delay: 310ms; }
.mode-card:hover { transform: translateY(-8px) rotate(0); filter: saturate(1.08); }
.mode-icon { font: 950 2.8rem/1 var(--display-font); }
.mode-card h3 { margin: .25rem 0 .4rem; font-size: 1.55rem; }
.mode-card p { margin: 0; color: var(--muted); line-height: 1.55; font-weight: 700; }

.panel {
  color: var(--paper-bright);
  background: rgba(17, 17, 23, .92);
  border: 0;
  border-radius: 0;
  padding: clamp(18px, 3vw, 34px);
  box-shadow: var(--hard-shadow);
  clip-path: polygon(1% 2%, 98% 0, 100% 8%, 99% 96%, 93% 100%, 2% 98%, 0 87%);
}

.setup-panel {
  width: min(580px, calc(100% - 28px));
  margin: 7vh auto 0;
  display: grid;
  gap: 19px;
  color: var(--ink);
  background: var(--paper);
  transform: rotate(-.35deg);
  animation: container-enter .58s var(--motion-snap) both;
}
.setup-panel::after {
  content: "✦";
  position: absolute;
  left: -20px;
  bottom: -24px;
  width: 74px;
  height: 74px;
  display: grid;
  place-items: center;
  color: var(--ink);
  background: var(--sun);
  font-size: 2.2rem;
  clip-path: polygon(50% 0, 62% 31%, 92% 14%, 73% 43%, 100% 56%, 68% 61%, 81% 96%, 55% 74%, 36% 100%, 34% 68%, 0 78%, 25% 54%, 0 37%, 34% 35%);
}
.setup-panel h1, .setup-panel h2 { margin: 0; }
.setup-panel p { margin: 0; color: var(--muted); line-height: 1.7; font-weight: 700; }
.setup-panel > * { animation: copy-rise .42s var(--motion-enter) both; }
.setup-panel > :nth-child(1) { animation-delay: 100ms; }
.setup-panel > :nth-child(2) { animation-delay: 150ms; }
.setup-panel > :nth-child(3) { animation-delay: 200ms; }
.setup-panel > :nth-child(4) { animation-delay: 250ms; }
.setup-panel > :nth-child(5) { animation-delay: 300ms; }
.setup-panel > :nth-child(6) { animation-delay: 350ms; }
.field { display: grid; gap: 8px; }
.join-form { display: grid; gap: 18px; min-width: 0; }
.avatar-picker { margin: 0; padding: 0; min-width: 0; border: 0; }
.avatar-picker legend { padding: 0; margin-bottom: 10px; color: var(--ink); font-weight: 900; }
.avatar-choices { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.avatar-option { position: relative; min-width: 0; cursor: pointer; touch-action: manipulation; }
.avatar-option input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 1; }
.avatar-tile {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 44px;
  min-height: 56px;
  padding: 3px;
  border: 2px solid var(--line);
  border-radius: 12px;
  background: var(--paper-bright);
  overflow: hidden;
  transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.avatar-choice-image {
  display: block;
  width: min(44px, 100%);
  height: auto;
  aspect-ratio: 1;
  max-width: 100%;
  object-fit: cover;
  border-radius: 50%;
}
.avatar-option input:checked + .avatar-tile { border-color: var(--ink); background: var(--sun); box-shadow: 3px 3px 0 var(--ink); }
.avatar-option input:checked + .avatar-tile::after { content: "✓"; position: absolute; inset-inline-end: 2px; top: 1px; color: var(--ink); font: 900 .85rem/1 var(--font); }
.avatar-option input:focus-visible + .avatar-tile { outline: 3px solid var(--violet); outline-offset: 3px; }
.avatar-option:hover .avatar-tile { border-color: var(--ink); }
@media (max-width: 360px) {
  .avatar-choices { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.phone-identity, .score-player { display: flex; align-items: center; gap: 10px; min-width: 0; }
.score-player-name { overflow: hidden; text-overflow: ellipsis; }
.field label { color: var(--ink); font-size: .92rem; font-weight: 900; }
.row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.row > * { flex: 1; }
.status { color: var(--muted); min-height: 1.4em; font-weight: 800; }
.status.error { color: #b0193b; }

.game-shell { min-height: 100vh; display: grid; grid-template-rows: 1fr; }
.topbar {
  position: absolute;
  inset: 0 0 auto;
  z-index: 5;
  min-height: 88px;
  padding: 16px clamp(16px, 3vw, 42px);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 16px;
  align-items: center;
  color: var(--paper-bright);
  background: transparent;
  border: 0;
  box-shadow: none;
  clip-path: none;
}
.topbar > :last-child { justify-self: end; }
.topbar .brand { justify-self: start; direction: rtl; }
.topbar .brand-mark { width: 45px; height: 45px; font-size: 1.45rem; box-shadow: 6px 7px 0 rgba(17,17,23,.17); }
.room-chip, .phase-chip {
  padding: .5rem .95rem;
  color: var(--paper-bright);
  background: var(--ink);
  font-weight: 900;
  clip-path: polygon(2% 2%, 100% 8%, 97% 95%, 0 100%);
}
.game-shell:not([hidden]) .topbar > * { animation: chip-snap .42s var(--motion-snap) both; }
.game-shell:not([hidden]) .topbar > :nth-child(2) { animation-delay: 70ms; }
.game-shell:not([hidden]) .topbar > :nth-child(3) { animation-delay: 120ms; }
body.phase-transitioning .game-shell:not([hidden]) .topbar > .phase-chip {
  animation: phase-chip-snap .42s var(--motion-snap) both;
}
body[data-surface="display"] .topbar { grid-template-columns: 1fr 1fr; }
body[data-surface="display"] .game-shell:not([hidden]) .topbar > :nth-child(2) { animation-delay: 120ms; }
.room-chip strong { color: var(--sun); letter-spacing: .12em; }
.timer {
  width: 62px;
  min-width: 62px;
  height: 62px;
  display: grid;
  place-items: center;
  color: var(--ink);
  background: var(--sun);
  font-size: 1.45rem;
  font-weight: 950;
  clip-path: polygon(50% 0, 63% 13%, 82% 7%, 89% 27%, 100% 42%, 90% 57%, 94% 78%, 73% 84%, 59% 100%, 43% 90%, 23% 96%, 16% 75%, 0 63%, 10% 45%, 5% 24%, 29% 18%);
  transition: transform .2s ease, background .2s ease;
}
.timer.urgent { color: var(--paper-bright); background: #bd2346; animation: timer-pulse .72s ease-in-out infinite alternate; }
@keyframes timer-pulse { to { transform: scale(1.1) rotate(4deg); } }

.stage {
  width: min(1320px, calc(100% - 38px));
  min-height: 100vh;
  margin: 0 auto;
  padding: clamp(106px, 13vh, 140px) 0 clamp(30px, 6vh, 70px);
  display: grid;
  align-content: center;
}
.stage > *,
body[data-surface="phone"] #phoneStage > * {
  animation: container-enter .52s var(--motion-enter) both;
}

.stage-card {
  position: relative;
  isolation: isolate;
  width: 100%;
  padding: clamp(18px, 3vw, 40px);
  display: grid;
  justify-items: center;
  gap: clamp(16px, 2.5vw, 30px);
  color: var(--paper-bright);
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  text-align: center;
  overflow: visible;
}
.stage-card h1, .stage-card h2, .stage-card h3 { margin: 0; }
.stage-card > .prompt-kicker,
.stage-card > .stage-title,
.stage-card > .stage-subtitle,
.stage-card > .question-image,
.stage-card > .row,
.stage-card > .scoreboard,
.stage-card > .category-grid,
.stage-card > .choice-grid {
  animation: copy-rise .46s var(--motion-enter) both;
}
.stage-card > .prompt-kicker { animation-delay: 70ms; }
.stage-card > .stage-title { animation-delay: 115ms; }
.stage-card > .signal-line {
  transform-origin: center;
  animation: line-draw .58s var(--motion-enter) 175ms both;
}
.stage-card > .question-image { animation-delay: 205ms; }
.stage-card > .stage-subtitle:not(.prompt-kicker) { animation-delay: 245ms; }
.stage-card > .row,
.stage-card > .scoreboard,
.stage-card > .category-grid,
.stage-card > .choice-grid { animation-delay: 190ms; }
.stage-title {
  max-width: 1120px;
  font: 950 clamp(2.35rem, 5.5vw, 5.6rem)/1.15 var(--display-font);
  text-wrap: balance;
  text-shadow: 4px 5px 0 rgba(17,17,23,.18);
}
.stage-subtitle {
  max-width: 920px;
  margin: 0;
  color: currentColor;
  font-size: clamp(1rem, 2.1vw, 1.42rem);
  line-height: 1.58;
  font-weight: 800;
  text-wrap: balance;
}
.prompt-kicker {
  width: max-content;
  max-width: 100%;
  padding: .4rem .85rem;
  color: var(--paper-bright);
  background: var(--ink);
  font-size: clamp(.88rem, 1.5vw, 1.1rem);
  clip-path: polygon(2% 1%, 100% 8%, 96% 100%, 0 91%);
  transform: rotate(-1deg);
}

.message-card { min-height: min(520px, 64vh); align-content: center; }
.message-card::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: min(900px, 84vw);
  height: min(300px, 34vh);
  background: var(--ink);
  clip-path: polygon(2% 8%, 98% 0, 100% 86%, 91% 100%, 0 91%);
  transform: rotate(-1.4deg);
  box-shadow: 16px 18px 0 rgba(255,244,218,.2);
  transform-origin: center;
  animation: backing-snap .5s var(--motion-snap) both;
}
.message-card::after {
  content: "✦";
  position: absolute;
  z-index: 1;
  left: 8%;
  top: 14%;
  color: var(--sun);
  font-size: clamp(3rem, 8vw, 7rem);
  transform: rotate(10deg);
}

body[data-surface="display"] .message-card::before {
  height: min(420px, 50vh);
}

.submission-float-layer { position: fixed; inset: 0; z-index: 7; pointer-events: none; overflow: hidden; }
.submission-floater { position: absolute; left: var(--slot-x); width: clamp(48px, 5vw, 72px); margin-left: clamp(-36px, -2.5vw, -24px); }
.submission-floater.float-top { top: 10px; }
.submission-floater.float-bottom { bottom: 12px; }
.submission-floater.is-arriving { animation: submission-hop .48s var(--motion-snap) both; }
.submission-float-body { display: grid; justify-items: center; gap: 3px; animation: submission-drift 3.4s ease-in-out var(--float-delay) infinite alternate; }
.submission-float-body .player-avatar { width: clamp(48px, 5vw, 72px); height: clamp(48px, 5vw, 72px); filter: drop-shadow(2px 4px 0 rgba(17,17,23,.25)); }
.submission-float-name { max-width: 100%; padding: 2px 5px; color: var(--ink); background: var(--sun); border-radius: 5px; font-size: clamp(.7rem, 1vw, .9rem); font-weight: 900; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
@keyframes submission-hop {
  0% { opacity: 0; transform: translateY(70px) scale(.2) rotate(-16deg); }
  65% { opacity: 1; transform: translateY(-6px) scale(1.14) rotate(5deg); }
  100% { opacity: 1; transform: translateY(0) scale(1) rotate(0); }
}
@keyframes submission-drift { from { transform: translate(-5px, 2px) rotate(-4deg); } to { transform: translate(5px, 7px) rotate(4deg); } }
@media (min-width: 901px) {
  body[data-surface="display"] #stage.stage:has(.question-card.answer-open:not(.reveal-mode)) { padding-block: 112px 108px; }
}
@media (max-width: 900px) {
  .submission-floater { width: 36px; margin-left: -18px; }
  .submission-float-body .player-avatar { width: 36px; height: 36px; }
  .submission-float-name { font-size: .6rem; }
  .submission-floater.float-top { top: 8px; }
  .submission-floater.float-bottom { bottom: 4px; }
}
.question-card { align-content: center; }
.question-card .stage-title { max-width: 1080px; }
.question-card .signal-line { margin: .1rem auto .25rem; }
.question-image {
  width: min(520px, 76vw);
  max-height: 33vh;
  object-fit: contain;
  margin: 0 auto;
  padding: 13px;
  background: var(--paper-bright);
  border: 0;
  border-radius: 0;
  box-shadow: 10px 12px 0 rgba(17,17,23,.24);
  clip-path: polygon(2% 3%, 96% 0, 100% 8%, 98% 96%, 6% 100%, 0 91%);
  transform: rotate(-.8deg);
}

.choice-grid > *,
.category-grid > *,
.phone-choice-grid > *,
.host-controls > * {
  --item-delay: 0ms;
  animation: item-deal .4s var(--motion-snap) both;
  animation-delay: calc(210ms + var(--item-delay));
}

:is(.choice-grid, .category-grid, .phone-choice-grid, .host-controls) > :nth-child(1) { --item-delay: 0ms; }
:is(.choice-grid, .category-grid, .phone-choice-grid, .host-controls) > :nth-child(2) { --item-delay: 55ms; }
:is(.choice-grid, .category-grid, .phone-choice-grid, .host-controls) > :nth-child(3) { --item-delay: 110ms; }
:is(.choice-grid, .category-grid, .phone-choice-grid, .host-controls) > :nth-child(4) { --item-delay: 165ms; }
:is(.choice-grid, .category-grid, .phone-choice-grid, .host-controls) > :nth-child(5) { --item-delay: 220ms; }
:is(.choice-grid, .category-grid, .phone-choice-grid, .host-controls) > :nth-child(6) { --item-delay: 275ms; }

.choice-grid {
  width: min(1040px, 100%);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 20px;
  counter-reset: choice;
}
.choice {
  position: relative;
  min-height: 82px;
  padding: 1rem 3.6rem 1rem 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--paper-bright);
  background: var(--ink);
  border: 0;
  border-radius: 0;
  font-size: clamp(1rem, 1.9vw, 1.28rem);
  line-height: 1.35;
  font-weight: 900;
  text-wrap: balance;
  clip-path: polygon(2% 3%, 98% 0, 100% 86%, 95% 100%, 1% 95%, 0 14%);
  counter-increment: choice;
}
.choice::before {
  content: counter(choice);
  position: absolute;
  right: 14px;
  top: 50%;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  color: var(--ink);
  background: var(--electric);
  transform: translateY(-50%) rotate(4deg);
  clip-path: polygon(50% 0, 66% 17%, 89% 13%, 89% 39%, 100% 56%, 79% 70%, 71% 96%, 48% 84%, 25% 100%, 20% 75%, 0 62%, 12% 42%, 7% 17%, 34% 18%);
  font-size: .84rem;
  font-weight: 950;
}
.choice:nth-child(2n) { transform: rotate(.55deg); }
.choice:nth-child(2n + 1) { transform: rotate(-.45deg); }
button.choice:hover { transform: translateY(-3px) rotate(0); background: #282531; }
.choice.selected, .choice.correct { color: var(--ink); background: var(--electric); }
.choice.selected::before, .choice.correct::before { background: var(--paper-bright); }

.category-grid {
  width: min(1060px, 100%);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
.category-button, .category-tile {
  position: relative;
  min-height: 150px;
  padding: 3.1rem 1.15rem 1rem;
  color: var(--ink);
  background: var(--paper);
  border: 0;
  font-size: clamp(1.05rem, 1.8vw, 1.35rem);
  font-weight: 950;
  clip-path: polygon(3% 0, 96% 3%, 100% 91%, 90% 100%, 0 95%, 1% 8%);
  box-shadow: none;
}
.category-button::before, .category-tile::before {
  content: attr(data-mark);
  position: absolute;
  top: 14px;
  right: 18px;
  font: 950 2.2rem/1 var(--display-font);
  opacity: .52;
}
.category-grid > :nth-child(2) { background: #baf5df; transform: rotate(.8deg); }
.category-grid > :nth-child(3) { background: #ffd66c; transform: rotate(-.7deg); }
.category-button:hover { transform: translateY(-5px) rotate(0); filter: saturate(1.1); }

.reveal-card { min-height: min(650px, 76vh); align-content: center; }
.reveal-card::before {
  content: "";
  position: absolute;
  inset: 18% -3% 16%;
  z-index: -1;
  background: var(--ink);
  clip-path: polygon(1% 8%, 98% 0, 100% 85%, 93% 100%, 0 91%);
  transform: rotate(-1.2deg);
  box-shadow: 15px 17px 0 rgba(255,244,218,.19);
  transform-origin: center;
  animation: backing-snap .48s var(--motion-snap) both;
}
.reveal-card::after {
  content: "✺";
  position: absolute;
  left: 4%;
  bottom: 6%;
  color: var(--sun);
  font-size: clamp(4rem, 11vw, 10rem);
  line-height: 1;
  transform: rotate(12deg);
}
.reveal-card .stage-subtitle:not(.prompt-kicker) {
  max-width: 830px;
  padding: .65rem 1rem;
  color: var(--ink);
  background: var(--paper);
  clip-path: polygon(1% 5%, 99% 0, 100% 91%, 4% 100%, 0 13%);
}
.reveal-answer {
  position: relative;
  z-index: 1;
  color: var(--electric);
  font: 950 clamp(2.7rem, 6vw, 6.2rem)/1.1 var(--display-font);
  text-shadow: 4px 5px 0 rgba(0,0,0,.28);
  text-wrap: balance;
  animation: copy-snap .54s var(--motion-snap) 145ms both;
}
.points { color: var(--electric); font-size: 1.35rem; font-weight: 950; }
.stage-card > .points,
body[data-surface="phone"] #phoneStage .points { animation: copy-snap .42s var(--motion-snap) 290ms both; }

.scoreboard-card { align-content: center; }
.scoreboard {
  width: min(900px, 100%);
  margin: 0 auto;
  display: grid;
  gap: 12px;
}
.score-row {
  position: relative;
  min-height: 68px;
  padding: 12px 22px;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  color: var(--paper-bright);
  background: var(--ink);
  border: 0;
  border-radius: 0;
  text-align: right;
  clip-path: polygon(1% 4%, 99% 0, 100% 89%, 96% 100%, 0 94%);
  transition: transform .35s ease;
  --item-delay: 0ms;
  --entry-x: 34px;
  animation: row-deal .46s var(--motion-snap) both;
  animation-delay: calc(175ms + var(--item-delay));
}
.score-row:nth-child(2n) { --entry-x: -34px; transform: translateX(-10px) rotate(.25deg); }
.score-row:nth-child(2n + 1) { transform: translateX(8px) rotate(-.2deg); }
.score-row:nth-child(1) { --item-delay: 0ms; }
.score-row:nth-child(2) { --item-delay: 62ms; }
.score-row:nth-child(3) { --item-delay: 124ms; }
.score-row:nth-child(4) { --item-delay: 186ms; }
.score-row:nth-child(5) { --item-delay: 248ms; }
.score-row:nth-child(6) { --item-delay: 310ms; }
.score-row:nth-child(7) { --item-delay: 372ms; }
.score-row:nth-child(8) { --item-delay: 434ms; }
.score-row:nth-child(9) { --item-delay: 496ms; }
.score-row:nth-child(10) { --item-delay: 558ms; }
.score-row:nth-child(11) { --item-delay: 620ms; }
.score-row:nth-child(12) { --item-delay: 682ms; }
.score-row:first-child { background: #24202b; box-shadow: 9px 10px 0 rgba(255,244,218,.22); }
.score-row.self { color: var(--ink); background: var(--electric); }
.rank {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  color: var(--ink);
  background: var(--sun);
  font-weight: 950;
  clip-path: polygon(50% 0, 64% 18%, 87% 10%, 91% 36%, 100% 55%, 78% 69%, 71% 96%, 48% 84%, 25% 100%, 20% 75%, 0 62%, 12% 41%, 8% 17%, 34% 20%);
}
.score-row strong { color: var(--electric); font-size: 1.28rem; }
.score-row.self strong { color: var(--ink); }
.score-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 900; }

body[data-surface="display"] .scoreboard-card {
  width: 100%;
  height: min(820px, calc(100dvh - 152px));
  min-height: 0;
  padding: 0 clamp(8px, 2vw, 28px);
  grid-template-rows: auto auto minmax(0, 1fr);
  align-content: stretch;
  gap: clamp(10px, 1.8vh, 20px);
}
body[data-surface="display"] .scoreboard-card > .prompt-kicker {
  align-self: end;
  font-size: clamp(1.05rem, 1.6vw, 1.45rem);
}
body[data-surface="display"] .scoreboard-card > .stage-title {
  font-size: clamp(3rem, 5.6vw, 5.4rem);
  line-height: .96;
}
body[data-surface="display"] .scoreboard-card > .scoreboard {
  width: min(1220px, 100%);
  height: 100%;
  min-height: 0;
  align-self: stretch;
  grid-template-rows: repeat(var(--score-count, 4), minmax(0, 1fr));
  gap: clamp(12px, 1.8vh, 20px);
}
body[data-surface="display"] .scoreboard-card .score-row {
  min-height: 0;
  height: 100%;
  padding: clamp(13px, 1.8vh, 20px) clamp(24px, 3vw, 42px);
  grid-template-columns: clamp(58px, 6vw, 78px) minmax(0, 1fr) minmax(170px, auto);
  gap: clamp(18px, 2.5vw, 34px);
}
body[data-surface="display"] .scoreboard-card .rank {
  width: clamp(58px, 5.5vw, 76px);
  height: clamp(58px, 5.5vw, 76px);
  font-size: clamp(1.4rem, 2.5vw, 2.15rem);
}
body[data-surface="display"] .scoreboard-card .score-identity {
  gap: clamp(14px, 2vw, 24px);
}
body[data-surface="display"] .scoreboard-card .player-avatar {
  width: clamp(50px, 5vw, 66px);
  height: clamp(50px, 5vw, 66px);
  border-width: 4px;
  font-size: clamp(1.25rem, 2.2vw, 1.9rem);
}
body[data-surface="display"] .scoreboard-card .score-name {
  font-size: clamp(1.55rem, 2.7vw, 2.45rem);
}
body[data-surface="display"] .scoreboard-card .score-value {
  font-size: clamp(2rem, 3.5vw, 3.2rem);
  font-variant-numeric: tabular-nums;
}
body[data-surface="display"] .scoreboard-card .score-delta {
  font-size: clamp(1rem, 1.5vw, 1.35rem);
  font-variant-numeric: tabular-nums;
}
body[data-surface="display"] .scoreboard-card .scoreboard.is-crowded {
  gap: clamp(7px, 1vh, 11px);
}
body[data-surface="display"] .scoreboard-card .scoreboard.is-crowded .score-row {
  padding-block: clamp(7px, 1vh, 11px);
}
body[data-surface="display"] .scoreboard-card .scoreboard.is-crowded .rank {
  width: clamp(44px, 4.4vw, 58px);
  height: clamp(44px, 4.4vw, 58px);
  font-size: clamp(1.15rem, 2vw, 1.6rem);
}
body[data-surface="display"] .scoreboard-card .scoreboard.is-crowded .player-avatar {
  width: clamp(42px, 4.2vw, 54px);
  height: clamp(42px, 4.2vw, 54px);
  font-size: clamp(1.05rem, 1.8vw, 1.5rem);
}
body[data-surface="display"] .scoreboard-card .scoreboard.is-crowded .score-name {
  font-size: clamp(1.3rem, 2.2vw, 1.9rem);
}
body[data-surface="display"] .scoreboard-card .scoreboard.is-crowded .score-value {
  font-size: clamp(1.65rem, 2.8vw, 2.4rem);
}
body[data-surface="display"] .scoreboard-card .scoreboard.is-compact .score-row {
  grid-template-columns: 46px minmax(0, 1fr) minmax(130px, auto);
  padding-inline: clamp(18px, 2.4vw, 32px);
  gap: clamp(12px, 1.8vw, 24px);
}
body[data-surface="display"] .scoreboard-card .scoreboard.is-compact .rank {
  width: 42px;
  height: 42px;
}
body[data-surface="display"] .scoreboard-card .scoreboard.is-compact .player-avatar {
  width: 40px;
  height: 40px;
}

.final-card::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -25px;
  width: min(720px, 88vw);
  height: 190px;
  background: var(--ink);
  clip-path: polygon(1% 10%, 98% 0, 100% 82%, 91% 100%, 0 90%);
  transform: rotate(-1deg);
  transform-origin: center;
  animation: backing-snap .52s var(--motion-snap) both;
}
.final-card::after {
  content: "★";
  position: absolute;
  top: -60px;
  right: 5%;
  color: var(--sun);
  font-size: clamp(5rem, 12vw, 11rem);
  transform: rotate(-12deg);
  text-shadow: 8px 9px 0 rgba(17,17,23,.2);
}

body[data-surface="display"] .final-card::before {
  height: clamp(230px, 30vh, 300px);
}

/* The lobby is a full-screen contestant stage, with the code at its center. */
body[data-surface="display"][data-phase="lobby"] .stage {
  width: 100%;
  padding: 0;
}
.show-lobby {
  position: relative;
  isolation: isolate;
  min-height: 720px;
  height: 100svh;
  overflow: hidden;
  color: var(--paper-bright);
  background: radial-gradient(ellipse at center, rgba(65, 31, 119, .64), rgba(22, 12, 65, .78));
}
.lobby-orbits {
  position: absolute;
  inset: 14% 9% 16%;
  border: 1px solid rgba(255,250,240,.2);
  border-radius: 50%;
  transform: rotate(-12deg);
  pointer-events: none;
}
.lobby-orbits::before, .lobby-orbits::after {
  content: "";
  position: absolute;
  inset: 11% -5%;
  border: 1px dashed rgba(255,250,240,.14);
  border-radius: inherit;
  transform: rotate(25deg);
}
.lobby-orbits::after { inset: -13% 16%; transform: rotate(45deg); border-style: solid; }
.lobby-center {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 49%;
  translate: -50% -50%;
  width: min(430px, 36vw);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.lobby-headline { margin: 0 0 22px; font: 900 clamp(20px, 2vw, 32px)/1.4 var(--display-font); }
.lobby-code-label { margin: 0 0 9px; font-size: 18px; font-weight: 800; }
.lobby-code {
  position: relative;
  width: 100%;
  padding: 14px 12px 20px;
  border: 3px solid var(--paper-bright);
  border-radius: 22px;
  background: var(--sun);
  color: var(--ink);
  font: 950 clamp(70px, 8.6vw, 132px)/1.05 "Consolas", "Courier New", monospace;
  letter-spacing: .06em;
  text-indent: .06em;
  box-shadow: 0 9px 0 #b57724, 0 16px 0 rgba(17,17,23,.3), 0 0 80px rgba(255,211,72,.16);
}
.lobby-code::before, .lobby-code::after {
  content: "✦";
  position: absolute;
  color: var(--paper-bright);
  font-size: 40px;
  top: -26px;
  right: -22px;
  text-shadow: 0 3px 0 rgba(17,17,23,.2);
}
.lobby-code::after { top: auto; right: auto; bottom: -20px; left: -18px; font-size: 28px; }
.lobby-count { display: flex; align-items: center; gap: 12px; margin: 28px 0 0; font-size: 18px; font-weight: 800; }
.lobby-count .roster-count { margin: 0; padding: 5px 12px; border: 1px solid rgba(255,250,240,.35); border-radius: 20px; background: rgba(17,17,23,.25); }
.lobby-waiting { margin: 13px 0 0; font-size: 16px; line-height: 1.5; }
.lobby-contestants { position: absolute; inset: 0; }
.lobby-contestant {
  position: absolute;
  left: var(--seat-x);
  top: var(--seat-y);
  translate: -50% -50%;
  width: clamp(120px, 14vw, 200px);
  display: flex;
  flex-direction: column;
  align-items: center;
  animation: contestant-arrive .45s var(--motion-snap) both, contestant-float var(--float-speed, 5s) ease-in-out .45s infinite alternate;
}
.lobby-contestant:nth-child(1) { --seat-x: 17%; --seat-y: 30%; --float-speed: 5.2s; }
.lobby-contestant:nth-child(2) { --seat-x: 83%; --seat-y: 30%; --float-speed: 4.6s; }
.lobby-contestant:nth-child(3) { --seat-x: 12%; --seat-y: 60%; --float-speed: 5.8s; }
.lobby-contestant:nth-child(4) { --seat-x: 88%; --seat-y: 60%; --float-speed: 5.1s; }
.lobby-contestant:nth-child(5) { --seat-x: 28%; --seat-y: 78%; --float-speed: 4.8s; }
.lobby-contestant:nth-child(6) { --seat-x: 72%; --seat-y: 78%; --float-speed: 6s; }
.lobby-contestant:nth-child(7) { --seat-x: 37%; --seat-y: 15%; --float-speed: 5.6s; }
.lobby-contestant:nth-child(8) { --seat-x: 63%; --seat-y: 15%; --float-speed: 4.9s; }
.lobby-contestant .player-avatar {
  width: clamp(82px, 8.5vw, 132px);
  height: clamp(82px, 8.5vw, 132px);
  border: 5px solid var(--paper-bright);
  box-shadow: 0 0 0 5px var(--player), 0 12px 0 rgba(17,17,23,.22), 0 20px 35px rgba(17,17,23,.25);
  font-size: 2.5rem;
}
.lobby-contestant .roster-player-name {
  position: relative;
  max-width: 100%;
  min-width: 90px;
  margin-top: 14px;
  padding: 7px 17px;
  border-radius: 9px;
  background: var(--paper-bright);
  color: var(--ink);
  text-align: center;
  font: 900 clamp(17px, 1.7vw, 25px)/1.35 var(--display-font);
  overflow-wrap: anywhere;
  box-shadow: 0 5px 0 rgba(17,17,23,.25);
}
.lobby-contestant .host-badge { position: absolute; top: -18px; z-index: 1; margin: 0; padding: 5px 14px; border-radius: 20px; font-size: 13px; font-weight: 900; transform: rotate(-7deg); box-shadow: 0 3px 0 rgba(17,17,23,.25); }
.lobby-join-dock {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: 22px;
  translate: -50% 0;
  display: flex;
  align-items: center;
  gap: 15px;
  max-width: calc(100% - 32px);
  padding: 10px 16px;
  border: 1px solid rgba(255,250,240,.28);
  border-radius: 18px;
  background: rgba(17,17,23,.65);
}
.lobby-qr { width: 108px; height: 108px; padding: 5px; border-radius: 9px; background: white; flex-shrink: 0; }
.lobby-join-title { margin: 0 0 8px; font-size: 18px; font-weight: 900; white-space: nowrap; }
.lobby-join-link { display: block; color: var(--sun); font: 700 15px/1.4 "Segoe UI", sans-serif; overflow-wrap: anywhere; }
@keyframes contestant-arrive { from { opacity: 0; transform: translateY(22px) scale(.7); } to { opacity: 1; transform: none; } }
@keyframes contestant-float { from { transform: translateY(0) rotate(-2deg); } to { transform: translateY(-10px) rotate(2deg); } }
@media (min-width: 901px) and (max-height: 740px) {
  .show-lobby { min-height: 600px; }
  .lobby-contestant .player-avatar { width: 82px; height: 82px; }
  .lobby-contestant .roster-player-name { font-size: 18px; margin-top: 11px; }
  .lobby-headline { margin-bottom: 14px; }
  .lobby-code { font-size: 86px; }
  .lobby-qr { width: 96px; height: 96px; }
  .lobby-join-dock { bottom: 14px; }
}
@media (max-width: 900px) {
  .show-lobby { min-height: 1020px; }
  .lobby-center { top: 43%; width: min(420px, 56vw); }
  .lobby-headline { font-size: 24px; }
  .lobby-contestant { width: 120px; }
  .lobby-contestant:nth-child(1) { --seat-x: 23%; --seat-y: 17%; }
  .lobby-contestant:nth-child(2) { --seat-x: 77%; --seat-y: 17%; }
  .lobby-contestant:nth-child(3) { --seat-x: 14%; --seat-y: 64%; }
  .lobby-contestant:nth-child(4) { --seat-x: 86%; --seat-y: 64%; }
  .lobby-contestant:nth-child(5) { --seat-x: 36%; --seat-y: 76%; }
  .lobby-contestant:nth-child(6) { --seat-x: 64%; --seat-y: 76%; }
  .lobby-contestant:nth-child(7) { --seat-x: 12%; --seat-y: 36%; }
  .lobby-contestant:nth-child(8) { --seat-x: 88%; --seat-y: 36%; }
}
@media (max-width: 700px) {
  .show-lobby { min-height: 1280px; }
  .lobby-center { top: 43%; width: calc(100% - 48px); }
  .lobby-headline { font-size: 23px; }
  .lobby-code { font-size: clamp(70px, 20vw, 104px); }
  .lobby-contestant { width: 42%; }
  .lobby-contestant .player-avatar { width: 72px; height: 72px; }
  .lobby-contestant .roster-player-name { font-size: 17px; padding: 6px 10px; }
  .lobby-contestant:nth-child(1) { --seat-x: 25%; --seat-y: 14%; }
  .lobby-contestant:nth-child(2) { --seat-x: 75%; --seat-y: 14%; }
  .lobby-contestant:nth-child(3) { --seat-x: 25%; --seat-y: 62%; }
  .lobby-contestant:nth-child(4) { --seat-x: 75%; --seat-y: 62%; }
  .lobby-contestant:nth-child(5) { --seat-x: 25%; --seat-y: 75%; }
  .lobby-contestant:nth-child(6) { --seat-x: 75%; --seat-y: 75%; }
  .lobby-contestant:nth-child(7) { --seat-x: 25%; --seat-y: 24%; }
  .lobby-contestant:nth-child(8) { --seat-x: 75%; --seat-y: 24%; }
  .lobby-join-dock { bottom: 25px; gap: 10px; padding: 10px; width: calc(100% - 32px); }
  .lobby-qr { width: 82px; height: 82px; }
  .lobby-join-title { font-size: 16px; white-space: normal; }
}
@media (prefers-reduced-motion: reduce) {
  .show-lobby .lobby-contestant { animation: none; }
}

.lobby-layout {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(280px, .75fr);
  gap: 26px;
  align-items: stretch;
}
.lobby-layout > .stage-card {
  color: var(--ink);
  background: var(--paper);
  clip-path: polygon(1% 3%, 97% 0, 100% 8%, 98% 97%, 7% 100%, 0 91%);
  box-shadow: var(--hard-shadow);
  transform: rotate(-.4deg);
}
.lobby-layout > .stage-card .stage-title { font-size: clamp(1.7rem, 3.5vw, 3.3rem); text-shadow: none; }
.lobby-layout > .stage-card .stage-subtitle { color: var(--muted); }
.room-code {
  direction: ltr;
  padding: .15em .28em .08em;
  color: var(--paper-bright);
  background: var(--ink);
  font: 950 clamp(4rem, 10vw, 8rem)/1 var(--display-font);
  letter-spacing: .14em;
  clip-path: polygon(1% 7%, 99% 0, 100% 88%, 95% 100%, 0 92%);
  transform: rotate(1deg);
}
.qr {
  width: min(250px, 62vw);
  margin: 0 auto;
  padding: 12px;
  background: white;
  border: 0;
  border-radius: 0;
  box-shadow: 8px 9px 0 rgba(17,17,23,.2);
  transform: rotate(-1deg);
}
.roster { display: grid; align-content: start; gap: 10px; }
.roster-item {
  min-height: 50px;
  padding: 10px 13px;
  display: flex;
  align-items: center;
  gap: 11px;
  color: var(--ink);
  background: var(--paper);
  font-weight: 900;
  clip-path: polygon(1% 5%, 100% 0, 97% 100%, 0 92%);
  --item-delay: 0ms;
  --entry-x: -26px;
  animation: row-deal .38s var(--motion-snap) both;
  animation-delay: calc(170ms + var(--item-delay));
}
.roster-item:nth-child(2n) { transform: rotate(.5deg); }
.roster-item:nth-child(1) { --item-delay: 0ms; }
.roster-item:nth-child(2) { --item-delay: 48ms; --entry-x: 26px; }
.roster-item:nth-child(3) { --item-delay: 96ms; }
.roster-item:nth-child(4) { --item-delay: 144ms; --entry-x: 26px; }
.roster-item:nth-child(5) { --item-delay: 192ms; }
.roster-item:nth-child(6) { --item-delay: 240ms; --entry-x: 26px; }
.roster-item:nth-child(7) { --item-delay: 288ms; }
.roster-item:nth-child(8) { --item-delay: 336ms; --entry-x: 26px; }
.dot { width: 14px; height: 14px; border-radius: 50%; background: var(--player); box-shadow: 0 0 0 3px rgba(17,17,23,.12); }
.host-badge { margin-inline-start: auto; padding: .15rem .45rem; color: var(--ink); background: var(--sun); font-size: .75rem; }
.host-controls { display: grid; gap: 10px; padding-top: 14px; }
.host-controls.host-live { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.phone-shell { width: min(580px, calc(100% - 22px)); margin: 0 auto; padding: 12px 0 40px; }
.phone-game { display: grid; gap: 16px; }
body[data-surface="phone"] #phoneStage > * > h2,
body[data-surface="phone"] #phoneStage > * > .phone-question,
body[data-surface="phone"] #phoneStage > * > .waiting,
body[data-surface="phone"] #phoneStage > * > .reveal-answer,
body[data-surface="phone"] #phoneStage > * > .scoreboard,
body[data-surface="phone"] #phoneStage > .waiting {
  animation: copy-rise .42s var(--motion-enter) both;
}
body[data-surface="phone"] #phoneStage > * > .waiting,
body[data-surface="phone"] #phoneStage > * > .reveal-answer { animation-delay: 90ms; }
body[data-surface="phone"] #phoneStage > * > .scoreboard { animation-delay: 145ms; }
body[data-surface="phone"] .topbar {
  position: sticky;
  top: 8px;
  min-height: 68px;
  margin-bottom: 12px;
  padding: 9px 12px;
  grid-template-columns: auto 1fr auto;
  color: var(--paper-bright);
  background: rgba(17,17,23,.94);
  box-shadow: 7px 8px 0 rgba(17,17,23,.18);
  clip-path: polygon(1% 3%, 100% 0, 98% 96%, 0 100%);
}
body[data-surface="phone"] #phoneStage {
  min-height: 230px;
  color: var(--ink);
  background: var(--paper);
  box-shadow: var(--hard-shadow);
}
body[data-surface="phone"] #phoneStage h2 { margin: 0; font-size: clamp(1.55rem, 7vw, 2.25rem); }
body[data-surface="phone"] .reveal-answer { color: var(--violet); text-shadow: none; }
body[data-surface="phone"] .score-row { color: var(--paper-bright); }
.phone-question {
  padding-bottom: 14px;
  color: var(--ink);
  font: 950 clamp(1.35rem, 5.8vw, 2rem)/1.45 var(--display-font);
  text-align: center;
  text-wrap: balance;
  border-bottom: 8px solid var(--violet);
}
.phone-choice-grid { display: grid; gap: 11px; }
.phone-choice {
  min-height: 66px;
  padding: .9rem 1rem;
  color: var(--paper-bright);
  background: var(--ink);
  font-size: 1.02rem;
  clip-path: polygon(1% 4%, 99% 0, 100% 88%, 96% 100%, 0 95%);
}
.phone-choice:nth-child(2n) { background: #34303c; transform: rotate(.35deg); }
.phone-choice:hover { transform: translateY(-2px) rotate(0); }
.answer-risk {
  margin: 0;
  padding: .72rem 1rem;
  color: #fff7dc;
  background: #4b2941;
  border: 2px dashed #ffcf5b;
  border-radius: 10px;
  text-align: center;
  font-weight: 900;
}
.abstain-button {
  min-height: 56px;
  color: var(--ink);
  background: #d9d2ff;
  border: 2px solid var(--violet);
  box-shadow: none;
}
.abstain-button:hover { background: #eeeaff; transform: translateY(-2px); }
.abstain-button:disabled { color: #817b8b; background: #d8d3dc; border-color: #a9a2b2; cursor: not-allowed; transform: none; }
.points-negative { color: #c12f45 !important; }
.first-correct-bonus {
  justify-self: center;
  padding: .45rem .8rem;
  color: #35270a;
  background: var(--electric);
  border: 2px solid #35270a;
  border-radius: 999px;
  font-weight: 950;
}
.player-avatar.first-correct {
  outline: 3px solid var(--electric);
  outline-offset: 2px;
}
.speed-bonus-award {
  display: block;
  max-width: 100%;
  padding: .4rem .65rem;
  color: var(--ink);
  background: var(--sun);
  border: 2px solid var(--ink);
  border-radius: 10px;
  font-size: clamp(.85rem, 1.45vw, 1.3rem);
  font-weight: 950;
  line-height: 1.4;
  text-wrap: balance;
  box-shadow: 3px 4px 0 rgba(17,17,23,.2);
  animation: countdown-pop .45s var(--motion-snap) both;
}
.waiting {
  padding: 24px;
  color: var(--ink);
  background: #d9d2ff;
  text-align: center;
  font-weight: 900;
  line-height: 1.55;
  clip-path: polygon(2% 0, 100% 5%, 97% 100%, 0 94%);
}

.paused {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: grid;
  place-items: center;
  padding: 24px;
  color: var(--paper-bright);
  background: rgba(17,17,23,.92);
  text-align: center;
}
.paused:not([hidden]) { animation: overlay-enter .22s ease-out both; }
.paused > div {
  width: min(560px, 100%);
  padding: 38px;
  background: #732e68;
  clip-path: polygon(1% 5%, 98% 0, 100% 90%, 91% 100%, 0 94%);
  box-shadow: 13px 15px 0 rgba(255,211,72,.28);
}
.paused:not([hidden]) > div { animation: copy-snap .46s var(--motion-snap) 70ms both; }
.paused[hidden], [hidden] { display: none !important; }
.paused h2 { margin: 0 0 12px; font-size: 2.5rem; }

body[data-phase="game_intro"] {
  --wash-a: #171227;
  --wash-b: #6846ed;
  --wash-c: #ff5b70;
  --wash-speed: 15s;
}

body[data-phase="game_intro"] .topbar {
  opacity: 0;
  pointer-events: none;
  transform: translateY(-18px);
}

body[data-phase="game_intro"] .stage {
  width: 100%;
  padding: 0;
}

body[data-phase="welcome"] {
  --wash-a: #5f42df;
  --wash-b: #ec5c9b;
  --wash-c: #ffc64c;
}

.player-avatar[data-rive-avatar] { position: relative; overflow: hidden; }
/* The exported artboards include a margin around the circular portrait. */
.player-avatar-canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; transform: scale(1.38); }
.player-avatar[data-rive-ready] > .player-avatar-canvas { opacity: 1; }
.player-avatar[data-rive-ready] > .player-avatar-image { visibility: hidden; }
.player-avatar {
  --player: var(--violet);
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  color: var(--paper-bright);
  background: var(--player);
  border: 3px solid var(--paper-bright);
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 3px 4px 0 rgba(17,17,23,.28);
  font: 950 1rem/1 "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", var(--font);
}
.player-avatar-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

.picker-avatar {
  width: clamp(76px, 9vw, 112px);
  height: clamp(76px, 9vw, 112px);
  border-width: 6px;
  font-size: clamp(2rem, 4vw, 3.2rem);
  animation: picker-pop .7s var(--motion-snap) both;
}

.countdown-card::after { display: none; }
.countdown-number {
  margin: 0;
  color: var(--sun);
  font: 950 clamp(10rem, 31vw, 27rem)/.75 var(--display-font);
  text-shadow: 12px 14px 0 rgba(17,17,23,.24);
}
.countdown-number.countdown-pop { animation: countdown-pop .44s var(--motion-snap) both; }

.game-intro-card {
  min-height: 100vh;
  padding: clamp(28px, 4vw, 58px);
  align-content: center;
  gap: 0;
  overflow: hidden;
  perspective: 1100px;
}

.game-intro-card::before,
.game-intro-card::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.game-intro-card::before {
  z-index: -2;
  width: min(86vw, 1120px);
  aspect-ratio: 1;
  border: clamp(36px, 6vw, 82px) solid rgba(255,255,255,.075);
  border-radius: 50%;
  box-shadow:
    0 0 0 clamp(2px, .35vw, 6px) rgba(255,211,72,.28),
    0 0 0 clamp(74px, 11vw, 158px) rgba(255,255,255,.035);
  animation: intro-radar-open 1.15s var(--motion-enter) both;
}

.game-intro-card::after {
  z-index: -3;
  inset: -28%;
  opacity: .42;
  background: repeating-conic-gradient(from 4deg, rgba(255,255,255,.13) 0 3deg, transparent 3deg 18deg);
  -webkit-mask-image: radial-gradient(circle, transparent 0 16%, #000 17% 45%, transparent 66%);
  mask-image: radial-gradient(circle, transparent 0 16%, #000 17% 45%, transparent 66%);
  animation: intro-rays 16s linear infinite, intro-rays-open .9s var(--motion-enter) both;
}

.intro-frame {
  position: absolute;
  inset: clamp(28px, 4vw, 62px);
  z-index: -1;
  border: 2px solid rgba(255,255,255,.22);
  clip-path: polygon(0 0, 37% 0, 40% 2px, 60% 2px, 63% 0, 100% 0, 100% 38%, calc(100% - 2px) 41%, calc(100% - 2px) 59%, 100% 62%, 100% 100%, 63% 100%, 60% calc(100% - 2px), 40% calc(100% - 2px), 37% 100%, 0 100%, 0 62%, 2px 59%, 2px 41%, 0 38%);
  animation: intro-frame-in .75s var(--motion-enter) .12s both;
}

.intro-frame::before,
.intro-frame::after {
  content: "";
  position: absolute;
  width: clamp(12px, 1.3vw, 20px);
  aspect-ratio: 1;
  background: var(--sun);
  transform: rotate(45deg);
  box-shadow: 0 0 22px rgba(255,211,72,.65);
}

.intro-frame::before { inset: -7px auto auto 10%; }
.intro-frame::after { inset: auto 10% -7px auto; }

.intro-topics { position: absolute; inset: 0; pointer-events: none; }
.intro-topic {
  position: absolute;
  width: clamp(64px, 7.5vw, 112px);
  aspect-ratio: 1;
  color: var(--paper-bright);
  filter: drop-shadow(4px 5px 0 rgba(17,17,23,.18));
  animation: intro-topic-in .62s var(--motion-snap) both;
}
.intro-topic svg { display: block; width: 100%; height: 100%; overflow: visible; animation: intro-symbol-float 4.8s ease-in-out infinite alternate; }
.intro-topic-science, .intro-topic-culture { color: var(--sun); }
.intro-topic-numbers svg { animation-delay: -2.4s; animation-duration: 5.6s; }
.intro-topic-culture svg { animation-delay: -1.2s; }
.intro-topic-world svg { animation-delay: -3.6s; animation-duration: 6.2s; }
.intro-topic-science { top: 17%; right: 8%; transform: rotate(5deg); animation-delay: .34s; }
.intro-topic-numbers { top: 24%; left: 8%; transform: rotate(-4deg); animation-delay: .46s; }
.intro-topic-culture { bottom: 19%; right: 11%; transform: rotate(-4deg); animation-delay: .58s; }
.intro-topic-world { bottom: 14%; left: 10%; transform: rotate(5deg); animation-delay: .7s; }

.intro-lockup {
  width: min(920px, 88vw);
  display: grid;
  justify-items: center;
  gap: clamp(8px, 1.25vh, 14px);
  transform-style: preserve-3d;
}

.intro-kicker {
  margin: 0 0 clamp(3px, .8vh, 9px);
  padding: .35rem .95rem .42rem;
  color: var(--paper-bright);
  background: var(--ink);
  font-size: clamp(.9rem, 1.35vw, 1.18rem);
  font-weight: 950;
  clip-path: polygon(2% 3%, 100% 9%, 96% 100%, 0 92%);
  animation: intro-kicker-in .46s var(--motion-snap) .24s both;
}

.intro-emblem {
  position: relative;
  width: clamp(150px, 19vw, 245px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  filter: drop-shadow(18px 20px 0 rgba(17,17,23,.24));
  animation: intro-emblem-land 1.05s var(--motion-snap) .12s both;
}

.intro-emblem-halo,
.intro-mark { grid-area: 1 / 1; }

.intro-emblem-halo {
  width: 100%;
  height: 100%;
  border: 3px solid rgba(255,255,255,.7);
  border-radius: 50%;
  box-shadow: 0 0 0 8px rgba(255,255,255,.06), inset 0 0 42px rgba(255,255,255,.1);
  animation: intro-halo-pulse 1.7s ease-in-out 1.35s infinite alternate;
}

.intro-mark {
  width: 72%;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  color: var(--ink);
  background: var(--sun);
  clip-path: polygon(50% 0, 62% 14%, 83% 7%, 90% 27%, 100% 45%, 89% 61%, 95% 82%, 73% 86%, 58% 100%, 42% 90%, 21% 97%, 14% 76%, 0 63%, 10% 44%, 5% 23%, 29% 17%);
  font: 950 clamp(5.2rem, 11vw, 9.5rem)/1 var(--display-font);
  animation: intro-mark-flip .72s var(--motion-snap) .58s both;
}

.game-intro-card .intro-title {
  position: relative;
  max-width: none;
  color: var(--paper-bright);
  font-size: clamp(4.3rem, 8.8vw, 9rem);
  line-height: .95;
  letter-spacing: -.025em;
  text-shadow: 7px 8px 0 rgba(17,17,23,.25);
  animation: intro-title 1s var(--motion-snap) .72s both;
}

.game-intro-card .intro-title::after {
  content: "";
  position: absolute;
  inset: auto 10% -.1em;
  height: .07em;
  background: var(--sun);
  transform-origin: center;
  animation: intro-title-rule .52s var(--motion-enter) 1.34s both;
}

.intro-beats {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 1.2vw, 16px);
  margin-top: clamp(10px, 1.8vh, 19px);
}

.intro-beats span {
  display: inline-flex;
  align-items: center;
  gap: clamp(8px, 1vw, 14px);
  color: var(--paper-bright);
  font-size: clamp(1.2rem, 2.2vw, 2rem);
  font-weight: 950;
  animation: intro-beat-in .48s var(--motion-snap) both;
}
.intro-beats span:not(:last-child)::after { content: "◆"; color: var(--sun); font-size: .48em; }
.intro-beats span:nth-child(1) { animation-delay: 1.25s; }
.intro-beats span:nth-child(2) { animation-delay: 1.4s; }
.intro-beats span:nth-child(3) { animation-delay: 1.55s; }

.game-intro-card .intro-tagline {
  margin-top: clamp(2px, .7vh, 7px);
  color: rgba(255,255,255,.82);
  font-size: clamp(.92rem, 1.55vw, 1.25rem);
  animation: copy-rise .5s var(--motion-enter) 1.82s both;
}

.intro-sting {
  position: absolute;
  bottom: clamp(38px, 6vh, 72px);
  display: flex;
  gap: 9px;
  direction: ltr;
}
.intro-sting span {
  width: clamp(22px, 2.5vw, 38px);
  height: 5px;
  background: rgba(255,255,255,.3);
  transform: skewX(-28deg);
  animation: intro-sting 1.25s ease-in-out 1.9s infinite;
}
.intro-sting span:nth-child(2) { animation-delay: 2.02s; }
.intro-sting span:nth-child(3) { animation-delay: 2.14s; }

.question-card {
  transition: gap .55s var(--motion-enter);
}
.question-card [data-role="question-title"],
.question-card .question-image {
  transition: font-size .65s var(--motion-enter), max-width .65s var(--motion-enter), max-height .65s var(--motion-enter), transform .65s var(--motion-enter);
}
.question-card.answer-open { gap: clamp(10px, 1.5vw, 18px); }
.question-card.answer-open [data-role="question-title"] {
  max-width: 1040px;
  font-size: clamp(1.9rem, 3.6vw, 3.55rem);
}
.question-card.answer-open .question-image {
  width: min(390px, 62vw);
  max-height: 24vh;
  transform: rotate(0);
}
.question-answers {
  width: 100%;
  display: grid;
  justify-items: center;
  gap: 12px;
  animation: answers-open .55s var(--motion-enter) both;
}
.question-answers > .choice-grid { width: min(1040px, 100%); }
@media (min-width: 901px) {
  body[data-surface="display"] .stage:has(.question-card:not(.reveal-mode)) {
    width: min(1560px, calc(100% - 64px));
    padding-block: clamp(70px, 10vh, 108px) 28px;
  }
  body[data-surface="display"] .question-card.answer-open:not(.reveal-mode) {
    padding: clamp(16px, 2vw, 32px);
    gap: clamp(16px, 2.5vh, 26px);
  }
  body[data-surface="display"] .question-card.answer-open:not(.reveal-mode) [data-role="question-title"] {
    max-width: 1380px;
    font-size: clamp(2.4rem, min(4.5vw, 8.5vh), 4.6rem);
    line-height: 1.22;
  }
  body[data-surface="display"] .question-card:not(.reveal-mode) .choice-grid {
    width: 100%;
    gap: clamp(16px, 2.5vh, 26px) 26px;
  }
  body[data-surface="display"] .question-card:not(.reveal-mode) .choice {
    min-height: clamp(96px, 13vh, 140px);
    padding: 1.15rem 4.5rem 1.15rem 2rem;
    font-size: clamp(1.55rem, min(2.35vw, 4.4vh), 2.35rem);
  }
  body[data-surface="display"] .question-card:not(.reveal-mode) .choice::before {
    width: 40px;
    height: 40px;
    right: 20px;
    font-size: 1.1rem;
  }
}
.choice-label { position: relative; z-index: 1; }
.avatar-stack {
  position: absolute;
  z-index: 3;
  left: 14px;
  top: 50%;
  min-height: 34px;
  display: flex;
  direction: ltr;
  transform: translateY(-50%);
}
.avatar-stack .player-avatar { margin-left: -8px; }
.avatar-stack .player-avatar:first-child { margin-left: 0; }
.reveal-mode {
  min-height: calc(100vh - 90px);
  gap: 8px;
  padding-block: 12px;
}
.reveal-mode [data-role="question-title"] { font-size: clamp(1.75rem, 3vw, 3rem); }
.reveal-mode .signal-line { margin-block: 0; }
.reveal-mode .question-image {
  width: min(330px, 54vw);
  max-height: 19vh;
  padding: 9px;
}
.reveal-mode [data-role="answers"] { display: none; }
.answer-reveal-spotlight {
  position: fixed;
  inset: 76px 0 0;
  z-index: 20;
  min-height: calc(100dvh - 76px);
  padding: clamp(18px, 3vw, 44px) clamp(16px, 5vw, 72px);
  display: grid;
  grid-template-rows: repeat(2, minmax(0, auto));
  place-content: center;
  justify-items: center;
  gap: clamp(14px, 2.5vh, 28px);
  color: var(--paper-bright);
  background: rgba(17, 17, 23, .68);
  backdrop-filter: blur(15px) saturate(.72);
}
.answer-reveal-spotlight::before,
.answer-reveal-spotlight::after {
  content: "";
  position: absolute;
  pointer-events: none;
  opacity: 0;
}
.answer-reveal-spotlight::before {
  inset: 8% 6%;
  border: clamp(5px, .7vw, 10px) solid var(--sun);
  clip-path: polygon(2% 8%, 96% 0, 100% 90%, 6% 100%, 0 18%);
}
.answer-reveal-spotlight::after {
  inset: 0;
  background:
    radial-gradient(circle at 13% 22%, var(--sun) 0 7px, transparent 8px),
    radial-gradient(circle at 84% 18%, var(--electric) 0 9px, transparent 10px),
    radial-gradient(circle at 90% 76%, var(--sun) 0 6px, transparent 7px),
    radial-gradient(circle at 17% 82%, var(--electric) 0 8px, transparent 9px);
}
.answer-reveal-spotlight.is-correct::before { animation: correct-frame-burst .8s var(--motion-snap) both; }
.answer-reveal-spotlight.is-correct::after { animation: correct-confetti-burst 1.2s var(--motion-enter) both; }
.reveal-focus-card {
  position: relative;
  z-index: 2;
  width: min(980px, calc(100vw - 42px));
  min-height: clamp(250px, 39vh, 440px);
  padding: clamp(34px, 6vw, 72px) clamp(70px, 9vw, 130px) clamp(28px, 5vw, 58px);
  display: grid;
  place-content: center;
  justify-items: center;
  gap: clamp(20px, 3vh, 34px);
  color: var(--paper-bright);
  background: var(--ink);
  box-shadow: 18px 21px 0 rgba(0, 0, 0, .28);
  clip-path: polygon(2% 5%, 96% 0, 100% 14%, 98% 92%, 90% 100%, 3% 96%, 0 82%);
  transform-origin: center;
  transition: color .24s ease, background-color .24s ease, box-shadow .24s ease;
}
.reveal-focus-card.is-pending {
  background: var(--ink);
}
.reveal-focus-card.is-wrong {
  background: #b32043;
  animation: wrong-card-resolve .48s var(--motion-snap) both;
}
.reveal-focus-card.is-correct {
  color: var(--ink);
  background: var(--electric);
  box-shadow: 20px 23px 0 rgba(255, 211, 72, .54);
  animation: correct-card-resolve .82s var(--motion-snap) both;
}
.reveal-focus-label {
  max-width: 850px;
  font: 950 clamp(2.8rem, 7vw, 7.2rem)/1.08 var(--display-font);
  text-wrap: balance;
  text-shadow: 5px 6px 0 rgba(0, 0, 0, .2);
}
.reveal-focus-card.is-correct .reveal-focus-label { text-shadow: 4px 5px 0 rgba(255, 250, 240, .58); }
.reveal-option-number {
  position: absolute;
  top: clamp(18px, 3vw, 32px);
  right: clamp(18px, 3vw, 34px);
  width: clamp(46px, 6vw, 72px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  color: var(--ink);
  background: var(--sun);
  font: 950 clamp(1.25rem, 2.8vw, 2.2rem)/1 var(--display-font);
  clip-path: polygon(50% 0, 66% 17%, 89% 13%, 89% 39%, 100% 56%, 79% 70%, 71% 96%, 48% 84%, 25% 100%, 20% 75%, 0 62%, 12% 42%, 7% 17%, 34% 18%);
}
.reveal-player-stack {
  position: static;
  min-height: 58px;
  justify-content: center;
  transform: none;
}
.reveal-player-stack .player-avatar {
  width: clamp(48px, 6vw, 70px);
  height: clamp(48px, 6vw, 70px);
  border-width: 4px;
  font-size: clamp(1.25rem, 2.5vw, 2rem);
  box-shadow: 5px 6px 0 rgba(0, 0, 0, .24);
}
.reveal-player-stack .player-avatar + .player-avatar { margin-left: -13px; }
.reveal-drumroll {
  position: relative;
  z-index: 2;
  width: min(520px, 76vw);
  height: clamp(120px, 22vh, 210px);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(9px, 1.4vw, 16px);
}
.reveal-drumroll i {
  width: clamp(14px, 2.5vw, 28px);
  height: 36%;
  background: var(--sun);
  clip-path: polygon(12% 0, 100% 5%, 88% 100%, 0 92%);
  animation: drumroll-bar .38s ease-in-out infinite alternate;
}
.reveal-drumroll i:nth-child(2) { height: 58%; animation-delay: -80ms; }
.reveal-drumroll i:nth-child(3) { height: 90%; animation-delay: -160ms; }
.reveal-drumroll i:nth-child(4) { height: 64%; animation-delay: -240ms; }
.reveal-drumroll i:nth-child(5) { height: 42%; animation-delay: -320ms; }
.answer-reveal-spotlight.is-suspense .reveal-focus-card.is-pending {
  animation:
    candidate-card-enter .38s var(--motion-enter) both,
    suspense-card-pulse .45s ease-in-out .38s infinite alternate;
}
.reveal-result {
  position: relative;
  z-index: 2;
  width: min(900px, calc(100vw - 52px));
  padding: 12px 22px;
  display: grid;
  gap: 8px;
  color: var(--paper-bright);
  background: var(--ink);
  clip-path: polygon(1% 5%, 99% 0, 100% 91%, 4% 100%, 0 13%);
  animation: correct-result-enter .62s var(--motion-snap) both;
}
.reveal-result .stage-subtitle { margin: 0 auto; font-size: clamp(.9rem, 1.6vw, 1.15rem); line-height: 1.35; }
.reveal-result .reveal-answer { font-size: clamp(2rem, 4vw, 3.8rem); }
.roster-count { display: inline-block; margin-inline-start: .25em; unicode-bidi: isolate; }

body[data-phase="reveal"] .stage,
body[data-phase="finale_reveal"] .stage {
  padding-top: 78px;
  padding-bottom: 12px;
}

.score-identity {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
}
.score-total {
  display: grid;
  justify-items: end;
  line-height: 1.1;
}
.score-delta { font-size: .82rem; font-weight: 950; }
.score-delta.positive { color: var(--electric); }
.score-delta.negative { color: #ff8291; }
.score-row.rank-changing { animation: rank-change .72s var(--motion-snap) both; }

@keyframes countdown-pop {
  0% { opacity: .2; transform: scale(.55) rotate(-7deg); }
  70% { opacity: 1; transform: scale(1.12) rotate(2deg); }
  100% { transform: scale(1); }
}
@keyframes intro-radar-open {
  from { opacity: 0; transform: scale(.55) rotate(-8deg); }
  to { opacity: 1; transform: scale(1) rotate(0); }
}
@keyframes intro-rays-open { from { opacity: 0; transform: scale(.72); } }
@keyframes intro-rays { to { transform: rotate(1turn); } }
@keyframes intro-frame-in {
  from { opacity: 0; clip-path: inset(48% 48% 48% 48%); }
  to { opacity: 1; }
}
@keyframes intro-topic-in {
  from { opacity: 0; translate: 0 30px; scale: .55; }
  to { opacity: 1; translate: 0 0; scale: 1; }
}
@keyframes intro-symbol-float {
  from { transform: translateY(6px) rotate(-6deg); }
  to { transform: translateY(-12px) rotate(7deg); }
}
@keyframes intro-kicker-in {
  from { opacity: 0; transform: translateY(-18px) rotate(-4deg) scale(.8); }
  to { opacity: 1; transform: rotate(-1deg); }
}
@keyframes intro-emblem-land {
  0% { opacity: 0; transform: translateZ(180px) scale(1.65) rotate(14deg); }
  70% { opacity: 1; transform: translateZ(0) scale(.92) rotate(-3deg); }
  100% { transform: scale(1) rotate(0); }
}
@keyframes intro-mark-flip {
  from { opacity: 0; transform: rotateY(-120deg) scale(.5); }
  to { opacity: 1; transform: rotateY(0) scale(1); }
}
@keyframes intro-halo-pulse { to { transform: scale(1.055); opacity: .72; } }
@keyframes intro-title-rule { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes intro-beat-in {
  from { opacity: 0; transform: translateY(20px) scale(.76); }
  to { opacity: 1; transform: none; }
}
@keyframes intro-sting {
  0%, 28%, 100% { background: rgba(255,255,255,.28); transform: skewX(-28deg) scaleX(.72); }
  50% { background: var(--sun); transform: skewX(-28deg) scaleX(1); }
}
@keyframes intro-title {
  from { opacity: 0; letter-spacing: .12em; transform: translateY(30px) scale(.82); }
  to { opacity: 1; letter-spacing: normal; transform: none; }
}
@keyframes picker-pop {
  from { opacity: 0; transform: scale(.45) rotate(-12deg); }
  to { opacity: 1; transform: scale(1) rotate(2deg); }
}
@keyframes answers-open {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: none; }
}
@keyframes wrong-answer-hit {
  0% { transform: translateX(0); }
  30% { transform: translateX(-13px) rotate(-1deg); }
  60% { transform: translateX(10px) rotate(1deg); }
  100% { transform: translateX(0); }
}
@keyframes candidate-card-enter {
  from { opacity: 0; transform: translateY(7vh) scale(.82); }
  to { opacity: 1; transform: none; }
}
@keyframes wrong-card-resolve {
  0% { transform: none; filter: brightness(1); }
  24% { transform: scale(1.045); filter: brightness(1.24); }
  46% { transform: translateX(-18px) rotate(-1deg) scale(1.02); }
  68% { transform: translateX(13px) rotate(1deg) scale(1.02); }
  100% { transform: none; }
}
@keyframes correct-card-resolve {
  0% { transform: none; filter: brightness(1); }
  58% { transform: scale(1.12) rotate(1.5deg); filter: brightness(1.5); }
  78% { transform: scale(.97) rotate(-.5deg); }
  100% { transform: none; filter: none; }
}
@keyframes suspense-card-pulse { to { transform: scale(1.025); filter: brightness(1.1); } }
@keyframes drumroll-bar { to { transform: scaleY(.48); opacity: .46; } }
@keyframes correct-frame-burst {
  0% { opacity: 0; transform: scale(.42) rotate(-5deg); }
  65% { opacity: .9; transform: scale(1.05) rotate(1deg); }
  100% { opacity: .48; transform: none; }
}
@keyframes correct-confetti-burst {
  0% { opacity: 0; transform: scale(.4) rotate(-8deg); }
  48% { opacity: 1; }
  100% { opacity: .64; transform: scale(1.12) rotate(4deg); }
}
@keyframes correct-answer-hit {
  0% { transform: scale(.82); filter: brightness(2); }
  68% { transform: scale(1.08); }
  100% { transform: scale(1.04); filter: none; }
}
@keyframes suspense-breathe { to { transform: scale(1.025); filter: brightness(1.14); } }
@keyframes correct-result-enter {
  from { opacity: 0; transform: translateY(26px) scale(.9); }
  to { opacity: 1; transform: none; }
}
@keyframes rank-change {
  from { opacity: .55; transform: translateY(var(--rank-shift)); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 900px) {
  .mode-grid { grid-template-columns: 1fr; max-width: 620px; margin: 0 auto; width: 100%; }
  .mode-card, .mode-card:nth-child(n) { min-height: 190px; transform: none; }
  .lobby-layout { grid-template-columns: 1fr; }
  .category-grid { grid-template-columns: 1fr; }
  .category-button, .category-tile { min-height: 100px; padding-top: 2.7rem; }
  .question-card.answer-open .question-image { max-height: 20vh; }
}

@media (max-height: 820px) and (min-width: 901px) {
  .stage { padding-top: 86px; padding-bottom: 18px; }
  .lobby-layout { gap: 20px; }
  .lobby-layout > .stage-card { padding: 18px 24px; gap: 11px; }
  .lobby-layout > .stage-card .stage-title { font-size: clamp(1.55rem, 2.7vw, 2.55rem); }
  .lobby-layout > .stage-card .stage-subtitle { font-size: 1rem; }
  .lobby-layout .room-code { font-size: clamp(3.6rem, 8vw, 6.3rem); }
  .lobby-layout .qr { width: 176px; padding: 9px; }
  .lobby-layout > .panel { padding: 24px; }
}

@media (max-width: 680px) {
  .shell { width: min(100% - 22px, 1180px); padding-top: 14px; }
  .landing-shell { align-content: start; padding-top: 22px; }
  .hero h2 { font-size: clamp(2.5rem, 14vw, 4.5rem); }
  .topbar { min-height: 70px; padding: 10px 12px; grid-template-columns: 1fr auto auto; }
  body[data-surface="display"] .topbar { grid-template-columns: 1fr auto; }
  .topbar .brand strong { display: none; }
  .topbar .brand-mark { width: 40px; height: 40px; }
  .phase-chip { max-width: 42vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .timer { width: 50px; min-width: 50px; height: 50px; font-size: 1.2rem; }
  .stage { width: min(100% - 20px, 1320px); padding-top: 88px; }
  .stage-card { padding-inline: 5px; }
  .stage-title { font-size: clamp(2rem, 10vw, 3.6rem); }
  .choice-grid { grid-template-columns: 1fr; gap: 11px; }
  .choice { min-height: 68px; font-size: 1rem; }
  .score-row { padding: 10px 13px; grid-template-columns: 42px minmax(0,1fr) auto; gap: 9px; }
  .score-row:nth-child(n) { transform: none; }
  .player-avatar { width: 30px; height: 30px; font-size: .86rem; }
  .avatar-stack { left: 8px; }
  .question-card.answer-open [data-role="question-title"] { font-size: clamp(1.65rem, 8vw, 2.5rem); }
  .host-controls.host-live { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .setup-panel { margin-top: 3vh; }
  .room-code { font-size: clamp(3.4rem, 19vw, 6rem); }
  .game-intro-card { padding-inline: 16px; }
  .intro-frame { inset: 18px 12px; }
  .intro-topic { width: clamp(44px, 10vw, 64px); }
  .intro-topic-science, .intro-topic-culture { right: 3%; }
  .intro-topic-numbers, .intro-topic-world { left: 3%; }
  .intro-topic-science, .intro-topic-numbers { top: 14%; }
  .intro-topic-culture, .intro-topic-world { bottom: 12%; }
  .intro-lockup { width: 96vw; }
  .intro-beats { gap: 6px; }
  .intro-beats span { font-size: clamp(1rem, 5vw, 1.35rem); gap: 6px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

body[data-surface="display"] .final-card .player-avatar { width: 80px; height: 80px; }
.reveal-player-stack { flex-wrap: wrap; gap: 10px; }
.reveal-player-stack .player-avatar { width: clamp(80px, 10vw, 144px); height: clamp(80px, 10vw, 144px); }
.reveal-player-stack .player-avatar + .player-avatar { margin-left: 0; }
body[data-surface="phone"] #phoneAvatar .player-avatar { width: 76px; height: 76px; }
body[data-surface="phone"] .score-player .player-avatar { width: 56px; height: 56px; }

body[data-surface="display"] .scoreboard-card { height: min(852px, calc(100dvh - 120px)); }
body[data-surface="display"] .scoreboard-card .score-row,
body[data-surface="display"] .scoreboard-card .scoreboard.is-crowded .score-row { padding-block: 2px; }

/* One ranked list; each row gives its contents a share of its available height. */
body[data-surface="display"] .scoreboard-card .scoreboard[data-count] {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: repeat(var(--score-count, 4), minmax(0, 1fr));
  gap: clamp(5px, 1vh, 12px);
}
body[data-surface="display"] .scoreboard-card .scoreboard .score-row {
  container-type: size;
  grid-template-columns: clamp(36px, 5vw, 70px) minmax(0, 1fr) auto;
  padding: 2px clamp(18px, 3vw, 38px);
  gap: clamp(10px, 2vw, 24px);
}
body[data-surface="display"] .scoreboard-card .scoreboard .score-row .player-avatar {
  width: clamp(26px, 86cqh, 144px);
  height: clamp(26px, 86cqh, 144px);
  border-width: clamp(2px, 4cqh, 4px);
}
body[data-surface="display"] .scoreboard-card .scoreboard .score-row .rank {
  width: clamp(24px, 66cqh, 68px);
  height: clamp(24px, 66cqh, 68px);
  font-size: clamp(1rem, 38cqh, 2.1rem);
}
body[data-surface="display"] .scoreboard-card .scoreboard .score-row .score-name { font-size: clamp(1rem, 38cqh, 2.5rem); }
body[data-surface="display"] .scoreboard-card .scoreboard .score-row .score-value { font-size: clamp(1.1rem, 42cqh, 3rem); }
body[data-surface="display"] .scoreboard-card .scoreboard .score-row .score-delta { font-size: clamp(.7rem, 23cqh, 1.25rem); }
.reveal-player-identity { display: flex; flex-direction: column; align-items: center; gap: 7px; width: clamp(80px, 10vw, 144px); min-width: 0; }
.reveal-player-name { width: 100%; color: var(--paper-bright); background: var(--ink); padding: 4px 6px; border-radius: 6px; font-size: clamp(.9rem, 1.4vw, 1.25rem); font-weight: 900; line-height: 1.25; text-align: center; direction: rtl; overflow-wrap: anywhere; }
@media (min-width: 901px) {
  .reveal-player-stack:has(.reveal-player-identity:nth-child(6)) .reveal-player-identity,
  .reveal-player-stack:has(.reveal-player-identity:nth-child(6)) .player-avatar {
    width: clamp(64px, 6vw, 88px);
  }
  .reveal-player-stack:has(.reveal-player-identity:nth-child(6)) .player-avatar {
    height: clamp(64px, 6vw, 88px);
  }
  .reveal-player-stack:has(.reveal-player-identity:nth-child(6)) .speed-bonus-award {
    padding: .3rem;
    font-size: .85rem;
  }
}