/* estilo concurso live mode styles. Used in Fase 2+. */
.ww-pin {
  font-family: ui-monospace, monospace;
  font-size: clamp(2rem, 8vw, 5rem);
  letter-spacing: .35em;
  font-weight: 700;
}
.ww-pin-input {
  font-size: clamp(1.5rem, 7vw, 2.5rem);
  letter-spacing: clamp(.15rem, 1vw, .4rem);
  text-transform: uppercase;
  font-family: ui-monospace, monospace;
}
.ww-opt-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
/* R1 · SE LEE A 3 METROS. Esto era `font-size: 1.5rem; padding: 2rem` — tamaño
   FIJO en el player, justo lo que §3 prohíbe: 24 px son 24 px lo mismo en un
   móvil que en una pizarra 4K, así que en el aula las OPCIONES DE RESPUESTA
   —el texto que la clase entera tiene que leer— se quedaban en el 1,3-2% del
   alto del marco. Lo cazó la medición de legibilidad de §29 (v1.51.423); el
   ratchet de §3 no lo veía porque busca `px` y esto iba en `rem`.
   Ahora escala con el marco (que es contenedor de consulta, ver player.css) y
   conserva un piso legible en pantallas pequeñas. */
.ww-opt-grid .btn {
  font-size: max(1rem, 3.4cqmin);
  padding: clamp(.7rem, 3.2cqmin, 2.2rem);
  font-weight: 600;
  /* Esquinas redondeadas (mockup del dueño 2026-08-12): pastilla, no ladrillo.
     Escala con el marco y con piso — un radio en px fijo se vería enorme en un
     móvil y ridículo en la pizarra. La rejilla es UNA para todos los modos
     (Individual, rondas en vivo, VS, Equipos, tarea): se redondea aquí y se
     hereda coherente en los cinco. */
  border-radius: max(10px, 1.6cqmin);
}
.ww-opt-grid .btn:nth-child(1) { background: var(--ww-shape-1, #e21b3c); border-color: var(--ww-shape-1, #e21b3c); color: var(--ww-shape-1-fg, #fff); }
.ww-opt-grid .btn:nth-child(2) { background: var(--ww-shape-2, #1368ce); border-color: var(--ww-shape-2, #1368ce); color: var(--ww-shape-2-fg, #fff); }
/* El ámbar con letra BLANCA daba 2,4:1 — el peor contraste de toda la app y en
   el sitio más visible. Con la letra oscura sube a 6,2:1 sin tocar el color de
   la forma (la paleta tipo un concurso se reconoce por el color, no por la letra).
   Medido, no estimado: lo comprueba la matriz en cada pasada. */
.ww-opt-grid .btn:nth-child(3) { background: var(--ww-shape-3, #d89e00); border-color: var(--ww-shape-3, #d89e00); color: var(--ww-shape-3-fg, #1f2937); }
.ww-opt-grid .btn:nth-child(4) { background: var(--ww-shape-4, #26890c); border-color: var(--ww-shape-4, #26890c); color: var(--ww-shape-4-fg, #fff); }
/* EL VEREDICTO GANA AL SKIN también en RONDAS (vivo/VS/Equipos, botones
   `.rq-opt` de renderChoiceRound): el arreglo de v1.51.431 solo cubría el
   player Individual (`.ww-opt`) y en carrera el fallo seguía sin ponerse rojo.
   Cuatro clases (0-4-0), por encima de las formas y de cualquier skin. */
.ww-opt-grid .btn.rq-opt.btn-success { background: var(--ww-success); border-color: var(--ww-success); color: #fff; }
.ww-opt-grid .btn.rq-opt.btn-danger { background: var(--ww-danger); border-color: var(--ww-danger); color: #fff; }
.ww-leaderboard .row { padding: .5rem; border-bottom: 1px solid rgba(255,255,255,.1); }
.ww-podium { display: flex; align-items: flex-end; gap: 1rem; justify-content: center; }
.ww-podium .step { background: linear-gradient(180deg, #fbbf24, #d97706); border-radius: 8px 8px 0 0; min-width: 100px; padding: 1rem; text-align: center; }
.ww-podium .step.s1 { height: 220px; }
.ww-podium .step.s2 { height: 160px; }
.ww-podium .step.s3 { height: 120px; }
/* Hora de meta de la carrera bajo los puntos (quién terminó antes). */
.ww-podium__sub { font-size: .85em; opacity: .85; }

/* R-1 · LECTURA (§26 ficha 1b): mientras la pizarra está en "preparados" se ve
   el enunciado pero NO las opciones — es lo que separa "leer" de "responder" y
   hace justo el bonus de velocidad. La clase la pone/quita views/hostLive.js
   con el MISMO instante que desbloquea los móviles. */
.hl-reading .ww-opt-grid { visibility: hidden; }
/* Y en el móvil: se lee, no se toca (mismo instante que la pizarra). */
.s-reading { pointer-events: none; opacity: .85; }


/* ── LOBBY DEL HOST · controles de configuración ──────────────────────────────
   CONTRASTE: el chrome del profesor es CREMA (#f3efe4, styles/home.css), así
   que las variantes "light" de Bootstrap (texto blanco) quedan ilegibles — se
   veía el botón pero no su texto. Estos chips traen su propio par
   fondo/texto de la paleta del panel (navy + ámbar), que contrasta tanto sobre
   crema como sobre un fondo oscuro si algún día la sala se proyecta en negro.
   Es chrome, no juego: nada de tokens --ww-* aquí (§3). */
.ll-label { color: #141c2e; font-weight: 600; }
.ll-hint  { color: #5b6472; }
.ll-pick {
  background: #243149; color: #e5edf9; border: 1px solid #33425d;
}
.ll-pick:hover { background: #2d3d59; color: #fff; }
.ll-pick.is-on {
  background: #f5c518; color: #141c2e; border-color: #d9ad0f; font-weight: 700;
}
.ll-pick.is-on:hover { background: #ffd534; color: #141c2e; }

/* ── EL MARCO EN VIVO (core/gameFrame.js) ────────────────────────────────────
   Aquí vivían ~40 líneas de reparto de alturas para que la pantalla del alumno
   LLENARA la ventana: 92dvh, luego `100dvh − barra`, luego el menor de dvh y
   `clientHeight`, luego `position: fixed`… Cada versión arreglaba un aparato y
   fallaba en otro, porque todas necesitaban saber cuánto mide la ventana.
   Se borraron TODAS (dueño, 2026-08-16): «el player debe ser 4:3 y luego con el
   fullscreen se acomoda». Con una proporción el marco es un elemento normal en
   una página normal, así que le sirven tal cual las reglas del player del profe
   (`.ww-play-page .ww-player-frame`, styles/player.css) — que ya deducen su
   ancho máximo del alto libre. Cero líneas de alto propias, cero restas que
   equivocar, y una sola forma de dimensionar un juego en toda la app. */
.ww-student-frame { container-type: inline-size; }
/* ── SUPERFICIE SIN CAJA (la del docente) ────────────────────────────────────
   Sus pantallas no miden lo mismo: el lobby lleva el «Únete en…», el PIN y un
   QR; la carrera, tres líneas. Con una proporción fija, lo que sobra se CORTA —
   y el QR a medias significa que nadie entra a la sala. Aquí la superficie no
   tiene forma propia: crece con su contenido, como cualquier página. Sigue
   siendo un elemento (y no el <body>) porque es el ámbito del fondo y el sitio
   del botón de pantalla completa. */
/* OJO CON LA ESPECIFICIDAD, que ya mordió una vez: la base del player es
   `.ww-play-page .ww-player-frame` (0,2,0) y declara `max-width`, esquinas y
   sombra; este marco SIEMPRE está dentro de `.ww-play-page`, así que una clase
   suelta (0,1,0) no la gana — el docente seguía con su caja de 720px y el
   commit que la quitaba no hacía nada. Se escribe con el mismo peso que la base
   y ya. (La proporción no se anula AQUÍ: un marco sin `caja` ya declara
   `--ww-ar-css: auto` al montarse, que es donde nace la decisión —si se
   arreglara en este fichero, «sin caja» solo funcionaría en las páginas de
   live y cualquier otra pantalla heredaría el 4:3 de respaldo.) */
.ww-play-page .ww-player-frame.ww-frame--libre {
  max-width: none;
  border-radius: 0;
  box-shadow: none;
}
.ww-frame--libre .ww-student-stage {
  flex: 0 0 auto;
  overflow: visible;
  container-type: inline-size;
}
/* EL ESLABÓN QUE FALTABA. El escenario era un bloque de altura automática, así
   que el `flex:1` de la actividad no tenía contra qué crecer: el marco medía
   913px y la hoja 436 (medido). Con la columna flex —y `container-type:size`,
   igual que el widget del profe— la actividad hereda el hueco REAL y las
   unidades `cq*` se resuelven contra él. Vale para las 13 plantillas, no solo
   para Tildes. */
.ww-student-stage {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  /* HUECO DE BARRA RESERVADO. El escenario crece y encoge con la fase (en
     carrera, el cronómetro cambia de dígitos cada segundo): si la barra de
     desplazamiento aparece y desaparece, TODO se desplaza unos píxeles a cada
     tic. En la pared es un temblor, y para un dedo es un blanco que se mueve. */
  scrollbar-gutter: stable;
  display: flex;
  flex-direction: column;
  container-type: size;
  padding: max(10px, 2cqmin);
  /* La primera fila de cada fase no se mete debajo del botón de la esquina. */
  padding-top: max(14px, var(--ww-fs-reserve, 52px) * 0.35);
}
/* La fase que monta una RONDA la deja llenar; el resto (lobby, espera, podio)
   conserva su alto natural y se apila arriba. `#s-round` es el hueco de la
   ronda en esta vista, y `#s-race-extra` la cabecera que a veces la acompaña. */
.ww-student-stage > #s-round { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.ww-student-stage > #s-race-extra { flex: 0 0 auto; }
/* La cabecera de la carrera (aciertos · racha · restantes) es una barra a todo
   el ancho dentro del marco: respeta la esquina reservada del botón de
   pantalla completa (estándar del marco) o el chip de «restantes» queda
   debajo del botón — se veía tapado en la captura del dueño. */
.ww-player-frame .s-race-head { padding-right: var(--ww-fs-reserve, 52px); }