/* ============================================================
   SNOWBALL v14 — interfaz recreativa

   La v13 era un cartel impreso. La v14 es la pantalla de una máquina de
   1988: el juego 3D no cambia, lo que cambia es todo lo que va encima.
   Referencia: la pantalla de título de Snow Bros (Toaplan / Tengen).

   LETRAS       --pixel  Press Start 2P · titulares, botones, etiquetas, HUD.
                         Cada letra mide 1em de ancho: los tamaños se calculan
                         por caracteres, no a ojo.
                --crt    VT323 · el texto corrido y la letra pequeña.
                Anton y Space Grotesk se siguen cargando: las usan las
                texturas del juego (main.js), que no se tocan.
   TITULARES    crema con extrusión morada, como el SNOW BROS. del cartel; la
                palabra que manda, en franjas de hielo (blanco a azul).
   BOTONES      bloques con esquina mordida: el borde es un box-shadow de 4 px
                por cada lado, que deja las cuatro esquinas vacías.
   PANTALLA     líneas de barrido y viñeta de tubo por encima de los menús.
                En partida no hay nada encima del juego.
   MOVIMIENTO   todo va a saltos (steps), nada se desliza.
   ============================================================ */
:root{
  --tinta:#102F49;

  /* ============ v14 · ESCALA TIPOGRÁFICA ============
     Tres letras, cada una con su papel, y pocos tamaños. Si algo no cabe
     aquí, no se inventa un tamaño: se usa uno de estos.
       Silkscreen (--grande / --titulo)  títulos, cifra, DJs, frases destacadas
         --fs-display 16 · --fs-display-l 24 · --fs-titulo · --fs-cifra
       Press Start 2P (--pixel)          botones, etiquetas, tablas, HUD
         --fs-mini 8 · --fs-eti 10 · --fs-boton 14 · --fs-destacado 18 · --fs-marcador 28
       VT323 (--crt)                     texto corrido
         --fs-texto-s 18 · --fs-texto 22 */
  --fs-mini:8px; --fs-eti:10px; --fs-boton:14px; --fs-destacado:18px; --fs-marcador:28px;
  --fs-display:16px; --fs-display-l:24px;
  --fs-texto-s:18px; --fs-texto:22px;
  --fs-titulo:clamp(38px,calc((min(100vw,520px) - 56px) / 6.2),64px);
  --fs-cifra:clamp(74px,calc((min(100vw,520px) - 56px) / 3.7),116px);
  --noche:#0A0A1A;
  --crema:#F2EEDF;
  /* v14: el acento deja de ser naranja y pasa a ser HIELO, el blanco y azul
     de SUPER SNOW. El naranja solo queda dentro del juego 3D. */
  --acento:#4EC3FF;
  --hielo-claro:#CDEFFF;
  --azul-hondo:#16338C;      /* la extrusión azul de las letras del logo */
  --sobre-acento:#0B2A6B;    /* la letra encima de un bloque de hielo */

  /* ---- v14 · los marcos de la diseñadora ----
     Imagen de nueve partes: esquina en dos escalones, borde exterior azul
     noche, línea interior de color y relleno. Se usan con border-image (ver
     .marco más abajo). Una variable por combinación de colores. */
  --marco-hielo:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' shape-rendering='crispEdges'%3E%3Cpath fill='%230B1630' d='M8 0h16v4h4v4h4v16h-4v4h-4v4H8v-4H4v-4H0V8h4V4h4z'/%3E%3Cpath fill='%234EC3FF' d='M8 4h16v4h4v16h-4v4H8v-4H4V8h4z'/%3E%3Crect fill='%230E1B33' x='8' y='8' width='16' height='16'/%3E%3C/svg%3E");
  --marco-ambar:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' shape-rendering='crispEdges'%3E%3Cpath fill='%230B1630' d='M8 0h16v4h4v4h4v16h-4v4h-4v4H8v-4H4v-4H0V8h4V4h4z'/%3E%3Cpath fill='%23F5A83A' d='M8 4h16v4h4v16h-4v4H8v-4H4V8h4z'/%3E%3Crect fill='%230E1B33' x='8' y='8' width='16' height='16'/%3E%3C/svg%3E");
  --marco-crema:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' shape-rendering='crispEdges'%3E%3Cpath fill='%230B1630' d='M8 0h16v4h4v4h4v16h-4v4h-4v4H8v-4H4v-4H0V8h4V4h4z'/%3E%3Cpath fill='%23F2EEDF' d='M8 4h16v4h4v16h-4v4H8v-4H4V8h4z'/%3E%3Crect fill='%230E1B33' x='8' y='8' width='16' height='16'/%3E%3C/svg%3E");
  --marco-apagado:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' shape-rendering='crispEdges'%3E%3Cpath fill='%230B1630' d='M8 0h16v4h4v4h4v16h-4v4h-4v4H8v-4H4v-4H0V8h4V4h4z'/%3E%3Cpath fill='%233A4C70' d='M8 4h16v4h4v16h-4v4H8v-4H4V8h4z'/%3E%3Crect fill='%230E1B33' x='8' y='8' width='16' height='16'/%3E%3C/svg%3E");
  --marco-naranja:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' shape-rendering='crispEdges'%3E%3Cpath fill='%230B1630' d='M8 0h16v4h4v4h4v16h-4v4h-4v4H8v-4H4v-4H0V8h4V4h4z'/%3E%3Cpath fill='%23F26B2B' d='M8 4h16v4h4v16h-4v4H8v-4H4V8h4z'/%3E%3Crect fill='%230E1B33' x='8' y='8' width='16' height='16'/%3E%3C/svg%3E");
  --marco-amarillo:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' shape-rendering='crispEdges'%3E%3Cpath fill='%230B1630' d='M8 0h16v4h4v4h4v16h-4v4h-4v4H8v-4H4v-4H0V8h4V4h4z'/%3E%3Cpath fill='%23FFF3A6' d='M8 4h16v4h4v16h-4v4H8v-4H4V8h4z'/%3E%3Crect fill='%23FFD23F' x='8' y='8' width='16' height='16'/%3E%3C/svg%3E");
  --marco-ambar-lleno:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' shape-rendering='crispEdges'%3E%3Cpath fill='%230B1630' d='M8 0h16v4h4v4h4v16h-4v4h-4v4H8v-4H4v-4H0V8h4V4h4z'/%3E%3Cpath fill='%23FFE3A8' d='M8 4h16v4h4v16h-4v4H8v-4H4V8h4z'/%3E%3Crect fill='%23F5A83A' x='8' y='8' width='16' height='16'/%3E%3C/svg%3E");
  --marco-rosa:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' shape-rendering='crispEdges'%3E%3Cpath fill='%230B1630' d='M8 0h16v4h4v4h4v16h-4v4h-4v4H8v-4H4v-4H0V8h4V4h4z'/%3E%3Cpath fill='%23FF3D8A' d='M8 4h16v4h4v16h-4v4H8v-4H4V8h4z'/%3E%3Crect fill='%230E1B33' x='8' y='8' width='16' height='16'/%3E%3C/svg%3E");
  --marco-tarjeta:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' shape-rendering='crispEdges'%3E%3Cpath fill='%230B1630' d='M8 0h16v4h4v4h4v16h-4v4h-4v4H8v-4H4v-4H0V8h4V4h4z'/%3E%3Cpath fill='%23F2EEDF' d='M8 4h16v4h4v16h-4v4H8v-4H4V8h4z'/%3E%3Crect fill='transparent' x='8' y='8' width='16' height='16'/%3E%3C/svg%3E");
  --flecha-px:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 7' shape-rendering='crispEdges'%3E%3Cpath d='M2 0h5v5h-2V3.4L1.4 7 0 5.6 3.6 2H2z'/%3E%3C/svg%3E");
  --navy:#0E1B33;
  --amarillo:#FFE14D;
  --rosa:#FF3D8A;
  --cian:#6FE6FF;
  --morado:var(--azul-hondo);
  --verde:#137E64; --azul:#267CCA; --roja:#CD3E2D;
  /* el titular de la portada: nueve letras (BRUNCHERS) tienen que caber */
  --t1:clamp(24px,calc((min(100vw,520px) - 56px) / 9.2),46px);
  --t2:clamp(20px,calc((min(100vw,520px) - 56px) / 12),32px);
  --t3:14px;
  --x:24px;
  --gap:14px;
  --px:4px;              /* el píxel de los bordes */
  --pixel:'Press Start 2P','Courier New',monospace;
  --crt:'VT323','Courier New',monospace;
  /* los titulares: píxel grueso y estrecho, como en la maqueta */
  --titulo:'Silkscreen','Press Start 2P',monospace;
  --anton:var(--pixel);
  --sans:var(--pixel);
  --arial:Arial,'Helvetica Neue',sans-serif;
  --safe-t:env(safe-area-inset-top,0px);
  --safe-b:env(safe-area-inset-bottom,0px);
  --filete:rgba(16,47,73,.25);
  /* la extrusión de los titulares, en píxeles duros */
  --extruye:-2px 0 0 var(--noche),2px 0 0 var(--noche),0 -2px 0 var(--noche),0 2px 0 var(--noche),3px 3px 0 var(--morado),5px 5px 0 var(--morado),7px 7px 0 var(--noche);
  /* el contorno del HUD: letra clara que se lee en nieve y de noche */
  --contorno:-2px 0 0 var(--noche),2px 0 0 var(--noche),0 -2px 0 var(--noche),0 2px 0 var(--noche),3px 3px 0 var(--noche);
  /* las franjas de la palabra que manda, de arriba abajo */
  /* las franjas de hielo de SNOW: blanco arriba, azul abajo */
  --escarcha:linear-gradient(180deg,#FFFFFF 0 34%,var(--hielo-claro) 34% 56%,#8FDBFF 56% 76%,var(--acento) 76%);
  --pantallazo:linear-gradient(180deg,#E6FBFF 0 35%,var(--cian) 35% 60%,var(--amarillo) 60%);
}
@media (max-height:700px){:root{--gap:10px}}

*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{width:100%;height:100%;overflow:hidden;background:var(--noche);color:var(--tinta);
  font-family:var(--crt);font-size:var(--fs-texto);line-height:1.1;
  -webkit-font-smoothing:none;-moz-osx-font-smoothing:unset;font-smooth:never;
  touch-action:manipulation;user-select:none;-webkit-user-select:none;overscroll-behavior:none}
button,.pantalla,#hud{touch-action:manipulation}
button{font:inherit;color:inherit;background:none;border:0;border-radius:0;cursor:pointer;text-align:left}
button:focus-visible{outline:3px dashed var(--amarillo);outline-offset:6px}
p{max-width:none}
#lienzo{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none}
#vineta{position:fixed;inset:0;pointer-events:none;z-index:2;
  background:radial-gradient(ellipse at 50% 45%,rgba(0,0,0,0) 55%,rgba(10,10,26,.32) 100%)}
.oculto{display:none !important}

/* ---- las letras ---- */
.titular{font-family:var(--pixel);font-weight:400;text-transform:uppercase;line-height:1.3;letter-spacing:0;text-align:left;
  color:var(--crema);text-shadow:var(--extruye)}
.titular span,.titular em{display:block}
.titular em{font-style:normal;color:var(--acento)}
@supports (-webkit-background-clip:text) or (background-clip:text){
  .titular em:not(.osc){background:var(--escarcha);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
    text-shadow:none;filter:drop-shadow(3px 3px 0 var(--azul-hondo)) drop-shadow(3px 3px 0 var(--noche))}
}
.titular em.osc{color:inherit}
.titular .tachado{position:relative;width:max-content}
/* la raya del tachado: un bloque rosa con su sombra, no una línea fina.
   Cruza por la mitad de la letra y deja leer lo tachado: el chiste es ese. */
.titular .tachado::after{content:'';position:absolute;left:-.12em;right:-.12em;top:.5em;height:.12em;
  background:var(--rosa);box-shadow:2px 2px 0 var(--noche)}
.t1{font-size:var(--fs-titulo)}
.t2{font-size:var(--fs-titulo)}
.t3{font-size:var(--fs-boton)}
.micro{font-family:var(--pixel);font-weight:400;font-size:var(--fs-eti);line-height:1.8;letter-spacing:.04em;text-transform:uppercase}
.naranja{color:var(--acento)}
.apagado{opacity:.6}
p:not(.micro){font-family:var(--crt);font-size:var(--fs-texto);line-height:1.05}

/* ---- la marca ----
   El PNG blanco sobre transparente, de máscara: el color lo pone el fondo. */
.logo{display:block;width:100px;aspect-ratio:1530/245;background:#F5A83A;
  -webkit-mask:url(assets/logo-brunch-andorra-blanco.svg) center/contain no-repeat;
  mask:url(assets/logo-brunch-andorra-blanco.svg) center/contain no-repeat;
  filter:drop-shadow(3px 3px 0 var(--noche))}

/* ---- el pie de la máquina: © y la plaza ---- */
#marco{position:fixed;inset:0;z-index:9;pointer-events:none;color:var(--crema)}
#marco::before{content:'';position:absolute;left:var(--x);right:var(--x);bottom:calc(36px + var(--safe-b));height:2px;
  background:repeating-linear-gradient(90deg,var(--acento) 0 6px,transparent 6px 10px);opacity:.8}
#marco b{position:absolute;bottom:calc(16px + var(--safe-b));font-family:var(--pixel);font-weight:400;font-size:var(--fs-mini);
  letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;max-width:58%;overflow:hidden;text-shadow:2px 2px 0 var(--noche)}
#marco b:nth-of-type(1){left:var(--x)}
#marco b:nth-of-type(2){right:var(--x);text-align:right;color:var(--amarillo)}
/* en móviles estrechos las dos etiquetas se tocaban */
@media (max-width:380px){ #marco b{font-size:var(--fs-mini);max-width:none} }
/* una franja oscura detrás del pie: las pantallas con scroll pasan por debajo */
#marco{background:linear-gradient(0deg,rgba(10,10,26,.94) calc(46px + var(--safe-b)),rgba(10,10,26,0) calc(64px + var(--safe-b)))}
body.en-juego #marco{display:none}

/* ---- el tubo ----
   #grano son las líneas de barrido; #motas, la viñeta curva del cristal con un
   parpadeo casi invisible; #borde se queda sin uso (era el papel gastado de la
   v13). Solo en los menús. */
#grano{position:fixed;inset:0;pointer-events:none;z-index:9;
  background:repeating-linear-gradient(180deg,rgba(0,0,0,0) 0 2px,rgba(0,0,0,.13) 2px 3px);
  mix-blend-mode:multiply}
#motas{position:fixed;inset:0;pointer-events:none;z-index:9;
  background:radial-gradient(ellipse 120% 90% at 50% 50%,rgba(0,0,0,0) 60%,rgba(0,0,0,.55) 100%);
  animation:tubo 6s steps(1) infinite}
@keyframes tubo{0%,100%{opacity:1}47%{opacity:.86}48%{opacity:1}83%{opacity:.92}84%{opacity:1}}
#borde{display:none}
body.en-juego #grano,body.en-juego #motas{display:none}

/* ============ pantallas ============ */
#capa{position:fixed;inset:0;z-index:8;display:flex;justify-content:center;pointer-events:none}
.pantalla{
  pointer-events:auto;position:relative;width:100%;max-width:520px;
  padding:calc(16px + var(--safe-t)) var(--x) calc(58px + var(--safe-b));
  display:flex;flex-direction:column;align-items:stretch;gap:var(--gap);
  overflow-y:auto;overscroll-behavior:contain;
  /* v14: la pista de verdad detrás, con un velo ligero; lo que hay que leer
     va en sus propios marcos */
  background:linear-gradient(rgba(10,22,48,.62),rgba(10,22,48,.38) 45%,rgba(10,22,48,.55));color:var(--crema);
  --filete:rgba(242,238,223,.3)}
/* la pantalla clara ya no es papel: es el azul de la pantalla de opciones */
.pantalla.clara{background:linear-gradient(#14306E,#0C1C44);color:var(--crema);--filete:rgba(242,238,223,.3)}
/* v14: la portada sin foto. El juego gira detrás; el velo solo cierra arriba,
   donde va el título, y abajo, donde va el botón. En medio, la montaña. */
#portada{background:linear-gradient(rgba(10,22,48,.55),rgba(10,22,48,.2) 30%,rgba(10,22,48,0) 50%,rgba(10,22,48,0) 66%,rgba(10,22,48,.3) 80%,rgba(10,22,48,.7))}
.pantalla.plena{background:var(--noche);justify-content:center;align-items:center}
#intro{position:absolute;inset:0;max-width:none;z-index:5;background:#000000}
#intro::before{display:none}
.intro-gif{display:block;width:min(100vw,640px);height:auto;max-height:100dvh;object-fit:contain;background:#000;image-rendering:auto}
/* la rejilla de fondo de las pantallas sólidas: puntos de fósforo */
.pantalla.clara::before,.pantalla.plena::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle,rgba(111,230,255,.14) 1px,transparent 1.5px) 0 0/16px 16px}
.pantalla>*{position:relative}
.hueco{flex:1 1 auto;min-height:8px}

.logo-grande{display:block;width:min(70vw,300px);height:auto;image-rendering:pixelated}
#intro .logo-grande{opacity:0}

.cabecera{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px}
.cabecera .enlace{padding:8px 0}
/* el logo de BRUNCH! va dentro de su chip, como en la maqueta: marco con la
   línea naranja de la marca */
.cabecera .logo{box-sizing:content-box;padding:6px 8px;border:8px solid transparent;
  border-image:var(--marco-naranja) 8 fill / 8px stretch;
  -webkit-mask:none;mask:none;background:none;position:relative;filter:none}
/* el logo, en PNG ya naranja: con máscara sobre el pseudoelemento había
   navegadores que dejaban el chip vacío */
.cabecera .logo::before{content:'';position:absolute;inset:6px 8px;
  background:url(assets/logo-brunch-andorra-blanco.svg) center/contain no-repeat}
.atras{position:relative;width:44px;height:44px;font-size:0;color:var(--crema)}
/* la flecha de volver, escalonada: Press Start 2P no trae ← */
.atras::before{content:'';position:absolute;left:4px;top:50%;width:14px;height:20px;margin-top:-10px;background:currentColor;
  filter:drop-shadow(2px 2px 0 var(--noche));
  clip-path:polygon(100% 0,71.4% 0,71.4% 20%,42.8% 20%,42.8% 40%,0 40%,0 60%,42.8% 60%,42.8% 80%,71.4% 80%,71.4% 100%,100% 100%)}

/* ---- la portada: pantalla de título ----
   Entra como entra una recreativa: la cabecera, PRESENTA, el título línea a
   línea (a saltos) y el lema. */
#portada .cabecera{animation:enciende .36s linear .5s both}
.presenta{text-align:center;font-family:var(--pixel);font-size:var(--fs-eti);line-height:1.6;letter-spacing:.08em;text-transform:uppercase;margin-top:6px;
  color:var(--cian);filter:drop-shadow(2px 2px 0 var(--noche))}
@supports (-webkit-background-clip:text) or (background-clip:text){
  .presenta{background:var(--pantallazo);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
}
/* entra con el título; sin :has se queda puesta desde el principio */
@supports selector(:has(a)){
  .presenta{opacity:0}
  .presenta:has(+ .portada-titular.viva){opacity:1;animation:teclea .7s steps(26,jump-none) .15s both}
}

/* ---- el logo animado ----
   Dos piezas montadas como en design/logo/final.png: la bola de gente detrás, arriba a la
   derecha, y el texto delante. Las posiciones están medidas sobre final.png
   (la caja común mide 1473×976).

   La entrada, toda a saltos (steps), como un sprite:
     0,00 s  PRESENTA se escribe sola (1,25 s de espera, --tras);
     +0,00 s la bola entra por la derecha RODANDO: dos vueltas en dieciséis
             fotogramas, con un bote antes de quedarse en su sitio;
     +0,55 s el texto cae desde arriba, se aplasta, rebota y se estampa;
     +0,80 s la pantalla tiembla con el golpe.
   Y luego no para del todo: la bola sigue girando despacio —una vuelta cada
   doce segundos, en treinta y seis golpes— y el texto late a dos fotogramas.
   El contenedor se sale un poco por los lados: el dibujo tiene aire. */
.portada-titular{margin:0 -14px;line-height:0}
.logo-anim{position:relative;display:block;width:100%;aspect-ratio:1473/976}
.la-bola{position:absolute;left:45.5%;top:-6%;width:53%;opacity:0}
.la-bola img{display:block;width:100%;height:auto}
.la-texto{position:absolute;left:1%;top:24.5%;width:94.5%;height:auto;opacity:0;
  filter:drop-shadow(0 6px 0 rgba(10,10,26,.55))}
/* --tras: lo que tarda PRESENTA en escribirse sola antes de que llegue nada */
.portada-titular{--tras:1.25s}
.portada-titular.viva .la-bola{opacity:1;animation:bolaEntra .8s steps(16,jump-end) var(--tras) both}
.portada-titular.viva .la-bola img{animation:bolaRueda .8s steps(16,jump-end) var(--tras) both,bolaGira 12s steps(36,jump-end) calc(var(--tras) + 1.6s) infinite}
/* sin relleno hacia atrás: mientras espera no se ve colgado encima */
.portada-titular.viva .la-texto{animation:textoCae .6s steps(9,jump-end) calc(var(--tras) + .55s) forwards,late 1.6s steps(1) calc(var(--tras) + 1.6s) infinite}
.portada-titular.viva .logo-anim{animation:temblor .3s steps(6,jump-end) calc(var(--tras) + .8s) both}
/* entra por la derecha, bota una vez y se asienta */
@keyframes bolaEntra{
  0%  {transform:translate(130%,-10%)}
  45% {transform:translate(35%,6%)}
  60% {transform:translate(18%,-14%)}
  78% {transform:translate(4%,3%)}
  90% {transform:translate(0,-3%)}
  100%{transform:translate(0,0)}
}
/* rodando hacia la izquierda: el giro va en contra de las agujas */
@keyframes bolaRueda{from{transform:rotate(720deg)}to{transform:rotate(0deg)}}
@keyframes bolaGira{from{transform:rotate(0deg)}to{transform:rotate(-360deg)}}
/* cae, se aplasta contra el suelo, rebota y se queda */
@keyframes textoCae{
  0%  {opacity:1;transform:translateY(-160%) scale(1.15) rotate(-6deg)}
  45% {opacity:1;transform:translateY(0) scale(1.1,.78) rotate(0deg)}
  62% {opacity:1;transform:translateY(-10%) scale(.94,1.08)}
  80% {opacity:1;transform:translateY(0) scale(1.04,.96)}
  100%{opacity:1;transform:translateY(0) scale(1)}
}
@keyframes temblor{
  0%,100%{transform:translate(0,0)}
  17%{transform:translate(-6px,3px)}
  33%{transform:translate(5px,-4px)}
  50%{transform:translate(-4px,-2px)}
  67%{transform:translate(3px,4px)}
  83%{transform:translate(-2px,-1px)}
}
@keyframes late{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@media (prefers-reduced-motion:reduce){
  .la-bola,.la-texto{opacity:1}
  .portada-titular.viva .la-bola,.portada-titular.viva .la-bola img,.portada-titular.viva .la-texto,.portada-titular.viva .logo-anim{animation:none}
}
/* el logo, centrado en horizontal y algo por encima de la mitad: el bloque solo mide lo que
   mide el logo, y PRESENTA y el lema van colgados por fuera, arriba y abajo */
#portada{overflow-x:hidden}
/* un poco por encima del centro: con los botones debajo, en el centro exacto
   el logo quedaba apretado contra JUGAR */
#portada .centro{position:absolute;left:var(--x);right:var(--x);top:47%;transform:translateY(-50%);z-index:1;pointer-events:none}
/* PRESENTA se queda donde estaba cuando el bloque iba al 41 %: el logo baja
   seis puntos de pantalla y ella no. La pantalla mide lo que el visor. */
#portada .centro .presenta{position:absolute;left:0;right:0;bottom:100%;margin:0 0 calc(18px + 6vh)}
@supports (height:1dvh){ #portada .centro .presenta{margin-bottom:calc(18px + 6dvh)} }
#portada .centro .lema-portada{position:absolute;left:0;right:0;top:100%;margin-top:6px}
/* en pantallas bajas el logo encoge para no pisar los botones */
@media (max-height:760px){ .portada-titular{margin:0 10%} }
@media (max-height:620px){ .portada-titular{margin:0 20%} }
/* BRUNCHERS cae de arriba y rebota, a saltos */
@keyframes salta{0%{opacity:0;transform:translateY(-40px)}40%{opacity:1;transform:translateY(0)}60%{transform:translateY(-8px)}80%,100%{opacity:1;transform:translateY(0)}}
.lema-portada{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 14px;color:var(--hielo-claro);text-shadow:2px 2px 0 var(--noche);font-size:var(--fs-eti)}
.portada-titular.viva ~ .lema-portada span{animation:golpe .01s steps(1) 2.45s both}
.portada-titular.viva ~ .lema-portada span:nth-child(2){animation-delay:2.65s}
.portada-titular.viva ~ .lema-portada span:nth-child(3){animation-delay:2.85s}
.lema-portada span{display:block;visibility:hidden}
@keyframes funde{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

/* ---- las entradas, de recreativa ----
   Nada se funde ni se desliza suave. Cada cosa entra como en una máquina:
     · el titular se ESCRIBE, letra a letra (un recorte que avanza a saltos);
     · el texto y las etiquetas se ENCIENDEN con dos parpadeos;
     · las tarjetas llegan de lado en cinco saltos, una por cada lado;
     · las filas de las tablas aparecen de golpe, una tras otra, como la tabla
       de récords que se va rellenando.
   El orden y los retardos (--d) los pone `entraPantalla`. */
.entra{animation:enciende .36s linear var(--d,0s) both}
.titular>.entra{animation:teclea .55s steps(11,jump-none) var(--d,0s) both}
@keyframes teclea{
  0%{clip-path:inset(-30px 100% -30px -30px)}
  100%{clip-path:inset(-30px -30px -30px -30px)}
}
.tarjetas>.entra{animation:carta .4s steps(5,jump-end) var(--d,0s) backwards}
.tarjetas>.entra:nth-child(even){animation-name:cartaIzq}
@keyframes carta{0%{transform:translateX(110vw)}100%{transform:translateX(0)}}
@keyframes cartaIzq{0%{transform:translateX(-110vw)}100%{transform:translateX(0)}}
.rankings>.entra,.cajas>.entra,.tabla>.entra{animation:golpe .01s steps(1) var(--d,0s) both}
@keyframes golpe{from{visibility:hidden}to{visibility:visible}}
/* la pantalla entera se enciende como un tubo: una raya que se abre */
.pantalla:not(.plena){animation:tuboOn .26s steps(4,jump-end) both}
@keyframes tuboOn{
  0%{clip-path:inset(49.5% 0 49.5% 0);filter:brightness(2.2)}
  60%{clip-path:inset(0 0 0 0);filter:brightness(1.5)}
  100%{clip-path:none;filter:none}
}
/* ---- el botón de entradas ----
   Amarillo, pequeño y en dos líneas, a la izquierda del todo. En la portada ya
   no va el logo naranja de Brunch: la marca la pone PRESENTA.
   Late cada poco, como el INSERT COIN de la máquina. */
#portada .cabecera{justify-content:space-between;gap:8px;min-height:56px}
.tickets{display:block;flex:none;padding:4px 6px;color:var(--navy);text-decoration:none;
  border:8px solid transparent;border-image:var(--marco-amarillo) 8 fill / 8px stretch;
  font-family:var(--pixel);font-size:var(--fs-eti);line-height:1.4;letter-spacing:.02em;text-transform:uppercase;text-align:center;
  filter:drop-shadow(0 4px 0 rgba(6,12,28,.55));
  animation:insertCoin 2.4s steps(1) 2s infinite}
.tickets:active{transform:translateY(3px)}
@keyframes insertCoin{0%,86%{border-image-source:var(--marco-amarillo);color:var(--navy)}87%,93%{border-image-source:var(--marco-hielo);color:var(--crema)}94%,100%{border-image-source:var(--marco-amarillo);color:var(--navy)}}
@media (prefers-reduced-motion:reduce){ .tickets{animation:none} }
#portada .idiomas{margin-left:0}


/* ---- las banderas ----
   Tres banderitas con borde de píxel. La del idioma en uso, encendida y con
   el borde amarillo; las otras, apagadas hasta que se tocan. */
.idiomas{display:flex;gap:6px;align-items:center}
.bandera{display:block;box-sizing:content-box;width:34px;height:22px;padding:0;margin:0;
  border:8px solid transparent;border-image:var(--marco-apagado) 8 fill / 8px stretch;opacity:.75;
  filter:drop-shadow(0 4px 0 rgba(6,12,28,.55))}
.bandera svg{display:block;width:100%;height:100%}
.bandera.activo{opacity:1;cursor:default;border-image-source:var(--marco-ambar)}
.bandera:not(.activo):active{transform:translateY(3px);opacity:1}
@media (hover:hover){ .bandera:not(.activo):hover{opacity:1} }

@media (prefers-reduced-motion:reduce){
  #portada .cabecera,.lema-portada span,.presenta,.entra,.pantalla{opacity:1;visibility:visible;clip-path:none;animation:none !important}
  #motas{animation:none}
}

/* ---- botones ----
   Un bloque con esquina mordida. El borde son cuatro sombras de --px, una por
   lado: las esquinas quedan vacías y el bloque parece dibujado a píxeles. Por
   dentro, luz arriba y sombra abajo, como las teclas de la máquina. El margen
   lateral es lo que ocupan las sombras. */
/* v14: el botón de la maqueta. Relleno azul noche, esquina en escalón, borde
   exterior oscuro y una línea interior de color; la flecha es un ↗ de
   píxeles. El marco es un border-image (ver --marco-*): cambia de color
   cambiando la variable --marco del botón. */
.bt{--marco:var(--marco-hielo);
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  width:100%;min-height:58px;margin:0;padding:0 12px;
  border:8px solid transparent;border-image:var(--marco) 8 fill / 8px stretch;background:none;
  color:var(--crema);
  font-family:var(--pixel);font-weight:400;font-size:var(--fs-boton);letter-spacing:.02em;text-transform:uppercase;line-height:1.4;
  text-shadow:2px 2px 0 var(--noche);
  filter:drop-shadow(0 5px 0 rgba(6,12,28,.55))}
.bt::after{content:'';flex:none;width:14px;height:14px;background:currentColor;
  -webkit-mask:var(--flecha-px) center/contain no-repeat;mask:var(--flecha-px) center/contain no-repeat}
.bt:active{transform:translateY(4px);filter:none}
.bt.rosa{--marco:var(--marco-ambar)}
/* la entrada: el botón se enciende como un tubo, con dos parpadeos */
.bt.rosa{position:relative;animation:enciende .45s linear var(--d,0s) both}
@keyframes enciende{0%,19%{opacity:0}20%,39%{opacity:1}40%,59%{opacity:0}60%,100%{opacity:1}}

/* ---- JUGAR parpadea, como el PRESS START de la máquina ----
   Dos estados duros: hielo (franjas blancas y azules, como SNOW) con letra
   azul honda, y oscuro con letra de hielo.
   Nunca desaparece: se lee en los dos. */
#b-jugar{font-size:var(--fs-destacado);min-height:66px;
  animation:enciende .45s linear var(--d,0s) both,arcade 1.1s linear calc(var(--d,0s) + 2s) infinite}
/* JUGAR parpadea como el PRESS START: la línea ámbar y el relleno se
   intercambian, y la letra pasa de crema a azul noche. Nunca desaparece. */
@keyframes arcade{
  0%,54.9%  {border-image-source:var(--marco-ambar);color:var(--crema);text-shadow:2px 2px 0 var(--noche)}
  55%,100%  {border-image-source:var(--marco-ambar-lleno);color:var(--navy);text-shadow:none}
}
@media (prefers-reduced-motion:reduce){
  .bt.rosa,#b-jugar{animation:none}
}
.bt.blanco{--marco:var(--marco-hielo)}
.bt.activo{animation:none;color:var(--acento)}
/* compartir: la llamada amarilla de la maqueta */
#b-compartir{--marco:var(--marco-amarillo);color:var(--navy);text-shadow:none}
.enlace{display:block;width:100%;text-align:center;padding:12px 0;font-family:var(--pixel);font-weight:400;font-size:var(--fs-eti);line-height:1.6;letter-spacing:.04em;
  text-transform:uppercase;text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:2px;text-shadow:2px 2px 0 var(--noche)}
.enlace.micro{text-transform:uppercase}
.enlace.activo{color:var(--acento)}
.cabecera .enlace{width:auto;text-decoration:none;padding:2px 6px;font-size:var(--fs-eti);
  border:8px solid transparent;border-image:var(--marco-hielo) 8 fill / 8px stretch}

.fila{display:flex;align-items:center;gap:14px;min-height:64px;border-bottom:2px dashed var(--filete)}

/* ============ la cifra grande ============ */
.cifra{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.cifra b{font-family:var(--pixel);font-weight:400;font-size:var(--fs-cifra);line-height:1.1;color:var(--amarillo);text-shadow:var(--extruye)}

/* ============ elige tu DJ ============ */
/* v14: la tarjeta de la maqueta. Marco con esquina en escalón (borde azul
   noche y línea crema) que va POR ENCIMA de todo, panel de color a la
   izquierda, retrato a la derecha y el objetivo en un chip arriba. */
.tarjetas{display:flex;flex-direction:column;gap:12px}
.pista{position:relative;display:flex;width:100%;margin:0;height:164px;padding:0;color:var(--crema);background:var(--navy);background-clip:padding-box;
  border:8px solid transparent;border-image:var(--marco-crema) 8 / 8px stretch;
  filter:drop-shadow(0 5px 0 rgba(6,12,28,.55))}
/* una foto por bajada, cada una en su archivo (ver v13). v14: la foto va
   rebajada de color y con barrido, para que parezca sacada de la máquina */
.pista::before{content:'';position:absolute;left:50%;right:0;top:0;bottom:0;
  background:center/cover no-repeat;filter:saturate(1.35) contrast(1.1)}
.pista::after{content:'';position:absolute;left:50%;right:0;top:0;bottom:0;pointer-events:none;
  background:repeating-linear-gradient(180deg,rgba(0,0,0,0) 0 2px,rgba(0,0,0,.3) 2px 4px)}
/* v14: en vez de la foto de la pista, el retrato pixelado de quien pincha en
   esa cabina (salen de design/djs/: djs.png en orden de lectura, y jeff.png y
   honey.png, en grande, para la verde y la azul). Encuadrados
   por arriba: lo que importa es la cara. */
.pista:nth-child(-n+4)::before{background-position:center 10%;image-rendering:pixelated}
.pista .etiq{position:relative;z-index:1;width:50%;flex:none;display:flex;flex-direction:column;align-items:flex-start;padding:8px 8px 6px 8px;
  border-right:4px solid var(--navy);
  background:var(--col,var(--tinta));text-align:left}
.pista .etiq .senal{display:none}
.pista .etiq .pre{font-family:var(--pixel);font-size:var(--fs-mini);line-height:1.4;letter-spacing:.04em;text-transform:uppercase;text-shadow:1px 1px 0 var(--noche)}
.pista .etiq strong{font-family:var(--pixel);font-weight:400;font-size:var(--fs-marcador);line-height:1.15;text-transform:uppercase;margin-top:8px;
  color:var(--crema);text-shadow:3px 3px 0 var(--noche);word-break:break-word}
.pista .etiq strong.tba{opacity:.85}
.pista .etiq .raya{display:block;width:24px;height:4px;background:var(--crema);margin:8px 0 6px;box-shadow:2px 2px 0 var(--noche)}
.pista .etiq small{font-family:var(--crt);font-size:var(--fs-texto-s);line-height:.95;letter-spacing:.02em;text-transform:uppercase}
/* abajo a la derecha: arriba tapaba la cara del DJ */
/* el chip del objetivo: en la maqueta va arriba, pero ahí tapa los ojos de
   los DJs; abajo cae sobre los hombros */
.pista .objetivo{position:absolute;right:4px;bottom:4px;z-index:2;padding:2px 4px;text-align:center;line-height:1;
  border:8px solid transparent;border-image:var(--marco-hielo) 8 fill / 8px stretch}
.pista .objetivo span{display:block;font-family:var(--pixel);font-size:var(--fs-mini);letter-spacing:.04em;text-transform:uppercase}
.pista .objetivo b{display:block;font-family:var(--pixel);font-weight:400;font-size:var(--fs-destacado);line-height:1;margin-top:5px;color:var(--acento)}
.pista .objetivo.logrado{border-image-source:var(--marco-ambar)}
.pista .objetivo.logrado span{color:var(--amarillo)}
.pista .objetivo.logrado b{color:var(--crema)}
.pista:active{transform:translateY(4px);filter:none}

/* ---- 🩷 LA QUINTA: la bajada secreta ---- */
.pista.secreta{--col:#2A1330}
.pista.secreta::before{background:
  repeating-linear-gradient(-45deg,rgba(255,61,138,.55) 0 14px,transparent 14px 28px),
  linear-gradient(var(--tinta),#1A0A20)}
.pista.secreta .etiq strong{color:var(--rosa)}
.pista.secreta .objetivo b{color:var(--rosa)}
.pista.bloqueada{cursor:default}
.pista.bloqueada:active{transform:none}
.pista.bloqueada::before{filter:saturate(.55);opacity:.5}
.pista.bloqueada .etiq{opacity:.75}
.marcas{display:flex;flex-wrap:wrap;gap:4px 10px;margin-top:2px}
.marcas u{text-decoration:none;font-family:var(--pixel);font-size:var(--fs-mini);line-height:1.6;letter-spacing:.04em;opacity:.45}
.marcas u::after{content:' ·';opacity:.7}
.marcas u.ok{opacity:1;color:var(--rosa)}
.marcas u.ok::after{content:' OK'}

/* ============ pausa ============ */
.ajustes{display:flex;flex-direction:column;padding:0 10px;
  border:8px solid transparent;border-image:var(--marco-crema) 8 fill / 8px stretch}
.ajustes .enlace{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:48px;padding:10px 0;
  text-align:left;text-decoration:none;border-bottom:2px solid rgba(242,238,223,.18)}
.ajustes .enlace:last-of-type{border-bottom:0}
.ajustes .enlace::after{content:'';flex:none;width:9px;height:12px;background:var(--acento);
  clip-path:polygon(0 0,33% 0,33% 16.6%,66% 16.6%,66% 33.3%,100% 33.3%,100% 66.6%,66% 66.6%,66% 83.3%,33% 83.3%,33% 100%,0 100%)}
/* el menú de la máquina: el cursor ▶ salta a la opción que tocas */
.ajustes .enlace:hover,.ajustes .enlace:active{color:var(--amarillo)}

/* ============ final ============ */
/* el final va sobre la fiesta llena de focos: algo más de velo que el resto,
   y la tabla dentro de su panel */
#fin{background:linear-gradient(rgba(10,22,48,.78),rgba(10,22,48,.6) 40%,rgba(10,22,48,.72))}
.nombre{width:100%;min-height:52px;padding:0 0 6px;background:none;border:0;border-bottom:4px solid rgba(242,238,223,.7);border-radius:0;color:inherit;
  font-family:var(--pixel);font-size:var(--fs-boton);text-transform:uppercase;letter-spacing:.04em;outline:none;caret-color:var(--amarillo)}
.nombre::placeholder{font-family:var(--pixel);font-size:var(--fs-eti);letter-spacing:.04em;color:inherit;opacity:.55}
.nombre:focus{border-bottom-color:var(--amarillo)}

.cajas{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));row-gap:14px;border-top:2px dashed var(--filete);border-bottom:2px dashed var(--filete);padding:12px 0}
.caja{border-left:2px dashed var(--filete);padding-left:12px}
.caja:first-child{border-left:0;padding-left:0}
.caja span{display:block;font-family:var(--pixel);font-size:var(--fs-mini);letter-spacing:.04em;text-transform:uppercase;line-height:1.6}
.caja b{display:block;font-family:var(--pixel);font-weight:400;font-size:var(--fs-destacado);line-height:1;margin-top:8px;color:var(--amarillo)}
/* la tabla de bajadas, dentro de su panel (maqueta) */
.rankings{display:flex;flex-direction:column;padding:2px 10px;
  border:8px solid transparent;border-image:var(--marco-crema) 8 fill / 8px stretch}
.rankings:empty{display:none}
.rank{display:flex;align-items:center;gap:10px;min-height:44px;border-bottom:2px solid rgba(242,238,223,.18)}
.rank:last-child{border-bottom:0}
.rank .senal{width:10px;height:10px;margin-left:1px}
.rank .senal.doble{width:7px;height:7px;box-shadow:7px 0 0 currentColor;margin-right:8px}
.rank b{flex:1;font-family:var(--pixel);font-weight:400;font-size:var(--fs-eti);letter-spacing:.04em;text-transform:uppercase}
.rank span{font-family:var(--pixel);font-weight:400;font-size:var(--fs-boton);line-height:1}
.rank em{font-style:normal;font-family:var(--pixel);font-size:var(--fs-eti);opacity:.75;min-width:52px;text-align:right}
/* las señales, cuadradas: en una máquina de 8 bits no hay círculos */
.rank .senal.copo{width:12px;height:12px}
.rank.secreta b,.rank.secreta span{color:var(--rosa)}
.rank.secreta em{font-size:var(--fs-mini);min-width:52px}
.rank.actual b{color:var(--amarillo)}
.rank.hecho span{color:var(--amarillo)}

/* ---- 🩷 la bajada secreta se ve ---- */
#hud.sinfin,#fin.sinfin{--acento:#FF3D8A}

.secreta-abierta{display:block;width:100%;margin:0;padding:8px;text-align:center;color:inherit;
  border:8px solid transparent;border-image:var(--marco-rosa) 8 fill / 8px stretch;
  animation:enciende .45s linear both}
.secreta-abierta:active{transform:translateY(4px)}
.secreta-abierta em{display:block;font-style:normal;font-family:var(--pixel);font-weight:400;
  font-size:var(--fs-eti);line-height:1.4;text-transform:uppercase;margin-top:10px;color:var(--rosa);animation:arcadeTexto 1.1s steps(1) infinite}
.secreta-abierta em::after{content:' >'}
@keyframes arcadeTexto{0%,60%{opacity:1}61%,100%{opacity:0}}
.enlace.rosa-secreta{color:var(--rosa)}
/* el pie de la portada: el botón de récords, como el HI-SCORE de la máquina.
   Secundario (filete, sin relleno) para no pelear con JUGAR, pero un botón de
   verdad: la línea de texto de antes no la tocaba nadie. */
/* mismo tamaño que JUGAR: son las dos puertas de la portada */
.bt.pie-util{animation:enciende .45s linear var(--d,0s) both;min-height:62px;margin-top:-6px;margin-bottom:18px;font-size:var(--fs-boton)}   /* aire con el pie: se veía pegado */
.bt.pie-util b{margin-left:auto;font-weight:400;font-size:var(--fs-boton);color:var(--amarillo)}
/* HI-SCORES + HI 00000 no caben a 16 px en un móvil estrecho */
@media (max-width:380px){ .bt.pie-util{font-size:var(--fs-eti)} .bt.pie-util b{font-size:var(--fs-eti)} }
.bt.pie-util::after{background:var(--amarillo)}
.secreta-abierta .marcas{justify-content:center;margin-bottom:8px}
.secreta-abierta .marcas u{font-size:var(--fs-mini)}
.secreta-abierta b{display:block;font-family:var(--pixel);font-weight:400;font-size:var(--fs-boton);
  line-height:1.3;text-transform:uppercase;color:var(--rosa)}
.secreta-abierta i{display:block;font-style:normal;font-family:var(--pixel);
  font-size:var(--fs-eti);line-height:1.6;text-transform:uppercase;margin-top:10px}

/* ============ el correo y el ranking ============ */
.legal{font-family:var(--crt) !important;font-size:var(--fs-texto-s) !important;letter-spacing:0;line-height:1 !important;text-transform:none;opacity:.6}
#correo p:not(.micro){font-size:var(--fs-texto);line-height:1.05}
.campo{display:block;width:100%}
.campo .micro{display:block;font-size:var(--fs-mini);opacity:.7;margin-bottom:4px}
.campo input{width:100%;min-height:50px;padding:0 0 6px;background:none;border:0;
  border-bottom:4px dotted var(--filete);border-radius:0;color:inherit;
  font-family:var(--pixel);font-weight:400;font-size:var(--fs-boton);letter-spacing:.04em;
  text-transform:uppercase;outline:none;-webkit-appearance:none;caret-color:var(--amarillo)}
.campo input[type=email]{font-family:var(--crt);font-size:var(--fs-texto);letter-spacing:0;text-transform:none}
.campo input:focus{border-bottom-color:var(--amarillo)}

.tu-puesto{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;border-top:2px dashed var(--filete);border-bottom:2px dashed var(--filete);padding:12px 0}
.tu-puesto .micro{font-size:var(--fs-mini);opacity:.75}
.tu-puesto b{font-family:var(--grande);font-weight:700;font-size:var(--fs-cifra);line-height:1.1;color:var(--amarillo);text-shadow:var(--extruye)}
.tu-puesto i{font-style:normal;font-family:var(--crt);font-size:var(--fs-texto);opacity:.65}

/* la tabla: como la de récords de la máquina, con los puntos de guía */
.tabla{list-style:none;margin:0;padding:4px 10px;max-height:46vh;overflow-y:auto;-webkit-overflow-scrolling:touch;
  border:8px solid transparent;border-image:var(--marco-crema) 8 fill / 8px stretch}
.tabla:empty{display:none}
.tabla li{display:flex;align-items:center;gap:10px;min-height:40px}
.tabla li b{font-family:var(--pixel);font-weight:400;font-size:var(--fs-eti);opacity:.6;min-width:34px}
.tabla li span{flex:1;font-family:var(--pixel);font-size:var(--fs-eti);letter-spacing:.04em;text-transform:uppercase;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tabla li span::after{content:' ..............................';opacity:.35}
.tabla li em{font-style:normal;font-family:var(--pixel);font-weight:400;font-size:var(--fs-eti);line-height:1}
.tabla li:nth-child(1){color:var(--amarillo)}
.tabla li:nth-child(2){color:var(--cian)}
.tabla li:nth-child(3){color:#FFA12B}
.tabla li.yo{color:var(--rosa);animation:arcadeTexto 1.1s steps(1) infinite}
.tabla li.yo b{opacity:1}

/* ============ HUD ============
   Letra clara con contorno oscuro: se lee sobre la nieve y de noche. */
#hud{position:fixed;inset:0;z-index:5;pointer-events:none;color:var(--crema)}
#hud>*{pointer-events:auto}
.chapa{position:absolute;left:16px;top:calc(14px + var(--safe-t));display:flex;flex-direction:column;
  padding-left:10px;border-left:4px solid var(--acento);line-height:1}
.chapa .micro{font-size:var(--fs-mini);line-height:21px;text-shadow:var(--contorno)}
.chapa b{font-family:var(--pixel);font-weight:400;font-size:var(--fs-marcador);line-height:1;margin-top:6px;text-shadow:var(--contorno)}
/* el medidor de capas: cinco bloques bajo el contador (21 etiqueta + 6 hueco + 28 cifra + 12) */
#capas{position:absolute;left:30px;top:calc(14px + var(--safe-t) + 21px + 6px + 28px + 12px);display:flex;align-items:center;gap:3px}
#capas i{display:block;width:14px;height:6px;background:rgba(10,10,26,.35);box-shadow:1px 1px 0 var(--noche)}
#capas i.on{background:var(--acento)}
#capas b{margin-left:6px;font-family:var(--pixel);font-weight:400;font-size:var(--fs-mini);text-transform:uppercase;color:var(--acento);text-shadow:var(--contorno)}
#grito.capa{color:var(--acento);font-size:var(--fs-boton)}
#btn-pausa{position:absolute;top:calc(18px + var(--safe-t));width:40px;height:40px;
  background:var(--noche);color:var(--crema);display:block;padding:0;margin:0;border:0;
  -webkit-appearance:none;appearance:none;box-sizing:border-box;overflow:visible;
  box-shadow:0 -3px 0 0 var(--crema),0 3px 0 0 var(--crema),-3px 0 0 0 var(--crema),3px 0 0 0 var(--crema)}
#btn-pausa{right:19px}
#btn-pausa span{position:absolute;top:50%;width:6px;height:16px;background:var(--crema);transform:translateY(-50%)}
#btn-pausa span:first-child{left:calc(50% - 8px)}
#btn-pausa span:last-child{left:calc(50% + 2px)}
#hud.acabando #btn-pausa,#hud.acabando #barra,#hud.acabando #pista-ayuda,#hud.acabando #velo{
  opacity:0;pointer-events:none;transition:opacity .3s steps(3)}

/* la ráfaga del soplo */
#rafaga{position:fixed;inset:-20%;pointer-events:none;z-index:3;opacity:0;
  background:repeating-conic-gradient(from 0deg,rgba(255,255,255,0) 0 5.2deg,rgba(255,255,255,.7) 5.2deg 5.8deg);
  -webkit-mask-image:radial-gradient(circle at 50% 46%,transparent 34%,#000 72%);
  mask-image:radial-gradient(circle at 50% 46%,transparent 34%,#000 72%);transition:opacity .12s linear}
#rafaga.on{animation:rafaga .16s steps(2) infinite}
@keyframes rafaga{from{transform:rotate(0deg)}to{transform:rotate(2.6deg)}}

#salpica{position:fixed;inset:0;pointer-events:none;z-index:4;overflow:hidden}
#salpica i{position:absolute;left:var(--x,40%);top:var(--y,40%);width:26vw;height:26vw;border-radius:50%;opacity:0;
  background:radial-gradient(circle,rgba(255,255,255,.95) 0 30%,rgba(255,255,255,.55) 55%,rgba(255,255,255,0) 72%);
  transform:scale(var(--s,1));filter:blur(3px)}
#salpica i.on{animation:salpica 1.1s ease-out both}
@keyframes salpica{0%{opacity:0;transform:scale(calc(var(--s,1)*.4))}12%{opacity:.85;transform:scale(var(--s,1))}100%{opacity:0;transform:scale(calc(var(--s,1)*1.15)) translateY(18px)}}
/* el velocímetro: una columna de bloques, como la barra de energía */
#velo{position:absolute;left:16px;top:50%;transform:translateY(-50%);display:flex;flex-direction:row-reverse;align-items:flex-end;gap:8px}
#velo i{display:block;position:relative;width:10px;height:140px;background:rgba(10,10,26,.35);overflow:hidden;
  box-shadow:0 0 0 2px var(--noche)}
#velo span{position:absolute;left:0;right:0;bottom:0;height:0%;background:var(--crema);}
#velo i::after{content:'';position:absolute;inset:0;background:repeating-linear-gradient(180deg,transparent 0 5px,var(--noche) 5px 7px)}
#velo u{position:absolute;left:0;right:0;bottom:72%;height:2px;background:var(--acento);z-index:1}
#velo b{font-family:var(--pixel);font-weight:400;font-size:var(--fs-mini);text-transform:uppercase;color:var(--acento);opacity:0;text-shadow:var(--contorno);
  writing-mode:vertical-rl;transform:rotate(180deg);transition:opacity .15s steps(2)}
#velo.turbo span{background:linear-gradient(to top,var(--crema) 0 72%,var(--acento) 72%)}
#velo.turbo b{opacity:1;animation:arcadeTexto .5s steps(1) infinite}

#boost{position:fixed;inset:0;pointer-events:none;z-index:4;opacity:0;--b:#3C7BE0}
#boost.blue{--b:#3C7BE0}
#boost.orange{--b:#FF511C}   /* el B! naranja del juego: ese no cambia */
#boost.on{animation:parpadeo .75s ease-out 1,latido .48s ease-in-out .75s infinite alternate;
  background:radial-gradient(ellipse at 50% 50%,rgba(255,255,255,0) 40%,var(--b) 100%)}
@keyframes parpadeo{0%{opacity:.85;background:#fff}12%{opacity:0}
  26%{opacity:.6;background:radial-gradient(ellipse at 50% 50%,rgba(255,255,255,0) 22%,var(--b) 100%)}40%{opacity:0}
  55%{opacity:.5;background:radial-gradient(ellipse at 50% 50%,rgba(255,255,255,0) 22%,var(--b) 100%)}70%{opacity:0}100%{opacity:.4}}
@keyframes latido{from{opacity:.18}to{opacity:.5}}
#boost-hud{position:absolute;left:50%;top:calc(150px + var(--safe-t));transform:translateX(-50%);display:none;flex-direction:column;align-items:center;gap:8px;pointer-events:none}
#hud.boost #boost-hud{display:flex}
#boost-hud b{font-family:var(--pixel);font-weight:400;font-size:var(--fs-boton);text-transform:uppercase;color:var(--amarillo);text-shadow:var(--contorno)}
#boost-hud i{display:block;width:150px;height:8px;background:rgba(10,10,26,.4);overflow:hidden;box-shadow:0 0 0 2px var(--noche)}
/* sin transición: la anchura cambia en cada fotograma y una transición a saltos
   se reiniciaba antes de dar el primero, así que la barra no se movía nunca */
#boost-hud span{position:relative;display:block;height:100%;width:100%;background:var(--amarillo)}
#boost-hud span::after{content:'';position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 10px,var(--noche) 10px 12px)}

/* el grito de la partida: a la derecha, a saltos */
#grito{position:absolute;right:16px;top:32%;width:210px;text-align:right;
  font-family:var(--pixel);font-weight:400;font-size:var(--fs-destacado);line-height:1.35;text-transform:uppercase;
  color:var(--crema);text-shadow:var(--contorno);
  animation:salta .45s steps(5) both}
#grito.perdida,#grito.hito{color:var(--acento)}
#grito.vuelta{top:21%;left:16px;right:16px;width:auto;text-align:center;
  font-size:var(--fs-boton);line-height:1.5;color:var(--crema);animation:none}
#grito.cancion{font-family:var(--pixel);font-size:var(--fs-eti);line-height:1.7;color:var(--amarillo)}
#grito.alud{width:auto;max-width:calc(100vw - 32px);white-space:nowrap;
  font-size:clamp(16px,5.4vw,24px);line-height:1.2;text-shadow:3px 3px 0 var(--noche);
  color:var(--sobre-acento);background:var(--acento);padding:10px 12px;text-shadow:none;
  box-shadow:0 -4px 0 0 var(--noche),0 4px 0 0 var(--noche),-4px 0 0 0 var(--noche),4px 0 0 0 var(--noche);
  animation:salta .35s steps(4),parpadea .5s .4s steps(1) infinite}
#grito.ayuda{font-size:var(--fs-boton);line-height:1.7;width:220px}
/* 🩷 el cartel del evento de la bajada secreta: el mismo bofetón que el de la
   avalancha, en el rosa de BRUNCH y sin parpadeo, que este se queda el doble
   de tiempo y parpadeando dos segundos marea. Si el nombre es largo —MUÑECOS
   DE NIEVE— se parte en dos líneas en vez de salirse de la pantalla. */
#grito.evento{width:auto;max-width:calc(100vw - 32px);white-space:normal;
  font-size:clamp(16px,5.4vw,25px);line-height:1.15;
  color:#0A0A1A;background:var(--rosa);padding:10px 12px;text-shadow:none;opacity:1;
  box-shadow:0 -4px 0 0 var(--noche),0 4px 0 0 var(--noche),-4px 0 0 0 var(--noche),4px 0 0 0 var(--noche);
  animation:entraEvento .35s steps(4)}
/* Entra dando el mismo bote que los demás, pero SIN tocar la opacidad: el
   cartel que dice lo que trae la vuelta no puede quedarse invisible si el
   móvil va justo y la animación se arrastra. */
@keyframes entraEvento{0%{transform:translateY(-40px)}40%{transform:translateY(0)}60%{transform:translateY(-8px)}100%{transform:translateY(0)}}
@keyframes parpadea{0%,100%{opacity:1}50%{opacity:.55}}

/* ---- las instrucciones ----
   Un recuadro de la máquina: fondo oscuro, borde mordido, el verbo en amarillo
   parpadeando y la alternativa en letra de terminal. */
#pista-ayuda{position:absolute;left:50%;bottom:calc(84px + var(--safe-b));transform:translateX(-50%);
  width:252px;text-align:center;transition:opacity .6s steps(4);
  padding:12px 14px 14px;background:rgba(10,10,26,.86);color:var(--crema);
  box-shadow:0 -4px 0 0 var(--crema),0 4px 0 0 var(--crema),-4px 0 0 0 var(--crema),4px 0 0 0 var(--crema),0 12px 0 0 rgba(10,10,26,.45)}
#pista-ayuda .movil{width:52px;height:32px;fill:none;stroke:var(--crema);stroke-width:4;stroke-linecap:square;stroke-linejoin:miter;shape-rendering:crispEdges}
#pista-ayuda .movil path[d^="M8 20"],#pista-ayuda .movil path[d^="M56 20"]{fill:var(--crema)}
#pista-ayuda .soplo{width:60px}
#pista-ayuda .soplo path[d^="M44"]{fill:var(--crema)}
#pista-ayuda b{display:block;font-family:var(--pixel);font-weight:400;font-size:var(--fs-eti);line-height:1.6;text-transform:uppercase;margin-top:8px;
  color:var(--amarillo);animation:arcadeTexto 1.1s steps(1) infinite}
#pista-ayuda i{display:block;font-style:normal;font-family:var(--crt);font-size:var(--fs-eti);line-height:1;text-transform:uppercase;margin-top:6px;opacity:.85}
@media (prefers-reduced-motion:reduce){ #pista-ayuda b,.tabla li.yo,.secreta-abierta em,#velo.turbo b{animation:none} }
#ayuda-nivel{width:180px;height:8px;margin:12px auto 0;background:rgba(242,238,223,.18)}
#ayuda-nivel i{display:block;height:100%;width:0%;margin:0;background:var(--acento)}

/* la barra de la bajada: bloques, con el relleno de hielo y dos picos */
#barra{position:absolute;left:0;right:0;bottom:calc(18px + var(--safe-b));padding:0 var(--x)}
#barra .via{position:relative;height:8px;background:rgba(10,10,26,.35);box-shadow:0 0 0 2px var(--noche)}
#barra .via i{position:relative;display:block;height:100%;width:0%;background:var(--acento)}
#barra .via>i::after{content:'';position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 10px,var(--noche) 10px 12px)}
#barra .via i.atras{background:repeating-linear-gradient(90deg,var(--acento) 0 6px,var(--noche) 6px 12px);animation:parpadea .7s steps(1) infinite}
#barra .via::before,#barra .via::after{content:'';position:absolute;bottom:12px;width:10px;height:8px;background:var(--crema);
  clip-path:polygon(40% 0,60% 0,60% 25%,80% 25%,80% 50%,100% 50%,100% 100%,0 100%,0 50%,20% 50%,20% 25%,40% 25%)}
#barra .via::before{left:-1px}
#barra .via::after{right:-1px}
#barra .etiquetas{display:flex;justify-content:space-between;margin-top:10px;
  font-family:var(--pixel);font-weight:400;font-size:var(--fs-mini);text-transform:uppercase;text-shadow:var(--contorno)}

#sensor-debug{position:absolute;left:16px;top:calc(140px + var(--safe-t));z-index:5;background:var(--noche);color:var(--crema);
  font:22px/1 var(--crt);padding:8px 12px;white-space:pre}

/* ============ avisos / carga ============ */
#aviso-flash{position:fixed;left:50%;bottom:calc(140px + var(--safe-b));transform:translateX(-50%);z-index:20;
  background:var(--noche);color:var(--amarillo);padding:12px 14px;max-width:86vw;text-align:center;font-size:var(--fs-eti);
  box-shadow:0 -4px 0 0 var(--crema),0 4px 0 0 var(--crema),-4px 0 0 0 var(--crema),4px 0 0 0 var(--crema)}
#cargando{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  background:var(--noche);color:var(--crema);pointer-events:auto;padding:32px;text-align:center}
#cargando b{font-family:var(--pixel);font-weight:400;font-size:var(--fs-marcador);text-transform:uppercase;line-height:1.3;text-shadow:var(--extruye)}
#cargando i{font-style:normal;font-family:var(--crt);font-size:var(--fs-texto);line-height:1.05;max-width:34ch;opacity:.85}

/* ============ el arranque de la máquina ============
   Negro, y las líneas de la comprobación de memoria en las franjas de hielo
   de SUPER SNOW (blanco arriba, azul abajo) con sombra azul honda. Va por encima de todo, líneas de barrido incluidas. */
#arranque{position:fixed;inset:0;z-index:40;background:#000;display:flex;align-items:center;justify-content:center;
  padding:0 16px;pointer-events:auto}
#arranque::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(180deg,rgba(0,0,0,0) 0 2px,rgba(0,0,0,.35) 2px 3px)}
#arranque-txt{font-family:var(--pixel);font-size:clamp(11px,3.8vw,18px);line-height:1.35;white-space:pre;
  min-width:16ch;min-height:calc(6 * 1.35em)}
#arranque-txt div{display:block}
#arranque-txt span,#arranque-txt .arr-fin{color:#8FDBFF}
@supports (-webkit-background-clip:text) or (background-clip:text){
  #arranque-txt span,#arranque-txt .arr-fin{
    background:var(--escarcha);
    -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
    filter:drop-shadow(2px 2px 0 var(--azul-hondo))}
}
#arranque-txt .arr-ng{animation:arcadeTexto .3s steps(1) infinite}
#arranque-txt .arr-fin{animation:arcadeTexto .2s steps(1) infinite}
@media (prefers-reduced-motion:reduce){ #arranque-txt .arr-ng,#arranque-txt .arr-fin{animation:none} }

/* móviles estrechos: entradas y banderas algo más contenidas para caber */
@media (max-width:370px){ .tickets{font-size:var(--fs-eti);padding:4px 3px} .bandera{width:30px;height:20px} .idiomas{gap:4px} }

/* ============ los titulares de la maqueta ============
   Letra de píxel gruesa y estrecha, crema con un contorno oscuro grueso y
   extrusión hacia abajo; la segunda línea, en franjas de fuego (amarillo,
   naranja, rosa). La etiqueta de debajo, en amarillo con el mismo contorno. */
:root{
  --fuego:linear-gradient(180deg,#FFF27A 0 26%,#FFD23F 26% 44%,#FF9A2E 44% 62%,#FF5E3A 62% 80%,#FF3D8A 80%);
  --borde-titulo:-3px 0 0 #0B1630,3px 0 0 #0B1630,0 -3px 0 #0B1630,0 3px 0 #0B1630,
    -3px -3px 0 #0B1630,3px -3px 0 #0B1630,-3px 3px 0 #0B1630,3px 3px 0 #0B1630,
    3px 6px 0 #0B1630,3px 8px 0 #0B1630;
  --t2:clamp(34px,calc((min(100vw,520px) - 56px) / 7.8),50px);
  --t1:clamp(40px,calc((min(100vw,520px) - 56px) / 6),64px);
}
.titular{font-family:var(--titulo);font-weight:700;line-height:.98;letter-spacing:0;
  color:#FFF8E6;text-shadow:var(--borde-titulo);padding:0 4px 8px 3px}
.titular em{color:#FFD23F}
@supports (-webkit-background-clip:text) or (background-clip:text){
  .titular em:not(.osc){background:var(--fuego);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
    text-shadow:none;
    filter:drop-shadow(3px 0 0 #0B1630) drop-shadow(-3px 0 0 #0B1630) drop-shadow(0 3px 0 #0B1630) drop-shadow(0 -3px 0 #0B1630) drop-shadow(2px 5px 0 #0B1630)}
}
/* la etiqueta bajo el titular (CUATRO BAJADAS · OBJETIVO 380...) */
#pistas .titular + .micro,#fin-sub,#fin .micro.naranja{font-family:var(--titulo);font-weight:700;font-size:var(--fs-display);line-height:1.05;letter-spacing:.01em;
  color:#FFD23F;text-shadow:-2px 0 0 #0B1630,2px 0 0 #0B1630,0 -2px 0 #0B1630,0 2px 0 #0B1630,2px 3px 0 #0B1630}

/* v14 · salir al inicio: un botón, en rosa, para que no se confunda con los de seguir jugando */
.bt.salir{--marco:var(--marco-rosa)}
/* los títulos de ELIGE TU PISTA, récords y ranking, mucho más grandes */
#pistas .titular,#ranking .titular,#fin .titular{overflow-wrap:normal;font-size:var(--fs-titulo);line-height:.94}
/* los DJs: nombre en dos líneas como mucho */
.pista .etiq strong{font-family:var(--titulo);font-weight:700;font-size:var(--fs-display);line-height:.95;letter-spacing:0;margin-top:5px;
  text-shadow:-2px 0 0 #0B1630,2px 0 0 #0B1630,0 -2px 0 #0B1630,0 2px 0 #0B1630,2px 3px 0 #0B1630}
.pista .etiq .raya{margin:6px 0 5px}
.pista .etiq small{font-size:var(--fs-texto-s);line-height:.92}
.rank b{font-family:var(--titulo);font-weight:700;font-size:var(--fs-display);letter-spacing:.02em}
/* el del ranking, un punto menor: CLASSEMENT es la palabra más larga */
#ranking .titular{font-size:var(--fs-titulo)}
/* la secreta cerrada: las cuatro bajadas que faltan, una por línea */
.pista .etiq .marcas{flex-direction:column;flex-wrap:nowrap;gap:1px;margin-top:0}
.pista .etiq .marcas u{font-size:var(--fs-mini);line-height:1.5}
.pista .etiq .marcas u::after{content:''}
.pista .etiq .marcas u.ok::after{content:' OK'}

/* ============ v14 · sin líneas retro ============
   Probado y fuera: las líneas de barrido ensuciaban las cifras y las fotos.
   Se queda solo la viñeta del tubo, sin parpadeo. */
#grano{display:none}
#motas{animation:none}
.pista::after{display:none}
#arranque::after{display:none}

/* el logo de BRUNCH! no es un botón: va suelto, sin marco */
.cabecera .logo{border:0;border-image:none;padding:0;width:104px;
  filter:drop-shadow(2px 2px 0 #0B1630)}
.cabecera .logo::before{inset:0}

/* la cifra grande, en la letra de los títulos y con su contorno */
.cifra b{font-family:var(--titulo);font-weight:700;font-size:var(--fs-cifra);line-height:.9;
  color:#FFD23F;text-shadow:var(--borde-titulo)}
@supports (-webkit-background-clip:text) or (background-clip:text){
  .cifra b{background:var(--fuego);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;text-shadow:none;
    filter:drop-shadow(3px 0 0 #0B1630) drop-shadow(-3px 0 0 #0B1630) drop-shadow(0 3px 0 #0B1630) drop-shadow(0 -3px 0 #0B1630) drop-shadow(3px 6px 0 #0B1630)}
}
.cifra .micro{font-family:var(--titulo);font-weight:700;font-size:var(--fs-display);color:#FFF8E6;
  text-shadow:-2px 0 0 #0B1630,2px 0 0 #0B1630,0 -2px 0 #0B1630,0 2px 0 #0B1630,2px 3px 0 #0B1630}
#fin .cifra + .micro{font-family:var(--titulo);font-weight:700;font-size:var(--fs-display);opacity:1;color:#FFF8E6;
  text-shadow:-2px 0 0 #0B1630,2px 0 0 #0B1630,0 -2px 0 #0B1630,0 2px 0 #0B1630}
/* ELIGE TU PISTA, con el mismo fondo que la portada: al darle a JUGAR no se
   oscurece. Las tarjetas ya llevan su propio fondo, y el titular su contorno. */
#pistas{background:linear-gradient(rgba(10,22,48,.55),rgba(10,22,48,.2) 30%,rgba(10,22,48,0) 50%,rgba(10,22,48,0) 66%,rgba(10,22,48,.3) 80%,rgba(10,22,48,.7))}

/* la cifra del final, legible: amarilla lisa (sin franjas) con contorno grueso */
.cifra b{background:none !important;-webkit-text-fill-color:#FFD23F !important;color:#FFD23F;filter:none !important;
  text-shadow:-4px 0 0 #0B1630,4px 0 0 #0B1630,0 -4px 0 #0B1630,0 4px 0 #0B1630,-4px -4px 0 #0B1630,4px -4px 0 #0B1630,-4px 4px 0 #0B1630,4px 4px 0 #0B1630,4px 9px 0 #0B1630}
/* PERSONAS EN LA BAJADA VERDE, en una sola línea pegada a la cifra */
#fin .donde{margin-top:-4px;font-family:var(--titulo);font-weight:700;font-size:var(--fs-display);line-height:1.1;letter-spacing:.02em;opacity:1;color:#FFF8E6;
  text-shadow:-2px 0 0 #0B1630,2px 0 0 #0B1630,0 -2px 0 #0B1630,0 2px 0 #0B1630,2px 3px 0 #0B1630}
#fin .donde b{color:inherit}   /* toda la línea en blanco, también la pista */
/* la ayuda de la partida, sin recuadro: solo el icono y el texto, con
   contorno para leerse sobre la nieve */
#pista-ayuda{background:none;box-shadow:none;padding:0;width:280px}
#pista-ayuda .movil{filter:drop-shadow(2px 0 0 #0B1630) drop-shadow(-2px 0 0 #0B1630) drop-shadow(0 2px 0 #0B1630) drop-shadow(0 -2px 0 #0B1630) drop-shadow(2px 3px 0 #0B1630)}
#pista-ayuda b{font-family:var(--titulo);font-weight:700;font-size:var(--fs-display);line-height:1.05;color:#FFD23F;
  text-shadow:-3px 0 0 #0B1630,3px 0 0 #0B1630,0 -3px 0 #0B1630,0 3px 0 #0B1630,-2px -2px 0 #0B1630,2px -2px 0 #0B1630,-2px 2px 0 #0B1630,2px 2px 0 #0B1630,2px 5px 0 #0B1630}
#pista-ayuda i{font-family:var(--titulo);font-weight:700;font-size:var(--fs-eti);color:#FFF8E6;opacity:1;
  text-shadow:-2px 0 0 #0B1630,2px 0 0 #0B1630,0 -2px 0 #0B1630,0 2px 0 #0B1630,2px 3px 0 #0B1630}
#ayuda-nivel{box-shadow:0 0 0 2px #0B1630;background:rgba(11,22,48,.5)}

/* la barra del objetivo bajo el contador: diez bloques */
#capas{gap:2px}
#capas i{width:9px;height:8px;background:rgba(11,22,48,.35);box-shadow:0 0 0 1px #0B1630}
#capas i.on{background:var(--acento)}
#capas.lleno i{background:#FFD23F}
#capas.lleno{animation:arcadeTexto .5s steps(1) 3}
#capas b{display:none}
#fin #fin-sub{margin-top:-6px}

/* ============ v14 · títulos grandes y cifra en Silkscreen Bold ============
   Píxel, gorda y ancha. Al ser tan ancha los tamaños salen de cuántas letras
   tiene que caber: CLASSEMENT (10) en el ranking y 1 941 (5) en la cifra. */
:root{--grande:'Silkscreen','Press Start 2P',monospace}
/* apretada: Silkscreen trae mucho aire entre letras y se leía despegada */
.titular,.cifra b{font-family:var(--grande);font-weight:700;letter-spacing:-.13em;word-spacing:-.1em}
#pistas .titular,#fin .titular{font-size:var(--fs-titulo);line-height:.95}
#ranking .titular{font-size:var(--fs-titulo);line-height:.95}
.cifra b{font-size:var(--fs-cifra);line-height:.95;letter-spacing:-.1em}
/* ============ el objetivo, junto al contador ============
   BRUNCHERS / 186/380. El objetivo en pequeño a la derecha del número; al
   llegar, amarillo y tres parpadeos. */
#capas{display:none !important}
.chapa .cuenta{display:flex;align-items:baseline;gap:6px;margin-top:6px}
.chapa .cuenta b{margin-top:0}
#n-obj{font-style:normal;font-family:var(--pixel);font-size:var(--fs-boton);line-height:1;color:var(--crema);opacity:.9;text-shadow:var(--contorno)}
.chapa.lleno #n-obj{color:#FFD23F;opacity:1;animation:arcadeTexto .5s steps(1) 3}
/* v14 · el logo nuevo (design/logo/new-logo.png): más ancho y sin corona. Ocupa
   todo el ancho, apoyado abajo; la bola, detrás, asoma por arriba a la derecha. */
.la-texto{left:0;top:37.4%;width:100%}
.la-bola{left:47%;top:5%;width:50%}   /* newball.png, algo más baja */
.chapa{border-left:0;padding-left:0}

/* Silkscreen en tamaños medios (DJs, frases destacadas): algo apretada, como
   en los títulos, para que no se lea despegada */
.pista .etiq strong,.rank b,#fin .donde,#fin-sub,#fin .micro.naranja,.cifra .micro,#pista-ayuda b{letter-spacing:-.06em;word-spacing:-.05em}

/* los DJs, grandes y en dos líneas: nombre y apellido */
.pista .etiq strong{white-space:nowrap;font-size:var(--fs-display-l) !important;line-height:.95;margin-top:4px}
.la-bola img{image-rendering:pixelated}

/* v14 · el pie, transparente: texto en azul noche con contorno blanco */
#marco{background:none}
/* sin franja: el texto lleva su propio contorno claro para leerse sobre la
   nieve, sobre el azul y sobre lo que pase por debajo al hacer scroll */
#marco b{text-shadow:-2px 0 0 #fff,2px 0 0 #fff,0 -2px 0 #fff,0 2px 0 #fff}
#marco b{color:#0B1630}
#marco b:nth-of-type(2){color:#16338C}
#marco::before{background:repeating-linear-gradient(90deg,#16338C 0 6px,transparent 6px 10px);opacity:.7}

/* v14 · los DJs sobre el paisaje (design/djs/fondo.png): el retrato recortado
   delante y la montaña detrás, con un encuadre distinto en cada tarjeta */
.pista:nth-child(-n+4)::before{image-rendering:pixelated;background-repeat:no-repeat,no-repeat;
  background-size:cover,auto 175%}
.pista:nth-child(1)::before{background-image:url(assets/dj-verde.png),url(assets/fondo-djs.jpg);background-position:center 10%,4% 30%}
.pista:nth-child(2)::before{background-image:url(assets/dj-azul.png),url(assets/fondo-djs.jpg);background-position:center 10%,38% 45%}
.pista:nth-child(3)::before{background-image:url(assets/dj-roja.png),url(assets/fondo-djs.jpg);background-position:center 10%,70% 55%}
.pista:nth-child(4)::before{background-image:url(assets/dj-negra.png),url(assets/fondo-djs.jpg);background-position:center 10%,100% 35%}

/* el pie es transparente: lo que se desplaza se desvanece antes de llegar a él,
   en vez de pasarle por debajo */
.pantalla:not(.plena){
  -webkit-mask-image:linear-gradient(to top,transparent calc(44px + var(--safe-b)),#000 calc(64px + var(--safe-b)));
  mask-image:linear-gradient(to top,transparent calc(44px + var(--safe-b)),#000 calc(64px + var(--safe-b)))}

/* final: PERSONAS EN LA BAJADA X en amarillo; el objetivo (OBJETIVO 380 ·
   TE FALTARON 96) en blanco */
#fin .donde{color:#FFD23F}
#fin #fin-sub{color:#FFF8E6}

/* el pie: solo el texto. Sin raya, y no sale durante el arranque ni la intro */
#marco::before{display:none}
body.en-intro #marco{display:none}
@media (max-width:380px){ #marco b{font-size:7px;letter-spacing:0} }

/* objetivo conseguido: el contador entero (BRUNCHERS, número y objetivo) se
   pone amarillo y parpadea unos segundos */
.chapa.lleno .micro,.chapa.lleno #n-gente,.chapa.lleno #n-obj{color:#FFD23F}
.chapa.lleno #n-obj{animation:none}
.chapa.lleno{animation:arcadeTexto .4s steps(1) 8}
@media (prefers-reduced-motion:reduce){ .chapa.lleno{animation:none} }

/* el pie, definitivo: solo texto negro. Nada debajo: fuera el desvanecido de
   las pantallas (dejaba una banda clara) y el contorno blanco */
.pantalla:not(.plena){-webkit-mask-image:none;mask-image:none}
#marco b,#marco b:nth-of-type(2){color:#000;text-shadow:none}

/* el pie: blanco con contorno negro, se lee sobre la nieve y sobre lo oscuro */
#marco b,#marco b:nth-of-type(2){color:#fff;text-shadow:-1px 0 0 #000,1px 0 0 #000,0 -1px 0 #000,0 1px 0 #000,1px 1px 0 #000}

/* ============ v15 · el juego en 8 bits ============
   El lienzo mide lo que la pantalla de la consola (unas 250 líneas); aquí se
   estira sin suavizar. */
#lienzo{image-rendering:pixelated;image-rendering:crisp-edges}

/* los efectos de pantalla, también a píxel: nada de degradados suaves encima
   del juego */
#vineta{display:none}
/* el B! DROP: un marco de bloques del color del B!, que late */
#boost.on{background:none;
  box-shadow:inset 0 0 0 14px var(--b);   /* solo el color del B!, sin la raya oscura */
  animation:parpadeo8 .75s steps(1) 1,latido8 .48s steps(1) .75s infinite}
@keyframes parpadeo8{0%,24%{opacity:.9}25%,49%{opacity:0}50%,74%{opacity:.8}75%,100%{opacity:0}}
@keyframes latido8{0%,49%{opacity:.35}50%,100%{opacity:.7}}
/* las salpicaduras de nieve: círculos de borde duro, sin desenfoque */
#salpica i{filter:none;border-radius:0;
  background:radial-gradient(circle,#fff 0 38%,#E1E9F1 38% 52%,transparent 52%);
  -webkit-mask:repeating-linear-gradient(0deg,#000 0 6px,transparent 6px 8px),repeating-linear-gradient(90deg,#000 0 6px,transparent 6px 8px);
  -webkit-mask-composite:source-in;mask-composite:intersect}
#salpica i.on{animation:salpica8 1.1s steps(6) both}
@keyframes salpica8{0%{opacity:0;transform:scale(calc(var(--s,1)*.4))}12%{opacity:1;transform:scale(var(--s,1))}100%{opacity:0;transform:scale(calc(var(--s,1)*1.15)) translateY(18px)}}

/* ============ v15 · los dos modos de ELIGE TU PISTA ============ */
.modos{display:flex;gap:6px;margin-left:auto}
.modo{display:flex;align-items:center;justify-content:center;box-sizing:content-box;width:26px;height:22px;padding:0;
  border:8px solid transparent;border-image:var(--marco-apagado) 8 fill / 8px stretch;color:#8093AE;
  filter:drop-shadow(0 4px 0 rgba(6,12,28,.55))}
.modo svg{display:block;height:16px;width:auto}
.modo.activo{border-image-source:var(--marco-ambar);color:#FFD23F}
.modo:not(.activo):active{transform:translateY(3px)}

/* lo del modo sorpresa, oculto por defecto */
.pista .oculto-dj,.pista .incognita{display:none}
/* tarjeta tapada: sin DJ, sin texto, sin foto; una interrogación que parpadea */
.tarjetas.sorpresa .pista:not(.secreta):not(.desvela):not(.vista) .etiq > strong:not(.oculto-dj),
.tarjetas.sorpresa .pista:not(.secreta):not(.desvela):not(.vista) .etiq > small:not(.oculto-dj){display:none}
.tarjetas.sorpresa .pista:not(.secreta):not(.desvela):not(.vista) .oculto-dj{display:block}
.tarjetas.sorpresa .pista:not(.secreta):not(.desvela):not(.vista) small.oculto-dj{color:#FFD23F;font-family:var(--pixel);font-size:var(--fs-mini);line-height:1.6;text-transform:uppercase}
.tarjetas.sorpresa .pista:not(.secreta):not(.desvela):not(.vista)::before{
  background:repeating-linear-gradient(45deg,#16338C 0 10px,#0E1B33 10px 20px) !important;image-rendering:pixelated}
.tarjetas.sorpresa .pista:not(.secreta):not(.desvela):not(.vista) .incognita{display:block;position:absolute;left:50%;right:0;top:0;bottom:0;z-index:1;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--grande);font-weight:700;font-size:92px;line-height:1;color:#FFD23F;
  text-shadow:-4px 0 #0B1630,4px 0 #0B1630,0 -4px #0B1630,0 4px #0B1630,4px 8px #0B1630;
  animation:arcadeTexto 1.1s steps(1) infinite}
/* al desvelar: la tarjeta se enciende a golpes y las demás se apagan */
.tarjetas.desvelando .pista:not(.desvela){opacity:.35;filter:grayscale(.6)}
.pista.desvela{z-index:3;animation:desvela 2s steps(1) both}
@keyframes desvela{
  0%{transform:scale(1)} 6%{transform:scale(1.06);filter:brightness(2.2)} 12%{filter:none}
  18%{filter:brightness(1.8)} 24%{filter:none;transform:scale(1.04)} 100%{transform:scale(1.04)}}
@media (prefers-reduced-motion:reduce){ .pista.desvela{animation:none} .tarjetas.sorpresa .incognita{animation:none} }

/* la interrogación, en píxel (SVG) y por encima del chip de objetivo */
.tarjetas.sorpresa .pista:not(.secreta):not(.desvela):not(.vista) .incognita{font-size:0;align-items:flex-start;padding-top:14px;padding-right:6px}
.incognita svg{display:block;height:74px;width:auto;filter:drop-shadow(3px 4px 0 #0B1630)}
.pista .etiq strong.oculto-dj{font-size:20px !important}
.tarjetas.sorpresa .pista:not(.secreta):not(.desvela):not(.vista) small.oculto-dj{margin-top:4px;text-shadow:-1px 0 #0B1630,1px 0 #0B1630,0 -1px #0B1630,0 1px #0B1630,1px 1px #0B1630}

/* ============ v15 · el panel de permisos, dentro de la pista ============ */
#permiso-pista{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(320px,calc(100vw - 40px));z-index:6;
  display:flex;flex-direction:column;align-items:stretch;gap:10px;padding:14px 16px 10px;text-align:center;color:var(--crema);
  border:8px solid transparent;border-image:var(--marco-crema) 8 fill / 8px stretch;
  filter:drop-shadow(0 6px 0 rgba(6,12,28,.55))}
#permiso-pista .movil{width:64px;height:40px;margin:0 auto;fill:none;stroke:var(--crema);stroke-width:4;stroke-linecap:square;shape-rendering:crispEdges}
#permiso-pista .movil path[d^="M8 20"],#permiso-pista .movil path[d^="M56 20"]{fill:var(--crema)}
#permiso-pista b{font-family:var(--grande);font-weight:700;font-size:var(--fs-display-l);letter-spacing:-.06em;line-height:1;color:#FFD23F;
  text-shadow:-2px 0 #0B1630,2px 0 #0B1630,0 -2px #0B1630,0 2px #0B1630,2px 3px #0B1630}
#permiso-pista p{font-family:var(--crt);font-size:var(--fs-texto-s);line-height:1.05;margin:0 0 4px}
#permiso-pista .bt{animation:none}
#permiso-pista .enlace{padding:6px 0}

/* v16 · iconos de girar y soplar en píxel (rejilla de 17 px, a ×3 exacto) */
#pista-ayuda .movil.pix,#permiso-pista .movil.pix{fill:var(--crema);stroke:none;image-rendering:pixelated;
  filter:drop-shadow(3px 0 0 #0B1630) drop-shadow(-3px 0 0 #0B1630) drop-shadow(0 3px 0 #0B1630) drop-shadow(0 -3px 0 #0B1630)}
#pista-ayuda .movil.pix{width:51px;height:30px}
#pista-ayuda .soplo.pix{width:51px;height:27px}
#pista-ayuda .movil.pix path{fill:var(--crema)}
#permiso-pista .movil.pix{width:68px;height:40px}
#permiso-pista .movil.pix path{fill:var(--crema)}

/* ============ v16 · los créditos ============ */
.cr-toque{position:absolute;right:-8px;top:-8px;width:64px;height:60px;background:none;border:0;padding:0;opacity:0}
#fin .cabecera{position:relative}
#creditos{position:fixed;inset:0;z-index:50;overflow:hidden;background:#0B1630;color:#FFF8E6;text-align:center}
#creditos .cr-fondo{position:absolute;inset:0;background:url(assets/fondo-djs.jpg) 0 50%/auto 100% repeat-x;image-rendering:pixelated;
  animation:crPanorama 90s linear infinite alternate}
@keyframes crPanorama{from{background-position:0 50%}to{background-position:-1400px 50%}}
#creditos .cr-velo{position:absolute;inset:0;background:rgba(11,22,48,.55)}
.cr-rollo{position:absolute;left:0;right:0;top:0;padding:0 20px}
.cr-texto{will-change:transform;transform:translateY(100vh)}
.cr-texto p{font-family:var(--pixel);font-size:var(--fs-eti);line-height:1.8;letter-spacing:.02em;margin:0;
  text-shadow:-2px 0 #0B1630,2px 0 #0B1630,0 -2px #0B1630,0 2px #0B1630,2px 2px #0B1630}
.cr-texto p.hueco-cr{height:28px}
.cr-texto p.t{font-family:var(--grande);font-weight:700;font-size:var(--fs-display-l);letter-spacing:-.06em;line-height:1.1;color:#FFD23F;
  text-shadow:-3px 0 #0B1630,3px 0 #0B1630,0 -3px #0B1630,0 3px #0B1630,3px 5px #0B1630}
.cr-texto p.c{font-family:var(--grande);font-weight:700;font-size:44px;letter-spacing:-.08em;line-height:1.05;color:#FFD23F;
  text-shadow:-3px 0 #0B1630,3px 0 #0B1630,0 -3px #0B1630,0 3px #0B1630,3px 6px #0B1630}
.cr-texto p.m{color:#6FB8FF;font-size:var(--fs-mini)}
.cr-texto p.n{font-family:var(--grande);font-weight:700;font-size:var(--fs-display-l);letter-spacing:-.04em;line-height:1.15}
.cr-ultimo p{font-family:var(--grande);font-weight:700;font-size:28px;letter-spacing:-.05em;line-height:1.1;color:#FFF8E6}
.cr-ultimo p.t{font-size:var(--fs-display);color:#FFD23F;margin-top:6px}
.cr-ultimo span{display:inline-block;transition:transform .7s steps(8),opacity .7s steps(4)}
.cr-ultimo span.vuela{opacity:0}
.cr-bola{position:absolute;left:0;top:40%;width:180px;height:auto;image-rendering:pixelated;z-index:2;display:none;
  filter:drop-shadow(0 6px 0 rgba(11,22,48,.6))}
.cr-bola.rueda{display:block}
.cr-negro{position:absolute;inset:0;z-index:3;background:#000;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;
  opacity:0;pointer-events:none;transition:opacity .5s steps(5)}
.cr-negro.on{opacity:1;pointer-events:auto}
#cr-logo{width:min(86vw,396px);height:auto;aspect-ratio:132/20;image-rendering:pixelated}
.cr-insert{font-family:var(--pixel);font-size:var(--fs-destacado);color:#FFF8E6;text-decoration:none;padding:10px 6px;visibility:hidden}
.cr-insert.on{visibility:visible;animation:arcadeTexto 1s steps(1) infinite}
.cr-insert svg{display:inline-block;width:18px;height:18px;vertical-align:-2px;margin-left:6px;color:#FFD23F}
.cr-volver{visibility:hidden;width:auto;color:#8093AE}
.cr-volver.on{visibility:visible}
.cr-salir{position:absolute;left:12px;top:calc(12px + var(--safe-t));z-index:4}
@media (prefers-reduced-motion:reduce){ #creditos .cr-fondo{animation:none} .cr-insert.on{animation:none} }

/* créditos v2: la firma ACHOS! en tres colores, el remate en grande y el corazón */
.cr-texto p.a0,.cr-texto p.a1,.cr-texto p.a2{font-family:var(--grande);font-weight:700;font-size:var(--fs-display-l);letter-spacing:-.05em;line-height:1.15;
  text-shadow:-3px 0 #0B1630,3px 0 #0B1630,0 -3px #0B1630,0 3px #0B1630,3px 4px #0B1630}
.cr-texto p.a0{color:#FFD23F} .cr-texto p.a1{color:#FF3D8A} .cr-texto p.a2{color:#6FE6FF}
.cr-texto p.g{font-family:var(--grande);font-weight:700;font-size:30px;letter-spacing:-.06em;line-height:1.05;color:#FFF8E6;
  text-shadow:-3px 0 #0B1630,3px 0 #0B1630,0 -3px #0B1630,0 3px #0B1630,3px 5px #0B1630}
.cr-texto p.m{margin-top:4px}
.cr-corazon{display:inline-block;width:22px;height:19px;vertical-align:-2px;filter:drop-shadow(2px 2px 0 #0B1630)}

/* v17 · la tarjeta de una fecha aún cerrada */
.pista.porfecha::before{filter:grayscale(.8) brightness(.8)}
.pista.porfecha .etiq strong{color:#B6C3D4}
.pista.porfecha .etiq small{color:#FFD23F}

/* v17 · modo vídeo (?video=1): solo el juego, sin interfaz */
body.modo-video #capa,body.modo-video #hud,body.modo-video #marco,body.modo-video #grano,
body.modo-video #motas,body.modo-video #aviso-flash,body.modo-video #creditos{display:none !important}

/* v17 · la pista del line up: ámbar, la última antes de la secreta */
.pista.lineup::before{background:repeating-linear-gradient(-45deg,rgba(245,168,58,.35) 0 14px,transparent 14px 28px),linear-gradient(#7A4A12,#3A2408) !important}
.pista.lineup .etiq strong{color:#FFD23F}
.pista.lineup .objetivo b{color:#FFD23F}

/* v17 · fuera los retratos de los DJs de las tarjetas: mientras no haya line up,
   la foto es el paisaje y punto */
.pista:nth-child(1)::before,.pista:nth-child(2)::before,
.pista:nth-child(3)::before,.pista:nth-child(4)::before{
  background-image:url(assets/fondo-djs.jpg) !important}
.pista:nth-child(1)::before{background-position:4% 30% !important}
.pista:nth-child(2)::before{background-position:38% 45% !important}
.pista:nth-child(3)::before{background-position:70% 55% !important}
.pista:nth-child(4)::before{background-position:100% 35% !important}

/* la tarjeta del line up nunca va tapada por el modo sorpresa */
.tarjetas.sorpresa .pista.lineup .etiq > strong,.tarjetas.sorpresa .pista.lineup .etiq > small{display:block !important}
.tarjetas.sorpresa .pista.lineup .incognita{display:none !important}

/* V19: marca vectorial, llamada a registro y salida voluntaria de la infinita. */
#intro .logo-grande{width:min(86vw,620px);image-rendering:auto;opacity:1}
.bt.amarillo{--marco:var(--marco-amarillo);color:var(--navy);background:var(--amarillo);text-shadow:none}
#gana{margin:auto;width:min(420px,calc(100vw - 36px));max-height:calc(100dvh - 40px);overflow:auto;
  padding:24px 20px 16px;border:4px solid var(--amarillo);background:#102348;color:var(--crema);
  box-shadow:8px 8px 0 #050d21;text-align:center}
#gana[open]{display:flex;flex-direction:column;gap:18px}
#gana::backdrop{background:rgba(3,10,26,.78)}
#gana b{font-family:var(--titulo);font-size:clamp(26px,7vw,34px);line-height:1.15;color:var(--amarillo)}
#gana p{font-size:25px;line-height:1.15}
#gana .enlace{color:var(--crema);padding:8px 0}
#fin #b-ranking{animation:none;opacity:1;transform:none;margin-top:4px}
#fin-envio:empty,#correo-estado:empty{display:none}
#correo-estado{color:var(--amarillo);opacity:1;line-height:1.2!important}
#btn-guardar{display:none;position:absolute;right:19px;top:calc(70px + var(--safe-t));max-width:145px;
  min-height:44px;padding:10px 12px;background:var(--amarillo);border:3px solid var(--navy);
  color:var(--navy);font-family:var(--pixel);font-size:9px;line-height:1.6;text-align:center}
#hud.sinfin:not(.acabando) #btn-guardar{display:block}
#fin-envio{margin:0;line-height:1.15!important}
button:disabled{opacity:.55;cursor:wait}

/* La frase del resultado ocupa dos líneas para dejar el registro a la vista. */
#fin .titular{font-size:clamp(24px,7vw,36px);line-height:1.15}

/* V20: marca Andorra blanca en todas las pantallas. */
.logo,.cabecera .logo{width:160px;aspect-ratio:1563/216;background:transparent;image-rendering:auto}
.logo{background:#fff}
.cabecera .logo::before{background:url(assets/logo-brunch-andorra-blanco.svg) center/contain no-repeat}
#cr-logo{aspect-ratio:1563/216;image-rendering:auto}
#portada .centro .presenta-marca{position:absolute;left:0;right:0;bottom:100%;margin-bottom:24px;text-align:center}
#portada .centro .presenta-marca .presenta{position:static;margin:8px 0 0;opacity:1;animation:none}
.pista[data-pista]::before{background-image:var(--foto)!important;background-position:center!important;background-size:cover}
.secreta-abierta em{animation:premio 1.5s steps(1) infinite;line-height:1.5;font-size:var(--fs-eti)}
@keyframes premio{0%,65%{color:#FFD23F;opacity:1}66%,100%{color:#FFF8E6;opacity:.65}}
@media(prefers-reduced-motion:reduce){.secreta-abierta em{animation:none}}
#b-compartir{font-size:clamp(10px,2.9vw,14px);line-height:1.5}

.popup-marca{width:min(220px,90%);height:auto;align-self:center}

/* Copos pequeños en el centro y los laterales, con un destello breve visible. */
#salpica i{width:clamp(14px,3.8vw,30px);height:clamp(14px,3.8vw,30px)}
#salpica i.on{animation:salpicaDiscreta .65s ease-out both}
@keyframes salpicaDiscreta{0%{opacity:0;transform:scale(calc(var(--s,1)*.65))}18%{opacity:.9;transform:scale(var(--s,1))}55%{opacity:.6}100%{opacity:0;transform:scale(calc(var(--s,1)*.85)) translateY(14px)}}

/* Ranking público por pista: consultar y registrar son acciones separadas. */
.pista-ficha{display:flex;flex-direction:column;gap:0;margin-bottom:8px}
.ranking-pista{background:var(--navy);border:2px solid var(--filete);border-top:0;min-height:44px;margin:0;color:var(--crema)}
#rank-pista{width:100%;height:62px;min-height:62px;margin:8px 0 20px;padding:0 42px 0 12px;border:2px solid var(--acento);border-radius:0;background:var(--navy);color:var(--crema);font-family:var(--pixel);font-size:var(--fs-eti);line-height:1.15;white-space:nowrap;overflow:visible}
#ranking .tabla{min-height:220px;max-height:52vh}
#rank-titulo-pista{font-size:var(--fs-boton);line-height:1.5;color:var(--amarillo);margin:0 0 12px}
.pista.sin-fecha .etiq>strong{font-size:clamp(10px,3.2vw,13px)!important;line-height:1.5;letter-spacing:0}
#b-ranking-pistas,#b-ver-ranking{font-size:var(--fs-eti)}

#portada #pie-util{margin-bottom:0}
#b-ranking-home{font-size:var(--fs-mini);min-height:40px;margin:0 0 8px}
@media(max-height:620px){#portada .centro{top:40%}}