/* Pantalla de tele. Un solo tema a propósito: esto es un tablero de
   concurso, no un documento, así que se pinta todo explícito y no se
   consulta prefers-color-scheme. Las medidas van en vh porque la tele es
   apaisada y el tablero debe llenar el alto exacto sin scroll. */

:root {
  --noche: #060C24;
  --noche-2: #0F1E52;
  --panel: #1B2C6E;
  --panel-alto: #2A44A6;
  --borde: #4763C9;
  --oro: #F7C13E;
  --oro-claro: #FFDC83;
  --oro-hondo: #9C6A08;
  --crema: #FFF6E0;
  --rosa: #FF4E8A;
  --rojo: #E8403C;
  --display: "Arial Black", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

body {
  background: var(--noche);
  background: radial-gradient(ellipse at 50% 0%, var(--noche-2) 0%, var(--noche) 70%);
  color: var(--crema);
  font-family: var(--display);
  -webkit-font-smoothing: antialiased;
}

/* --- portada de arranque ------------------------------------------------ */

#portada {
  position: fixed;
  z-index: 50;
  top: 0; left: 0; right: 0; bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: radial-gradient(ellipse at 50% 40%, var(--noche-2) 0%, var(--noche) 75%);
}

#portada > * + * { margin-top: 4vh; }

#portada.oculta { display: none; }

#empezar {
  font-family: inherit;
  font-size: 3.4vh;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--noche);
  background: linear-gradient(180deg, var(--oro-claro), var(--oro));
  border: 0.4vh solid var(--oro-claro);
  border-radius: 1.4vh;
  padding: 2.2vh 5vh;
  cursor: pointer;
  box-shadow: 0 1.2vh 0 var(--oro-hondo), 0 2vh 4vh rgba(0,0,0,0.5);
}

/* Dos reglas separadas y NO una lista con comas: si un navegador no conoce
   :focus-visible, descarta la lista entera y el botón se queda sin ningún
   indicador de foco. En una tele eso importa, porque se navega con el control
   remoto y hay que ver qué está seleccionado antes de dar OK. */
#empezar:focus {
  outline: 0.5vh solid var(--rosa);
  outline-offset: 0.8vh;
}

#empezar:focus-visible {
  outline: 0.5vh solid var(--rosa);
  outline-offset: 0.8vh;
}

#empezar:active {
  transform: translateY(0.6vh);
  box-shadow: 0 0.6vh 0 var(--oro-hondo);
}

#portada .ayuda {
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-size: 2vh;
  color: rgba(255, 246, 224, 0.55);
}

/* --- estructura --------------------------------------------------------- */

#tablero { height: 100%; }

.lienzo {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 2.5vh 3vw;
}

.lienzo > * + * { margin-top: 2vh; }

/* --- cabecera ----------------------------------------------------------- */

.cabecera {
  flex: 0 0 auto;
  min-height: 12vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.marca {
  margin: 0;
  font-size: 6vh;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--oro);
  text-shadow: 0 0.5vh 0 var(--oro-hondo), 0 1.4vh 3vh rgba(0,0,0,0.6);
}

.marca span { color: var(--rosa); }

.pregunta {
  margin: 0;
  max-width: 88vw;
  font-size: 4.6vh;
  line-height: 1.22;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--crema);
  text-shadow: 0 0.4vh 2vh rgba(0,0,0,0.7);
}

/* --- rejilla de respuestas ---------------------------------------------- */

.tablero {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: stretch;
  justify-content: center;
}

/* Una sola columna, de la más dicha a la menos dicha. La fila ocupa casi
   todo el ancho, así que hasta las respuestas largas caben en un renglón. */
.rejilla {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  width: 84vw;
  max-width: 84vw;
}

.rejilla .casilla + .casilla { margin-top: 1.2vh; }

/* El alto lo reparte flex:1 en cada casilla; las clases filas-N solo quedan
   para ajustar la tipografía cuando hay muchas respuestas. */

.casilla {
  position: relative;
  flex: 1 1 0;
  display: flex;
  align-items: center;
  border-radius: 1vh;
  overflow: hidden;
  min-height: 0;
}

.casilla.cerrada {
  justify-content: center;
  background: linear-gradient(180deg, var(--panel-alto), var(--panel));
  border: 0.35vh solid var(--borde);
  box-shadow: inset 0 0.6vh 1.6vh rgba(255,255,255,0.14),
              inset 0 -0.8vh 1.6vh rgba(0,0,0,0.45);
}

.casilla.cerrada .numero {
  font-size: 5.2vh;
  color: var(--oro);
  text-shadow: 0 0.4vh 0 var(--oro-hondo);
}

.casilla.abierta {
  justify-content: space-between;
  padding: 0 0 0 2.2vw;
  background: linear-gradient(180deg, var(--oro-claro), var(--oro));
  border: 0.35vh solid var(--oro-claro);
  box-shadow: inset 0 -0.8vh 1.6vh rgba(0,0,0,0.22);
}

.casilla.abierta .texto {
  flex: 1 1 auto;
  margin-right: 1.5vw;
  font-size: 3.4vh;
  /* Holgado a propósito: en español las mayúsculas acentuadas y la Ñ
     tienen marcas altas que se pegan a la línea de arriba al envolver. */
  line-height: 1.22;
  text-transform: uppercase;
  color: var(--noche);
  overflow: hidden;
}

.casilla.abierta .puntos {
  flex: 0 0 auto;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 7vw;
  font-size: 4.2vh;
  font-variant-numeric: tabular-nums;
  color: var(--oro);
  background: linear-gradient(180deg, var(--panel), var(--noche-2));
  border-left: 0.35vh solid var(--oro-hondo);
}

.vacio {
  align-self: center;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-size: 3vh;
  color: rgba(255, 246, 224, 0.6);
  text-align: center;
}

/* --- pie: marcadores y bote --------------------------------------------- */

/* Tres columnas en UNA fila: equipo 1 | bote | equipo 2.
   Se usa `display: table` y no Grid ni flexbox. Suena anticuado y es
   deliberado: este es el único bloque del tablero que se ROMPE si el
   navegador no entiende la propiedad —los tres divs vuelven a ser bloques y
   se apilan—, y el navegador de una smart TV puede ser de cualquier año.
   Grid es de 2017 y flexbox de 2013; las tablas CSS son de 2005 y no hay
   navegador que las ignore. La separación va con `border-spacing` por la
   misma razón que no se usa `gap`, que en flexbox solo llegó en 2020. */
.pie {
  flex: 0 0 auto;
  display: table;
  table-layout: fixed;
  width: 84vw;
  margin-left: auto;
  margin-right: auto;
  border-collapse: separate;
  border-spacing: 1vw 0;
}

.equipo {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

.equipo .nombre {
  margin: 0 0 0.4vh;
  max-width: 100%;
  font-size: 2.4vh;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--rosa);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.equipo .marcador {
  margin: 0;
  font-size: 7.5vh;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--crema);
  text-shadow: 0 0.5vh 2vh rgba(0, 0, 0, 0.6);
}

/* El bote es lo único que cambia en cada respuesta revelada, así que se lleva
   la caja elevada y la cifra más grande. */
.bote {
  display: table-cell;
  vertical-align: middle;
  width: 34%;
  text-align: center;
  padding: 1.2vh 2vw;
  border-radius: 1.4vh;
  background: linear-gradient(180deg, var(--panel-alto), var(--panel));
  border: 0.35vh solid var(--borde);
  box-shadow: inset 0 0.6vh 1.6vh rgba(255, 255, 255, 0.12);
}

.bote .etiqueta {
  margin: 0;
  font-size: 2.2vh;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--oro-claro);
}

.bote .mult { color: var(--rosa); letter-spacing: 0; }

.bote .cifra {
  margin: 0;
  font-size: 8vh;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--oro);
  text-shadow: 0 0.5vh 0 var(--oro-hondo);
}

/* --- strikes ------------------------------------------------------------ */

/* Marca persistente: cuántos strikes lleva la ronda. */
.strikes {
  position: fixed;
  top: 2.5vh;
  right: 3vw;
  display: flex;
  opacity: 0;
}

.strikes .tache + .tache { margin-left: 1vw; }
.strikes.visibles { opacity: 1; }
.strikes .tache {
  font-size: 5vh;
  line-height: 1;
  color: var(--rojo);
  text-shadow: 0 0 2vh rgba(232, 64, 60, 0.8);
}

/* Golpe: el destello grande del momento en que se marca el strike. Es
   transitorio y lo dispara el JS, no el estado del servidor. */
#golpe {
  position: fixed;
  z-index: 40;
  top: 0; left: 0; right: 0; bottom: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(6, 12, 36, 0.72);
  pointer-events: none;
}
#golpe.activo { display: flex; }
#golpe span + span { margin-left: 4vw; }
#golpe span {
  font-size: 34vh;
  line-height: 1;
  color: var(--rojo);
  text-shadow: 0 0 6vh rgba(232, 64, 60, 0.9);
  animation: golpear 0.4s ease-out;
}

@keyframes golpear {
  0%   { transform: scale(2.6); opacity: 0; }
  55%  { transform: scale(0.92); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

/* --- animación de revelado ---------------------------------------------- */

/* Solo 2D: transform-style/backface en 3D es lo primero que se rompe en el
   navegador de una smart TV. Un aplastado vertical se lee igual de bien
   como "la tarjeta gira". */
@keyframes revelar {
  0%   { transform: scaleY(1); }
  45%  { transform: scaleY(0.04); }
  55%  { transform: scaleY(0.04); }
  100% { transform: scaleY(1); }
}

.casilla.revelando { animation: revelar 0.42s ease-in-out; }

@media (prefers-reduced-motion: reduce) {
  .casilla.revelando { animation: none; }
  #golpe span { animation: none; }
}

/* --- señal de conexión --------------------------------------------------- */

/* Discreto a propósito: solo se nota si algo va mal. */
#senal {
  position: fixed;
  left: 1vw;
  bottom: 1.2vh;
  width: 1.1vh;
  height: 1.1vh;
  border-radius: 50%;
  background: rgba(120, 220, 150, 0.35);
}
#senal.caido { background: var(--rojo); box-shadow: 0 0 1.5vh var(--rojo); }

/* --- turno y robo -------------------------------------------------------- */

/* Quién está jugando la ronda. Discreto: es contexto, no el evento. */
.equipo.turno .nombre { color: var(--oro-claro); }

.equipo.turno .nombre::before {
  content: "▸ ";
  color: var(--oro);
}

.equipo.turno .marcador {
  text-shadow: 0 0 3vh rgba(247, 193, 62, 0.55), 0 0.5vh 2vh rgba(0, 0, 0, 0.6);
}

/* El aviso del tercer strike va ENTRE el tablero y los marcadores, no encima
   de la pregunta: el equipo que va a robar necesita seguir leyéndola. */
.aviso-robo {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.2vh 2vw;
  border-radius: 1vh;
  background: linear-gradient(180deg, #C7302C, #8E1F1C);
  border: 0.35vh solid var(--rojo);
  box-shadow: 0 0 4vh rgba(232, 64, 60, 0.5);
  animation: latir 1.4s ease-in-out infinite;
}

.aviso-robo span {
  font-size: 3.4vh;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--crema);
  text-align: center;
}

@keyframes latir {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.72; }
}

@media (prefers-reduced-motion: reduce) {
  .aviso-robo { animation: none; }
}

/* --- respuesta repetida --------------------------------------------------- */

/* La casilla ya está abierta, así que no puede "revelarse" otra vez: se
   sacude y se apaga un instante, que se lee como "esa ya salió" sin
   confundirse con el volteo del revelado. */
@keyframes repetir {
  0%, 100% { transform: translateX(0); filter: none; }
  20%      { transform: translateX(-1.2vw); filter: brightness(0.6); }
  50%      { transform: translateX(1.2vw); filter: brightness(0.6); }
  80%      { transform: translateX(-0.5vw); filter: brightness(0.85); }
}

.casilla.repetida { animation: repetir 0.5s ease-in-out; }

@media (prefers-reduced-motion: reduce) {
  .casilla.repetida { animation: none; }
}

/* Con muchas respuestas el alto por fila se aprieta, así que la tipografía
   baja para que un renglón siga entrando cómodo. Se escala por número de
   filas y no con clamp() porque el navegador de una smart TV puede ser
   viejo y clamp() es de 2020. */
.filas-7 .casilla.abierta .texto,
.filas-8 .casilla.abierta .texto { font-size: 2.9vh; }

.filas-7 .casilla.abierta .puntos,
.filas-8 .casilla.abierta .puntos { font-size: 3.4vh; }

.filas-7 .casilla.cerrada .numero,
.filas-8 .casilla.cerrada .numero { font-size: 4vh; }

.filas-7 .casilla + .casilla,
.filas-8 .casilla + .casilla { margin-top: 0.9vh; }