/* ============================================================
   MEGA GAMES — Design tokens
   Concept: "Player-Select HUD" — la página se comporta como la
   pantalla de selección de personaje de un juego de pelea:
   barra HUD superior, tags P1/P2, barras de vida como subrayados,
   y cabinas (cards) con tira de luces de marquesina arcade.
   ============================================================ */

:root {
  --void: #08080a;
  --panel: #101012;
  --panel-2: #18181b;
  --line: #2a2b30;

  --magenta: #ff6a00;
  --magenta-dim: #7a3300;
  --cyan: #0091ff;
  --cyan-dim: #0a4a75;
  --amber: #ff8c1a;

  --ink: #f5f5f5;
  --ink-muted: #9a9aa3;

  --font-display: 'Space Grotesk', sans-serif;
  --font-hud: 'Press Start 2P', cursive;
  --font-mono: 'JetBrains Mono', monospace;
}

* {
  scroll-behavior: smooth;
}

body {
  background-color: var(--void);
  color: var(--ink);
  font-family: var(--font-display);
  overflow-x: hidden;
}

/* Textura de scanlines sutil, tipo pantalla CRT de arcade */
.crt-scanlines {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 40;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.018) 0px,
    rgba(255, 255, 255, 0.018) 1px,
    transparent 1px,
    transparent 3px
  );
  mix-blend-mode: overlay;
}

.font-hud {
  font-family: var(--font-hud);
}

.font-mono {
  font-family: var(--font-mono);
}

/* -------- Logo / texto con glow neón -------- */
.neon-magenta {
  color: var(--ink);
  text-shadow:
    0 0 6px rgba(255, 106, 0, 0.9),
    0 0 18px rgba(255, 106, 0, 0.55),
    0 0 40px rgba(255, 106, 0, 0.35);
}

.neon-cyan {
  color: var(--ink);
  text-shadow:
    0 0 6px rgba(0, 145, 255, 0.9),
    0 0 18px rgba(0, 145, 255, 0.5),
    0 0 40px rgba(0, 145, 255, 0.3);
}

/* -------- HUD top bar -------- */
.hud-bar {
  background: rgba(10, 9, 18, 0.75);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}

.hud-tag {
  font-family: var(--font-hud);
  font-size: 0.55rem;
  letter-spacing: 0.05em;
  padding: 0.35rem 0.5rem;
  border: 1px solid var(--magenta);
  color: var(--magenta);
  background: rgba(255, 46, 99, 0.08);
}

/* Subrayado tipo "barra de vida" que se llena al hacer hover/activar */
.life-link {
  position: relative;
  padding-bottom: 6px;
}
.life-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 0%;
  background: linear-gradient(90deg, var(--magenta), var(--cyan));
  transition: width 0.35s ease;
}
.life-link:hover::after,
.life-link.active::after {
  width: 100%;
}

/* -------- Botones -------- */
.btn-primary {
  background: var(--amber);
  color: var(--void);
  font-weight: 700;
  border: 2px solid var(--amber);
  transition: all 0.25s ease;
  box-shadow: 0 0 0 rgba(255, 201, 60, 0);
}
.btn-primary:hover {
  box-shadow: 0 0 24px rgba(255, 140, 26, 0.55);
  transform: translateY(-2px);
}

.btn-outline {
  border: 2px solid var(--cyan);
  color: var(--cyan);
  background: transparent;
  transition: all 0.25s ease;
}
.btn-outline:hover {
  background: rgba(0, 145, 255, 0.1);
  box-shadow: 0 0 24px rgba(0, 145, 255, 0.35);
  transform: translateY(-2px);
}

/* Glitch sutil en hover del CTA principal del header */
.btn-glitch:hover {
  animation: glitch 0.35s steps(2, end) 1;
}
@keyframes glitch {
  0% { transform: translate(0, 0); }
  20% { transform: translate(-1px, 1px); }
  40% { transform: translate(1px, -1px); }
  60% { transform: translate(-1px, 0); }
  80% { transform: translate(1px, 1px); }
  100% { transform: translate(0, 0); }
}

/* -------- Cabinas / Cards (arcade cabinet) -------- */
.cabinet {
  position: relative;
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  border: 1px solid var(--line);
  border-radius: 0.75rem;
  overflow: hidden;
  transition: transform 0.3s ease, border-color 0.3s ease;
}
.cabinet::before {
  /* tira de luces de marquesina, apagada por defecto */
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: repeating-linear-gradient(
    90deg,
    var(--line) 0px,
    var(--line) 8px,
    transparent 8px,
    transparent 14px
  );
  transition: background 0.3s ease;
}
.cabinet:hover {
  transform: translateY(-6px);
  border-color: var(--magenta);
}
.cabinet:hover::before {
  background: repeating-linear-gradient(
    90deg,
    var(--magenta) 0px,
    var(--magenta) 8px,
    var(--cyan) 8px,
    var(--cyan) 14px
  );
  box-shadow: 0 0 12px rgba(255, 106, 0, 0.6);
}

.cabinet-cyan:hover {
  border-color: var(--cyan);
}
.cabinet-cyan:hover::before {
  background: repeating-linear-gradient(
    90deg,
    var(--cyan) 0px,
    var(--cyan) 8px,
    var(--magenta) 8px,
    var(--magenta) 14px
  );
  box-shadow: 0 0 12px rgba(0, 145, 255, 0.6);
}

/* -------- Tarjetas de juegos (catálogo) -------- */
.game-tile {
  aspect-ratio: 3 / 4;
  border-radius: 0.5rem;
  border: 1px solid var(--line);
  background: linear-gradient(160deg, var(--panel-2), var(--void));
  display: flex;
  align-items: flex-end;
  padding: 0.75rem;
  position: relative;
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.game-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.85) 100%);
}
.game-tile:hover {
  transform: scale(1.05) translateY(-4px);
  box-shadow: 0 10px 30px rgba(255, 106, 0, 0.25);
}
.game-tile .tile-label {
  position: relative;
  z-index: 1;
}

/* -------- VS split del hero -------- */
.vs-divider {
  font-family: var(--font-hud);
  color: var(--amber);
  text-shadow: 0 0 20px rgba(255, 140, 26, 0.6);
}

/* -------- Barra de progreso de pasos (health bar) -------- */
.step-bar {
  height: 6px;
  background: var(--line);
  border-radius: 999px;
  overflow: hidden;
}
.step-bar > span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--magenta), var(--cyan));
}

/* Fondo de sección con grid tenue tipo "arena" */
.arena-grid {
  background-image:
    linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 40px 40px;
}

/* -------- Imágenes ilustradas -------- */
.hero-art-wrap {
  filter: drop-shadow(0 20px 40px rgba(255, 106, 0, 0.15));
}

.console-art {
  width: 100%;
  max-width: 220px;
  border-radius: 0.75rem;
  border: 1px solid var(--line);
  background: var(--void);
  transition: transform 0.3s ease;
}
.cabinet:hover .console-art {
  transform: scale(1.03);
}

.game-tile-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  transition: transform 0.4s ease;
}
.game-tile:hover .game-tile-bg {
  transform: scale(1.08);
}

/* Focus visible accesible */
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}