/* ============================================================================
   EL BOSQUE OBSERVA — HORROR ATMOSPHERE
   Verde fósforo decaído · Terror psicológico · No-tech, sí visceral
   iPad Safari + PC · Legibilidad máxima
============================================================================ */

/* --------------------------------------------------------------------------
   IMPORTS — Fuentes de Google (monospace legible + serif perturbador)
-------------------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=Creepster&display=swap');

/* --------------------------------------------------------------------------
   VARIABLES
-------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* Verde fósforo — orgánico, no neón */
  --fg:        #b8ffb8;   /* texto principal — cálido, no puro #00ff00 */
  --fg-bright: #e0ffe0;   /* énfasis máximo */
  --fg-dim:    #6dcc6d;   /* secundario */
  --fg-muted:  #2d6b2d;   /* decorativo */
  --fg-dark:   #0d2e0d;   /* bordes sutiles */

  --red:       #ff3333;
  --red-dim:   #991111;
  --amber:     #e8a000;
  --amber-dim: #8a5e00;

  --bg:        #020202;   /* negro casi puro */
  --bg-card:   #050a05;   /* panel ligeramente verde */
  --bg-corrupt:#070307;   /* tinte púrpura-negro para corrupción */

  --glow-sm:  0 0 6px rgba(184,255,184,0.4);
  --glow:     0 0 10px rgba(184,255,184,0.5), 0 0 25px rgba(184,255,184,0.15);
  --glow-lg:  0 0 14px rgba(184,255,184,0.6), 0 0 40px rgba(184,255,184,0.2);
  --glow-red: 0 0 10px rgba(255,51,51,0.6), 0 0 25px rgba(255,51,51,0.2);
  --glow-amb: 0 0 10px rgba(232,160,0,0.6), 0 0 25px rgba(232,160,0,0.2);

  /* Tipografía — legible primero */
  --font-body:  'Share Tech Mono', 'Courier New', Courier, monospace;
  --font-horror: 'Creepster', cursive;  /* solo para títulos grandes */

  --touch-min: 48px;
  --panel-pad: clamp(18px, 4vw, 32px);
}

/* Temas */
body.tema-rojo  {
  --fg:#ff6b6b; --fg-bright:#ffaaaa; --fg-dim:#cc3333;
  --fg-muted:#661111; --fg-dark:#220505;
  --bg-card:#0a0303; --glow:0 0 10px rgba(255,107,107,0.5),0 0 25px rgba(255,107,107,0.15);
}
body.tema-ambar {
  --fg:#ffd070; --fg-bright:#ffe8a0; --fg-dim:#cc8800;
  --fg-muted:#664400; --fg-dark:#221500;
  --bg-card:#0a0700; --glow:0 0 10px rgba(255,208,112,0.5),0 0 25px rgba(255,208,112,0.15);
}

/* --------------------------------------------------------------------------
   BASE HTML/BODY
-------------------------------------------------------------------------- */
html {
  height: 100%;
  overflow: hidden;
  touch-action: manipulation;
}

body {
  height: 100%;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 17px;          /* mínimo legible */
  line-height: 1.65;
  letter-spacing: 0.3px;   /* casi ninguno — legibilidad */
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
  user-select: none;
  -webkit-user-select: none;
}

/* Evitar zoom en iOS en inputs */
input, textarea, select { font-size: max(16px, 1em); }

/* --------------------------------------------------------------------------
   RUIDO DE FONDO — grano de película, no digital
-------------------------------------------------------------------------- */
#noise-canvas {
  position: fixed; inset: 0; z-index: 50;
  pointer-events: none; opacity: 0.055;
}

/* Mancha de corrupción — esquina superior izquierda, orgánica */
body::before {
  content: "";
  position: fixed;
  top: -60px; left: -60px;
  width: 220px; height: 220px;
  background: radial-gradient(ellipse at 30% 30%,
    rgba(80,0,0,0.18) 0%,
    transparent 70%
  );
  pointer-events: none;
  z-index: 51;
  animation: corrupt-drift 18s ease-in-out infinite alternate;
}
body::after {
  content: "";
  position: fixed;
  bottom: -40px; right: -40px;
  width: 180px; height: 180px;
  background: radial-gradient(ellipse at 70% 70%,
    rgba(0,60,0,0.12) 0%,
    transparent 70%
  );
  pointer-events: none;
  z-index: 51;
  animation: corrupt-drift 22s ease-in-out infinite alternate-reverse;
}
@keyframes corrupt-drift {
  0%   { transform: translate(0,0) scale(1); opacity: 1; }
  50%  { transform: translate(8px,12px) scale(1.08); opacity: 0.7; }
  100% { transform: translate(-5px,6px) scale(0.95); opacity: 0.9; }
}

/* --------------------------------------------------------------------------
   VIÑETA CRT — oval oscuro en bordes
-------------------------------------------------------------------------- */
#crt-vignette {
  position: fixed; inset: 0; z-index: 8000;
  pointer-events: none;
  background: radial-gradient(
    ellipse 75% 70% at 50% 50%,
    transparent 50%,
    rgba(0,0,0,0.45) 78%,
    rgba(0,0,0,0.9) 100%
  );
}

/* Líneas de escaneo — más tenues, horror no hacker */
#crt-overlay {
  position: fixed; inset: 0; z-index: 8001;
  pointer-events: none;
  background: repeating-linear-gradient(
    0deg,
    transparent 0px, transparent 3px,
    rgba(0,0,0,0.06) 3px, rgba(0,0,0,0.06) 4px
  );
  animation: scanline-drift 8s linear infinite;
}
@keyframes scanline-drift {
  0%   { background-position: 0 0; }
  100% { background-position: 0 40px; }
}

/* Encendido CRT */
@keyframes crt-boot {
  0%   { transform: scaleY(0.002) scaleX(0.9); filter: brightness(4); opacity: 0.6; }
  20%  { transform: scaleY(0.08)  scaleX(0.96); filter: brightness(2); }
  45%  { transform: scaleY(1)     scaleX(0.98); filter: brightness(1.3); }
  70%  { transform: scaleY(1)     scaleX(1.01); filter: brightness(1.05); }
  100% { transform: none; filter: none; opacity: 1; }
}
#app.crt-boot { animation: crt-boot 0.8s cubic-bezier(0.22,1,0.36,1) both; transform-origin: center; }

/* Flash rojo al fallar */
#flash-overlay {
  position: fixed; inset: 0; z-index: 9500;
  pointer-events: none;
  background: var(--red);
  opacity: 0; transition: opacity 0.06s;
}
#flash-overlay.on { opacity: 0.18; }

/* --------------------------------------------------------------------------
   CÁMARA DE SEGURIDAD — discreta, inquietante
-------------------------------------------------------------------------- */
#cam-overlay {
  position: fixed; top: 14px; left: 16px; z-index: 9100;
  pointer-events: none;
  display: flex; align-items: center; gap: 7px;
  font-size: 11px; letter-spacing: 1px;
  color: var(--fg-muted); opacity: 0.8;
}
#cam-rec-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 8px var(--red);
  animation: rec-blink 1.6s step-start infinite;
}
@keyframes rec-blink { 40%,60% { opacity: 0; } }

/* Indicador "OBSERVADO" — aparece en esquina, muy sutil */
#watch-indicator {
  position: fixed; top: 14px; right: 50%; transform: translateX(50%);
  z-index: 9100; pointer-events: none;
  font-size: 10px; letter-spacing: 2px;
  color: var(--fg-muted); opacity: 0;
  animation: watch-pulse 12s ease-in-out infinite;
}
@keyframes watch-pulse {
  0%,100% { opacity: 0; }
  45%,55% { opacity: 0.5; }
}

/* --------------------------------------------------------------------------
   TIMER + VIDAS
-------------------------------------------------------------------------- */
#global-timer {
  position: fixed; top: 14px; right: 16px; z-index: 9100;
  font-size: 13px; letter-spacing: 1px;
  color: var(--fg-muted); text-shadow: var(--glow-sm);
  display: none;
}
#global-timer.urgente {
  color: var(--red); text-shadow: var(--glow-red);
  animation: pulse-danger 0.5s step-start infinite;
}
@keyframes pulse-danger { 50% { opacity: 0.3; } }

#vidas-display {
  position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%);
  z-index: 9100; font-size: 20px; letter-spacing: 6px;
  color: var(--red); text-shadow: var(--glow-red); display: none;
}

/* --------------------------------------------------------------------------
   NOTIFICACIÓN INTRUSO — más perturbadora
-------------------------------------------------------------------------- */
#intruso-notif {
  position: fixed; bottom: 75px; left: 50%; transform: translateX(-50%);
  z-index: 9300; display: none;
  max-width: min(90vw, 480px);
  padding: 12px 22px;
  border-left: 3px solid var(--red);
  background: rgba(5,0,0,0.97);
  color: var(--red); font-size: 14px; letter-spacing: 0.5px;
  text-shadow: var(--glow-red);
  animation: intruso-in 0.25s ease;
}
#intruso-notif.visible { display: block; }
@keyframes intruso-in {
  from { opacity:0; transform:translateX(-50%) translateY(10px); }
  to   { opacity:1; transform:translateX(-50%) translateY(0); }
}

/* --------------------------------------------------------------------------
   BOTÓN DESCIFRADOR
-------------------------------------------------------------------------- */
#descifrador-btn {
  position: fixed; bottom: 18px; right: 18px; z-index: 9100;
  background: transparent;
  border: 1px solid var(--fg-dark);
  color: var(--fg-muted);
  font-family: var(--font-body);
  font-size: 11px; letter-spacing: 1px;
  padding: 10px 14px; min-height: var(--touch-min);
  cursor: pointer; touch-action: manipulation; -webkit-appearance: none;
  transition: color 0.2s, border-color 0.2s;
}
#descifrador-btn:hover, #descifrador-btn:active {
  color: var(--fg-dim); border-color: var(--fg-dim);
}

/* --------------------------------------------------------------------------
   APP CONTAINER
-------------------------------------------------------------------------- */
#app {
  position: relative; z-index: 100;
  width: 100%; height: 100%;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: max(env(safe-area-inset-top, 0px), 55px)
           20px
           max(env(safe-area-inset-bottom, 0px), 55px);
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   PANTALLAS
-------------------------------------------------------------------------- */
.pantalla {
  display: none;
  width: 100%; max-width: 660px;
  flex-direction: column; align-items: center;
  gap: 14px;
  overflow-y: auto; max-height: calc(100dvh - 110px);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; padding-bottom: 4px;
}
.pantalla::-webkit-scrollbar { display: none; }
.pantalla.activa {
  display: flex;
  animation: screen-in 0.45s ease both;
}
@keyframes screen-in {
  from { opacity:0; transform:translateY(8px); }
  to   { opacity:1; transform:none; }
}

/* --------------------------------------------------------------------------
   PANEL PRINCIPAL — aspecto de papel quemado / decaído
-------------------------------------------------------------------------- */
.terminal-panel {
  width: 100%;
  background: var(--bg-card);
  border: 1px solid var(--fg-dark);
  padding: var(--panel-pad);
  position: relative;
  /* Sombra interior verdosa — como moho */
  box-shadow:
    inset 0 0 60px rgba(0,8,0,0.9),
    inset 0 0 2px rgba(184,255,184,0.04),
    0 0 18px rgba(0,0,0,0.8);
}

/* Borde corroído — pseudo-elemento con efecto de desgaste */
.terminal-panel::before {
  content: attr(data-label);
  position: absolute; top: -1px; left: 18px;
  transform: translateY(-50%);
  background: var(--bg); padding: 2px 10px;
  font-size: 10px; letter-spacing: 2px;
  color: var(--fg-muted);
  /* pequeña corrupción en el label */
}

/* Esquina inferior derecha — símbolo de corrupción */
.terminal-panel::after {
  content: "//";
  position: absolute; bottom: 6px; right: 10px;
  font-size: 9px; color: var(--fg-dark); opacity: 0.6;
}

.terminal-panel.glow-bright {
  border-color: var(--fg-dim);
  box-shadow: inset 0 0 60px rgba(0,8,0,0.9), var(--glow);
}

/* --------------------------------------------------------------------------
   HEADER DE PANEL
-------------------------------------------------------------------------- */
.sys-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 18px; padding-bottom: 12px;
  border-bottom: 1px solid var(--fg-dark);
}
.sys-title {
  font-size: 11px; letter-spacing: 2px; color: var(--fg-muted);
}
.sys-status { font-size: 10px; letter-spacing: 1px; color: var(--fg-muted); }
.sys-status.on { color: var(--fg-dim); animation: pulse-slow 3s step-start infinite; }
@keyframes pulse-slow { 40%,60% { opacity: 0.4; } }

/* --------------------------------------------------------------------------
   PANTALLA DE ACCESO — rediseño horror completo
-------------------------------------------------------------------------- */

/* Título grande con ojo */
.acceso-titulo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
  text-align: center;
}

.acceso-ojo {
  width: clamp(60px, 14vw, 90px);
  color: var(--fg);
  opacity: 0.6;
  animation: ojo-parpadeo 7s ease-in-out infinite;
}
@keyframes ojo-parpadeo {
  0%,100%      { transform: scaleY(1); opacity: 0.6; }
  47%          { transform: scaleY(1); opacity: 0.6; }
  48%,49%      { transform: scaleY(0.05); opacity: 0.9; }
  50%          { transform: scaleY(1); opacity: 0.6; }
  85%,86%,87%  { transform: scaleY(0.05); opacity: 0.9; }
  88%          { transform: scaleY(1); opacity: 0.6; }
}

.acceso-h1 {
  font-family: var(--font-horror);
  font-size: clamp(34px, 9vw, 60px);
  line-height: 1.05;
  letter-spacing: 3px;
  color: var(--fg-bright);
  text-shadow: var(--glow-lg);
  font-weight: normal;
}

.acceso-subtitulo {
  font-size: 13px;
  letter-spacing: 4px;
  color: var(--fg-muted);
  text-transform: lowercase;
  animation: pulse-slow 4s step-start infinite;
}

/* Bloque de mensajes — sin bordes de terminal */
.acceso-mensajes-wrap {
  width: 100%;
  max-width: 540px;
  padding: 0 4px;
}

.acceso-log {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-height: 140px;
}

/* Cada línea de mensaje — tipografía grande y legible */
.acceso-log-line {
  font-family: var(--font-body);
  font-size: clamp(17px, 3.5vw, 21px);
  line-height: 1.65;
  letter-spacing: 0.2px;
  color: var(--fg);
  margin: 0;
  padding: 1px 0;
  opacity: 0;
  animation: linea-aparece 0.4s ease forwards;
}
@keyframes linea-aparece {
  from { opacity: 0; transform: translateX(-6px); }
  to   { opacity: 1; transform: none; }
}

/* Variantes de línea */
.acceso-log-line.tenue  { color: var(--fg-dim); font-size: clamp(14px, 2.8vw, 17px); }
.acceso-log-line.ultimo {
  color: var(--fg-bright);
  text-shadow: var(--glow-sm);
  font-size: clamp(18px, 3.8vw, 23px);
  margin-top: 6px;
}
.acceso-log-line.error  {
  color: var(--red);
  text-shadow: var(--glow-red);
  animation: linea-aparece 0.2s ease forwards, shake 0.35s ease 0.2s;
}

/* Bloque del input — limpio, centrado, grande */
.acceso-input-bloque {
  width: 100%;
  max-width: 460px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 20px 0 6px;
  border-top: 1px solid var(--fg-dark);
  margin-top: 4px;
}

.acceso-input-label {
  font-size: 13px;
  letter-spacing: 2px;
  color: var(--fg-muted);
  text-align: center;
}

.acceso-input-row {
  width: 100%;
  display: flex;
  justify-content: center;
}

.acceso-field {
  background: transparent;
  border: none;
  border-bottom: 2px solid var(--fg-dim);
  color: var(--fg-bright);
  font-family: var(--font-body);
  font-size: max(22px, 4vw);
  letter-spacing: 10px;
  text-align: center;
  width: 100%;
  max-width: 320px;
  padding: 10px 8px;
  outline: none;
  text-transform: uppercase;
  caret-color: var(--fg);
  text-shadow: var(--glow);
  min-height: var(--touch-min);
  -webkit-appearance: none;
  border-radius: 0;
}
.acceso-field::placeholder {
  color: var(--fg-dark);
  letter-spacing: 8px;
}
.acceso-field:focus {
  border-bottom-color: var(--fg);
  box-shadow: 0 3px 0 rgba(184,255,184,0.08);
}

/* Botón de confirmar — horror, no informático */
.btn-horror {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 12px 40px;
  background: transparent;
  border: 1px solid var(--fg-dim);
  color: var(--fg-bright);
  font-family: var(--font-horror);
  font-size: 22px;
  letter-spacing: 3px;
  cursor: pointer;
  text-shadow: var(--glow);
  box-shadow: var(--glow-sm);
  transition: background 0.12s, color 0.12s, box-shadow 0.12s;
  touch-action: manipulation;
  -webkit-appearance: none;
  border-radius: 0;
}
.btn-horror:hover, .btn-horror:active {
  background: var(--fg);
  color: var(--bg);
  text-shadow: none;
  box-shadow: none;
}

/* Botón de registro — apenas visible, discreto */
.acceso-registro-btn {
  background: transparent;
  border: none;
  color: var(--fg-dark);
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 2px;
  cursor: pointer;
  padding: 10px 16px;
  min-height: var(--touch-min);
  touch-action: manipulation;
  transition: color 0.2s;
  -webkit-appearance: none;
}
.acceso-registro-btn:hover, .acceso-registro-btn:active {
  color: var(--fg-muted);
}

/* --------------------------------------------------------------------------
   LOG DE TERMINAL — letra clara, espaciado mínimo
-------------------------------------------------------------------------- */
.terminal-log {
  display: flex; flex-direction: column; gap: 4px;
  min-height: 80px; overflow-y: auto;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.terminal-log::-webkit-scrollbar { display: none; }

/* Líneas de texto — legibilidad ante todo */
.t-line {
  font-size: 16px;        /* nunca menos de 16px */
  letter-spacing: 0.2px; /* casi nulo */
  line-height: 1.7;
  display: block;
  word-break: break-word;
  color: var(--fg);
}
.t-line.dim    { color: var(--fg-dim); }
.t-line.muted  { color: var(--fg-muted); font-size: 13px; }
.t-line.bright { color: var(--fg-bright); text-shadow: var(--glow-sm); }
.t-line.warn   { color: var(--amber); }
.t-line.error  { color: var(--red); }
.t-line.big    { font-size: 20px; letter-spacing: 0.5px; }
.t-line.horror {
  /* Para mensajes psicológicos impactantes */
  font-family: var(--font-horror);
  font-size: 22px; letter-spacing: 1px;
  color: var(--red); text-shadow: var(--glow-red);
}

/* Cursor parpadeante */
.cursor-blink::after {
  content: "█"; color: var(--fg);
  animation: cursor-flash 0.9s step-start infinite; margin-left: 3px;
}
@keyframes cursor-flash { 50% { opacity: 0; } }

.t-divider { border: none; border-top: 1px solid var(--fg-dark); margin: 12px 0; }

/* --------------------------------------------------------------------------
   INSTRUCCIÓN DE JUEGO — overlay breve antes de cada nivel
-------------------------------------------------------------------------- */
#instruccion-overlay {
  display: none;
  position: fixed; inset: 0; z-index: 9000;
  background: rgba(2,2,2,0.96);
  flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
  padding: 30px 28px;
  gap: 20px;
  cursor: pointer;
  touch-action: manipulation;
  animation: overlay-in 0.3s ease;
}
#instruccion-overlay.visible { display: flex; }
@keyframes overlay-in {
  from { opacity:0; }
  to   { opacity:1; }
}

.instruccion-nivel {
  font-size: 11px; letter-spacing: 3px; color: var(--fg-muted);
}
.instruccion-titulo {
  font-family: var(--font-horror);
  font-size: clamp(28px, 7vw, 48px);
  letter-spacing: 2px;
  color: var(--fg-bright);
  text-shadow: var(--glow-lg);
  line-height: 1.2;
}
.instruccion-texto {
  font-size: 17px; letter-spacing: 0.3px; line-height: 1.7;
  color: var(--fg-dim); max-width: 400px;
}
.instruccion-texto strong { color: var(--fg); }
.instruccion-tap {
  font-size: 11px; letter-spacing: 2px; color: var(--fg-muted);
  animation: pulse-slow 2s step-start infinite;
  margin-top: 8px;
}

/* Separador decorativo */
.instruccion-sep {
  width: 60px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--fg-muted), transparent);
}

/* --------------------------------------------------------------------------
   INPUT DE CÓDIGO
-------------------------------------------------------------------------- */
.input-row {
  display: flex; align-items: center; gap: 12px;
  margin-top: 16px; padding-top: 14px;
  border-top: 1px solid var(--fg-dark);
}
.input-prompt {
  color: var(--fg-dim); font-size: 17px;
  flex-shrink: 0; white-space: nowrap;
}
.code-field {
  flex: 1; background: transparent;
  border: none; border-bottom: 1px solid var(--fg-dim);
  color: var(--fg-bright); font-family: var(--font-body);
  font-size: max(18px, 2.5vw);
  letter-spacing: 5px;
  padding: 8px 6px; outline: none;
  text-transform: uppercase;
  caret-color: var(--fg);
  text-shadow: var(--glow-sm);
  min-height: var(--touch-min);
  -webkit-appearance: none; border-radius: 0;
}
.code-field::placeholder { color: var(--fg-dark); letter-spacing: 3px; }
.code-field:focus { border-bottom-color: var(--fg); }

/* --------------------------------------------------------------------------
   BOTONES — grandes, tocables, atmosféricos
-------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--touch-min); padding: 12px 26px;
  background: transparent;
  border: 1px solid var(--fg-dim);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 14px; letter-spacing: 1.5px;
  cursor: pointer;
  text-shadow: var(--glow-sm);
  transition: background 0.12s, color 0.12s;
  touch-action: manipulation; -webkit-appearance: none; border-radius: 0;
}
.btn:hover, .btn:active { background: var(--fg); color: var(--bg); text-shadow: none; }
.btn.danger { border-color: var(--red); color: var(--red); text-shadow: var(--glow-red); }
.btn.danger:hover, .btn.danger:active { background: var(--red); color: var(--bg); }
.btn.ghost {
  border-color: var(--fg-dark); color: var(--fg-muted);
  font-size: 12px; letter-spacing: 1px;
  text-shadow: none;
}
.btn.ghost:hover, .btn.ghost:active { background: var(--fg-dark); color: var(--fg-dim); }
.btn-row {
  display: flex; gap: 10px; flex-wrap: wrap;
  justify-content: center; margin-top: 16px;
}

/* --------------------------------------------------------------------------
   GLITCH — más orgánico, menos digital
-------------------------------------------------------------------------- */
@keyframes glitch-a {
  0%,100% { clip-path:inset(0 0 97% 0); transform:translate(-4px,0) skewX(-1deg); }
  20%     { clip-path:inset(25% 0 65% 0); transform:translate(4px,0); }
  40%     { clip-path:inset(65% 0 18% 0); transform:translate(-3px,1px); }
  60%     { clip-path:inset(8% 0 78% 0);  transform:translate(2px,0); }
  80%     { clip-path:inset(50% 0 38% 0); transform:translate(-1px,0); }
}
@keyframes glitch-b {
  0%,100% { clip-path:inset(55% 0 25% 0); transform:translate(4px,0); opacity:0.5; }
  30%     { clip-path:inset(10% 0 75% 0); transform:translate(-4px,0); }
  60%     { clip-path:inset(78% 0 5% 0);  transform:translate(2px,-1px); }
}

.glitch { position:relative; display:inline-block; }
.glitch::before, .glitch::after {
  content: attr(data-g); position:absolute; inset:0; opacity:0; pointer-events:none;
}
.glitch.active::before { color:var(--red);   opacity:0.75; animation:glitch-a 0.3s steps(1) infinite; }
.glitch.active::after  { color:var(--amber); opacity:0.55; animation:glitch-b 0.28s steps(1) infinite; }

@keyframes shake {
  0%,100% { transform:translateX(0); }
  15%     { transform:translateX(-7px) rotate(-0.5deg); }
  35%     { transform:translateX(7px)  rotate(0.5deg); }
  55%     { transform:translateX(-5px); }
  75%     { transform:translateX(5px); }
}
.shake { animation: shake 0.35s ease; }

/* --------------------------------------------------------------------------
   BARRA DE PROGRESO / SIGNO VITAL
-------------------------------------------------------------------------- */
.progress-row {
  display: flex; align-items: center; gap: 10px; width: 100%;
}
.progress-label { font-size: 11px; letter-spacing: 1px; color: var(--fg-muted); flex-shrink: 0; }
.progress-track {
  flex: 1; height: 5px; background: var(--fg-dark); overflow: hidden; position: relative;
}
.progress-fill {
  height: 100%; background: var(--fg);
  transition: width 0.08s linear, background 0.3s;
  box-shadow: var(--glow-sm);
}
.progress-fill.danger { background: var(--red); box-shadow: var(--glow-red); }
.progress-value { font-size: 11px; color: var(--fg-dim); flex-shrink: 0; min-width: 34px; text-align:right; }

/* --------------------------------------------------------------------------
   OVERLAY: REGISTRO
-------------------------------------------------------------------------- */
.overlay-panel {
  display: none; position: fixed; inset: 0; z-index: 9200;
  background: rgba(0,0,0,0.98);
  flex-direction: column; align-items: center; justify-content: center;
  padding: 30px 20px; gap: 0;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
}
.overlay-panel.open { display: flex; }

.registro-tabla {
  width: 100%; max-width: 500px; border-collapse: collapse; margin: 14px 0;
}
.registro-tabla th {
  font-size: 10px; letter-spacing: 2px; color: var(--fg-muted);
  padding: 6px 8px; border-bottom: 1px solid var(--fg-dark); text-align: left;
}
.registro-tabla td {
  font-size: 14px; letter-spacing: 0.3px;
  padding: 8px 8px; border-bottom: 1px solid var(--fg-dark);
}
.registro-tabla td.col-estado.muerto     { color: var(--red); }
.registro-tabla td.col-estado.activo     { color: var(--fg); animation: pulse-slow 1s step-start infinite; }
.registro-tabla td.col-estado.incompleto { color: var(--amber); }
.registro-tabla td.col-fecha             { color: var(--fg-muted); font-size: 12px; }

/* --------------------------------------------------------------------------
   OVERLAY: DESCIFRADOR
-------------------------------------------------------------------------- */
#descifrador-panel {
  display: none; position: fixed; inset: 0; z-index: 9200;
  background: rgba(0,0,0,0.98);
  flex-direction: column; align-items: center; justify-content: center;
  padding: 30px 20px; gap: 16px;
}
#descifrador-panel.open { display: flex; }
.desc-title { font-size: 12px; letter-spacing: 3px; color: var(--fg-dim); }

#desc-input {
  background: var(--bg-card); border: 1px solid var(--fg-muted);
  color: var(--fg); font-family: var(--font-body);
  font-size: 15px; letter-spacing: 1px;
  width: 100%; max-width: 440px; min-height: 80px;
  padding: 12px; resize: none; outline: none;
  -webkit-appearance: none; border-radius: 0;
}
#desc-input:focus { border-color: var(--fg-dim); }
#desc-output {
  font-size: clamp(22px, 6vw, 36px); letter-spacing: 6px;
  text-shadow: var(--glow); min-height: 50px;
  text-align: center; color: var(--fg-bright);
}

/* --------------------------------------------------------------------------
   ══════════════════════════════
   MINIJUEGOS
   ══════════════════════════════
-------------------------------------------------------------------------- */
#juego-contenedor {
  width: 100%; display: flex; flex-direction: column;
  align-items: center; gap: 16px; padding: 4px 0;
}

.game-header {
  width: 100%; display: flex; align-items: baseline;
  justify-content: space-between; margin-bottom: 4px;
}
.game-title {
  font-family: var(--font-horror);
  font-size: clamp(20px, 5vw, 30px);
  letter-spacing: 1px; color: var(--fg-bright);
  text-shadow: var(--glow);
}
.game-counter {
  font-size: 12px; letter-spacing: 1px; color: var(--fg-muted);
}

/* ── AGUJA ───────────────────────────── */
.aguja-wrap {
  width: 100%; max-width: 420px;
  display: flex; flex-direction: column; align-items: center; gap: 18px;
}
.aguja-svg-wrap {
  width: 100%; max-width: 380px; aspect-ratio: 2/1; position: relative;
}
.aguja-svg-wrap svg { width: 100%; height: 100%; overflow: visible; }

.btn-disparar {
  width: 100%; max-width: 320px; min-height: 58px;
  font-family: var(--font-horror);
  font-size: clamp(18px, 4vw, 26px); letter-spacing: 1px;
  border: 2px solid var(--fg-dim); color: var(--fg-bright);
  background: transparent; cursor: pointer;
  text-shadow: var(--glow); box-shadow: var(--glow);
  transition: background 0.1s, color 0.1s;
  touch-action: manipulation; -webkit-appearance: none; border-radius: 0;
}
.btn-disparar:active, .btn-disparar:hover {
  background: var(--fg); color: var(--bg); text-shadow: none; box-shadow: none;
}

.aguja-aciertos { display: flex; gap: 10px; justify-content: center; }
.aguja-pip {
  width: 13px; height: 13px; border: 1px solid var(--fg-dim); background: transparent;
  transition: background 0.2s, box-shadow 0.2s;
}
.aguja-pip.lleno { background: var(--fg); box-shadow: var(--glow); }

/* ── ZONA ────────────────────────────── */
.zona-arena {
  position: relative; width: 100%; max-width: 480px;
  height: clamp(130px, 26vw, 190px);
  background: var(--bg-card); border: 1px solid var(--fg-dark);
  overflow: hidden; cursor: none; touch-action: none;
}
.zona-safe {
  position: absolute; top: 0; height: 100%;
  background: rgba(184,255,184,0.07);
  border-left: 2px solid rgba(184,255,184,0.4);
  border-right: 2px solid rgba(184,255,184,0.4);
  pointer-events: none;
}
.zona-cursor {
  position: absolute; top: 0; width: 3px; height: 100%;
  background: var(--fg); box-shadow: var(--glow);
  pointer-events: none; transform: translateX(-50%);
}
.zona-floor {
  position: absolute; bottom: 0; left: 0; height: 4px;
  background: var(--fg); width: 0; box-shadow: var(--glow);
}
.zona-hint {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  font-size: 13px; letter-spacing: 1px;
  color: var(--fg-muted); pointer-events: none; white-space: nowrap;
}

/* ── REFLEJOS ────────────────────────── */
.reflejos-wrap {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  width: 100%; max-width: 380px;
}
.reflejos-stats {
  display: flex; gap: 24px;
  font-size: 13px; letter-spacing: 0.5px; color: var(--fg-muted);
}
.reflejos-stats span { color: var(--fg-dim); }

.reflejos-grid {
  display: grid; grid-template-columns: repeat(3,1fr);
  gap: clamp(8px, 2vw, 14px); width: 100%;
}
.ref-cell {
  aspect-ratio: 1; background: var(--bg-card);
  border: 1px solid var(--fg-dark);
  display: flex; align-items: center; justify-content: center;
  font-size: clamp(26px, 7vw, 40px);
  cursor: pointer; touch-action: manipulation;
  -webkit-appearance: none; border-radius: 0;
  transition: background 0.05s, border-color 0.05s;
  min-height: var(--touch-min);
  color: transparent; text-shadow: none;
}
.ref-cell.lit {
  border-color: var(--fg); color: var(--fg);
  text-shadow: var(--glow); background: rgba(184,255,184,0.07);
  box-shadow: inset 0 0 20px rgba(184,255,184,0.08);
  animation: cell-flash 0.07s ease;
}
.ref-cell:active { background: rgba(184,255,184,0.14); }
@keyframes cell-flash {
  from { background: rgba(184,255,184,0.28); }
  to   { background: rgba(184,255,184,0.07); }
}

/* ── SECUENCIA ───────────────────────── */
.secuencia-wrap {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  width: 100%; max-width: 340px;
}
.secuencia-estado {
  font-size: 14px; letter-spacing: 0.5px; color: var(--fg-dim); text-align: center;
}
.secuencia-grid {
  display: grid; grid-template-columns: repeat(3,1fr);
  gap: clamp(8px, 2vw, 12px); width: 100%;
}
.seq-cell {
  aspect-ratio: 1; background: var(--bg-card);
  border: 1px solid var(--fg-muted);
  display: flex; align-items: center; justify-content: center;
  font-size: clamp(20px, 5vw, 30px); letter-spacing: 0;
  cursor: pointer; touch-action: manipulation;
  -webkit-appearance: none; border-radius: 0;
  transition: background 0.08s, border-color 0.08s;
  min-height: var(--touch-min);
  color: var(--fg-muted);
  user-select: none; -webkit-user-select: none;
}
.seq-cell.lit {
  background: var(--fg); color: var(--bg);
  border-color: var(--fg); box-shadow: var(--glow);
}
.seq-cell:active:not(.lit) {
  background: rgba(184,255,184,0.12);
  border-color: var(--fg-dim); color: var(--fg);
}

/* --------------------------------------------------------------------------
   FASE 4 — REVELACIÓN
-------------------------------------------------------------------------- */
.revelacion-header {
  font-family: var(--font-horror);
  font-size: clamp(14px, 3vw, 18px); letter-spacing: 2px;
  color: var(--fg-muted); text-align: center; margin-bottom: 22px;
}
.revelacion-msg {
  font-size: clamp(16px, 3vw, 20px); letter-spacing: 0.3px;
  line-height: 1.9; text-shadow: var(--glow-sm); text-align: center;
}
.revelacion-pista {
  margin-top: 26px; padding: 16px 24px;
  border: 1px solid var(--amber);
  color: var(--amber); text-shadow: var(--glow-amb); box-shadow: var(--glow-amb);
  font-size: clamp(17px, 4vw, 26px); letter-spacing: 2px;
  text-align: center;
  animation: pista-pulse 2.5s ease-in-out infinite;
}
@keyframes pista-pulse {
  0%,100% { box-shadow: var(--glow-amb); }
  50%     { box-shadow: 0 0 22px var(--amber), 0 0 55px rgba(232,160,0,0.35); }
}

/* --------------------------------------------------------------------------
   RESPONSIVE
-------------------------------------------------------------------------- */
@media (min-width: 768px) {
  body { font-size: 17px; }
  #app { padding: 70px 32px 70px; }
  .terminal-panel { padding: 30px 36px; }
}
@media (min-width: 1024px) {
  .pantalla { max-width: 700px; }
  .aguja-svg-wrap { max-width: 420px; }
  .zona-arena { height: 190px; }
}
@media (orientation: landscape) and (max-height: 680px) {
  #app { padding-top: 48px; padding-bottom: 48px; }
  .zona-arena { height: 110px; }
  .aguja-svg-wrap { max-width: 270px; }
  .terminal-log { min-height: 50px; }
  .instruccion-titulo { font-size: 28px; }
}

/* reduced-motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}