:root {
  color-scheme: dark;
  --background: #102723;
  --background-grain: url('/background-grain.png');
  --panel: #173631;
  --panel-raised: #1c4038;
  --text: #fff7e7;
  --muted: #bfd2c9;
  --gold: #f5cc7c;
  --line: #ffffff23;
  --holly: #ffaca0;
  --ivy: #a1e9ca;
  --radius: 1.15rem;
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  background:
    var(--background-grain),
    radial-gradient(ellipse at 82% 5%, #37615370, transparent 44%),
    radial-gradient(ellipse at 0% 100%, #3b242c55, transparent 48%),
    var(--background);
}
h1, h2, h3, p, ul, ol, fieldset { margin: 0; }
h1 {
  font: 700 clamp(2.5rem, 5vw, 4.6rem)/1.02 Georgia, "Times New Roman", serif;
  letter-spacing: -.045em;
  overflow-wrap: anywhere;
  text-wrap: balance;
}
h2 { font-size: 1.08rem; }
h3 { font-size: 1rem; }
a { color: var(--gold); }
button, input, select { font: inherit; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }

.topbar {
  min-height: 4.5rem;
  padding: .8rem max(1.15rem, calc((100% - 78rem) / 2));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  border-bottom: 1px solid var(--line);
  background: #0a1d19a8;
}
.brand, .topbar-tools { display: flex; align-items: center; gap: .75rem; }
.brand { font-weight: 760; line-height: 1.2; }
.brand-mark {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 2rem;
  aspect-ratio: 1;
  border: 1px solid #e9bf73a0;
  border-radius: 50%;
  color: var(--gold);
}
.connection {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  color: var(--muted);
  white-space: nowrap;
  font-size: .78rem;
}
.connection::before {
  content: "";
  width: .46rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--gold);
}
.connection.online::before { background: var(--ivy); }
body:not([data-view="host"]) .host-link { display: none; }
body:not([data-view="screen"]) .screen-link { display: none; }
.container { width: min(100% - 2.3rem, 78rem); margin: 0 auto; padding: 1.8rem 0 3rem; }
.notice { width: min(100% - 2.3rem, 78rem); margin: 1rem auto 0; background: #65332c; padding: .8rem 1rem; border-radius: .6rem; }
.eyebrow {
  font-weight: 790;
  font-size: .76rem;
  line-height: 1.5;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--gold);
}
.muted { color: var(--muted); }
.team-0 { --team: var(--holly); --team-bg: #653c38; }
.team-1 { --team: var(--ivy); --team-bg: #295b4d; }
.team-colour { color: var(--team); }
.section-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .7rem;
  margin-bottom: .9rem;
}
.button {
  min-height: 2.85rem;
  padding: .6rem 1.05rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: .68rem;
  background: var(--panel-raised);
  color: var(--text);
  font-weight: 760;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  touch-action: manipulation;
}
.button:hover { filter: brightness(1.13); }
.button:active { filter: brightness(.9); }
.button.primary { background: var(--gold); color: #201b10; }
.button.secondary { border-color: #abc4b771; }
.button.quiet { background: transparent; color: var(--muted); border-color: var(--line); }
.button.compact { min-height: 2.2rem; padding: .35rem .65rem; font-size: .8rem; }
.actions, .roster-actions { display: flex; flex-wrap: wrap; gap: .55rem; }
.scoreboard, .join-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 16px 40px #00141024;
}
.stage {
  padding: clamp(1.25rem, 4vw, 3rem);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.1rem;
  min-width: 0;
}
.host-stage { align-items: stretch; gap: .9rem; padding: 0 0 .75rem; }
.host-stage h1 { font-size: clamp(2rem, 5vw, 3.5rem); text-wrap: wrap; }
.host-stage .cue { font-weight: 650; }
.host-stage > .button.quiet { align-self: flex-start; }
.host-round-status { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .8rem; }
.button.steal-check { background: #e5c5ed; color: #301b37; }
.host-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(17.5rem, .42fr); gap: 1.35rem; }
.sidebar { display: grid; align-content: start; gap: 1rem; min-width: 0; }
.utility { border-top: 1px solid var(--line); padding: .75rem 0 .25rem; }
.utility summary { cursor: pointer; font-weight: 700; }
.utility[open] summary { margin-bottom: .75rem; }
.roster {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .65rem;
}
.roster-team { padding: .85rem; border: 1px solid var(--line); background: #0c242047; border-radius: .7rem; }
.roster-team ul { list-style: none; padding: 0; }
.roster-team li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .4rem;
  margin-top: .45rem;
  overflow-wrap: anywhere;
}
.count { font-size: .76rem; margin-left: .24rem; background: var(--team-bg); padding: .12rem .43rem; border-radius: .75rem; }
.join-card { display: grid; justify-items: center; text-align: center; gap: .75rem; padding: 1.35rem; }
.join-card img { display: block; width: min(100%, 13rem); height: auto; border-radius: .5rem; background: white; }
.join-card p:not(.eyebrow) { color: var(--muted); }
.join-url { font-size: .95rem; overflow-wrap: anywhere; }
.join-alternatives { border-top: 1px solid var(--line); padding-top: .7rem; }
.join-alternatives summary { cursor: pointer; font-size: .9rem; }
.join-alternatives div { display: grid; justify-items: center; gap: .45rem; margin-top: .8rem; }
.scoreboards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; }
.sidebar .scoreboards { grid-template-columns: 1fr; }
.scoreboard {
  padding: .85rem 1rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .55rem;
  border-top: 3px solid var(--team);
}
.score { font-size: clamp(1.9rem, 3vw, 2.85rem); font-weight: 840; line-height: 1.15; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.cue { font-size: clamp(1.08rem, 2vw, 1.38rem); max-width: 52ch; white-space: pre-line; overflow-wrap: anywhere; }
.answer {
  padding: .6rem .85rem;
  background: #ffffff0b;
  border-radius: .62rem;
  border: 1px solid var(--line);
}
.turn-line, .outcome { font-weight: 780; }
.outcome { color: var(--gold); }
.answer { display: grid; gap: .2rem; max-width: 100%; overflow-wrap: anywhere; }
.answer strong { white-space: pre-line; }
.answer-choices {
  width: min(100%, 36rem);
  padding-inline-start: 2rem;
  display: grid;
  gap: .35rem;
  overflow-wrap: anywhere;
}
.answer-choices li { padding-inline-start: .3em; }
.answer-choices li::marker { color: var(--gold); font-weight: 800; }
.host-pass-choices { width: 100%; }
.host-pass-choices li { border: 1px solid transparent; border-radius: .5rem; padding: .24rem .5rem; }
.host-pass-choices li:has(.team-0) { border-color: var(--holly); }
.host-pass-choices li:has(.team-1) { border-color: var(--ivy); }
.host-pass-choices li:has(.team-0):has(.team-1) {
  border-color: var(--holly);
  box-shadow: inset 0 0 0 1px var(--ivy);
}
.team-picks { display: flex; flex-wrap: wrap; gap: .15rem .65rem; font-size: .82rem; font-weight: 750; }
.pass-timer {
  color: var(--gold);
  font-size: 2rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.screen-stage .pass-timer { font-size: clamp(4rem, 14svh, 9rem); margin-top: .16em; }
.pass-results { display: grid; gap: .55rem; width: min(100%, 42rem); }
.pass-results > p { display: grid; gap: .12rem; overflow-wrap: anywhere; }
.pass-phone { padding-inline: 0; }
.player-turn { font-weight: 700; }
.vote-choices { display: grid; gap: .55rem; margin-top: .4rem; }
.vote-choice.button {
  justify-content: flex-start;
  gap: .7rem;
  min-height: 3.6rem;
  border-color: var(--line);
  text-align: left;
  overflow-wrap: anywhere;
}
.vote-choice span { color: var(--gold); }
.vote-choice[aria-pressed="true"] { border-color: var(--gold); background: #544831; }
.join-options { display: grid; gap: .4rem; border-top: 1px solid var(--line); padding-top: .85rem; }
.join-options a {
  justify-self: center;
  display: grid;
  place-items: center;
  min-height: 2.75rem;
  padding-inline: .5rem;
  font-size: .85rem;
  color: var(--muted);
  text-underline-offset: .2em;
}

label, .join-form, .adjustment-form { display: grid; gap: .42rem; }
label, legend { font-weight: 690; }
input:not([type="radio"]), select {
  padding: .6rem .7rem;
  width: 100%;
  min-height: 2.8rem;
  border: 1px solid #abc4b771;
  border-radius: .58rem;
  color: var(--text);
  background: #102c26;
}
.nomination-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; }
.nomination-form > .button { grid-column: 1 / -1; }
.spinner-form { display: grid; gap: .65rem; }
.judge-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; }
.judge-actions .button { padding-inline: .45rem; }
.wheel-show {
  width: 100%;
  display: grid;
  justify-items: center;
  gap: .65rem;
}
.wheel-caption { grid-row: 1; display: grid; gap: .18rem; }
.screen-stage .wheel-caption h1 { font-size: clamp(2rem, min(5vw, 6svh), 4.25rem); }
.wheel-caption .landed-category { color: var(--gold); }
.category-description {
  max-width: 72ch;
  margin-inline: auto;
  font-size: clamp(1rem, min(2.5vw, 3.2svh), 1.8rem);
  line-height: 1.25;
}
.wheel-nomination {
  min-height: 1.5em;
  color: var(--gold);
  font-size: clamp(1rem, min(2.4vw, 3svh), 1.7rem);
  font-weight: 750;
}
.wheel-wrap { position: relative; }
.wheel-show .wheel-wrap { width: min(100%, 62svh, max(12rem, 100svh - 15.5rem), 47rem); }
.wheel-show:has(.landed-category) .wheel-wrap { width: min(100%, 55svh, max(12rem, 100svh - 18rem), 47rem); }
.wheel-disc {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  transform-origin: center;
  filter: drop-shadow(0 .5rem .8rem #0008);
}
.wheel-disc text { fill: var(--text); font-weight: 790; text-anchor: middle; }
.wheel-disc .wheel-star { fill: var(--gold); font-size: 34px; }
.wheel-winner path { filter: brightness(1.24); stroke: #ffe4a3; stroke-width: 4; }
body[data-view="screen"][data-step="spin"] .wheel-disc { transition: transform 60ms linear; }
.wheel-pointer {
  position: absolute;
  top: -1%;
  left: 50%;
  z-index: 1;
  width: 0;
  height: 0;
  transform: translateX(-50%);
  border: clamp(.6rem, 1.2vw, 1.15rem) solid transparent;
  border-top: clamp(1.25rem, 2.8vw, 2.5rem) solid #fff2c7;
  filter: drop-shadow(0 2px 3px #151109);
}
.wheel-grip {
  --exposed-rim: clamp(7rem, 44vw, 19rem);
  position: relative;
  justify-self: end;
  width: calc(var(--exposed-rim) + 2.5rem);
  min-height: 13rem;
  max-height: 44rem;
  margin-right: -1rem;
  overflow: hidden;
  touch-action: none;
  user-select: none;
  cursor: grab;
}
.wheel-grip:active { cursor: grabbing; }
.phone-panel.wheel-phone {
  height: clamp(22rem, calc(100svh - 5.65rem), 56rem);
  grid-template-rows: auto auto minmax(13rem, 1fr);
  margin-bottom: 0;
  padding-bottom: 0;
}
.wheel-grip .wheel-wrap {
  position: absolute;
  top: 50%;
  left: 2.5rem;
  width: clamp(27rem, 93svh, 68rem);
  transform: translateY(-50%);
  pointer-events: none;
}
.wheel-grip .wheel-pointer {
  top: 50%;
  left: 1%;
  transform: translate(-50%, -50%) rotate(-90deg);
}
.wheel-grip .wheel-disc { rotate: -90deg; }
.wheel-grip .wheel-disc text { visibility: hidden; }
body[data-view="play"]:not([data-step="spin"]) .wheel-grip { cursor: default; }
.nominees { display: flex; gap: .65rem; font-weight: 740; }
.cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(.45rem, 3vw, 2rem);
  width: min(100%, 48rem);
  justify-items: center;
}
.roulette-controls { display: grid; gap: .75rem; }
.roulette-choices {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(.35rem, 2vw, .65rem);
}
.roulette-choices .button {
  padding-inline: .25rem;
  background: var(--card-dark);
  border-color: var(--card-light);
}
.christmas-card {
  width: min(100%, 31svh, 14.5rem);
  margin: 0;
  display: grid;
  gap: .65rem;
}
.christmas-card figcaption { font-weight: 760; font-size: clamp(.85rem, 2.2svh, 1.15rem); }
.card-book { aspect-ratio: 4 / 5; position: relative; perspective: 1150px; }
.card-cover, .card-page, .card-front, .card-inside-cover { position: absolute; inset: 0; }
.card-cover { transform-origin: left center; transform-style: preserve-3d; }
.card-front, .card-inside-cover { backface-visibility: hidden; }
.card-front, .card-page, .card-inside-cover {
  border: 1px solid #dcc593b3;
  border-radius: .16rem .42rem .42rem .16rem;
  box-shadow: 0 .6rem 1.15rem #060e0c66;
}
.card-front {
  display: grid;
  grid-template-rows: 1fr auto;
  justify-items: center;
  align-items: center;
  gap: 4%;
  padding: 12% 9%;
  background: radial-gradient(ellipse at 50% 18%, var(--card-light), var(--card-dark) 78%);
  color: #ffe6ad;
}
.card-front::after {
  content: "";
  position: absolute;
  inset: 5%;
  border: 1px solid #ffe6ad60;
  pointer-events: none;
}
.card-front strong {
  font: 700 clamp(.67rem, min(2.2vw, 4svh), 1.65rem)/1.06 Georgia, serif;
  text-wrap: balance;
}
.card-0 { --card-light: #993e49; --card-dark: #561928; }
.card-1 { --card-light: #38745c; --card-dark: #103b32; }
.card-2 { --card-light: #3c587b; --card-dark: #202d50; }
.card-emblem {
  display: grid;
  place-items: center;
  font: clamp(1.9rem, min(7vw, 12svh), 5rem)/1 "Segoe UI Symbol", Georgia, serif;
  text-shadow: 0 .05em .18em #0c162a60;
}
.card-0 .card-emblem {
  width: 59%;
  height: 84%;
  background: linear-gradient(135deg, #fff2c4, #d7ac53);
  clip-path: polygon(50% 0, 72% 31%, 61% 31%, 84% 57%, 71% 57%, 98% 84%, 57% 84%, 57% 100%,
    43% 100%, 43% 84%, 2% 84%, 29% 57%, 16% 57%, 39% 31%, 28% 31%);
}
.card-2 .card-emblem { text-shadow: .8em -.3em 0 #ffe6ad63, -.75em .5em 0 #ffe6ad63; }
.card-page, .card-inside-cover {
  background: linear-gradient(90deg, #d8be88 0, #ffedca 9%, #fff5df 100%);
  color: #573323;
}
.card-inside-cover { transform: rotateY(180deg); }
.card-inside-cover::before {
  content: "✧";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #9d794c80;
  font: clamp(2rem, 10svh, 5rem) Georgia, serif;
}
.card-page {
  display: grid;
  place-content: center;
  gap: .5rem;
  padding: 9%;
  font: 700 clamp(.85rem, 3.6svh, 1.75rem)/1.12 Georgia, serif;
}
.card-page b { display: block; color: #6a291e; font-size: clamp(1.5rem, 6svh, 3.6rem); }
.roulette-reveal {
  width: 100%;
  display: grid;
  justify-items: center;
  padding-top: clamp(.85rem, 5svh, 2.2rem);
}
.card-selected { width: min(42vw, 34svh, 16rem); }
.card-selected .card-book { transform: translateX(47%); }
.card-selected .card-cover { transform: rotateY(-162deg); }
@media (prefers-reduced-motion: no-preference) {
  body[data-step="opening"] .card-selected .card-book { animation: card-centre 1.1s ease both; }
  body[data-step="opening"] .card-selected .card-cover { animation: card-open 1.1s cubic-bezier(.3,.7,.35,1) both; }
}
@keyframes card-centre {
  0%, 18% { transform: translateX(0); }
  100% { transform: translateX(47%); }
}
@keyframes card-open {
  0%, 18% { transform: rotateY(0); }
  100% { transform: rotateY(-162deg); }
}
audio { width: min(100%, 34rem); }
video, .clue-image { max-width: 100%; max-height: 48vh; object-fit: contain; border-radius: .6rem; }

.screen-lobby { display: grid; grid-template-columns: minmax(0, 1fr) minmax(16rem, .42fr); gap: 2.2rem; align-items: center; margin-bottom: 2rem; }
.lobby-intro { display: grid; gap: 1.2rem; }
.lobby-intro h1 { font-size: clamp(3rem, 9vw, 8.2rem); color: var(--text); }
.screen-lobby .join-card img { width: min(100%, 18rem); }
.backdrop { display: grid; gap: 1rem; text-align: center; }
body[data-view="screen"] {
  background: var(--background-grain), radial-gradient(ellipse at 50% 15%, #28564a, transparent 62%), #0a211c;
}
body[data-view="screen"] .topbar { min-height: 3.4rem; padding-block: .45rem; }
body[data-view="screen"] .container { padding-block: clamp(.65rem, 2svh, 1.4rem) 1rem; }
.backdrop:not(:has(.wheel-show)) .screen-stage { min-height: min(63svh, 42rem); justify-content: center; }
.screen-stage {
  align-items: center;
  text-align: center;
  gap: clamp(.55rem, 1.5vh, 1rem);
  padding: clamp(.5rem, 1.5vh, 1.25rem) 0;
}
.screen-stage h1 { font-size: clamp(2.15rem, min(6.3vw, 9svh), 6rem); }
.screen-stage h1.stage-question { font-size: clamp(1.75rem, min(4.6vw, 6.8svh), 4.6rem); max-width: 25ch; }
.stage-subtitle, .screen-stage .turn-line { font-size: clamp(1rem, min(2.8vw, 3.5svh), 2rem); text-wrap: balance; }
.screen-stage .eyebrow { font-size: clamp(.7rem, 1.3vw, 1rem); }
.screen-stage .eyebrow span { opacity: .55; padding-inline: .35em; }
.stage-result { font-size: clamp(1rem, min(2.8vw, 3.6svh), 2.05rem); line-height: 1.2; }
.stage-verdict { font-size: 1.2em; font-weight: 850; margin-bottom: .25em; }
.stage-result.hit .stage-verdict { color: var(--gold); }
.stage-result.miss .stage-verdict { color: var(--holly); }
.buzz-call { text-shadow: 0 0 .3em color-mix(in srgb, var(--team) 48%, transparent); }
@media (prefers-reduced-motion: no-preference) {
  .buzz-call { animation: buzz-call .55s ease-out both; }
}
@keyframes buzz-call {
  0% { transform: scale(.96); }
  32% { transform: scale(1.035); text-shadow: 0 0 .48em var(--team); }
  100% { transform: scale(1); }
}
.backdrop .scoreboards { width: min(100%, 54rem); justify-self: center; }
.backdrop .scoreboard { text-align: left; border-inline: 0; border-bottom: 0; border-radius: 0; box-shadow: none; background: transparent; padding-block: .45rem; }
.backdrop .scoreboard > div { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.backdrop .scoreboard .eyebrow { font-size: clamp(.78rem, 1.55vw, 1.35rem); letter-spacing: .07em; }
.backdrop .score { font-size: clamp(1.55rem, min(4.3vw, 5.5svh), 3.2rem); }
.screen-stage .cue { font-size: clamp(1.25rem, 2.65vw, 2.3rem); }
.screen-stage .outcome { font-size: clamp(1.1rem, 2vw, 1.6rem); }

body[data-view="screen"]:has(.christmais-live) .topbar { display: none; }
body[data-view="screen"] .container:has(.christmais-live) { padding-block: .75rem; }
.christmais-live {
  display: grid;
  grid-template-columns: 1fr minmax(0, 3fr) 1fr;
  align-items: center;
  gap: .65rem;
}
.christmais-live [data-christmais-poster] { grid-column: 2; height: calc(100dvh - 1.5rem); }
.christmais-live img { display: block; width: 100%; height: 100%; object-fit: contain; }
.christmais-clock { grid-column: 3; justify-self: center; font-size: clamp(1.5rem, 6vw, 5rem); }
.christmais-results {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .6rem 1.2rem;
  width: min(100%, 36rem);
}
.christmais-results section { border-top: 2px solid var(--team); padding-top: .45rem; }
.christmais-results strong, .christmais-verdict { color: var(--gold); }
.screen-stage .christmais-results { width: min(100%, 46rem); font-size: clamp(1rem, 2vw, 1.55rem); }
.screen-stage .christmais-results h2 { font-size: 1em; }
.christmais-verdict { font-weight: 800; font-size: clamp(1.2rem, 3vw, 2.3rem); }
.christmais-choices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.christmais-choices .button {
  display: grid;
  justify-content: center;
  justify-items: center;
  gap: .12rem;
  padding: .8rem .35rem;
  font-size: clamp(1rem, 4.5vw, 1.25rem);
  text-align: center;
}
.christmais-choices small { color: var(--muted); font-weight: 550; }
@media (max-width: 620px) and (orientation: portrait) {
  .christmais-live { grid-template-columns: 1fr; }
  .christmais-clock { grid-column: 1; grid-row: 1; font-size: 2.5rem; }
  .christmais-live [data-christmais-poster] { grid-column: 1; height: calc(100dvh - 4.75rem); }
}

.mixtape-key { overflow-wrap: anywhere; }
.mixtape-key strong { font-size: 1.25rem; }
.mixtape-key p { color: var(--muted); }
.mixtape-actions { display: grid; gap: .55rem; }
.mixtape-form { display: grid; gap: 1rem; }
.mixtape-phone { text-align: left; align-items: start; }
.mixtape-phone h1 { text-wrap: wrap; }
.mixtape-phone .button { justify-self: stretch; }
.mixtape-entries {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(.7rem, 3vw, 2rem);
  width: min(100%, 48rem);
}
.host-stage .mixtape-entries { width: 100%; }
.mixtape-entry {
  display: grid;
  align-content: start;
  gap: .24rem;
  border: 0;
  border-top: 2px solid var(--team);
  padding: .6rem 0 0;
  min-width: 0;
  overflow-wrap: anywhere;
}
fieldset.mixtape-entry { border: 0; }
.mixtape-entry > strong { color: var(--gold); }
.mixtape-tick {
  display: inline-block;
  margin-inline-start: .4em;
  color: var(--ivy);
  font-weight: 850;
}
.mixtape-mark {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  min-height: 3rem;
  padding: .4rem 0;
  cursor: pointer;
}
.mixtape-mark input[type="checkbox"] {
  width: 1.15rem;
  height: 1.15rem;
  min-height: 0;
  margin: 0 .3rem 0 0;
  accent-color: var(--gold);
}
.mixtape-mark small { display: block; color: var(--muted); }
.button:disabled { opacity: .52; cursor: default; filter: none; }
.mixtape-record-scene {
  position: relative;
  display: grid;
  justify-items: center;
  width: min(100%, 28rem);
}
.mixtape-notes {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.mixtape-notes span {
  position: absolute;
  bottom: 12%;
  left: var(--x);
  opacity: 0;
  color: var(--gold);
  font-size: clamp(.9rem, 2.6svh, 1.4rem);
}
.mixtape-notes span:nth-child(1) { --x: 15%; --drift: -1rem; --delay: -.8s; }
.mixtape-notes span:nth-child(2) { --x: 24%; --drift: -.55rem; --delay: -3.4s; }
.mixtape-notes span:nth-child(3) { --x: 71%; --drift: .5rem; --delay: -2.2s; }
.mixtape-notes span:nth-child(4) { --x: 81%; --drift: 1rem; --delay: -4.6s; }
.mixtape-notes span:nth-child(5) { --x: 87%; --drift: .65rem; --delay: -1.4s; }
@media (prefers-reduced-motion: no-preference) {
  .mixtape-record-scene[data-playing="true"] .mixtape-notes span {
    animation: mixtape-note 5.8s var(--delay) linear infinite;
  }
}
@keyframes mixtape-note {
  0% { opacity: 0; transform: translate(0, 0); }
  26%, 59% { opacity: .62; }
  100% { opacity: 0; transform: translate(var(--drift), -13svh); }
}
.mixtape-record {
  width: clamp(6rem, 23svh, 14rem);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid #d1ae6a90;
  background:
    radial-gradient(circle, #102723 0 3%, var(--gold) 3.5% 23%, transparent 24%),
    conic-gradient(from 35deg, #304d47, #0b1918, #142b28, #304d47, #0b1918, #142b28, #304d47);
  box-shadow: inset 0 0 0 .55rem #091513, 0 1rem 2.3rem #05151080;
  position: relative;
}
.mixtape-record::after {
  content: "";
  position: absolute;
  inset: 12%;
  border-radius: inherit;
  background: repeating-radial-gradient(circle, transparent 0 5px, #ffffff13 5px 6px);
  mask-image: radial-gradient(circle, transparent 0 31%, #000 32%);
}
.mixtape-ready { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem 1.5rem; }
.mixtape-playback, .mixtape-ready { font-size: clamp(.95rem, 2vw, 1.35rem); }
.screen-stage .mixtape-entries { text-align: left; font-size: clamp(1rem, 2.2vw, 1.65rem); }
.screen-stage .mixtape-entry h2 { font-size: .82em; }
.screen-stage h1.mixtape-title { max-width: 24ch; font-size: clamp(2rem, min(6vw, 8svh), 5.5rem); }
.sack-screen-head {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: .45rem 1.4rem;
}
.screen-stage:has(.sack-board) h1 {
  font-size: clamp(1.7rem, min(4.6vw, 6.8svh), 4rem);
}
.screen-stage:has(.sack-labelled) { gap: .4rem; padding-block: .35rem; }
.screen-stage .sack-clock {
  min-width: 4ch;
  margin: 0;
  font-size: clamp(1.7rem, 6.4svh, 3.5rem);
}
.sack-clock[aria-hidden="true"] { visibility: hidden; }
.sack-bag { display: block; width: min(72vw, 49svh, 24rem); height: auto; }
.sack-spread { position: relative; width: min(100%, 54rem); }
.sack-spread .sack-bag {
  position: absolute;
  z-index: 1;
  width: min(21vw, 10rem);
  top: -2rem;
  left: 50%;
  transform: translateX(-50%);
  pointer-events: none;
}
.sack-board {
  width: min(100%, 54rem);
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  justify-items: center;
  gap: clamp(.18rem, 1.25svh, .75rem) clamp(.25rem, 2vw, 1.15rem);
}
.sack-object {
  display: grid;
  align-content: start;
  justify-items: center;
  gap: .18rem;
  width: 100%;
  min-width: 0;
  font-weight: 680;
}
.sack-tile {
  display: block;
  width: min(100%, 15svh, 8.4rem);
  aspect-ratio: 1;
  background: var(--sack-art) var(--tile-x) var(--tile-y) / 500% 400%;
  background-repeat: no-repeat;
}
.sack-labelled .sack-tile { width: min(100%, 9.2svh, 6.25rem); }

.reflexes-stage { gap: clamp(.8rem, 2.5vh, 1.6rem); }
.reflexes-rules { display: flex; flex-wrap: wrap; justify-content: center; gap: .25rem 1.3rem; }
.host-stage .reflexes-rules { justify-content: flex-start; }
.reflexes-rules strong { color: var(--gold); }
.screen-stage .reflexes-rules { font-size: clamp(1.15rem, 2.2vw, 2rem); }
.reflexes-scores { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .85rem; width: 100%; }
.reflexes-scores section {
  display: grid;
  gap: .1rem;
  text-align: center;
  padding: .8rem .45rem;
  border-top: 2px solid var(--team);
  color: var(--team);
  background: #07181366;
  border-radius: .4rem .4rem .8rem .8rem;
}
.reflexes-scores strong { font-size: clamp(1.6rem, 5vw, 2.8rem); line-height: 1.12; font-variant-numeric: tabular-nums; }
.screen-stage .reflexes-scores { max-width: 48rem; }
.screen-stage .reflexes-scores h2 { font-size: clamp(1rem, 2.2vw, 1.8rem); }
.screen-stage .reflexes-scores strong { font-size: clamp(2.7rem, 7vw, 5.5rem); }
.screen-stage .reflexes-timer { font-size: clamp(4rem, min(15vw, 26vh), 12rem); line-height: .94; margin-top: 0; }
.reflexes-phone { max-width: 32rem; margin-inline: auto; text-align: center; }
body[data-view="play"][data-step="playing"] .container:has(.reflexes-phone) { padding-block: .4rem 0; }
.reflexes-preview { display: flex; justify-content: center; gap: clamp(.5rem, 3vw, 1.3rem); }
.reflexes-preview .reflexes-target { width: min(25vw, 7rem); }
.reflexes-hud { display: flex; align-items: center; justify-content: space-between; text-align: left; }
.reflexes-hud > p:first-child { display: flex; align-items: baseline; gap: .55rem; }
.reflexes-hud strong { color: var(--gold); font-size: 1.45rem; font-variant-numeric: tabular-nums; }
.reflexes-hud .pass-timer { font-size: 1.55rem; }
.reflexes-timer[data-final-seconds], .reflexes-hud [data-final-seconds] { color: var(--holly); }
.reflexes-phone:has([data-final-seconds]) .reflexes-board { border-color: var(--holly); }
.reflexes-board {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .25rem .45rem;
  width: min(100%, 50svh);
  margin-inline: auto;
  padding: .5rem;
  border: 1px solid #9dc8b570;
  border-radius: 1rem;
  background: linear-gradient(155deg, #2f5a50, #173d35);
  user-select: none;
}
.reflexes-hole {
  isolation: isolate;
  display: grid;
  place-items: end center;
  position: relative;
  aspect-ratio: 1;
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--text);
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.reflexes-hole::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: auto 5% 8%;
  height: 32%;
  border: 2px solid #cae1d2;
  border-bottom-width: 4px;
  border-radius: 50%;
  background: #061511;
  box-shadow: inset 0 .25rem .4rem #0009, 0 .2rem .25rem #0a211d;
}
.reflexes-hole:has(.reflexes-target[data-kind]:not([data-kind=""])) { cursor: pointer; }
.reflexes-target {
  display: block;
  width: 96%;
  aspect-ratio: 1;
  pointer-events: none;
  background: var(--target-art, none) center bottom / contain no-repeat;
}
.reflexes-hole .reflexes-target { margin-bottom: 9%; }
.reflexes-target[data-kind="grinch"] { --target-art: var(--grinch-art); }
.reflexes-target[data-kind="gift"] { --target-art: var(--gift-art); }
.reflexes-target[data-kind="santa"] { --target-art: var(--santa-art); }
.reflexes-hole .reflexes-target[data-kind]:not([data-kind=""]) { animation: reflexes-pop 75ms ease-out both; }
@keyframes reflexes-pop {
  from { transform: translateY(18%) scale(.85); opacity: .72; }
  to { transform: translateY(0) scale(1); opacity: 1; }
}
.reflexes-hit {
  position: absolute;
  inset: auto 0 26%;
  font-size: clamp(1.35rem, 5vw, 2.35rem);
  font-weight: 900;
  color: var(--gold);
  text-shadow: 0 1px 5px #061511, 0 1px 5px #061511;
  opacity: 0;
  pointer-events: none;
}
.reflexes-hit:is([data-kind="gift"], [data-kind="santa"]) { color: var(--holly); }
@media (prefers-reduced-motion: reduce) {
  .reflexes-hole .reflexes-target[data-kind]:not([data-kind=""]) { animation: none; }
}
.sack-labelled .sack-object { font-size: clamp(.63rem, min(1.3vw, 2.1svh), 1rem); line-height: 1.2; }
.sack-reference { width: 100%; }
.sack-reference .sack-tile { width: min(100%, 4.25rem); }
.sack-reference .sack-object { text-align: center; }
.sack-scores {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: min(100%, 38rem);
  gap: .65rem 1.2rem;
}
.sack-scores section { border-top: 2px solid var(--team); padding-top: .35rem; }
.sack-scores strong { font-size: clamp(1.1rem, 2.5vw, 1.5rem); color: var(--gold); }
.sack-judging { display: grid; gap: .9rem; width: 100%; }
.sack-judging-team { display: grid; gap: .55rem; min-width: 0; }
.sack-decision {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  align-items: center;
  gap: .65rem;
  overflow-wrap: anywhere;
}
.sack-decision small { display: block; color: var(--muted); }
.sack-add-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: .5rem; }
.sack-entry-list { padding: .3rem 0 0; list-style: none; }
.sack-entry-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .55rem;
  border-bottom: 1px solid var(--line);
  padding-block: .4rem;
  overflow-wrap: anywhere;
}
@media (prefers-reduced-motion: no-preference) {
  body[data-step="spilling"] .sack-object { animation: sack-spill .59s var(--spill-delay) both cubic-bezier(.18,.8,.22,1); }
  body[data-step="spilling"] .sack-spread .sack-bag { animation: sack-exit .83s both ease-out; }
}
@keyframes sack-spill {
  from { opacity: 0; transform: translate(var(--spill-x), var(--spill-y)) rotate(-24deg) scale(.2); }
  70% { opacity: 1; transform: translateY(3%) rotate(3deg); }
  to { opacity: 1; transform: none; }
}
@keyframes sack-exit {
  0% { opacity: 1; transform: translateX(-50%) rotate(-12deg); }
  100% { opacity: 0; transform: translate(-50%, -48%) rotate(20deg) scale(.7); }
}

.reveal-effect { position: fixed; inset: 0; pointer-events: none; z-index: 5; overflow: hidden; }
.wrong-answer { box-shadow: inset 0 0 16vmin 4vmin #fb5258c4; animation: miss-glow .55s ease-out both; }
@keyframes miss-glow { from { opacity: 1; } to { opacity: 0; } }
.celebrate i {
  position: absolute;
  top: 78vh;
  left: var(--edge);
  width: .66rem;
  height: .38rem;
  animation: confetti 1.65s var(--delay) both;
}
@keyframes confetti {
  0% { opacity: 0; transform: translate(0, 0); }
  8% { opacity: 1; }
  58% { opacity: 1; transform: translate(var(--dx), var(--lift)) rotate(var(--twist)); animation-timing-function: ease-in; }
  100% { opacity: 0; transform: translate(calc(var(--dx) * 1.25), 15vh) rotate(calc(var(--twist) * 1.6)); }
}

body[data-view="play"] .container { width: min(100% - 2rem, 32rem); padding-top: 1.15rem; }
body[data-view="play"] .container:has(.wheel-phone) { padding-bottom: 0; }
.phone-panel { display: grid; gap: .85rem; padding: 1.05rem 0; margin-bottom: 1rem; }
.phone-panel h1 { font-size: clamp(2.3rem, 8vw, 3.65rem); }
.join-form { gap: .95rem; }
.join-form fieldset { border: none; padding: 0; }
.team-options { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin-top: .45rem; }
.team-option {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: .65rem .35rem;
  gap: .35rem;
  min-height: 3rem;
  color: var(--team);
  background: var(--team-bg);
  border: 1px solid var(--line);
  border-radius: .6rem;
  cursor: pointer;
}
.team-option:has(:checked) { border-color: var(--team); }
.team-option input { accent-color: var(--team); }
.buzzer-phone { justify-items: center; text-align: center; gap: clamp(1rem, 5svh, 3rem); }
.button.buzzer {
  width: min(100%, 16rem, 45svh);
  min-height: 0;
  aspect-ratio: 1;
  border: .35rem solid #ffc3a7;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 15%, #d7464b, #9c242b 80%);
  box-shadow: 0 .45rem 0 #4f171a, 0 .75rem 1.2rem #0006;
  touch-action: manipulation;
  font-size: clamp(2.1rem, 10vw, 3.3rem);
  letter-spacing: .1em;
  font-weight: 900;
}
.button.buzzer:active:not(:disabled) { transform: translateY(.3rem); box-shadow: 0 .15rem 0 #4f171a; }
.button.buzzer:disabled { background: #39423c; border-color: #66776c; box-shadow: none; color: var(--muted); cursor: default; }

@media (max-width: 900px) {
  .host-layout { grid-template-columns: 1fr; }
  .sidebar .scoreboards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .topbar { padding-inline: 1rem; }
  .topbar-tools { gap: .4rem; }
  .screen-lobby, .nomination-form { grid-template-columns: 1fr; }
  .screen-lobby { gap: 1rem; }
  .roster-actions { gap: .2rem; }
  .roster-actions .compact { padding-inline: .4rem; }
  .wheel-show .wheel-wrap, .wheel-show:has(.landed-category) .wheel-wrap { width: min(100%, 48svh); }
}
@media (prefers-reduced-motion: reduce) {
  body[data-view="screen"][data-step="spin"] .wheel-disc { transition: none; }
}