/* ============================================================================
   trivia.css — la trivia de tomicristal.com.

   El layout sale de JUGAR Kahoot, no de leer sobre Kahoot (14-oct). Lo que
   copiamos, porque es lo que hace que se sienta un juego y no una lectura:

     · Fondo ilustrado a pantalla completa. La gráfica ES la página.
     · Una sola pantalla, SIN SCROLL nunca.
     · En el teléfono la pregunta va ABAJO, pegada a las opciones (zona del
       pulgar); la imagen ocupa el tercio de arriba. Al revés de lo intuitivo.
     · Grid 2×2 de colores saturados, con forma en la esquina.
     · El tiempo es una BARRA al fondo con el número adentro, no un anillo.
     · El resultado es una banda enorme con los puntos encima de las opciones.
       Sin explicaciones en el medio del juego: lo que enseña va al final.

   Lo que NO copiamos: la paleta chillona. Los cuatro colores son los nuestros,
   con contraste verificado (5,98:1 a 12,26:1) y forma + letra además del color.
   ============================================================================ */
:root{
  /* UNA SOLA ESTÉTICA para las dos pantallas: el teléfono y la pantalla del
     vivo usan el mismo azul y las mismas tarjetas blancas. Antes el teléfono
     tenía el escenario cálido del primer diseño y el vivo el azul de Kahoot:
     parecían dos productos distintos. La marca Tomi vive en el logo, en los
     acentos miel y en el resto del sitio. */
  --az-1:#1668D8; --az-2:#0B46B4; --az-3:#0A3AA0;
  --az-oscuro:#07163A;                       /* cápsulas, barras y el reloj */
  --blanco:#FFFFFF; --ink:#241C16;           /* texto sobre las tarjetas */
  --honey:#F2A93B;                           /* el acento de marca: logo y puntos */
  --on-ink:#FFFFFF; --on-ink-2:#C6D8F5;      /* texto sobre el azul */
  --cream:#FFFFFF;                           /* las tarjetas ahora son blancas */

  /* Las cuatro respuestas, con las formas de Kahoot. Contraste verificado:
     rojo 4,80:1 · azul 5,49:1 · verde 4,67:1 en blanco; el dorado lleva texto
     tinta (6,90:1) porque en blanco da 2,35:1 y es ilegible. */
  --r-a:#E21B3C; --r-a-on:#FFFFFF;
  --r-b:#1368CE; --r-b-on:#FFFFFF;
  --r-c:#D89E00; --r-c-on:#241C16;
  --r-d:#26890C; --r-d-on:#FFFFFF;

  --bien:#26890C; --mal:#5B6B8C; --coral:#FF7A59;
  --f:'Inter',system-ui,sans-serif;
  --ease:cubic-bezier(.22,1,.36,1);
  --ease-pop:cubic-bezier(.34,1.56,.64,1);
}
*{box-sizing:border-box}
/* `hidden` tiene que ganar SIEMPRE. El navegador lo aplica con `display:none`,
   pero cualquier clase nuestra que defina `display` (y casi todas lo hacen:
   flex, grid, inline-flex) le gana por especificidad y el elemento se ve igual.
   Pasó en serio: el aviso de "hay trivia en vivo" y el de "no hay ninguna"
   aparecían juntos, contradiciéndose. */
[hidden]{display:none!important}
html,body{margin:0;padding:0;height:100%;overflow:hidden}
body{
  font:400 17px/1.4 var(--f);color:var(--on-ink);background:var(--az-2);
  -webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent;
}
/* Las curvas del fondo, iguales a las de la pantalla del vivo. */
.fondo{position:fixed;inset:0;z-index:0;overflow:hidden;
  background:linear-gradient(150deg,var(--az-1) 0%,var(--az-2) 58%,var(--az-3) 100%)}
.fondo i{position:absolute;border-radius:50%}
.fondo i:nth-child(1){width:160vmax;height:160vmax;right:-52vmax;bottom:-86vmax;background:rgba(255,255,255,.055)}
.fondo i:nth-child(2){width:100vmax;height:100vmax;left:-38vmax;top:-34vmax;background:rgba(255,255,255,.04)}
.fondo i:nth-child(3){width:64vmax;height:64vmax;right:-8vmax;top:-30vmax;background:rgba(10,30,100,.16)}
.pantalla{position:relative;z-index:1}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
/* El margen por defecto de <p> regalaba 76 px de la pantalla del juego. */
p,h1,h2{margin:0}
:focus-visible{outline:3px solid var(--honey);outline-offset:2px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* Una pantalla, siempre. Nada de scroll. */
/* ============================================================================
   ESCALADO. La regla: nada se pisa nunca, pase lo que pase con la pantalla.
   Tres mecanismos, en este orden:

     1. El contenedor es `fixed`, no `100dvh`. En los teléfonos la barra del
        navegador aparece y desaparece al scrollear, y con dvh el alto cambia
        en medio del juego. Fixed toma el viewport visible real, siempre.
     2. Cada bloque escala con `clamp()` atado al alto disponible (dvh), no a
        tamaños fijos: con menos pantalla, todo se achica junto.
     3. Cuando ya no alcanza con achicar, hay una JERARQUÍA DE SACRIFICIO
        explícita (§ "cuando falta espacio", más abajo): se va cayendo lo
        prescindible en orden, y lo que se toca nunca se sacrifica.
   ============================================================================ */
.pantalla{display:none;position:fixed;inset:0;
  padding:calc(8px + env(safe-area-inset-top)) calc(10px + env(safe-area-inset-right))
          calc(8px + env(safe-area-inset-bottom)) calc(10px + env(safe-area-inset-left));
  flex-direction:column;gap:clamp(5px,1dvh,10px);max-width:980px;margin:0 auto}
.pantalla.on{display:flex}
/* Las pantallas con texto largo sí pueden scrollear: ahí no hay reloj corriendo. */
#puerta.on,#repaso.on,#espera.on{overflow-y:auto;overscroll-behavior:contain}

/* La pantalla de juego es una GRILLA, no un flex: así la pregunta, las opciones
   y el reloj tienen su fila garantizada y la imagen se queda SÓLO con lo que
   sobra. Con flex, una imagen alta empujaba la pregunta fuera de la vista —
   pasó, y los parches con max-height no lo resolvían en todas las pantallas. */
/* Áreas nombradas y no filas por orden: si un bloque se oculta (la imagen en
   pantallas bajas), los demás NO se corren de fila. Sin esto, al desaparecer la
   imagen la pregunta heredaba su fila flexible y quedaba una tarjeta blanca de
   360 px con dos renglones adentro. El espacio que sobra tiene que ir siempre a
   lo que se toca, no al texto. */
#juego.on{display:grid;overflow:hidden;align-content:stretch;
  grid-template-areas:"top" "ilustra" "pregunta" "grid" "tiempo";
  grid-template-rows:auto minmax(0,1fr) auto auto auto}
#juego .top{grid-area:top}
#juego .ilustra{grid-area:ilustra}
#juego .pregunta{grid-area:pregunta}
#juego .grid{grid-area:grid}
#juego .tiempo{grid-area:tiempo}

/* ===================== PROGRESO (arriba) ===================== */
.top{display:flex;align-items:center;gap:10px}
.pasos{display:flex;gap:4px;flex:1}
.paso{height:clamp(3px,.6dvh,5px);flex:1;border-radius:99px;background:rgba(255,255,255,.26)}
.paso.ok{background:var(--honey)}
.marcador{display:flex;align-items:center;gap:6px;font:800 17px/1 var(--f);font-variant-numeric:tabular-nums}
.marcador .racha{font:700 12px/1 var(--f);color:var(--honey);background:rgba(242,169,59,.2);
  border-radius:99px;padding:4px 8px}

/* ===================== LA PUERTA ===================== */
#puerta{justify-content:center;text-align:center;gap:0}
.logo{font:600 11px/1 var(--f);letter-spacing:.18em;text-transform:uppercase;color:var(--on-ink-2);margin:0 0 18px}
#puerta h1{font:800 clamp(38px,11vw,62px)/.98 var(--f);letter-spacing:-.035em;margin:0 0 12px;color:var(--blanco)}
#puerta h1 em{font-style:normal;color:var(--honey)}
#puerta .bajada{font-size:16px;color:var(--on-ink-2);margin:0 auto 26px;max-width:30ch}

/* El apodo se ELIGE, no se escribe (como Kahoot): sin teclado, sin apellidos
   reales en pantalla y sin apodos para moderar en vivo. */
.rotulo{font:600 11px/1 var(--f);letter-spacing:.14em;text-transform:uppercase;color:var(--on-ink-2);margin:0 0 10px}
.apodos{display:grid;gap:8px;margin:0 0 10px}
.apodo{background:rgba(255,255,255,.14);border:2px solid transparent;border-radius:12px;padding:14px;
  font:700 19px/1 var(--f);color:var(--on-ink);transition:background .15s,border-color .15s,transform .15s var(--ease)}
.apodo[aria-pressed="true"]{background:var(--blanco);color:var(--ink);border-color:var(--honey);transform:scale(1.02)}
.otra-vuelta{font:600 14px/1 var(--f);color:var(--on-ink-2);text-decoration:underline;text-underline-offset:4px;
  padding:10px;margin:0 0 18px}
.figuritas{display:grid;grid-template-columns:repeat(6,1fr);gap:7px;margin:0 0 22px}
.fig{aspect-ratio:1;border-radius:12px;border:2px solid transparent;display:grid;place-items:center;transition:transform .15s var(--ease)}
.fig svg{width:66%;height:66%}
.fig[aria-pressed="true"]{border-color:var(--cream);transform:scale(1.08)}

.boton{display:block;width:100%;background:var(--honey);color:var(--ink);border-radius:14px;
  padding:19px 24px;font:800 20px/1 var(--f);letter-spacing:-.01em;flex:none;
  transition:transform .14s var(--ease),filter .14s}
.boton:hover{transform:translateY(-2px);filter:brightness(1.05)}
.boton:active{transform:translateY(1px)}
.boton.fantasma{background:rgba(255,255,255,.16);color:var(--on-ink)}

/* ===================== LA PREGUNTA ===================== */
/* Orden en el teléfono: imagen arriba, pregunta abajo pegada a las opciones. */
.ilustra{min-height:0;overflow:hidden;display:flex;align-items:center;justify-content:center}
.ilustra img{max-height:100%;max-width:100%;width:auto;height:auto;object-fit:contain;
  background:var(--blanco);border-radius:14px;padding:clamp(4px,1dvh,8px);
  animation:aparecer .35s var(--ease) both}
/* ============================================================================
   CUANDO FALTA ESPACIO — jerarquía de sacrificio, en orden.

   Lo que NUNCA se sacrifica: las cuatro opciones (son lo que se toca), la
   pregunta y el reloj. Todo lo demás puede caerse.
   ============================================================================ */

/* 1º la imagen, que es lo único decorativo. Primero se achica sola (vive en la
   celda flexible) y debajo de 600 px de alto desaparece. El espacio liberado
   pasa a las OPCIONES, que es donde sirve. */
@media (max-height:600px){
	.ilustra{display:none}
	#juego.on{grid-template-areas:"top" "pregunta" "grid" "tiempo";
	  grid-template-rows:auto auto minmax(0,1fr) auto}
}

/* 2º los pasos y el puntaje de arriba: el número de pregunta se puede deducir. */
@media (max-height:460px){
	.top{display:none}
	#juego.on{grid-template-areas:"pregunta" "grid" "tiempo";
	  grid-template-rows:auto minmax(0,1fr) auto}
}

/* 3º en pantallas muy angostas las opciones pasan a una sola columna: es
   preferible una lista scrolleable a cuatro cuadros ilegibles. */
@media (max-width:300px){
	.grid{grid-template-columns:1fr}
	.op{min-height:44px}
}

/* Apaisado de teléfono (poco alto, mucho ancho): la pregunta va al lado de las
   opciones en vez de encima, que es lo que de verdad resuelve ese caso. */
@media (max-height:480px) and (min-width:640px) and (orientation:landscape){
	#juego.on{grid-template-rows:auto minmax(0,1fr) auto;
	  grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);
	  grid-template-areas:"top top" "pregunta grid" "tiempo tiempo";
	  column-gap:clamp(8px,2vw,18px)}
	#juego .pregunta{align-self:center;font-size:clamp(15px,2.6vw,26px);-webkit-line-clamp:6}
	.ilustra{display:none}
	.top{display:flex}
}
@keyframes aparecer{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:none}}

.pregunta{background:var(--cream);color:var(--ink);border-radius:clamp(9px,1.4dvh,14px);
  padding:clamp(9px,2dvh,22px) clamp(12px,3vw,18px);
  /* El tamaño mira el ancho Y el alto: en una pantalla baja y ancha el texto
     tiene que achicarse igual, aunque sobre ancho. */
  font:800 clamp(15px,min(5.2vw,3.1dvh),30px)/1.16 var(--f);
  letter-spacing:-.02em;text-align:center;text-wrap:balance;
  overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4}

/* El grid se queda con TODO el espacio sobrante: es lo que se toca. */
.grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(5px,1dvh,9px)}
.op{position:relative;border-radius:clamp(9px,1.3dvh,13px);padding:clamp(8px,1.6dvh,16px) clamp(8px,2.5vw,14px);
  /* 48 px es el piso: por debajo de eso el dedo no acierta. Nunca se achica más. */
  min-height:clamp(48px,9.5dvh,140px);
  display:grid;place-items:center;text-align:center;
  font:700 clamp(12.5px,min(4.2vw,2.4dvh),21px)/1.15 var(--f);
  transition:transform .12s var(--ease),opacity .3s,filter .3s;overflow:hidden}
.op{cursor:pointer}
.op:hover:not([disabled]){transform:translateY(-3px);filter:brightness(1.12);
  box-shadow:0 8px 20px rgba(0,0,0,.35)}
.op:focus-visible{outline:4px solid var(--blanco);outline-offset:3px}
.op:active:not([disabled]){transform:scale(.97);filter:brightness(.95)}
/* Al tocar: se marca AL INSTANTE, sin esperar al server. Que el dedo tenga
   respuesta inmediata es lo que hace que el juego se sienta vivo. */
.op.elegida{box-shadow:0 0 0 5px var(--blanco),0 10px 26px rgba(0,0,0,.4);transform:scale(1.02);z-index:2}
.op.elegida::after{content:"";position:absolute;inset:0;border-radius:13px;
  background:rgba(255,255,255,.18);animation:destello .5s var(--ease) both}
@keyframes destello{from{opacity:1}to{opacity:0}}
.op.esperando{opacity:.55}
.op .forma{position:absolute;top:clamp(5px,.9dvh,9px);left:clamp(5px,1.5vw,9px);
  width:clamp(11px,2.2dvh,17px);aspect-ratio:1;background:currentColor;opacity:.9}
.op .letra{position:absolute;top:clamp(4px,.8dvh,9px);right:clamp(6px,1.8vw,11px);
  font:800 clamp(10px,1.6dvh,13px)/1 var(--f);opacity:.65}
.op.a{background:var(--r-a);color:var(--r-a-on)}
.op.b{background:var(--r-b);color:var(--r-b-on)}
.op.c{background:var(--r-c);color:var(--r-c-on)}
.op.d{background:var(--r-d);color:var(--r-d-on)}
.op.a .forma{clip-path:polygon(50% 0,100% 100%,0 100%)}     /* triángulo */
.op.b .forma{clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)} /* rombo */
.op.c .forma{clip-path:circle(50%)}                            /* círculo */
.op.d .forma{clip-path:inset(0)}                               /* cuadrado */
/* Resultado: la correcta se enciende, la tuya equivocada se marca, el resto se apaga. */
.op.apagada{opacity:.22;filter:grayscale(.8)}
.op.buena{background:var(--bien);color:#fff;opacity:1;filter:none;animation:pop .35s var(--ease-pop)}
.op.tuya-mal{background:var(--mal);color:#fff;opacity:1;filter:none}
.op .sello{position:absolute;bottom:8px;right:10px;font-size:20px;line-height:1}
@keyframes pop{from{transform:scale(.92)}to{transform:scale(1)}}

/* El tiempo: barra al fondo con el número adentro. */
.tiempo{position:relative;height:clamp(22px,3.6dvh,42px);border-radius:99px;background:var(--az-oscuro);overflow:hidden}
.tiempo i{position:absolute;inset:0;right:auto;width:100%;background:var(--honey);
  border-radius:99px;transition:width .25s linear,background .3s}
.tiempo b{position:absolute;inset:0;display:flex;align-items:center;justify-content:flex-end;padding-right:16px;
  font:800 clamp(13px,2.2dvh,20px)/1 var(--f);color:var(--cream);font-variant-numeric:tabular-nums;
  text-shadow:0 1px 2px rgba(0,0,0,.5)}
.tiempo.urgente i{background:var(--coral)}
.tiempo.urgente b{animation:latir 1s steps(1,end) infinite}
@keyframes latir{0%,60%{transform:scale(1)}30%{transform:scale(1.12)}}

/* La banda del resultado: cruza la pantalla con los puntos, como en Kahoot. */
.banda{position:fixed;left:-8%;right:-8%;top:34%;transform:rotate(-4deg);z-index:9;
  background:var(--bien);color:#fff;text-align:center;padding:16px 0;
  box-shadow:0 14px 40px rgba(0,0,0,.4);animation:banda .45s var(--ease-pop) both}
.banda.mal{background:var(--mal)}
.banda .grande{font:800 clamp(40px,13vw,66px)/1 var(--f);letter-spacing:-.04em;display:block;font-variant-numeric:tabular-nums}
.banda .chica{font:700 15px/1.2 var(--f);opacity:.92;display:block;margin-top:6px;padding:0 16px}
@keyframes banda{from{opacity:0;transform:rotate(-4deg) translateY(26px) scale(.9)}to{opacity:1;transform:rotate(-4deg)}}

/* ===================== FINAL Y REPASO ===================== */
#final{justify-content:center;text-align:center}
.puntazo{font:800 clamp(66px,24vw,120px)/1 var(--f);letter-spacing:-.05em;color:var(--honey);
  font-variant-numeric:tabular-nums;animation:pop .5s var(--ease-pop)}
.sub{font:600 12px/1 var(--f);letter-spacing:.14em;text-transform:uppercase;color:var(--on-ink-2);margin:8px 0 22px}
/* Lo que la trivia enseña vive ACÁ, al final, no entre pregunta y pregunta. */
#repaso{overflow-y:auto;gap:10px}
#repaso h2{font:800 26px/1.1 var(--f);letter-spacing:-.02em;margin:4px 0 2px;text-align:center;flex:none}
#repaso .lista{overflow-y:auto;display:grid;gap:10px;padding:2px 0}
.item{background:rgba(255,255,255,.13);border-radius:14px;padding:14px 16px;text-align:left}
.item .q{font:700 15px/1.3 var(--f);color:var(--on-ink-2);margin:0 0 8px}
.item .f{font:800 17px/1.25 var(--f);color:var(--blanco);border-left:3px solid var(--honey);padding-left:11px;margin:0 0 8px}
.item p{margin:0;font-size:15px;line-height:1.45;color:var(--on-ink-2)}
.item .estado{float:right;font-size:17px;margin-left:8px}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition-duration:.01ms!important}
}

/* ===================== SALA DE ESPERA (modo en vivo) =====================
   Entre pregunta y pregunta, y mientras la sala se llena. Lo que importa acá
   es sentir que hay gente del otro lado: por eso se ven los apodos. */
#espera{justify-content:center;text-align:center}
.espera-centro{display:flex;flex-direction:column;align-items:center;gap:10px}
.espera-gente{display:inline-flex;align-items:center;gap:8px;font:700 13px/1 var(--f);
  letter-spacing:.04em;text-transform:uppercase;color:var(--honey);
  background:rgba(242,169,59,.14);border-radius:999px;padding:8px 15px}
#espera h2{font:800 clamp(28px,8vw,44px)/1.05 var(--f);letter-spacing:-.03em;color:var(--blanco);margin:6px 0 0}
.espera-sub{font-size:17px;color:var(--on-ink-2);max-width:26ch}
.espera-cuenta{font:800 clamp(64px,22vw,110px)/1 var(--f);color:var(--honey);
  font-variant-numeric:tabular-nums;animation:pop .4s var(--ease-pop)}
.espera-sala{display:flex;flex-wrap:wrap;gap:7px;justify-content:center;margin-top:14px;max-height:30dvh;overflow:hidden}
.jug-chip{background:rgba(255,255,255,.17);border-radius:7px;padding:7px 12px;font:700 14px/1 var(--f);color:var(--on-ink)}

/* Aviso de "hay vivo ahora" en la puerta */
.vivo-aviso{display:inline-flex;align-items:center;gap:9px;margin:0 auto 18px;
  font:700 14px/1 var(--f);color:#fff;background:#C0392B;border-radius:999px;padding:9px 16px}
.vivo-aviso i{width:9px;height:9px;border-radius:50%;background:#fff;animation:latirVivo 1.4s ease-in-out infinite}
@keyframes latirVivo{0%,100%{opacity:1}50%{opacity:.3}}

/* Podio del final (en vivo) */
.podio{display:grid;gap:7px;margin:0 0 22px;width:100%}
.pod{display:flex;align-items:center;gap:12px;background:rgba(255,255,255,.14);border-radius:10px;padding:11px 14px}
.pod b{font:800 16px/1 var(--f);color:var(--honey);min-width:22px;text-align:center}
.pod span{flex:1;text-align:left;font:700 15px/1 var(--f);color:var(--on-ink)}
.pod em{font-style:normal;font:800 16px/1 var(--f);color:var(--on-ink);font-variant-numeric:tabular-nums}
.pod.yo{background:var(--honey);color:var(--ink)}
.pod.yo b,.pod.yo span,.pod.yo em{color:var(--ink)}

/* ===================== LA TARJETA DEL EMAIL =====================
   Vive en la sala de espera, nunca encima de una pregunta. El texto de la
   casilla es explícito a propósito: va tildada, así que tiene que leerse. */
.tarjeta-mail{width:100%;max-width:420px;margin:18px auto 0;background:rgba(7,22,58,.42);
  border:1px solid rgba(255,255,255,.18);border-radius:16px;padding:18px;text-align:left;
  display:flex;flex-direction:column;gap:10px}
.tarjeta-mail h3{font:800 20px/1.15 var(--f);letter-spacing:-.02em;color:var(--blanco);margin:0}
.tarjeta-mail p{font-size:14px;line-height:1.45;color:var(--on-ink-2);margin:0}
.tarjeta-mail input[type=email],.tarjeta-mail input[type=text]{width:100%;font:600 17px/1.2 var(--f);
  color:var(--ink);background:var(--blanco);border:2px solid transparent;border-radius:10px;padding:13px 14px}
.tarjeta-mail input:focus{outline:none;border-color:var(--honey)}
.mail-check{display:flex;gap:10px;align-items:flex-start;font-size:13px;line-height:1.4;color:var(--on-ink-2);cursor:pointer}
.mail-check input{width:20px;height:20px;flex:none;accent-color:var(--honey);margin:1px 0 0}
.tarjeta-mail .boton{padding:15px;font-size:18px}
.mail-no{font:600 14px/1 var(--f);color:var(--on-ink-2);text-decoration:underline;text-underline-offset:4px;padding:6px}
.mail-error{color:#FF9F86;font-size:13.5px;font-weight:600}

/* ===================== MARCADOR ENTRE RONDAS =====================
   Aparece después de cada reveal. Es la mitad de la tensión del juego: ver si
   subiste. Se muestra TU fila siempre, aunque estés lejos del podio, y nunca
   los puestos de abajo: nadie necesita ver que va último entre los últimos. */
.marcador{width:100%;max-width:420px;margin:16px auto 0;display:flex;flex-direction:column;gap:10px}
.marcador-yo{font:800 clamp(20px,5.6vw,27px)/1.2 var(--f);letter-spacing:-.02em;color:var(--blanco);
  text-align:center;margin:0}
.marcador-yo b{color:var(--honey)}
.marcador-tabla{display:grid;gap:6px}
.fila{display:flex;align-items:center;gap:12px;background:rgba(255,255,255,.14);
  border-radius:10px;padding:11px 14px;animation:entraFila .35s var(--ease) both}
.fila b{font:800 15px/1 var(--f);color:var(--honey);min-width:22px;text-align:center}
.fila span{flex:1;text-align:left;font:700 15px/1 var(--f);color:var(--on-ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fila em{font-style:normal;font:800 16px/1 var(--f);color:var(--on-ink);font-variant-numeric:tabular-nums}
.fila.yo{background:var(--honey)}
.fila.yo b,.fila.yo span,.fila.yo em{color:var(--ink)}
.fila.sube b::after{content:" ▲";font-size:11px;color:#6BCB77}
@keyframes entraFila{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* Botón de silencio: siempre a mano, porque mucha gente va a estar mirando el
   vivo en la misma pantalla y no quiere dos audios encima. */
.mute{flex:none;width:30px;height:30px;display:grid;place-items:center;border-radius:8px;
  color:var(--on-ink-2);opacity:.75}
.mute:hover{background:rgba(255,255,255,.16);opacity:1}
.mute svg{width:18px;height:18px}
.mute[aria-pressed="true"]{color:var(--coral)}
.mute[aria-pressed="true"] .onda{display:none}
.mute[aria-pressed="true"]::after{content:"";position:absolute;width:22px;height:2px;
  background:currentColor;transform:rotate(-45deg);border-radius:2px}
.mute{position:relative}

/* ===================== EN QUÉ MODO ESTOY =====================
   Hay dos modos y se parecen: en vivo (con sala y host) y práctica (uno solo).
   Si no se dice cuál es, el que entra a practicar cree que el juego en vivo
   arrancó sin que nadie lo active. Se dice en la puerta y durante el juego. */
.modo-aviso{font-size:15px;line-height:1.45;color:var(--on-ink-2);margin:0 auto 20px;
  max-width:30ch;background:rgba(7,22,58,.4);border-radius:12px;padding:12px 16px}
.modo-aviso b{color:var(--blanco)}
.sello-practica{position:absolute;top:calc(8px + env(safe-area-inset-top));left:50%;
  transform:translateX(-50%);z-index:4;
  font:800 10px/1 var(--f);letter-spacing:.14em;text-transform:uppercase;
  color:var(--az-oscuro);background:var(--on-ink-2);border-radius:0 0 8px 8px;padding:5px 12px 6px}

/* ============================================================================
   PARIDAD CON LA PANTALLA DEL VIVO.
   El jugador tenía menos marco que el administrador: sin barra, sin contador de
   gente, sin barra de progreso. Se veía como otra aplicación. Ahora las dos
   comparten el mismo marco; lo que cambia es la disposición interna, porque en
   el teléfono la pregunta va abajo (zona del pulgar) y en pantalla ancha arriba.
   ============================================================================ */
.barra{position:fixed;top:0;left:0;right:0;z-index:6;height:clamp(44px,6dvh,62px);
  background:var(--az-oscuro);display:flex;align-items:center;justify-content:space-between;
  gap:12px;padding:0 clamp(10px,2vw,22px) 0 calc(10px + env(safe-area-inset-left))}
.barra .izq,.barra .der{display:flex;align-items:center;gap:clamp(6px,1.4vw,14px);flex:1;min-width:0}
.barra .der{justify-content:flex-end}
.marca-vivo{font:800 clamp(13px,3.4vw,19px)/1 var(--f);letter-spacing:-.02em;white-space:nowrap;color:var(--blanco)}
.marca-vivo em{font-style:normal;color:var(--honey)}
.barra .chip{display:flex;align-items:center;gap:6px;font:800 clamp(13px,2.4dvh,17px)/1 var(--f);
  color:var(--blanco);font-variant-numeric:tabular-nums}
.barra .chip svg{width:1.2em;height:1.2em;opacity:.85}
.barra .puntos-chip{color:var(--honey)}
.barra .icono{display:grid;place-items:center;width:clamp(28px,4.6dvh,36px);aspect-ratio:1;
  border-radius:8px;color:var(--blanco);opacity:.8;position:relative}
.barra .icono:hover{background:rgba(255,255,255,.14);opacity:1}
.barra .icono svg{width:58%;height:58%}
.barra .icono[aria-pressed="true"]{color:var(--coral)}
.barra .icono[aria-pressed="true"] .onda{display:none}
.barra .icono[aria-pressed="true"]::after{content:"";position:absolute;width:20px;height:2px;
  background:currentColor;transform:rotate(-45deg);border-radius:2px}
/* Con la barra puesta, las pantallas arrancan más abajo. */
body.con-barra .pantalla{padding-top:calc(clamp(44px,6dvh,62px) + 8px + env(safe-area-inset-top))}

/* Barra de progreso al pie, igual que en la pantalla del vivo. */
.progreso{position:fixed;left:0;right:0;bottom:0;height:7px;z-index:6;background:rgba(0,0,0,.25)}
.progreso i{display:block;height:100%;width:0;background:var(--honey);
  border-radius:0 999px 999px 0;transition:width .4s var(--ease)}

/* El reloj y "cuántos respondieron", a los costados. En el teléfono están
   ocultos (el reloj vive en la barra de abajo, que es lo de Kahoot móvil);
   aparecen cuando hay ancho de sobra, como en la pantalla del vivo. */
.medio{display:contents}
.reloj-lado,.respuestas-lado{display:none}

@media (min-width:900px) and (min-height:520px){
	/* En pantalla ancha la pregunta va ARRIBA, igual que en la pantalla del
	   vivo: acá no hay pulgar que justifique tenerla abajo, y así las dos
	   pantallas se leen igual. En el teléfono sigue abajo. */
	#juego.on{grid-template-areas:"top top top" "pregunta pregunta pregunta"
	  "reloj ilustra resp" "grid grid grid" "tiempo tiempo tiempo";
	  grid-template-columns:auto minmax(0,1fr) auto;
	  grid-template-rows:auto auto minmax(0,1fr) auto auto;
	  column-gap:clamp(12px,2.4vw,34px)}
	.medio{display:contents}
	#juego .ilustra{grid-area:ilustra}
	/* El reloj, armado igual que "respondieron": la caja con el número y el
	   rótulo "segundos" abajo. */
	.reloj-lado{grid-area:reloj;display:flex;flex-direction:column;align-items:center;
	  justify-content:center;gap:7px;align-self:center}
	.reloj-lado b{display:grid;place-items:center;
	  background:var(--az-oscuro);border-radius:50%;width:clamp(76px,9vw,124px);aspect-ratio:1;
	  font:800 clamp(30px,3.4vw,52px)/1 var(--f);color:var(--blanco);font-variant-numeric:tabular-nums}
	.reloj-lado.urgente b{background:#B3261E;animation:latir 1s steps(1,end) infinite}
	.reloj-lado span{background:var(--az-oscuro);border-radius:7px;padding:5px 11px;
	  font:800 11px/1 var(--f);letter-spacing:.06em;text-transform:uppercase;color:var(--on-ink-2)}
	.respuestas-lado{grid-area:resp;display:flex;flex-direction:column;align-items:center;
	  justify-content:center;gap:7px;align-self:center}
	.respuestas-lado b{background:var(--az-oscuro);border-radius:50%;width:clamp(76px,9vw,124px);
	  aspect-ratio:1;display:grid;place-items:center;font:800 clamp(30px,3.4vw,52px)/1 var(--f);
	  color:var(--blanco);font-variant-numeric:tabular-nums}
	.respuestas-lado span{background:var(--az-oscuro);border-radius:7px;padding:5px 11px;
	  font:800 11px/1 var(--f);letter-spacing:.06em;text-transform:uppercase;color:var(--on-ink-2)}
	/* Con el reloj grande al costado, la barra de abajo se vuelve un hilo. */
	.tiempo{height:10px}
	.tiempo b{display:none}
	.pregunta{font-size:clamp(22px,2.6vw,38px)}
	.op{font-size:clamp(16px,1.9vw,26px)}
}

/* La fila de arriba del juego quedó sin función: el puntaje vive en la barra y
   el progreso en la de abajo. Se saca y ese espacio va a la imagen. */
#juego .top{display:none}
#juego.on{grid-template-areas:"ilustra" "pregunta" "grid" "tiempo";
  grid-template-rows:minmax(0,1fr) auto auto auto}
@media (max-height:600px){
	#juego.on{grid-template-areas:"pregunta" "grid" "tiempo";
	  grid-template-rows:auto minmax(0,1fr) auto}
}
@media (min-width:900px) and (min-height:520px){
	#juego.on{grid-template-areas:"pregunta pregunta pregunta" "reloj ilustra resp"
	  "grid grid grid" "tiempo tiempo tiempo";
	  grid-template-columns:auto minmax(0,1fr) auto;
	  grid-template-rows:auto minmax(0,1fr) auto auto}
}
@media (max-height:480px) and (min-width:640px) and (orientation:landscape){
	#juego.on{grid-template-areas:"pregunta grid" "tiempo tiempo";
	  grid-template-rows:minmax(0,1fr) auto;
	  grid-template-columns:minmax(0,1fr) minmax(0,1.1fr)}
}
/* La racha, al lado del puntaje en la barra. */
.barra .racha-chip{font:800 11px/1 var(--f);color:var(--honey);background:rgba(242,169,59,.2);
  border-radius:999px;padding:5px 9px;white-space:nowrap}

/* ---------- Cuánto falta para arrancar (lobby del jugador) ----------
   Es lo que sostiene al que entró temprano: sin un número que baje, la espera
   se siente infinita y se van. Va debajo del subtítulo y arriba de la sala. */
.espera-arranca{display:flex;flex-direction:column;align-items:center;gap:2px;margin:4px 0 2px}
.espera-arranca span{font:700 12px/1 var(--f);letter-spacing:.09em;text-transform:uppercase;color:var(--on-ink-2)}
.espera-arranca b{font:800 clamp(38px,13vw,62px)/1 var(--f);color:var(--honey);font-variant-numeric:tabular-nums}
.espera-arranca b.ya{font-size:clamp(19px,5.5vw,26px);line-height:1.2;text-align:center}

/* Ranking parcial: la línea de lo que le pasó al jugador y el aliento abajo. */
.marcador-yo small{display:block;margin-top:7px;font:600 clamp(14px,4vw,17px)/1.4 var(--f);letter-spacing:0;color:#526e7c}
.marcador-yo .mov-sube{color:#1c6b44;white-space:nowrap}
.marcador-yo .mov-baja{color:#a63d24;white-space:nowrap}

/* El cartel ("¡Listo!", "+150") es sólo informativo: con la respuesta cambiable,
   no puede quedar encima de una opción y comerse el toque. */
.banda{pointer-events:none}

/* Los botones del final se alternan con `hidden` (práctica: jugar de nuevo /
   elegir otra; vivo: cerrar). .boton tiene display propio y le ganaba al atributo. */
#final [hidden]{display:none!important}