/* ==========================================================
   PULSO — "Monitor de Pulso"
   Pantalla de monitor: fondo casi negro, línea de señal verde
   fósforo, la zona crítica es lo único rojo. El oro/tinta de
   la versión anterior queda afuera — acá el contraste es de
   brillo (glow), no de grosor de pincel.
   ========================================================== */

:root {
  --fondo: #06090a;             /* pantalla apagada: negro casi puro */
  --linea: #39ff8f;             /* verde fósforo: la señal, el HUD, el texto */
  --critico: #ff3b3b;           /* rojo monitor: EXCLUSIVO de la zona crítica y el fallo */
  --pico: #ffcc33;              /* ámbar: SOLO para la zona x3 (pico) */
  --atenuado: #1f6b45;          /* verde apagado: estela y decorados */
  --atenuado-texto: #6fae86;    /* verde apagado legible (AA) para labels */
  --alerta: #eafff5;            /* casi blanco: SOLO para el aviso de nuevo récord */
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html, body {
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}

body {
  background: var(--fondo);
  color: var(--linea);
  font-family: "JetBrains Mono", monospace;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

/* Scanlines sutiles: la pantalla de un monitor nunca es un negro liso */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
  opacity: 0.5;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.35) 0px,
    rgba(0, 0, 0, 0.35) 1px,
    transparent 1px,
    transparent 3px
  );
}

#juego {
  position: fixed;
  inset: 0;
  cursor: pointer;
}

#lienzo {
  display: block;
  width: 100%;
  height: 100%;
}

/* ---------- HUD ---------- */

#hud {
  position: absolute;
  inset: 0;
  pointer-events: none;
  transition: opacity 0.15s steps(2, end);
}

/* Lectura de BPM: esquina superior derecha, como un monitor de signos vitales */
#columna-puntos {
  position: absolute;
  top: calc(env(safe-area-inset-top, 0px) + 26px);
  right: calc(env(safe-area-inset-right, 0px) + 16px);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}

#puntos {
  font-family: "JetBrains Mono", monospace;
  font-weight: 800;
  font-size: clamp(34px, 9vw, 56px);
  line-height: 1;
  color: var(--linea);
  text-shadow: 0 0 14px rgba(57, 255, 143, 0.65);
  transition: transform 0.08s steps(2, end);
}

#puntos.golpe {
  transform: scale(1.12);
}

.etiqueta-bpm {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--atenuado-texto);
}

/* Vidas: LEDs de estado — encendido = vida disponible, hueco = perdida */
#vidas {
  display: flex;
  flex-direction: row;
  gap: 6px;
  margin-top: 4px;
}

.vida {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: var(--linea);
  box-shadow: 0 0 6px rgba(57, 255, 143, 0.8);
  transition: background-color 0.1s steps(2, end), box-shadow 0.1s steps(2, end), opacity 0.1s steps(2, end);
}

.vida.perdida {
  background-color: transparent;
  border: 1.5px solid var(--atenuado-texto);
  box-shadow: none;
  opacity: 0.6;
}

/* Récord: abajo a la izquierda, apagado, chiquito */
#record-hud {
  position: absolute;
  left: calc(env(safe-area-inset-left, 0px) + 18px);
  bottom: calc(env(safe-area-inset-bottom, 0px) + 18px);
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--atenuado-texto);
}

.icono-onda {
  width: 26px;
  height: 15px;
  color: var(--atenuado);
}

/* ---------- Pantallas (menú / fin) ---------- */

.pantalla {
  position: absolute;
  inset: 0;
  background: var(--fondo);
  overflow: hidden;
  pointer-events: none;
  /* golpe seco, sin easing suave: acá todo es digital, no fluido */
  transition: opacity 0.12s steps(2, end);
}

.pagina {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  text-align: left;
  padding: 24px min(9vw, 72px);
  padding-top: calc(env(safe-area-inset-top, 0px) + 24px);
  gap: 14px;
}

/* Anillos concéntricos de fondo, tipo pantalla de radar, cortados por el borde */
.decor-anillos {
  position: absolute;
  z-index: 1;
  top: 4%;
  right: -34vmin;
  width: 88vmin;
  height: 88vmin;
  color: var(--linea);
  pointer-events: none;
}

.titulo {
  font-family: "JetBrains Mono", monospace;
  font-weight: 800;
  font-size: clamp(64px, 20vw, 150px);
  line-height: 0.95;
  letter-spacing: -0.02em;
  color: var(--linea);
  text-shadow: 0 0 22px rgba(57, 255, 143, 0.35);
}

.firma {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: clamp(12px, 3.5vw, 28px);
}

.icono-pulso {
  width: 34px;
  height: 20px;
  flex: none;
  color: var(--linea);
}

.firma-texto {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--atenuado-texto);
}

.instruccion {
  margin-top: 18px;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--linea);
  max-width: 30ch;
}

.record-menu {
  font-size: 13px;
  font-weight: 500;
  color: var(--atenuado-texto);
}

.cta {
  margin-top: 20px;
  display: inline-flex;
  flex-direction: column;
  gap: 3px;
  font-size: 17px;
  font-weight: 700;
  color: var(--linea);
}

.linea-pulso {
  width: 100%;
  height: 10px;
  color: var(--linea);
}

/* ---------- Fin ---------- */

.titulo-fin {
  font-family: "JetBrains Mono", monospace;
  font-weight: 800;
  font-size: clamp(48px, 14vw, 100px);
  line-height: 1;
  color: var(--linea);
  display: flex;
  align-items: baseline;
  gap: 14px;
}

.icono-plano {
  width: 0.42em;
  height: 0.42em;
  color: var(--critico);
  flex: none;
}

.sub-fin {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--atenuado-texto);
}

.resultado {
  margin-top: 14px;
}

/* Glitch de dos frames al mostrar el puntaje final: split RGB seco */
#fin:not(.oculto) .res-num {
  animation: glitchNumero 0.3s steps(2, end) 0.15s 2;
}

.res-num {
  font-family: "JetBrains Mono", monospace;
  font-weight: 700;
  font-size: clamp(72px, 22vw, 140px);
  line-height: 1;
  color: var(--linea);
}

@keyframes glitchNumero {
  0%, 100% { opacity: 1; text-shadow: none; }
  50% { opacity: 0.35; text-shadow: 2px 0 0 var(--critico), -2px 0 0 var(--linea); }
}

.res-label {
  margin-top: 4px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--atenuado-texto);
}

/* Nuevo récord: tag de alerta reconocida, parpadea como un LED */
.nuevo-record {
  display: inline-block;
  margin-top: 4px;
  padding: 7px 14px;
  border: 1.5px solid var(--linea);
  border-radius: 3px;
  color: var(--alerta);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  box-shadow: 0 0 14px rgba(57, 255, 143, 0.55);
  animation: parpadeoRecord 1.1s steps(2, end) infinite;
}

@keyframes parpadeoRecord {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* ---------- Utilidades ---------- */

/* Solo opacity: nunca togglear visibility en la misma regla que una
   transition de opacity (rompe la transición — queda clavada en 0 en
   Chrome). El bloqueo de interacción ya lo hace pointer-events: none
   en #hud y .pantalla; aria-hidden (seteado por JS) cubre accesibilidad. */
.oculto {
  opacity: 0;
}

/* Contenedor de AdSense (placeholder, sin script todavía) */
#ad-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  min-height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
  background: var(--fondo);
  border-top: 1px solid rgba(57, 255, 143, 0.18);
}