/* survival-v2.css — Supervivencia DGT como escena (21-sep-2026).
   Viste DOS pantallas del juego real sin tocar su lógica:
     · la subida de nivel (#wave) → el pórtico de la autovía de noche
     · el fin de partida (#over)  → el cartel de aviso junto al coche estrellado,
       y con récord el trofeo del pedestal
   Las medidas y el reparto los pone games/survival/escena.js, copiando el
   layout aprobado en games/dev-survival.html. Aquí solo el aspecto.
   Mientras la escena está puesta, el fondo plano del juego se retira: si no,
   su degradado rojo taparía la ilustración. */

.sv-escena{position:absolute;inset:0;z-index:0;background:#070406 no-repeat;pointer-events:none}
.sv-velo{position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(7,4,6,.55) 0%,rgba(7,4,6,0) 14%,rgba(7,4,6,0) 84%,rgba(7,4,6,.72) 100%)}

/* ── el rótulo en 3D (NIVEL, RÉCORD): ficheros con transparencia, arriba ── */
.sv-rot{position:absolute;left:50%;transform:translateX(-50%);z-index:2;pointer-events:none;
  display:none;width:min(74%,330px);height:clamp(52px,15vw,84px);
  background:center center / contain no-repeat;
  filter:drop-shadow(0 8px 20px rgba(0,0,0,.8))}
.sv-rot.sv-rot-on{display:block}
.wave.sv-on .sv-rot{top:calc(env(safe-area-inset-top,0px) + 12px);width:min(80%,360px)}
.over.sv-on .sv-rot{top:calc(env(safe-area-inset-top,0px) + 12px);width:min(84%,400px)}

/* ── subida de nivel: el rótulo va sobre el panel del pórtico ── */
.wave.sv-on{background:none}
.wave.sv-on .box{position:absolute;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:2px;text-align:center;padding:2% 4%;
  /* el panel es LED ámbar: el texto se enciende, no se imprime */
  color:#ffd9a0;text-shadow:0 0 8px rgba(255,150,60,.85)}
.wave.sv-on .box::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.34) 0 1px,transparent 1px 3px),
             repeating-linear-gradient(90deg,rgba(0,0,0,.24) 0 1px,transparent 1px 3px)}
.wave.sv-on .box > *{position:relative}
.wave.sv-on .n{font-size:1.9em;color:#fff2d8;text-shadow:0 0 14px rgba(255,170,70,.95)}
.wave.sv-on .lvl{margin-top:.25em;font-size:.55em;letter-spacing:.2em;color:#ff9a5a;text-shadow:0 0 8px rgba(255,120,40,.8)}
.wave.sv-on .sub{margin-top:.2em;font-size:.48em;color:#ffcf9a;font-weight:700;text-shadow:0 0 6px rgba(255,140,50,.6)}

/* ── fin de partida: la cifra vive dentro del cartel de la escena ── */
.over.sv-on,.over.sv-on.gold{background:none}
.over.sv-on .sk{display:none}                 /* el 💀 y el 🏆 los cuenta la ilustración */
.sv-cartel{position:absolute;z-index:1;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:.15em;line-height:1;text-align:center;padding:6%;pointer-events:none}
/* Colores tal y como se aprobaron en dev-survival.html: el cartel de la escena es
   OSCURO y metálico, así que la cifra se enciende sobre él; pintarla en negro la
   hacía invisible. */
.sv-cartel .big{font-family:'Syne','Archivo Black',sans-serif;font-weight:900;font-size:3.2em;line-height:1;
  color:#ff8a7a;text-shadow:0 0 22px rgba(255,80,60,.8),0 3px 0 #3a0d08;font-variant-numeric:tabular-nums}
.sv-cartel .biglbl{font-family:'DM Sans',system-ui,sans-serif;font-weight:800;font-size:max(12px,.55em);line-height:1.2;
  letter-spacing:.2em;text-transform:uppercase;color:#f3e7c9;text-shadow:0 2px 8px rgba(0,0,0,.9)}
/* Con récord, la cifra va DENTRO de la placa de latón y con el acabado que
   eligió Nico (rec10→2, «Al rojo vivo»): blanco en el centro y naranja quemando
   alrededor, como recién marcado a fuego. */
.over.sv-on.gold .sv-cartel{gap:0;justify-content:center;padding:4%}
.over.sv-on.gold .sv-cartel .big{font-size:3.1em;line-height:1;letter-spacing:-.04em;
  color:#fff6e8;-webkit-text-fill-color:#fff6e8;background:none;filter:none;
  text-shadow:0 0 6px #ffd9a0,0 0 16px #ff8a24,0 0 34px rgba(255,90,10,.9),0 0 60px rgba(255,60,0,.55)}
.over.sv-on.gold .sv-cartel .biglbl{display:block;font-size:max(12px,.42em);letter-spacing:.14em;white-space:nowrap;
  color:#ffd6a8;text-shadow:0 0 10px rgba(255,120,30,.8)}

.over.sv-on .ov-body{justify-content:flex-start}
.over.sv-on .ov-body > :first-child{margin-top:0}
.over.sv-on .ov-body > :last-child{margin-bottom:0}
.over.sv-on h2{text-shadow:0 2px 12px rgba(0,0,0,.95)}
.over.sv-on .nm,.over.sv-on .nr{text-shadow:0 1px 8px rgba(0,0,0,.9)}
/* Las cifras van sobre la carretera, no sobre un fondo plano: sin un respaldo
   propio los rótulos nivel/precisión/récord se perdían en la chapa del coche. */
.over.sv-on .stats{background:rgba(6,4,7,.62);border:1px solid rgba(255,255,255,.1);
  border-radius:14px;padding:10px 12px;backdrop-filter:blur(7px)}
.over.sv-on .stat .l{color:#d8d2c6}
/* «Compartir» y «Volver» iban en texto suelto: sobre la columna de fuego no se
   leían. Se les pone su chapa, como al resto. */
.over.sv-on .obtn{background:rgba(6,4,7,.62);border:1px solid rgba(255,255,255,.14);
  border-radius:99px;padding:8px 16px;backdrop-filter:blur(7px);text-shadow:0 2px 8px rgba(0,0,0,.9)}
.over.sv-on .stat .n{text-shadow:0 2px 10px rgba(0,0,0,.95)}

/* Las tres cifras en UNA fila. Con la ilustración detrás, el panel es más
   estrecho: con min-width:92px y wrap se partían en dos filas, y esos ~70 px de
   más dejaban "Reintentar" fuera de la pantalla en un móvil de 360. */
.over.sv-on .stats{flex-wrap:nowrap;gap:7px;width:100%}
.over.sv-on .stat{min-width:0;flex:1 1 0;padding:8px 6px}
.over.sv-on .stat .l{font-size:12px;letter-spacing:.04em}
.over.sv-on .stat .n{font-size:clamp(15px,4.6vw,20px)}

/* Con récord, el trofeo, la placa dorada y el confeti YA dicen que es un récord:
   repetirlo con un titular de dos líneas solo servía para echar "Reintentar"
   fuera de la pantalla en un móvil de 360. Se queda la cifra de cuánto has
   mejorado, en una línea. */
.over.sv-on.gold h2{display:none}
/* «¡NUEVO RÉCORD!» en texto sobra: lo dice el rótulo de oro de arriba. */
.over.sv-on.gold .nr{display:none}
.over.sv-on .nr{font-size:15px;line-height:1.25;margin-top:2px}
.over.sv-on h2{font-size:clamp(17px,5vw,21px);line-height:1.15}

/* El panel del pórtico recorta: si algún rótulo largo se pasara, se corta dentro
   del marco en vez de derramarse sobre la carretera. */
.wave.sv-on .box{overflow:hidden}
.wave.sv-on .n{white-space:nowrap}

/* La frase de debajo de las cifras («Tu primera marca…», «Te quedaste a…»)
   iba en oro suelto sobre la columna de fuego: a 15 px seguía sin leerse.
   Lleva la misma chapa oscura que las cifras (29-sep). */
.over.sv-on .nm,.over.sv-on .nr{background:rgba(6,4,7,.62);border:1px solid rgba(255,255,255,.1);
  border-radius:12px;padding:6px 12px;backdrop-filter:blur(7px)}