/* ═══════════════════════════════════════════════════════════
   TEATRIX — Sistema de diseño premium
   Tipografía: Space Grotesk (display) + JetBrains Mono (datos)
   ═══════════════════════════════════════════════════════════ */

:root {
  --bg-0: #05060d;
  --bg-1: #0a0c18;
  --bg-2: #10142a;
  --glass: rgba(16, 20, 42, 0.55);
  --glass-border: rgba(120, 160, 255, 0.14);
  --ink-1: #eef2ff;
  --ink-2: #8b93b8;
  --ink-3: #4a5278;
  --accent: #46f0ff;
  --accent-2: #b653ff;
  --accent-3: #ff4d9d;
  --gold: #ffd166;
  --font-display: 'Space Grotesk', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --r-lg: 18px;
  --r-md: 12px;
  --shadow-glow: 0 0 40px rgba(70, 240, 255, 0.12);
  --ease-premium: cubic-bezier(0.22, 1, 0.36, 1);
}

@property --ang {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

/* ══════════ [hidden] MANDA SIEMPRE ══════════
   El `display:none` que el navegador aplica a `[hidden]` viene de su hoja
   de estilos por defecto, así que CUALQUIER regla propia con `display`
   (por ejemplo `.hud-panel{display:flex}` o `.nona-canvas{display:block}`)
   lo anula por especificidad y el elemento sigue ocupando sitio aunque
   JavaScript lo haya marcado como oculto.

   Eso provocaba un fallo real y difícil de ver: en una pantalla de 390 px,
   los paneles de Royale (96 px) y Versus (94 px) seguían midiendo aunque
   estuvieran ocultos, y junto a los dos HUD laterales consumían 382 px.
   Al escenario le quedaban 0 px, por lo que `Renderer.fit()` calculaba la
   celda mínima (14 px) mientras el `nona-canvas` oculto —también visible
   para el layout— estiraba el marco a sus 300 px intrínsecos de <canvas>.
   Resultado: el tablero se salía por la izquierda (-59..243) arrastrando
   consigo el HUD de la Academia.

   Se corrige una sola vez y para todo el documento, en lugar de ir
   parcheando `[hidden]` elemento por elemento cada vez que aparece el
   síntoma. `!important` es aquí legítimo y necesario: la intención de
   `hidden` es absoluta y debe ganar a cualquier `display` posterior. */
[hidden] { display: none !important; }

/* ── Paleta arcoíris TEATRIX (colores de las letras-bloque del logo) ── */
:root {
  --rb-1: #ff3b30; /* T · rojo */
  --rb-2: #ff9500; /* E · naranja */
  --rb-3: #ffd60a; /* A · amarillo */
  --rb-4: #34d143; /* T · verde */
  --rb-5: #2ec7ff; /* R · cian */
  --rb-6: #3f6bff; /* I · azul */
  --rb-7: #b23fff; /* X · violeta */
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  height: 100%;
  overflow: hidden;
  background: var(--bg-0);
  color: var(--ink-1);
  font-family: var(--font-display);
  -webkit-font-smoothing: antialiased;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

button { font-family: inherit; cursor: pointer; }

/* ── Capas de fondo ── */
#bg-canvas {
  position: fixed; inset: 0;
  width: 100%; height: 100%;
  z-index: 0;
}
#vignette {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(ellipse at 50% 42%, transparent 35%, rgba(3, 4, 10, 0.65) 100%);
}
#scanlines {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(255,255,255,0.012) 3px 4px);
  mix-blend-mode: overlay;
}
#grain {
  position: fixed; inset: -50%; z-index: 1; pointer-events: none; opacity: 0.025;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grainShift 0.6s steps(3) infinite;
}
@keyframes grainShift {
  0% { transform: translate(0,0); } 33% { transform: translate(-4%, 3%); }
  66% { transform: translate(3%, -2%); } 100% { transform: translate(0,0); }
}

/* ══════════ PANTALLA DE CARGA ══════════ */
#loader {
  position: fixed; inset: 0; z-index: 100;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(ellipse at 50% 45%, #0a0d1c 0%, #04050b 75%);
  transition: opacity 0.7s var(--ease-premium), visibility 0.7s;
}
#loader.done { opacity: 0; visibility: hidden; }
.loader-core { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.loader-mark { display: grid; grid-template-columns: repeat(2, 22px); grid-gap: 5px; margin-bottom: 8px; }
.loader-mark span {
  width: 22px; height: 22px; border-radius: 5px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow: 0 0 18px rgba(70,240,255,0.5);
  animation: loaderBlock 1.4s var(--ease-premium) infinite;
}
/* Bloques del loader con la paleta arcoíris del logo */
.loader-mark span:nth-child(1) { background: linear-gradient(135deg, var(--rb-1), var(--rb-2)); box-shadow: 0 0 18px var(--rb-1); }
.loader-mark span:nth-child(2) { background: linear-gradient(135deg, var(--rb-3), var(--rb-2)); box-shadow: 0 0 18px var(--rb-3); }
.loader-mark span:nth-child(3) { background: linear-gradient(135deg, var(--rb-5), var(--rb-6)); box-shadow: 0 0 18px var(--rb-5); }
.loader-mark span:nth-child(4) { background: linear-gradient(135deg, var(--rb-4), var(--rb-5)); box-shadow: 0 0 18px var(--rb-4); }
.loader-mark span:nth-child(1) { animation-delay: 0s; }
.loader-mark span:nth-child(2) { animation-delay: 0.15s; }
.loader-mark span:nth-child(3) { animation-delay: 0.45s; }
.loader-mark span:nth-child(4) { animation-delay: 0.3s; }
@keyframes loaderBlock {
  0%, 100% { transform: scale(0.7); opacity: 0.3; }
  40% { transform: scale(1); opacity: 1; }
}
.loader-title {
  font-size: clamp(34px, 8vw, 64px); font-weight: 700; letter-spacing: 0.34em;
  background: linear-gradient(180deg, #fff, #9fb4ff 60%, var(--accent));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  margin-left: 0.34em;
}
.loader-sub { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.42em; color: var(--ink-2); }
.loader-bar { width: min(320px, 70vw); height: 2px; background: rgba(255,255,255,0.08); border-radius: 99px; overflow: hidden; margin-top: 6px; }
.loader-bar-fill { height: 100%; width: 0%; background: linear-gradient(90deg, var(--rb-1), var(--rb-2), var(--rb-3), var(--rb-4), var(--rb-5), var(--rb-6), var(--rb-7)); box-shadow: 0 0 12px rgba(255,255,255,0.35); transition: width 0.3s var(--ease-premium); }
.loader-status { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.28em; color: var(--ink-3); }

/* ── Pantallas ── */
.screen {
  position: fixed; inset: 0; z-index: 2;
  display: none;
  flex-direction: column;
  padding: clamp(16px, 3vh, 36px) clamp(16px, 4vw, 56px);
  opacity: 0;
}
.screen.is-active {
  display: flex;
  animation: screenIn 0.7s var(--ease-premium) forwards;
}
@keyframes screenIn {
  from { opacity: 0; transform: translateY(14px) scale(0.992); filter: blur(6px); }
  to   { opacity: 1; transform: none; filter: none; }
}

/* Transición wipe */
#wipe {
  position: fixed; inset: 0; z-index: 50; pointer-events: none;
  background: linear-gradient(115deg, transparent 0%, rgba(70,240,255,0.10) 38%, rgba(8,10,22,0.98) 50%, rgba(182,83,255,0.10) 62%, transparent 100%);
  background-size: 300% 100%;
  background-position: 120% 0;
  opacity: 0;
}
#wipe.run {
  animation: wipeRun 0.62s var(--ease-premium) forwards;
}
@keyframes wipeRun {
  0%   { opacity: 1; background-position: 120% 0; }
  100% { opacity: 1; background-position: -120% 0; }
}

/* ── Tags de sistema ── */
.sys-tag {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--ink-2);
  text-transform: uppercase;
}
.sys-tag strong { color: var(--accent); font-weight: 600; }

/* ══════════ HOME ══════════ */
#screen-home { justify-content: space-between; align-items: stretch; }
.home-header, .home-footer {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding-bottom: 4px;
}
.home-header { border-bottom: 1px solid rgba(120,160,255,0.08); padding-bottom: 14px; }
.home-footer { border-top: 1px solid rgba(120,160,255,0.08); padding-top: 14px; }
.home-hero {
  flex: 1;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: clamp(14px, 2.6vh, 26px);
  text-align: center;
  position: relative;
}
/* Halo radial de fondo del hero */
.home-hero::before {
  content: '';
  position: absolute; left: 50%; top: 38%;
  width: min(900px, 90vw); height: min(900px, 90vw);
  transform: translate(-50%, -50%);
  background: radial-gradient(circle,
    rgba(70,240,255,0.10) 0%,
    rgba(182,83,255,0.07) 34%,
    transparent 62%);
  pointer-events: none; z-index: -1;
  animation: heroBreath 8s var(--ease-premium) infinite;
}
@keyframes heroBreath {
  0%, 100% { opacity: 0.7; transform: translate(-50%, -50%) scale(1); }
  50%      { opacity: 1;   transform: translate(-50%, -50%) scale(1.08); }
}

/* ── Decoración ambiental: rejilla de perspectiva + partículas orbitales ── */
.home-grid-lines {
  position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background-image:
    linear-gradient(rgba(70,240,255,0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(70,240,255,0.055) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 10%, transparent 78%);
  mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 10%, transparent 78%);
  animation: gridDrift 22s linear infinite;
}
@keyframes gridDrift { to { background-position: 46px 46px, 46px 46px; } }
.home-orbit { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.home-orbit span {
  position: absolute; left: 50%; top: 40%;
  width: 5px; height: 5px; border-radius: 99px;
  background: var(--accent);
  box-shadow: 0 0 14px 3px var(--accent);
  transform-origin: -220px 0;
  animation: orbitSpin linear infinite;
  opacity: 0.85;
}
.home-orbit span:nth-child(1) { animation-duration: 16s; transform-origin: -260px 10px; }
.home-orbit span:nth-child(2) { background: var(--accent-2); box-shadow: 0 0 14px 3px var(--accent-2); animation-duration: 22s; animation-direction: reverse; transform-origin: 200px -60px; }
.home-orbit span:nth-child(3) { background: var(--accent-3); box-shadow: 0 0 14px 3px var(--accent-3); animation-duration: 27s; transform-origin: -150px 140px; }
@keyframes orbitSpin { to { transform: rotate(360deg); } }

/* ── Etiqueta de sistema con indicador vivo ── */
.sys-tag--brand { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-1); }
.sys-tag-dot {
  width: 6px; height: 6px; border-radius: 99px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow: 0 0 10px var(--accent);
  animation: dotPulse 1.8s ease-in-out infinite;
}

/* ── LOGO TEATRIX · vanguardia multicolor ── */
.logo {
  position: relative;
  font-family: var(--font-display, inherit);
  font-size: clamp(58px, 14vw, 168px);
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 0.92;
  display: inline-flex;
  padding: 0 0.12em;
  perspective: 900px;
}
/* Anillo cónico rotatorio detrás del título */
.logo-ring {
  position: absolute; left: 50%; top: 50%;
  width: min(680px, 96vw); height: min(680px, 96vw);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  z-index: -2;
  background: conic-gradient(from 0deg,
    transparent 0deg, rgba(70,240,255,0.16) 40deg, transparent 90deg,
    rgba(182,83,255,0.16) 190deg, transparent 240deg,
    rgba(255,106,166,0.14) 320deg, transparent 360deg);
  -webkit-mask: radial-gradient(circle, transparent 60%, #000 61%, #000 63%, transparent 64%);
  mask: radial-gradient(circle, transparent 60%, #000 61%, #000 63%, transparent 64%);
  animation: ringSpin 14s linear infinite;
  opacity: 0.9;
}
@keyframes ringSpin { to { transform: translate(-50%, -50%) rotate(360deg); } }
/* Sombra duplicada del texto para dar profundidad 3D */
.logo-shadow {
  position: absolute; left: 0.12em; top: 0; right: 0.12em;
  color: transparent;
  background: none;
  -webkit-text-stroke: 1px rgba(70,240,255,0.14);
  transform: translate(6px, 10px) scale(1);
  z-index: -1;
  filter: blur(1px);
  user-select: none;
  pointer-events: none;
}
/* Aura difusa detrás del título */
.logo-glow {
  position: absolute; inset: -18% -6%;
  background: radial-gradient(ellipse at 30% 50%, rgba(70,240,255,0.30), transparent 55%),
              radial-gradient(ellipse at 72% 50%, rgba(182,83,255,0.28), transparent 58%),
              radial-gradient(ellipse at 50% 80%, rgba(255,86,166,0.18), transparent 60%);
  filter: blur(38px);
  z-index: -1;
  animation: logoGlowShift 9s var(--ease-premium) infinite;
}
@keyframes logoGlowShift {
  0%, 100% { transform: scale(1) translateX(0); opacity: 0.85; }
  50%      { transform: scale(1.06) translateX(10px); opacity: 1; }
}
.logo-letter {
  position: relative;
  display: inline-block;
  background: linear-gradient(
    135deg,
    #ffffff 0%,
    #7ef9ff 18%,
    #46c8ff 36%,
    #9b6cff 56%,
    #ff6aa6 76%,
    #ffd166 100%);
  background-size: 280% 280%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 2px 0 rgba(0,0,0,0.35))
          drop-shadow(0 0 22px rgba(70, 240, 255, 0.45))
          drop-shadow(0 0 40px rgba(182, 83, 255, 0.30));
  animation:
    logoHue 7s linear infinite,
    letterFloat 4.6s ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * -1.1s), calc(var(--i, 0) * 0.1s);
  transition: transform 0.35s var(--ease-premium), filter 0.35s var(--ease-premium);
}
.logo-letter:hover {
  transform: translateY(-14px) scale(1.12) rotate(-3deg);
  filter: drop-shadow(0 4px 0 rgba(0,0,0,0.35))
          drop-shadow(0 0 32px rgba(70, 240, 255, 0.75))
          drop-shadow(0 0 60px rgba(182, 83, 255, 0.55));
}
.logo-letter:nth-child(3) { --i: 0; } .logo-letter:nth-child(4) { --i: 1; }
.logo-letter:nth-child(5) { --i: 2; } .logo-letter:nth-child(6) { --i: 3; }
.logo-letter:nth-child(7) { --i: 4; } .logo-letter:nth-child(8) { --i: 5; }
.logo-letter:nth-child(9) { --i: 6; }

/* ══════════ LOGO DE BLOQUES · estilo TETRIS clásico ══════════
   Letras construidas con celdas biseladas 3D multicolor (js/logo.js) */
.logo--blocks {
  display: flex;
  align-items: center;
  justify-content: center;
}
.logo-blocks {
  display: flex;
  align-items: flex-end;
  gap: clamp(6px, 1.1vw, 14px);
  filter: drop-shadow(0 14px 30px rgba(0,0,0,0.65));
  transition: transform 0.25s ease-out;
  will-change: transform;
}
.logo-blk {
  height: clamp(64px, 13vw, 150px);
  width: auto;
  filter: drop-shadow(0 0 14px var(--blk-glow, rgba(70,240,255,0.4)))
          drop-shadow(0 6px 0 rgba(0,0,0,0.45));
  animation:
    blkPopIn 0.65s var(--ease-premium) both,
    blkFloat 4.8s ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * 0.09s + 0.15s), calc(var(--i, 0) * 0.28s + 0.8s);
  transition: transform 0.3s var(--ease-premium), filter 0.3s var(--ease-premium);
}
.logo-blk:hover {
  animation: none; /* libera el transform del float para poder elevar la letra */
  transform: translateY(-12px) scale(1.08) rotate(-2.5deg);
  filter: drop-shadow(0 0 26px var(--blk-glow, rgba(70,240,255,0.7)))
          drop-shadow(0 10px 0 rgba(0,0,0,0.45));
}
@keyframes blkPopIn {
  0%   { opacity: 0; transform: translateY(-70px) scale(0.55) rotate(-7deg); }
  60%  { opacity: 1; transform: translateY(6px) scale(1.05); }
  100% { opacity: 1; transform: none; }
}
@keyframes blkFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-7px); }
}
/* La I central un poco más baja para ritmo visual (opcional, sutil) */
.logo-blk:nth-child(6) { margin-bottom: -2px; }

/* ── Pila de tetrominós al pie del HOME (skyline de partida) ── */
.home-stack {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: clamp(70px, 12vh, 130px);
  z-index: 0;
  pointer-events: none;
  opacity: 0.6;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 45%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 45%);
  transition: transform 0.4s ease-out;
  will-change: transform;
}
.home-stack svg { width: 100%; height: 100%; display: block; }
.stack-float { animation: stackFall 7s linear infinite; opacity: 0; }
@keyframes stackFall {
  0%   { transform: translateY(-30px); opacity: 0; }
  12%  { opacity: 0.9; }
  70%  { transform: translateY(26px); opacity: 0.9; }
  86%, 100% { transform: translateY(34px); opacity: 0; }
}
/* Contenido del home por encima de la pila */
.home-header, .home-hero, .home-footer { position: relative; z-index: 1; }

@media (prefers-reduced-motion: reduce) {
  .logo-blk { animation: blkPopIn 0.01s both; }
  .stack-float { animation: none; opacity: 0; }
  .home-orbit span, .home-grid-lines, .logo-ring { animation: none; }
}
@keyframes logoHue {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@keyframes letterFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-9px); }
}
.logo-sub {
  font-family: var(--font-mono);
  font-size: clamp(9px, 1.4vw, 13px);
  letter-spacing: 0.55em;
  color: var(--ink-2);
  text-indent: 0.55em;
}
.logo-line {
  width: min(460px, 64vw); height: 3px; border-radius: 99px;
  background: linear-gradient(90deg,
    transparent, var(--rb-1), var(--rb-2), var(--rb-3), var(--rb-4),
    var(--rb-5), var(--rb-6), var(--rb-7), transparent);
  background-size: 200% 100%;
  opacity: 0.85;
  box-shadow: 0 0 14px rgba(255,255,255,0.12);
  animation: lineFlow 5s linear infinite;
}
@keyframes lineFlow { to { background-position: 200% 0; } }

.home-nav { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
/* Cada botón de navegación hereda un color de la paleta del logo */
.nav-btn { --nav-c: var(--rb-5); display: inline-flex; align-items: center; gap: 9px; }
.home-nav .nav-btn:nth-child(1) { --nav-c: var(--rb-1); }
.home-nav .nav-btn:nth-child(2) { --nav-c: var(--rb-2); }
.home-nav .nav-btn:nth-child(3) { --nav-c: var(--rb-3); }
.home-nav .nav-btn:nth-child(4) { --nav-c: var(--rb-4); }
.home-nav .nav-btn:nth-child(5) { --nav-c: var(--rb-7); }
.nav-btn .nav-ico {
  color: var(--nav-c); font-size: 0.95em; line-height: 1;
  transition: transform 0.35s var(--ease-premium), color 0.35s var(--ease-premium);
  filter: drop-shadow(0 0 6px var(--nav-c));
}
.nav-btn:hover, .nav-btn:focus-visible {
  border-color: color-mix(in srgb, var(--nav-c) 65%, transparent);
  box-shadow: 0 0 26px color-mix(in srgb, var(--nav-c) 30%, transparent),
              0 10px 30px rgba(0,0,0,0.35),
              inset 0 0 16px color-mix(in srgb, var(--nav-c) 10%, transparent);
}
.nav-btn:hover .nav-ico { transform: scale(1.3) rotate(10deg); filter: drop-shadow(0 0 12px var(--nav-c)); }
.nav-btn span:last-child { position: relative; }
.nav-btn span:last-child::after {
  content: ''; position: absolute; left: 0; bottom: -4px; height: 2px; width: 0;
  border-radius: 99px;
  background: var(--nav-c);
  box-shadow: 0 0 8px var(--nav-c);
  transition: width 0.3s var(--ease-premium);
}
.nav-btn:hover span:last-child::after { width: 100%; }

.home-eyebrow {
  position: relative;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.5em;
  color: var(--ink-1); opacity: 0.95;
  padding: 7px 18px; border-radius: 99px;
  border: 1px solid transparent;
  background:
    linear-gradient(135deg, rgba(10,13,26,0.92), rgba(16,20,42,0.92)) padding-box,
    linear-gradient(90deg, var(--rb-1), var(--rb-2), var(--rb-3), var(--rb-4), var(--rb-5), var(--rb-6), var(--rb-7)) border-box;
  display: inline-flex; align-items: center; gap: 9px;
  box-shadow: 0 0 24px rgba(70,240,255,0.10), inset 0 0 14px rgba(70,240,255,0.04);
  animation: screenIn 1s var(--ease-premium) both 0.2s;
}
.eyebrow-dot {
  width: 6px; height: 6px; border-radius: 99px; background: var(--accent);
  box-shadow: 0 0 10px var(--accent);
  animation: dotPulse 1.8s ease-in-out infinite;
}
@keyframes dotPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.4; transform: scale(0.7); }
}

.home-features { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 10px; list-style: none; }
.feat-pill {
  --pill-c: var(--rb-5);
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em;
  color: var(--ink-2);
  padding: 8px 15px; border-radius: 99px;
  border: 1px solid var(--glass-border);
  background: rgba(255,255,255,0.02);
  display: inline-flex; align-items: center; gap: 7px;
  transition: all 0.3s var(--ease-premium);
}
/* Cada pill con su color de la paleta del logo */
.home-features .feat-pill:nth-child(1) { --pill-c: var(--rb-1); }
.home-features .feat-pill:nth-child(2) { --pill-c: var(--rb-3); }
.home-features .feat-pill:nth-child(3) { --pill-c: var(--rb-4); }
.home-features .feat-pill:nth-child(4) { --pill-c: var(--rb-6); }
.home-features .feat-pill:nth-child(5) { --pill-c: var(--rb-7); }
.feat-pill i {
  color: var(--pill-c); font-style: normal;
  text-shadow: 0 0 8px var(--pill-c);
}
.feat-pill:hover {
  color: var(--ink-1);
  border-color: color-mix(in srgb, var(--pill-c) 55%, transparent);
  background: linear-gradient(135deg, color-mix(in srgb, var(--pill-c) 8%, transparent), rgba(255,255,255,0.02));
  transform: translateY(-3px);
  box-shadow: 0 6px 22px color-mix(in srgb, var(--pill-c) 22%, transparent);
}
.feat-pill--zone { border-color: rgba(255,209,102,0.3); }
.feat-pill--zone i { color: var(--gold); text-shadow: 0 0 8px rgba(255,209,102,0.6); animation: dotPulse 1.6s ease-in-out infinite; }
.feat-pill--zone:hover { border-color: rgba(255,209,102,0.55); box-shadow: 0 6px 22px rgba(255,209,102,0.16); }

/* ══════════ BOTONES · sistema de vanguardia ══════════ */
.btn {
  border: 1px solid var(--glass-border);
  background: var(--glass);
  color: var(--ink-1);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.2em;
  padding: 13px 26px;
  border-radius: var(--r-md);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: transform 0.35s var(--ease-premium), box-shadow 0.35s var(--ease-premium), border-color 0.35s var(--ease-premium), background 0.35s var(--ease-premium);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
/* Borde cónico animado ARCOÍRIS en todos los botones (paleta del logo) */
.btn::before {
  content: '';
  position: absolute; inset: 0; border-radius: inherit; z-index: -1;
  padding: 1.5px;
  background: conic-gradient(from var(--ang, 0deg),
    var(--rb-1) 0%, var(--rb-2) 14%, var(--rb-3) 28%, var(--rb-4) 43%,
    var(--rb-5) 58%, var(--rb-6) 74%, var(--rb-7) 88%, var(--rb-1) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.4s var(--ease-premium);
  animation: btnRotate 4s linear infinite paused;
}
.btn:hover::before { opacity: 1; animation-play-state: running; }
@keyframes btnRotate { to { --ang: 360deg; } }
.btn:hover, .btn:focus-visible {
  border-color: rgba(70, 240, 255, 0.5);
  box-shadow: 0 0 28px rgba(70, 240, 255, 0.2), 0 10px 30px rgba(0,0,0,0.35), inset 0 0 18px rgba(70, 240, 255, 0.06);
  transform: translateY(-3px);
  outline: none;
}
.btn:active { transform: translateY(-1px) scale(0.97); transition-duration: 0.12s; }

.btn-primary {
  border-color: rgba(70, 240, 255, 0.45);
  background: linear-gradient(135deg, rgba(70,240,255,0.16), rgba(182,83,255,0.14));
  box-shadow: var(--shadow-glow);
  color: #fff;
  font-weight: 600;
}
.btn-primary::after {
  content: ''; position: absolute; top: 0; left: -60%; width: 40%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.32), transparent);
  transform: skewX(-20deg);
  animation: btnShine 3.4s ease-in-out infinite;
  pointer-events: none;
}
@keyframes btnShine {
  0%, 60% { left: -60%; } 80%, 100% { left: 130%; }
}

/* ── Botón principal XL: marco arcoíris permanente + núcleo de energía ── */
.btn-xl {
  font-size: 14px; padding: 21px 58px; letter-spacing: 0.34em;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(70,240,255,0.22), rgba(182,83,255,0.20) 50%, rgba(255,106,166,0.18));
  border: 1px solid transparent;
  box-shadow: 0 0 34px rgba(70,240,255,0.24), 0 18px 46px rgba(0,0,0,0.55), inset 0 0 24px rgba(70,240,255,0.08);
  display: inline-flex; align-items: center; gap: 12px;
  animation: xlBreathe 3.6s var(--ease-premium) infinite;
}
/* El CTA siempre luce su borde arcoíris girando (no solo en hover) */
.btn-xl::before {
  opacity: 1;
  padding: 2px;
  animation-play-state: running;
}
@keyframes xlBreathe {
  0%, 100% { box-shadow: 0 0 34px rgba(46,199,255,0.26), 0 18px 46px rgba(0,0,0,0.55), inset 0 0 24px rgba(46,199,255,0.08); }
  25%      { box-shadow: 0 0 46px rgba(255,214,10,0.24), 0 18px 46px rgba(0,0,0,0.55), inset 0 0 26px rgba(255,149,0,0.10); }
  50%      { box-shadow: 0 0 52px rgba(178,63,255,0.32), 0 18px 46px rgba(0,0,0,0.55), inset 0 0 30px rgba(178,63,255,0.14); }
  75%      { box-shadow: 0 0 46px rgba(52,209,67,0.24), 0 18px 46px rgba(0,0,0,0.55), inset 0 0 26px rgba(52,209,67,0.10); }
}
.btn-xl-glow {
  position: absolute; inset: -40%; z-index: -2; pointer-events: none;
  background: conic-gradient(from 0deg,
    var(--rb-1), var(--rb-2), var(--rb-3), var(--rb-4),
    var(--rb-5), var(--rb-6), var(--rb-7), var(--rb-1));
  filter: blur(30px); opacity: 0.4;
  animation: ringSpin 6s linear infinite;
}
.btn-xl:hover {
  box-shadow: 0 0 60px rgba(46,199,255,0.42), 0 20px 54px rgba(0,0,0,0.6), inset 0 0 30px rgba(178,63,255,0.16);
  transform: translateY(-4px) scale(1.035);
}
.btn-xl:hover .btn-xl-glow { opacity: 0.6; }
.btn-xl .btn-glyph { font-size: 1.05em; }
.btn-xl .btn-label { position: relative; }

.btn-glyph { color: var(--accent); filter: drop-shadow(0 0 8px rgba(70,240,255,0.6)); }
.btn-ghost { background: rgba(255,255,255,0.025); }
.btn-ghost:hover { background: linear-gradient(135deg, rgba(70,240,255,0.06), rgba(182,83,255,0.05)); }
.btn-back { padding: 10px 18px; }
.btn-back:hover { transform: translateY(-2px) translateX(-2px); }

/* ══════════ CABECERAS DE PANTALLA ══════════ */
.screen-header {
  display: flex; align-items: center; gap: 22px;
  margin-bottom: clamp(18px, 3.4vh, 38px);
  flex-wrap: wrap;
}
.screen-title {
  font-size: clamp(20px, 3.4vw, 34px);
  font-weight: 600;
  letter-spacing: 0.14em;
  flex: 1;
  background: linear-gradient(90deg, #fff, #9fb4ff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ══════════ MODOS ══════════ */
#screen-modes, #screen-puzzles, #screen-help, #screen-settings { overflow-y: auto; }
.mode-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}
.mode-card {
  position: relative;
  border: 1px solid var(--glass-border);
  background: var(--glass);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-radius: var(--r-lg);
  padding: 24px;
  cursor: pointer;
  transition: all 0.35s var(--ease-premium);
  overflow: hidden;
  display: flex; flex-direction: column; gap: 12px;
}
.mode-card::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(70,240,255,0.09), transparent 55%, rgba(182,83,255,0.08));
  opacity: 0;
  transition: opacity 0.35s;
}
.mode-card:hover, .mode-card:focus-visible {
  transform: translateY(-5px);
  border-color: rgba(70, 240, 255, 0.45);
  box-shadow: 0 18px 50px rgba(0,0,0,0.45), 0 0 32px rgba(70,240,255,0.12);
  outline: none;
}
.mode-card:hover::before { opacity: 1; }
.mode-card--wide { grid-column: 1 / -1; }
.screen.is-active .mode-card { animation: cardStagger 0.6s var(--ease-premium) both; }
.screen.is-active .mode-card:nth-child(1) { animation-delay: 0.05s; }
.screen.is-active .mode-card:nth-child(2) { animation-delay: 0.11s; }
.screen.is-active .mode-card:nth-child(3) { animation-delay: 0.17s; }
.screen.is-active .mode-card:nth-child(4) { animation-delay: 0.23s; }
.screen.is-active .mode-card:nth-child(5) { animation-delay: 0.29s; }
.screen.is-active .mode-card:nth-child(6) { animation-delay: 0.35s; }
.screen.is-active .mode-card:nth-child(7) { animation-delay: 0.41s; }
.screen.is-active .mode-card:nth-child(8) { animation-delay: 0.47s; }
.screen.is-active .mode-card:nth-child(9) { animation-delay: 0.53s; }
.screen.is-active .mode-card:nth-child(10) { animation-delay: 0.59s; }
.screen.is-active .mode-card:nth-child(11) { animation-delay: 0.65s; }
.screen.is-active .mode-card:nth-child(12) { animation-delay: 0.71s; }
.screen.is-active .mode-card:nth-child(13) { animation-delay: 0.77s; }
.screen.is-active .mode-card:nth-child(14) { animation-delay: 0.83s; }
@keyframes cardStagger {
  from { opacity: 0; transform: translateY(24px) scale(0.97); }
  to   { opacity: 1; transform: none; }
}
.mode-index {
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.3em;
  color: var(--accent);
}
/* Índices de tarjetas con la paleta arcoíris del logo */
.mode-grid .mode-card:nth-child(1) .mode-index { color: var(--rb-1); text-shadow: 0 0 10px var(--rb-1); }
.mode-grid .mode-card:nth-child(2) .mode-index { color: var(--rb-2); text-shadow: 0 0 10px var(--rb-2); }
.mode-grid .mode-card:nth-child(3) .mode-index { color: var(--rb-3); text-shadow: 0 0 10px var(--rb-3); }
.mode-grid .mode-card:nth-child(4) .mode-index { color: var(--rb-4); text-shadow: 0 0 10px var(--rb-4); }
.mode-grid .mode-card:nth-child(5) .mode-index { color: var(--rb-5); text-shadow: 0 0 10px var(--rb-5); }
.mode-grid .mode-card:nth-child(6) .mode-index { color: var(--rb-6); text-shadow: 0 0 10px var(--rb-6); }
.mode-grid .mode-card:nth-child(7) .mode-index { color: var(--rb-7); text-shadow: 0 0 10px var(--rb-7); }
.mode-grid .mode-card:nth-child(8) .mode-index { color: var(--rb-3); text-shadow: 0 0 10px var(--rb-3); }
.mode-grid .mode-card:nth-child(9) .mode-index { color: var(--rb-1); text-shadow: 0 0 10px var(--rb-1); }
.mode-grid .mode-card:nth-child(10) .mode-index { color: #ff2d95; text-shadow: 0 0 10px #ff2d95; }
.mode-grid .mode-card:nth-child(11) .mode-index { color: var(--rb-5); text-shadow: 0 0 10px var(--rb-5); }
.mode-grid .mode-card:nth-child(12) .mode-index { color: var(--rb-2); text-shadow: 0 0 10px var(--rb-2); }
.mode-grid .mode-card:nth-child(13) .mode-index { color: var(--rb-7); text-shadow: 0 0 10px var(--rb-7); }
.mode-grid .mode-card:nth-child(14) .mode-index { color: #ffd45e; text-shadow: 0 0 10px #ffd45e; }
.mode-name { font-size: 21px; font-weight: 600; letter-spacing: 0.1em; line-height: 1.2; }
.mode-desc { font-size: 13px; color: var(--ink-2); line-height: 1.55; flex: 1; }
.mode-meta {
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 0.18em;
  color: var(--ink-3);
}

/* ── Tarjeta Versus + selector de dificultad ── */
.mode-card--versus::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(255,106,166,0.10), transparent 60%, rgba(155,108,255,0.12));
  pointer-events: none;
}
.mode-card--versus:hover {
  border-color: rgba(255,106,166,0.5);
  box-shadow: 0 18px 50px rgba(0,0,0,0.45), 0 0 34px rgba(255,106,166,0.18);
}
.mode-card--versus .mode-index { color: #ff6aa6; }
.versus-diff { position: relative; z-index: 2; }
.versus-diff-title {
  display: block;
  font-family: var(--font-mono);
  font-size: 9px; letter-spacing: 0.28em;
  color: var(--ink-3);
  margin-bottom: 7px;
}
.versus-diff-opts { display: flex; gap: 6px; }
.diff-opt {
  flex: 1;
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 0.1em;
  color: var(--ink-2);
  background: rgba(10, 12, 24, 0.55);
  border: 1px solid var(--glass-border);
  border-radius: 99px;
  padding: 6px 4px;
  cursor: pointer;
  transition: all 0.25s var(--ease-premium);
}
.diff-opt:hover { border-color: rgba(255,106,166,0.45); color: #fff; }
.diff-opt.is-active {
  color: #05060d;
  background: linear-gradient(120deg, #ff6aa6, #9b6cff);
  border-color: transparent;
  box-shadow: 0 0 18px rgba(255,106,166,0.45);
  font-weight: 600;
}

/* ── Tarjetas ULTRA / MARATHON ── */
.mode-card--ultra::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(255,209,102,0.12), transparent 60%, rgba(255,106,166,0.08));
  pointer-events: none;
}
.mode-card--ultra:hover {
  border-color: rgba(255,209,102,0.5);
  box-shadow: 0 18px 50px rgba(0,0,0,0.45), 0 0 34px rgba(255,209,102,0.16);
}
.mode-card--ultra .mode-index { color: var(--gold); }
.mode-card--marathon::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(182,83,255,0.12), transparent 60%, rgba(70,240,255,0.08));
  pointer-events: none;
}
.mode-card--marathon:hover {
  border-color: rgba(182,83,255,0.5);
  box-shadow: 0 18px 50px rgba(0,0,0,0.45), 0 0 34px rgba(182,83,255,0.18);
}
.mode-card--marathon .mode-index { color: var(--accent-2); }

/* ── Tarjetas CHEESE / MASTER / DAILY ── */
.mode-card--cheese::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(255,214,10,0.13), transparent 60%, rgba(255,149,0,0.10));
  pointer-events: none;
}
.mode-card--cheese:hover {
  border-color: rgba(255,214,10,0.5);
  box-shadow: 0 18px 50px rgba(0,0,0,0.45), 0 0 34px rgba(255,214,10,0.18);
}
.mode-card--master::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(255,59,48,0.14), transparent 60%, rgba(255,149,0,0.10));
  pointer-events: none;
}
.mode-card--master:hover {
  border-color: rgba(255,59,48,0.55);
  box-shadow: 0 18px 50px rgba(0,0,0,0.45), 0 0 36px rgba(255,59,48,0.2);
}
.mode-card--daily::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(46,199,255,0.13), transparent 60%, rgba(63,107,255,0.12));
  pointer-events: none;
}
.mode-card--daily:hover {
  border-color: rgba(46,199,255,0.55);
  box-shadow: 0 18px 50px rgba(0,0,0,0.45), 0 0 34px rgba(46,199,255,0.2);
}

/* ── Tarjeta JOURNEY: gradiente animado de 5 mundos ── */
.mode-card--journey::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(120deg,
    rgba(127,212,255,0.10), rgba(46,199,255,0.08) 25%,
    rgba(255,149,0,0.10) 50%, rgba(178,63,255,0.10) 75%,
    rgba(255,255,255,0.08));
  background-size: 300% 300%;
  animation: journeyShift 8s ease-in-out infinite;
  pointer-events: none;
}
@keyframes journeyShift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
.mode-card--journey:hover {
  border-color: rgba(178,63,255,0.55);
  box-shadow: 0 18px 50px rgba(0,0,0,0.45), 0 0 36px rgba(178,63,255,0.22);
}

/* ── Tarjeta ROYALE ── */
.mode-card--royale::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(255,149,0,0.14), transparent 55%, rgba(255,59,48,0.12));
  pointer-events: none;
}
.mode-card--royale:hover {
  border-color: rgba(255,149,0,0.55);
  box-shadow: 0 18px 50px rgba(0,0,0,0.45), 0 0 36px rgba(255,149,0,0.2);
}
.mode-card--royale kbd {
  font-family: var(--font-mono);
  font-size: 10px;
  border: 1px solid var(--glass-border);
  border-radius: 4px;
  padding: 0 5px;
  background: rgba(10,12,24,0.7);
}

/* ── Panel ROYALE (battle royale, en pantalla de juego) ── */
.hud-royale {
  width: clamp(120px, 15vw, 170px);
  gap: 10px;
}
.royale-head {
  display: flex; align-items: baseline; justify-content: center; gap: 8px;
  border: 1px solid rgba(255,149,0,0.3);
  border-radius: var(--r-md);
  background: rgba(20, 12, 6, 0.55);
  padding: 8px 10px;
}
.royale-alive {
  font-family: var(--font-mono);
  font-size: 26px; font-weight: 800;
  color: var(--rb-2);
  text-shadow: 0 0 16px rgba(255,149,0,0.6);
}
.royale-alive-label {
  font-family: var(--font-mono);
  font-size: 8px; letter-spacing: 0.3em;
  color: var(--ink-3);
}
.royale-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}
.royale-rival {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  border: 1px solid var(--glass-border);
  border-radius: 8px;
  background: rgba(10, 12, 24, 0.55);
  padding: 5px 3px;
  transition: all 0.3s var(--ease-premium);
}
.royale-rival.is-hunter {
  border-color: rgba(255,59,48,0.6);
  box-shadow: 0 0 12px rgba(255,59,48,0.25);
  animation: hunterPulse 1s ease-in-out infinite;
}
@keyframes hunterPulse {
  0%, 100% { box-shadow: 0 0 6px rgba(255,59,48,0.2); }
  50% { box-shadow: 0 0 16px rgba(255,59,48,0.45); }
}
.royale-rival.is-dead { opacity: 0.32; filter: grayscale(1); }
.royale-rival-name {
  font-family: var(--font-mono);
  font-size: 7px; letter-spacing: 0.12em;
  color: var(--ink-2);
}
.royale-rival-bar {
  width: 100%; height: 30px;
  background: rgba(8, 10, 22, 0.8);
  border-radius: 4px;
  overflow: hidden;
  display: flex; align-items: flex-end;
}
.royale-rival-fill {
  width: 100%;
  background: linear-gradient(180deg, #ff3b30, #ff9500);
  transition: height 0.35s var(--ease-premium);
}
.royale-rival-badges {
  position: absolute; top: -5px; right: -3px;
  font-family: var(--font-mono);
  font-size: 8px; font-weight: 700;
  color: #05060d;
  background: var(--rb-3);
  border-radius: 99px;
  padding: 1px 4px;
  box-shadow: 0 0 8px rgba(255,214,10,0.5);
}
.royale-rival-ko {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 800;
  color: #fff;
}
.royale-strategy, .royale-badges {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  border: 1px solid var(--glass-border);
  border-radius: var(--r-md);
  background: var(--glass);
  padding: 8px;
}
.royale-strat-label, .royale-badge-label {
  font-family: var(--font-mono);
  font-size: 8px; letter-spacing: 0.24em;
  color: var(--ink-3);
}
.royale-strat-label kbd {
  font-size: 8px;
  border: 1px solid var(--glass-border);
  border-radius: 3px; padding: 0 3px;
}
.royale-strat-btn {
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 700; letter-spacing: 0.14em;
  color: #05060d;
  background: linear-gradient(120deg, var(--rb-2), var(--rb-1));
  border: none; border-radius: 99px;
  padding: 5px 12px;
  cursor: pointer;
  box-shadow: 0 0 14px rgba(255,149,0,0.4);
  transition: transform 0.2s;
}
.royale-strat-btn:hover { transform: scale(1.06); }
.royale-badge-val {
  font-family: var(--font-mono);
  font-size: 22px; font-weight: 800;
  color: var(--rb-3);
  text-shadow: 0 0 14px rgba(255,214,10,0.5);
}
.royale-badge-mult {
  font-family: var(--font-mono);
  font-size: 9px; letter-spacing: 0.12em;
  color: var(--ink-2);
}
@media (max-width: 900px) {
  .hud-royale { width: clamp(96px, 22vw, 130px); }
  .royale-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
  .game-layout.is-royale .hud-left { display: none; }
  .hud-royale { width: clamp(80px, 26vw, 110px); }
  .royale-rival-bar { height: 20px; }
}

/* ── Panel del rival IA (Versus, en pantalla de juego) ── */
.hud-versus {
  width: clamp(120px, 16vw, 180px);
  gap: 10px;
}
.versus-head {
  display: flex; flex-direction: column; gap: 2px;
  text-align: center;
}
.versus-tag {
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 700; letter-spacing: 0.16em;
  color: #ff6aa6;
  text-shadow: 0 0 14px rgba(255,106,166,0.5);
}
.versus-sub {
  font-family: var(--font-mono);
  font-size: 8px; letter-spacing: 0.32em;
  color: var(--ink-3);
}
.versus-board-wrap {
  position: relative;
  border: 1px solid rgba(255,106,166,0.28);
  border-radius: var(--r-md);
  background: rgba(8, 10, 22, 0.6);
  padding: 6px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: inset 0 0 24px rgba(155,108,255,0.10);
  flex: 1;
  min-height: 0;
}
.versus-canvas { display: block; max-width: 100%; height: auto; border-radius: 4px; }
.versus-ko {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono);
  font-size: clamp(22px, 3vw, 34px); font-weight: 800; letter-spacing: 0.1em;
  color: #fff;
  background: rgba(8,10,22,0.6);
  backdrop-filter: blur(2px);
  text-shadow: 0 0 24px rgba(255,106,166,0.8);
  border-radius: var(--r-md);
  animation: koPop 0.5s var(--ease-premium);
}
@keyframes koPop { from { opacity: 0; transform: scale(1.4); } to { opacity: 1; transform: none; } }
.versus-stats { display: grid; grid-template-columns: 1fr; gap: 5px; }
.versus-stats div { display: flex; justify-content: space-between; align-items: baseline; }
.versus-stats dt { font-family: var(--font-mono); font-size: 8px; letter-spacing: 0.14em; color: var(--ink-3); }
.versus-stats dd { font-family: var(--font-mono); font-size: 13px; font-weight: 700; color: #ff6aa6; }
.versus-incoming { display: flex; align-items: center; gap: 6px; }
.versus-incoming-label {
  font-family: var(--font-mono);
  font-size: 7px; letter-spacing: 0.18em; color: var(--ink-3);
  writing-mode: horizontal-tb;
}
.versus-incoming-bar {
  flex: 1; height: 8px;
  background: rgba(10,12,24,0.7);
  border: 1px solid var(--glass-border);
  border-radius: 99px;
  overflow: hidden;
  position: relative;
}
.versus-incoming-fill {
  position: absolute; left: 0; top: 0; height: 100%; width: 0%;
  background: linear-gradient(90deg, #ff9d4d, #ff3b50);
  box-shadow: 0 0 10px rgba(255,59,80,0.6);
  transition: width 0.25s var(--ease-premium);
}

/* Modificadores */
.modifier-bar {
  margin-top: 22px;
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  border: 1px solid var(--glass-border);
  border-radius: var(--r-md);
  background: rgba(10, 12, 24, 0.5);
  padding: 14px 20px;
}
.mod-toggle { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.mod-toggle input { accent-color: var(--accent); width: 15px; height: 15px; }
.mod-toggle span {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.14em; color: var(--ink-2);
}
.mod-toggle input:checked + span { color: var(--accent); }
.mod-toggle em { color: var(--gold); font-style: normal; margin-left: 4px; }

/* ══════════ PUZZLES ══════════ */
.puzzle-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
}
.puzzle-card {
  border: 1px solid var(--glass-border);
  background: var(--glass);
  border-radius: var(--r-md);
  padding: 18px;
  cursor: pointer;
  text-align: left;
  color: var(--ink-1);
  transition: all 0.3s var(--ease-premium);
  display: flex; flex-direction: column; gap: 8px;
}
.puzzle-card:hover { transform: translateY(-3px); border-color: rgba(70,240,255,0.45); }
.puzzle-card.is-done { border-color: rgba(255, 209, 102, 0.4); }
.puzzle-card h3 { font-size: 15px; letter-spacing: 0.1em; }
.puzzle-card p { font-family: var(--font-mono); font-size: 10px; color: var(--ink-2); letter-spacing: 0.12em; }
.puzzle-card .done-star { color: var(--gold); }
.puzzle-thumb {
  display: block;
  width: 100%;
  max-height: 96px;
  border-radius: var(--r-sm, 6px);
  background: rgba(8, 10, 22, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.05);
  padding: 4px;
  margin: 2px 0;
}
.puzzle-pieces { color: var(--gold) !important; opacity: 0.85; }
.puzzle-tag { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

/* ══════════ HELP ══════════ */
.help-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}
.help-card {
  border: 1px solid var(--glass-border);
  background: var(--glass);
  border-radius: var(--r-lg);
  padding: 22px;
}
.help-card h3 {
  font-size: 13px; letter-spacing: 0.24em;
  color: var(--accent); margin-bottom: 14px;
}
.help-card ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.help-card li { font-size: 13px; color: var(--ink-2); line-height: 1.5; }
kbd {
  font-family: var(--font-mono); font-size: 11px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.14);
  border-bottom-width: 2px;
  border-radius: 6px;
  padding: 2px 8px;
  margin-right: 4px;
  color: var(--ink-1);
}

/* ══════════ AJUSTES ══════════ */
.settings-list { display: flex; flex-direction: column; gap: 14px; max-width: 620px; }
.setting-block {
  border: 1px solid var(--glass-border);
  background: var(--glass);
  border-radius: var(--r-md);
  padding: 16px 20px;
}
.setting-block-label {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.22em; color: var(--ink-2);
  display: block; margin-bottom: 14px;
}
.theme-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 10px; }
.theme-chip {
  border: 1px solid var(--glass-border);
  background: rgba(255,255,255,0.02);
  border-radius: 12px;
  padding: 12px 10px;
  cursor: pointer;
  text-align: center;
  transition: all 0.3s var(--ease-premium);
  color: var(--ink-2);
}
.theme-chip:hover { transform: translateY(-3px); border-color: rgba(255,255,255,0.25); }
.theme-chip.is-active {
  border-color: var(--accent);
  box-shadow: 0 0 22px rgba(70,240,255,0.22), inset 0 0 14px rgba(70,240,255,0.06);
}
.theme-swatches { display: flex; gap: 3px; justify-content: center; margin-bottom: 9px; }
.theme-swatch { width: 12px; height: 18px; border-radius: 3px; box-shadow: 0 0 8px currentColor; }
.theme-chip-name { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; }
.theme-chip.is-active .theme-chip-name { color: var(--accent); }
.setting-row {
  display: flex; justify-content: space-between; align-items: center; gap: 22px;
  border: 1px solid var(--glass-border);
  background: var(--glass);
  border-radius: var(--r-md);
  padding: 16px 20px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em;
  color: var(--ink-2);
}
.setting-row input[type="range"] { accent-color: var(--accent); width: 45%; }
.setting-row input[type="checkbox"] { accent-color: var(--accent); width: 18px; height: 18px; }

/* ── Bloque Handling: DAS/ARR/SDF ── */
.setting-block--handling { display: flex; flex-direction: column; gap: 10px; }
.setting-row--handling {
  border: none; background: rgba(255,255,255,0.02);
  display: grid; grid-template-columns: 1fr 45% 60px; align-items: center; gap: 14px;
  padding: 12px 14px;
}
.setting-row--handling span em {
  display: block; font-style: normal; font-size: 9px; letter-spacing: 0.08em;
  color: var(--ink-3); text-transform: none; margin-top: 3px;
}
.setting-val {
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  color: var(--accent); text-align: right; letter-spacing: 0.04em;
}

/* ══════════ JUEGO ══════════ */
#screen-game { padding: clamp(8px, 1.6vh, 20px); align-items: center; justify-content: center; }
.game-layout {
  display: flex;
  gap: clamp(10px, 1.8vw, 24px);
  align-items: stretch;
  justify-content: center;
  height: 100%;
  max-height: 100%;
  width: 100%;
}

.hud-panel {
  display: flex; flex-direction: column; gap: 12px;
  width: clamp(140px, 16vw, 190px);
  justify-content: flex-start;
  padding-top: 4px;
  /* `flex: none` fija su ancho declarado y evita que el navegador reparta
     el desbordamiento estirando los paneles: si falta sitio, el que cede
     es el escenario (que se recalcula), no la pantalla. */
  flex: none;
  min-width: 0;
}
.hud-block {
  border: 1px solid var(--glass-border);
  background: var(--glass);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-radius: var(--r-md);
  padding: 14px;
}
.hud-label {
  font-family: var(--font-mono);
  font-size: 9px; letter-spacing: 0.3em;
  color: var(--ink-3);
  margin-bottom: 8px;
}
#hold-canvas, #next-canvas { display: block; width: 100%; height: auto; }

.hud-stats { display: grid; grid-template-columns: 1fr; gap: 6px; }
.hud-stats div { display: flex; justify-content: space-between; align-items: baseline; }
.hud-stats dt { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.16em; color: var(--ink-3); }
.hud-stats dd { font-family: var(--font-mono); font-size: 13px; font-weight: 600; color: var(--ink-1); }

.hud-score .score-value {
  display: block;
  font-family: var(--font-mono);
  font-size: clamp(20px, 2.3vw, 30px);
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #fff;
  text-shadow: 0 0 22px rgba(70, 240, 255, 0.4);
  transition: transform 0.18s var(--ease-premium);
}
.hud-score .score-value.bump { transform: scale(1.12); color: var(--accent); }

.combo-row { display: flex; gap: 6px; margin-top: 8px; min-height: 22px; }
.combo-chip {
  font-family: var(--font-mono); font-size: 10px; font-weight: 600;
  letter-spacing: 0.14em;
  color: #05060d;
  background: var(--accent);
  padding: 3px 9px;
  border-radius: 99px;
  box-shadow: 0 0 16px rgba(70, 240, 255, 0.5);
  animation: chipPop 0.3s var(--ease-premium);
}
.combo-chip--b2b { background: var(--gold); box-shadow: 0 0 16px rgba(255, 209, 102, 0.5); }
@keyframes chipPop { from { transform: scale(0.6); opacity: 0; } to { transform: scale(1); } }

.hud-duo { display: flex; justify-content: space-between; gap: 10px; }
.hud-big {
  font-family: var(--font-mono);
  font-size: clamp(17px, 2vw, 24px);
  font-weight: 600;
}
.hud-time { color: var(--accent); }
.level-progress {
  margin-top: 10px; height: 3px;
  background: rgba(255,255,255,0.07);
  border-radius: 99px; overflow: hidden;
}
.level-progress-fill {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  border-radius: 99px;
  transition: width 0.4s var(--ease-premium);
  box-shadow: 0 0 10px rgba(70,240,255,0.6);
}

/* Bloque de ritmo */
.beat-track {
  position: relative; height: 34px;
  border: 1px solid var(--glass-border);
  border-radius: 8px;
  overflow: hidden;
  background: rgba(0,0,0,0.3);
}
.beat-track::after {
  content: ''; position: absolute; left: 50%; top: 0; bottom: 0;
  width: 2px; background: var(--accent-3);
  box-shadow: 0 0 8px var(--accent-3);
}
.beat-pulse {
  position: absolute; top: 6px; bottom: 6px; width: 8px;
  border-radius: 4px;
  background: var(--accent);
  box-shadow: 0 0 12px var(--accent);
}
.hud-mini { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.2em; color: var(--ink-2); display: block; margin-top: 8px; }

/* ── Bloque Zone (medidor de mecánica ZONE) ── */
.hud-zone { border-color: rgba(255,209,102,0.2); }
.hud-zone .hud-label { display: flex; align-items: center; justify-content: space-between; color: var(--gold); }
.hud-zone-count { font-size: 11px; color: var(--ink-1); }
.zone-meter {
  height: 10px; border-radius: 99px; overflow: hidden;
  background: rgba(0,0,0,0.35); border: 1px solid rgba(255,209,102,0.2);
  position: relative;
}
.zone-meter-fill {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, #ffb347, var(--gold));
  box-shadow: 0 0 12px rgba(255,209,102,0.6);
  border-radius: 99px;
  transition: width 0.35s var(--ease-premium);
}
.zone-label { text-align: center; letter-spacing: 0.16em; }
.hud-zone.is-ready { animation: zoneReadyPulse 1.1s ease-in-out infinite; }
.hud-zone.is-ready .zone-meter-fill {
  background: linear-gradient(90deg, var(--gold), #fff6d8, var(--gold));
  background-size: 200% 100%;
  animation: zoneFillShimmer 1.2s linear infinite;
}
.hud-zone.is-ready .zone-label { color: var(--gold); font-weight: 700; }
@keyframes zoneReadyPulse {
  0%, 100% { box-shadow: 0 0 0 rgba(255,209,102,0); }
  50%      { box-shadow: 0 0 26px rgba(255,209,102,0.35); }
}
@keyframes zoneFillShimmer { to { background-position: 200% 0; } }
.zone-timer {
  margin-top: 8px; height: 5px; border-radius: 99px; overflow: hidden;
  background: rgba(0,0,0,0.35); border: 1px solid rgba(182,83,255,0.25);
}
.zone-timer-fill {
  height: 100%; width: 100%;
  background: linear-gradient(90deg, var(--accent-2), #ffd9f0);
  box-shadow: 0 0 10px rgba(182,83,255,0.6);
  transition: width 0.2s linear;
}

/* ── Overlay de congelación temporal ZONE sobre el tablero ── */
.zone-overlay {
  position: absolute; inset: 0; z-index: 4; pointer-events: none;
  display: flex; align-items: flex-start; justify-content: center;
  background: linear-gradient(180deg, rgba(182,83,255,0.10), rgba(70,240,255,0.04) 40%, rgba(255,106,166,0.08));
  animation: zonePulseBg 2.4s ease-in-out infinite;
}
.zone-overlay[hidden] { display: none !important; }
.zone-overlay-frame {
  position: absolute; inset: 6px; border-radius: 10px;
  border: 2px solid rgba(182,83,255,0.55);
  box-shadow: 0 0 40px rgba(182,83,255,0.35), inset 0 0 40px rgba(182,83,255,0.18);
  animation: zoneFramePulse 1.6s ease-in-out infinite;
}
@keyframes zonePulseBg { 0%, 100% { opacity: 0.7; } 50% { opacity: 1; } }
@keyframes zoneFramePulse {
  0%, 100% { box-shadow: 0 0 40px rgba(182,83,255,0.35), inset 0 0 40px rgba(182,83,255,0.18); }
  50%      { box-shadow: 0 0 64px rgba(182,83,255,0.55), inset 0 0 56px rgba(182,83,255,0.28); }
}
.zone-overlay-tag {
  margin-top: 14px;
  font-family: var(--font-mono); font-weight: 700; letter-spacing: 0.3em;
  font-size: clamp(11px, 1.6vw, 15px);
  color: #fff;
  text-shadow: 0 0 18px rgba(182,83,255,0.9);
  background: rgba(12,8,26,0.5);
  padding: 6px 16px; border-radius: 99px;
  border: 1px solid rgba(182,83,255,0.4);
}

/* ── Botón táctil ZONE ── */
.tbtn-zone {
  color: var(--gold); border-color: rgba(255,209,102,0.4);
  background: rgba(60, 44, 10, 0.5);
}
.tbtn-zone:active { background: rgba(255,209,102,0.3); }
.tbtn-zone.is-ready {
  animation: zoneReadyPulse 1.1s ease-in-out infinite;
  border-color: var(--gold);
  color: #fff6d8;
}

/* Escenario.
   `min-width: 0` es imprescindible: por defecto un flex item no se encoge
   por debajo del ancho de su contenido, así que el escenario empujaba al
   `game-layout` fuera de la pantalla en móvil en lugar de ceder. Con esto
   `stage.clientWidth` refleja el espacio realmente disponible, que es lo
   que `Renderer.fit()` usa para calcular el tamaño de celda. */
.stage {
  display: flex; flex-direction: column; align-items: center;
  gap: 10px; height: 100%; justify-content: center;
  min-width: 0;
  flex: 1 1 auto;
}
.stage-frame {
  position: relative;
  border: 1px solid rgba(120, 160, 255, 0.22);
  border-radius: 14px;
  background: rgba(5, 7, 16, 0.72);
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.5),
    0 24px 70px rgba(0,0,0,0.6),
    0 0 60px rgba(70, 240, 255, 0.07),
    inset 0 0 70px rgba(10, 14, 36, 0.8);
  overflow: hidden;
}
.stage-frame.shake { animation: stageShake 0.22s linear; }
@keyframes stageShake {
  0%, 100% { transform: translate(0, 0); }
  25% { transform: translate(-3px, 2px); }
  50% { transform: translate(3px, -2px); }
  75% { transform: translate(-2px, -1px); }
}
.stage-frame.shake-big { animation: stageShakeBig 0.34s linear; }
@keyframes stageShakeBig {
  0%, 100% { transform: translate(0, 0); }
  20% { transform: translate(-6px, 4px) rotate(-0.4deg); }
  40% { transform: translate(6px, -4px) rotate(0.4deg); }
  60% { transform: translate(-4px, -3px); }
  80% { transform: translate(3px, 3px); }
}
#board-canvas, #fx-canvas { display: block; }
#fx-canvas { position: absolute; inset: 0; pointer-events: none; }

/* ── Post-procesado: flash y glitch ── */
.stage-flash {
  position: absolute; inset: 0; z-index: 4; pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(255,255,255,0.85), transparent 70%);
  opacity: 0; mix-blend-mode: screen;
}
.stage-flash.fire { animation: stageFlash 0.4s var(--ease-premium); }
@keyframes stageFlash { 0% { opacity: 0.9; } 100% { opacity: 0; } }
.stage-flash.fire-gold {
  background: radial-gradient(ellipse at center, rgba(255,209,102,0.9), transparent 72%);
  animation: stageFlash 0.7s var(--ease-premium);
}
.stage-glitch {
  position: absolute; inset: 0; z-index: 4; pointer-events: none; opacity: 0;
  background:
    repeating-linear-gradient(0deg, rgba(255,0,80,0.10) 0 2px, transparent 2px 5px),
    repeating-linear-gradient(0deg, rgba(0,240,255,0.10) 1px 3px, transparent 3px 6px);
  mix-blend-mode: screen;
}
.stage-glitch.fire { animation: glitchFlick 0.34s steps(2) ; }
@keyframes glitchFlick {
  0% { opacity: 0.9; transform: translateX(-4px); }
  25% { opacity: 0.5; transform: translateX(5px); }
  50% { opacity: 0.8; transform: translateX(-3px); }
  100% { opacity: 0; transform: none; }
}
/* Aberración cromática sobre el frame en golpes grandes */
.stage-frame.chroma { animation: chromaPulse 0.45s var(--ease-premium); }
@keyframes chromaPulse {
  0% { filter: none; }
  30% { filter: drop-shadow(3px 0 0 rgba(255,0,90,0.55)) drop-shadow(-3px 0 0 rgba(0,240,255,0.55)); }
  100% { filter: none; }
}

.stage-callout {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  pointer-events: none;
  z-index: 5;
}
.callout-text {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(22px, 3.4vw, 42px);
  letter-spacing: 0.18em;
  text-align: center;
  background: linear-gradient(90deg, var(--accent), #fff, var(--accent-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 24px rgba(70, 240, 255, 0.5));
  animation: calloutIn 1.1s var(--ease-premium) forwards;
}
.callout-text small {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.34em;
  letter-spacing: 0.5em;
  color: var(--gold);
  -webkit-text-fill-color: var(--gold);
  margin-top: 6px;
}
@keyframes calloutIn {
  0%   { opacity: 0; transform: scale(1.5); filter: blur(8px); }
  18%  { opacity: 1; transform: scale(1); filter: blur(0); }
  78%  { opacity: 1; transform: scale(1.02); }
  100% { opacity: 0; transform: scale(0.94) translateY(-14px); }
}

.stage-countdown {
  position: absolute; inset: 0; z-index: 6;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono);
  font-size: clamp(60px, 10vw, 120px);
  font-weight: 800;
  color: var(--accent);
  text-shadow: 0 0 50px rgba(70, 240, 255, 0.6);
  background: rgba(5, 6, 13, 0.45);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  transition: opacity 0.35s var(--ease-premium);
}
/* Garantiza que [hidden] oculte realmente el overlay (display:flex lo anulaba) */
.stage-countdown[hidden] {
  display: none !important;
  opacity: 0;
  pointer-events: none;
}
.stage-countdown.fade-out { opacity: 0; }
.stage-countdown.tick { animation: countTick 0.9s var(--ease-premium); }
@keyframes countTick {
  0% { transform: scale(1.6); opacity: 0; }
  30% { transform: scale(1); opacity: 1; }
  100% { transform: scale(0.92); opacity: 0.85; }
}
.stage-bottom { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; justify-content: center; }

/* ══════════ OVERLAYS ══════════ */
.overlay {
  position: fixed; inset: 0; z-index: 20;
  display: flex; align-items: center; justify-content: center;
  background: rgba(4, 5, 12, 0.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  animation: overlayIn 0.4s var(--ease-premium);
  padding: 20px;
}
@keyframes overlayIn { from { opacity: 0; } to { opacity: 1; } }
.overlay[hidden] { display: none; }
.overlay-card {
  border: 1px solid var(--glass-border);
  background: rgba(12, 15, 32, 0.85);
  border-radius: 22px;
  padding: clamp(28px, 5vh, 48px) clamp(28px, 5vw, 60px);
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  box-shadow: 0 30px 90px rgba(0,0,0,0.6), 0 0 60px rgba(70,240,255,0.08);
  animation: cardIn 0.55s var(--ease-premium);
  max-width: 92vw;
  max-height: 90vh;
  overflow-y: auto;
}
@keyframes cardIn { from { transform: translateY(26px) scale(0.96); opacity: 0; } to { transform: none; opacity: 1; } }
.overlay-title { font-size: clamp(22px, 3.6vw, 36px); letter-spacing: 0.18em; font-weight: 700; text-align: center; }
.overlay-title--score {
  font-family: var(--font-mono);
  font-size: clamp(38px, 7vw, 72px);
  letter-spacing: 0.04em;
  background: linear-gradient(180deg, #fff, var(--accent));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 30px rgba(70,240,255,0.35));
}
.overlay-sub {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.4em; color: var(--ink-2);
}
#result-newbest { color: var(--gold); animation: bestBlink 1s ease-in-out infinite; }
@keyframes bestBlink { 50% { opacity: 0.45; } }
.overlay-actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 8px; }
.result-grid {
  display: grid; grid-template-columns: repeat(2, minmax(130px, 1fr));
  gap: 10px 30px;
  margin: 10px 0;
}
.result-grid div { display: flex; justify-content: space-between; gap: 18px; }
.result-grid dt { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em; color: var(--ink-3); }
.result-grid dd { font-family: var(--font-mono); font-size: 13px; font-weight: 600; }

/* ══════════ PERFIL / STATS / RANKING ══════════ */
#screen-stats, #screen-achievements { overflow-y: auto; }
.stats-overview { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin-bottom: 22px; }
.stat-tile {
  border: 1px solid var(--glass-border); background: var(--glass);
  border-radius: var(--r-md); padding: 18px;
  display: flex; flex-direction: column; gap: 4px;
}
.stat-tile--name { border-color: rgba(70,240,255,0.3); }
.stat-tile-val { font-family: var(--font-mono); font-size: 20px; font-weight: 600; color: var(--ink-1); }
.stat-tile--name .stat-tile-val { color: var(--accent); font-size: 16px; outline: none; cursor: text; border-bottom: 1px dashed transparent; }
.stat-tile--name .stat-tile-val:focus { border-bottom-color: var(--accent); }
.stat-tile-key { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.2em; color: var(--ink-3); }
.stats-charts { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.stats-card { border: 1px solid var(--glass-border); background: var(--glass); border-radius: var(--r-lg); padding: 22px; }
.stats-card-title { font-size: 12px; letter-spacing: 0.18em; color: var(--accent); margin-bottom: 18px; }
.rec-row { display: grid; grid-template-columns: 80px 1fr 80px; align-items: center; gap: 12px; margin-bottom: 12px; }
.rec-name { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; color: var(--ink-2); }
.rec-bar { height: 6px; background: rgba(255,255,255,0.06); border-radius: 99px; overflow: hidden; }
.rec-fill { height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-2)); box-shadow: 0 0 10px var(--accent); border-radius: 99px; transition: width 0.8s var(--ease-premium); }
.rec-val { font-family: var(--font-mono); font-size: 11px; color: var(--ink-1); text-align: right; }
.rank-tabs { display: flex; gap: 6px; margin-bottom: 14px; flex-wrap: wrap; }
.rank-tab {
  font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.12em;
  padding: 6px 12px; border-radius: 99px; border: 1px solid var(--glass-border);
  background: rgba(255,255,255,0.02); color: var(--ink-2); transition: all 0.25s;
}
.rank-tab.is-active { border-color: var(--accent); color: var(--accent); }
.rank-list { list-style: none; display: flex; flex-direction: column; gap: 6px; }
.rank-loading { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; color: var(--ink-3); padding: 12px 0; }
.rank-row { display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 8px; background: rgba(255,255,255,0.02); }
.rank-row.is-me { border: 1px solid rgba(70,240,255,0.4); background: rgba(70,240,255,0.05); }
.rank-pos { font-family: var(--font-mono); font-size: 13px; }
.rank-player { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; color: var(--ink-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank-val { font-family: var(--font-mono); font-size: 12px; font-weight: 600; color: var(--accent); }

/* ══════════ TOASTS / LOGROS ══════════ */
#toast-host {
  position: fixed; top: 20px; right: 20px; z-index: 60;
  display: flex; flex-direction: column; gap: 10px; pointer-events: none;
  max-width: 90vw;
}
.toast {
  display: flex; align-items: center; gap: 14px;
  border: 1px solid rgba(255,209,102,0.4);
  background: rgba(14, 17, 34, 0.92);
  backdrop-filter: blur(16px);
  border-radius: 14px;
  padding: 14px 18px;
  box-shadow: 0 16px 50px rgba(0,0,0,0.5), 0 0 30px rgba(255,209,102,0.15);
  transform: translateX(120%);
  opacity: 0;
  transition: transform 0.5s var(--ease-premium), opacity 0.5s;
  min-width: 260px;
}
.toast.show { transform: none; opacity: 1; }
.toast-icon {
  font-size: 26px; color: var(--gold);
  filter: drop-shadow(0 0 12px rgba(255,209,102,0.6));
  flex-shrink: 0;
}
.toast-body { display: flex; flex-direction: column; gap: 2px; }
.toast-tag { font-family: var(--font-mono); font-size: 8px; letter-spacing: 0.3em; color: var(--gold); }
.toast-name { font-size: 14px; letter-spacing: 0.08em; }
.toast-desc { font-family: var(--font-mono); font-size: 10px; color: var(--ink-2); letter-spacing: 0.05em; }

.ach-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.ach-card {
  border: 1px solid var(--glass-border);
  background: var(--glass);
  border-radius: var(--r-md);
  padding: 18px;
  display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center;
  opacity: 0.45; transition: all 0.3s var(--ease-premium);
}
.ach-card.is-unlocked { opacity: 1; border-color: rgba(255,209,102,0.35); box-shadow: 0 0 22px rgba(255,209,102,0.08); }
.ach-icon { font-size: 28px; color: var(--ink-3); }
.ach-card.is-unlocked .ach-icon { color: var(--gold); filter: drop-shadow(0 0 12px rgba(255,209,102,0.5)); }
.ach-name { font-size: 13px; letter-spacing: 0.08em; }
.ach-desc { font-family: var(--font-mono); font-size: 10px; color: var(--ink-2); line-height: 1.4; }

/* ══════════ TÁCTIL ══════════ */
.touch-bar {
  display: none;
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 15;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  justify-content: center; gap: 8px;
  background: linear-gradient(180deg, transparent, rgba(4,5,12,0.85));
}
.tbtn {
  flex: 1; max-width: 76px;
  height: 58px;
  border-radius: 14px;
  border: 1px solid var(--glass-border);
  background: rgba(16, 20, 42, 0.75);
  color: var(--ink-1);
  font-size: 21px;
  backdrop-filter: blur(10px);
  transition: background 0.15s;
}
.tbtn:active { background: rgba(70, 240, 255, 0.25); }
.tbtn-drop { border-color: rgba(70,240,255,0.5); color: var(--accent); }
.tbtn-small { font-size: 14px; max-width: 56px; }

/* ══════════ RESPONSIVE ══════════ */
@media (max-width: 900px) {
  .game-layout { gap: 8px; }
  .hud-panel { width: clamp(96px, 22vw, 130px); gap: 8px; }
  .hud-block { padding: 9px; }
  .hud-stats div:nth-child(n+4) { display: none; }
  .hud-rhythm .beat-track { height: 26px; }
  .hud-versus { width: clamp(82px, 20vw, 120px); }
}
@media (max-width: 700px) {
  #screen-game { padding-bottom: 86px; }
  .touch-bar { display: flex; }
  .hud-left .hud-block:nth-child(2) { display: none; }
  /* EL PROTAGONISTA ES EL TABLERO.
     Con paneles de 96 px a cada lado, en una pantalla de 390 px al pozo le
     quedaban 139 px: un 36 % del ancho para lo único que de verdad hay que
     mirar mientras se juega. Estrechando los laterales el tablero pasa a
     ~230 px (un 60 %), sin sacrificar ningún dato: las métricas siguen
     visibles, solo más compactas. */
  .hud-panel { width: clamp(54px, 16vw, 66px); gap: 6px; }
  .hud-block { padding: 6px; }
  /* Palabras como «PUNTUACIÓN» o «SIGUIENTES» no caben en una columna de
     54 px y, al ser una sola palabra, el navegador no puede partirlas por
     sí mismo: se salían del bloque (medido: 61 px de texto en 48 visibles).
     `overflow-wrap: anywhere` le autoriza a cortarlas donde haga falta, así
     la etiqueta se lee en dos líneas en vez de quedar recortada. */
  .hud-label {
    font-size: 8px; letter-spacing: 0.08em; margin-bottom: 5px;
    overflow-wrap: anywhere; line-height: 1.25;
  }
  .hud-stats dt { font-size: 8px; letter-spacing: 0.06em; }
  .hud-stats dd { font-size: 11px; }
  /* En columnas tan estrechas, dato y etiqueta caben mejor apilados que
     enfrentados en la misma línea. */
  .hud-stats div { flex-direction: column; align-items: flex-start; gap: 1px; }
  .hud-score .score-value { font-size: 17px; }
  .result-grid { grid-template-columns: 1fr; }
  /* En móvil, el panel rival pasa a una mini-vista compacta superior */
  .game-layout.is-versus .hud-left { display: none; }
  .hud-versus .versus-stats, .hud-versus .versus-incoming { display: none; }
  .hud-versus { width: clamp(70px, 24vw, 100px); }
  .hud-zone { padding: 8px; }
  .hud-zone .hud-label { font-size: 8px; }
  .zone-overlay-tag { font-size: 9px; padding: 4px 10px; }
  .tbtn { max-width: 60px; }
}
@media (pointer: coarse) and (max-width: 1024px) {
  .touch-bar { display: flex; }
  #screen-game { padding-bottom: 86px; }
}
@media (max-width: 560px) {
  .setting-row--handling { grid-template-columns: 1fr; gap: 6px; }
  .setting-val { text-align: left; }
  .key-row { grid-template-columns: 1fr auto; }
}

/* ══════════ REMAPEO DE CONTROLES ══════════ */
.setting-hint {
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 0.06em;
  color: var(--ink-2);
  margin-bottom: 12px;
  line-height: 1.6;
}
.setting-hint kbd {
  font-family: var(--font-mono);
  font-size: 9px;
  border: 1px solid var(--glass-border);
  border-radius: 5px;
  padding: 1px 6px;
  background: rgba(10,12,24,0.7);
  color: var(--ink-1);
}
.keymap-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 8px;
  margin-bottom: 14px;
}
.key-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border: 1px solid var(--glass-border);
  border-radius: var(--r-md);
  background: rgba(10, 12, 24, 0.55);
  cursor: pointer;
  text-align: left;
  color: var(--ink-1);
  transition: all 0.25s var(--ease-premium);
}
.key-row:hover {
  border-color: rgba(70,240,255,0.45);
  background: rgba(16, 22, 44, 0.75);
  transform: translateY(-2px);
}
.key-row.is-listening {
  border-color: var(--rb-3);
  box-shadow: 0 0 20px rgba(255,214,10,0.25), inset 0 0 14px rgba(255,214,10,0.08);
  animation: keyListenPulse 0.9s ease-in-out infinite;
}
@keyframes keyListenPulse {
  0%, 100% { box-shadow: 0 0 12px rgba(255,214,10,0.2); }
  50% { box-shadow: 0 0 26px rgba(255,214,10,0.45); }
}
.key-action {
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 0.16em;
  color: var(--ink-2);
}
.key-row.is-listening .key-action { color: var(--rb-3); }
.key-keys { display: flex; gap: 5px; flex-wrap: wrap; justify-content: flex-end; }
.key-keys kbd {
  font-family: var(--font-mono);
  font-size: 10px; font-weight: 600;
  border: 1px solid rgba(120,160,255,0.3);
  border-bottom-width: 2px;
  border-radius: 6px;
  padding: 3px 8px;
  background: linear-gradient(180deg, rgba(28,34,64,0.9), rgba(14,18,36,0.9));
  color: var(--ink-1);
  min-width: 24px;
  text-align: center;
}
.key-row.is-listening .key-keys kbd {
  color: #05060d;
  background: linear-gradient(180deg, var(--rb-3), #d9b000);
  border-color: transparent;
}
.btn-keys-reset { font-size: 11px; }
.setting-note {
  display: block;
  font-family: var(--font-mono);
  font-size: 9px; letter-spacing: 0.05em;
  color: var(--ink-3);
  font-style: normal;
  margin-top: 2px;
}

/* ══════════ ACCESIBILIDAD: REDUCIR MOVIMIENTO (toggle manual) ══════════ */
body.reduce-motion *,
body.reduce-motion *::before,
body.reduce-motion *::after {
  animation-duration: 0.001s !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.05s !important;
}
body.reduce-motion #grain,
body.reduce-motion #scanlines,
body.reduce-motion .home-orbit,
body.reduce-motion .logo-glow,
body.reduce-motion .logo-ring { display: none !important; }
body.reduce-motion .logo-blocks { transform: none !important; }

/* ══════════ FINESSE HUD + MEDALLAS ══════════ */
.hud-finesse { text-align: center; }
.finesse-grade {
  display: block;
  font-family: var(--font-mono);
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 800;
  letter-spacing: 0.06em;
  background: linear-gradient(120deg, var(--rb-3), var(--rb-2));
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 12px rgba(255,214,10,0.35));
}
.finesse-grade[data-grade="S"] { background-image: linear-gradient(120deg, #fff, var(--rb-3)); }
.finesse-grade[data-grade="A"] { background-image: linear-gradient(120deg, var(--rb-4), var(--rb-5)); }
.finesse-grade[data-grade="B"] { background-image: linear-gradient(120deg, var(--rb-5), var(--rb-6)); }
.finesse-grade[data-grade="C"] { background-image: linear-gradient(120deg, var(--rb-2), var(--rb-1)); }
.finesse-sub {
  font-family: var(--font-mono);
  font-size: 9px; letter-spacing: 0.14em;
  color: var(--ink-3);
}

/* ══════════ GHOST PACE (Sprint vs tu mejor run) ══════════ */
.hud-ghost { text-align: center; }
.ghost-delta {
  display: block;
  font-family: var(--font-mono);
  font-size: clamp(18px, 2vw, 26px);
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--ink-2);
}
.ghost-delta[data-state="ahead"] {
  color: var(--rb-4);
  text-shadow: 0 0 14px rgba(52, 209, 67, 0.5);
}
.ghost-delta[data-state="behind"] {
  color: var(--rb-1);
  text-shadow: 0 0 14px rgba(255, 59, 48, 0.5);
}

/* ══════════ GRÁFICA DE RENDIMIENTO EN RESULTADOS ══════════ */
.result-chart-wrap { width: 100%; margin: 10px 0 4px; }
.result-chart-title {
  font-family: var(--font-mono);
  font-size: 9px; letter-spacing: 0.28em;
  color: var(--ink-3);
  display: block; text-align: left; margin-bottom: 6px;
}
#result-chart {
  display: block; width: 100%; height: 84px;
  border: 1px solid var(--glass-border);
  border-radius: var(--r-md);
  background: rgba(8, 10, 22, 0.6);
}

/* ══════════ PWA · INSTALACIÓN ══════════ */
.nav-btn--install {
  border-color: rgba(52, 209, 67, 0.4);
}
.nav-btn--install .nav-ico { color: var(--rb-4); filter: drop-shadow(0 0 8px rgba(52,209,67,0.6)); }
.nav-btn--install:hover { border-color: rgba(52,209,67,0.7); }
.overlay-card--install { max-width: 520px; }
.install-steps {
  display: flex; flex-direction: column; gap: 12px;
  margin: 18px 0 22px;
  text-align: left;
}
.install-step {
  border: 1px solid var(--glass-border);
  border-radius: var(--r-md);
  background: rgba(10, 12, 24, 0.55);
  padding: 12px 16px;
}
.install-step strong {
  display: block;
  font-size: 13px; letter-spacing: 0.08em;
  margin-bottom: 4px;
  color: var(--ink-1);
}
.install-step p {
  font-family: var(--font-mono);
  font-size: 11px; color: var(--ink-2); line-height: 1.6;
}
.install-step b { color: var(--accent); font-weight: 600; }
.install-glyph { color: var(--rb-4); }

/* ══════════ SEGURIDAD / COPYRIGHT ══════════ */
.sys-tag--copy { color: var(--ink-3); }
#sec-tip {
  position: fixed;
  left: 50%; bottom: 26px;
  transform: translateX(-50%) translateY(16px);
  z-index: 90;
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.12em;
  color: var(--ink-1);
  background: rgba(16, 20, 42, 0.92);
  border: 1px solid rgba(255, 214, 10, 0.35);
  border-radius: 99px;
  padding: 8px 18px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s, transform 0.3s var(--ease-premium);
  box-shadow: 0 10px 30px rgba(0,0,0,0.5), 0 0 18px rgba(255,214,10,0.12);
}
#sec-tip.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ══════════ DAILY CHALLENGE ══════════ */
.daily-tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 9px; letter-spacing: 0.2em;
  color: #05060d;
  background: linear-gradient(120deg, var(--rb-5), var(--rb-6));
  border-radius: 99px;
  padding: 3px 10px;
  font-weight: 700;
  width: fit-content;
}

/* ══════════ JOURNEY HUD — progreso del viaje ══════════ */
.hud-journey {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  text-align: center;
}
.journey-dots {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 0;
}
.journey-dots span {
  --dot-c: var(--accent);
  width: 9px; height: 9px;
  border-radius: 50%;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.18);
  transition: all 0.4s var(--ease-premium);
}
.journey-dots span.is-done {
  background: var(--dot-c);
  border-color: var(--dot-c);
  box-shadow: 0 0 8px var(--dot-c);
  opacity: 0.75;
}
.journey-dots span.is-current {
  background: var(--dot-c);
  border-color: var(--dot-c);
  box-shadow: 0 0 12px var(--dot-c), 0 0 24px var(--dot-c);
  animation: journeyDotPulse 1.6s ease-in-out infinite;
  transform: scale(1.25);
}
@keyframes journeyDotPulse {
  0%, 100% { box-shadow: 0 0 8px var(--dot-c); }
  50% { box-shadow: 0 0 16px var(--dot-c), 0 0 30px var(--dot-c); }
}
#journey-stage-name {
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 0.2em;
  color: var(--accent);
  transition: color 0.6s;
}
body.reduce-motion .journey-dots span.is-current { animation: none; }

/* ══════════ SKILL BATTLE (estilo PPT2) ══════════ */
.hud-skills { display: flex; flex-direction: column; gap: 6px; }
.skill-status {
  font-family: var(--font-mono); font-size: 9px;
  color: var(--gold); letter-spacing: 0.1em;
  margin-left: 6px;
}
.skill-sp {
  height: 6px; border-radius: 99px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.10);
  overflow: hidden;
}
.skill-sp-fill {
  height: 100%; width: 0%;
  border-radius: 99px;
  background: linear-gradient(90deg, #46f0ff, #ffd60a);
  box-shadow: 0 0 10px rgba(255,214,10,0.5);
  transition: width 0.35s var(--ease-premium);
}
.skill-list { display: flex; flex-direction: column; gap: 5px; }
.skill-btn {
  display: grid;
  grid-template-columns: 22px 1fr auto;
  align-items: center; gap: 6px;
  padding: 6px 8px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.03);
  color: var(--ink-2);
  font-family: var(--font-mono);
  cursor: pointer;
  opacity: 0.55;
  transition: all 0.25s var(--ease-premium);
  text-align: left;
}
.skill-btn .skill-icon { font-size: 15px; }
.skill-btn .skill-name { font-size: 9px; letter-spacing: 0.14em; }
.skill-btn .skill-cost { font-size: 8px; color: var(--ink-3); white-space: nowrap; }
.skill-btn .skill-cost kbd {
  display: inline-block; padding: 1px 4px;
  border: 1px solid rgba(255,255,255,0.18); border-radius: 4px;
  font-size: 8px; margin-right: 3px;
}
.skill-btn.is-ready {
  opacity: 1;
  color: var(--ink-1);
  border-color: rgba(255,214,10,0.45);
  box-shadow: 0 0 14px rgba(255,214,10,0.12);
  animation: skillReady 1.8s ease-in-out infinite;
}
.skill-btn.is-ready:hover { background: rgba(255,214,10,0.10); transform: translateX(2px); }
.skill-btn.is-active {
  opacity: 1;
  border-color: rgba(70,240,255,0.6);
  background: rgba(70,240,255,0.08);
  box-shadow: 0 0 16px rgba(70,240,255,0.25);
}
@keyframes skillReady {
  0%, 100% { box-shadow: 0 0 8px rgba(255,214,10,0.10); }
  50% { box-shadow: 0 0 18px rgba(255,214,10,0.30); }
}
body.reduce-motion .skill-btn.is-ready { animation: none; }

/* ══════════ TIMELINE · BARRIDO (estilo Lumines) ══════════ */
.mode-card--timeline {
  border-color: rgba(255, 212, 94, 0.30);
  background:
    linear-gradient(135deg, rgba(255,212,94,0.10), rgba(91,107,255,0.12)),
    var(--glass);
}
.mode-card--timeline::after {
  content: '';
  position: absolute; top: 0; bottom: 0; width: 2px;
  background: linear-gradient(180deg, transparent, rgba(255,255,255,0.85), transparent);
  animation: sweepLine 3.2s linear infinite;
  pointer-events: none;
}
@keyframes sweepLine {
  0% { left: 0%; opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { left: 100%; opacity: 0; }
}
body.reduce-motion .mode-card--timeline::after { animation: none; opacity: 0; }

.hud-timeline { display: flex; flex-direction: column; gap: 6px; }
.timeline-factions { display: flex; gap: 6px; }
.faction-chip {
  flex: 1;
  font-family: var(--font-mono);
  font-size: 8px; letter-spacing: 0.16em;
  text-align: center;
  padding: 4px 0;
  border-radius: 6px;
  font-weight: 700;
}
.faction-chip--light {
  background: rgba(255,212,94,0.18);
  border: 1px solid rgba(255,212,94,0.5);
  color: #ffd45e;
}
.faction-chip--dark {
  background: rgba(91,107,255,0.18);
  border: 1px solid rgba(91,107,255,0.55);
  color: #9aa6ff;
}
.timeline-bar {
  height: 6px; border-radius: 99px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.10);
  overflow: hidden;
}
.timeline-bar-fill {
  height: 100%; width: 0%;
  border-radius: 99px;
  background: linear-gradient(90deg, #5b6bff, #ffd45e);
  box-shadow: 0 0 10px rgba(255,212,94,0.45);
  transition: width 0.3s var(--ease-premium);
}
.hud-timeline .hud-mini b { color: var(--gold); }

/* ══════════ REPLAY · grabación y reproducción ══════════ */
.replay-bar {
  display: flex; align-items: center; gap: 12px;
  margin-top: 10px;
  padding: 8px 14px;
  border-radius: 99px;
  border: 1px solid rgba(255, 61, 90, 0.4);
  background: rgba(14, 17, 34, 0.85);
  backdrop-filter: blur(10px);
}
.replay-live {
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 0.14em;
  color: #ff6a86;
  white-space: nowrap;
  animation: replayPulse 1.8s ease-in-out infinite;
}
@keyframes replayPulse { 0%,100% { opacity: 1; } 50% { opacity: 0.55; } }
body.reduce-motion .replay-live { animation: none; }
.replay-progress {
  flex: 1; height: 5px;
  border-radius: 99px;
  background: rgba(255,255,255,0.08);
  overflow: hidden;
}
.replay-progress-fill {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, #ff3d5a, #ffd60a);
  box-shadow: 0 0 10px rgba(255,61,90,0.5);
  transition: width 0.2s linear;
}
.replay-stop { padding: 5px 14px !important; font-size: 10px !important; }
/* Durante un replay, los controles táctiles se ocultan */
body.is-replaying .touch-bar { display: none !important; }

/* ═══════════════════════════════════════════════════════════
   TEATRO DE REPETICIONES — transporte con rebobinado real
   ═══════════════════════════════════════════════════════════ */
.replay-bar.is-theatre {
  flex-wrap: wrap;
  gap: 10px 12px;
  padding: 10px 16px;
  border-radius: 18px;
}
/* La pista apila barra, marcadores y control deslizante invisible */
.theatre-track {
  position: relative;
  flex: 1 1 240px;
  min-width: 180px;
  height: 18px;
  display: flex;
  align-items: center;
}
.theatre-track .replay-progress { flex: 1; }

/* Marcadores de momentos clave */
.theatre-marks {
  position: absolute; inset: 0;
  pointer-events: none;
}
.theatre-mark {
  position: absolute; top: 50%;
  width: 3px; height: 14px;
  margin-left: -1.5px;
  transform: translateY(-50%);
  border: 0; padding: 0;
  border-radius: 2px;
  background: var(--mark, #ffd60a);
  box-shadow: 0 0 8px var(--mark, #ffd60a);
  cursor: pointer;
  pointer-events: auto;
  opacity: 0.85;
  transition: height 0.15s ease, opacity 0.15s ease;
}
.theatre-mark:hover { height: 18px; opacity: 1; }
/* Un marcador mide 3 px: crecer 4 px no es un indicador de foco válido.
   Se le da un anillo real, visible sobre cualquier color de marca. */
.theatre-mark:focus-visible {
  height: 20px;
  opacity: 1;
  outline: 2px solid var(--fg, #fff);
  outline-offset: 2px;
  border-radius: 3px;
}

/* Control deslizante transparente sobre la barra: accesible y arrastrable */
.theatre-scrub {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  margin: 0; padding: 0;
  background: transparent;
  appearance: none; -webkit-appearance: none;
  cursor: pointer;
}
.theatre-scrub::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #ff3d5a;
  box-shadow: 0 0 10px rgba(255,61,90,0.8);
  cursor: grab;
}
.theatre-scrub::-moz-range-thumb {
  width: 14px; height: 14px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #ff3d5a;
  box-shadow: 0 0 10px rgba(255,61,90,0.8);
  cursor: grab;
}
.theatre-scrub::-moz-range-track { background: transparent; }
.theatre-scrub:active::-webkit-slider-thumb { cursor: grabbing; transform: scale(1.15); }
.theatre-scrub:focus-visible {
  outline: 2px solid var(--accent, #2ec7ff);
  outline-offset: 3px;
  border-radius: 99px;
}

.theatre-time {
  font-family: var(--font-mono);
  font-size: 11px;
  color: #cfd6f5;
  min-width: 46px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* Botonera de transporte */
.theatre-transport { display: flex; align-items: center; gap: 4px; }
.theatre-btn {
  min-width: 30px; height: 26px;
  padding: 0 7px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.05);
  color: #cfd6f5;
  font-family: var(--font-mono);
  font-size: 10px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.theatre-btn:hover {
  background: rgba(255,255,255,0.12);
  color: #fff;
  transform: translateY(-1px);
}
.theatre-btn:active { transform: translateY(0); }
.theatre-btn:focus-visible {
  outline: 2px solid var(--accent, #2ec7ff);
  outline-offset: 2px;
}
.theatre-btn--play {
  min-width: 36px;
  border-color: rgba(255,61,90,0.5);
  background: rgba(255,61,90,0.16);
  color: #ff8fa3;
}
.theatre-btn--play:hover { background: rgba(255,61,90,0.28); color: #fff; }
.theatre-btn--speed {
  min-width: 38px;
  border-color: rgba(46,199,255,0.4);
  background: rgba(46,199,255,0.12);
  color: #7fdcff;
  font-weight: 700;
}
.theatre-btn--speed:hover { background: rgba(46,199,255,0.24); color: #fff; }

body.reduce-motion .theatre-btn { transition: none; }
body.reduce-motion .theatre-btn:hover { transform: none; }

/* En pantallas estrechas el transporte pasa a su propia fila */
@media (max-width: 720px) {
  .replay-bar.is-theatre { border-radius: 14px; }
  .theatre-track { flex-basis: 100%; order: -1; }
  .theatre-btn { min-width: 28px; height: 24px; font-size: 9px; }
}

.stats-card--replays { grid-column: 1 / -1; margin-top: 16px; }
.replay-hint {
  font-family: var(--font-mono);
  font-size: 9px; letter-spacing: 0.1em;
  color: var(--ink-3);
  text-transform: none;
  margin-left: 8px;
}
.replay-list { display: flex; flex-direction: column; gap: 8px; }
.replay-empty {
  font-family: var(--font-mono);
  font-size: 11px; color: var(--ink-3);
  padding: 14px 0; text-align: center;
}
.replay-card {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
  padding: 12px 14px;
  border-radius: var(--r-md);
  border: 1px solid var(--glass-border);
  background: rgba(255,255,255,0.02);
  transition: all 0.25s var(--ease-premium);
}
.replay-card:hover {
  border-color: rgba(70,240,255,0.35);
  background: rgba(70,240,255,0.04);
}
.replay-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.replay-mode { font-size: 13px; letter-spacing: 0.08em; }
.replay-meta { font-family: var(--font-mono); font-size: 10px; color: var(--ink-2); letter-spacing: 0.06em; }
.replay-meta--dim { color: var(--ink-3); font-size: 9px; }
.replay-actions { display: flex; gap: 6px; flex-shrink: 0; }
.replay-btn { padding: 6px 12px !important; font-size: 10px !important; }
.replay-btn--del { color: #ff6a86 !important; border-color: rgba(255,61,90,0.3) !important; }
.replay-toolbar { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.replay-toolbar .btn { font-size: 10px !important; padding: 8px 14px !important; }

/* ═══════════════════════════════════════════════════════════
   PROTOCOLO 15 · TORRE INESTABLE (física de construcción)
   ═══════════════════════════════════════════════════════════ */
.mode-card--towers { --card-c: #ff9500; }
.mode-card--towers::after {
  content: '';
  position: absolute; left: 50%; bottom: 0;
  width: 2px; height: 42%;
  transform-origin: bottom center;
  background: linear-gradient(180deg, transparent, rgba(255,149,0,0.5));
  animation: towerSway 3.4s ease-in-out infinite;
  pointer-events: none;
}
@keyframes towerSway {
  0%, 100% { transform: rotate(-4deg); }
  50% { transform: rotate(4deg); }
}
body.reduce-motion .mode-card--towers::after { animation: none; }

.hud-towers { display: flex; flex-direction: column; gap: 7px; }
.tower-gauge {
  height: 9px; border-radius: 99px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.1);
  overflow: hidden;
}
.tower-gauge-fill {
  height: 100%; width: 100%;
  border-radius: 99px;
  transition: width 0.35s var(--ease-premium), background 0.35s;
  background: linear-gradient(90deg, #34d143, #9dff5e);
  box-shadow: 0 0 10px rgba(52,209,67,0.5);
}
.tower-gauge-fill[data-level="warn"] {
  background: linear-gradient(90deg, #ff9500, #ffd60a);
  box-shadow: 0 0 10px rgba(255,149,0,0.55);
}
.tower-gauge-fill[data-level="crit"] {
  background: linear-gradient(90deg, #ff2d55, #ff6a86);
  box-shadow: 0 0 14px rgba(255,45,85,0.7);
  animation: towerCrit 0.6s ease-in-out infinite;
}
@keyframes towerCrit { 0%,100% { opacity: 1; } 50% { opacity: 0.55; } }
body.reduce-motion .tower-gauge-fill[data-level="crit"] { animation: none; }

.tower-stab {
  font-family: var(--font-mono);
  font-size: 20px; font-weight: 800;
  letter-spacing: 0.04em;
  text-align: center;
  color: #6bff9e;
}
.tower-stab[data-level="warn"] { color: #ffb03d; }
.tower-stab[data-level="crit"] { color: #ff5a78; }

/* Indicador de inclinación (centro de masa) */
.tower-tilt { padding: 3px 0; }
.tower-tilt-track {
  position: relative; display: block;
  height: 4px; border-radius: 99px;
  background: linear-gradient(90deg,
    rgba(255,45,85,0.35), rgba(255,255,255,0.14) 45%,
    rgba(255,255,255,0.14) 55%, rgba(255,45,85,0.35));
}
.tower-tilt-track::before {
  content: ''; position: absolute; left: 50%; top: -3px;
  width: 1px; height: 10px;
  background: rgba(255,255,255,0.4);
}
.tower-tilt-mark {
  position: absolute; top: 50%; left: 50%;
  width: 9px; height: 9px; border-radius: 50%;
  transform: translate(-50%, -50%);
  background: #6bff9e;
  box-shadow: 0 0 10px currentColor;
  transition: left 0.3s var(--ease-premium), background 0.3s;
}
.tower-tilt-mark[data-level="warn"] { background: #ffb03d; }
.tower-tilt-mark[data-level="crit"] { background: #ff5a78; }

.tower-stats { display: flex; flex-direction: column; gap: 3px; }
.tower-stats > div { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; }
.tower-stats dt {
  font-family: var(--font-mono);
  font-size: 8px; letter-spacing: 0.12em;
  color: var(--ink-3);
}
.tower-stats dd {
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 700;
  color: var(--ink-1);
}

/* ═══════════════════════════════════════════════════════════
   PROTOCOLO 16 · NONAGRID 9×9 (grid puzzle)
   ═══════════════════════════════════════════════════════════ */
.mode-card--nona { --card-c: #b23fff; }
.mode-card--nona::after {
  content: '';
  position: absolute; right: 14px; bottom: 14px;
  width: 30px; height: 30px;
  background-image:
    linear-gradient(rgba(178,63,255,0.4) 1px, transparent 1px),
    linear-gradient(90deg, rgba(178,63,255,0.4) 1px, transparent 1px);
  background-size: 10px 10px;
  opacity: 0.6;
  pointer-events: none;
}

.nona-canvas {
  display: block;
  border-radius: var(--r-md);
  box-shadow: 0 0 40px rgba(70,240,255,0.08), inset 0 0 0 1px rgba(150,190,255,0.12);
  cursor: crosshair;
  touch-action: none;
}
.hud-nona { display: flex; flex-direction: column; gap: 7px; }
.nona-keys {
  font-family: var(--font-mono);
  font-size: 8px; letter-spacing: 0.14em;
  color: var(--accent);
  opacity: 0.8;
}
.nona-hand {
  display: block; width: 100%; height: 78px;
  border-radius: var(--r-md);
  background: rgba(255,255,255,0.025);
  border: 1px solid var(--glass-border);
  cursor: pointer;
}
/* En NONAGRID no hay hold/next: se ocultan para no confundir */
body.is-nona #hold-canvas,
body.is-nona .hud-right .hud-block:first-child { opacity: 0.25; pointer-events: none; }

/* ═══════════════════════════════════════════════════════════
   INTRO CINEMÁTICA — capa de apertura a pantalla completa
   ═══════════════════════════════════════════════════════════ */
#intro {
  position: fixed; inset: 0;
  z-index: 200;
  background: #05060d;
  cursor: pointer;
  transition: opacity 0.85s var(--ease-premium), filter 0.85s var(--ease-premium);
}
#intro.is-done {
  opacity: 0;
  filter: blur(14px) saturate(1.4);
  pointer-events: none;
}
#intro-canvas { display: block; width: 100%; height: 100%; }

/* Marco de encuadre cinematográfico (letterbox animado) */
.intro-bars { position: absolute; inset: 0; pointer-events: none; }
.intro-bars::before,
.intro-bars::after {
  content: ''; position: absolute; left: 0; right: 0;
  height: 9vh; background: #04050a;
  animation: introBar 1.1s var(--ease-premium) 0.15s both;
}
.intro-bars::before { top: 0; }
.intro-bars::after  { bottom: 0; }
@keyframes introBar { from { height: 50vh; } to { height: 9vh; } }

/* Retícula técnica en las esquinas — lenguaje de cámara */
.intro-hud { position: absolute; inset: 0; pointer-events: none; }
.intro-corner {
  position: absolute; width: 26px; height: 26px;
  border: 1px solid rgba(160, 210, 255, 0.32);
  opacity: 0;
  animation: introCorner 0.7s var(--ease-premium) 1.4s both;
}
.intro-corner--tl { top: calc(9vh + 22px); left: 26px; border-right: 0; border-bottom: 0; }
.intro-corner--tr { top: calc(9vh + 22px); right: 26px; border-left: 0; border-bottom: 0; }
.intro-corner--bl { bottom: calc(9vh + 22px); left: 26px; border-right: 0; border-top: 0; }
.intro-corner--br { bottom: calc(9vh + 22px); right: 26px; border-left: 0; border-top: 0; }
@keyframes introCorner { from { opacity: 0; transform: scale(1.6); } to { opacity: 1; transform: none; } }

/* Créditos tipográficos de apertura */
.intro-credit {
  position: absolute; left: 0; right: 0;
  text-align: center;
  font-family: var(--font-mono);
  color: rgba(210, 230, 255, 0.72);
  letter-spacing: 0.5em;
  pointer-events: none;
  opacity: 0;
}
.intro-credit--top {
  top: calc(9vh + 40px);
  font-size: clamp(7px, 1.1vw, 10px);
  animation: introFadeText 2.6s var(--ease-premium) 1.6s both;
}
.intro-credit--tag {
  bottom: calc(9vh + 54px);
  font-size: clamp(8px, 1.3vw, 11px);
  letter-spacing: 0.42em;
  color: rgba(255, 255, 255, 0.9);
  animation: introFadeText 2.4s var(--ease-premium) 5.9s both;
}
.intro-credit--tag b {
  display: block; margin-top: 8px;
  font-family: var(--font-display);
  font-weight: 300; letter-spacing: 0.24em;
  font-size: clamp(9px, 1.5vw, 13px);
  color: var(--accent);
}
@keyframes introFadeText {
  0% { opacity: 0; letter-spacing: 0.9em; filter: blur(6px); }
  22% { opacity: 1; letter-spacing: 0.5em; filter: blur(0); }
  78% { opacity: 1; }
  100% { opacity: 0.35; }
}

/* Botón de omitir */
.intro-skip {
  position: absolute;
  bottom: calc(9vh + 16px); right: 26px;
  font-family: var(--font-mono);
  font-size: 9px; letter-spacing: 0.24em;
  color: rgba(190, 210, 255, 0.6);
  background: rgba(12, 16, 32, 0.6);
  border: 1px solid rgba(140, 180, 255, 0.22);
  border-radius: 99px;
  padding: 8px 16px;
  opacity: 0;
  animation: introSkipIn 0.6s var(--ease-premium) 2.2s both;
  transition: color 0.25s, border-color 0.25s, background 0.25s;
}
.intro-skip:hover, .intro-skip:focus-visible {
  color: #fff;
  border-color: var(--accent);
  background: rgba(70, 240, 255, 0.12);
}
@keyframes introSkipIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 0.85; transform: none; } }

/* Barra de progreso de la intro (indicador de duración) */
.intro-timeline {
  position: absolute; bottom: 9vh; left: 0;
  height: 2px; width: 100%;
  background: rgba(255, 255, 255, 0.06);
  overflow: hidden;
}
.intro-timeline::after {
  content: ''; display: block; height: 100%; width: 100%;
  transform-origin: left center;
  background: linear-gradient(90deg, var(--rb-1), var(--rb-3), var(--rb-5), var(--rb-7));
  animation: introProgress 9s linear both;
}
@keyframes introProgress { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* Mientras la intro corre, el resto del documento no se puede desplazar */
body.is-intro { overflow: hidden; }

/* Accesibilidad: intro comprimida y sin desplazamientos violentos */
@media (prefers-reduced-motion: reduce) {
  .intro-bars::before, .intro-bars::after { animation-duration: 0.3s; }
  .intro-credit--top { animation-delay: 0.5s; animation-duration: 1.4s; }
  .intro-credit--tag { animation-delay: 2.6s; animation-duration: 1.2s; }
  .intro-timeline::after { animation-duration: 4.3s; }
  .intro-corner { animation-delay: 0.4s; }
}
body.reduce-motion .intro-timeline::after { animation-duration: 4.3s; }

/* ═══════════════════════════════════════════════════════════
   ACCESIBILIDAD GLOBAL
   ═══════════════════════════════════════════════════════════ */

/* Salto al contenido para lectores de pantalla y teclado */
.skip-link {
  position: fixed; top: -100px; left: 50%;
  transform: translateX(-50%);
  z-index: 500;
  padding: 12px 22px;
  border-radius: 0 0 var(--r-md) var(--r-md);
  background: var(--accent);
  color: #04050a;
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 700; letter-spacing: 0.18em;
  text-decoration: none;
  transition: top 0.28s var(--ease-premium);
}
.skip-link:focus { top: 0; }

/* Solo para lectores de pantalla */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}

/* Anillo de foco visible y consistente en TODO elemento interactivo */
:where(button, a, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 6px;
}
/* Nunca ocultamos el foco: solo lo suprimimos para punteros */
:where(button, a, [tabindex]):focus:not(:focus-visible) { outline: none; }

/* Respeto del sistema operativo desde el primer frame */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  /* Excepciones: la intro necesita sus fundidos base */
  #intro, #intro.is-done { transition-duration: 0.4s !important; }
}

/* Modo de alto contraste: refuerza bordes y texto secundario */
@media (prefers-contrast: more) {
  :root {
    --ink-2: #c3cbe8;
    --ink-3: #8e97bb;
    --glass-border: rgba(150, 190, 255, 0.42);
  }
  .sys-tag, .hud-label { color: #dbe3ff; }
}

/* ═══════════════════════════════════════════════════════════
   GOBERNADOR DE RENDIMIENTO — escalones de calidad
   Las clases tx-q0..tx-q3 las aplica js/perf.js en <body>.
   Cada escalón retira el efecto más caro que quede, en orden
   de coste real de composición: desenfoques de fondo primero,
   luego capas de película, luego sombras y saturaciones.
   ═══════════════════════════════════════════════════════════ */

/* ── q1 · EQUILIBRADO: sin grano de película, desenfoques a la mitad ── */
body.tx-q1 #grain { display: none; }
body.tx-q1 :where(.panel, .screen-header, .hud-block, .overlay, .modal) {
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
}

/* ── q0 · RENDIMIENTO: fuera todo lo que compone capas extra ── */
body.tx-q0 #grain,
body.tx-q0 #scanlines,
body.tx-q0 #vignette { display: none; }
body.tx-q0 * {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  text-shadow: none !important;
}
body.tx-q0 :where(.panel, .hud-block, .mode-card, .ach-card, .help-card) {
  box-shadow: none;
  background-image: none;
}
/* Las animaciones decorativas infinitas son el mayor coste oculto */
body.tx-q0 :where(.mode-card, .logo-cell, .loader-mark span)::before,
body.tx-q0 :where(.mode-card, .logo-cell, .loader-mark span)::after {
  animation: none !important;
}

/* ═══════════════════════════════════════════════════════════
   PROTOCOLO Ω · SINGULARIDAD (secreto)
   Estética de expediente desclasificado: negro absoluto, borde
   que respira en rojo y un barrido de censura sobre la tarjeta.
   ═══════════════════════════════════════════════════════════ */
.mode-card--omega {
  /* Un expediente recién desclasificado encabeza la lista */
  order: -1;
  background:
    linear-gradient(140deg, rgba(255, 59, 48, 0.10), rgba(0, 0, 0, 0.75) 55%),
    #05050a;
  border-color: rgba(255, 59, 48, 0.42);
  animation: omegaBreath 3.4s ease-in-out infinite;
}
.mode-card--omega .mode-index {
  color: #ff3b30;
  font-size: 1.5em;
  text-shadow: 0 0 18px rgba(255, 59, 48, 0.8);
}
.mode-card--omega .mode-name { color: #ffe9e7; }
.mode-card--omega .mode-desc { color: rgba(255, 205, 200, 0.72); }
.mode-card--omega::after {
  content: 'CLASIFICADO';
  position: absolute;
  top: 12px; right: -34px;
  transform: rotate(38deg);
  padding: 3px 40px;
  background: rgba(255, 59, 48, 0.85);
  color: #0a0000;
  font-family: var(--font-mono);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.22em;
  pointer-events: none;
}
.mode-card--omega:hover, .mode-card--omega:focus-visible {
  border-color: #ff3b30;
  box-shadow: 0 0 0 1px rgba(255, 59, 48, 0.5), 0 18px 60px rgba(255, 59, 48, 0.22);
}
@keyframes omegaBreath {
  0%, 100% { border-color: rgba(255, 59, 48, 0.32); }
  50%      { border-color: rgba(255, 59, 48, 0.78); }
}

/* Destello global en el instante del desbloqueo */
body.omega-revealed::after {
  content: '';
  position: fixed; inset: 0;
  z-index: 300;
  pointer-events: none;
  background: radial-gradient(circle at 50% 50%, rgba(255, 59, 48, 0.30), transparent 62%);
  animation: omegaFlash 2.6s var(--ease-premium) both;
}
@keyframes omegaFlash {
  0%   { opacity: 0; }
  8%   { opacity: 1; }
  100% { opacity: 0; }
}

/* ═══════════════════════════════════════════════════════════
   INFORME TÁCTICO PREVIO (briefing.js)
   Ficha de misión desplegada antes de la primera partida de
   cada protocolo complejo. El color de acento lo inyecta el
   propio informe con --brief-accent.
   ═══════════════════════════════════════════════════════════ */
#briefing {
  position: fixed; inset: 0;
  z-index: 260;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(3, 5, 12, 0.78);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 0;
  transition: opacity 0.3s var(--ease-premium);
}
#briefing.is-on { opacity: 1; }

.brief-panel {
  position: relative;
  width: min(620px, 100%);
  max-height: 88vh;
  overflow-y: auto;
  padding: 30px 32px 26px;
  border-radius: var(--r-lg, 16px);
  background: linear-gradient(160deg, rgba(18, 24, 46, 0.96), rgba(8, 11, 22, 0.98));
  border: 1px solid var(--glass-border);
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.6),
              inset 0 1px 0 rgba(255, 255, 255, 0.06);
  transform: translateY(16px) scale(0.985);
  transition: transform 0.42s var(--ease-premium);
}
#briefing.is-on .brief-panel { transform: none; }
/* Filo de color del protocolo */
.brief-panel::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0;
  height: 3px;
  border-radius: var(--r-lg, 16px) var(--r-lg, 16px) 0 0;
  background: linear-gradient(90deg, transparent, var(--brief-accent), transparent);
}

.brief-tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.28em;
  color: var(--brief-accent);
}
.brief-title {
  margin: 6px 0 12px;
  font-family: var(--font-display);
  font-size: clamp(24px, 4vw, 34px);
  font-weight: 300;
  letter-spacing: 0.06em;
  color: #fff;
}
.brief-goal {
  margin: 0 0 20px;
  padding-left: 12px;
  border-left: 2px solid var(--brief-accent);
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-1);
}
.brief-sub {
  margin: 18px 0 8px;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.24em;
  color: var(--ink-3);
}
.brief-rules { margin: 0; padding: 0; list-style: none; display: grid; gap: 7px; }
.brief-rules li {
  position: relative;
  padding-left: 20px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-2);
}
.brief-rules li::before { content: '▸'; position: absolute; left: 4px; color: var(--brief-accent); }
.brief-rules b { color: #fff; font-weight: 600; }

.brief-keys {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: 8px;
}
.brief-key {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 10px;
  border-radius: var(--r-sm, 8px);
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid var(--glass-border);
}
.brief-key kbd {
  padding: 2px 7px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.09);
  font-family: var(--font-mono);
  font-size: 10px;
  color: #fff;
  white-space: nowrap;
}
.brief-key span {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  color: var(--ink-3);
}

.brief-actions { display: flex; gap: 10px; margin-top: 22px; }
.brief-actions .btn { flex: 1; }
.brief-foot {
  margin: 12px 0 0;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  color: var(--ink-3);
  text-align: center;
  opacity: 0.75;
}

/* Tarjeta de ayuda que reabre los informes */
.brief-help-note { font-size: 12px; line-height: 1.5; color: var(--ink-3); margin: 0; }
.brief-relist { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.brief-relink {
  padding: 5px 11px;
  border-radius: 99px;
  border: 1px solid var(--glass-border);
  background: rgba(255, 255, 255, 0.04);
  color: var(--ink-2);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}
.brief-relink:hover, .brief-relink:focus-visible {
  color: var(--accent);
  border-color: var(--accent);
  background: rgba(70, 240, 255, 0.1);
}

/* ═══════════════════════════════════════════════════════════
   ACADEMIA · lista de cursos (ayuda) + HUD de lección (partida)
   ═══════════════════════════════════════════════════════════ */
.academy-list { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.academy-course {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 11px;
  border-radius: 10px;
  border: 1px solid var(--glass-border);
  background: rgba(255, 255, 255, 0.03);
  color: var(--ink-2);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s, transform 0.15s;
}
.academy-course:hover, .academy-course:focus-visible {
  border-color: var(--course-accent, var(--accent));
  background: rgba(255, 255, 255, 0.06);
  transform: translateX(2px);
}
/* `min-width: 0` en ambos textos: por defecto un elemento flex tiene
   `min-width: auto`, es decir, se niega a encogerse por debajo del ancho de
   su propio contenido. Con las etiquetas cortas del principio sobraba sitio,
   pero al entrar cursos con nombres largos («MECÁNICA ZONE», «PROTOCOLO 14»)
   la fila medía 241 px dentro de una columna de 236 y desbordaba 5 px.
   Permitiéndoles encoger, el texto reparte y parte de línea en lugar de
   empujar la tarjeta fuera del panel. */
.academy-course-name {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--ink-1);
  font-weight: 600;
}
.academy-course-tag {
  flex: 0 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: 8px;
  letter-spacing: 0.14em;
  color: var(--course-accent, var(--accent));
  opacity: 0.9;
}
/* Progreso: barra fina + fracción. Nunca solo color — el estado
   "completo" también se dice con texto (✓) para no depender de la vista. */
.academy-course-bar {
  position: relative;
  width: 46px;
  height: 4px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.12);
  overflow: hidden;
  flex: none;
}
.academy-course-bar > span {
  position: absolute;
  inset: 0 auto 0 0;
  background: var(--course-accent, var(--accent));
  border-radius: 99px;
}
.academy-course-num { font-size: 9px; color: var(--ink-3); flex: none; min-width: 30px; text-align: right; }
.academy-course.is-complete .academy-course-num { color: var(--course-accent, var(--accent)); }

/* ═══════════════════════════════════════════════════════════
   INTERLUDIO · pala y bola (arkanoid.js)
   Se ofrece al terminar una partida. Estilo contenido a propósito:
   es un premio, no un modo de juego, y no debe competir visualmente
   con la pantalla de resultados de la que sale.
   ═══════════════════════════════════════════════════════════ */
.overlay-card--ark { max-width: 470px; width: 100%; }
.ark-title {
  margin: 6px 0 2px;
  font-size: clamp(20px, 5vw, 28px);
  letter-spacing: 0.04em;
  color: var(--ink-1);
}
.ark-sub {
  margin: 0 0 10px;
  font-size: 11px;
  line-height: 1.5;
  color: var(--ink-3);
}
.ark-hud {
  display: flex;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 8px;
}
.ark-stat {
  /* `min-width: 0` y reparto flexible: cuatro columnas de texto en un
     móvil de 390 px es exactamente el caso que desbordó la lista de
     cursos, así que se previene desde el principio. */
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 5px 6px;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.04);
  font-family: var(--font-mono);
  text-align: center;
}
.ark-stat i {
  font-style: normal;
  font-size: 7.5px;
  letter-spacing: 0.1em;
  color: var(--ink-4, var(--ink-3));
  overflow-wrap: anywhere;
}
.ark-stat b {
  font-size: 13px;
  color: var(--ink-1);
  /* Cifras tabulares: «0/28» y «12/54» miden lo mismo y el HUD no baila
     al cambiar. `overflow-wrap` es la red: antes que recortarse, parte. */
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  overflow-wrap: anywhere;
}
.ark-stage { position: relative; }
.ark-canvas {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
  border: 1px solid var(--glass-border);
  background: rgba(0, 0, 0, 0.35);
  /* El dedo mueve la pala; no debe además desplazar la página. */
  touch-action: none;
  cursor: none;
}
.ark-msg {
  position: absolute;
  left: 50%;
  bottom: 22%;
  transform: translateX(-50%);
  margin: 0;
  padding: 0 10px;
  width: max-content;
  max-width: 90%;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.1em;
  color: var(--ink-2);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.9);
  pointer-events: none;
  overflow-wrap: anywhere;
}
.ark-keys {
  margin: 8px 0 10px;
  font-size: 9px;
  line-height: 1.7;
  color: var(--ink-3);
  text-align: center;
}
/* A 390 px la tarjeta mide 350 y cuatro columnas dejan ~55 px útiles a
   cada marcador: «0/28» en mono de 12 px se recortaba. Se reducen las
   holguras (gap y padding), no sólo la letra. */
@media (max-width: 700px) {
  .ark-hud { gap: 4px; }
  .ark-stat { padding: 4px 3px; }
  .ark-stat i { font-size: 7px; letter-spacing: 0.04em; }
  .ark-stat b { font-size: 11px; }
  .ark-keys { font-size: 8px; }
}

/* ── Diagnóstico: dónde se atasca la práctica ──
   Tono sobrio a propósito. Esto no es un logro ni un castigo: es una
   medida de qué lecciones se explican mal, así que no lleva acento de
   color fuerte ni iconografía de error. */
.academy-diag {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--glass-border);
}
.academy-diag-title {
  margin: 0 0 6px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  color: var(--ink-3);
  font-weight: 700;
}
.academy-diag-note {
  margin: 0 0 8px;
  font-size: 10px;
  line-height: 1.5;
  color: var(--ink-3);
}
.academy-diag-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
  counter-reset: diag;
}
.academy-diag-item {
  /* `min-width: 0` desde el principio: es la misma trampa del flex que
     desbordó la lista de cursos cinco píxeles cuando entraron nombres
     largos. Los textos de lección son aún más largos que aquellos. */
  min-width: 0;
  padding: 7px 9px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
  border-left: 2px solid var(--ink-4, rgba(255, 255, 255, 0.18));
  font-family: var(--font-mono);
  counter-increment: diag;
}
.academy-diag-step {
  display: block;
  font-size: 10px;
  line-height: 1.45;
  color: var(--ink-2);
  overflow-wrap: anywhere;
}
.academy-diag-step::before {
  content: counter(diag) '. ';
  color: var(--ink-4, var(--ink-3));
}
.academy-diag-metrics {
  display: block;
  margin-top: 3px;
  font-size: 8px;
  letter-spacing: 0.08em;
  color: var(--ink-3);
  overflow-wrap: anywhere;
}

/* ── HUD de la lección, sobre el tablero ── */
.academy-hud {
  position: absolute;
  /* Anclado a AMBOS bordes en lugar de centrado con `translateX`: así el
     panel se estrecha con el marco en vez de conservar un ancho fijo que
     se sale por los lados en pantallas pequeñas. `margin: auto` lo
     centra dentro de los límites y `max-width` evita que crezca de más
     en escritorio. */
  left: 8px;
  right: 8px;
  margin-inline: auto;
  bottom: 14px;
  max-width: 340px;
  z-index: 6;
  padding: 10px 13px;
  border-radius: 12px;
  border: 1px solid var(--acad-accent, var(--accent));
  background: rgba(6, 8, 16, 0.88);
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.55);
  pointer-events: auto;
}
.academy-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}
.academy-tag {
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.16em;
  color: var(--acad-accent, var(--accent));
}
.academy-count { font-family: var(--font-mono); font-size: 8px; color: var(--ink-3); }
.academy-goal {
  margin: 0;
  font-size: 13px;
  line-height: 1.35;
  font-weight: 600;
  color: var(--ink-1);
  /* El objetivo es la única frase imprescindible del panel: antes que
     recortarse, se parte en varias líneas o se rompe la palabra. */
  overflow-wrap: break-word;
  hyphens: auto;
}
/* La animación de "paso superado" ya no puede usar transform (rompería el
   centrado por márgenes), así que el destello es solo de borde y sombra. */
.academy-hint {
  margin: 6px 0 0;
  font-size: 11px;
  line-height: 1.4;
  color: var(--ink-3);
  border-left: 2px solid var(--acad-accent, var(--accent));
  padding-left: 8px;
}
/* Etiqueta de pista adelantada: tono neutro (color del curso, no rojo).
   No es un aviso de error: es el juego recordando que esta lección ya
   costó y ahorrando la espera. */
.academy-hint-early {
  display: block;
  margin-bottom: 3px;
  font-family: var(--font-mono);
  font-size: 7.5px;
  letter-spacing: 0.14em;
  color: var(--acad-accent, var(--accent));
  opacity: 0.85;
  overflow-wrap: anywhere;
}
.academy-actions { display: flex; gap: 6px; margin-top: 9px; }
.academy-btn {
  flex: 1;
  padding: 5px 8px;
  border-radius: 7px;
  border: 1px solid var(--glass-border);
  background: rgba(255, 255, 255, 0.05);
  color: var(--ink-2);
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.12em;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s;
}
.academy-btn:hover, .academy-btn:focus-visible { color: var(--ink-1); border-color: var(--acad-accent, var(--accent)); }
.academy-btn--exit:hover, .academy-btn--exit:focus-visible { color: #ff6a6a; border-color: #ff6a6a; }

/* Paso superado: destello breve del panel */
.academy-hud.is-done { animation: acadDone 0.7s ease-out; }
@keyframes acadDone {
  0%   { border-color: var(--acad-accent, var(--accent)); box-shadow: 0 8px 30px rgba(0, 0, 0, 0.55); }
  25%  { border-color: #fff; box-shadow: 0 0 26px var(--acad-accent, var(--accent)); }
  100% { border-color: var(--acad-accent, var(--accent)); box-shadow: 0 8px 30px rgba(0, 0, 0, 0.55); }
}
/* Quien pide menos movimiento no quiere destellos: solo el cambio de texto */
@media (prefers-reduced-motion: reduce) {
  .academy-hud.is-done { animation: none; }
  .academy-course:hover, .academy-course:focus-visible { transform: none; }
}
/* En móvil el pozo es estrecho: se recortan holguras, no el contenido.
   El objetivo mantiene un tamaño legible — encoger la letra hasta que
   "quepa" sería cambiar un problema de maquetación por otro de lectura. */
@media (max-width: 700px) {
  .academy-hud { left: 5px; right: 5px; bottom: 8px; padding: 8px 10px; }
  .academy-goal { font-size: 12px; }
  .academy-hint { font-size: 10px; }
}

/* ═══════════════════════════════════════════════════════════
   RANKING · barra de periodo, refresco y pie informativo
   ═══════════════════════════════════════════════════════════ */
.rank-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 10px 0 8px;
}
.rank-periods {
  display: inline-flex;
  padding: 3px;
  gap: 3px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--glass-border);
}
.rank-period {
  padding: 5px 14px;
  border: 0;
  border-radius: 99px;
  background: transparent;
  color: var(--ink-3);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  cursor: pointer;
  transition: color 0.2s, background 0.2s;
}
.rank-period:hover { color: var(--ink-1); }
.rank-period.is-active {
  background: rgba(70, 240, 255, 0.16);
  color: var(--accent);
  box-shadow: inset 0 0 0 1px rgba(70, 240, 255, 0.35);
}
.rank-refresh {
  width: 30px; height: 30px;
  border-radius: 50%;
  border: 1px solid var(--glass-border);
  background: rgba(255, 255, 255, 0.04);
  color: var(--ink-2);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s;
}
.rank-refresh:hover { color: var(--accent); border-color: var(--accent); }
.rank-refresh.is-spinning { animation: rankSpin 0.7s var(--ease-premium); }
@keyframes rankSpin { to { transform: rotate(360deg); } }

/* Separador visual cuando tu fila se ancla fuera del top 10 */
.rank-row--gap {
  justify-content: center;
  color: var(--ink-3);
  letter-spacing: 0.4em;
  opacity: 0.5;
  padding: 2px 0;
}
.rank-foot {
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  color: var(--ink-3);
  text-align: center;
}
.rank-foot b { color: var(--accent); font-weight: 600; }

/* Botón de cápsula compartible en la galería de repeticiones */
.replay-btn--share {
  border-color: rgba(70, 240, 255, 0.34);
  color: var(--accent);
}
.replay-btn--share:hover, .replay-btn--share:focus-visible {
  background: rgba(70, 240, 255, 0.12);
  border-color: var(--accent);
}

/* Bloque de ajustes de rendimiento */
.setting-block--perf .setting-hint kbd {
  padding: 1px 6px;
  border-radius: 4px;
  border: 1px solid var(--glass-border);
  background: rgba(255, 255, 255, 0.06);
  font-family: var(--font-mono);
  font-size: 10px;
}
.setting-select {
  min-width: 190px;
  padding: 8px 12px;
  border-radius: var(--r-sm, 8px);
  border: 1px solid var(--glass-border);
  background: rgba(10, 14, 28, 0.9);
  color: var(--ink-1, #e8edff);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  cursor: pointer;
}
.setting-select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.setting-hint--live {
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--ink-3);
}
.setting-hint--live b { color: var(--accent); font-weight: 600; }

/* ═══════════════════════════════════════════════════════════
   MONITOR DE RENDIMIENTO (tecla F3)
   ═══════════════════════════════════════════════════════════ */
#perf-overlay {
  position: fixed;
  top: 14px; left: 14px;
  z-index: 400;
  display: none;
  padding: 10px 12px;
  border-radius: var(--r-md, 10px);
  background: rgba(6, 9, 20, 0.86);
  border: 1px solid rgba(120, 170, 255, 0.24);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
  pointer-events: none;
  font-family: var(--font-mono);
}
#perf-overlay.is-on { display: block; }

.perf-readout {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 8px;
  font-size: 10px;
  letter-spacing: 0.12em;
  color: rgba(190, 205, 240, 0.72);
}
.perf-readout b { font-size: 17px; letter-spacing: 0.04em; }
.perf-readout em {
  font-style: normal;
  color: var(--accent);
  letter-spacing: 0.16em;
}
.perf-graph {
  display: block;
  width: 240px; height: 68px;
  border-radius: 4px;
  opacity: 0.95;
}

/* En pantallas pequeñas el monitor se encoge para no tapar el pozo */
@media (max-width: 640px) {
  #perf-overlay { top: 8px; left: 8px; padding: 7px 9px; }
  .perf-graph { width: 150px; height: 44px; }
}