/* Display convergence: presentation only. Live state, narration, authority and
   chess board layout continue to belong to the existing display renderers. */
:root {
  --display-night: #101025;
  --display-surface: #201d3e;
  --display-line: #a99acf38;
  --display-ink: #f5f2ff;
  --display-muted: #c4bfd7;
  --display-mint: #82e3d0;
  --display-gold: #ecd396;
}
#screen { background: var(--display-night); }
#screen > .game {
  background: radial-gradient(ellipse at 15% 0, #6455a02b, transparent 65%), var(--display-night);
}
#screen > .game > .game-card {
  background: linear-gradient(140deg, #262044, #17162e 75%);
  border-color: var(--display-line);
  border-radius: clamp(22px, 2.5vw, 38px);
  box-shadow: 0 24px 80px #07051166, inset 0 1px #ffffff0b;
  color: var(--display-ink);
}
#screen .game .eyebrow { color: var(--display-mint); letter-spacing: .12em; }
#screen .game h1 { text-wrap: balance; letter-spacing: -.035em; }
#screen .game .metrics { color: var(--display-muted); font-variant-numeric: tabular-nums; }
#screen .guide-voice { border-color: var(--display-line); background: #ffffff08; }
#screen .game .choices { gap: clamp(12px, 1.4vw, 24px); }
#screen .game .choice {
  display: flex; align-items: center; gap: .7em; text-align: left;
  border-radius: 18px;
  border: 1px solid #ffffff33;
  box-shadow: 0 6px 0 #07051155;
  font-weight: 750; line-height: 1.25;
  overflow-wrap: anywhere;
  color: #fff;
}
/* LAS OPCIONES EN LA PROYECCIÓN (17-10-2026, decisión del dueño): las fichas
   llevan el MISMO color, forma y letra que el móvil del alumno
   (cube/student/live, PALETTE --t1..--t4) para que cada uno encuentre la suya;
   color Y forma, porque el color solo no le sirve a quien no lo distingue. Al
   cerrar la ronda: la correcta con borde y ✓, las demás apagadas, y cuántos
   eligieron cada una (nunca quién). Colores opacos con su propia tinta: se
   leen igual sobre cualquier fondo. */
#screen .choice[data-choice-tone="0"] { background: #d62246; }
#screen .choice[data-choice-tone="1"] { background: #2563d8; }
#screen .choice[data-choice-tone="2"] { background: #f0b429; color: #1b1405; }
#screen .choice[data-choice-tone="3"] { background: #1a7f37; }
#screen .game .choice[data-choice-tone] { flex-wrap: wrap; border: 3px solid transparent; font-weight: 850; transition: opacity .3s, transform .3s; }
.display-choice-mark { flex: none; width: 1.3em; text-align: center; font-size: 1.15em; line-height: 1; }
.display-choice-letter { flex: none; font-size: .55em; font-weight: 950; opacity: .8; }
.display-choice-label { flex: 1; min-width: 0; }
.display-choice-count { flex: none; font-variant-numeric: tabular-nums; font-weight: 950; }
.display-choice-meter { flex: 1 0 100%; height: .26em; border-radius: 999px; background: #0000002e; overflow: hidden; }
.display-choice-meter > span { display: block; height: 100%; border-radius: inherit; background: currentColor; opacity: .85; }
#screen .choices.is-closed .choice:not(.is-right) { opacity: .42; transform: scale(.97); }
#screen .game .choice.is-right { border-color: #fff; box-shadow: 0 0 0 6px var(--display-mint), 0 14px 40px #0009; }
#screen .choice.is-right .display-choice-count::after { content: " ✓"; }
#screen .game.is-reveal .choices { margin: 18px auto 8px; }
#screen .game .competition-rail { background: #100f2566; border-color: var(--display-line); }
#screen .game .live-player { border-color: #c1b2e825; background: #ffffff07; }
#screen .game .live-player strong { color: var(--display-gold); }
#screen .game .reveal-stat { border-color: var(--display-line); background: #ffffff07; }
#screen .game .reveal-stat b { color: var(--display-mint); }
#screen .game .maxim { color: var(--display-muted); text-wrap: balance; }
/* Chess keeps its existing measured grid and real tournament state. */
#screen .ctv, #screen > .chess-stage {
  background: radial-gradient(ellipse at 85% 0, #547c672b, transparent 65%), #111923;
  --gold: #ecd396; --teal: #9cdbc4; --muted: #bfcbc7;
}
#screen .ctv .ctv-card {
  background: linear-gradient(140deg, #22312e, #19242d);
  border-color: #98b8a840;
  box-shadow: 0 12px 32px #050b1233;
}
#screen .ctv .ctv-card.is-finished { border-color: #ecd39666; }
#screen .ctv .chess-board, #screen > .chess-stage .chess-board {
  background: #344a42;
  box-shadow: 0 18px 50px #0005;
}
#screen .ctv .ctv-status.is-live { color: #b1efce; background: #2b574333; }
#screen .ctv .ctv-standing { background: #ffffff06; border-top: 1px solid #ffffff10; }
#screen > .chess-stage .chess-copy p { color: #d8e2de; text-wrap: pretty; }
/* Short content entrances only; no repeating movement behind questions. */
@media (prefers-reduced-motion: no-preference) {
  #screen > .game:not(.is-race):not(.is-self-paced):not(.is-lobby) > .game-card,
  #screen > .chess-stage > .chess-copy {
    animation: display-content-arrive 240ms ease-out both;
  }
}
@keyframes display-content-arrive {
  from { opacity: .3; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (max-width: 650px) {
  #screen > .game { padding: 14px; }
  #screen > .game > .game-card { padding: 20px 16px; border-radius: 22px; }
  #screen .game .choice { font-size: clamp(18px, 4vw, 26px); }
}
@media (prefers-reduced-motion: reduce) {
  #screen .display-choice-mark, #screen .game .choice[data-choice-tone] { animation: none; transition: none; }
}