/* The quiz board (play.zaiphr.ai/quiz and /quiz-stage), after shell.css and
   play.css, in the same layers. Direction A, "Tile wall" (Matt, 2026-10-17):
   the board is an object, like the wheel. Raised tiles lit from above; a played
   tile sinks and keeps the team that took it; the open tile lifts under a flame
   outline; the clue fades in on a paper panel over the dimmed board and never
   zooms out of its tile (P6 §7). Everything in .qstage is in STAGE px on the
   fixed 1920x1080 stage that quiz.js zooms to fit (P6 §4). Host UI is CSS px.

   Designer's licence (P7), named: the tiles' material (a top-lit gradient, a lit
   top edge, a raised shadow), the shadows under the team cards and the paper
   panels, and flame as a rail beside the answer. Hard rules hold: contrast (the
   panels are paper, the cards are neutral), tokens only, transform and opacity
   motion, no flashing (the timer settles at zero). */

[data-cat='1'] { --team: var(--z-play-cat-1); } [data-cat='2'] { --team: var(--z-play-cat-2); }
[data-cat='3'] { --team: var(--z-play-cat-3); } [data-cat='4'] { --team: var(--z-play-cat-4); }
[data-cat='5'] { --team: var(--z-play-cat-5); } [data-cat='6'] { --team: var(--z-play-cat-6); }
[data-cat='7'] { --team: var(--z-play-cat-7); } [data-cat='8'] { --team: var(--z-play-cat-8); }

@layer layout {
  .quiz-area { position: relative; min-width: 0; min-height: 0; display: grid; grid-template-rows: minmax(200px, 1fr) minmax(0, auto); gap: 12px; }
  @media (max-width: 899px) {
    .quiz-area { display: block; }
    .desk { margin-top: 12px; }
  }
  /* the stage window: the stage alone, letterboxed on its own ground */
  .stage-body { min-height: 0; }
  .stage-window { position: fixed; inset: 0; }
}

@layer components {
  @media (max-width: 1000px) {
    #open-stage > span:not(.live-dot) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    #open-stage { width: 38px; padding: 0; }
  }
  #open-stage { position: relative; }
  .live-dot { display: none; width: 8px; height: 8px; border-radius: 50%; background: var(--z-success); flex: none; }
  #open-stage.is-live .live-dot { display: inline-block; }
  @media (max-width: 1000px) { #open-stage.is-live .live-dot { position: absolute; top: 5px; right: 5px; } }

  .chip { flex: none; width: 12px; height: 12px; border-radius: 50%; background: var(--team, var(--z-fg-subtle)); box-shadow: 0 0 0 1.5px var(--z-night); }

  /* the desk: the host's controls under the preview, one layout per moment */
  .desk { display: grid; gap: 12px; align-content: start; min-width: 0; min-height: 0; overflow-y: auto; padding: 14px 16px 16px; border-radius: 20px; background: var(--z-ground); border: 1px solid var(--z-border); box-shadow: var(--play-edge-top); }
  @media (min-width: 900px) and (min-height: 700px) { .desk { min-height: 296px; } }
  .desk > * { animation: pane-in var(--z-dur-std) var(--z-ease); }
  .desk-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; }
  .desk-kicker { font-family: var(--z-font-display); font-size: 12px; font-weight: 600; letter-spacing: var(--z-track-label); text-transform: uppercase; color: var(--z-fg-muted); }
  .desk-kicker.is-signal { color: var(--z-accent-text); }
  .desk-sub { color: var(--z-fg-muted); font-size: 13.5px; }
  .desk-main { display: grid; gap: 10px; min-width: 0; }
  .desk-clue { font-family: var(--z-font-display); font-size: 17px; font-weight: 500; line-height: 1.35; max-width: 70ch; }
  .desk-answer { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; padding: 10px 14px; border-radius: 12px; background: var(--z-surface-1); border: 1px solid var(--z-border-strong); box-shadow: inset 3px 0 0 var(--z-accent); }
  .desk-answer-label { font-size: 12px; color: var(--z-fg-muted); }
  .desk-answer-text { font-family: var(--z-font-display); font-size: 18px; font-weight: 600; overflow-wrap: anywhere; }
  .desk-answer.is-masked { box-shadow: none; justify-content: space-between; }
  .desk-result { display: flex; align-items: center; gap: 10px; font-family: var(--z-font-display); font-size: 20px; font-weight: 600; }
  .desk-result .chip { width: 14px; height: 14px; }
  .desk-field { display: grid; max-width: 280px; }
  .desk-field .field-label { margin-top: 2px; }
  .desk-stake { width: 140px; font-size: 18px; }
  .desk-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
  .desk-space { flex: 1; }
  .desk-undo { max-width: 260px; overflow: hidden; text-overflow: ellipsis; justify-content: flex-start; }

  .desk-teams { display: flex; flex-wrap: wrap; gap: 8px; }
  .team-btn {
    display: inline-flex; align-items: center; gap: 9px; height: 40px; padding: 0 14px 0 12px; min-width: 0;
    border-radius: 12px; border: 1px solid var(--z-border-strong); background: transparent; color: var(--z-fg);
    font-family: var(--z-font-display); font-size: 14px; font-weight: 500; cursor: pointer;
    transition: background-color var(--z-dur-micro) ease, border-color var(--z-dur-micro) ease, transform var(--z-dur-micro) ease;
  }
  @media (hover: hover) { .team-btn:hover { background: var(--z-surface-1); } }
  .team-btn:active { transform: scale(0.97); }
  /* flame: the team that's up (P6 §2) */
  .team-btn[aria-pressed='true'] { background: var(--z-surface-1); border-color: var(--z-accent); box-shadow: inset 0 0 0 1px var(--z-accent); }
  .team-btn-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 16ch; }
  .team-btn-score { color: var(--z-fg-muted); font-variant-numeric: tabular-nums; }

  .judge-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: 8px; }
  .judge { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; padding: 6px 6px 6px 12px; border-radius: 12px; background: var(--z-surface-1); border: 1px solid var(--z-border); }
  .judge.is-up { border-color: var(--z-accent); }
  .judge-who { display: flex; align-items: center; gap: 8px; flex: 1 1 120px; min-width: 0; }
  .judge-name { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .judge-score { color: var(--z-fg-muted); font-size: 13px; font-variant-numeric: tabular-nums; }
  .judge-out { color: var(--z-fg-muted); font-size: 13px; padding: 0 10px; height: 32px; display: inline-flex; align-items: center; }
  .judge-right .icon { color: var(--z-success-text); }
  .judge-wrong .icon { color: var(--z-danger-text); }
  .judge-right[aria-pressed='true'] { background: var(--z-success-soft); border-color: var(--z-success-text); }
  .judge-wrong[aria-pressed='true'] { background: var(--z-danger-soft); border-color: var(--z-danger-text); }
  .judge-stake { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .judge .input-num { width: 84px; height: 32px; padding: 4px 8px; }
  .judge .input-num::placeholder { color: var(--z-fg-muted); }

  /* phones: the board as buttons (the preview's tiles are too small to tap) */
  .pick { display: grid; grid-template-columns: repeat(var(--cols, 6), minmax(0, 1fr)); gap: 6px; }
  .pick-col { display: grid; gap: 6px; align-content: start; min-width: 0; }
  .pick-cat { min-height: 2.5em; font-size: 11px; line-height: 1.2; color: var(--z-fg-muted); text-align: center; overflow-wrap: anywhere; }
  .pick-btn { width: 100%; padding: 0 2px; font-variant-numeric: tabular-nums; }

  /* the Board tab */
  .sample-note { padding: 10px 12px; margin-bottom: 4px; border-radius: 12px; background: var(--z-surface-1); border: 1px solid var(--z-border-strong); font-size: 12.5px; color: var(--z-fg-muted); }
  .sample-note strong { color: var(--z-fg); font-weight: 500; }
  .cats-label { margin-bottom: 8px; }
  .cats { display: grid; gap: 6px; }
  .cat-edit { border-radius: 12px; background: var(--z-night); border: 1px solid var(--z-border); transition: border-color var(--z-dur-micro) ease; }
  .cat-edit[open] { border-color: var(--z-border-strong); }
  .cat-sum { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 12px; list-style: none; cursor: pointer; font-family: var(--z-font-display); font-weight: 500; }
  .cat-sum::-webkit-details-marker { display: none; }
  @media (hover: hover) { .cat-sum:hover { background: var(--z-surface-1); } }
  .cat-n { flex: none; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 6px; background: var(--z-surface-2); color: var(--z-fg-muted); font-size: 12px; }
  .cat-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .cat-count { font-size: 12px; color: var(--z-fg-muted); font-variant-numeric: tabular-nums; }
  .cat-sum::after { content: ''; width: 7px; height: 7px; border-right: 1.5px solid var(--z-fg-muted); border-bottom: 1.5px solid var(--z-fg-muted); transform: rotate(45deg) translateY(-2px); transition: transform var(--z-dur-std) var(--z-spring); }
  .cat-edit[open] .cat-sum::after { transform: rotate(225deg) translate(-2px, -1px); }
  .cat-body { display: grid; padding: 0 12px 12px; }
  .cat-body > .btn { justify-self: start; margin-top: 12px; }
  .q-field .field-label { margin: 8px 0 4px; }
  .q-edit { margin: 12px 0 0; padding: 10px 0 0; border: 0; box-shadow: inset 0 1px 0 var(--z-border); display: grid; }
  .q-edit-legend { padding: 0; float: left; width: 100%; font-size: 12px; font-weight: 600; letter-spacing: 0.04em; color: var(--z-fg-muted); }
  .q-edit-top { display: flex; align-items: flex-end; gap: 14px; clear: both; }
  .q-edit-top .input-num { width: 96px; }
  .check { display: inline-flex; align-items: center; gap: 8px; height: 38px; font-size: 13px; cursor: pointer; }
  .check input { width: 16px; height: 16px; margin: 0; accent-color: var(--z-accent); }
  .q-clue-input { resize: vertical; min-height: 58px; line-height: 1.45; }
  .toolrow-3 { grid-template-columns: repeat(3, 1fr); }
  .final-edit { margin-top: 14px; padding-top: 2px; border-top: 1px solid var(--z-border); }
  .final-fields { display: grid; padding-bottom: 4px; }
  .file-row { margin-top: 16px; }
  .file-row + .hint { margin-top: 10px; }

  /* the Teams tab */
  .team-head, .team-edit { display: grid; grid-template-columns: 16px minmax(0, 1fr) 58px 84px 32px; gap: 8px; align-items: center; }
  .team-head { margin: 10px 0 2px; padding: 0 2px; font-size: 12px; color: var(--z-fg-subtle); }
  .team-head span:first-child { grid-column: 2; }
  .team-list { display: grid; gap: 8px; margin-top: 6px; }
  .team-edit .chip { width: 14px; height: 14px; }
  .input-tag { text-transform: uppercase; text-align: center; padding-inline: 4px; }
  .team-edit .input-num { width: 100%; }
  .icon-btn-sm { width: 32px; height: 32px; }
  .tool-row { flex-direction: row; gap: 8px; margin-top: 10px; padding: 10px; }

  /* the Settings tab */
  .field-set { margin-bottom: 10px; }
  .field-set legend { padding: 0; }
  .segmented-4 { grid-template-columns: repeat(4, 1fr); }
  .segmented-4 label { padding-inline: 6px; }
  .segmented-4 .segmented-thumb { width: calc((100% - 6px) / 4); transform: translateX(calc(var(--seg-i, 0) * 100%)); }
  .keys { display: grid; gap: 7px; margin: 14px 0 16px; padding-top: 14px; border-top: 1px solid var(--z-border); font-size: 13px; }
  .keys div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
  .keys dt { white-space: nowrap; color: var(--z-fg-muted); }
  .keys dd { margin: 0; text-align: right; }
  kbd { font-family: var(--z-font-mono); font-size: 11.5px; padding: 2px 6px; border-radius: 6px; border: 1px solid var(--z-border-strong); background: var(--z-surface-1); color: var(--z-fg); }
}

@layer stage {
  /* the host's preview frame: the stage zoomed into the space above the desk */
  .quiz-area .stage-frame { position: relative; inset: auto; min-height: 0; }
  @media (max-width: 899px) { .quiz-area .stage-frame { aspect-ratio: 16 / 9; } }
  .is-projector .quiz-area .stage-frame { position: fixed; inset: 0; aspect-ratio: auto; }
  .is-projector .desk { visibility: hidden; }
  .js .stage-frame:not(.is-ready) .qstage { visibility: hidden; }
  .quiz-area .stage-hint { position: absolute; left: 50%; bottom: 18px; z-index: 6; translate: -50% 0; max-width: calc(100% - 32px); padding: 8px 14px; border-radius: var(--z-radius-pill); background: var(--z-surface-1); border: 1px solid var(--z-border-strong); color: var(--z-fg-muted); font-family: var(--z-font-display); font-size: 13px; line-height: 1.3; text-align: center; }

  /* the stage window */
  .stage-frame.is-window { position: fixed; inset: 0; border: 0; border-radius: 0; box-shadow: none; }
  .stage-full {
    position: absolute; top: 16px; right: 16px; z-index: 7; display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px 0 12px;
    border-radius: var(--z-radius-pill); background: var(--z-surface-1); color: var(--z-fg); border: 1px solid var(--z-border-strong);
    font-family: var(--z-font-display); font-size: 14px; font-weight: 500; cursor: pointer;
    transition: opacity var(--z-dur-std) ease, transform var(--z-dur-micro) ease;
  }
  .stage-full:active { transform: scale(0.97); }
  .stage-frame.is-idle .stage-full { opacity: 0; pointer-events: none; }
  .stage-frame.is-window.is-idle { cursor: none; }

  .qstage {
    position: relative; zoom: var(--stage-zoom, 0.4);
    width: 1920px; height: 1080px; padding: 72px;
    display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: 56px minmax(0, 1fr) auto; row-gap: 28px;
    color: var(--z-fg); font-family: var(--z-font-display);
  }
  .q-head { grid-row: 1; grid-column: 1; display: flex; align-items: center; gap: 32px; min-width: 0; }
  .q-title { min-width: 0; font-size: var(--z-play-fs-meta); font-weight: 500; line-height: 56px; color: var(--z-fg-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .q-credit { margin-left: auto; display: flex; align-items: center; gap: 12px; font-size: var(--z-play-fs-credit); line-height: 1; color: var(--z-fg-muted); white-space: nowrap; }
  .q-credit img { width: 28px; height: auto; }

  /* the board: ink category plates over raised tiles */
  .q-board {
    grid-row: 2; grid-column: 1; min-height: 0;
    display: grid; grid-template-columns: repeat(var(--cols, 6), minmax(0, 1fr)); grid-template-rows: minmax(120px, auto) repeat(var(--rows, 5), minmax(0, 1fr)); gap: 12px;
    transition: opacity var(--z-dur-enter) ease;
  }
  .is-panel .q-board { opacity: 0.12; }
  .is-results .q-board, .is-results .q-teams { opacity: 0; }
  .q-cat {
    display: grid; place-items: center; min-width: 0; padding: 10px 16px; border-radius: 14px; text-align: center;
    background: var(--z-ink); color: var(--z-paper);
    font-size: var(--z-play-fs-meta); font-weight: 600; line-height: 1.05; letter-spacing: -0.01em; overflow-wrap: anywhere;
  }
  .q-cat span { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
  .stage-frame[data-theme='dark'] .q-cat { background: none; color: var(--z-fg); border-radius: 0; box-shadow: inset 0 -2px 0 var(--z-border-strong); }

  .q-tile {
    position: relative; min-width: 0; min-height: 0; margin: 0; padding: 0 18px;
    display: flex; align-items: center; justify-content: center; gap: 12px;
    border-radius: 14px; border: 2px solid color-mix(in oklab, var(--z-ink) 12%, transparent);
    background: linear-gradient(180deg, var(--z-surface-1) 0%, var(--z-surface-1) 55%, color-mix(in oklab, var(--z-surface-1) 93%, var(--z-ink)) 100%);
    box-shadow: inset 0 2px 0 color-mix(in oklab, var(--z-surface-1) 80%, transparent), var(--z-play-shadow-raised);
    color: var(--z-fg); font: inherit; text-align: center; container-type: size;
    transition: transform var(--z-dur-std) var(--z-spring);
  }
  .stage-frame[data-theme='dark'] .q-tile { border-color: var(--z-border-strong); box-shadow: inset 0 2px 0 var(--z-border-strong), 0 2px 0 var(--z-void), 0 14px 28px -10px color-mix(in oklab, var(--z-void) 80%, transparent); }
  button.q-tile { cursor: pointer; }
  button.q-tile[aria-disabled='true'] { cursor: default; }
  @media (hover: hover) { button.q-tile.is-free:hover { transform: translateY(-5px); } }
  button.q-tile.is-free:active { transform: translateY(-1px) scale(0.98); }
  .q-tile:focus-visible { outline: 6px solid var(--z-fg); outline-offset: 4px; z-index: 1; }
  .q-pts { font-size: var(--z-play-fs-figure); font-weight: 700; line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
  /* points step down only when six rows or tall team cards leave the tiles short */
  @container (max-height: 90px) { .q-pts { font-size: var(--z-play-fs-board); } }
  @container (max-height: 62px) { .q-pts { font-size: var(--z-play-fs-meta); } }
  /* the open tile lifts under the flame (P6 §2: the open quiz cell); on Light, signal graphics are deep */
  .q-tile.is-open { transform: translateY(-6px); outline: 6px solid var(--z-accent-deep); outline-offset: 4px; z-index: 1; }
  .stage-frame[data-theme='dark'] .q-tile.is-open { outline-color: var(--z-accent); }
  /* played: the tile sinks and keeps who took it, the name at the 48 floor or the tag */
  .q-tile.is-used, .q-tile.is-gap { background: color-mix(in oklab, var(--stage-ground) 92%, var(--z-ink)); border-color: transparent; box-shadow: inset 0 4px 10px color-mix(in oklab, var(--z-ink) 16%, transparent); }
  .stage-frame[data-theme='dark'] .q-tile.is-used, .stage-frame[data-theme='dark'] .q-tile.is-gap { background: color-mix(in oklab, var(--z-night) 70%, var(--z-void)); border-color: transparent; box-shadow: inset 0 4px 12px var(--z-void); }
  .q-tile.is-gap { opacity: 0.5; }
  .q-who { min-width: 0; font-size: var(--z-play-fs-meta); font-weight: 500; line-height: 1; white-space: nowrap; overflow: hidden; }
  .q-who.is-none { color: var(--z-fg-muted); }
  .q-chip { flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--team, var(--z-fg-muted)); box-shadow: 0 0 0 3px var(--z-ink); }
  .stage-frame[data-theme='dark'] .q-board .q-chip { box-shadow: none; } /* on the paper panels the ink ring stays */
  .is-landing { animation: tile-sink calc(var(--z-dur-enter) * 1.2) var(--z-spring); }
  @keyframes tile-sink { from { transform: translateY(-6px) scale(1.02); } }

  /* the teams: neutral cards with their colour on top; the one that's up wears the flame */
  .q-teams { grid-row: 3; grid-column: 1; display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 24px; align-items: stretch; padding-top: 66px; transition: opacity var(--z-dur-std) ease; }
  .q-team {
    position: relative; min-width: 0; padding: 32px 28px 22px; border-radius: 16px; display: flex; flex-direction: column;
    background: var(--z-surface-1); border: 2px solid color-mix(in oklab, var(--z-ink) 10%, transparent); box-shadow: var(--z-play-shadow-raised);
  }
  .stage-frame[data-theme='dark'] .q-team { border-color: var(--z-border-strong); box-shadow: inset 0 2px 0 var(--z-border-strong); }
  .q-team::before { content: ''; position: absolute; left: -2px; right: -2px; top: -2px; height: 14px; border-radius: 16px 16px 0 0; background: var(--team); }
  .q-team.is-up { outline: 6px solid var(--z-accent-deep); outline-offset: 4px; }
  .stage-frame[data-theme='dark'] .q-team.is-up { outline-color: var(--z-accent); }
  .q-up { position: absolute; left: -2px; bottom: calc(100% + 18px); font-size: var(--z-play-fs-meta); font-weight: 600; line-height: 1; color: var(--z-accent-text); white-space: nowrap; opacity: 0; transform: translateY(10px); transition: opacity var(--z-dur-std) ease, transform var(--z-dur-std) var(--z-spring); }
  .q-team.is-up .q-up { opacity: 1; transform: none; }
  .q-name { font-size: var(--z-play-fs-meta); font-weight: 500; line-height: 1.1; overflow-wrap: break-word; hyphens: auto; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
  .q-teams.is-many .q-team { padding-inline: 20px; }
  .q-score { margin-top: auto; padding-top: 8px; font-size: var(--z-play-fs-figure); font-weight: 700; line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
  .q-teams.is-step .q-score { font-size: var(--z-play-fs-board); }

  /* the clue: a paper panel that fades in over the dimmed board (P6 §5, §7) */
  .q-panel {
    grid-row: 2; grid-column: 1; z-index: 2; position: relative; min-height: 0; margin: 0;
    display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 24px; padding: 52px 72px 56px;
    border-radius: 24px; background: var(--z-paper); color: var(--z-fg);
    box-shadow: 0 0 0 2px color-mix(in oklab, var(--z-ink) 12%, transparent), 0 30px 80px -20px color-mix(in oklab, var(--z-ink) 45%, transparent);
  }
  /* when even the 48 floor can't hold a long clue and answer, the panel grows instead of cutting */
  .q-panel.is-tall { grid-row: 1 / 3; }
  .q-panel.is-full { grid-row: 1 / 4; }
  .stage-frame[data-theme='dark'] .q-panel { box-shadow: 0 0 0 2px var(--z-border-strong), 0 30px 80px -20px var(--z-void); }
  .q-panel.has-timer .q-kicker { min-height: 104px; } /* the ring sits beside it, never over the clue */
  .q-kicker { padding-right: 168px; font-size: var(--z-play-fs-meta); font-weight: 600; line-height: 1.1; color: var(--z-fg-muted); }
  .q-kicker.is-signal { color: var(--z-accent-text); }
  .q-clue, .q-big { min-height: 0; overflow: hidden; display: grid; align-content: safe center; }
  .q-clue { font-size: var(--z-play-fs-board); font-weight: 500; line-height: 1.2; letter-spacing: -0.01em; overflow-wrap: break-word; }
  .q-big { gap: 28px; }
  .q-big-main { font-size: var(--z-play-fs-display); font-weight: 700; line-height: 1.02; letter-spacing: -0.02em; overflow-wrap: anywhere; }
  .q-big-main.is-step { font-size: var(--z-play-fs-figure); }
  .q-big-sub { font-size: var(--z-play-fs-meta); font-weight: 500; line-height: 1.2; color: var(--z-fg-muted); }
  .q-foot { display: grid; gap: 18px; }
  .q-foot:has(> :not([hidden])) { margin-top: 4px; }
  /* the answer, once the host shows it: the reveal rail is flame (P6 §2) */
  .q-answer { padding-left: 32px; box-shadow: inset 8px 0 0 var(--z-accent-deep); line-height: 1.15; }
  .q-answer-label { margin-right: 26px; font-size: var(--z-play-fs-meta); font-weight: 500; color: var(--z-fg-muted); }
  .q-answer-text { font-size: var(--z-play-fs-board); font-weight: 600; line-height: 1.15; overflow-wrap: anywhere; }
  /* a judged result changes a score: outcome text, so fg (6.02:1 at A.10); the sign and the words say right or wrong */
  .q-result { font-size: var(--z-play-fs-meta); font-weight: 600; line-height: 1.1; color: var(--z-fg); }
  .q-line { display: inline-flex; align-items: center; gap: 18px; }
  .q-line .q-chip { width: 30px; height: 30px; }

  /* the timer ring drains clockwise: two half rings that rotate (transform only) */
  .q-ring { position: absolute; right: 56px; top: 40px; width: 132px; height: 132px; }
  .q-ring-track, .q-arc { position: absolute; inset: 0; border-radius: 50%; border: 12px solid color-mix(in oklab, var(--z-ink) 12%, transparent); }
  .q-arc { border-color: var(--z-ink); }
  .q-half { position: absolute; inset: 0; }
  .q-half-r { clip-path: inset(0 0 0 50%); }
  .q-half-l { clip-path: inset(0 50% 0 0); }
  .q-half-r .q-arc { clip-path: inset(0 0 0 50%); }
  .q-half-l .q-arc { clip-path: inset(0 50% 0 0); }
  .q-secs { position: absolute; inset: 0; display: grid; place-items: center; font-size: var(--z-play-fs-meta); font-weight: 700; font-variant-numeric: tabular-nums; color: var(--z-fg); }
  .q-ring.is-done .q-secs { color: var(--z-fg-muted); }

  /* the results: a ranked card; ties share their place */
  .q-results {
    grid-row: 2 / 4; grid-column: 1; z-index: 2; align-self: center; margin: 0 200px;
    display: grid; gap: 28px; padding: 52px 64px 56px; border-radius: 24px; background: var(--z-paper); color: var(--z-fg);
    box-shadow: 0 0 0 2px color-mix(in oklab, var(--z-ink) 12%, transparent), 0 30px 80px -20px color-mix(in oklab, var(--z-ink) 45%, transparent);
  }
  .stage-frame[data-theme='dark'] .q-results { box-shadow: 0 0 0 2px var(--z-border-strong), 0 30px 80px -20px var(--z-void); }
  .q-ranks { display: grid; gap: 10px; }
  .q-results.is-many { gap: 20px; padding-block: 40px 44px; }
  .q-results.is-many .q-ranks { gap: 2px; }
  .q-results.is-many .q-rank { padding-block: 6px; }
  .q-rank { display: grid; grid-template-columns: 250px 30px minmax(0, 1fr) auto; align-items: center; gap: 26px; padding: 12px 28px; border-radius: 16px; font-size: var(--z-play-fs-meta); line-height: 1.1; }
  .q-rank .q-chip { width: 30px; height: 30px; }
  .q-place { font-weight: 600; color: var(--z-fg-muted); white-space: nowrap; }
  .q-rname { font-weight: 600; overflow-wrap: break-word; hyphens: auto; }
  .q-rscore { font-size: var(--z-play-fs-board); font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
  /* the winner's moment: the name at display size beside the score, on a flame rail (P6 §2) */
  .q-winner { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; column-gap: 48px; padding: 6px 0 8px 36px; box-shadow: inset 8px 0 0 var(--z-accent-deep); }
  .q-win-kick { grid-column: 1 / -1; font-size: var(--z-play-fs-meta); font-weight: 600; line-height: 1.1; color: var(--z-accent-text); }
  .q-win-name { display: flex; align-items: center; gap: 28px; min-width: 0; margin-top: 10px; font-size: var(--z-play-fs-display); font-weight: 700; line-height: 1.02; letter-spacing: -0.02em; overflow-wrap: break-word; hyphens: auto; }
  .q-win-name .q-chip { width: 44px; height: 44px; }
  .q-win-name.is-step { font-size: var(--z-play-fs-figure); }
  .q-win-name.is-step .q-chip { width: 34px; height: 34px; }
  .q-win-score { font-size: var(--z-play-fs-figure); font-weight: 700; line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; white-space: nowrap; padding-bottom: 8px; }
  .q-ranks:empty { display: none; }

  /* the stage window before the host is open */
  .q-wait { grid-row: 2 / 4; grid-column: 1; align-self: center; justify-self: center; display: grid; gap: 28px; text-align: center; }
  .q-wait-h { font-size: var(--z-play-fs-figure); font-weight: 700; line-height: 1.05; letter-spacing: -0.02em; }
  .q-wait-t { max-width: 30ch; justify-self: center; font-size: var(--z-play-fs-meta); line-height: 1.25; color: var(--z-fg-muted); }
  .is-waiting .q-board, .is-waiting .q-teams { visibility: hidden; }
}