/* The host page of the two-screen games (the quiz board, Crowd pick), after shell.css
   and play.css, in the same layers: the desk under the stage preview, the team
   buttons, the Teams and Settings panes, the "Open the stage" button and the stage
   window. Each game's own stylesheet follows (quiz.css, crowd.css). Taken out of
   quiz.css on 2026-10-18 without a change (a pixel comparison of the quiz's states). */

[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 {
  /* 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; }

  /* the setup panes */
  .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; }
  .toolrow-3 { grid-template-columns: repeat(3, 1fr); }
  .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 {
  .is-projector .desk { visibility: hidden; }

  /* 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; }
}