@charset "utf-8";
/* ============================================================
   modulos/jugar.css — los juegos, el concurso de clase y el móvil del alumno.

   Se carga después de base.css, panel.css y app.css. Solo lo que es de
   esta área: todo lo común (tarjetas, botones, campos, cifras, tablas,
   avisos, cabecera de pantalla, `.opcion` con su marca de acierto y su aspa
   de fallo) ya viene de ahí.

   LA USAN TRES PANTALLAS, Y POR ESO ES UNA SOLA HOJA:
     · `juegos.js` (Jugar, ámbar: `t-juegos`),
     · `concurso.js` (la pared del aula, violeta: `t-concurso`),
     · `jugar.html` (el móvil del alumno, fuera de la aplicación; esa página
       carga base.css y esta hoja, sin panel.css ni app.css).
   Lo que las une son los cuatro colores de las opciones A–D: la pared y los
   treinta móviles tienen que pintar la misma letra del mismo color en el
   mismo segundo, y la única forma de que no se separen es escribirlos una vez.

   LO QUE NO SE HACE AQUÍ, porque el producto lo prohíbe por escrito: ni una
   cuenta atrás que alarme —el tiempo se enseña como dato, en el color de su
   sección, sin rojo ni latido—, ni vidas, ni sombras de adorno. Todo lo que
   se mueve se apaga con `prefers-reduced-motion` (bloque del final).
   ============================================================ */

/* ============================================================
   1. Los cuatro colores de las opciones: A, B, C, D

   Medidos con la fórmula WCAG 2.1 contra su tinta de encima (`--sobre-*`):
     A marca    4,88:1 de día · 7,30:1 de noche
     B xp      10,35:1        · 12,21:1
     C premium  5,70:1        · 7,21:1
     D mirar    7,80:1        · 10,53:1
   Ni jade ni coral: en toda la plataforma significan acierto y fallo, y una
   opción pintada de verde daría la respuesta antes de que se revele. Y
   alternando cálido y frío en la rejilla de 2×2 (azul · ámbar / violeta ·
   turquesa) para que dos vecinas nunca se confundan de reojo.
   ============================================================ */
:is(.tk-cq-op, .jg-op, .jg-letra-mini).c0 { --op: var(--marca);   --op-tinta: var(--marca-tinta);   --op-lavado: var(--marca-lavado);   --sobre-op: var(--sobre-marca); }
:is(.tk-cq-op, .jg-op, .jg-letra-mini).c1 { --op: var(--xp);      --op-tinta: var(--xp-tinta);      --op-lavado: var(--xp-lavado);      --sobre-op: var(--sobre-xp); }
:is(.tk-cq-op, .jg-op, .jg-letra-mini).c2 { --op: var(--premium); --op-tinta: var(--premium-tinta); --op-lavado: var(--premium-lavado); --sobre-op: var(--sobre-premium); }
:is(.tk-cq-op, .jg-op, .jg-letra-mini).c3 { --op: var(--mirar);   --op-tinta: var(--mirar-tinta);   --op-lavado: var(--mirar-lavado);   --sobre-op: var(--sobre-mirar); }

/* ============================================================
   2. Lo que comparten los juegos y el concurso
   ============================================================ */
.tk-jg-cuerpo, .tk-cq-cuerpo, .tk-cq-pared { display: grid; gap: var(--e-5); min-width: 0; }

/* El hueco de lo que todavía no ha llegado: el esqueleto de panel.css, con
   el alto de un menú para que la pantalla no dé el salto al pintarlo. */
.tk-jg-cargando { display: block; min-height: 16rem; border-radius: var(--r-xl); }

/* En estas pantallas los párrafos viven en rejillas con `gap`, y el
   `p + p { margin-top }` de base.css sumaba su margen al hueco: dos líneas
   seguidas quedaban el doble de separadas que el resto. */
:is(.tk-jg-fin, .tk-jg-leccion, .tk-jg-oir, .tk-cq-pin, .tk-cq-cab, .tk-cq-podio, .jg-veredicto, .jg-cab) p + p { margin-top: 0; }

/* ---------- los grupos de opciones: rótulo y chips ----------
   El rótulo es el de `.folio` sin filete —el filete es de las cabeceras—, y
   el chip es un botón de 44 px de alto: `.chip` de la plantilla es una
   etiqueta y no se pulsa. */
.tk-jg-grupo, .tk-cq-grupo { display: grid; gap: var(--e-2); min-width: 0; }
.tk-jg-rotulo, .tk-cq-rotulo {
  font-size: var(--t-xs); font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--tinta-3);
}
.tk-jg-chips, .tk-cq-chips { display: flex; flex-wrap: wrap; gap: var(--e-2); }
.tk-jg-chip, .tk-cq-chip {
  display: inline-flex; align-items: center; gap: .45em;
  min-height: 2.75rem; padding: 0 1.125rem;
  font: inherit; font-size: var(--t-sm); font-weight: 700; letter-spacing: .02em;
  color: var(--tinta); background: var(--papel);
  border: 2px solid var(--linea); border-radius: var(--r-full);
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.tk-jg-chip:hover, .tk-cq-chip:hover { border-color: var(--seccion); background: var(--seccion-lavado); }
/* Elegido se RELLENA del color: el filo solo cambiaba en el 4 % de la
   superficie y a un palmo no se veía cuál estaba puesto. `aria-pressed` lo
   dice a quien no ve el color. Los niveles llevan `.n-b1` y compañía, así que
   el relleno es el de su escalón. */
.tk-jg-chip.on, .tk-cq-chip.on {
  background: var(--seccion); border-color: var(--seccion); color: var(--sobre-seccion);
}
.tk-cq-chip-n {
  font-size: var(--t-xs); font-weight: 700; font-variant-numeric: tabular-nums;
  padding: .0625rem .4375rem; border-radius: var(--r-full);
  background: color-mix(in srgb, currentColor 14%, transparent);
}

/* ============================================================
   3. Juegos — el menú
   ============================================================ */
.tk-jg-menu {
  display: grid; gap: var(--e-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
}
/* Cada juego es una `.tarjeta` que se ELIGE: icono en su cuadro de lavado,
   nombre en serif, qué se practica y cuánto dura. Es un <button>, así que la
   letra, la alineación y el color hay que devolverlos a los de la tarjeta. */
.tk-jg-tarjeta {
  display: grid; grid-template-rows: auto auto 1fr auto; justify-items: start;
  gap: var(--e-2); width: 100%;
  font: inherit; text-align: left; color: var(--tinta); cursor: pointer;
}
@media (hover: hover) {
  .tk-jg-tarjeta:hover { border-color: color-mix(in srgb, var(--seccion) 70%, var(--linea)); }
}
/* La elegida: el filo pasa a la tinta de la sección, con un segundo trazo
   por dentro para que se lea como 3 px, y el cuadro del icono se rellena. Dos
   señales, porque el ámbar sobre papel blanco es de los colores que menos se
   ven solos. */
.tk-jg-tarjeta.on {
  border-color: var(--seccion-tinta);
  box-shadow: inset 0 0 0 1px var(--seccion-tinta);
  background: color-mix(in srgb, var(--seccion) 4%, var(--papel));
}
.tk-jg-ico {
  width: 3rem; height: 3rem; margin-bottom: var(--e-2);
  display: grid; place-items: center;
  border-radius: var(--r-md);
  background: var(--seccion-lavado); color: var(--seccion-tinta);
}
.tk-jg-ico svg { width: 1.5rem; height: 1.5rem; }
.tk-jg-tarjeta.on .tk-jg-ico { background: var(--seccion); color: var(--sobre-seccion); }
.tk-jg-nombre {
  font-family: var(--display); font-size: var(--t-xl); font-weight: 600;
  line-height: 1.13; letter-spacing: -.018em;
}
.tk-jg-que { color: var(--tinta-2); font-size: var(--t-sm); line-height: 1.5; }
.tk-jg-dura { margin-top: var(--e-2); white-space: normal; }
/* En el móvil la tarjeta se tumba: icono a la izquierda y el texto al lado.
   De pie, las cuatro medían 940 px y el botón de jugar quedaba dos pantallas
   más abajo; el juego más valioso —los pares mínimos— era el que no se veía. */
@media (max-width: 40rem) {
  .tk-jg-menu { gap: var(--e-3); }
  .tk-jg-tarjeta {
    grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto auto;
    column-gap: var(--e-4); row-gap: .25rem; padding: var(--e-4);
  }
  .tk-jg-ico { grid-row: 1 / span 3; align-self: start; width: 2.75rem; height: 2.75rem; margin-bottom: 0; }
  .tk-jg-nombre { font-size: var(--t-lg); }
  .tk-jg-dura { margin-top: .25rem; }
}

/* La preparación: nivel o sonido, y el botón de jugar. */
.tk-jg-preparar { display: grid; gap: var(--e-5); }
.tk-jg-arranque { align-items: center; }
.tk-jg-arranque .btn svg { width: 1.125rem; height: 1.125rem; }
.tk-jg-elegido { color: var(--tinta-3); font-size: var(--t-sm); }
@media (min-width: 48rem) {
  .tk-jg-preparar { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
  .tk-jg-arranque { flex-direction: column; align-items: stretch; text-align: center; }
}

/* ============================================================
   4. Juegos — la partida
   ============================================================ */
.tk-jg-cab { display: grid; gap: var(--e-3); }
.tk-jg-titular { display: flex; align-items: center; flex-wrap: wrap; gap: var(--e-2) var(--e-3); }
.tk-jg-titulo { font-size: var(--t-xl); }

/* El marcador es la fila de `.metricas`, pero en UNA línea también en el
   móvil: tres cifras apiladas se comían media pantalla justo encima del
   tablero. Los filetes son los de panel.css, que ya se dibujan bien tenga la
   rejilla las columnas que tenga. */
.tk-jg-metricas {
  margin-bottom: 0;
  grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
}
.tk-jg-metricas .metrica { padding: var(--e-3) var(--e-4); min-width: 0; }
@media (max-width: 48rem) {
  .tk-jg-metricas .metrica { padding: var(--e-2) var(--e-3); }
}
.tk-jg-de {
  font-family: var(--texto); font-size: var(--t-sm); font-weight: 600;
  letter-spacing: 0; color: var(--tinta-3);
}
.tk-jg-cab .progreso { height: .5rem; }
.tk-jg-avance > i { transition: width .34s cubic-bezier(.2, .9, .3, 1); }
/* El reloj de la ráfaga se recalcula cada 100 ms: con transición iría siempre
   por detrás de la cifra de segundos. */
.tk-jg-tiempo > i { transition: none; }

/* La racha, dentro de su celda. */
.tk-jg-racha { display: flex; align-items: baseline; gap: .3rem; min-width: 0; }
.tk-jg-nada { color: var(--tinta-3); }
.tk-jg-llama { display: inline-flex; align-self: center; color: var(--xp-tinta); }
.tk-jg-llama svg { width: 1.125rem; height: 1.125rem; }
.tk-jg-racha small {
  font-family: var(--texto); font-size: var(--t-xs); font-weight: 700;
  letter-spacing: 0; color: var(--acierto-tinta);
}
.tk-jg-racha.viva { animation: tk-jg-pop .3s ease; }
.tk-jg-racha.fuego b, .tk-jg-racha.fuego .tk-jg-llama { color: var(--racha-tinta); }
/* A los diez, oro. El color no va solo: el confeti y la campana de logro
   dicen lo mismo por otros dos canales. */
.tk-jg-racha.oro b, .tk-jg-racha.oro .tk-jg-llama, .tk-jg-racha.oro small { color: var(--xp-tinta); }
.tk-jg-racha.hito { animation: tk-jg-hito .62s cubic-bezier(.2, .8, .3, 1); }

/* ---------- parejas ---------- */
.tk-jg-tablero {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--e-4); align-items: start;
}
.tk-jg-col { display: grid; gap: var(--e-2); align-content: start; min-width: 0; }
/* El rótulo de cada columna es un folio con su filete, en el color de SU
   columna: la inglesa lleva `.s-marca` y hereda el azul; la española, el
   ámbar de la sección. De qué lado está una ficha se sabe sin leerla. */
.tk-jg-colcab {
  display: inline-flex; align-items: center; gap: var(--e-2);
  margin-bottom: var(--e-1);
  font-size: var(--t-xs); font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
  color: var(--seccion-tinta);
}
.tk-jg-colcab::before {
  content: ""; width: 1.5rem; height: 3px; border-radius: 2px;
  background: var(--seccion); flex: none;
}

/* La ficha es una `.opcion`. Lo que se añade: el golpe de 160 ms, la palabra
   partiéndose donde haga falta en un móvil estrecho y el filo del color de
   su columna. El jade y el coral se quedan libres para lo que significan en
   toda la plataforma: si separaran los idiomas, el acierto dejaría de
   distinguirse del inglés. */
.tk-jg-ficha {
  position: relative;
  display: flex; align-items: center; gap: var(--e-2);
  width: 100%; min-height: 3.5rem;
  font-weight: 600; line-height: 1.3; overflow-wrap: anywhere;
  transition: transform .16s ease, background-color .16s ease, border-color .16s ease, color .16s ease, box-shadow .16s ease;
}
.tk-jg-ficha.en {
  border-color: color-mix(in srgb, var(--marca) 32%, var(--linea));
  box-shadow: 0 3px 0 color-mix(in srgb, var(--marca) 32%, var(--linea));
}
/* Más carga que la inglesa: el ámbar al mismo 32 % sobre el papel blanco es
   casi la línea gris, y la columna española dejaba de tener color. */
.tk-jg-ficha.es {
  border-color: color-mix(in srgb, var(--seccion) 60%, var(--linea));
  box-shadow: 0 3px 0 color-mix(in srgb, var(--seccion) 60%, var(--linea));
}
/* Volteada —la que sostienes mientras buscas su pareja—: hundida como una
   tecla pulsada, con el lavado y el filo de SU columna. Antes se pintaba de
   azul aunque fuera española, y en el momento en que más se mira el tablero
   perdía la única señal de qué lado estabas. */
.tk-jg-ficha.viva {
  border-color: var(--seccion-tinta);
  background: var(--seccion-lavado);
  box-shadow: inset 0 0 0 1px var(--seccion-tinta);
  transform: translateY(3px);
}
.tk-jg-ficha.bien { animation: tk-jg-pop .3s ease; }
/* El filo de la columna pesa lo mismo que el acierto de base.css y va
   después, así que se lo comía: la pareja acertada salía en jade con el filo
   azul. El resultado manda sobre el lado. */
.tk-jg-ficha.es-correcta, .tk-jg-ficha.es-fallo { transform: none; box-shadow: none; }
.tk-jg-ficha.es-correcta { border-color: var(--acierto); }
.tk-jg-ficha.es-fallo { border-color: var(--racha); }
@media (max-width: 40rem) {
  /* En la columna de 170 px la marca de 3 rem a la derecha partía
     «estadounidense» en dos. Sube a la esquina y deja el renglón entero. */
  .tk-jg-ficha { padding: var(--e-3); hyphens: auto; }
  .tk-jg-ficha:is(.es-correcta, .es-fallo) { padding-right: 1.75rem; }
  .tk-jg-ficha.es-correcta::after { top: .5rem; right: .625rem; margin-top: 0; width: .375rem; height: .7rem; }
  .tk-jg-ficha.es-fallo::before, .tk-jg-ficha.es-fallo::after { top: .875rem; right: .4375rem; width: .75rem; }
}
.tk-jg-ficha.hecha { cursor: default; }
.tk-jg-cara { min-width: 0; }
.tk-jg-alt { margin-left: auto; display: inline-flex; flex: none; color: var(--tinta-3); }
.tk-jg-alt svg { width: 1rem; height: 1rem; }
/* La marca de acierto y el aspa de fallo van a la derecha, donde estaba el
   altavoz: los dos juntos se pisaban. */
.tk-jg-ficha:is(.es-correcta, .es-fallo) .tk-jg-alt { display: none; }
.tk-jg-tablero.entra .tk-jg-ficha {
  animation: tk-jg-entra .3s ease backwards;
  animation-delay: calc(var(--i, 0) * 26ms);
}

/* El número que sube al acertar. */
.tk-jg-flota {
  position: absolute; left: 50%; top: .25rem; z-index: 3; pointer-events: none;
  font-family: var(--display); font-size: var(--t-md); font-weight: 700;
  color: var(--acierto-tinta);
  animation: tk-jg-flota .9s ease-out forwards;
}
.tk-sacude { animation: tk-jg-sacude .34s ease; }

.tk-jg-pie { margin-top: var(--e-1); }

/* ---------- de oído y oveja o barco ---------- */
.tk-jg-oir { display: grid; justify-items: center; gap: var(--e-2); text-align: center; padding-block: var(--e-2); }
/* El altavoz es el botón grande de la pantalla, relleno del color de la
   sección y con el relieve sólido de los botones de la plantilla. */
.tk-jg-altavoz {
  position: relative; width: 7rem; height: 7rem; flex: none;
  display: grid; place-items: center;
  border: 0; border-radius: var(--r-full); cursor: pointer;
  background: var(--seccion); color: var(--sobre-seccion);
  box-shadow: 0 4px 0 color-mix(in srgb, var(--seccion) 62%, #000);
  transition: transform .08s ease, box-shadow .08s ease, background-color .15s ease;
}
/* El mismo relieve, la misma mano y la misma pulsación que el altavoz de
   Mirar, el micrófono de Pronunciar y el reproductor de Escuchar. */
.tk-jg-altavoz:hover { background: color-mix(in oklab, var(--seccion) 92%, #000); }
.tk-jg-altavoz:active { transform: translateY(4px); box-shadow: none; background: var(--seccion-hondo); }
.tk-jg-altavoz.suena { animation: tk-jg-pop .3s ease; }
/* El anillo del tiempo de la ronda. Se queda en la tinta de encima del
   relleno hasta el último segundo: es un dato, no una alarma. */
.tk-jg-anillo {
  position: absolute; top: .375rem; left: .375rem;
  width: calc(100% - .75rem); height: calc(100% - .75rem); max-width: none;
  transform: rotate(-90deg);
}
.tk-jg-anillo circle { fill: none; stroke-width: 5; }
.tk-jg-anillo .pista { stroke: color-mix(in srgb, var(--sobre-seccion) 22%, transparent); }
.tk-jg-anillo .avance { stroke: var(--sobre-seccion); stroke-linecap: round; transition: stroke-dashoffset .12s linear; }
.tk-jg-altavoz-ico { position: relative; display: grid; }
.tk-jg-altavoz-ico svg { width: 2.5rem; height: 2.5rem; }
.tk-jg-indica { font-size: var(--t-sm); color: var(--tinta-3); }
.tk-jg-pista { font-family: var(--display); font-size: var(--t-lg); color: var(--tinta-2); }

/* Las cuatro respuestas: `.opcion` con su letra en un cuadro. */
/* Dos columnas fijas, no `auto-fit`: con cuatro respuestas, el reparto
   automático dejaba tres arriba y una sola abajo en el portátil. */
.tk-jg-ops { display: grid; gap: var(--e-3); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 30rem) { .tk-jg-ops { grid-template-columns: minmax(0, 1fr); } }
.tk-jg-op { display: flex; align-items: center; gap: var(--e-3); width: 100%; font-weight: 600; overflow-wrap: anywhere; }
.tk-jg-letra {
  flex: none; width: 2rem; height: 2rem;
  display: grid; place-items: center;
  border-radius: var(--r-sm);
  background: var(--papel-2); color: var(--tinta-2);
  font-family: var(--display); font-size: var(--t-base); font-weight: 700; line-height: 1;
}
.tk-jg-op:hover:not([disabled]) .tk-jg-letra { background: var(--seccion); color: var(--sobre-seccion); }
.tk-jg-texto { min-width: 0; }
/* La elegida se queda encendida y hundida mientras llega la siguiente. Con
   `.tk-jg-ops` delante porque base.css apaga a la mitad TODAS las `.opcion`
   deshabilitadas que no son acierto ni fallo, y esa regla pesa cuatro clases:
   aquí no se sabe si acertó —la respuesta no viaja al cliente—, así que la
   elegida no es ninguna de las dos, y se apagaba justo la que se tocó. */
.tk-jg-ops .tk-jg-op.elegida[disabled],
.tk-jg-dos .tk-jg-par.elegida[disabled] {
  opacity: 1;
  border-color: var(--seccion-tinta); background: var(--seccion-lavado);
  box-shadow: inset 0 0 0 1px var(--seccion-tinta);
  transform: translateY(3px);
}
.tk-jg-op.elegida .tk-jg-letra { background: var(--seccion); color: var(--sobre-seccion); }
.tk-jg-ops.entra .tk-jg-op, .tk-jg-dos.entra .tk-jg-par {
  animation: tk-jg-entra .28s ease backwards;
  animation-delay: calc(var(--i, 0) * 55ms);
}

/* Oveja o barco: dos candidatos, cada uno con su color. Ni jade ni coral: en
   los otros juegos ya significan «bien» y «mal», y aquí las dos opciones son
   igual de legítimas hasta que se contesta. */
.tk-jg-contraste { text-align: center; font-size: var(--t-md); font-weight: 700; color: var(--tinta-2); }
.tk-jg-dos {
  display: grid; gap: var(--e-3);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
}
.tk-jg-par.c0 { --seccion: var(--marca);   --seccion-tinta: var(--marca-tinta);   --seccion-lavado: var(--marca-lavado);   --sobre-seccion: var(--sobre-marca); }
.tk-jg-par.c3 { --seccion: var(--premium); --seccion-tinta: var(--premium-tinta); --seccion-lavado: var(--premium-lavado); --sobre-seccion: var(--sobre-premium); }
.tk-jg-par {
  display: grid; justify-items: center; gap: .25rem;
  width: 100%; padding: var(--e-5) var(--e-4);
  text-align: center; overflow-wrap: anywhere;
  border-color: color-mix(in srgb, var(--seccion) 40%, var(--linea));
  box-shadow: 0 3px 0 color-mix(in srgb, var(--seccion) 40%, var(--linea));
}
/* La etiqueta del sonido lleva la transcripción —«i LARGA /iː/»—, así que va
   en la letra de la fonética: en la de texto la /ː/ sale de otra altura. */
.tk-jg-par-et { font-family: var(--fonetica); font-size: var(--t-sm); font-weight: 700; color: var(--seccion-tinta); }
.tk-jg-par b { font-family: var(--display); font-size: var(--t-2xl); font-weight: 600; letter-spacing: -.02em; line-height: 1.1; }
.tk-jg-par > span { font-size: var(--t-sm); color: var(--tinta-2); }

/* ---------- ráfaga ---------- */
.tk-jg-pregunta {
  text-align: center; overflow-wrap: anywhere;
  padding: var(--e-6) var(--e-4);
  background: var(--papel); border: 2px solid var(--linea); border-radius: var(--r-xl);
  animation: tk-jg-entra .2s ease backwards;
}

/* ============================================================
   5. Juegos — el final y el repaso

   El cierre trae su propia superficie, con las medidas de `.tarjeta`, en vez
   de fiarse de ella: `.tk-jg-fin` no siempre lleva la clase.
   ============================================================ */
/* `.tk-jg-fin` va en un <section>: el relleno vertical se escribe con la
   etiqueta delante por la misma regla de panel.css que se lo quitaba. */
section.tk-jg-fin, .tk-jg-fin {
  display: grid; justify-items: center; gap: var(--e-2); text-align: center;
  background: var(--papel); color: var(--tinta);
  border: 2px solid var(--linea); border-radius: var(--r-xl);
  padding: var(--e-6) var(--e-5);
}
section.tk-jg-fin { padding-block: var(--e-6); }
.tk-jg-fin .folio { margin-bottom: 0; }
.tk-jg-aro { line-height: 0; margin-bottom: var(--e-2); }
.tk-jg-fin h2 { font-size: var(--t-2xl); }
/* La cuenta con la medida del final de Mirar y de Pronunciar: el dato grande
   es el aro, y «4 / 6» lo acompaña debajo del veredicto. */
.tk-jg-marcador {
  font-family: var(--display); font-size: var(--t-xl); font-weight: 600;
  line-height: 1.2; font-variant-numeric: tabular-nums;
  color: var(--tinta-2);
}
.tk-jg-marcador b { font-weight: 600; color: var(--tinta); }
.tk-jg-marcador.listo { animation: tk-jg-pop .34s ease; }
.tk-jg-mejor { display: inline-flex; align-items: center; color: var(--tinta-2); font-size: var(--t-sm); font-weight: 600; }
.tk-jg-mejor svg { width: 1.125rem; height: 1.125rem; color: var(--racha-tinta); }
.tk-jg-xp { margin-top: var(--e-2); font-variant-numeric: tabular-nums; }

.tk-jg-repaso-bloque { margin-bottom: 0; }
.tk-jg-fila {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: var(--e-1) var(--e-4);
  padding: var(--e-3) var(--e-4);
  border-bottom: 1px solid var(--linea-suave);
}
.tk-jg-fila:last-child, .tk-jg-leccion:last-child { border-bottom: 0; }
.tk-jg-fila-en, .tk-jg-fila-sol { display: flex; flex-wrap: wrap; align-items: baseline; gap: .125rem var(--e-3); min-width: 0; }
.tk-jg-fila-en b { font-family: var(--display); font-size: var(--t-lg); font-weight: 600; overflow-wrap: anywhere; }
/* La pronunciación figurada —«SHIIP»—, con la medida de `.unidad-pron`. */
.tk-jg-pron { font-size: var(--t-sm); color: var(--tinta-3); letter-spacing: .05em; }
.tk-jg-es { color: var(--tinta-2); overflow-wrap: anywhere; }
.tk-jg-era-bien { font-weight: 700; color: var(--acierto-tinta); overflow-wrap: anywhere; }
.tk-jg-puso { font-size: var(--t-sm); color: var(--tinta-3); }
.tk-jg-repaso { animation: tk-jg-entra .26s ease backwards; animation-delay: calc(var(--i, 0) * 40ms); }

/* Oveja o barco: cada fallo con la frase que enseña, el porqué, la boca y el
   truco. */
.tk-jg-leccion { display: grid; gap: var(--e-3); padding: var(--e-4); border-bottom: 1px solid var(--linea-suave); }
.tk-jg-era { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem var(--e-3); }
.tk-jg-era b { font-family: var(--display); font-size: var(--t-xl); font-weight: 600; }
.tk-jg-ok { align-self: center; }
.tk-jg-ok svg { width: .875rem; height: .875rem; }
.tk-jg-elegiste { font-size: var(--t-sm); font-weight: 600; color: var(--racha-tinta); }
.tk-jg-aviso { margin-top: 0; }
.tk-jg-porque { font-size: var(--t-sm); color: var(--tinta-2); max-width: var(--medida); }
.tk-jg-truco { display: flex; align-items: flex-start; font-size: var(--t-sm); font-weight: 600; color: var(--seccion-tinta); line-height: 1.45; }
.tk-jg-truco svg { width: 1.125rem; height: 1.125rem; margin-top: .0625rem; }

/* El corte de boca (`.tk-bc-*`) NO se dibuja aquí: boca.js es de Pronunciar
   y su hoja (hablar.css) lo define una sola vez para las dos pantallas que lo
   pintan, el detalle de un sonido y este repaso. Dos copias acababan con la
   lengua de dos azules distintos. */

/* ============================================================
   6. Concurso — montarlo
   ============================================================ */
section.tk-cq-montar { display: grid; gap: var(--e-5); padding-block: var(--e-5); }
.tk-cq-fuentes {
  display: grid; gap: var(--e-3);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
}
/* Tres fichas que se eligen, con el relieve de `.opcion`: al elegir una se
   hunde y se queda hundida, como un interruptor. */
.tk-cq-fuente {
  display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--e-3); row-gap: .125rem;
  align-items: center; text-align: left;
  min-height: 2.75rem; padding: var(--e-3) var(--e-4);
  font: inherit; color: var(--tinta); cursor: pointer;
  background: var(--papel); border: 2px solid var(--linea); border-radius: var(--r-md);
  box-shadow: 0 3px 0 var(--linea);
  transition: border-color .12s ease, background-color .12s ease, transform .08s ease, box-shadow .08s ease;
}
.tk-cq-fuente-ico {
  grid-row: span 2; width: 2.5rem; height: 2.5rem;
  display: grid; place-items: center; border-radius: var(--r-sm);
  background: var(--seccion-lavado); color: var(--seccion-tinta);
}
.tk-cq-fuente-ico svg { width: 1.25rem; height: 1.25rem; }
.tk-cq-fuente b { font-weight: 700; line-height: 1.25; }
.tk-cq-fuente small { font-size: var(--t-sm); line-height: 1.35; color: var(--tinta-2); }
.tk-cq-fuente:hover:not([disabled]) { border-color: var(--seccion); background: var(--seccion-lavado); }
.tk-cq-fuente.on {
  border-color: var(--seccion-tinta); background: var(--seccion-lavado);
  box-shadow: inset 0 0 0 1px var(--seccion-tinta);
  transform: translateY(3px);
}
.tk-cq-fuente.on .tk-cq-fuente-ico { background: var(--seccion); color: var(--sobre-seccion); }
/* Sin lecciones propias todavía: a la vista y apagada, porque dice que el
   camino existe. Escondida, nadie sabría que puede llegar a estar. */
.tk-cq-fuente[disabled] { cursor: not-allowed; opacity: .55; box-shadow: none; }

.tk-cq-pareja {
  display: grid; gap: var(--e-5);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
}
.tk-cq-campo { margin-bottom: 0; }
.tk-cq-lista { min-height: 10rem; line-height: 1.6; }
.campo .tk-cq-ok { color: var(--acierto-tinta); font-weight: 600; }
.tk-cq-crear .btn svg { width: 1.125rem; height: 1.125rem; }

.tk-cq-anteriores { margin-bottom: 0; }
.tk-cq-lista-fin { list-style: none; }
.tk-cq-anterior {
  display: flex; align-items: center; justify-content: space-between; gap: var(--e-3);
  padding: var(--e-3) var(--e-4); border-bottom: 1px solid var(--linea-suave);
}
.tk-cq-anterior:last-child { border-bottom: 0; }
.tk-cq-anterior-que { display: grid; min-width: 0; }
.tk-cq-anterior-que b { font-weight: 600; overflow-wrap: anywhere; }
.tk-cq-anterior-que small { font-size: var(--t-sm); color: var(--tinta-3); }
.tk-cq-anterior .btn-panel { flex: none; }

/* ============================================================
   7. Concurso — la pared del aula

   Todo se mide con `clamp()` contra el ancho de la proyección y no con la
   escala del móvil: el mismo rótulo de 13 px que se lee en un portátil
   desaparece en una pared de tres metros. Los topes están calculados para
   1920 px, que es lo que da un proyector de aula.
   ============================================================ */

/* Con el concurso en marcha, la cabecera se queda en folio y titular: la
   entradilla que explica cómo montarlo le roba el alto al enunciado. */
.tk-cq.en-juego .app-cabeza { padding-bottom: var(--e-3); margin-bottom: var(--e-4); }
.tk-cq.en-juego .app-cabeza p:not(.folio) { display: none; }
.tk-cq.en-juego .app-cabeza h1 { font-size: var(--t-xl); }
/* Y la pantalla usa el ancho del proyector. La medida de 72rem de la
   aplicación está pensada para leer; en la pared, cuatro opciones de 560 px
   en una pantalla de 1920 dejaban un tercio de cada lado vacío. */
@media (min-width: 100rem) {
  .app-cuerpo > .view.t-concurso:has(.tk-cq.en-juego) { max-width: 100rem; }
}

/* ---------- la sala de espera ---------- */
/* Con `section` delante a propósito: panel.css quita el relleno vertical a
   todo <section> dentro del cuerpo (`.panel-cuerpo section`, que pesa una
   clase y una etiqueta), y el código quedaba pegado al borde de arriba del
   bloque de color. */
section.tk-cq-pin {
  display: grid; justify-items: center; gap: var(--e-1); text-align: center;
  padding: clamp(1.5rem, .8rem + 3vw, 3.5rem) clamp(1rem, .5rem + 2vw, 3rem);
  border-radius: var(--r-xl);
}
.tk-cq-et { font-size: clamp(1rem, .85rem + .7vw, 1.75rem); font-weight: 600; letter-spacing: .02em; }
.tk-cq-url {
  margin-bottom: var(--e-3);
  font-size: clamp(1.25rem, .8rem + 2vw, 3rem); font-weight: 700; letter-spacing: -.01em;
  overflow-wrap: anywhere;
}
/* Lo más grande de toda la plataforma, a propósito: si no se lee desde la
   última fila, la mitad de la clase no entra y el concurso no empieza. En la
   serif de los titulares y con cifras de ancho fijo, para que «1» y «8»
   ocupen lo mismo y los dos bloques de tres queden cuadrados. */
.tk-cq-codigo {
  margin-block: var(--e-1) var(--e-3);
  font-family: var(--display); font-weight: 600;
  font-size: clamp(3rem, 1rem + 9vw, 10rem); line-height: 1;
  letter-spacing: .04em; font-variant-numeric: tabular-nums lining-nums;
  white-space: nowrap;
}
.tk-cq-nota { font-size: clamp(.9375rem, .85rem + .4vw, 1.25rem); }
.tk-cq-dentro {
  display: flex; justify-content: center; align-items: baseline; flex-wrap: wrap; gap: var(--e-2);
  font-size: clamp(1.0625rem, .9rem + .8vw, 1.75rem); color: var(--tinta-2);
}
.tk-cq-dentro b {
  font-family: var(--display); font-weight: 600; line-height: 1;
  font-size: clamp(2.25rem, 1.5rem + 3vw, 4.5rem);
  font-variant-numeric: tabular-nums; color: var(--tinta);
}
.tk-cq-nombres { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--e-2); }
.tk-cq-nombre {
  padding: .375rem 1rem; border-radius: var(--r-full);
  background: var(--seccion-lavado); color: var(--seccion-tinta);
  font-weight: 700; font-size: clamp(1rem, .85rem + .7vw, 1.5rem);
  overflow-wrap: anywhere;
}
.tk-cq-nadie { text-align: center; font-size: var(--t-sm); color: var(--tinta-3); }

/* ---------- la pregunta ---------- */
.tk-cq-cab {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: var(--e-2) var(--e-4);
}
.tk-cq-cual, .tk-cq-han { font-size: clamp(1rem, .85rem + .7vw, 1.625rem); font-weight: 600; color: var(--tinta-2); }
.tk-cq-cual b, .tk-cq-han b {
  font-family: var(--display); font-weight: 600;
  font-variant-numeric: tabular-nums; color: var(--tinta);
}
/* Los segundos, en serif y en la tinta de la sección de principio a fin. */
.tk-cq-seg { display: flex; align-items: baseline; gap: .125rem; font-family: var(--display); color: var(--seccion-tinta); }
.tk-cq-seg b {
  font-size: clamp(2.5rem, 1.6rem + 3.6vw, 5.5rem); font-weight: 600; line-height: 1;
  font-variant-numeric: tabular-nums; min-width: 1.2em; text-align: right;
}
.tk-cq-seg small { font-size: clamp(1rem, .8rem + .8vw, 1.75rem); font-weight: 600; }
.tk-cq-reloj { height: clamp(.625rem, .4rem + .6vw, 1.125rem); }
.tk-cq-reloj > i { transition: width .95s linear; }
.tk-cq-enunciado {
  text-align: center; overflow-wrap: anywhere;
  font-size: clamp(1.75rem, .9rem + 3.6vw, 4.75rem); line-height: 1.08; letter-spacing: -.025em;
}
.tk-cq-pista {
  margin-top: calc(-1 * var(--e-3));
  text-align: center; letter-spacing: .05em;
  font-size: clamp(1.125rem, .9rem + 1vw, 2rem); font-weight: 600;
  color: var(--seccion-tinta);
}

/* Las cuatro opciones: relleno de su color, letra en su cuadro invertido y
   texto en la tinta que ese color admite encima. */
/* En 2 × 2 también en la pared, y no las cuatro en fila: es la misma
   colocación que tienen en el móvil, y así «la de arriba a la derecha» es la
   misma casilla en las dos pantallas. */
.tk-cq-ops {
  display: grid; gap: clamp(.75rem, .5rem + 1vw, 1.5rem);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 36rem) { .tk-cq-ops { grid-template-columns: minmax(0, 1fr); } }
.tk-cq-op {
  display: flex; align-items: center; gap: clamp(.75rem, .5rem + 1vw, 1.5rem);
  min-width: 0; min-height: clamp(4.5rem, 3rem + 4vw, 8.5rem);
  padding: clamp(.75rem, .5rem + 1vw, 1.5rem);
  background: var(--op); color: var(--sobre-op);
  border: 2px solid var(--op); border-radius: var(--r-lg);
  font-size: clamp(1.125rem, .7rem + 1.6vw, 2.5rem); font-weight: 700; line-height: 1.2;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}
.tk-cq-letra {
  flex: none; display: grid; place-items: center;
  width: clamp(2.5rem, 1.8rem + 2.6vw, 4.75rem); aspect-ratio: 1;
  border-radius: var(--r-md);
  background: var(--sobre-op); color: var(--op);
  font-family: var(--display); font-weight: 700; line-height: 1;
}
.tk-cq-txt { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.tk-cq-cuantos {
  flex: none; min-width: 2.2em; text-align: center;
  padding: .125rem .625rem; border-radius: var(--r-full);
  background: var(--sobre-op); color: var(--op);
  font-family: var(--display); font-weight: 600; font-variant-numeric: tabular-nums;
}
.tk-cq-tic {
  flex: none; display: grid; place-items: center;
  width: clamp(2.25rem, 1.6rem + 2.4vw, 4.25rem); aspect-ratio: 1;
  border-radius: var(--r-full);
  background: var(--acierto); color: var(--sobre-acierto);
}
.tk-cq-tic svg { width: 60%; height: 60%; }
/* Revelada: la buena conserva su relleno y gana el aro de acierto y la marca;
   las otras pasan a su lavado con la letra aún en su color y la cifra de
   votos intacta, que es el dato del que vive el concurso. El aro es un
   `outline` y no una sombra: es una marca, no una elevación. */
.tk-cq-op.fallada {
  background: var(--op-lavado); color: var(--tinta-2); font-weight: 600;
  border-color: color-mix(in srgb, var(--op) 40%, var(--linea));
}
.tk-cq-op.fallada .tk-cq-letra { background: var(--op); color: var(--sobre-op); }
.tk-cq-op.fallada .tk-cq-cuantos { background: var(--papel); color: var(--tinta); }
.tk-cq-op.correcta {
  outline: clamp(3px, .1rem + .25vw, 6px) solid var(--acierto);
  outline-offset: clamp(3px, .1rem + .2vw, 5px);
}

/* ---------- el podio ---------- */
.tk-cq-podio { display: grid; justify-items: center; gap: var(--e-3); text-align: center; }
/* El icono en su disco lavado, redondo como el del momento de fiesta.js y el
   del final en el móvil del alumno: cuadrado era el único distinto. */
.tk-cq-gran {
  width: clamp(3.5rem, 2.5rem + 2vw, 5rem); aspect-ratio: 1;
  display: grid; place-items: center; border-radius: var(--r-full);
  background: var(--xp-lavado); color: var(--xp-tinta);
}
.tk-cq-gran svg { width: 55%; height: 55%; }
.tk-cq-fin-tit { font-size: clamp(2rem, 1.2rem + 3vw, 4rem); }
.tk-cq-empate { font-size: var(--t-lg); font-weight: 700; color: var(--xp-tinta); }
.tk-cq-tres {
  list-style: none; width: 100%; max-width: 64rem; margin-top: var(--e-3);
  display: flex; align-items: flex-end; justify-content: center; gap: clamp(.5rem, .3rem + 1vw, 1.25rem);
}
/* Escalones de verdad, cada uno con su metal sacado de la paleta: oro del
   ámbar, plata del gris de tinta, bronce del naranja de C2. Sobre su lavado y
   con la tinta de cada uno, que es la que pasa de 4,5:1 sobre ese lavado. */
.tk-cq-cajon {
  --metal: var(--linea); --metal-tinta: var(--tinta-2); --metal-lavado: var(--papel-2);
  flex: 1 1 0; min-width: 0; max-width: 20rem;
  display: grid; justify-items: center; align-content: start; gap: var(--e-2);
  padding: var(--e-4) var(--e-2) var(--e-5);
  background: var(--metal-lavado); color: var(--tinta);
  border: 2px solid var(--metal); border-bottom: 0;
  border-radius: var(--r-lg) var(--r-lg) 0 0;
}
.tk-cq-cajon.p1 { --metal: var(--xp); --metal-tinta: var(--xp-tinta); --metal-lavado: var(--xp-lavado); min-height: clamp(12rem, 7rem + 12vw, 22rem); }
.tk-cq-cajon.p2 { --metal: color-mix(in srgb, var(--tinta-3) 50%, var(--linea)); min-height: clamp(9.5rem, 5.5rem + 9vw, 17rem); }
.tk-cq-cajon.p3 { --metal: var(--n-c2); --metal-tinta: var(--n-c2-tinta); --metal-lavado: var(--n-c2-lavado); min-height: clamp(8rem, 4.5rem + 7vw, 14rem); }
/* 2 · 1 · 3: cuelga del SITIO en la fila (`s1` es quien va primero en la
   clasificación), no del puesto. Con un empate hay dos cajones con el mismo
   puesto, y colgando del puesto el ganador acababa a la derecha. */
.tk-cq-cajon.s1 { order: 2; }
.tk-cq-cajon.s2 { order: 1; }
.tk-cq-cajon.s3 { order: 3; }
.tk-cq-puesto {
  font-family: var(--display); font-weight: 600; line-height: 1;
  font-size: clamp(2.25rem, 1.4rem + 3.4vw, 5.5rem);
  font-variant-numeric: tabular-nums; color: var(--metal-tinta);
}
.tk-cq-cajon .tk-cq-quien { font-size: clamp(1rem, .75rem + 1vw, 2rem); font-weight: 700; line-height: 1.15; overflow-wrap: anywhere; }
.tk-cq-puntos { display: grid; justify-items: center; }
.tk-cq-puntos .tk-cq-pts {
  font-family: var(--display); font-weight: 600; line-height: 1;
  font-size: clamp(1.5rem, 1rem + 2vw, 3.25rem); font-variant-numeric: tabular-nums;
}
.tk-cq-puntos small { font-size: clamp(.8125rem, .7rem + .4vw, 1.125rem); color: var(--tinta-2); }
/* La subida. `both` es lo que importa: el cajón está abajo y transparente
   ANTES de que le toque su turno, no solo mientras dura la animación. */
.tk-cq-sube { animation: tk-cq-sube .62s cubic-bezier(.16, .84, .3, 1) both; }
.tk-cq-pts { font-variant-numeric: tabular-nums; }

/* Lo que se lleva la clase. */
.tk-cq-cierre { width: 100%; margin-bottom: 0; text-align: left; }
.tk-cq-cierre .bloque-cuerpo { display: grid; gap: var(--e-4); }
.tk-cq-datos { --tono: var(--seccion-tinta); }
.tk-cq-datos .cifra dd { display: flex; align-items: baseline; gap: .0625rem; }
.tk-cq-simbolo { font-size: .55em; color: var(--tinta-3); }
.aviso .tk-cq-peor-txt { font-family: var(--display); font-size: var(--t-lg); font-weight: 600; color: var(--tinta); overflow-wrap: anywhere; }
.tk-cq-peor-sol { font-weight: 700; color: var(--tinta); }
/* En la pared, el cierre también se lee desde lejos: la cabecera de `.bloque`
   y el texto de `.aviso` están medidos para un panel a medio metro. */
@media (min-width: 75rem) {
  .tk-cq-cierre > header h2 { font-size: var(--t-lg); }
  .tk-cq-peor p { font-size: var(--t-base); }
  .aviso .tk-cq-peor-txt { font-size: var(--t-xl); }
}

/* La clasificación entera, con filetes de tabla y cifras en serif. */
.tk-cq-tabla { list-style: none; width: 100%; border-top: 1px solid var(--linea); }
.tk-cq-fila {
  display: grid; grid-template-columns: clamp(2.25rem, 1.5rem + 2vw, 4rem) minmax(0, 1fr) auto;
  gap: var(--e-4); align-items: baseline;
  padding: clamp(.5rem, .35rem + .5vw, 1rem) var(--e-2);
  border-bottom: 1px solid var(--linea);
  font-size: clamp(1rem, .85rem + .7vw, 1.625rem);
}
.tk-cq-p { font-family: var(--display); font-weight: 600; text-align: center; font-variant-numeric: tabular-nums; color: var(--tinta-3); }
.tk-cq-fila.p1 .tk-cq-p { color: var(--xp-tinta); }
.tk-cq-fila.p2 .tk-cq-p { color: var(--tinta-2); }
.tk-cq-fila.p3 .tk-cq-p { color: var(--n-c2-tinta); }
.tk-cq-fila .tk-cq-quien { font-weight: 600; overflow-wrap: anywhere; }
.tk-cq-suma { font-family: var(--display); font-weight: 600; font-variant-numeric: tabular-nums; }

/* Los mandos del profesor: pequeños, abajo y separados por un filete. Son
   para él, no para la clase. */
.tk-cq-mandos { justify-content: center; padding-top: var(--e-4); border-top: 1px solid var(--linea); }
.tk-cq-espera-nota { margin-top: calc(-1 * var(--e-3)); text-align: center; font-size: var(--t-sm); color: var(--tinta-3); }

/* ============================================================
   8. El móvil del alumno (jugar.html)

   Esa página no carga app.css ni panel.css: solo base.css y esta hoja.
   Todo lo que usa de fuera es de base.css.
   ============================================================ */
body.jg-pagina { min-height: 100svh; display: flex; flex-direction: column; background: var(--fondo); }
/* `hidden` tiene que ganar siempre: la barra y el nombre nacen escondidos, y
   cualquier regla con `display` se come el atributo. */
.jg-pagina [hidden] { display: none !important; }

/* Una franja mínima: la marca y quién eres. No es la cabecera del sitio; en
   una pantalla de juego no hay a dónde ir. */
.jg-barra {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between; gap: var(--e-3);
  min-height: 3.5rem; padding: .375rem var(--e-4);
  padding-top: max(.375rem, env(safe-area-inset-top));
  background: var(--papel); border-bottom: 1px solid var(--linea);
}
.jg-marca { display: inline-flex; align-items: center; gap: .5rem; min-width: 0; }
.jg-marca img { width: 1.75rem; height: 1.75rem; }
.jg-marca b { font-family: var(--display); font-size: 1.0625rem; font-weight: 600; letter-spacing: -.03em; }
.jg-yo { display: grid; justify-items: end; min-width: 0; text-align: right; line-height: 1.25; }
.jg-yo b { max-width: 11rem; font-size: var(--t-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jg-yo span { font-size: var(--t-xs); color: var(--tinta-3); font-variant-numeric: tabular-nums; }

.jg-marco {
  flex: 1; width: 100%; max-width: 36rem; margin-inline: auto;
  display: grid; gap: var(--e-4); align-content: start;
  padding: var(--e-5) var(--e-4) calc(var(--e-6) + env(safe-area-inset-bottom));
}
/* La entrada ocupa la pantalla entera con la tarjeta centrada, como la
   puerta de la aplicación. */
.jg-marco:has(> .jg-entrada) { max-width: none; padding: 0; }
.jg-entrada.acceso-marco { background: var(--fondo); }
/* En bloque: detrás de la marca, que es `inline-flex`, el folio se subía a
   su misma línea y el filete quedaba pegado al nombre. */
.jg-entrada .folio { display: flex; margin-bottom: var(--e-2); }
/* El código, en la serif y con aire entre cifras: se copia de una pared a
   tres metros y hay que poder comprobarlo de un vistazo. El relleno de la
   izquierda compensa el espaciado que queda detrás de la última cifra. */
.campo .jg-pin {
  font-family: var(--display); font-size: var(--t-2xl); font-weight: 600;
  letter-spacing: .3em; padding-left: calc(var(--e-3) + .3em);
  text-align: center; font-variant-numeric: tabular-nums;
}

.jg-cab { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--e-2); }
.jg-cab .folio { margin-bottom: 0; }
.jg-enviada svg { width: 1rem; height: 1rem; }
.jg-reloj { height: .625rem; }
.jg-reloj > i { transition: width .9s linear; }
.jg-listo { text-align: center; }

/* Las cuatro respuestas: `.opcion` grande, con la letra en un cuadro de su
   color, igual que en la pared. El filo va teñido del mismo color para que
   se reconozca la casilla aunque la letra quede bajo el pulgar. */
.jg-ops { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-3); }
.jg-op {
  display: grid; justify-items: center; align-content: start; gap: var(--e-2);
  min-height: 8rem; min-width: 0; padding: var(--e-4) var(--e-3);
  text-align: center; font-weight: 700; overflow-wrap: anywhere;
  border-color: color-mix(in srgb, var(--op) 55%, var(--linea));
  box-shadow: 0 4px 0 color-mix(in srgb, var(--op) 55%, var(--linea));
}
.jg-op:hover:not([disabled]), .jg-op:active:not([disabled]) { border-color: var(--op); background: var(--op-lavado); }
.jg-letra {
  width: 3rem; height: 3rem; display: grid; place-items: center;
  border-radius: var(--r-md);
  background: var(--op); color: var(--sobre-op);
  font-family: var(--display); font-size: var(--t-xl); font-weight: 700; line-height: 1;
}
.jg-txt { font-size: var(--t-md); line-height: 1.25; }
/* Contestado: la elegida se queda hundida y encendida; las otras tres se
   tiñen de papel pero conservan su letra en color, que es como el profesor
   las nombra en voz alta. Con `.jg-ops.contestado` delante porque base.css
   apaga a la mitad las `.opcion` deshabilitadas con una regla de cuatro
   clases, y a la mitad la letra dejaba de leerse. */
.jg-ops.contestado .jg-op:not(.elegida) {
  opacity: 1; box-shadow: none;
  background: var(--papel-2); border-color: var(--linea); color: var(--tinta-3);
}
.jg-ops.contestado .jg-op:not(.elegida) .jg-letra { background: color-mix(in srgb, var(--op) 30%, var(--papel-2)); color: var(--tinta); }
.jg-ops.contestado .jg-op.elegida {
  opacity: 1; color: var(--tinta);
  background: var(--op-lavado); border-color: var(--op);
  box-shadow: inset 0 0 0 2px var(--op);
  transform: translateY(4px);
}

/* Lo que pasó: espera, acierto, fallo, sin contestar y el final. */
.jg-veredicto { display: grid; justify-items: center; gap: var(--e-2); text-align: center; }
.jg-veredicto h1 { font-size: var(--t-2xl); }
.jg-gran {
  width: 4.5rem; height: 4.5rem; margin-bottom: var(--e-1);
  display: grid; place-items: center; border-radius: var(--r-full);
  background: var(--papel-2); color: var(--tinta-2);
}
.jg-gran svg { width: 2.5rem; height: 2.5rem; }
.jg-veredicto.espera .jg-gran { background: var(--marca-lavado); color: var(--marca-tinta); }
.jg-veredicto.bien .jg-gran { background: var(--acierto-lavado); color: var(--acierto-tinta); }
.jg-veredicto.mal .jg-gran { background: var(--racha-lavado); color: var(--racha-tinta); }
.jg-veredicto.jg-fin .jg-gran { background: var(--xp-lavado); color: var(--xp-tinta); }
.jg-sub { max-width: 26rem; color: var(--tinta-2); }
.jg-puntos {
  font-family: var(--display); font-size: var(--t-3xl); font-weight: 600;
  line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}
.jg-puntos small { font-family: var(--texto); font-size: var(--t-base); font-weight: 600; letter-spacing: 0; color: var(--tinta-2); }
.jg-era { display: inline-flex; align-items: center; gap: .4rem; color: var(--tinta); }
.jg-letra-mini {
  width: 1.5rem; height: 1.5rem; display: inline-grid; place-items: center; flex: none;
  border-radius: 6px; background: var(--op); color: var(--sobre-op);
  font-family: var(--display); font-size: var(--t-sm); font-weight: 700; line-height: 1;
}
.jg-sube { animation: jg-sube .5s cubic-bezier(.16, .84, .3, 1) both; }

/* La clasificación de la mano: filas de 44 px, cifras en serif y la tuya
   con el lavado de marca. */
.jg-tabla {
  list-style: none; overflow: hidden;
  background: var(--papel); border: 1px solid var(--linea); border-radius: var(--r-md);
}
.jg-fila {
  display: grid; grid-template-columns: 2rem minmax(0, 1fr) auto; gap: var(--e-3); align-items: center;
  min-height: 2.75rem; padding: .5rem var(--e-4);
  border-bottom: 1px solid var(--linea-suave); font-size: var(--t-sm);
}
.jg-fila:last-child { border-bottom: 0; }
.jg-fila b { font-family: var(--display); font-size: var(--t-base); font-weight: 600; font-variant-numeric: tabular-nums; }
.jg-puesto { font-family: var(--display); font-weight: 600; text-align: center; color: var(--tinta-3); }
.jg-fila.p1 .jg-puesto { color: var(--xp-tinta); }
.jg-fila.p2 .jg-puesto { color: var(--tinta-2); }
.jg-fila.p3 .jg-puesto { color: var(--n-c2-tinta); }
.jg-quien { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jg-fila.yo { background: var(--marca-lavado); }
.jg-fila.yo .jg-quien { color: var(--marca-tinta); }
.jg-salida { margin-top: var(--e-1); }

/* El lienzo del confeti de fiesta.js. En la aplicación lo coloca la hoja de
   la fiesta; esta página no la carga, así que lo pone aquí. */
.jg-pagina .tk-confeti { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 90; }

@media (max-width: 20rem) {
  .jg-ops { grid-template-columns: minmax(0, 1fr); }
  .jg-op { min-height: 4.5rem; grid-template-columns: auto minmax(0, 1fr); justify-items: start; text-align: left; }
}

/* ============================================================
   9. El movimiento, y quien no lo quiere

   `tk-jg-entra` va con `backwards` y NO con `both`: `both` deja pegado el
   fotograma final para siempre, y una animación gana a cualquier
   declaración normal. Con `both`, las parejas resueltas no cambiaban de
   aspecto y ninguna ficha se hundía al tocarla.
   ============================================================ */
@keyframes tk-jg-entra { from { opacity: 0; transform: translateY(10px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes tk-jg-pop { 0% { transform: scale(1); } 45% { transform: scale(1.06); } 100% { transform: scale(1); } }
@keyframes tk-jg-sacude { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-7px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(3px); } }
@keyframes tk-jg-flota { 0% { opacity: 0; transform: translate(-50%, 4px) scale(.8); } 25% { opacity: 1; transform: translate(-50%, -10px) scale(1.1); } 100% { opacity: 0; transform: translate(-50%, -42px) scale(1); } }
@keyframes tk-jg-hito { 0% { transform: scale(1); } 32% { transform: scale(1.42); } 62% { transform: scale(.96); } 100% { transform: scale(1); } }
@keyframes tk-cq-sube { from { opacity: 0; transform: translateY(46px) scale(.94); } 60% { opacity: 1; } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes jg-sube { from { opacity: 0; transform: translateY(26px) scale(.96); } to { opacity: 1; transform: none; } }

/* Quien pide menos animación no recibe nada de esto: ni entradas, ni golpes,
   ni sacudidas, ni números flotantes, ni cajones que suben. Los estados de
   COLOR se quedan —acierto, fallo, elegida—, porque son información y no
   adorno. base.css ya acorta todas las duraciones; esto lo dice por nombre,
   para que nadie añada un movimiento nuevo sin verlo aquí. */
@media (prefers-reduced-motion: reduce) {
  .tk-jg-tablero.entra .tk-jg-ficha, .tk-jg-ops.entra .tk-jg-op, .tk-jg-dos.entra .tk-jg-par,
  .tk-jg-ficha.bien, .tk-jg-racha.viva, .tk-jg-racha.hito, .tk-jg-altavoz.suena,
  .tk-jg-pregunta, .tk-jg-repaso, .tk-jg-marcador.listo,
  .tk-cq-sube, .jg-sube { animation: none; }
  .tk-jg-flota { display: none; }
  .tk-sacude { animation: none; }
  .tk-jg-ficha, .tk-jg-altavoz, .tk-jg-avance > i, .tk-jg-anillo .avance,
  .tk-cq-fuente, .tk-cq-op, .tk-cq-reloj > i, .jg-reloj > i,
  .tk-jg-chip, .tk-cq-chip { transition: none; }
  .tk-jg-ficha.viva, .tk-cq-fuente.on, .jg-ops.contestado .jg-op.elegida,
  .tk-jg-ops .tk-jg-op.elegida[disabled], .tk-jg-dos .tk-jg-par.elegida[disabled] { transform: none; }
}

/* ============================================================
   10. Ganchos con nombre

   Clases que escribe el JavaScript para que la pieza se pueda encontrar, y
   que por sí solas no necesitan más que esto. Van aquí para que ninguna
   quede sin regla —una clase sin regla es la que un día sale con el aspecto
   de fábrica del navegador sin que nadie lo vea—.
   ============================================================ */
.tk-jg, .tk-cq { min-width: 0; }
.tk-jg-nivel { flex: none; }
.tk-jg-empezar { min-width: 12rem; }
.tk-jg-sin-pares { align-self: start; }
.tk-cq-dato { min-width: 0; }
.tk-cq-peor { margin: 0; }
.jg-medalla { font-variant-numeric: tabular-nums; }

/* Con una partida en marcha la cabecera de pantalla se queda en su folio, y
   el nombre del juego hace de titular. Dejando también «Juegos» salían dos
   titulares iguales uno encima del otro —«Juegos», un filete y «Parejas»—, y
   no se sabía cuál era el de la pantalla. */
.tk-jg.en-partida .app-cabeza { padding-bottom: 0; margin-bottom: var(--e-2); border-bottom: 0; }
.tk-jg.en-partida .app-cabeza p:not(.folio), .tk-jg.en-partida .app-cabeza h1 { display: none; }
.tk-jg.en-partida .app-cabeza .folio { margin-bottom: 0; }
.tk-jg.en-partida .tk-jg-titulo { font-size: var(--t-2xl); }