/* Watching: the live list as a grid of small boards, and the spectator's board with both clocks beside the moves. */
.watch-page { padding-bottom: 3rem; }
.watch-page:has(.watch-live-list h2) .watch-static, .watch-page:has(.spectator-heading) .watch-static { display: none; }
.watch-status { color: var(--ink-muted); }
.watch-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); gap: 1rem; margin: 0; padding: 0; list-style: none; }
.watch-card { height: 100%; display: grid; gap: 0.5rem; padding: 0.75rem; color: var(--ink); border-radius: var(--radius-surface); background: var(--surface); text-decoration: none; transition: translate 140ms ease; }
.watch-card-board { pointer-events: none; }
.watch-card-players { font-size: 0.85rem; }
.watch-card-meta { color: var(--ink-muted); font-size: 0.72rem; }
.spectator-heading { display: grid; gap: 0.25rem; margin-block: 0.5rem 0.75rem; }
.spectator-heading h1 { margin: 0; font-size: clamp(1.4rem, 4vw, 2rem); letter-spacing: -0.03em; }
.spectator-heading p { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; margin: 0; color: var(--ink-muted); font-size: 0.8rem; }
.watch-live { color: var(--danger); font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; }
.watch-live::before { content: "● "; }
.watch-live.ended { color: var(--ink-muted); }
.watch-live.ended::before { content: ""; }
.spectator-layout { display: grid; gap: 1.25rem; }
/* The player strips read the room's height variable; a spectator page has no room shell, so it sets its own. */
.spectator-board { --player-strip-height: 3rem; display: grid; gap: 0.5rem; width: min(100%, 36rem); }
.spectator-panel { display: grid; gap: 1rem; align-content: start; min-width: 0; }
.spectator-controls { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.spectator-result { display: grid; gap: 0.6rem; padding: 1rem; border-radius: var(--radius-surface); background: var(--surface); }
.spectator-result h2, .spectator-result p { margin: 0; }
.spectator-static-board { width: min(100%, 30rem); margin: 0; }
@media (min-width: 58rem) {
  .spectator-layout { grid-template-columns: minmax(0, min(36rem, 100vh - 14rem)) minmax(18rem, 1fr); align-items: start; }
}
@media (hover: hover) and (pointer: fine) {
  .watch-card:hover { translate: 0 -2px; }
}
@media (prefers-reduced-motion: reduce) {
  .watch-card { transition: none; }
}
/* The spectator's engine panel: a horizontal evaluation bar under an on/off switch. */
.live-engine { display: grid; gap: 0.55rem; }
.live-engine:has(.live-evaluation:empty) { gap: 0; }
.live-engine-heading { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.live-engine-heading h2 { margin: 0; font-size: 0.82rem; }
.live-engine-heading p { margin: 0.15rem 0 0; color: var(--ink-muted); font-size: 0.7rem; }
.live-evaluation { display: grid; gap: 0.35rem; }
.eval-bar.live { height: 12px; }
.eval-bar-white.horizontal { transition: width 220ms cubic-bezier(0.2, 0, 0, 1); }
.eval-bar-midline { stroke: var(--accent); stroke-width: 0.6; vector-effect: non-scaling-stroke; }
.live-evaluation-text { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; margin: 0; font-size: 0.78rem; font-variant-numeric: tabular-nums; }
.live-evaluation-text span { color: var(--ink-muted); font-size: 0.7rem; }
@media (prefers-reduced-motion: reduce) { .eval-bar-white.horizontal { transition: none; } }