/* survival-hud.css — el marcador de Supervivencia: el salpicadero (elegido 30-sep-2026).
 * Lo monta games/survival/hud.js (ahí está el porqué). Todo lo que se anima es
 * opacity o transform / scale / rotate / translate sueltas; nada de filtros ni
 * sombras en bucle.
 */

html[data-sv-hud] #game .top { gap: 6px; align-items: center; min-height: 0; }
html[data-sv-hud] #game .rec { padding: 4px 9px; flex: none; }
html[data-sv-hud] #game .rec .n { font-size: 17px; }

/* ═════════ VIDAS ═════════ */
.svh-vidas { --svh-v: 44px; display: flex; align-items: center; gap: 2px; flex: none; }
.svh-v { position: relative; display: block; height: var(--svh-v); flex: none; }
.svh-v img { display: block; height: 100%; width: auto; pointer-events: none; user-select: none; -webkit-user-drag: none; }
.svh-late { position: relative; display: block; height: 100%; transform-origin: 50% 60%; transition: opacity .2s; }
.svh-resto { position: absolute; left: 50%; top: 50%; translate: -50% -50%; opacity: 0; transition: opacity .35s ease .05s; }
.svh-corazon .svh-resto { height: 100% !important; }

/* muere: la pieza la coge el canvas (se agrieta y revienta); aquí desaparece */
.svh-v.svh-muerto .svh-late { opacity: 0; }
.svh-v.svh-rompiendo .svh-late { transition: none; }
.svh-v.svh-roto .svh-resto { opacity: 1; }
.svh-vidas.svh-sacude { animation: svhSacude .42s cubic-bezier(.3,.7,.3,1); }
@keyframes svhSacude { 0% { translate: 0 0; } 15% { translate: -5px 1px; } 30% { translate: 5px -1px; } 45% { translate: -4px 0; } 60% { translate: 3px 0; } 80% { translate: -1px 0; } 100% { translate: 0 0; } }

/* el último que queda late (lub-dub) */
.svh-v.svh-ultimo .svh-late { animation: svhLatido .95s cubic-bezier(.3,.6,.4,1) infinite; }
@keyframes svhLatido { 0% { scale: 1; } 10% { scale: 1.2; } 22% { scale: .97; } 34% { scale: 1.13; } 50% { scale: 1; } 100% { scale: 1; } }

/* la calavera: apagada hasta que es lo único que te queda; entonces arde */
.svh-calavera { --svh-v: 49px; margin-left: 2px; }
.svh-calavera .svh-viva { position: absolute; inset: 0; opacity: 0; transition: opacity .25s; }
.svh-calavera .svh-apagada { opacity: .9; }
.svh-aura { position: absolute; left: 50%; top: 46%; width: 240%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(255,210,120,1) 0%, rgba(255,120,30,.9) 20%, rgba(255,40,10,.55) 40%, rgba(160,0,0,0) 66%); opacity: 0; }
.svh-calavera.svh-encendida .svh-viva { opacity: 1; }
.svh-calavera.svh-encendida .svh-aura { animation: svhAura .95s ease-in-out infinite; }
@keyframes svhAura { 0%, 100% { opacity: .45; scale: .85; } 12% { opacity: 1; scale: 1.08; } 40% { opacity: .7; scale: .95; } }
.svh-calavera.svh-muerto .svh-aura { animation: none; opacity: 0; }

/* el borde de la pantalla late con el corazón (la viñeta roja del juego) */
#game.svh-tension .danger-veil { animation: svhVelo .95s cubic-bezier(.3,.6,.4,1) infinite !important; }
@keyframes svhVelo { 0% { opacity: .35; } 10% { opacity: 1; } 22% { opacity: .5; } 34% { opacity: .85; } 60%, 100% { opacity: .35; } }

/* ═════════ RACHA (velocímetro) ═════════ */
.svh-racha { position: relative; flex: none; }
.svh-a .svh-dial { --svh-dial: 96px; --svh-ang: -135deg; position: relative; width: var(--svh-dial); height: var(--svh-dial); }
.svh-dial > img { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.svh-esfera { filter: drop-shadow(0 4px 8px rgba(0,0,0,.7)); }
.svh-zona { opacity: 0; transition: opacity .3s; }
.svh-dial[data-zona="1"] .svh-zona[data-z="1"],
.svh-dial[data-zona="2"] .svh-zona[data-z="1"], .svh-dial[data-zona="2"] .svh-zona[data-z="2"],
.svh-dial[data-zona="3"] .svh-zona { opacity: 1; }
.svh-dial.svh-enciende { animation: svhEnciende .5s cubic-bezier(.3,1.5,.5,1); }
@keyframes svhEnciende { 0% { scale: 1; } 30% { scale: 1.16; } 60% { scale: .97; } 100% { scale: 1; } }

.svh-tiembla { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.svh-tiembla.svh-patada { animation: svhPatada .45s cubic-bezier(.3,1.4,.5,1); }
@keyframes svhPatada { 0% { rotate: 0deg; } 25% { rotate: 16deg; } 60% { rotate: -3deg; } 100% { rotate: 0deg; } }
.svh-a-tope .svh-tiembla:not(.svh-patada) { animation: svhVibra .11s linear infinite; }
@keyframes svhVibra { 0%, 100% { rotate: 0deg; } 50% { rotate: 1.6deg; } }
/* needle.webp: 32×142, el eje está al 84,6 % del alto */
.svh-aguja { position: absolute; height: 40%; aspect-ratio: 32 / 142; left: 50%; top: 50%;
  translate: -50% -84.6%; transform-origin: 50% 84.6%; transform: rotate(var(--svh-ang));
  transition: transform .55s cubic-bezier(.3,1.7,.45,1); }
.svh-aguja img { display: block; width: 100%; height: 100%; }
.svh-desplome .svh-aguja { transition: transform .75s cubic-bezier(.55,0,.35,1.35); }

/* el cuentakilómetros: tus aciertos */
.svh-ventana { position: absolute; z-index: 1; left: 50%; top: 61%; translate: -50% 0; padding: 2px 4px 1px; border-radius: 4px;
  background: linear-gradient(180deg, #050506, #15161a 55%, #050506);
  box-shadow: 0 0 0 1px rgba(210,215,225,.55), 0 0 0 2px rgba(0,0,0,.8), inset 0 2px 3px rgba(0,0,0,.9); }
.svh-a .svh-odo { display: flex; gap: 1px; font: 400 15px/1 'Archivo Black', system-ui, sans-serif; color: #f4f1ea; }
.svh-a .svh-col:last-child { color: #ffc24a; }
.svh-col { position: relative; display: block; height: 1.08em; width: .66em; overflow: hidden; text-align: center; }
.svh-tira { display: block; transition: transform .5s cubic-bezier(.25,1.5,.45,1); }
.svh-tira i { display: block; height: 1.08em; line-height: 1.08em; font-style: normal; }
.svh-odo.svh-suma { animation: svhSuma .42s cubic-bezier(.3,1.6,.5,1); }
@keyframes svhSuma { 0% { scale: 1; } 30% { scale: 1.3; } 100% { scale: 1; } }

/* la racha en una placa: x3 azul, x5 oro, x10 rojo */
.svh-chip { position: absolute; z-index: 3; right: -10px; top: -2px; padding: 3px 6px 2px; border-radius: 7px; pointer-events: none;
  font: 400 12px/1 'Archivo Black', system-ui, sans-serif; letter-spacing: .02em; color: #1a1206;
  background: linear-gradient(180deg, #e9e6df, #9c978d); box-shadow: 0 2px 6px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.7);
  opacity: 0; scale: .4; transition: opacity .2s, scale .25s cubic-bezier(.3,1.6,.5,1); }
.svh-chip.on { opacity: 1; scale: 1; }
.svh-chip[data-zona="1"] { color: #021a2a; background: linear-gradient(180deg, #bff0ff, #1fa8ff); box-shadow: 0 0 10px rgba(40,170,255,.8), inset 0 1px 0 rgba(255,255,255,.8); }
.svh-chip[data-zona="2"] { color: #2a1800; background: linear-gradient(180deg, #fff1b8, #f2b62a); box-shadow: 0 0 12px rgba(255,190,60,.85), inset 0 1px 0 rgba(255,255,255,.8); }
.svh-chip[data-zona="3"] { color: #fff4ea; background: linear-gradient(180deg, #ff9a6a, #d81f0e); box-shadow: 0 0 14px rgba(255,70,30,.95), inset 0 1px 0 rgba(255,220,200,.7); }
.svh-chip.svh-tic { animation: svhTic .3s cubic-bezier(.3,1.6,.5,1); }
@keyframes svhTic { 0% { scale: 1; } 40% { scale: 1.25; } 100% { scale: 1; } }
.svh-chip.svh-golpe { animation: svhGolpe .55s cubic-bezier(.3,1.4,.5,1); }
@keyframes svhGolpe { 0% { scale: 3; rotate: -14deg; opacity: 0; } 45% { scale: .85; rotate: 4deg; opacity: 1; } 70% { scale: 1.12; rotate: -1deg; } 100% { scale: 1; rotate: 0deg; } }
.svh-racha.svh-hito { animation: svhHito .5s cubic-bezier(.3,1.5,.5,1); }
@keyframes svhHito { 0% { scale: 1; } 25% { scale: 1.14; } 55% { scale: .96; } 100% { scale: 1; } }
.svh-racha.svh-desplome { animation: svhSacude .5s cubic-bezier(.3,.7,.3,1); }

/* ═════════ el canvas de los pedazos ═════════ */
.svh-fx { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2147482000; contain: strict; }

/* ═════════ arranque: el marcador se monta (se suma a survival-feel.css) ═════════ */
#game.sv-arranca .svh-v { animation: jfPop .42s cubic-bezier(.3,1.5,.5,1) both; }
#game.sv-arranca .svh-v:nth-child(2) { animation-delay: .08s; }
#game.sv-arranca .svh-v:nth-child(3) { animation-delay: .16s; }
#game.sv-arranca .svh-v:nth-child(4) { animation-delay: .28s; }
#game.sv-arranca .svh-racha { animation: jfPop .5s cubic-bezier(.3,1.5,.5,1) .36s both; }

/* ═════════ tamaños ═════════ */
@media (max-width: 370px) {
  .svh-vidas { --svh-v: 38px; }
  .svh-calavera { --svh-v: 42px; }
  .svh-a .svh-dial { --svh-dial: 86px; }
  html[data-sv-hud] #game .rec { padding: 4px 7px; }
}

@media (prefers-reduced-motion: reduce) {
  .svh-vidas, .svh-late, .svh-aura, .svh-dial, .svh-tiembla, .svh-odo, .svh-chip, .svh-racha,
  #game.svh-tension .danger-veil, #game.sv-arranca .svh-v, #game.sv-arranca .svh-racha { animation: none !important; }
  .svh-aguja, .svh-tira, .svh-zona, .svh-chip, .svh-resto { transition: none !important; }
  .svh-calavera.svh-encendida .svh-aura { opacity: .7; }
}