/* Hallmark · shape: app screen · genre: playful · theme: custom · redesign: full
 * idea: "every control is a lump of clay you press, like a game-show buzzer" · vibe: "game-show clay with a scoreboard edge"
 * paper: oklch(93.5% 0.016 268) · accent: oklch(55% 0.2 27) · display: Clash Display · body: Manrope
 * nav: a slim top bar, the wordmark and the connection state · signature: the buzzer, a clay key that stays pressed in once you buzz · states: the ones the app has (connecting, waiting, empty lists, errors)
 * axes: light/grotesk-sans/chromatic-red · posture: full palette (students blue, professors orange, buzzer red, your-turn yellow) · contrast: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S4 R3 V4 · weakest: R, clay shading on every surface; kept it to cards and controls, lists and figures sit flat on the paper */
/* Hallmark · answered F24 · clay is one surface whose shadow has three layers, a drop, a shaded edge and a lit edge, which is what the user asked for */
/* Hallmark · dismissed F7 · the eight selectors sharing a recipe are all buttons, one clay control in every place it appears */
/* Hallmark · dismissed F7 · the pill radius sits on chips and state pills, small clay beads that mark a phase, a category or a split */
@import url("./tokens.css");

/* ---------- Base: what every page starts from ---------- */

*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
html { scrollbar-color: var(--color-muted) var(--color-paper); scroll-padding-top: var(--space-3xl); }
body { margin: 0; background: var(--color-paper); color: var(--color-ink); font-family: var(--font-body); font-size: var(--text-md); line-height: 1.55; -webkit-font-smoothing: antialiased; caret-color: var(--color-accent); }
::selection { background: color-mix(in oklab, var(--color-accent) 22%, transparent); color: var(--color-ink); }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.16em; }
h1, h2, h3 { margin: 0; font-family: var(--font-display); font-synthesis: none; overflow-wrap: break-word; min-width: 0; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
p:not([class]) { max-width: 65ch; }
img, video { max-width: 100%; height: auto; display: block; }
svg { display: block; }
[hidden] { display: none !important; }
button, input, select, textarea { font: inherit; }
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); box-sizing: border-box; }
.num, .figure, td.num { font-variant-numeric: tabular-nums; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
[data-slot] { position: relative; overflow: hidden; background: linear-gradient(160deg, var(--color-paper-2, var(--color-paper)), var(--color-paper-3, var(--color-paper))); }
[data-slot] > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
[data-slot]:has(> img) > :not(img):not([data-keep]) { display: none !important; }
@media (max-width: 60rem) { :root { --gutter: 24px; --section-gap-s: 80px; --section-gap: 96px; --section-gap-l: 120px; } }
@media (max-width: 40rem) { :root { --gutter: 16px; --section-gap-s: 56px; --section-gap: 72px; --section-gap-l: 96px; --gap-columns: 16px; } }
@media (prefers-reduced-motion: reduce) { *:not(.keep-motion), *:not(.keep-motion)::before, *:not(.keep-motion)::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }

/* ---------- Shared pieces ---------- */

body { min-height: 100dvh; font-weight: 500; }
h1, h2, h3 { font-weight: 600; letter-spacing: var(--tracking-display); line-height: 1.1; color: var(--color-ink); }
h3 { font-size: var(--text-lg); }
strong, b { font-weight: 800; }

/* The slim bar on every page: the name on the left, the connection state on the right. */
.shell {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm) var(--space-lg);
  padding: var(--space-md) var(--gutter);
}
.wordmark { font-family: var(--font-display); font-weight: 600; font-size: var(--text-xl); line-height: 1; margin: 0; }
.connection { margin-left: auto; font-size: var(--text-sm); color: var(--color-muted); }
.empty-note { color: var(--color-muted); }
.error { color: var(--color-error); min-height: 1lh; font-weight: 800; }

/* A clay card: a soft lump lighter than the paper it sits on. */
.clay {
  background: var(--color-clay); border-radius: var(--radius-card); box-shadow: var(--shadow-clay);
  padding: var(--space-lg);
}

/* Buttons are small clay pieces. A fill colour comes in through --fill and --fill-ink. */
.btn, .controls button, .tools button, .upload, .row button, #lockin-options button, .team-row button, #lockins button {
  --fill: var(--color-clay); --fill-ink: var(--color-ink);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs);
  min-height: 44px; padding: var(--space-xs) var(--space-lg);
  border: 0; border-radius: var(--radius-control);
  background: var(--fill); color: var(--fill-ink);
  font-family: var(--font-body); font-weight: 800; font-size: var(--text-md); white-space: nowrap;
  box-shadow:
    5px 6px 12px color-mix(in oklab, var(--color-shade) 22%, transparent),
    inset -4px -5px 9px color-mix(in oklab, var(--fill) 78%, var(--color-shade)),
    inset 4px 4px 8px color-mix(in oklab, var(--fill) 40%, var(--color-highlight));
  cursor: pointer;
  transition: transform var(--dur-micro) var(--ease-out), box-shadow var(--dur-micro) var(--ease-out), background-color var(--dur-micro) var(--ease-out);
}
:where(.btn, .controls button, .tools button, .upload, .row button, #lockin-options button, .team-row button, #lockins button):hover:not(:disabled) { transform: translateY(-1px); }
:where(.btn, .controls button, .tools button, .upload, .row button, #lockin-options button, .team-row button, #lockins button):active:not(:disabled) {
  transform: translateY(2px) scale(0.98);
  box-shadow:
    1px 1px 3px color-mix(in oklab, var(--color-shade) 18%, transparent),
    inset 5px 6px 10px color-mix(in oklab, var(--fill) 70%, var(--color-shade)),
    inset -3px -3px 6px color-mix(in oklab, var(--fill) 50%, var(--color-highlight));
}
:where(.btn, .controls button, .tools button, .row button, #lockin-options button, .team-row button, #lockins button):disabled {
  opacity: 0.55; cursor: not-allowed; box-shadow: var(--shadow-well); transform: none;
}
.btn-primary { --fill: var(--color-accent); --fill-ink: var(--color-accent-ink); }
.upload:has(input:focus-visible) { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.upload input { display: none; }
kbd { font-family: var(--font-body); font-size: var(--text-xs); font-weight: 800; padding: 0 var(--space-xs); border-radius: var(--radius-pill); background: var(--color-paper-2); color: var(--color-ink-2); }

/* Text fields are pressed into the clay: wells, not lumps. */
.field, input[type="text"], input[type="password"], input[type="number"] {
  min-height: 48px; padding: var(--space-xs) var(--space-md);
  border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-control);
  background: var(--color-paper); color: var(--color-ink); box-shadow: var(--shadow-well);
  font-size: var(--text-md);
}
:is(.field, input[type="text"], input[type="password"], input[type="number"]):focus-visible { outline: 2px solid var(--color-focus); outline-offset: -2px; }
::placeholder { color: var(--color-muted); opacity: 1; }
.field-label { display: block; font-weight: 800; font-size: var(--text-sm); color: var(--color-ink-2); }

/* The phase pill: what the game is doing right now. */
.phase {
  display: inline-flex; align-items: center; min-height: 32px; padding: 0 var(--space-md);
  border-radius: var(--radius-pill); background: var(--color-idle); color: var(--color-idle-ink);
  font-weight: 800; font-size: var(--text-sm); box-shadow: var(--shadow-clay-sm);
}
.phase:empty { display: none; }
.phase.open { background: var(--color-accent); color: var(--color-accent-ink); }
.phase.answering { background: var(--color-turn); color: var(--color-turn-ink); }
.phase.revealed { background: var(--color-success); color: var(--color-success-ink); }
#countdown, .countdown { font-family: var(--font-display); font-size: var(--text-xl); color: var(--color-error); font-variant-numeric: tabular-nums; }
.projector #countdown, .projector .countdown { color: var(--color-turn); }

/* The question, as every page draws it. */
.meta { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-bottom: var(--space-sm); }
.meta span { padding: var(--space-3xs) var(--space-sm); border-radius: var(--radius-pill); background: var(--color-paper-2); color: var(--color-ink-2); font-size: var(--text-sm); font-weight: 800; }
.prompt { font-family: var(--font-display); font-size: var(--text-2xl); line-height: 1.2; color: var(--color-ink); text-wrap: pretty; max-width: 40ch; }
.choices { list-style: none; margin: var(--space-lg) 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: var(--space-sm); }
.choices li {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md); border-radius: var(--radius-control);
  background: var(--color-paper); box-shadow: var(--shadow-well); font-weight: 800;
}
.choices li.correct { background: var(--color-success); color: var(--color-success-ink); box-shadow: var(--shadow-clay-sm); }
.choices .split { font-variant-numeric: tabular-nums; font-size: var(--text-sm); padding: 0 var(--space-xs); border-radius: var(--radius-pill); background: var(--color-clay); color: var(--color-ink); }

/* Team lists: flat rows on the paper, side colour on the score. */
.teams { list-style: none; margin: 0; padding: 0; }
.teams li { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-md); padding: var(--space-xs) 0; border-bottom: var(--rule-hair) solid var(--color-rule); }
.teams li:last-child { border-bottom: 0; }
.teams span { min-width: 0; overflow-wrap: break-word; }
.teams strong { font-variant-numeric: tabular-nums; }
.code { font-family: var(--font-body); font-weight: 800; font-variant-numeric: tabular-nums; padding: var(--space-3xs) var(--space-sm); border-radius: var(--radius-inner); background: var(--color-paper-2); box-shadow: var(--shadow-well); }

/* A track pressed into the clay, filled from both ends: students from the left, professors from the right. */
.tug, .meter, .bar {
  display: flex; overflow: hidden; border-radius: var(--radius-pill);
  background: var(--color-paper-2); box-shadow: var(--shadow-well);
}
.tug div, .meter div, .bar div { min-width: 0; }
.tug .s, #tug-students, .meter .s, .cheer-row .s { background: var(--color-students); color: var(--color-students-ink); }
.tug .p, #tug-profs, .meter .p, .cheer-row .p { background: var(--color-profs); color: var(--color-profs-ink); }
.meter .n { background: var(--color-idle); }
.bar div { height: 100%; width: 0; background: var(--color-turn); }

/* ---------- Home ---------- */

.home-main { width: 100%; max-width: 60rem; min-height: 100dvh; margin-inline: auto; padding: var(--space-2xl) var(--gutter); display: grid; align-content: center; gap: var(--space-xl); }
.home-main h1 { font-size: clamp(2.6rem, 7vw, 4.8rem); line-height: 1.02; max-width: 12ch; }
.doors { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); gap: var(--space-lg); }
.door {
  --fill: var(--color-clay); --fill-ink: var(--color-ink);
  display: grid; gap: var(--space-sm); align-content: end; min-height: 15rem; padding: var(--space-xl);
  border-radius: var(--radius-card); background: var(--fill); color: var(--fill-ink); text-decoration: none;
  box-shadow:
    10px 12px 24px color-mix(in oklab, var(--color-shade) 24%, transparent),
    inset -9px -10px 18px color-mix(in oklab, var(--fill) 80%, var(--color-shade)),
    inset 9px 9px 16px color-mix(in oklab, var(--fill) 40%, var(--color-highlight));
  transition: transform var(--dur-short) var(--ease-out);
}
.door:hover { transform: translateY(-3px); }
.door:active { transform: translateY(2px); }
.door-team { --fill: var(--color-accent); --fill-ink: var(--color-accent-ink); }
.door-title { font-family: var(--font-display); font-size: var(--text-4xl); line-height: 1; }
.door span:last-child { font-size: var(--text-lg); max-width: 26ch; }

/* ---------- Player ---------- */

.player { width: 100%; max-width: 76rem; margin-inline: auto; padding: 0 var(--gutter) var(--space-2xl); }

#register { max-width: 30rem; margin: var(--space-xl) auto 0; display: grid; gap: var(--space-md); }
#register input[type="text"] { width: 100%; font-size: var(--text-lg); }
.side-pick { border: 0; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-sm); }
.side-pick legend { margin-bottom: var(--space-xs); padding: 0; }
.side-option {
  --fill: var(--color-clay); --fill-ink: var(--color-ink);
  display: grid; place-items: center; min-height: 72px; padding: var(--space-sm);
  border-radius: var(--radius-control); background: var(--fill); color: var(--fill-ink);
  font-family: var(--font-display); font-size: var(--text-xl); cursor: pointer;
  box-shadow: var(--shadow-clay-sm);
  transition: transform var(--dur-micro) var(--ease-out), background-color var(--dur-micro) var(--ease-out);
}
.side-option input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.side-option:hover { transform: translateY(-1px); }
.side-option:has(input:focus-visible) { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.side-option.student:has(input:checked) { --fill: var(--color-students); --fill-ink: var(--color-students-ink); }
.side-option.prof:has(input:checked) { --fill: var(--color-profs); --fill-ink: var(--color-profs-ink); }
.side-option:has(input:checked) {
  transform: translateY(2px);
  box-shadow:
    inset 5px 6px 10px color-mix(in oklab, var(--fill) 70%, var(--color-shade)),
    inset -3px -3px 6px color-mix(in oklab, var(--fill) 50%, var(--color-highlight));
}
#register button[type="submit"] { width: 100%; min-height: 52px; font-size: var(--text-lg); }

.play { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: var(--space-xl); align-items: start; padding-top: var(--space-xs); }
.arena { display: grid; gap: var(--space-lg); min-width: 0; }
.ledger { display: grid; gap: var(--space-lg); min-width: 0; }
.status-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); }
.team-name { font-size: var(--text-3xl); min-width: 0; }
.side-chip { padding: var(--space-3xs) var(--space-sm); border-radius: var(--radius-pill); font-weight: 800; font-size: var(--text-sm); }
.side-chip[data-side="student"] { background: var(--color-students); color: var(--color-students-ink); }
.side-chip[data-side="prof"] { background: var(--color-profs); color: var(--color-profs-ink); }
.status-row .phase { margin-left: auto; }
.question:empty { display: none; }

/* The buzzer: a big clay key. Lifted when it can be pressed, pressed in once you have buzzed. */
#buzz {
  --fill: var(--color-idle); --fill-ink: var(--color-idle-ink);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-xs);
  width: 100%; min-height: 15rem; text-align: center; padding: var(--space-lg);
  border: 0; border-radius: 40px; background: var(--fill); color: var(--fill-ink);
  font-family: var(--font-display); font-size: clamp(3rem, 6vw, 5.2rem); line-height: 1;
  cursor: pointer;
  box-shadow:
    14px 18px 34px color-mix(in oklab, var(--color-shade) 28%, transparent),
    inset -14px -16px 26px color-mix(in oklab, var(--fill) 76%, var(--color-shade)),
    inset 14px 14px 24px color-mix(in oklab, var(--fill) 38%, var(--color-highlight));
  transition: transform var(--dur-micro) var(--ease-out), box-shadow var(--dur-micro) var(--ease-out), background-color var(--dur-short) var(--ease-out);
}
#buzz small { font-family: var(--font-body); font-weight: 800; font-size: var(--text-lg); line-height: 1.3; max-width: 34ch; text-wrap: balance; }
#buzz:disabled { cursor: default; }
#buzz.ready { --fill: var(--color-accent); --fill-ink: var(--color-accent-ink); }
#buzz.ready:hover { transform: translateY(-2px); }
#buzz.ready:active, #buzz.buzzed, #buzz.tried {
  transform: translateY(4px);
  box-shadow:
    2px 3px 6px color-mix(in oklab, var(--color-shade) 18%, transparent),
    inset 12px 14px 24px color-mix(in oklab, var(--fill) 66%, var(--color-shade)),
    inset -8px -8px 16px color-mix(in oklab, var(--fill) 45%, var(--color-highlight));
}
#buzz.buzzed { --fill: var(--color-accent); --fill-ink: var(--color-accent-ink); }
#buzz.floor { --fill: var(--color-turn); --fill-ink: var(--color-turn-ink); }
#buzz.over { --fill: var(--color-success); --fill-ink: var(--color-success-ink); }
.hint { margin-top: calc(var(--space-sm) * -1); color: var(--color-muted); font-size: var(--text-sm); text-align: center; }

/* Lock-in: a pressed-in well, because it is a secret you drop something into. */
.lockin { display: grid; gap: var(--space-sm); padding: var(--space-lg); border-radius: var(--radius-card); background: var(--color-paper-2); box-shadow: var(--shadow-well); }
.lockin p { color: var(--color-ink-2); }
#lockin-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); gap: var(--space-sm); }
#lockin-options button { justify-content: flex-start; white-space: normal; text-align: left; }
#lockin-free { display: flex; gap: var(--space-sm); }
#lockin-free input { flex: 1; min-width: 0; }
#lockin-free button { min-height: 48px; }
#lockin-result { font-weight: 800; color: var(--color-ink); }
#lockin-result:empty, #lockin-error:empty { display: none; }

.scores { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.scores div { display: grid; gap: var(--space-3xs); padding: 0 var(--space-md); border-left: var(--rule-hair) solid var(--color-rule); }
.scores div:first-child { padding-left: 0; border-left: 0; }
.scores div:last-child { padding-right: 0; }
.scores strong { font-family: var(--font-display); font-size: var(--text-3xl); line-height: 1; font-variant-numeric: tabular-nums; }
.scores span { color: var(--color-muted); font-size: var(--text-sm); }
.player .tug { height: 36px; font-size: var(--text-sm); font-weight: 800; }
.player .tug div { display: flex; align-items: center; padding: 0 var(--space-sm); white-space: nowrap; overflow: hidden; }
#tug-profs { justify-content: flex-end; }

.stats-block { display: grid; gap: var(--space-sm); }
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-md) var(--space-sm); }
.stats div { display: grid; gap: var(--space-3xs); }
.stats strong { font-size: var(--text-xl); font-variant-numeric: tabular-nums; line-height: 1.1; }
.stats span { color: var(--color-muted); font-size: var(--text-xs); }
.history-block { display: grid; gap: var(--space-xs); }
.history { list-style: none; margin: 0; padding: 0; }
.history li { display: flex; justify-content: space-between; gap: var(--space-md); padding: var(--space-xs) 0; border-bottom: var(--rule-hair) solid var(--color-rule); }
.history li:last-child { border-bottom: 0; }
.history .q { font-weight: 800; margin-right: var(--space-xs); }
.r-Correct, .r-Steal, .r-Lock-in { color: var(--color-success-text); font-weight: 800; }
.r-Wrong { color: var(--color-error); font-weight: 800; }
.rejoin { display: grid; gap: var(--space-xs); justify-items: start; color: var(--color-ink-2); font-size: var(--text-sm); }
.rejoin .code { font-size: var(--text-lg); }

/* ---------- Display: the phone layout ---------- */

body.display { display: grid; grid-template-rows: auto auto 1fr; }
.topbar .phase-group { display: inline-flex; align-items: center; gap: var(--space-sm); }
.progress { font-weight: 800; color: var(--color-ink-2); }
.join { color: var(--color-ink-2); }
.join strong { font-weight: 800; color: var(--color-ink); }
body.display:not(.projector) .connection { margin: 0; padding: 0 var(--gutter); }
.display-main { width: 100%; max-width: 46rem; margin-inline: auto; padding: var(--space-md) var(--gutter) var(--space-2xl); display: grid; gap: var(--space-xl); }
.stage { display: grid; gap: var(--space-md); min-width: 0; }
.waiting { font-family: var(--font-display); font-size: var(--text-2xl); color: var(--color-muted); }
.result-banner { font-family: var(--font-display); font-size: var(--text-2xl); color: var(--color-ink); }
.result-banner.win { color: var(--color-success-text); }
.result-banner .answer { display: block; margin-top: var(--space-xs); font-family: var(--font-body); font-weight: 800; font-size: var(--text-lg); color: var(--color-ink); }
.floor { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: var(--space-xs) var(--space-md); }
.floor-name { font-family: var(--font-display); font-size: var(--text-2xl); min-width: 0; overflow-wrap: break-word; }
.floor .bar { grid-column: 1 / -1; height: 14px; }
#up-next, #lockin-line { color: var(--color-ink-2); }
#up-next:empty, #lockin-line:empty { display: none; }
.buzzes { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.buzzes li { display: inline-flex; gap: var(--space-xs); align-items: baseline; padding: var(--space-2xs) var(--space-md); border-radius: var(--radius-pill); background: var(--color-clay); box-shadow: var(--shadow-clay-sm); font-weight: 800; }
.buzzes li:first-child { background: var(--color-turn); color: var(--color-turn-ink); }
.buzzes .gap { font-weight: 500; font-variant-numeric: tabular-nums; }

/* Play along: the phone's clay controls. */
.crowd-panel { display: grid; gap: var(--space-md); }
.crowd-panel h2 { font-size: var(--text-xl); }
.crowd-panel form { display: flex; gap: var(--space-sm); }
.crowd-panel input { flex: 1; min-width: 0; }
#crowd-controls { display: grid; gap: var(--space-sm); }
.crowd-panel .me { font-weight: 800; }
.crowd-panel .row { display: grid; grid-template-columns: repeat(auto-fit, minmax(6.5rem, 1fr)); gap: var(--space-sm); margin-top: var(--space-xs); }
.row button { min-height: 52px; }
.row button.chosen { --fill: var(--color-ink); --fill-ink: var(--color-paper); }
.row button.chosen:disabled { opacity: 1; cursor: not-allowed; }
.crowd-panel .feedback { color: var(--color-success-text); font-weight: 800; min-height: 1lh; }
.cheer-row button { font-family: var(--font-display); font-size: var(--text-lg); }
.cheer-row .s { --fill: var(--color-students); --fill-ink: var(--color-students-ink); }
.cheer-row .p { --fill: var(--color-profs); --fill-ink: var(--color-profs-ink); }

/* The board: side totals, the tug, both team lists, the crowd. */
.board { display: grid; gap: var(--space-md); min-width: 0; }
.totals { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); }
.totals > div { display: grid; gap: var(--space-3xs); font-weight: 800; }
.totals .p { text-align: right; }
.totals .s { color: var(--color-students-text); }
.totals .p { color: var(--color-profs-text); }
.totals .num { font-family: var(--font-display); font-size: var(--text-4xl); line-height: 1; font-variant-numeric: tabular-nums; }
.board .tug { height: 20px; }
.sides { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-lg); }
.crowd-board { display: grid; gap: var(--space-xs); padding-top: var(--space-md); border-top: var(--rule-hair) solid var(--color-rule); }
.crowd-board h3 { font-size: var(--text-md); font-family: var(--font-body); font-weight: 800; color: var(--color-ink-2); }
.crowd-board .meter { height: 16px; margin-bottom: var(--space-xs); }
.crowd-board .label { display: flex; justify-content: space-between; gap: var(--space-sm); font-size: var(--text-sm); color: var(--color-muted); }
#crowd-top { margin: 0; padding-left: var(--space-lg); }
#crowd-top li { padding: var(--space-3xs) 0; }
#crowd-top li span { margin-right: var(--space-sm); }
#crowd-top li strong { font-variant-numeric: tabular-nums; }
#fullscreen-hint { display: none; }

@media (max-width: 40rem) {
  .sides { grid-template-columns: 1fr; }
  .play .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Display: the projector, 1920 x 1080 in a dark room ---------- */

/* Everything sized in rem grows with the screen. */
html:has(body.projector) { font-size: clamp(16px, 1.25vw, 30px); }
body.projector {
  --space-xs: 0.5rem; --space-sm: 0.75rem; --space-md: 1rem; --space-lg: 1.5rem; --space-xl: 2.5rem; --space-2xl: 4rem; --gutter: 2.5rem;
  height: 100dvh; overflow: hidden; grid-template-rows: auto 1fr;
}
.projector .topbar { padding-block: var(--space-md); }
.projector .wordmark { font-size: var(--text-2xl); }
.projector .join { margin-left: auto; font-size: var(--text-xl); }
.projector .join strong { font-family: var(--font-display); font-weight: 600; }
.projector .connection { display: none; }
.projector .display-main {
  max-width: none; height: 100%; min-height: 0; padding: 0 var(--gutter) var(--space-lg);
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: var(--space-xl);
}
.projector .stage { align-content: start; gap: var(--space-md); min-height: 0; }
.projector .waiting { font-size: var(--text-4xl); padding-top: var(--space-2xl); }
.projector .question { padding: var(--space-xl); }
.projector .prompt { font-size: 2.6rem; line-height: 1.12; }
.projector .meta span { font-size: var(--text-md); }
.projector .choices { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md); }
.projector .choices li { font-size: var(--text-xl); padding: var(--space-md) var(--space-lg); background: var(--color-paper-3); }
.projector .prompt { max-width: none; }
.projector .choices li.correct { background: var(--color-success); color: var(--color-success-ink); box-shadow: var(--shadow-clay-sm); }
.projector .result-banner { font-size: var(--text-4xl); }
.projector .result-banner .answer { font-size: var(--text-2xl); }
.projector .floor-name { font-size: var(--text-4xl); color: var(--color-turn); }
.projector #countdown { font-size: var(--text-4xl); font-variant-numeric: tabular-nums; }
.projector .floor .bar { height: 1.1rem; }
.projector #up-next, .projector #lockin-line { font-size: var(--text-lg); }
.projector .buzzes li { font-size: var(--text-lg); }
.projector .crowd-panel { display: none; }
.projector .board { align-content: start; gap: var(--space-md); min-height: 0; overflow: hidden; padding: var(--space-lg) var(--space-xl); }
.projector .totals .num { font-size: 3.6rem; font-variant-numeric: tabular-nums; }
.projector .board .tug { height: 1.4rem; }
.projector .teams li { font-size: var(--text-lg); padding-block: var(--space-xs); }
.projector .crowd-board .meter { height: 1rem; }
.projector #fullscreen-hint { display: block; position: fixed; bottom: var(--space-xs); right: var(--space-md); font-size: var(--text-xs); color: var(--color-muted); }

/* ---------- Admin ---------- */

.admin-main { width: 100%; max-width: 80rem; margin-inline: auto; padding: 0 var(--gutter) var(--space-2xl); }
#login { max-width: 26rem; margin: var(--space-2xl) auto 0; display: grid; gap: var(--space-md); }
#login h2 { font-size: var(--text-2xl); }
#login input { width: 100%; }
#login button { width: 100%; }
#login-error:empty { display: none; }

.layout { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); gap: var(--space-xl); align-items: start; }
.layout main { display: grid; gap: var(--space-lg); min-width: 0; }
.layout aside { display: grid; gap: var(--space-lg); min-width: 0; }
.host-status { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); }
#progress { font-weight: 800; color: var(--color-ink-2); }
.answer-box { display: flex; flex-wrap: wrap; gap: var(--space-xs); align-items: baseline; padding: var(--space-md) var(--space-lg); border-radius: var(--radius-control); background: var(--color-turn); color: var(--color-turn-ink); box-shadow: var(--shadow-clay-sm); }
.answer-box strong { font-size: var(--text-lg); }
.host-notes { display: grid; gap: var(--space-xs); }
.host-notes p:empty { display: none; }
.host-notes #floor { font-family: var(--font-display); font-size: var(--text-xl); }
.result { font-weight: 800; font-size: var(--text-lg); }

.controls { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-sm); }
.controls button { flex-direction: column; min-height: 88px; padding: var(--space-sm); white-space: normal; text-align: center; line-height: 1.2; }
#show:not(:disabled), #open:not(:disabled) { --fill: var(--color-accent); --fill-ink: var(--color-accent-ink); }
#correct:not(:disabled) { --fill: var(--color-success); --fill-ink: var(--color-success-ink); }
#wrong:not(:disabled) { --fill: var(--color-error); --fill-ink: var(--color-accent-ink); }
#reveal:not(:disabled) { --fill: var(--color-turn); --fill-ink: var(--color-turn-ink); }
.controls kbd { background: color-mix(in oklab, var(--fill) 70%, var(--color-highlight)); color: var(--fill-ink); }
#message { color: var(--color-error); font-weight: 800; min-height: 1lh; }

.panel { display: grid; gap: var(--space-sm); }
.panel h2 { font-size: var(--text-xl); }
.panel h2 small { font-family: var(--font-body); font-size: var(--text-sm); font-weight: 800; color: var(--color-muted); }
#lockins li { flex-wrap: wrap; align-items: center; }
#lockins button { min-height: 36px; padding: 0 var(--space-md); margin-left: var(--space-xs); }
.mark-right { color: var(--color-success-text); font-weight: 800; }
.mark-wrong { color: var(--color-error); font-weight: 800; }
.mark-pending { color: var(--color-profs-text); font-weight: 800; }
.panel #buzzes { margin: 0; padding-left: var(--space-lg); }
.panel #buzzes li { padding: var(--space-3xs) 0; font-variant-numeric: tabular-nums; }

.tools { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.tools button, .upload { min-height: 40px; padding: 0 var(--space-md); font-size: var(--text-sm); }
#reset { color: var(--color-error); }
#tool-message { min-height: 1lh; font-weight: 800; }
#tool-message.ok { color: var(--color-success-text); }
#tool-message.bad { color: var(--color-error); }

.team-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-xs) var(--space-sm); padding: var(--space-sm) 0; border-bottom: var(--rule-hair) solid var(--color-rule); }
.team-row:last-child { border-bottom: 0; }
.team-row > span { min-width: 0; overflow-wrap: break-word; font-weight: 800; }
.team-row .side { font-weight: 500; color: var(--color-muted); margin-inline: var(--space-xs); }
.team-row > strong { font-family: var(--font-display); font-size: var(--text-xl); font-variant-numeric: tabular-nums; }
.team-row .actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.team-row input { width: 7rem; min-height: 40px; }
.team-row button { min-height: 40px; padding: 0 var(--space-md); font-size: var(--text-sm); }
.team-row .kick { margin-left: auto; color: var(--color-error); }
#question-list { margin: 0; padding-left: var(--space-lg); display: grid; gap: var(--space-2xs); font-size: var(--text-sm); }
#question-list li.played { color: var(--color-muted); }
#question-list li.current { font-weight: 800; color: var(--color-ink); }

@media (max-width: 60rem) {
  .play, .layout { grid-template-columns: minmax(0, 1fr); }
  .controls { grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); }
}