/* =======================================================================
   TRES ACORDLES — estilos
   Paleta, tipografías y estética de amplificador: se conservan del MVP.
   ======================================================================= */
:root{
  --bordo:#2B0F16;
  --bordo-2:#3B1A22;
  --bordo-3:#4A2029;
  --parlante:#190A0E;
  --crema:#F0E3CC;
  --crema-dim:#C4AE94;
  --mostaza:#E7A72A;
  --oliva:#9CB03C;

  /* Sacados de los clips: en la serie el 20,7% de los píxeles es negro de
     contorno, y los acentos que más pesan son el rojo, el crema cálido y el
     azul. De ahí el trazo grueso y las sombras duras de toda la página. */
  --tinta:#000;
  --rojo:#A81800;
  --rojo-claro:#D02800;
  --crema-calido:#FFD8A8;
  --azul:#306090;
  --rosa:var(--rojo);

  --trazo:3px;
  --radio:6px;
  --display:"Alfa Slab One", Georgia, serif;
  --ui:"Archivo", "Helvetica Neue", Arial, sans-serif;

  /* Con clips propios no hay chrome ajeno que recortar: imagen entera. */
  --overescaneo:1;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bordo);
  background-image:
    repeating-linear-gradient(0deg, rgba(0,0,0,.18) 0 1px, transparent 1px 4px);
  color:var(--crema);
  font-family:var(--ui);
  font-size:16px;
  line-height:1.5;
  min-height:100vh;
  padding:24px 16px 64px;
  padding-bottom:calc(64px + env(safe-area-inset-bottom));
  -webkit-text-size-adjust:100%;
}
.wrap{max-width:640px;margin:0 auto}

/* ---------- cabecera ---------- */
header{text-align:center;margin-bottom:22px}
h1{
  font-family:var(--display);
  font-size:clamp(34px,10vw,58px);
  line-height:.88;
  margin:0;
  color:var(--mostaza);
  letter-spacing:-.01em;
  -webkit-text-stroke:3px var(--tinta);
  paint-order:stroke fill;
  text-shadow:5px 5px 0 var(--tinta);
}
h1 span{display:block}
h1 .l1{font-size:.52em;color:var(--crema);transform:rotate(-2deg)}
h1 .l2{transform:rotate(-2deg)}
.bajada{margin:10px 0 0;color:var(--crema-dim);font-size:15px}
.numero-dia{margin:6px 0 0;color:var(--mostaza);font-size:13px;font-weight:600;letter-spacing:.04em}
.numero-dia .prueba{color:var(--rosa);font-weight:700}

/* ---------- amplificador ---------- */
.amp{
  background:var(--bordo-2);
  border:var(--trazo) solid var(--tinta);
  border-radius:var(--radio);
  box-shadow:6px 6px 0 var(--tinta);
  padding:14px;
}
.grilla{
  position:relative;
  aspect-ratio:16/9;
  background:var(--parlante);
  border:var(--trazo) solid var(--tinta);
  border-radius:4px;
  overflow:hidden;
}

/* El pozo del video: siempre debajo de la tapa. Nunca display:none ni
   visibility:hidden — algunos navegadores móviles no reproducen medios
   en subárboles ocultos. Se oculta tapándolo, no apagándolo. */
.pozo{
  position:absolute;inset:0;z-index:0;
  transform:scale(var(--overescaneo));
  transform-origin:center;
  background:var(--parlante);
}
.pozo video{
  position:absolute;inset:0;width:100%;height:100%;border:0;
  object-fit:cover;background:var(--parlante);
  pointer-events:none;   /* que no se pueda pausar ni sacar por click */
}

/* La tapa es la grilla del parlante del MVP: opaca, con el visualizador adentro. */
.tapa{
  position:absolute;inset:0;z-index:2;
  background:var(--parlante);
  background-image:repeating-linear-gradient(45deg, rgba(240,227,204,.05) 0 1px, transparent 1px 5px),
                   repeating-linear-gradient(-45deg, rgba(240,227,204,.05) 0 1px, transparent 1px 5px);
  display:flex;align-items:center;justify-content:center;
  /* Sin transición al volver a tapar: el destape se desvanece, el tapado es
     instantáneo (ver .mostrando). */
  transition:none;
}
/* La tapa se levanta solo mientras el video está efectivamente reproduciendo:
   así el cuadro congelado de la pausa tampoco queda a la vista. */
.grilla.revelado.mostrando .tapa{
  opacity:0;pointer-events:none;
  transition:opacity .35s ease;
}

.visualizador{
  display:flex;align-items:flex-end;gap:4px;height:38%;transition:opacity .3s;
}
.visualizador i{
  display:block;width:6px;height:8%;background:var(--mostaza);border-radius:2px;
  opacity:.55;transition:height .09s linear;
}
.aviso{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  padding:24px;text-align:center;font-size:15px;color:var(--crema);
  background:var(--parlante);
}
.aviso[hidden]{display:none}

.cartel{
  position:absolute;z-index:3;bottom:10px;left:12px;right:12px;
  display:flex;justify-content:space-between;align-items:center;
  font-size:12px;color:var(--crema-dim);
  text-shadow:0 1px 3px rgba(0,0,0,.9);
  pointer-events:none;
}
.cartel b{color:var(--mostaza);font-weight:600}

/* ---------- barra de pista ---------- */
.pista{margin-top:14px}
.barra{
  position:relative;height:18px;background:var(--parlante);border-radius:3px;overflow:hidden;
  border:var(--trazo) solid var(--tinta);
  display:flex;
}
.barra .tramo{flex:0 0 auto;border-right:2px solid var(--tinta);background:rgba(240,227,204,.09)}
.barra .tramo:last-child{border-right:0}
.barra .tramo.abierto{background:var(--mostaza);opacity:.8}
.barra .cabeza{
  position:absolute;top:0;bottom:0;width:2px;background:var(--crema);left:0;
  opacity:0;
}
.barra .cabeza.sonando{opacity:1}
.tiempos{display:flex;justify-content:space-between;font-size:11px;color:var(--crema-dim);margin-top:5px}

.controles{display:flex;gap:10px;margin-top:14px;align-items:center}
button{
  font-family:var(--ui);font-size:15px;font-weight:600;
  border:var(--trazo) solid var(--tinta);border-radius:var(--radio);
  padding:11px 16px;cursor:pointer;
  background:var(--bordo-3);color:var(--crema);
  box-shadow:4px 4px 0 var(--tinta);
  transition:transform .07s ease, box-shadow .07s ease, background .15s ease;
  touch-action:manipulation;
}
button:hover{background:#57262f}
/* se hunde dentro de su propia sombra, como un botón de dibujito */
button:active{transform:translate(4px,4px);box-shadow:0 0 0 var(--tinta)}
button:focus-visible{outline:3px solid var(--mostaza);outline-offset:2px}
button[disabled]{opacity:.4;cursor:not-allowed}
.tocar{
  flex:1;background:var(--mostaza);color:var(--tinta);border-color:var(--tinta);
  font-size:17px;letter-spacing:.01em;
}
.tocar:hover{background:#f4b53c}
.tocar[disabled]:hover{background:var(--mostaza)}
.secundario{background:var(--bordo-2);color:var(--crema-dim);border-color:var(--tinta)}
.secundario:hover{background:var(--bordo-3);color:var(--crema)}

/* ---------- adivinanzas ---------- */
.juego{margin-top:22px}
.buscador{position:relative}
input[type=text]{
  width:100%;font-family:var(--ui);font-size:16px;
  padding:13px 14px;border-radius:var(--radio);
  border:var(--trazo) solid var(--tinta);background:var(--parlante);color:var(--crema);
  box-shadow:4px 4px 0 var(--tinta);
}
input[type=text]::placeholder{color:#7b6357}
input[type=text]:focus{outline:none;border-color:var(--mostaza)}
input[type=text]:disabled{opacity:.5}
.sugerencias{
  position:absolute;z-index:20;left:0;right:0;top:calc(100% + 6px);
  background:var(--bordo-2);border:var(--trazo) solid var(--tinta);border-radius:var(--radio);
  box-shadow:4px 4px 0 var(--tinta);
  max-height:230px;overflow-y:auto;display:none;
  -webkit-overflow-scrolling:touch;
}
.sugerencias.abierta{display:block}
.sugerencias li{
  list-style:none;padding:9px 13px;cursor:pointer;font-size:15px;
  display:flex;gap:9px;align-items:baseline;
}
.sugerencias li .cod{color:var(--mostaza);font-weight:700;font-size:13px;min-width:52px}
.sugerencias li.marcada,.sugerencias li:hover{background:var(--bordo-3)}
.sugerencias ul{margin:0;padding:0}

.fila-acciones{display:flex;gap:10px;margin-top:10px}
.fila-acciones button,.fila-acciones .boton{flex:1}

/* Un <a> que se ve y se comporta como los botones. */
a.boton{
  display:flex;align-items:center;justify-content:center;
  font-family:var(--ui);font-size:15px;font-weight:600;
  border:var(--trazo) solid var(--tinta);border-radius:var(--radio);
  padding:11px 16px;cursor:pointer;text-decoration:none;
  background:var(--bordo-3);color:var(--crema);
  box-shadow:4px 4px 0 var(--tinta);
  transition:transform .07s ease, box-shadow .07s ease, background .15s ease;
  touch-action:manipulation;
}
a.boton:active{transform:translate(4px,4px);box-shadow:0 0 0 var(--tinta)}
a.boton:focus-visible{outline:3px solid var(--mostaza);outline-offset:2px}
a.boton.secundario{background:var(--bordo-2);color:var(--crema-dim);border-color:var(--tinta)}
a.boton.secundario:hover{background:var(--bordo-3);color:var(--crema)}
a.boton[hidden]{display:none}

.intentos{margin-top:16px;display:flex;flex-direction:column;gap:7px}
.intento{
  display:flex;align-items:center;gap:10px;
  padding:10px 12px;border-radius:var(--radio);
  background:var(--bordo-2);
  border:var(--trazo) solid var(--tinta);border-left-width:9px;border-left-color:var(--rojo);
  box-shadow:3px 3px 0 var(--tinta);
  font-size:14px;
}
.intento.temporada{border-left-color:var(--mostaza)}
.intento.acierto{border-left-color:var(--oliva);background:#3b3a1c}
/* Saltear gasta un intento, así que se pinta como un error, no como algo neutro. */
.intento.salteado{border-left-color:var(--rosa);color:var(--crema-dim);font-style:italic}
.intento .cod{color:var(--mostaza);font-weight:700;min-width:52px}
.intento .pista-dir{margin-left:auto;color:var(--crema-dim);font-size:12.5px;white-space:nowrap}

/* ---------- final ---------- */
.final{
  position:relative;
  margin-top:20px;padding:18px;border-radius:var(--radio);
  background:var(--bordo-2);border:var(--trazo) solid var(--tinta);text-align:center;display:none;
  box-shadow:6px 6px 0 var(--tinta);
}
.final.visible{display:block}

/* Al terminar la partida el panel sale flotando, para no tener que scrollear.
   Con la × vuelve a su lugar en la página, debajo de los intentos. */
.velo{
  position:fixed;inset:0;z-index:50;
  background:rgba(12,5,7,.74);
  animation:aparecer .18s ease;
}
.velo[hidden]{display:none}
.final.flotante{
  position:fixed;z-index:51;
  left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(460px, calc(100vw - 28px));
  max-height:calc(100vh - 28px);
  overflow-y:auto;
  margin:0;padding:22px 18px 18px;
  box-shadow:8px 8px 0 var(--tinta), 0 24px 70px rgba(0,0,0,.55);
  animation:asomar .22s cubic-bezier(.2,.9,.3,1.2);
}
@keyframes aparecer{from{opacity:0}to{opacity:1}}
@keyframes asomar{
  from{opacity:0;transform:translate(-50%,-50%) scale(.94)}
  to{opacity:1;transform:translate(-50%,-50%) scale(1)}
}

.cerrar-final{
  display:none;
  position:absolute;top:6px;right:8px;
  width:34px;height:34px;padding:0;line-height:1;
  font-size:22px;font-weight:400;
  background:transparent;border-color:transparent;color:var(--crema-dim);
  box-shadow:none;
}
.cerrar-final:active{transform:none;box-shadow:none}
.final.flotante .cerrar-final{display:block}
.cerrar-final:hover{background:var(--bordo-3);color:var(--crema)}
.cerrar-final:active{transform:none}
.final h2{
  /* el título de 1 intento es largo y grita: que achique y corte solo */
  font-family:var(--display);font-size:clamp(20px,6.2vw,28px);line-height:1.05;
  margin:0 0 8px;color:var(--mostaza);text-wrap:balance;
  -webkit-text-stroke:2px var(--tinta);paint-order:stroke fill;
  text-shadow:2px 2px 0 var(--tinta);
}
.final p{margin:0 0 14px;color:var(--crema-dim)}
.final .respuesta{color:var(--crema);font-size:18px;font-weight:600}
.cuadritos{font-size:22px;letter-spacing:3px;margin:12px 0}
.cuenta-regresiva{margin-top:14px;font-size:13px;color:var(--crema-dim)}
.cuenta-regresiva b{color:var(--mostaza);font-variant-numeric:tabular-nums;font-weight:600}

.racha{text-align:center;margin-top:18px;font-size:13px;color:var(--crema-dim)}
.pie{text-align:center;margin-top:30px;font-size:12px;color:#7b6357;line-height:1.7}
.pie p{margin:0}
.pie a{color:var(--crema-dim);text-decoration:underline}
.pie a:hover{color:var(--mostaza)}

@media (prefers-reduced-motion: reduce){
  *{transition:none !important;animation:none !important}
}
@media (max-width:420px){
  body{padding:18px 12px 48px}
  .final.flotante{padding:20px 14px 14px}
  .final.flotante .fila-acciones{flex-direction:column}
  .intento{flex-wrap:wrap}
  .intento .pista-dir{margin-left:62px}
  .sugerencias{max-height:190px}
}
/* Con el teclado abierto en un celular apaisado queda muy poco alto: la
   lista de sugerencias no puede comerse la pantalla entera. */
@media (max-height:520px){
  .sugerencias{max-height:150px}
}

/* ---------- elección de modo ---------- */
.modo-actual{
  margin:8px 0 0;font-size:13px;color:var(--crema-dim);
  display:flex;gap:8px;align-items:center;justify-content:center;
}
.modo-actual[hidden]{display:none}
.modo-actual #modo-nombre{color:var(--crema);font-weight:600}
button.link{
  background:none;border:0;padding:0;font-size:13px;font-weight:500;
  color:var(--mostaza);text-decoration:underline;cursor:pointer;
}
button.link:hover{background:none;color:#f4b53c}
button.link:active{transform:none}

.portada{display:flex;flex-direction:column;gap:12px}
.portada[hidden]{display:none}
.tarjeta-modo{
  display:flex;flex-direction:column;gap:5px;text-align:left;
  padding:18px;border-radius:var(--radio);
  background:var(--bordo-2);border:var(--trazo) solid var(--tinta);
  box-shadow:6px 6px 0 var(--tinta);
  cursor:pointer;font-family:var(--ui);color:var(--crema);
}
.tarjeta-modo:hover{background:var(--bordo-3)}
.tarjeta-modo:active{transform:translate(6px,6px);box-shadow:0 0 0 var(--tinta)}
.tm-nombre{
  font-family:var(--display);font-size:28px;color:var(--mostaza);line-height:1.1;
  -webkit-text-stroke:2px var(--tinta);paint-order:stroke fill;
  text-shadow:2px 2px 0 var(--tinta);
}
.tarjeta-modo.dificil .tm-nombre{color:var(--rojo-claro)}
.tm-desc{font-size:14px;color:var(--crema-dim);font-weight:400;line-height:1.45}
.tm-estado{font-size:13px;color:var(--crema-dim);margin-top:4px}
.tm-estado b{color:var(--crema);font-weight:600}
.tm-estado .cuadritos-mini{font-size:15px;letter-spacing:2px}
.portada-nota{margin:4px 0 0;text-align:center;font-size:13px;color:#7b6357}

/* =======================================================================
   VARIANTE CLARA — ES LA QUE SE PUBLICA. El <body> lleva class="claro".
   Más cerca de los fondos planos de la serie: el trazo negro grueso recién
   canta sobre un fondo claro, sobre el bordó se pierde.
   Sacándole la clase al <body> vuelve la versión oscura, que queda entera
   más arriba en este archivo.
   ======================================================================= */
body.claro{
  --papel:#EFD9B4;
  --papel-2:#E3C89C;
  --tinta-suave:#4A2B1A;
  background:var(--papel);
  background-image:repeating-linear-gradient(0deg, rgba(74,43,26,.05) 0 1px, transparent 1px 5px);
  color:var(--tinta-suave);
}
body.claro .bajada,
body.claro .portada-nota,
body.claro .pie,
body.claro .modo-actual{color:var(--tinta-suave)}
body.claro .pie a{color:var(--tinta-suave)}
body.claro .pie a:hover{color:var(--rojo)}
body.claro .numero-dia{color:var(--rojo)}
body.claro .modo-actual #modo-nombre{color:var(--tinta)}
body.claro button.link{color:var(--rojo)}

/* el amplificador sigue siendo un fierro oscuro, y ahora contrasta */
body.claro .amp{box-shadow:7px 7px 0 var(--tinta)}
body.claro .tarjeta-modo{
  background:var(--papel-2);color:var(--tinta-suave);
  box-shadow:7px 7px 0 var(--tinta);
}
body.claro .tarjeta-modo:hover{background:#EFD3A6}
body.claro .tm-desc,body.claro .tm-estado{color:var(--tinta-suave)}
body.claro .tm-estado b{color:var(--tinta)}

body.claro .intento{background:var(--papel-2);color:var(--tinta-suave)}
body.claro .intento .pista-dir{color:var(--tinta-suave)}
body.claro .intento.salteado{color:#7a5a44}
body.claro .intento.acierto{background:#CFDC8E}

body.claro .final{background:var(--papel-2);color:var(--tinta-suave)}
body.claro .final p,body.claro .cuenta-regresiva{color:var(--tinta-suave)}
body.claro .final .respuesta{color:var(--tinta)}
body.claro .cerrar-final{color:var(--tinta-suave)}
body.claro .cerrar-final:hover{background:rgba(0,0,0,.08);color:var(--tinta)}

body.claro .secundario,body.claro a.boton.secundario{
  background:var(--papel);color:var(--tinta-suave);
}
body.claro .secundario:hover,body.claro a.boton.secundario:hover{background:#E3C89C;color:var(--tinta)}
body.claro .racha{color:var(--tinta-suave)}
body.claro .sugerencias{background:var(--papel-2)}
body.claro .sugerencias li{color:var(--tinta-suave)}
body.claro .sugerencias li .cod{color:var(--rojo)}
body.claro .sugerencias li.marcada,body.claro .sugerencias li:hover{background:#EFD3A6}
body.claro .velo{background:rgba(43,15,22,.66)}
body.claro .intento .cod{color:var(--rojo)}
body.claro .intento.acierto .cod{color:#4A5A10}
body.claro .intento.acierto,body.claro .intento.acierto .pista-dir{color:#3A4508}
body.claro .final h2{color:var(--mostaza)}
body.claro .cuenta-regresiva b{color:var(--rojo)}
body.claro .tiempos{color:var(--tinta-suave)}