/* ══════════════════════════════════════════════════════════════════════
   RADIO TRIGAL FM — HOJA DE ESTILOS (styles.css)
   ══════════════════════════════════════════════════════════════════════
   Este fichero contiene TODOS los estilos visuales del juego: paleta de
   colores (variables CSS en :root), tipografías, layout de las pantallas
   (home, modos, historia, logros, opciones...), animaciones, overlays
   (splash, resultados, perfil de jugador, etc.) y adaptaciones para
   modo claro/oscuro (body.light) y dispositivos móviles.

   Está separado de index.html para mantener limpia la separación entre
   estructura (HTML), presentación (este CSS) y comportamiento (JS, al
   final de index.html). No contiene ninguna lógica: solo reglas de
   estilo. Cada bloque de este archivo va precedido de un comentario
   que explica qué pantalla o componente afecta.
   ══════════════════════════════════════════════════════════════════════ */

  :root {
    /* Dark (Modo Oscuro ON) */
    --bg-dark: #0a0e1a;
    --bg-card: #111827;
    --bg-card2: #1a2235;
    --yellow: #FFD700;
    --yellow-glow: #ffd70066;
    --blue: #3b82f6;
    --blue-dark: #1e3a5f;
    --red: #ef4444;
    --green: #22c55e;
    --purple: #8b5cf6;
    --text: #f0f4ff;
    --text-dim: #8899bb;
    --border: #ffffff15;
    --radius: 20px;
    --radius-sm: 14px;
    --shadow-sm: 0 2px 10px #00000030;
    --shadow-md: 0 8px 28px #00000040;
    --shadow-lg: 0 20px 60px #000a;
    /* Nubes de tormenta del evento Blastoise: sobre el fondo casi negro del
       modo oscuro, un gris demasiado oscuro se fundiría con el fondo y
       apenas se vería, así que aquí usamos grises medios con un borde algo
       más claro que aporte contraste y volumen. */
    --storm-cloud-core: #4b5563;
    --storm-cloud-mid: #6b7280;
    --storm-cloud-edge: #9ca3af;
    /* Brillo de la respuesta correcta del evento Jigglypuff: sobre el fondo
       casi negro del modo oscuro, un halo difuminado en verde/dorado ya
       destaca por sí solo por contraste. */
    --jgp-glow-soft: 0 0 10px #22c55e77;
    --jgp-glow-strong: 0 0 34px #22c55eee, 0 0 60px #facc1577;
  }

  /* Light (Modo Oscuro OFF) */
  body.light {
    --bg-dark: #f6f8ff;
    --bg-card: #ffffff;
    --bg-card2: #eef2ff;
    --yellow: #ffb300;
    --yellow-glow: #ffb30055;
    --blue: #2563eb;
    --blue-dark: #1e40af;
    --red: #dc2626;
    --green: #16a34a;
    --purple: #7c3aed;
    --text: #0b1220;
    --text-dim: #475569;
    --border: #0b122020;
    --shadow-sm: 0 2px 10px #0b122012;
    --shadow-md: 0 8px 28px #0b122018;
    --shadow-lg: 0 20px 60px #0b122030;
    /* En modo claro el fondo es muy pálido, así que aquí usamos grises bien
       oscuros y saturados para que las nubes destaquen con fuerza. */
    --storm-cloud-core: #1f2937;
    --storm-cloud-mid: #374151;
    --storm-cloud-edge: #4b5563;
    /* En modo claro un halo difuminado translúcido apenas contrasta sobre
       tarjetas y fondo blancos/muy pálidos, así que aquí se añade un
       anillo SÓLIDO (los "0 0 Npx color" con radio 0 de difuminado) de
       borde bien definido, además del resplandor, para que la respuesta
       correcta se distinga con claridad también sobre fondos claros. */
    --jgp-glow-soft: 0 0 0 2px #16a34a99, 0 0 16px #16a34aaa;
    --jgp-glow-strong: 0 0 0 3px #15803ddd, 0 0 40px #16a34acc, 0 0 70px #ca8a04aa;
  }

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

  body {
    font-family: 'Nunito', sans-serif;
    background: var(--bg-dark);
    color: var(--text);
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow-x: hidden;
    position: relative;
    transition: background .3s ease, color .3s ease;
  }

  /* Puntero del ratón personalizado (Opciones > Opciones gráficas):
     sustituye la flecha por el sprite del estilo elegido en
     settings.cursorStyle, desbloqueado por su logro correspondiente —
     ver CURSOR_UNLOCKS/isCursorUnlocked() en game.js y applyCursorStyle()
     en ui.js. Solo se usa para los estilos de OBJETO (Poké Flauta, Poké
     Ball, Supercaña, Caramelo Raro — los que NO llevan `scale` en
     CURSOR_CATALOG, storage.js): sprites ya pequeños (30×30) donde el
     cursor nativo del navegador funciona bien con un hotspot fijo. La
     variable --cursor-url (puesta por JS) lleva ya el hotspot incluido
     dentro del propio valor (p. ej. `url("...") 4 4`) — por eso aquí NO
     se le añade ningún "4 4" propio: hacerlo duplicaría el hotspot
     ("...4 4 4 4, auto") y el navegador descartaría la declaración
     entera por inválida. Los estilos con forma de Pokémon usan, en su
     lugar, la <img> flotante de abajo (#pokemon-cursor-overlay), no esta
     regla — ver el comentario de esa clase para el porqué. */
  body.custom-cursor {
    cursor: var(--cursor-url), auto;
  }
  body.custom-cursor button,
  body.custom-cursor a,
  body.custom-cursor .toggle,
  body.custom-cursor [style*="cursor:pointer"],
  body.custom-cursor .answer-btn {
    cursor: var(--cursor-url), pointer;
  }

  /* Puntero "de mentira" para los estilos con forma de Pokémon (los que
     llevan `scale` en CURSOR_CATALOG). No se usan como cursor nativo del
     navegador porque eso tiene dos problemas con sprites de Pokémon a
     tamaño normal: (1) los navegadores limitan el tamaño del bitmap que
     aceptan como cursor (suele rondar 128 px) e ignoran el cursor entero,
     sin avisar, si se supera; y (2) leer los píxeles del sprite para
     reescalarlo (vía <canvas>) puede fallar si el juego se abre como
     archivo local en vez de servido por http. En su lugar, se posiciona
     esta <img> real seguiendo al ratón por JS (ver pokemonCursor.* en
     ui.js) y se centra siempre sobre el puntero con translate(-50%,-50%),
     sea cual sea su tamaño — así el "centrado" no depende de calcular a
     mano ningún hotspot en píxeles. */
  .pokemon-cursor-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    /* Puesto por JS en cada mousemove (ver paintPokemonCursorPosition()
       en ui.js): translate(x,y) la mueve a la posición del ratón, y el
       segundo translate(-50%,-50%) la centra sobre ese punto usando el
       propio tamaño de la imagen (por eso el centrado no depende de
       calcular el tamaño del sprite a mano). Solo se usa `transform` —
       nunca `left`/`top` — porque `transform` no obliga a recalcular el
       layout de la página (a diferencia de `left`/`top` en un elemento
       `position: fixed`), y por eso mismo se pinta directamente en el
       propio evento `mousemove`, sin pasar por requestAnimationFrame:
       al no tocar layout, retrasarla a "una vez por fotograma" solo
       añadía un fotograma de retraso ("lag") sin ahorrar nada — ver el
       comentario de paintPokemonCursorPosition() en ui.js. */
    transform: translate(-9999px, -9999px);
    will-change: transform;
    pointer-events: none;
    z-index: 9999;
    image-rendering: pixelated;
  }
  /* Mientras se muestra ese puntero "de mentira", se oculta el cursor
     real del sistema (si no, se verían los dos a la vez). */
  body.pokemon-cursor-active,
  body.pokemon-cursor-active button,
  body.pokemon-cursor-active a,
  body.pokemon-cursor-active .toggle,
  body.pokemon-cursor-active [style*="cursor:pointer"],
  body.pokemon-cursor-active .answer-btn {
    cursor: none;
  }


  ::selection { background: var(--yellow); color: #000; }
  ::-webkit-scrollbar { width: 8px; height: 8px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb { background: var(--bg-card2); border-radius: 10px; }

  button, input { font-family: inherit; }
  button:focus-visible, .region-card:focus-visible, input:focus-visible {
    outline: 2px solid var(--blue);
    outline-offset: 2px;
  }

  /* ── Animated BG ── */
  #bg-canvas {
    position: fixed; inset: 0; z-index: 0; pointer-events: none;
  }

  /* ── Pokémon de los eventos, colocados sobre las colinas del fondo ── */
  #bg-pokemon-layer {
    position: fixed; inset: 0; z-index: 0; pointer-events: none;
    overflow: hidden;
  }
  .bg-poke {
    position: absolute;
    bottom: 0; left: 0;
    transform: translateX(-50%);
    will-change: left;
    pointer-events: auto;
    cursor: pointer;
  }
  .bg-poke:focus-visible {
    outline: 2px solid var(--yellow, #ffcb05);
    outline-offset: 4px;
    border-radius: 8px;
  }
  .bg-poke.poked {
    animation: bg-poke-poked .55s cubic-bezier(.34,1.56,.64,1);
  }
  @keyframes bg-poke-poked {
    0%   { transform: translateX(-50%) translateY(0) scale(1, 1) rotate(0deg); }
    25%  { transform: translateX(-50%) translateY(4%) scale(1.22, 0.8) rotate(-4deg); }
    50%  { transform: translateX(-50%) translateY(-22%) scale(0.85, 1.18) rotate(4deg); }
    72%  { transform: translateX(-50%) translateY(3%) scale(1.1, 0.93) rotate(-2deg); }
    100% { transform: translateX(-50%) translateY(0) scale(1, 1) rotate(0deg); }
  }
  .bg-poke-shadow {
    position: absolute;
    left: 50%; bottom: -3px;
    width: 78%; height: 20%;
    transform: translateX(-50%);
    background: radial-gradient(ellipse, rgba(0,0,0,.4) 0%, rgba(0,0,0,0) 74%);
    border-radius: 50%;
    filter: blur(1px);
  }
  /* La mayoría de sprites "Walk" de PMDCollab dejan bastante margen
     vacío por debajo del propio personaje dentro del fotograma, así
     que la sombra (anclada al borde inferior real del sprite) queda
     demasiado separada del cuerpo. Se sube para compensar en todos
     los Pokémon de las colinas EXCEPTO Porygon, Mew, Mewtwo e Inkay
     (ver BG_POKE_SHADOW_DEFAULT_IDS en pokemon.js), cuyo fotograma ya
     llega casi hasta el borde y no necesitan este ajuste. */
  .bg-poke.shadow-fix .bg-poke-shadow {
    bottom: 14%;
  }
  .bg-poke-sprite {
    --flip: 1;
    display: block;
    position: relative;
    height: auto;
    transform: scaleX(var(--flip));
    filter: drop-shadow(0 3px 5px rgba(0,0,0,.35));
    animation: bg-poke-bounce var(--bdur, 2.2s) ease-in-out infinite, bg-poke-appear .6s ease backwards;
    animation-delay: var(--bdelay, 0s), var(--delay, 0s);
    transition: filter .4s ease;
  }
  .bg-poke.flip .bg-poke-sprite { --flip: -1; }
  .bg-poke.poked .bg-poke-sprite {
    filter: brightness(1.4) drop-shadow(0 0 10px #ffffffaa) drop-shadow(0 3px 5px rgba(0,0,0,.35));
  }
  /* Sin flotar: solo Inkay, Mew y Mewtwo (ver BG_POKE_BOUNCE_IDS en
     pokemon.js) conservan bg-poke-bounce; el resto se queda solo con la
     animación de aparición, caminando raso sobre las colinas. */
  .bg-poke.no-bounce .bg-poke-sprite {
    animation: bg-poke-appear .6s ease backwards;
    animation-delay: var(--delay, 0s);
  }
  @keyframes bg-poke-appear {
    from { opacity: 0; transform: scaleX(var(--flip)) translateY(8px); }
    to   { opacity: 1; transform: scaleX(var(--flip)) translateY(0); }
  }
  @keyframes bg-poke-bounce {
    0%, 100% { transform: scaleX(var(--flip)) translateY(0) scaleY(1); }
    45%      { transform: scaleX(var(--flip)) translateY(-10%) scaleY(1.035); }
  }
  /* Mientras duerme (ver initBgPokeSleep en pokemon.js), el Pokémon deja
     de flotar/rebotar aunque sea de los que normalmente lo hacen (Inkay,
     Mew, Mewtwo — ver BG_POKE_BOUNCE_IDS): su propia animación "Sleep"
     ya transmite que está quieto. */
  .bg-poke.asleep .bg-poke-sprite { animation-play-state: paused; }
  /* Emoticonos "Z" flotantes sobre el Pokémon mientras duerme (ver
     initBgPokeSleep en pokemon.js, que añade/quita la clase "asleep").
     Ocultos por defecto; solo se animan con .asleep. Reutiliza la misma
     animación de flotado que .snorlax-zzz-particle (ver más abajo en
     este archivo), ya que es el mismo efecto visual. */
  .bg-poke-zzz-wrap {
    position: absolute;
    top: -6%; right: 6%;
    width: 30px; height: 30px;
    pointer-events: none;
    opacity: 0;
  }
  .bg-poke.asleep .bg-poke-zzz-wrap { opacity: 1; }
  .bg-poke-zzz-particle {
    position: absolute;
    left: 0; top: 0;
    font-size: 1rem;
    opacity: 0;
    text-shadow: 0 2px 6px #000a;
  }
  .bg-poke.asleep .bg-poke-zzz-particle { animation: snorlax-zzz-float 3.2s ease-in infinite; }
  .bg-poke-zzz-particle:nth-child(2) { font-size: .8rem; left: 10px; top: 6px; }
  .bg-poke-zzz-particle:nth-child(3) { font-size: .65rem; left: 18px; top: 12px; }
  .bg-poke.asleep .bg-poke-zzz-particle:nth-child(2) { animation-delay: 1.05s; }
  .bg-poke.asleep .bg-poke-zzz-particle:nth-child(3) { animation-delay: 2.1s; }
  .bg-poke.band-far .bg-poke-sprite  { filter: drop-shadow(0 2px 4px rgba(0,0,0,.3)) brightness(.92) saturate(.88); }
  .bg-poke.band-far .bg-poke-shadow  { opacity: .7; }
  .bg-poke.band-mid .bg-poke-sprite  { filter: drop-shadow(0 3px 5px rgba(0,0,0,.32)) brightness(.97); }
  .bg-poke.band-near .bg-poke-sprite { filter: drop-shadow(0 4px 8px rgba(0,0,0,.4)); }
  body.light .bg-poke.band-far .bg-poke-sprite  { filter: drop-shadow(0 2px 4px rgba(0,0,0,.18)) brightness(1.02) saturate(1.02); }
  body.light .bg-poke.band-mid .bg-poke-sprite  { filter: drop-shadow(0 3px 5px rgba(0,0,0,.2)) brightness(1.04); }
  body.light .bg-poke.band-near .bg-poke-sprite { filter: drop-shadow(0 4px 8px rgba(0,0,0,.25)) brightness(1.03); }

  /* Brillo especial para el evento shiny */
  .bg-poke.is-shiny .bg-poke-sprite {
    animation: bg-poke-bounce var(--bdur, 2.2s) ease-in-out infinite,
               bg-poke-appear .6s ease backwards,
               bg-poke-shiny-glow 1.9s ease-in-out infinite;
    animation-delay: var(--bdelay, 0s), var(--delay, 0s), 0s;
  }
  @keyframes bg-poke-shiny-glow {
    0%, 100% { filter: drop-shadow(0 0 4px #ffe066aa) drop-shadow(0 3px 5px rgba(0,0,0,.35)); }
    50%      { filter: drop-shadow(0 0 13px #fff3b0ee) drop-shadow(0 3px 5px rgba(0,0,0,.35)); }
  }
  .bg-poke.no-bounce.is-shiny .bg-poke-sprite {
    animation: bg-poke-appear .6s ease backwards,
               bg-poke-shiny-glow 1.9s ease-in-out infinite;
    animation-delay: var(--delay, 0s), 0s;
  }
  .bg-poke.is-shiny::after {
    content: "✨";
    position: absolute;
    top: -6px; right: -8px;
    font-size: .8rem;
    animation: bg-poke-sparkle-twinkle 1.9s ease-in-out infinite;
  }
  @keyframes bg-poke-sparkle-twinkle {
    0%, 100% { opacity: .2; transform: scale(.7) rotate(0deg); }
    50%      { opacity: 1;  transform: scale(1.15) rotate(14deg); }
  }

  @media (max-width: 380px) {
    .bg-poke.band-far { display: none; }
  }
  @media (max-height: 560px) {
    .bg-poke.band-far { display: none; }
  }

  #app {
    position: relative; z-index: 1;
    width: 100%; max-width: 480px;
    min-height: 100dvh;
    display: flex; flex-direction: column;
    padding: 16px 16px 24px;
    gap: 14px;
  }

  /* ── HEADER ── */
  .header {
    display: flex; align-items: center; justify-content: flex-end;
    padding: 10px 16px;
    background: var(--bg-card);
    border-radius: var(--radius);
    border: 1px solid var(--border);
    backdrop-filter: blur(10px);
    box-shadow: var(--shadow-sm);
    animation: fade-slide-in .35s ease;
  }

  .logo {
    font-family: 'Fredoka One', cursive;
    font-size: 1.1rem;
    background: linear-gradient(135deg, var(--yellow), #ff9f00);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1.1;
  }
  .logo span { font-size: 0.7rem; display: block; color: var(--text-dim); -webkit-text-fill-color: var(--text-dim); font-family: 'Nunito', sans-serif; font-weight: 700; }

  .stats { display: flex; gap: 8px; }
  .stat-box {
    text-align: center;
    background: linear-gradient(160deg, var(--bg-card2), var(--bg-card));
    padding: 5px 12px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    min-width: 56px;
    box-shadow: inset 0 1px 0 #ffffff0d;
    transition: transform .2s ease;
  }
  .stat-box .val {
    font-family: 'Fredoka One', cursive;
    font-size: 1.3rem;
    color: var(--yellow);
    line-height: 1;
    text-shadow: 0 0 14px var(--yellow-glow);
  }
  .stat-box .lbl {
    font-size: 0.58rem;
    color: var(--text-dim);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin-top: 2px;
  }
  .header-actions { display:flex; align-items:center; gap:10px; }
  .icon-btn {
    border: 1px solid var(--border);
    background: var(--bg-card2);
    color: var(--text);
    border-radius: var(--radius-sm);
    padding: 8px 10px;
    font-weight: 900;
    cursor: pointer;
    transition: transform .15s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
  }
  .icon-btn:active { transform: scale(.94); }
  .icon-btn:hover { box-shadow: var(--shadow-sm); border-color: var(--blue); transform: translateY(-1px); }

  @keyframes fade-slide-in {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
  }

  /* combo badge */
  #combo-badge {
    position: fixed; top: 80px; left: 50%; transform: translateX(-50%) scale(0);
    background: linear-gradient(135deg, #ff6b00, var(--yellow));
    color: #000;
    font-family: 'Fredoka One', cursive;
    font-size: 1.6rem;
    padding: 8px 22px;
    border-radius: 50px;
    z-index: 100;
    opacity: 0;
    transition: all 0.3s cubic-bezier(.34,1.56,.64,1);
    pointer-events: none;
    white-space: nowrap;
    box-shadow: 0 0 30px #ff6b0088;
  }
  #combo-badge.show { opacity: 1; transform: translateX(-50%) scale(1); }

  /* ── POPUP DE PUNTOS GANADOS ── */
  .points-popup {
    position: fixed;
    transform: translate(-50%, -10px);
    font-family: 'Fredoka One', cursive;
    font-size: 1.15rem;
    color: var(--green);
    text-shadow: 0 2px 10px #0009;
    z-index: 200;
    pointer-events: none;
    white-space: nowrap;
    animation: points-float 1.1s ease forwards;
  }
  .points-popup .mult-tag {
    font-size: 0.7rem;
    color: var(--yellow);
    margin-left: 4px;
  }
  @keyframes points-float {
    0% { opacity: 0; transform: translate(-50%, -6px) scale(.8); }
    15% { opacity: 1; transform: translate(-50%, -26px) scale(1.15); }
    100% { opacity: 0; transform: translate(-50%, -66px) scale(1); }
  }

  /* ── ACHIEVEMENT TOAST ── */
  #achievement-toast {
    position: fixed; top: 16px; left: 50%;
    transform: translateX(-50%) translateY(-140%);
    display: flex; align-items: center; gap: 12px;
    background: linear-gradient(135deg, var(--bg-card), var(--bg-card2));
    border: 2px solid var(--yellow);
    border-radius: 18px;
    padding: 12px 20px 12px 14px;
    z-index: 300;
    box-shadow: 0 10px 40px #000a, 0 0 30px var(--yellow-glow);
    transition: transform 0.45s cubic-bezier(.34,1.56,.64,1);
    max-width: min(92%, 420px);
    pointer-events: none;
  }
  #achievement-toast.show { transform: translateX(-50%) translateY(0); }
  .ach-toast-icon {
    font-size: 2.1rem;
    width: 46px; height: 46px;
    display: flex; align-items: center; justify-content: center;
    background: var(--bg-card2);
    border-radius: 50%;
    border: 2px solid var(--yellow);
    flex-shrink: 0;
    overflow: hidden;
    animation: ach-pop 0.5s cubic-bezier(.34,1.56,.64,1);
  }
  .ach-toast-icon img {
    width: 100%; height: 100%;
    object-fit: cover;
    border-radius: 50%;
  }
  @keyframes ach-pop { 0% { transform: scale(0) rotate(-20deg); } 60% { transform: scale(1.15) rotate(8deg); } 100% { transform: scale(1) rotate(0); } }
  .ach-toast-label {
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--yellow);
    font-weight: 900;
  }
  .ach-toast-title {
    font-family: 'Fredoka One', cursive;
    font-size: 1rem;
    line-height: 1.2;
  }

  /* ── SCREEN CARDS ── */
  .screen { display:none; gap:14px; flex-direction:column; }
  .screen.show { display:flex; animation: screen-in .38s cubic-bezier(.22,1,.36,1); }

  @keyframes screen-in {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
  }

  .card {
    background: var(--bg-card);
    border-radius: var(--radius);
    border: 1px solid var(--border);
    padding: 18px;
    box-shadow: var(--shadow-sm);
  }

  .title {
    font-family: 'Fredoka One', cursive;
    font-size: 1.35rem;
    margin-bottom: 6px;
    letter-spacing: .2px;
  }
  .subtitle {
    color: var(--text-dim);
    font-weight: 800;
    font-size: .82rem;
    line-height: 1.4;
  }

  .home-hero {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 18px 10px 8px;
  }
  .home-hero-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
  }
  .home-hero-titlewrap {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1;
  }
  .home-hero-title {
    position: relative;
    font-family: 'Poppins', 'Fredoka One', cursive;
    font-weight: 800;
    font-size: 2.15rem;
    display: flex;
    align-items: baseline;
    gap: 8px;
    letter-spacing: .2px;
  }
  .home-hero-title .htxt {
    background: linear-gradient(100deg, var(--yellow) 0%, #ff9f00 35%, var(--yellow) 70%, #ffd76a 100%);
    background-size: 300% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: 0 0 30px var(--yellow-glow);
    animation: radioSheen 5s ease-in-out infinite;
  }
  .home-hero-title .hfm {
    font-family: 'Poppins', 'Fredoka One', cursive;
    font-weight: 900;
    font-size: 1.05rem;
    padding: 2px 9px;
    border-radius: 999px;
    color: #1a1200;
    background: linear-gradient(135deg, var(--yellow), #ff9f00);
    box-shadow: 0 0 0 1px rgba(255,255,255,.15) inset, 0 2px 10px var(--yellow-glow);
    letter-spacing: .5px;
    animation: radioPulse 2.4s ease-in-out infinite;
  }
  @keyframes radioSheen {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
  }
  @keyframes radioPulse {
    0%, 100% { transform: scale(1);    box-shadow: 0 0 0 1px rgba(255,255,255,.15) inset, 0 2px 10px var(--yellow-glow); }
    50%      { transform: scale(1.08); box-shadow: 0 0 0 1px rgba(255,255,255,.2) inset, 0 2px 16px var(--yellow-glow); }
  }
  .home-hero-tagline {
    margin-top: 3px;
    font-family: 'Nunito', sans-serif;
    font-weight: 800;
    font-size: .62rem;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--text-dim);
  }
  .home-hero-waves {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: 20px;
  }
  .home-hero-waves span {
    display: inline-block;
    width: 4px;
    border-radius: 3px;
    background: linear-gradient(180deg, var(--yellow), #ff9f00);
    animation: radioWave 1s ease-in-out infinite;
  }
  .home-hero-waves span:nth-child(1) { height: 40%; animation-delay: 0s; }
  .home-hero-waves span:nth-child(2) { height: 70%; animation-delay: .15s; }
  .home-hero-waves span:nth-child(3) { height: 100%; animation-delay: .3s; }
  .home-hero-waves span:nth-child(4) { height: 55%; animation-delay: .45s; }
  @keyframes radioWave {
    0%, 100% { transform: scaleY(.4); opacity: .7; }
    50%      { transform: scaleY(1);  opacity: 1; }
  }
  /* Logo del menú principal: más grande que antes, con un halo de brillo
     pulsante detrás, giro lento continuo (efecto "disco de vinilo") y una
     ligera flotación vertical para un acabado más vivo y profesional. */
  .home-hero-logo {
    position: relative;
    width: 108px;
    height: 108px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: home-logo-float 3.6s ease-in-out infinite;
  }
  .home-hero-logo-glow {
    position: absolute;
    inset: -18%;
    border-radius: 50%;
    background: radial-gradient(circle, var(--yellow-glow) 0%, transparent 72%);
    filter: blur(3px);
    z-index: 0;
    animation: home-logo-glow-pulse 2.8s ease-in-out infinite;
  }
  .home-hero-logo img {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 4px 14px var(--yellow-glow));
    animation: home-logo-breathe 3.4s ease-in-out infinite;
  }
  @keyframes home-logo-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-5px); }
  }
  @keyframes home-logo-glow-pulse {
    0%, 100% { opacity: .5; transform: scale(.9); }
    50%      { opacity: 1;  transform: scale(1.12); }
  }
  @keyframes home-logo-breathe {
    0%, 100% { transform: scale(1);     filter: drop-shadow(0 4px 14px var(--yellow-glow)); }
    50%      { transform: scale(1.045); filter: drop-shadow(0 6px 22px var(--yellow-glow)); }
  }
  /* Reacción visual al tocar el logo del menú principal */
  .home-hero-logo { cursor: pointer; }
  .home-hero-logo.logo-clicked { animation: logo-click-pop .55s cubic-bezier(.34,1.56,.64,1); }
  @keyframes logo-click-pop {
    0%   { transform: scale(1) rotate(0deg); }
    30%  { transform: scale(1.28) rotate(-10deg); }
    55%  { transform: scale(0.92) rotate(8deg); }
    80%  { transform: scale(1.06) rotate(-3deg); }
    100% { transform: scale(1) rotate(0deg); }
  }
  .home-hero-logo.logo-clicked .home-hero-logo-glow { animation: logo-click-glow-burst .55s ease; }
  @keyframes logo-click-glow-burst {
    0%   { opacity: 1;  transform: scale(1); }
    40%  { opacity: 1;  transform: scale(1.6); }
    100% { opacity: .5; transform: scale(.9); }
  }
  .home-hero-subtitle {
    color: var(--text-dim);
    font-weight: 800;
    font-size: .85rem;
    margin-top: 8px;
  }

  .menu-grid { display:grid; gap:12px; }
  .menu-btn {
    width: 100%;
    padding: 22px 16px;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: linear-gradient(150deg, var(--bg-card) 0%, var(--bg-card2) 100%);
    color: var(--text);
    font-family: 'Nunito', sans-serif;
    cursor: pointer;
    transition: transform .2s ease, box-shadow .25s ease, border-color .2s ease, background .25s ease;
    text-align: center;
    box-shadow: var(--shadow-sm);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
  }
  /* franja de acento superior, sutil, que cobra color en hover */
  .menu-btn::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--yellow), var(--blue));
    opacity: .5;
    transition: opacity .25s ease;
  }
  .menu-btn-icon {
    font-size: 2rem;
    line-height: 1;
    margin-bottom: 2px;
    filter: drop-shadow(0 2px 6px #0004);
  }
  .menu-btn-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: 'Poppins', 'Nunito', sans-serif;
    font-size: 1.3rem;
    font-weight: 800;
    letter-spacing: .2px;
    width: 100%;
  }
  .menu-btn small {
    display: block;
    color: var(--text-dim);
    font-weight: 700;
    margin-top: 2px;
    font-size: .8rem;
    line-height: 1.4;
    max-width: 34ch;
    margin-left: auto;
    margin-right: auto;
  }
  .menu-btn:hover {
    border-color: var(--blue);
    box-shadow: var(--shadow-md), 0 0 0 1px #3b82f640 inset;
    transform: translateY(-4px);
  }
  .menu-btn:hover::before { opacity: 1; }
  .menu-btn:active { transform: translateY(-1px) scale(.98); }

  /* Fila compacta para botones secundarios (Clasificaciones/Opciones):
     se colocan uno junto a otro, cada uno ocupando la mitad del ancho
     horizontal que ocupa un botón principal (Jugar, Modo Historia...),
     sin título ni subtítulo, solo icono. */
  .menu-row-compact {
    display: flex;
    gap: 12px;
  }
  .menu-btn-compact {
    flex: 1 1 0;
    padding: 14px 16px;
    gap: 0;
  }
  .menu-btn-compact .menu-btn-icon {
    margin-bottom: 0;
  }

  /* Interruptor ♾️ pequeño dentro de un botón de modo (Fácil/Normal/
     Difícil/Combate): activa que ESE modo se juegue con rondas sin
     límite y un fallo terminando la partida (ver game.js, endlessToggle).
     Se posiciona en la esquina del botón grande sin alterar su layout
     interno (position:absolute), y su propio click no debe "colar" al
     botón grande que lo contiene (ver stopPropagation en game.js). */
  .menu-btn-endless-toggle {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    line-height: 1;
    background: var(--bg-card2);
    border: 1px solid var(--border);
    color: var(--text-dim);
    cursor: pointer;
    transition: transform .2s ease, background .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease;
    z-index: 2;
  }
  .menu-btn-endless-toggle:hover {
    transform: scale(1.1);
    border-color: var(--blue);
    color: var(--text);
  }
  .menu-btn-endless-toggle:focus-visible {
    outline: 2px solid var(--blue);
    outline-offset: 2px;
  }
  .menu-btn-endless-toggle.active {
    background: linear-gradient(150deg, var(--yellow), var(--blue));
    border-color: transparent;
    color: #fff;
    box-shadow: var(--shadow-sm);
  }
  /* Si el modo está bloqueado (candado), el interruptor no debe usarse. */
  .menu-btn.locked .menu-btn-endless-toggle {
    pointer-events: none;
    opacity: .5;
  }

  .menu-btn.locked {
    opacity: .55;
    cursor: not-allowed;
    filter: grayscale(.4);
  }
  .menu-btn.locked::before { opacity: .25; }
  .menu-btn.locked:hover { border-color: var(--border); box-shadow: var(--shadow-sm); transform: none; }
  .menu-btn.locked:hover::before { opacity: .25; }
  .menu-btn.locked:active { transform: none; }
  .menu-btn .lock-req {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    color: var(--yellow);
    font-weight: 800;
    margin-top: 4px;
    font-size: .78rem;
  }

  /* ── SELECCIÓN DE REGIÓN (Modo Normal) ── */
  .region-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  .region-grid > .region-card:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
  .region-card {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 3px;
    padding: 22px 12px 16px;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: linear-gradient(165deg, var(--bg-card2), var(--bg-card));
    color: var(--text);
    font-family: 'Nunito', sans-serif;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    transition: transform .22s cubic-bezier(.22,1,.36,1), box-shadow .25s ease, border-color .25s ease;
  }
  .region-card::before {
    content: "";
    position: absolute; inset: 0;
    background: radial-gradient(circle at 50% -10%, var(--region-color, var(--blue)) 0%, transparent 62%);
    opacity: .16;
    transition: opacity .25s ease;
  }
  .region-card::after {
    content: "";
    position: absolute; top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--region-color, var(--blue));
    opacity: .9;
  }
  .region-card:hover {
    transform: translateY(-4px);
    border-color: var(--region-color, var(--blue));
    box-shadow: var(--shadow-md), 0 0 0 1px var(--region-color, var(--blue)) inset;
  }
  .region-card:hover::before { opacity: .26; }
  .region-card:active { transform: translateY(-1px) scale(.97); }

  .region-card-gen {
    position: absolute; top: 8px; left: 8px;
    font-size: .56rem;
    font-weight: 900;
    letter-spacing: .5px;
    color: #fff;
    background: var(--region-color, var(--blue));
    padding: 2px 7px;
    border-radius: 999px;
    box-shadow: 0 2px 6px #0003;
  }
  .region-card-icon {
    font-size: 2rem;
    line-height: 1;
    margin-top: 6px;
    filter: drop-shadow(0 4px 10px #0004);
  }
  .region-card-name {
    font-family: 'Fredoka One', cursive;
    font-size: 1.05rem;
    letter-spacing: .2px;
    margin-top: 3px;
  }
  .region-card-count {
    font-size: .68rem;
    font-weight: 800;
    color: var(--text-dim);
  }

  /* ── SONG CARD ── */
  .song-card {
    background: var(--bg-card);
    border-radius: var(--radius);
    border: 1px solid var(--border);
    padding: 20px;
    display: flex; flex-direction: column; align-items: center; gap: 14px;
    position: relative; overflow: hidden;
    box-shadow: var(--shadow-md);
  }
  .song-card::before {
    content: '';
    position: absolute; inset: 0;
    background: radial-gradient(ellipse at 50% 0%, #3b82f620 0%, transparent 70%);
    pointer-events: none;
  }
  .song-image-wrap { position: relative; width: 130px; height: 130px; }
  .song-image-glow {
    position: absolute; inset: -12px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--yellow-glow) 0%, transparent 70%);
    animation: pulse-glow 2s ease-in-out infinite;
  }
  @keyframes pulse-glow {
    0%, 100% { opacity: 0.5; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.1); }
  }
  .song-image {
    width: 130px; height: 130px;
    border-radius: 50%;
    border: 3px solid var(--yellow);
    object-fit: cover;
    position: relative; z-index: 1;
    background: var(--bg-card2);
    overflow: hidden;
  }
  .song-image-placeholder {
    width: 130px; height: 130px;
    border-radius: 50%;
    border: 3px solid var(--yellow);
    background: var(--bg-card2);
    display: flex; align-items: center; justify-content: center;
    font-size: 3rem;
    position: relative; z-index: 1;
    animation: spin-slow 8s linear infinite;
  }
  @keyframes spin-slow { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

  .song-question {
    font-family: 'Fredoka One', cursive;
    font-size: 1.12rem;
    color: var(--text-dim);
    text-align: center;
    letter-spacing: 0.5px;
  }

  /* ── WAVEFORM VISUALIZER ── */
  .waveform-wrap { width: 100%; display: flex; flex-direction: column; gap: 6px; }
  #waveform-canvas { width: 100%; height: 50px; border-radius: 12px; background: var(--bg-card2); }
  .progress-bar-bg { width: 100%; height: 6px; background: var(--bg-card2); border-radius: 10px; overflow: hidden; }
  .progress-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--blue), var(--yellow));
    border-radius: 10px;
    width: 0%;
    transition: width 0.3s linear;
  }
  .progress-times { display: flex; justify-content: space-between; font-size: 0.68rem; color: var(--text-dim); font-weight: 800; }

  /* ── ANSWERS ── */
  .answers-grid {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .answer-btn {
    background: var(--bg-card);
    border: 2px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 14px 10px;
    color: var(--text);
    font-family: 'Nunito', sans-serif;
    font-size: 0.82rem;
    font-weight: 900;
    cursor: pointer;
    text-align: center;
    transition: all 0.18s ease;
    position: relative; overflow: hidden;
    line-height: 1.3;
    min-height: 68px;
    display: flex; align-items: center; justify-content: center;
    user-select: none;
    box-shadow: var(--shadow-sm);
  }
  .answer-btn::before {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(135deg, #ffffff08 0%, transparent 60%);
    pointer-events: none;
  }
  .answer-btn:active:not(:disabled) { transform: scale(0.96); }
  .answer-btn:not(:disabled):hover {
    border-color: var(--blue);
    background: var(--bg-card2);
    transform: translateY(-2px);
    box-shadow: 0 4px 20px #3b82f640;
  }
  .answer-btn.correct {
    background: linear-gradient(135deg, #16a34a, #22c55e);
    border-color: var(--green);
    box-shadow: 0 0 30px #22c55e66;
    animation: zoom-correct 0.4s cubic-bezier(.34,1.56,.64,1);
  }
  .answer-btn.wrong {
    background: linear-gradient(135deg, #b91c1c, #ef4444);
    border-color: var(--red);
    box-shadow: 0 0 20px #ef444466;
    animation: shake 0.4s ease;
  }
  .answer-btn.reveal {
    background: linear-gradient(135deg, #16a34a, #22c55e);
    border-color: var(--green);
    box-shadow: 0 0 30px #22c55e66;
    animation: zoom-correct 0.5s cubic-bezier(.34,1.56,.64,1) 0.15s both;
  }
  .answer-btn:disabled { cursor: default; opacity: .95; }
  @keyframes zoom-correct { 0% { transform: scale(1); } 50% { transform: scale(1.08); } 100% { transform: scale(1); } }
  @keyframes shake {
    0% { transform: translateX(0); }
    20% { transform: translateX(-8px); }
    40% { transform: translateX(8px); }
    60% { transform: translateX(-6px); }
    80% { transform: translateX(6px); }
    100% { transform: translateX(0); }
  }

  /* ── BOTÓN DE PISTA VISUAL (Fácil / Normal / Modo Historia) ── */
  .hint-btn {
    padding: 8px 16px;
    border-radius: 999px;
    border: 2px solid var(--purple);
    background: #8b5cf622;
    color: var(--text);
    font-family: 'Nunito', sans-serif;
    font-size: 0.78rem;
    font-weight: 900;
    cursor: pointer;
    transition: all 0.18s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0 auto;
  }
  .hint-btn-cost { color: var(--purple); font-weight: 800; }
  .hint-btn:hover:not(:disabled) {
    background: #8b5cf640;
    transform: translateY(-1px);
    box-shadow: 0 4px 16px #8b5cf655;
  }
  .hint-btn:active:not(:disabled) { transform: scale(0.96); }
  .hint-btn:disabled {
    opacity: 0.6;
    cursor: default;
    border-color: var(--border);
    background: var(--bg-card2);
  }
  .hint-btn:disabled .hint-btn-cost { color: var(--text-dim); }

  /* ── NEXT BUTTON ── */
  .next-btn {
    width: 100%;
    padding: 16px;
    border-radius: var(--radius);
    border: none;
    background: linear-gradient(135deg, var(--yellow) 0%, #ff9f00 100%);
    color: #000;
    font-family: 'Fredoka One', cursive;
    font-size: 1.15rem;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 20px var(--yellow-glow);
    letter-spacing: 0.5px;
    opacity: 0;
    pointer-events: none;
    transform: translateY(10px);
  }
  .next-btn.visible { opacity: 1; pointer-events: all; transform: translateY(0); }
  .next-btn:hover { box-shadow: 0 6px 26px var(--yellow-glow); transform: translateY(-2px); }
  .next-btn:active { transform: scale(0.97); }

  /* ── PARTICLES ── */
  .particle {
    position: fixed; pointer-events: none; z-index: 0;
    animation: float-up 4s ease-out forwards;
    font-size: 1.2rem;
    opacity: 0;
  }
  @keyframes float-up {
    0% { opacity: 1; transform: translateY(0) rotate(0deg) scale(1); }
    100% { opacity: 0; transform: translateY(-120px) rotate(360deg) scale(0.3); }
  }

  /* ── RESULT OVERLAY ── */
  #result-overlay {
    position: fixed; inset: 0; z-index: 200;
    background: #0a0e1add;
    display: flex; align-items: center; justify-content: center;
    opacity: 0; pointer-events: none;
    transition: opacity 0.3s;
    backdrop-filter: blur(6px);
  }
  body.light #result-overlay { background: #00000066; }
  #result-overlay.show { opacity: 1; pointer-events: all; }

  /* ── AVISO: salir a mitad de ronda del Modo Historia ──
     Mismo patrón visual que #result-overlay (reutiliza .result-card,
     .result-emoji, .result-title, .result-score y .result-actions), pero
     con su propio z-index más alto para poder aparecer también por encima
     del quiz mientras una ronda está en curso. */
  #leave-story-confirm-overlay {
    position: fixed; inset: 0; z-index: 260;
    background: #0a0e1add;
    display: flex; align-items: center; justify-content: center;
    opacity: 0; pointer-events: none;
    transition: opacity 0.3s;
    backdrop-filter: blur(6px);
  }
  body.light #leave-story-confirm-overlay { background: #00000066; }
  #leave-story-confirm-overlay.show { opacity: 1; pointer-events: all; }

  /* ── AVISO: modo infinito activado (interruptor ♾️ de un modo) ──
     Mismo patrón visual que #leave-story-confirm-overlay (reutiliza
     .result-card, .result-emoji, .result-title, .result-score y
     .result-actions), con una casilla ".dont-show-again" añadida antes
     de las acciones. */
  #endless-info-overlay {
    position: fixed; inset: 0; z-index: 300;
    background: #0a0e1add;
    display: flex; align-items: center; justify-content: center;
    opacity: 0; pointer-events: none;
    transition: opacity 0.3s;
    backdrop-filter: blur(6px);
  }
  body.light #endless-info-overlay { background: #00000066; }
  #endless-info-overlay.show { opacity: 1; pointer-events: all; }
  .dont-show-again {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    font-size: .82rem; font-weight: 800; color: var(--text-dim);
    margin-bottom: 22px; cursor: pointer; user-select: none;
  }
  .dont-show-again input { width: 18px; height: 18px; accent-color: var(--yellow); cursor: pointer; }
  .result-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 28px;
    padding: 36px 28px;
    text-align: center;
    max-width: 320px; width: 90%;
    box-shadow: var(--shadow-lg);
    animation: pop-in 0.4s cubic-bezier(.34,1.56,.64,1);
  }
  @keyframes pop-in { from { transform: scale(0.5); opacity: 0; } to { transform: scale(1); opacity: 1; } }
  .result-emoji { font-size: 4rem; margin-bottom: 10px; filter: drop-shadow(0 4px 14px #0006); }
  .result-title { font-family: 'Fredoka One', cursive; font-size: 2rem; margin-bottom: 6px; }
  .result-score { font-size: 1rem; color: var(--text-dim); font-weight: 800; margin-bottom: 20px; }
  .result-score span { color: var(--yellow); font-size: 1.4rem; }
  .result-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
  .restart-btn {
    padding: 14px 32px;
    border-radius: 50px;
    border: none;
    background: linear-gradient(135deg, var(--yellow), #ff9f00);
    color: #000;
    font-family: 'Fredoka One', cursive;
    font-size: 1.1rem;
    cursor: pointer;
    box-shadow: 0 4px 20px var(--yellow-glow);
    transition: transform .18s ease, box-shadow .2s ease;
  }
  .restart-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 26px var(--yellow-glow); }
  .restart-btn:active { transform: scale(.97); }
  .exit-btn {
    padding: 14px 32px;
    border-radius: 50px;
    border: 1px solid var(--border);
    background: var(--bg-card2);
    color: var(--text);
    font-family: 'Fredoka One', cursive;
    font-size: 1.1rem;
    cursor: pointer;
    transition: transform .18s ease, border-color .2s ease, box-shadow .2s ease;
  }
  .exit-btn:hover { border-color: var(--blue); box-shadow: var(--shadow-sm); transform: translateY(-2px); }
  .exit-btn:active { transform: scale(.97); }

  /* ── PERFIL DE JUGADOR ── */
  /* Barra de perfil (avatar + nombre) sobre el título del menú principal */
  .profile-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 14px 6px 6px;
    margin: 0 auto 14px;
    border-radius: 999px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    width: fit-content;
    max-width: 90%;
    transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease;
  }
  .profile-bar:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--yellow-glow); }
  .profile-bar:active { transform: scale(.97); }
  .profile-avatar-frame {
    position: relative;
    width: 40px; height: 40px;
    flex-shrink: 0;
    border-radius: 50%;
    padding: 2px;
    background: linear-gradient(135deg, var(--yellow), #ff9f00);
    box-shadow: 0 0 0 1px rgba(255,255,255,.15) inset, 0 2px 10px var(--yellow-glow);
  }
  .profile-avatar-frame img {
    display: block;
    width: 100%; height: 100%;
    border-radius: 50%;
    object-fit: cover;
    background: var(--bg-card2);
  }
  .profile-avatar-frame.large { width: 92px; height: 92px; margin: 0 auto 12px; padding: 3px; }
  .profile-bar-name {
    font-family: 'Fredoka One', cursive;
    font-size: .95rem;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 160px;
  }

  /* Selector de avatar: rejilla de caras Pokémon estilo Mundo Misterioso */
  .profile-avatar-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin: 14px 0;
    max-height: 260px;
    overflow-y: auto;
    padding: 2px;
  }
  .profile-avatar-option {
    position: relative;
    width: 100%;
    aspect-ratio: 1;
    border-radius: 50%;
    border: 2px solid var(--border);
    background: var(--bg-card2);
    padding: 0;
    cursor: pointer;
    overflow: hidden;
    transition: transform .15s ease, border-color .2s ease, box-shadow .2s ease;
  }
  .profile-avatar-option img { width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; }
  .profile-avatar-option:hover { transform: translateY(-2px); border-color: var(--yellow-glow); }
  .profile-avatar-option:active { transform: scale(.94); }
  .profile-avatar-option.selected {
    border-color: var(--yellow);
    box-shadow: 0 0 0 3px var(--yellow-glow), var(--shadow-md);
  }
  .profile-avatar-option.selected::after {
    content: "✓";
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    background: #00000055;
    color: var(--yellow);
    font-weight: 900;
    font-size: 1.1rem;
  }
  /* Avatares todavía no desbloqueados por nivel de perfil (ver
     AVATAR_UNLOCKS/isAvatarUnlocked en game.js): en gris, con candado, y
     no seleccionables (el click muestra un aviso en vez de elegirlos). */
  .profile-avatar-option.locked { cursor: not-allowed; }
  .profile-avatar-option.locked img { filter: grayscale(1) brightness(.6); }
  .profile-avatar-option.locked:hover { transform: none; border-color: var(--border); }
  .avatar-lock-badge {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.1rem;
    background: #00000040;
  }

  /* Rejilla de estilos de puntero del ratón (Opciones > Opciones
     gráficas), mismo criterio visual que .profile-avatar-grid de arriba
     pero con botones cuadrados (los sprites de objetos no son caras) y
     una etiqueta de texto con el nombre debajo de cada uno — ver
     renderCursorGrid() en ui.js. */
  .cursor-style-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin: 4px 0 2px;
  }
  .cursor-style-option {
    position: relative;
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    padding: 12px 6px;
    border-radius: 14px;
    border: 2px solid var(--border);
    background: var(--bg-card2);
    cursor: pointer;
    transition: transform .15s ease, border-color .2s ease, box-shadow .2s ease;
  }
  .cursor-style-option img { width: 30px; height: 30px; image-rendering: pixelated; }
  .cursor-style-option .cursor-style-icon { font-size: 1.5rem; line-height: 30px; height: 30px; }
  .cursor-style-option .cursor-style-name { font-size: .68rem; font-weight: 800; text-align: center; color: var(--text-dim); }
  .cursor-style-option:hover { transform: translateY(-2px); border-color: var(--yellow-glow); }
  .cursor-style-option:active { transform: scale(.96); }
  .cursor-style-option.selected {
    border-color: var(--yellow);
    box-shadow: 0 0 0 3px var(--yellow-glow), var(--shadow-md);
  }
  /* Estilos todavía no desbloqueados (ver CURSOR_UNLOCKS/isCursorUnlocked()
     en game.js): en gris, con candado, y no seleccionables (el click
     muestra un aviso con el logro que falta en vez de elegirlos). */
  .cursor-style-option.locked { cursor: not-allowed; }
  .cursor-style-option.locked img,
  .cursor-style-option.locked .cursor-style-icon { filter: grayscale(1) brightness(.6); opacity: .7; }
  .cursor-style-option.locked:hover { transform: none; border-color: var(--border); }
  .cursor-style-lock-badge {
    position: absolute; top: 4px; right: 6px;
    font-size: .8rem;
  }

  /* Pantalla de configuración inicial (primera vez que se juega) */
  #profile-setup-overlay {
    position: fixed; inset: 0; z-index: 480;
    background: #0a0e1add;
    display: flex; align-items: center; justify-content: center;
    opacity: 0; pointer-events: none;
    transition: opacity .3s ease;
    backdrop-filter: blur(6px);
    padding: 20px;
  }
  body.light #profile-setup-overlay { background: #00000066; }
  #profile-setup-overlay.show { opacity: 1; pointer-events: all; }
  .profile-setup-card {
    max-width: 380px;
    max-height: 90vh;
    overflow-y: auto;
  }
  .profile-setup-icon { font-size: 2.6rem; margin-bottom: 4px; filter: drop-shadow(0 4px 14px var(--yellow-glow)); }
  .profile-setup-desc {
    color: var(--text-dim);
    font-weight: 700;
    font-size: .85rem;
    line-height: 1.45;
    margin-bottom: 18px;
  }
  .profile-setup-avatar-label {
    font-weight: 900;
    font-size: .85rem;
    color: var(--text);
    margin-bottom: 4px;
    text-align: left;
  }
  .profile-setup-confirm { width: 100%; margin-top: 6px; }
  .profile-setup-confirm:disabled { opacity: .45; cursor: not-allowed; transform: none !important; box-shadow: none !important; }

  input.profile-setup-input {
    width: 100%;
    padding: 13px 16px;
    border-radius: 50px;
    border: 1px solid var(--border);
    background: var(--bg-card2);
    color: var(--text);
    font-family: 'Nunito', sans-serif;
    font-weight: 800;
    font-size: .95rem;
    text-align: center;
    outline: none;
    transition: border-color .2s ease, box-shadow .2s ease;
  }
  input.profile-setup-input::placeholder { color: var(--text-dim); font-weight: 700; }
  input.profile-setup-input:focus { border-color: var(--yellow); box-shadow: 0 0 0 3px var(--yellow-glow); }
  input.profile-setup-input.has-error { border-color: var(--red); }
  .profile-setup-error {
    color: var(--red);
    font-size: .8rem;
    font-weight: 700;
    margin-top: 6px;
    text-align: left;
  }

  /* Modal de perfil (estadísticas + cambio de avatar), reutiliza el patrón
     visual de #poke-events-info-overlay */
  #profile-overlay {
    position: fixed; inset: 0; z-index: 300;
    background: #0a0e1add;
    display: flex; align-items: center; justify-content: center;
    opacity: 0; pointer-events: none;
    transition: opacity .3s ease;
    backdrop-filter: blur(6px);
    padding: 20px;
  }
  body.light #profile-overlay { background: #00000066; }
  #profile-overlay.show { opacity: 1; pointer-events: all; }

  /* Modal de perfil PÚBLICO (otro jugador, desde Clasificaciones): mismo
     overlay a pantalla completa que #profile-overlay, con su propio id
     porque ambos modales pueden, en teoría, quedar montados en el DOM a
     la vez (uno para "mi perfil", otro para el perfil que se esté
     consultando). */
  #public-profile-overlay {
    position: fixed; inset: 0; z-index: 300;
    background: #0a0e1add;
    display: flex; align-items: center; justify-content: center;
    opacity: 0; pointer-events: none;
    transition: opacity .3s ease;
    backdrop-filter: blur(6px);
    padding: 20px;
  }
  body.light #public-profile-overlay { background: #00000066; }
  #public-profile-overlay.show { opacity: 1; pointer-events: all; }
  .profile-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 28px;
    padding: 24px 22px;
    max-width: 380px; width: 100%;
    max-height: min(680px, 88vh);
    overflow-y: auto;
    text-align: center;
    box-shadow: var(--shadow-lg);
    animation: pop-in 0.35s cubic-bezier(.34,1.56,.64,1);
    position: relative;
  }
  .profile-close-btn {
    position: absolute; top: 18px; right: 18px;
    width: 32px; height: 32px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--bg-card2);
    color: var(--text);
    font-weight: 900;
    cursor: pointer;
    flex-shrink: 0;
    transition: transform .15s ease, border-color .2s ease;
  }
  .profile-close-btn:hover { border-color: var(--blue); }
  .profile-close-btn:active { transform: scale(.9); }
  .profile-name-row {
    display: flex; align-items: center; justify-content: center;
    gap: 8px;
    margin-bottom: 4px;
  }
  .profile-name-row .result-title { margin-bottom: 0; font-size: 1.5rem; }
  .profile-stats-list { margin: 18px 0 6px; text-align: left; }
  .profile-stats-title {
    font-weight: 900;
    font-size: .78rem;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: var(--text-dim);
    margin: 14px 0 2px;
  }
  .profile-stats-title:first-child { margin-top: 0; }
  .profile-change-avatar-btn { width: 100%; margin-top: 8px; }

  /* Insignia de nivel sobre el avatar */
  .profile-level-badge {
    position: absolute;
    bottom: -2px; right: -2px;
    min-width: 18px; height: 18px;
    padding: 0 4px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--blue), var(--blue-dark));
    border: 2px solid var(--bg-card);
    color: #fff;
    font-family: 'Fredoka One', cursive;
    font-size: .62rem;
    line-height: 15px;
    text-align: center;
    box-shadow: var(--shadow-sm);
  }
  .profile-level-badge.large { min-width: 30px; height: 30px; line-height: 26px; font-size: .95rem; border-width: 3px; bottom: 0; right: 0; }

  /* Línea "Nivel N" y barra de progreso de experiencia en el modal de perfil */
  .profile-level-line {
    font-family: 'Fredoka One', cursive;
    font-size: .95rem;
    color: var(--blue);
    margin-bottom: 10px;
  }
  .profile-xp-bar-bg {
    width: 100%;
    height: 10px;
    border-radius: 999px;
    background: var(--bg-card2);
    border: 1px solid var(--border);
    overflow: hidden;
  }
  .profile-xp-bar-fill {
    height: 100%;
    width: 0%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--blue), var(--purple));
    transition: width .5s ease;
  }
  .profile-xp-label {
    font-size: .72rem;
    font-weight: 800;
    color: var(--text-dim);
    margin: 5px 0 4px;
    text-align: center;
  }

  /* ── OPTIONS ── */
  .opt-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding: 14px 0; border-bottom: 1px dashed var(--border); }
  .opt-row:last-child { border-bottom: none; }
  .opt-row .opt-label { font-weight: 900; font-size: .92rem; }
  .opt-row .opt-desc { font-size: .74rem; color: var(--text-dim); font-weight: 800; margin-top: 3px; }
  #go-guide { transition: transform .15s ease, opacity .15s ease; }
  #go-guide:hover { opacity: .85; }
  #go-guide:active { transform: scale(.98); }

  /* ── GUÍA DE JUEGO ── */
  .guide-section .guide-item { padding: 12px 0; border-bottom: 1px dashed var(--border); }
  .guide-section .guide-item:last-child { border-bottom: none; }
  .guide-item-title { font-weight: 900; font-size: .95rem; margin-bottom: 4px; }
  .guide-item-desc { font-size: .82rem; color: var(--text-dim); font-weight: 700; line-height: 1.5; }
  input[type="range"] {
    width: 160px; accent-color: var(--yellow);
    height: 6px; border-radius: 10px; cursor: pointer;
  }
  .toggle {
    display:flex; align-items:center; gap:10px;
    background: var(--bg-card2);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 8px 14px;
    cursor: pointer;
    transition: border-color .2s ease;
  }
  .toggle:hover { border-color: var(--blue); }
  .toggle input { width: 20px; height: 20px; accent-color: var(--yellow); cursor: pointer; }

  /* Selector de idioma (Opciones): dos botones tipo "pill" agrupados,
     el idioma activo resaltado en amarillo (mismo lenguaje visual que
     .toggle de arriba). */
  .language-switch {
    display: flex;
    background: var(--bg-card2);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 3px;
    gap: 3px;
  }
  .language-switch-btn {
    border: none;
    background: transparent;
    color: var(--text-dim);
    font-weight: 900;
    font-size: .78rem;
    padding: 7px 12px;
    border-radius: 999px;
    cursor: pointer;
    transition: background .2s ease, color .2s ease;
    font-family: inherit;
  }
  .language-switch-btn:hover { color: var(--text); }
  .language-switch-btn.active {
    background: var(--yellow);
    color: #24292b;
  }

  /* ── ACHIEVEMENTS SCREEN ── */
  #ach-progress-bar-bg {
    width: 100%; height: 10px; background: var(--bg-card2);
    border-radius: 10px; overflow: hidden; margin-top: 10px;
  }
  #ach-progress-bar-fill {
    height: 100%; width: 0%;
    background: linear-gradient(90deg, var(--blue), var(--yellow));
    border-radius: 10px;
    transition: width 0.4s ease;
  }
  /* Secciones plegables de la pantalla de Logros: cada categoría
     (Progreso, Maestría, Sonidex, Modo Historia, Eventos Pokémon) es un
     <details> independiente en vez de una única rejilla plana con todos
     los logros a la vez. */
  .ach-sections { display: flex; flex-direction: column; gap: 12px; }
  .ach-section {
    background: var(--bg-card);
    border-radius: var(--radius);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
  }
  .ach-section-summary {
    display: flex; align-items: center; gap: 10px;
    padding: 16px 18px;
    cursor: pointer;
    list-style: none;
    user-select: none;
  }
  .ach-section-summary::-webkit-details-marker { display: none; }
  .ach-section-icon { font-size: 1.3rem; flex-shrink: 0; }
  .ach-section-title {
    flex: 1; min-width: 0;
    font-family: 'Fredoka One', cursive;
    font-size: 1rem;
    letter-spacing: .2px;
  }
  .ach-section-count {
    font-size: .74rem;
    font-weight: 900;
    color: var(--text-dim);
    background: var(--bg-card2);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 3px 10px;
    flex-shrink: 0;
    white-space: nowrap;
  }
  .ach-section-chevron {
    flex-shrink: 0;
    color: var(--text-dim);
    transition: transform .25s ease;
  }
  .ach-section[open] .ach-section-chevron { transform: rotate(180deg); }
  .ach-section[open] .ach-section-summary { border-bottom: 1px solid var(--border); }
  .ach-list { display: flex; flex-direction: column; gap: 10px; padding: 14px 18px 18px; }
  .ach-item {
    display: flex; align-items: center; gap: 12px;
    padding: 12px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--bg-card2);
    transition: all 0.2s ease;
  }
  .ach-item.unlocked {
    border-color: var(--yellow);
    box-shadow: 0 0 16px var(--yellow-glow);
  }
  .ach-item.unlocked:hover { transform: translateY(-2px); }
  .ach-item.locked { opacity: 0.55; }
  .ach-item .ach-icon {
    position: relative;
    font-size: 1.7rem;
    width: 44px; height: 44px;
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: var(--bg-card);
    border: 1px solid var(--border);
  }
  .ach-item.locked .ach-icon { filter: grayscale(1); }
  .ach-item .ach-info { flex: 1; min-width: 0; }
  .ach-item .ach-title { font-weight: 900; font-size: .88rem; }
  .ach-item .ach-desc { font-size: .72rem; color: var(--text-dim); font-weight: 700; margin-top: 2px; line-height: 1.35; }
  .ach-item .ach-date { font-size: .64rem; color: var(--yellow); font-weight: 900; margin-top: 4px; }

  /* ── Marca de estrella: logros que desbloquean alguna función ── */
  .ach-item.has-feature { cursor: pointer; }
  .ach-item.has-feature:hover { border-color: var(--yellow); transform: translateY(-2px); }
  .ach-star-badge {
    position: absolute;
    top: -6px; right: -6px;
    font-size: .85rem;
    filter: drop-shadow(0 1px 3px #0008);
    animation: ach-star-twinkle 1.8s ease-in-out infinite;
  }
  @keyframes ach-star-twinkle {
    0%, 100% { transform: scale(1) rotate(0deg); }
    50%      { transform: scale(1.18) rotate(10deg); }
  }

  /* ── Contenedor explicativo de la función desbloqueada ── */
  .ach-feature-overlay {
    position: fixed; inset: 0; z-index: 500;
    background: #000000aa;
    backdrop-filter: blur(4px);
    display: flex; align-items: center; justify-content: center;
    padding: 24px;
    opacity: 0; pointer-events: none;
    transition: opacity .25s ease;
  }
  .ach-feature-overlay.show { opacity: 1; pointer-events: auto; }
  .ach-feature-box {
    background: linear-gradient(160deg, var(--bg-card2), var(--bg-card));
    border: 2px solid var(--yellow);
    border-radius: var(--radius);
    padding: 24px 20px 18px;
    max-width: 360px;
    width: 100%;
    text-align: center;
    box-shadow: var(--shadow-lg), 0 0 40px var(--yellow-glow);
    transform: scale(.9) translateY(10px);
    transition: transform .3s cubic-bezier(.34,1.56,.64,1);
  }
  .ach-feature-overlay.show .ach-feature-box { transform: scale(1) translateY(0); }
  .ach-feature-icon { font-size: 2.2rem; margin-bottom: 8px; }
  .ach-feature-title { font-family: 'Fredoka One', cursive; font-size: 1.02rem; color: var(--yellow); margin-bottom: 14px; line-height: 1.3; }
  .ach-feature-list { display: flex; flex-direction: column; }
  .ach-feature-item {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    font-weight: 800; font-size: .9rem;
    padding: 10px 0;
    border-top: 1px dashed var(--border);
  }
  .ach-feature-item:first-child { border-top: none; }
  .ach-feature-item .ach-feature-type { color: var(--text-dim); font-weight: 700; font-size: .74rem; }
  .ach-feature-hint {
    margin-top: 16px;
    font-size: .66rem;
    color: var(--text-dim);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .5px;
  }

  /* ── SONIDEX ── */
  #sonidex-progress-bar-bg {
    width: 100%; height: 10px; background: var(--bg-card2);
    border-radius: 10px; overflow: hidden; margin-top: 10px;
  }
  #sonidex-progress-bar-fill {
    height: 100%; width: 0%;
    background: linear-gradient(90deg, var(--blue), var(--yellow));
    border-radius: 10px;
    transition: width 0.4s ease;
  }
  .sonidex-group-title {
    font-family: 'Fredoka One', cursive;
    font-size: 1.02rem;
    margin: 4px 2px 10px;
    display: flex; align-items: center; gap: 8px;
  }
  .sonidex-group-title .count {
    font-family: 'Nunito', sans-serif;
    font-size: .68rem;
    color: var(--text-dim);
    font-weight: 800;
  }
  .sonidex-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
  }
  .sonidex-card {
    background: var(--bg-card2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 10px 6px 12px;
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    text-align: center;
    transition: transform .18s ease, box-shadow .2s ease, border-color .2s ease;
  }
  .sonidex-card:not(.locked) {
    border-color: var(--yellow);
    box-shadow: 0 0 14px var(--yellow-glow);
  }
  .sonidex-card:not(.locked):hover { transform: translateY(-2px); }
  .sonidex-img-wrap { width: 64px; height: 64px; }
  .sonidex-img {
    width: 64px; height: 64px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--yellow);
    background: var(--bg-card);
    display: block;
  }
  .sonidex-img-locked {
    width: 64px; height: 64px;
    border-radius: 50%;
    background: var(--bg-card);
    border: 2px solid var(--border);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.5rem;
    filter: grayscale(1);
  }
  .sonidex-card.locked .sonidex-img,
  .sonidex-card.locked .sonidex-img-wrap img {
    filter: grayscale(1) brightness(.35);
  }
  .sonidex-title {
    font-weight: 900;
    font-size: .68rem;
    line-height: 1.25;
  }
  .sonidex-card.locked .sonidex-title { color: var(--text-dim); }
  .sonidex-progress {
    font-size: .62rem;
    color: var(--yellow);
    font-weight: 900;
  }
  .sonidex-controls {
    display: flex; align-items: center; justify-content: center;
    margin-top: 2px;
  }
  .sonidex-play-btn, .sonidex-stop-btn {
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--text);
    border-radius: 50%;
    width: 30px; height: 30px;
    display: flex; align-items: center; justify-content: center;
    font-size: .8rem;
    cursor: pointer;
    transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease;
  }
  .sonidex-play-btn:hover, .sonidex-stop-btn:hover {
    border-color: var(--blue);
    box-shadow: var(--shadow-sm);
  }
  .sonidex-play-btn:active, .sonidex-stop-btn:active { transform: scale(.92); }
  .sonidex-stop-btn { border-color: var(--red); color: var(--red); }
  .sonidex-lang-btn {
    border: 1px solid var(--border);
    background: var(--bg-card);
    border-radius: 50%;
    width: 24px; height: 24px;
    display: flex; align-items: center; justify-content: center;
    font-size: .65rem;
    line-height: 1;
    cursor: pointer;
    margin-left: 4px;
    transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease;
  }
  .sonidex-lang-btn:hover { border-color: var(--blue); box-shadow: var(--shadow-sm); }
  .sonidex-lang-btn:active { transform: scale(.92); }
  .sonidex-card.playing {
    border-color: var(--red);
    box-shadow: 0 0 14px #ef444466;
  }

  /* ── RACHAS MÁXIMAS ── */
  .streak-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 0; border-bottom: 1px dashed var(--border);
  }
  .streak-row:last-child { border-bottom: none; }
  .streak-row .streak-name { font-weight: 800; font-size: .85rem; display: flex; align-items: center; gap: 8px; }
  .streak-row .streak-value {
    font-family: 'Fredoka One', cursive;
    color: var(--yellow);
    font-size: 1.1rem;
    display: flex; align-items: center; gap: 4px;
  }
  .streak-group-title {
    font-size: .68rem; text-transform: uppercase; letter-spacing: .6px;
    color: var(--text-dim); font-weight: 900; margin: 14px 0 4px;
  }
  .streak-group-title:first-child { margin-top: 0; }

  /* ── CLASIFICACIONES ── */
  .leaderboard-list { display: flex; flex-direction: column; }
  .leaderboard-row {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 0; border-bottom: 1px dashed var(--border);
  }
  .leaderboard-row:last-child { border-bottom: none; }
  /* Filas clicables: pulsar un jugador del top abre su perfil público
     (ver openPublicProfileModal() en ui.js). */
  .leaderboard-row.clickable {
    cursor: pointer;
    border-radius: var(--radius-sm);
    padding-left: 6px; padding-right: 6px;
    margin: 0 -6px;
    transition: background .15s ease;
  }
  .leaderboard-row.clickable:hover,
  .leaderboard-row.clickable:focus-visible {
    background: var(--bg-card2);
    outline: none;
  }
  .leaderboard-rank {
    width: 30px; flex-shrink: 0; text-align: center;
    font-family: 'Fredoka One', cursive; font-size: 1rem; color: var(--text-dim);
  }
  .leaderboard-avatar { width: 32px; height: 32px; flex-shrink: 0; padding: 2px; }
  .leaderboard-name {
    flex: 1; font-weight: 800; font-size: .85rem;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .leaderboard-score {
    font-family: 'Fredoka One', cursive; color: var(--yellow); font-size: .95rem;
    flex-shrink: 0;
  }
  .leaderboard-tabs {
    display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px;
  }
  .leaderboard-tabs .leaderboard-tab { min-width: 80px; }
  .leaderboard-subtabs { margin-top: -4px; }
  .leaderboard-tab {
    flex: 1;
    padding: 8px 4px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--bg-card2);
    color: var(--text-dim);
    font-family: 'Fredoka One', cursive;
    font-size: .75rem;
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
  }
  .leaderboard-tab.active {
    background: var(--blue);
    border-color: var(--blue);
    color: #fff;
  }

  /* Helpers */
  .muted { color: var(--text-dim); font-weight: 800; font-size: .8rem; line-height: 1.45; }
  .small { font-size: .72rem; color: var(--text-dim); font-weight: 800; }

  /* ── SPLASH SCREEN (pantalla previa) ── */
  #splash-screen {
    position: fixed; inset: 0; z-index: 500;
    display: flex; align-items: center; justify-content: center;
    background: radial-gradient(circle at 50% 38%, var(--bg-card2), var(--bg-dark) 72%);
    cursor: pointer;
    overflow: hidden;
    transition: opacity .5s ease, transform .5s ease;
  }
  #splash-screen.hide {
    opacity: 0;
    transform: scale(1.06);
    pointer-events: none;
  }
  #splash-screen::before {
    content: "";
    position: absolute;
    inset: -60%;
    background: conic-gradient(from 0deg, transparent 0%, var(--yellow-glow) 12%, transparent 28%, transparent 60%, var(--yellow-glow) 74%, transparent 88%);
    opacity: .3;
    z-index: 0;
    animation: splash-bg-rotate 9s linear infinite;
    pointer-events: none;
  }
  @keyframes splash-bg-rotate { to { transform: rotate(360deg); } }
  .splash-content {
    position: relative;
    z-index: 1;
    display: flex; flex-direction: column; align-items: center;
    text-align: center;
    padding: 20px;
  }
  .splash-spark {
    position: absolute;
    font-size: 1.6rem;
    opacity: .85;
    animation: splash-drift 3.4s ease-in-out infinite;
    filter: drop-shadow(0 0 8px var(--yellow-glow));
  }
  .splash-spark.s1 { top: -34px; left: -58px; animation-delay: .1s; }
  .splash-spark.s2 { top: -10px; right: -66px; font-size: 1.3rem; animation-delay: .6s; }
  .splash-spark.s3 { bottom: 14px; left: -70px; font-size: 1.4rem; animation-delay: 1.1s; }
  .splash-spark.s4 { bottom: -20px; right: -50px; font-size: 1.7rem; animation-delay: 1.6s; }
  @keyframes splash-drift {
    0%, 100% { transform: translateY(0) rotate(0deg); opacity: .85; }
    50% { transform: translateY(-14px) rotate(12deg); opacity: 1; }
  }
  /* Logo con anillos de sonar y brillo pulsante */
  .splash-logo-wrap {
    position: relative;
    width: 250px;
    height: 250px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
  }
  .splash-logo-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid var(--yellow);
    opacity: 0;
    animation: splash-ring-pulse 2.6s ease-out infinite;
  }
  .splash-logo-ring.r2 { animation-delay: .65s; }
  .splash-logo-ring.r3 { animation-delay: 1.3s; }
  @keyframes splash-ring-pulse {
    0%   { transform: scale(.6); opacity: .8; }
    70%  { opacity: .15; }
    100% { transform: scale(1.65); opacity: 0; }
  }
  .splash-logo {
    position: relative;
    z-index: 2;
    width: 200px;
    height: 200px;
    object-fit: contain;
    border-radius: 50%;
    opacity: 0;
    filter: drop-shadow(0 0 18px var(--yellow-glow));
    animation:
      splash-logo-pop .9s cubic-bezier(.34,1.56,.64,1) forwards,
      splash-logo-float 3.2s ease-in-out infinite .9s,
      splash-logo-glow 2.4s ease-in-out infinite .9s;
  }
  @keyframes splash-logo-pop {
    0%   { transform: scale(0) rotate(-30deg); opacity: 0; }
    60%  { transform: scale(1.2) rotate(10deg); opacity: 1; }
    100% { transform: scale(1) rotate(0deg); opacity: 1; }
  }
  @keyframes splash-logo-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-9px); }
  }
  @keyframes splash-logo-glow {
    0%, 100% { filter: drop-shadow(0 0 16px var(--yellow-glow)); }
    50%      { filter: drop-shadow(0 0 32px var(--yellow-glow)); }
  }
  .splash-brand-title {
    display: flex;
    align-items: baseline;
    gap: 10px;
    font-family: 'Poppins', 'Fredoka One', cursive;
    font-weight: 800;
    font-size: 2.5rem;
    line-height: 1.1;
    opacity: 0;
    animation: splash-pop .8s cubic-bezier(.34,1.56,.64,1) forwards;
    animation-delay: .45s;
  }
  .splash-brand-text {
    background: linear-gradient(100deg, var(--yellow) 0%, #ff9f00 35%, var(--yellow) 70%, #ffd76a 100%);
    background-size: 300% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: 0 0 40px var(--yellow-glow);
    animation: radioSheen 5s ease-in-out infinite;
  }
  .splash-brand-fm {
    font-family: 'Poppins', 'Fredoka One', cursive;
    font-weight: 900;
    font-size: 1.1rem;
    padding: 3px 12px;
    border-radius: 999px;
    color: #1a1200;
    background: linear-gradient(135deg, var(--yellow), #ff9f00);
    box-shadow: 0 0 0 1px rgba(255,255,255,.15) inset, 0 2px 10px var(--yellow-glow);
    letter-spacing: .5px;
    animation: radioPulse 2.4s ease-in-out infinite;
  }
  @keyframes splash-pop {
    0% { transform: scale(0) rotate(-12deg); opacity: 0; }
    60% { transform: scale(1.18) rotate(4deg); opacity: 1; }
    100% { transform: scale(1) rotate(0deg); opacity: 1; }
  }
  .splash-subtitle {
    margin-top: 10px;
    font-weight: 800;
    letter-spacing: 1px;
    color: var(--text-dim);
    opacity: 0;
    animation: splash-fadein .7s ease forwards;
    animation-delay: 1.3s;
  }
  .splash-waves {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    height: 24px;
    margin-top: 16px;
    opacity: 0;
    animation: splash-fadein .6s ease forwards;
    animation-delay: 1.45s;
  }
  .splash-waves span {
    display: inline-block;
    width: 5px;
    border-radius: 3px;
    background: linear-gradient(180deg, var(--yellow), #ff9f00);
    animation: radioWave 1s ease-in-out infinite;
  }
  .splash-waves span:nth-child(1) { height: 40%; animation-delay: 0s; }
  .splash-waves span:nth-child(2) { height: 70%; animation-delay: .15s; }
  .splash-waves span:nth-child(3) { height: 100%; animation-delay: .3s; }
  .splash-waves span:nth-child(4) { height: 55%; animation-delay: .45s; }
  .splash-tap {
    margin-top: 36px;
    font-weight: 900;
    font-size: .85rem;
    color: var(--yellow);
    opacity: 0;
    animation:
      splash-fadein .6s ease forwards,
      splash-blink 1.6s ease-in-out infinite;
    animation-delay: 1.9s, 2.5s;
  }
  @keyframes splash-fadein { to { opacity: 1; } }
  @keyframes splash-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: .35; }
  }

  /* ── MODO HISTORIA: overlays (splash de región / enemigo / completado) ── */
  #story-overlay, #story-complete-overlay {
    position: fixed; inset: 0; z-index: 400;
    display: flex; align-items: center; justify-content: center;
    background: radial-gradient(circle at 50% 38%, var(--bg-card2), var(--bg-dark) 72%);
    overflow: hidden;
    opacity: 0;
    transform: scale(1.06);
    pointer-events: none;
    transition: opacity .5s ease, transform .5s ease;
  }
  #story-overlay { cursor: pointer; }
  #story-overlay.show, #story-complete-overlay.show {
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
  }
  /* Resplandor de fondo, sutil y difuso, para dar profundidad a la tarjeta
     sin recurrir a emoticonos decorativos (sustituyen a las antiguas chispas
     ✨⭐🎵 que usaba esta pantalla).
     Antes usaba un conic-gradient en forma de aspas: al ser un elemento
     pequeño y con bordes duros se notaban sus límites, y como la propia
     animación reescribía "transform" (pisando el translateX que lo
     centraba) daba un salto visible en cada vuelta. Ahora:
     - el centrado se hace con márgenes negativos, dejando "transform"
       libre solo para la rotación (0deg → 360deg es un giro perfectamente
       cíclico, así que el bucle ya no da ningún salto).
     - en vez de aspas duras son varias manchas radiales suaves (sin ningún
       borde recto) que se difuminan mucho antes de llegar al límite del
       elemento, y éste es bastante más grande que antes, así que no se
       aprecia dónde termina. */
  .story-splash-content {
    position: relative;
    z-index: 1;
    display: flex; flex-direction: column; align-items: center;
    text-align: center;
    padding: 20px;
  }
  .story-splash-content::before {
    content: '';
    position: absolute;
    left: 50%; top: 50%;
    width: 260%; aspect-ratio: 1;
    margin-left: -130%; margin-top: -130%;
    background:
      radial-gradient(circle at 22% 24%, var(--yellow-glow) 0%, transparent 38%),
      radial-gradient(circle at 80% 20%, var(--yellow-glow) 0%, transparent 34%),
      radial-gradient(circle at 82% 78%, var(--yellow-glow) 0%, transparent 36%),
      radial-gradient(circle at 20% 80%, var(--yellow-glow) 0%, transparent 34%);
    opacity: .55;
    z-index: -1;
    border-radius: 50%;
    filter: blur(45px);
    -webkit-mask-image: radial-gradient(circle, #000 0%, #000 32%, transparent 62%);
            mask-image: radial-gradient(circle, #000 0%, #000 32%, transparent 62%);
    animation: story-glow-rotate 22s linear infinite;
    pointer-events: none;
  }
  @keyframes story-glow-rotate { to { transform: rotate(360deg); } }
  #story-overlay.combat .story-splash-content::before {
    background:
      radial-gradient(circle at 22% 24%, #ff4d4d80 0%, transparent 38%),
      radial-gradient(circle at 80% 20%, #ff4d4d80 0%, transparent 34%),
      radial-gradient(circle at 82% 78%, #ff4d4d80 0%, transparent 36%),
      radial-gradient(circle at 20% 80%, #ff4d4d80 0%, transparent 34%);
  }
  #story-complete-overlay.gameover .story-splash-content::before {
    background:
      radial-gradient(circle at 22% 24%, #ff333360 0%, transparent 38%),
      radial-gradient(circle at 80% 20%, #ff333360 0%, transparent 34%),
      radial-gradient(circle at 82% 78%, #ff333360 0%, transparent 36%),
      radial-gradient(circle at 20% 80%, #ff333360 0%, transparent 34%);
  }


  /* Medallón central: anillos de energía concéntricos + brillo difuso +
     sprite oficial de una Poké Ball (o similar) flotando con un ligero
     balanceo, en vez del icono emoji que se usaba antes. */
  .story-badge {
    position: relative;
    width: 128px; height: 128px;
    margin-bottom: 20px;
    display: flex; align-items: center; justify-content: center;
  }
  .story-badge-ring {
    position: absolute; inset: 0;
    border-radius: 50%;
    border: 2px solid var(--yellow-glow);
  }
  .story-badge-ring.r1 { animation: story-ring-pulse 2.6s ease-out infinite; }
  .story-badge-ring.r2 { animation: story-ring-pulse 2.6s ease-out infinite 1.3s; }
  @keyframes story-ring-pulse {
    0%   { transform: scale(.66); opacity: .9; }
    100% { transform: scale(1.5); opacity: 0; }
  }
  .story-badge-glow {
    position: absolute; inset: 12%;
    border-radius: 50%;
    background: radial-gradient(circle, var(--yellow-glow) 0%, transparent 72%);
    filter: blur(7px);
    animation: story-badge-glow-pulse 2.4s ease-in-out infinite;
  }
  @keyframes story-badge-glow-pulse {
    0%, 100% { opacity: .55; transform: scale(1); }
    50%      { opacity: 1; transform: scale(1.1); }
  }
  .story-badge-ball {
    position: relative;
    width: 80px; height: 80px;
    object-fit: contain;
    filter: drop-shadow(0 8px 16px #00000055);
    animation: story-badge-float 3s ease-in-out infinite;
  }
  @keyframes story-badge-float {
    0%, 100% { transform: translateY(0) rotate(-5deg); }
    50%      { transform: translateY(-9px) rotate(5deg); }
  }
  /* Aviso de enemigo poderoso: paleta rojiza, más tensa, sobre el mismo
     medallón (que ahora usa una Master Ball para transmitir que se trata
     de un encuentro especial y peligroso). */
  #story-overlay.combat .story-badge-ring { border-color: #ff6b6b8c; }
  #story-overlay.combat .story-badge-glow { background: radial-gradient(circle, #ff4d4d70 0%, transparent 72%); }
  /* Pantalla de Game Over: el mismo medallón, apagado y sin animación,
     con un corazón roto en vez de la Poké Ball para transmitir la derrota. */
  #story-complete-overlay.gameover .story-badge-ring { border-color: #ff333350; animation: none; opacity: .5; }
  #story-complete-overlay.gameover .story-badge-glow { background: radial-gradient(circle, #ff333340 0%, transparent 72%); animation: none; }
  #story-complete-overlay.gameover .story-badge-ball { filter: drop-shadow(0 8px 16px #00000066); animation: none; }

  .story-title {
    font-family: 'Fredoka One', cursive;
    font-size: clamp(1.7rem, 8vw, 3.1rem);
    line-height: 1.15;
    max-width: 340px;
    background: linear-gradient(120deg, var(--yellow), #ff6b00, var(--yellow), #ff9f00);
    background-size: 300% 300%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: 0 0 40px var(--yellow-glow);
    animation: splash-gradient 3.2s ease infinite, splash-float 3s ease-in-out infinite;
  }
  .story-subtitle {
    margin-top: 8px;
    font-weight: 800;
    letter-spacing: 1px;
    color: var(--text-dim);
  }
  /* En las pantallas de región/enemigo (no en la de completado) la etiqueta
     se muestra como una píldora con borde, más propia de una interfaz
     pulida que un simple texto suelto. */
  #story-overlay .story-subtitle {
    display: inline-block;
    padding: 5px 16px;
    border-radius: 999px;
    background: var(--bg-card2);
    border: 1px solid var(--border);
    font-size: .72rem;
    letter-spacing: 1.6px;
  }
  #story-overlay.combat .story-subtitle { border-color: #ff6b6b55; color: #ff8787; }
  .story-tap-row {
    display: flex; align-items: center; gap: 9px;
    margin-top: 40px;
  }
  .story-tap-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--yellow);
    animation: splash-blink 1.6s ease-in-out infinite;
  }
  .story-tap {
    font-weight: 900;
    font-size: .85rem;
    color: var(--yellow);
    animation: splash-blink 1.6s ease-in-out infinite;
  }

  /* Botón de información en la pantalla previa de región (Modo Historia):
     abre un listado con la descripción de todos los Eventos Pokémon que
     pueden aparecer durante las rondas. Se muestra en la pantalla previa
     de CUALQUIER región (Kanto, Johto...), no en el aviso de enemigo
     poderoso (.combat). Tamaño doblado (100x100, antes 50x50) para que
     destaque más como punto de entrada a la info de Eventos Pokémon. */
  .story-info-btn {
    position: absolute;
    top: 18px; right: 18px;
    z-index: 2;
    width: 100px; height: 100px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--bg-card2);
    color: var(--yellow);
    font-size: 3rem;
    line-height: 1;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease;
  }
  .story-info-btn:hover { border-color: var(--blue); transform: translateY(-1px); box-shadow: var(--shadow-md); }
  .story-info-btn:active { transform: scale(.93); }
  #story-overlay.combat .story-info-btn { display: none; }

  /* ── MODAL: información de los Eventos Pokémon ──
     Mismo patrón visual que #leave-story-confirm-overlay (fondo oscurecido
     + tarjeta central), pero con una lista desplazable, ya que el catálogo
     de eventos es largo. */
  #poke-events-info-overlay {
    position: fixed; inset: 0; z-index: 430;
    background: #0a0e1add;
    display: flex; align-items: center; justify-content: center;
    opacity: 0; pointer-events: none;
    transition: opacity .3s ease;
    backdrop-filter: blur(6px);
    padding: 20px;
  }
  body.light #poke-events-info-overlay { background: #00000066; }
  #poke-events-info-overlay.show { opacity: 1; pointer-events: all; }
  .poke-events-info-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 28px;
    padding: 24px 22px;
    max-width: 420px; width: 100%;
    max-height: min(640px, 82vh);
    display: flex; flex-direction: column;
    box-shadow: var(--shadow-lg);
    animation: pop-in 0.35s cubic-bezier(.34,1.56,.64,1);
  }
  .poke-events-info-header {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px;
  }
  .poke-events-info-close {
    width: 32px; height: 32px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--bg-card2);
    color: var(--text);
    font-weight: 900;
    cursor: pointer;
    flex-shrink: 0;
    transition: transform .15s ease, border-color .2s ease;
  }
  .poke-events-info-close:hover { border-color: var(--blue); }
  .poke-events-info-close:active { transform: scale(.9); }
  .poke-events-info-subtitle {
    font-size: .78rem;
    color: var(--text-dim);
    font-weight: 800;
    line-height: 1.45;
    margin-top: 6px;
  }
  .poke-events-info-list {
    overflow-y: auto;
    padding-right: 4px;
    margin-top: 10px;
  }
  .poke-event-info-item {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 10px 0;
    border-bottom: 1px dashed var(--border);
  }
  .poke-event-info-item:last-child { border-bottom: none; }
  .poke-event-info-icon {
    width: 40px; height: 40px;
    object-fit: contain;
    flex-shrink: 0;
    image-rendering: pixelated;
    filter: drop-shadow(0 2px 4px #0004);
  }
  .poke-event-info-text { min-width: 0; }


  /* ── SISTEMA DE EVENTOS POKÉMON (Modo Historia) ── */
  #poke-event-overlay {
    position: fixed; inset: 0; z-index: 420;
    display: flex; align-items: center; justify-content: center;
    background: #000000a0;
    backdrop-filter: blur(3px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .35s ease;
  }
  #poke-event-overlay.show { opacity: 1; pointer-events: auto; }
  .poke-event-card {
    position: relative;
    width: min(84vw, 300px);
    display: flex; flex-direction: column; align-items: center;
    text-align: center;
    background: linear-gradient(160deg, var(--bg-card2), var(--bg-card));
    border: 2px solid var(--yellow);
    border-radius: var(--radius);
    padding: 22px 18px 20px;
    box-shadow: var(--shadow-lg), 0 0 50px var(--yellow-glow);
    transform: scale(0) rotate(-8deg);
    opacity: 0;
    overflow: hidden;
  }
  #poke-event-overlay.show .poke-event-card {
    animation: poke-card-pop .55s cubic-bezier(.34,1.56,.64,1) forwards;
  }
  @keyframes poke-card-pop {
    0%   { transform: scale(0) rotate(-8deg); opacity: 0; }
    60%  { transform: scale(1.08) rotate(3deg); opacity: 1; }
    100% { transform: scale(1) rotate(0deg); opacity: 1; }
  }
  .poke-event-glow {
    position: absolute; inset: -30% -30% auto -30%; height: 60%;
    background: radial-gradient(circle, var(--yellow-glow), transparent 70%);
    pointer-events: none;
  }
  .poke-event-tag {
    font-size: .68rem;
    font-weight: 900;
    letter-spacing: .6px;
    text-transform: uppercase;
    color: var(--yellow);
    margin-bottom: 6px;
  }
  .poke-event-sprite {
    width: 96px; height: 96px;
    image-rendering: pixelated;
    filter: drop-shadow(0 6px 14px #0007);
    animation: poke-sprite-bounce 1.1s ease-in-out infinite;
    margin: 4px 0 6px;
  }
  @keyframes poke-sprite-bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
  }
  .poke-event-name {
    font-family: 'Fredoka One', cursive;
    font-size: 1.5rem;
    color: var(--text);
    text-shadow: 0 0 20px var(--yellow-glow);
  }
  .poke-event-desc {
    margin-top: 6px;
    font-size: .82rem;
    font-weight: 700;
    color: var(--text-dim);
    line-height: 1.4;
  }

  /* ── EVENTO MEW: selector de transformación ──
     Misma familia visual que la carta de aparición normal (mismo overlay
     de fondo oscurecido + blur, misma tarjeta con glow y borde dorado),
     pero más ancha para caber 3 opciones en fila (o en columna si no cabe
     en pantallas estrechas) en vez del sprite/nombre/descripción únicos
     de un evento normal. */
  #mew-choice-overlay {
    position: fixed; inset: 0; z-index: 421;
    display: flex; align-items: center; justify-content: center;
    background: #000000a0;
    backdrop-filter: blur(3px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .35s ease;
  }
  #mew-choice-overlay.show { opacity: 1; pointer-events: auto; }
  .mew-choice-card {
    position: relative;
    width: min(92vw, 420px);
    display: flex; flex-direction: column; align-items: center;
    text-align: center;
    background: linear-gradient(160deg, var(--bg-card2), var(--bg-card));
    border: 2px solid var(--yellow);
    border-radius: var(--radius);
    padding: 20px 16px 18px;
    box-shadow: var(--shadow-lg), 0 0 50px var(--yellow-glow);
    transform: scale(0) rotate(-8deg);
    opacity: 0;
    overflow: hidden;
  }
  #mew-choice-overlay.show .mew-choice-card {
    animation: poke-card-pop .55s cubic-bezier(.34,1.56,.64,1) forwards;
  }
  .mew-choice-title {
    margin-top: 4px;
    font-family: 'Fredoka One', cursive;
    font-size: 1.05rem;
    color: var(--text);
    text-shadow: 0 0 20px var(--yellow-glow);
  }
  .mew-choice-options {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 16px;
  }
  .mew-choice-option {
    flex: 1 1 100px;
    max-width: 130px;
    display: flex; flex-direction: column; align-items: center;
    gap: 6px;
    padding: 12px 8px;
    background: var(--bg-card);
    border: 2px solid var(--border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.18s ease;
  }
  .mew-choice-option:active { transform: scale(0.96); }
  .mew-choice-option:hover {
    border-color: var(--yellow);
    background: var(--bg-card2);
    transform: translateY(-2px);
    box-shadow: 0 4px 20px var(--yellow-glow);
  }
  .mew-choice-sprite {
    width: 64px; height: 64px;
    image-rendering: pixelated;
    filter: drop-shadow(0 6px 10px #0007);
  }
  .mew-choice-name {
    font-size: .78rem;
    font-weight: 800;
    color: var(--text);
    line-height: 1.25;
  }

  /* Efecto del evento Inkay: gira las opciones de respuesta 180° */
  .answers-grid.event-inkay {
    transform: rotate(180deg);
    transition: transform .5s cubic-bezier(.34,1.56,.64,1);
  }

  /* Efecto del evento Porygon: las respuestas parpadean como un error
     informático, con separación de color RGB y saltos de posición */
  .answers-grid.event-porygon .answer-btn {
    animation: porygon-btn-glitch 2.6s steps(1) infinite;
  }
  .answers-grid.event-porygon .answer-btn:nth-child(2) { animation-delay: .3s; }
  .answers-grid.event-porygon .answer-btn:nth-child(3) { animation-delay: .6s; }
  .answers-grid.event-porygon .answer-btn:nth-child(4) { animation-delay: .9s; }
  .answers-grid.event-porygon .answer-btn:nth-child(5) { animation-delay: 1.2s; }
  .answers-grid.event-porygon .answer-btn:nth-child(6) { animation-delay: 1.5s; }
  @keyframes porygon-btn-glitch {
    0%, 88%, 100% { opacity: 1;  transform: translate(0,0);      text-shadow: none; filter: none; }
    89%           { opacity: .3; transform: translate(-2px, 1px); text-shadow: -2px 0 #00e5ff, 2px 0 #ff2fd6; filter: contrast(1.6) saturate(1.8); }
    90%           { opacity: 1;  transform: translate(2px, -1px); text-shadow: 2px 0 #00e5ff, -2px 0 #ff2fd6; }
    91%           { opacity: .15;transform: translate(-1px, 0); }
    92%           { opacity: 1;  transform: translate(0,0);      text-shadow: none; filter: none; }
  }
  /* Texto momentáneamente "corrupto" (sustitución de caracteres) del evento Porygon */
  .porygon-text-glitching {
    color: #00e5ff !important;
    text-shadow: 1px 0 #ff2fd6, -1px 0 #00ff88 !important;
    letter-spacing: .5px;
  }

  /* Efecto del evento Gengar: oscurece casi por completo la pantalla durante
     la búsqueda, dejando solo un hueco circular ("linterna") que sigue al
     cursor del jugador (posición en --gengar-x/--gengar-y, actualizada por
     JS en cada mousemove) para poder localizar el sprite escondido debajo. */
  #gengar-dark-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0);
    pointer-events: none;
    z-index: 45;
    transition: background .8s ease;
  }
  #gengar-dark-overlay.show {
    background: #000;
    mask-image: radial-gradient(circle 130px at var(--gengar-x, 50%) var(--gengar-y, 50%), transparent 0%, transparent 55%, black 100%);
    -webkit-mask-image: radial-gradient(circle 130px at var(--gengar-x, 50%) var(--gengar-y, 50%), transparent 0%, transparent 55%, black 100%);
  }

  /* Sprite de Gengar escondido en un punto aleatorio de la pantalla durante
     su evento: vive por debajo de #gengar-dark-overlay (z-index menor), así
     que solo se ve a través del hueco de la "linterna" del cursor. */
  #gengar-hide-sprite {
    position: fixed;
    width: 90px; height: 90px;
    transform: translate(-50%, -50%);
    z-index: 42;
    cursor: pointer;
    filter: drop-shadow(0 0 14px #6b21a8);
    animation: gengar-hide-float 2.4s ease-in-out infinite;
  }
  @keyframes gengar-hide-float {
    0%, 100% { transform: translate(-50%, -50%) translateY(0); }
    50%      { transform: translate(-50%, -50%) translateY(-10px); }
  }

  /* Contenedor que tapa la rejilla de respuestas con un fondo sólido y
     opaco propio (no depende del oscurecimiento de #gengar-dark-overlay ni
     de su hueco de "linterna") mientras Gengar no ha sido encontrado, con
     el icono + texto pidiendo buscarlo pintados encima. Al estar en
     position:fixed anclado a <body> (con left/top/width/height puestos
     por JS a partir del getBoundingClientRect() de la rejilla) en vez de
     colgar de gridEl dentro de #app, escapa del stacking context de #app
     (que tiene su propio z-index) y su z-index sí compite con el de
     #gengar-dark-overlay: así ni el texto ni el propio fondo dependen de
     que la linterna pase por esa zona para verse, y las respuestas quedan
     tapadas de forma sólida pase lo que pase con el cursor. */
  .gengar-search-hint {
    position: fixed; z-index: 46;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 10px;
    padding: 16px;
    text-align: center;
    background: #0a0413;
    border: 2px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
  }
  .gengar-search-icon {
    font-size: 2.4rem;
  }
  .gengar-search-text {
    color: #e6d9ff;
    font-weight: 800;
    font-size: 0.82rem;
    line-height: 1.4;
    text-shadow: 0 0 8px #000, 0 0 3px #000;
  }

  /* Efecto del evento Hypno: espiral hipnótica girando sobre la pantalla.
     El elemento mide 200vmax (mucho más que la diagonal de cualquier
     pantalla) y está centrado con translate(-50%,-50%), así que al rotar
     sobre su propio centro sus bordes quedan siempre muy lejos fuera de la
     ventana y nunca se ven, sea cual sea el tamaño o la proporción de la
     pantalla. Las paradas de color intermedias (en vez de un único tono)
     dan más profundidad y un acabado más pulido a los brazos de la espiral. */
  #hypno-overlay {
    position: fixed;
    top: 50%; left: 50%;
    width: 200vmax; height: 200vmax;
    pointer-events: none;
    z-index: 44;
    opacity: 0;
    transition: opacity .8s ease;
    background: repeating-conic-gradient(from 0deg, #7c3aedb8 0deg 9deg, #a855f760 9deg 13deg, transparent 13deg 24deg);
    mix-blend-mode: screen;
    transform: translate(-50%, -50%) rotate(0deg);
  }
  #hypno-overlay.show {
    opacity: .46;
    animation: hypno-spin 4s linear infinite;
  }
  @keyframes hypno-spin {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to   { transform: translate(-50%, -50%) rotate(360deg); }
  }

  /* Viñeta focal fija (no rota con la espiral): oscurece suavemente los
     bordes de la pantalla para dar profundidad y centrar la atención en
     el péndulo, con un acabado más cinematográfico y pulido. */
  #hypno-vignette {
    position: fixed; inset: 0;
    pointer-events: none;
    z-index: 44;
    opacity: 0;
    transition: opacity .8s ease;
    background: radial-gradient(circle at 50% 46%, transparent 36%, #0d0620a0 76%, #05010fc4 100%);
  }
  #hypno-vignette.show { opacity: 1; }

  /* Efecto del evento Hypno · Ondulación líquida + Mareo visual: se aplican
     juntos sobre TODO el contenido de la app (#app), simulando que la
     pantalla entera se ha convertido en una superficie líquida:
       - filter: url(#hypno-liquid-warp) → distorsión de onda orgánica y
         continua (definida como filtro SVG más abajo, junto al resto de
         filtros ocultos) que arquea las líneas rectas del interfaz.
       - animation: hypno-warp-tilt → un balanceo 3D sutil y continuo
         (perspectiva, inclinación y escala oscilantes) que hace que los
         elementos parezcan inclinarse y la perspectiva fluctúe, sin que el
         jugador se haya movido realmente. */
  #app.hypno-warp-active {
    filter: url(#hypno-liquid-warp);
    animation: hypno-warp-tilt 5.4s ease-in-out infinite;
    transform-origin: 50% 50%;
    will-change: transform, filter;
  }
  @keyframes hypno-warp-tilt {
    0%   { transform: perspective(880px) rotateX(0deg)    rotateY(0deg)    skewX(0deg)    scale(1); }
    18%  { transform: perspective(880px) rotateX(2.6deg)  rotateY(-3.2deg) skewX(1.3deg)  scale(1.018); }
    38%  { transform: perspective(880px) rotateX(-2deg)   rotateY(2.8deg)  skewX(-1.1deg) scale(0.984); }
    58%  { transform: perspective(880px) rotateX(2.2deg)  rotateY(1.6deg)  skewX(1.5deg)  scale(1.022); }
    78%  { transform: perspective(880px) rotateX(-2.4deg) rotateY(-2.2deg) skewX(-1.4deg) scale(0.988); }
    100% { transform: perspective(880px) rotateX(0deg)    rotateY(0deg)    skewX(0deg)    scale(1); }
  }

  /* Efecto del evento Shiny: baña la interfaz en colores vivos y cambiantes */
  #shiny-color-overlay {
    position: fixed; inset: 0;
    pointer-events: none;
    z-index: 44;
    opacity: 0;
    transition: opacity .8s ease;
    background: linear-gradient(45deg, #ff2fd6, #ffe600, #00e5ff, #7cff2f, #ff5f2f, #b23fff);
    background-size: 400% 400%;
    mix-blend-mode: color;
  }
  #shiny-color-overlay.show {
    opacity: .6;
    animation: shiny-color-shift 3s ease infinite;
  }
  @keyframes shiny-color-shift {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
  }

  /* Evento Electrode: temporizador en pantalla que cuenta hasta la explosión */
  #electrode-timer {
    position: fixed; top: 134px; left: 50%; transform: translateX(-50%) scale(0);
    display: flex; align-items: center; gap: 6px;
    background: linear-gradient(135deg, #b91c1c, #ef4444);
    color: #fff;
    font-family: 'Fredoka One', cursive;
    font-size: 1.15rem;
    padding: 6px 16px;
    border-radius: 50px;
    z-index: 90;
    opacity: 0;
    transition: all 0.3s cubic-bezier(.34,1.56,.64,1);
    pointer-events: none;
    white-space: nowrap;
    box-shadow: 0 0 24px #ef444488;
  }
  #electrode-timer.show {
    opacity: 1; transform: translateX(-50%) scale(1);
    animation: electrode-pulse .6s ease-in-out infinite;
  }
  @keyframes electrode-pulse {
    0%, 100% { transform: translateX(-50%) scale(1); }
    50%      { transform: translateX(-50%) scale(1.08); }
  }

  /* Sprite de Electrode dentro del badge, sustituye al emoticono de bomba */
  #electrode-sprite {
    width: 26px;
    height: 26px;
    object-fit: contain;
    filter: brightness(1) saturate(1) drop-shadow(0 0 0 transparent);
    transform-origin: center;
    position: relative;
    z-index: 1;
  }
  /* Envoltorio del sprite: solo existe para poder colocar detrás (::before)
     el halo de luz sin afectar al Electrode que pasea de fondo en el menú
     (ese es otro elemento, construido en pokemon.js/buildBgPokemon, y no
     usa esta clase). */
  #electrode-sprite-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
  }
  /* Halo de luz alrededor del sprite: empieza inapreciable y va brillando
     cada vez más a medida que pasa el tiempo (misma duración que la carga
     del sprite, --electrode-fuse), como si Electrode fuera acumulando
     energía hasta el momento de la explosión. */
  #electrode-sprite-wrap::before {
    content: "";
    position: absolute;
    inset: -11px;
    border-radius: 50%;
    background: radial-gradient(circle, #fff 0%, #fff9 40%, transparent 72%);
    opacity: 0;
    transform: scale(.5);
    z-index: 0;
    pointer-events: none;
  }
  #electrode-timer.charging #electrode-sprite-wrap::before {
    animation: electrode-glow var(--electrode-fuse, 10s) linear forwards;
  }
  @keyframes electrode-glow {
    0%   { opacity: 0;   transform: scale(.5); }
    60%  { opacity: .35; transform: scale(.85); }
    100% { opacity: .95; transform: scale(1.5); }
  }
  /* Mientras la mecha está encendida (clase .charging), el sprite se va
     poniendo cada vez más blanco y brillante hasta el instante en el que
     explota, en sintonía con la cuenta atrás de startElectrodeTimer(). La
     duración se fija en JS vía la variable --electrode-fuse para no
     duplicar ELECTRODE_FUSE_SECONDS aquí. */
  #electrode-timer.charging #electrode-sprite {
    animation: electrode-charge var(--electrode-fuse, 10s) linear forwards;
  }
  @keyframes electrode-charge {
    0%   { filter: brightness(1) saturate(1) drop-shadow(0 0 0 transparent); }
    70%  { filter: brightness(1.7) saturate(.55) drop-shadow(0 0 5px #fff9); }
    100% { filter: brightness(3.4) saturate(0) drop-shadow(0 0 12px #fff); }
  }
  /* Destello final de la explosión (clase .exploding, ver stopElectrodeTimer
     en ui.js): el sprite, ya blanco, revienta con un flash y se agranda
     antes de que el badge entero desaparezca con su transición habitual. */
  #electrode-timer.exploding #electrode-sprite {
    animation: electrode-blast .4s ease-out forwards;
  }
  @keyframes electrode-blast {
    0%   { filter: brightness(3.4) saturate(0) drop-shadow(0 0 12px #fff); transform: scale(1); opacity: 1; }
    40%  { filter: brightness(7) saturate(0) drop-shadow(0 0 26px #fff); transform: scale(1.7); opacity: 1; }
    100% { filter: brightness(7) saturate(0) drop-shadow(0 0 26px #fff); transform: scale(2.4); opacity: 0; }
  }
  /* El halo también revienta junto al sprite en el destello final */
  #electrode-timer.exploding #electrode-sprite-wrap::before {
    animation: electrode-glow-blast .4s ease-out forwards;
  }
  @keyframes electrode-glow-blast {
    0%   { opacity: .95; transform: scale(1.5); }
    100% { opacity: 0;   transform: scale(2.6); }
  }

  /* Modo Difícil: temporizador de 10s por ronda (sustituye a la antigua pausa
     de la canción a los 3s). Se muestra bajo el estado del audio y avisa con
     un pulso rojo cuando quedan 3s o menos. */
  .hard-timer-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: 'Fredoka One', cursive;
    font-size: .95rem;
    color: #fff;
    background: linear-gradient(135deg, #b91c1c, #ef4444);
    padding: 4px 14px;
    border-radius: 50px;
    box-shadow: 0 0 16px #ef444455;
  }
  .hard-timer-badge.low {
    animation: hard-timer-pulse .5s ease-in-out infinite;
  }
  @keyframes hard-timer-pulse {
    0%, 100% { transform: scale(1);    box-shadow: 0 0 16px #ef444455; }
    50%      { transform: scale(1.12); box-shadow: 0 0 26px #ef4444cc; }
  }

  /* Curación de vida (evento Venusaur): destello verde de síntesis al restaurarse */
  .lives-wrap .heart.healed {
    animation: heart-heal .6s ease forwards;
  }
  @keyframes heart-heal {
    0%   { transform: scale(.88); filter: grayscale(1) brightness(.4); opacity: .5; }
    40%  { transform: scale(1.5); filter: brightness(1.6) drop-shadow(0 0 18px #22c55ecc); opacity: 1; }
    100% { transform: scale(1); filter: drop-shadow(0 0 6px #ff4d4d77); opacity: 1; }
  }

  /* Efecto del evento Ditto: la opción en la que estaba transformado huye y desaparece */
  .answer-btn.event-ditto-fled {
    animation: ditto-flee .5s ease forwards;
    pointer-events: none;
  }
  @keyframes ditto-flee {
    0%   { transform: scale(1) rotate(0deg); opacity: 1; }
    40%  { transform: scale(1.15) rotate(-6deg); opacity: 1; filter: brightness(1.3) saturate(1.4); }
    100% { transform: scale(.2) rotate(14deg); opacity: 0; }
  }

  /* Efecto del evento Snorlax: se duerme encima de las respuestas con un PNG
     grande y nítido (artwork oficial, no el sprite pixelado de antes); hay
     que tocarlo varias veces para despertarlo y poder responder.
     El sprite se dimensiona en % (nunca en px fijos) para adaptarse a la
     altura real disponible (que varía según haya 4 o 6 opciones de
     respuesta), y el texto va en una "píldora" semitransparente con alto
     contraste para que siempre sea legible pase lo que pase de fondo. */
  .snorlax-overlay {
    position: absolute; inset: 0; z-index: 40;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 4px;
    padding: 8px 10px;
    background:
      radial-gradient(ellipse 70% 60% at 50% 62%, #3a2c5c 0%, #1c1530 62%, #100b1e 100%);
    border: 2px solid var(--border);
    border-radius: var(--radius);
    cursor: pointer;
    user-select: none;
    box-shadow: var(--shadow-md);
    overflow: hidden;
    animation: snorlax-breathe 2.4s ease-in-out infinite;
  }
  .snorlax-overlay::before {
    /* charco de sombra difusa bajo el cuerpo de Snorlax, para que "pese" sobre las respuestas */
    content: "";
    position: absolute;
    bottom: 17%;
    width: 58%;
    height: 20px;
    background: radial-gradient(ellipse, #00000080, transparent 72%);
    border-radius: 50%;
    pointer-events: none;
  }
  .snorlax-overlay .snorlax-sprite {
    width: auto;
    height: 42%;
    min-height: 44px;
    max-height: 118px;
    max-width: 56%;
    object-fit: contain;
    flex: 0 1 auto;
    filter: drop-shadow(0 10px 20px #0009);
    pointer-events: none;
    position: relative;
    z-index: 1;
  }
  .snorlax-overlay .snorlax-zzz-wrap {
    position: absolute;
    top: 8%; right: 18%;
    width: 40px; height: 40px;
    pointer-events: none;
  }
  .snorlax-overlay .snorlax-zzz-particle {
    position: absolute;
    left: 0; top: 0;
    font-size: 1.3rem;
    opacity: 0;
    animation: snorlax-zzz-float 3.2s ease-in infinite;
    text-shadow: 0 2px 6px #000a;
  }
  .snorlax-overlay .snorlax-zzz-particle:nth-child(2) { animation-delay: 1.05s; font-size: 1.05rem; left: 14px; top: 8px; }
  .snorlax-overlay .snorlax-zzz-particle:nth-child(3) { animation-delay: 2.1s;  font-size: .85rem;  left: 24px; top: 16px; }
  @keyframes snorlax-zzz-float {
    0%   { opacity: 0; transform: translateY(0) scale(.6); }
    15%  { opacity: 1; }
    78%  { opacity: .75; }
    100% { opacity: 0; transform: translateY(-40px) scale(1.15); }
  }
  /* Píldora de texto: fondo propio semitransparente + blur, así el label y
     el hint son legibles con independencia del degradado de fondo o del
     tamaño del sprite. flex-shrink:0 asegura que nunca se recorte. */
  .snorlax-overlay .snorlax-text {
    flex: 0 0 auto;
    display: flex; flex-direction: column; align-items: center;
    gap: 3px;
    max-width: 94%;
    padding: 5px 12px 7px;
    border-radius: 999px;
    background: #00000059;
    backdrop-filter: blur(2px);
  }
  .snorlax-overlay .snorlax-label {
    font-family: 'Fredoka One', cursive;
    font-size: clamp(.78rem, 3.6vw, 1.02rem);
    line-height: 1.15;
    color: #fff;
    text-align: center;
    pointer-events: none;
    text-shadow: 0 2px 6px #000a;
  }
  .snorlax-overlay .snorlax-hint {
    font-size: clamp(.62rem, 2.8vw, .72rem);
    font-weight: 800;
    color: var(--yellow);
    text-transform: uppercase;
    letter-spacing: .4px;
    text-align: center;
    pointer-events: none;
    text-shadow: 0 1px 4px #000c;
  }
  .snorlax-overlay .snorlax-progress-track {
    width: min(70%, 150px);
    height: 5px;
    border-radius: 999px;
    background: #ffffff2e;
    overflow: hidden;
    pointer-events: none;
  }
  .snorlax-overlay .snorlax-progress-fill {
    height: 100%;
    width: 0%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--yellow), #ffb347);
    transition: width .25s ease;
  }
  @keyframes snorlax-breathe {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.015); }
  }
  .snorlax-overlay.shaken {
    animation: snorlax-shake .3s ease;
  }
  @keyframes snorlax-shake {
    0%, 100% { transform: translateX(0) scale(1); }
    25%      { transform: translateX(-6px) scale(1.01); }
    75%      { transform: translateX(6px) scale(1.01); }
  }
  .snorlax-overlay.waking {
    animation: snorlax-wake .5s ease forwards;
    pointer-events: none;
  }
  @keyframes snorlax-wake {
    0%   { transform: scale(1); opacity: 1; }
    100% { transform: scale(1.18); opacity: 0; }
  }

  /* Efecto del evento Charizard: quema dos respuestas incorrectas */
  .answer-btn.event-charizard-burned {
    position: relative;
    color: transparent;
    background: linear-gradient(180deg, #3a1a0a, #1a0a05);
    border-color: #ff5722;
    cursor: not-allowed;
    overflow: hidden;
    animation: charizard-shake .4s ease;
  }
  .answer-btn.event-charizard-burned::before {
    content: "🔥";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    animation: charizard-flicker 1s ease-in-out infinite;
  }
  .answer-btn.event-charizard-burned::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 100%, rgba(255,87,34,.55), transparent 70%);
    mix-blend-mode: screen;
  }
  @keyframes charizard-flicker {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: .7; transform: scale(1.1); }
  }
  @keyframes charizard-shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-3px); }
    75% { transform: translateX(3px); }
  }

  /* Efecto del evento Mewtwo: envuelve TODAS las respuestas (reales y las
     dos falsas que añade, insertadas en una posición aleatoria de la
     rejilla y no siempre al final) en el mismo brillo psíquico violeta,
     para que no se puedan distinguir ni por su aspecto ni por su
     posición. Solo se retocan el borde y un brillo exterior/interior con
     box-shadow (nunca el fondo ni el color del texto de .answer-btn), así
     que las respuestas se siguen leyendo igual de bien en modo claro y
     oscuro. */
  .answers-grid.event-mewtwo .answer-btn {
    border-color: #a78bfa;
    animation: mewtwo-materialize .5s ease backwards;
  }
  .answers-grid.event-mewtwo .answer-btn::after {
    content: "";
    position: absolute; inset: 0;
    border-radius: inherit;
    pointer-events: none;
    animation: mewtwo-glow 1.8s ease-in-out infinite;
  }
  .answers-grid.event-mewtwo .answer-btn:nth-child(1) { animation-delay: 0s; }
  .answers-grid.event-mewtwo .answer-btn:nth-child(2) { animation-delay: .12s; }
  .answers-grid.event-mewtwo .answer-btn:nth-child(3) { animation-delay: .24s; }
  .answers-grid.event-mewtwo .answer-btn:nth-child(4) { animation-delay: .36s; }
  .answers-grid.event-mewtwo .answer-btn:nth-child(5) { animation-delay: .48s; }
  .answers-grid.event-mewtwo .answer-btn:nth-child(6) { animation-delay: .6s; }
  @keyframes mewtwo-materialize {
    0%   { transform: scale(.4) rotate(-10deg); opacity: 0; }
    60%  { transform: scale(1.06) rotate(3deg); opacity: 1; }
    100% { transform: scale(1) rotate(0deg); opacity: 1; }
  }
  @keyframes mewtwo-glow {
    0%, 100% { box-shadow: 0 0 10px 1px #a78bfa55, 0 0 10px #a78bfa33 inset; }
    50%      { box-shadow: 0 0 20px 3px #a78bfa99, 0 0 16px #a78bfa55 inset; }
  }

  /* Efecto del evento Blastoise: Danza Lluvia — capa puramente visual de
     fondo (por detrás del contenido de la app, nunca por encima de la
     tarjeta ni de los botones) con tres capas de gotas deslizándose
     (parallax: niebla lejana muy tenue, capa media suave, capa cercana
     más marcada con un ligero brillo en cada gota), sin afectar en nada
     a la jugabilidad. La caída es rápida y cada capa tiene un bucle
     perfecto (el desplazamiento final coincide exactamente con el alto
     de su patrón, así no se nota el salto). Los huecos entre gotas son
     amplios para que se vean pocas a la vez. */
  #blastoise-rain-overlay {
    position: fixed; inset: 0;
    pointer-events: none;
    z-index: 0;
    opacity: 0;
    overflow: hidden;
    transition: opacity .6s ease;
    background: linear-gradient(180deg, #16324f4a 0%, transparent 35%, transparent 78%, #0d2036a6 100%);
  }
  #blastoise-rain-overlay.show { opacity: 1; }

  /* Nubes de tormenta: entran deslizándose desde ambos laterales, justo
     antes de que arranquen las gotas (ver retardo de .rain-drops más abajo),
     como si el cielo se cubriera un instante antes de que empiece a
     llover. Son formas irregulares (varios "bultos" radiales superpuestos
     y desenfocados) en vez de óvalos perfectos, para que se lean como
     nubes y no como manchas de color. Los colores vienen de
     --storm-cloud-* (definidas en :root/body.light) para tener el
     contraste adecuado tanto en modo oscuro como en modo claro. */
  #blastoise-rain-overlay .storm-clouds {
    position: absolute; inset: 0;
    overflow: hidden;
  }
  #blastoise-rain-overlay .storm-cloud {
    position: absolute;
    top: -8%;
    width: 60vw; height: 26vh;
    border-radius: 50%;
    filter: blur(7px);
    opacity: 0;
    background:
      radial-gradient(circle at 30% 55%, var(--storm-cloud-edge) 0%, var(--storm-cloud-mid) 30%, transparent 68%),
      radial-gradient(circle at 68% 40%, var(--storm-cloud-edge) 0%, var(--storm-cloud-mid) 26%, transparent 64%),
      radial-gradient(circle at 50% 65%, var(--storm-cloud-mid) 0%, var(--storm-cloud-core) 38%, transparent 72%);
  }
  #blastoise-rain-overlay .storm-cloud.c1 { left: 0; top: -10%; width: 62vw; height: 28vh; transform: translateX(-120%); }
  #blastoise-rain-overlay .storm-cloud.c2 { right: 0; top: -6%; width: 56vw; height: 25vh; transform: translateX(120%); }
  #blastoise-rain-overlay .storm-cloud.c3 { left: 0; top: 4%; width: 42vw; height: 19vh; transform: translateX(-120%); }
  #blastoise-rain-overlay .storm-cloud.c4 { right: 0; top: 7%; width: 40vw; height: 18vh; transform: translateX(120%); }
  #blastoise-rain-overlay.show .storm-cloud.c1 { animation: storm-cloud-enter-left 1s ease-out forwards; }
  #blastoise-rain-overlay.show .storm-cloud.c2 { animation: storm-cloud-enter-right 1s ease-out .12s forwards; }
  #blastoise-rain-overlay.show .storm-cloud.c3 { animation: storm-cloud-enter-left 1s ease-out .22s forwards; }
  #blastoise-rain-overlay.show .storm-cloud.c4 { animation: storm-cloud-enter-right 1s ease-out .3s forwards; }
  @keyframes storm-cloud-enter-left {
    0%   { transform: translateX(-120%); opacity: 0; }
    60%  { opacity: .92; }
    100% { transform: translateX(-8%); opacity: .9; }
  }
  @keyframes storm-cloud-enter-right {
    0%   { transform: translateX(120%); opacity: 0; }
    60%  { opacity: .92; }
    100% { transform: translateX(8%); opacity: .9; }
  }

  /* Las gotas (niebla/lejana/cercana) se agrupan en este contenedor para
     poder retrasar su aparición como conjunto: primero se ven llegar las
     nubes y, solo cuando ya están prácticamente asentadas, empieza a
     llover encima. */
  #blastoise-rain-overlay .rain-drops {
    position: absolute; inset: 0;
    opacity: 0;
    transition: opacity .7s ease;
  }
  #blastoise-rain-overlay.show .rain-drops {
    opacity: 1;
    transition-delay: .85s;
  }
  #blastoise-rain-overlay .rain-layer {
    position: absolute; inset: -25% -10% -25% -10%;
    background-repeat: repeat;
  }
  #blastoise-rain-overlay .rain-layer.mist {
    background-image: repeating-linear-gradient(100deg, transparent 0 34px, #cfe8ff26 34px 37px, transparent 37px 150px);
    background-size: 290px 210px;
    opacity: .22;
    filter: blur(2.5px);
  }
  #blastoise-rain-overlay.show .rain-layer.mist {
    animation: blastoise-rain-fall-mist 2.6s linear infinite;
  }
  #blastoise-rain-overlay .rain-layer.far {
    background-image: repeating-linear-gradient(101deg,
      transparent 0 16px,
      #bcdfff8c 16px 17.3px,
      #eef7ff44 17.3px 18px,
      transparent 18px 120px);
    background-size: 220px 155px;
    opacity: .3;
    filter: blur(0.7px);
  }
  #blastoise-rain-overlay.show .rain-layer.far {
    animation: blastoise-rain-fall-far 1.6s linear infinite;
  }
  #blastoise-rain-overlay .rain-layer.near {
    background-image: repeating-linear-gradient(101deg,
      transparent 0 10px,
      #d6ecffa0 10px 11.6px,
      #ffffff66 11.6px 12.4px,
      transparent 12.4px 90px);
    background-size: 170px 115px;
    opacity: .46;
  }
  #blastoise-rain-overlay.show .rain-layer.near {
    animation: blastoise-rain-fall-near 0.9s linear infinite;
  }
  /* El desplazamiento del bucle debe coincidir EXACTAMENTE con el tamaño del
     patrón (background-size) en ambos ejes para que la vuelta sea invisible.
     Antes se desplazaba también en X con un valor que no era múltiplo del
     ancho del patrón, así que al reiniciar el bucle la imagen "saltaba" de
     posición en vez de fluir; moviendo solo en Y (con el mismo alto que el
     patrón) el bucle queda perfecto y la caída se ve fluida en todo momento.
     La inclinación diagonal de las gotas ya viene dada por el ángulo del
     propio gradiente, así que no hace falta desplazar en X para conservarla. */
  @keyframes blastoise-rain-fall-mist {
    from { background-position: 0 0; }
    to   { background-position: 0 210px; }
  }
  @keyframes blastoise-rain-fall-far {
    from { background-position: 0 0; }
    to   { background-position: 0 155px; }
  }
  @keyframes blastoise-rain-fall-near {
    from { background-position: 0 0; }
    to   { background-position: 0 115px; }
  }

  /* Efecto del evento Porygon: fallo digital en toda la pantalla — scanlines,
     ruido, barras RGB de glitch y parpadeo general, simulando un error
     informático mientras dura la ronda */
  #porygon-glitch-overlay {
    position: fixed; inset: 0;
    pointer-events: none;
    z-index: 46;
    overflow: hidden;
    opacity: 0;
    transition: opacity .2s ease;
    mix-blend-mode: screen;
  }
  #porygon-glitch-overlay.show {
    opacity: 1;
    animation: porygon-screen-flicker 2.4s steps(1) infinite;
  }
  @keyframes porygon-screen-flicker {
    0%, 92%, 100% { opacity: .8; }
    93% { opacity: .15; }
    94% { opacity: 1; }
    95% { opacity: .1; }
    96% { opacity: .9; }
  }
  .porygon-scanlines {
    position: absolute; inset: 0;
    background: repeating-linear-gradient(0deg, #ffffff14 0px, #ffffff14 1px, transparent 2px, transparent 4px);
  }
  .porygon-noise {
    position: absolute; inset: -10%;
    width: 120%; height: 120%;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.35'/></svg>");
    opacity: .25;
    animation: porygon-noise-shift .2s steps(2) infinite;
  }
  @keyframes porygon-noise-shift {
    0%   { transform: translate(0,0); }
    50%  { transform: translate(-2%,1%); }
    100% { transform: translate(1%,-2%); }
  }
  .porygon-bar {
    position: absolute; left: 0; right: 0; height: 6%;
    background: linear-gradient(90deg, #00e5ffaa, #ff00aa88 50%, #00ff8899);
    opacity: 0;
  }
  .porygon-bar.b1 { top: 15%; animation: porygon-bar-glitch 3.1s steps(1) infinite; }
  .porygon-bar.b2 { top: 48%; height: 4%; animation: porygon-bar-glitch 2.5s steps(1) infinite .6s; }
  .porygon-bar.b3 { top: 74%; height: 8%; animation: porygon-bar-glitch 3.7s steps(1) infinite 1.1s; }
  @keyframes porygon-bar-glitch {
    0%, 89%, 100% { opacity: 0;  transform: translateX(0) scaleY(1); }
    90%           { opacity: .9; transform: translateX(-3%) scaleY(1.4); }
    92%           { opacity: .7; transform: translateX(4%) scaleY(.6); }
    94%           { opacity: 0;  transform: translateX(0) scaleY(1); }
  }

  /* Efecto del evento Jigglypuff: su sprite (images/jigglypuff.png, imagen en
     alta resolución de 768x774px, orientada por defecto hacia la derecha)
     aparece por encima del borde superior de la pantalla, desciende con una
     animación suave hasta una posición de reposo cerca de la parte alta, y
     desde ahí continúa bajando lenta y continuamente hasta salir por
     completo de la pantalla justo cuando termina la canción. Mientras tanto
     "camina" de un lado a otro (como si marcara el ritmo al cantar),
     deteniéndose un instante en cada extremo, y se voltea para mirar hacia
     el lado al que se mueve. La duración total (8s) se fija desde JS con
     JIGGLYPUFF_SONG_MS, para que coincida exactamente con sounds/jigglypuff.mp3. */
  #jigglypuff-sing-overlay {
    position: fixed;
    top: -220px;
    left: 50%;
    transform: translateX(-50%);
    width: 150px;
    aspect-ratio: 768 / 774;
    z-index: 92;
    pointer-events: none;
    opacity: 0;
    will-change: top, opacity;
  }
  #jigglypuff-sing-overlay.show {
    opacity: 1;
    animation: jigglypuff-descend 8s linear forwards;
  }
  /* Nivel 1 (el más externo, dentro del overlay): desplazamiento lateral de
     lado a lado, con una pausa clara en cada extremo que da la sensación de
     que se detiene a cantar una nota antes de seguir caminando. */
  .jigglypuff-walk {
    position: relative;
  }
  #jigglypuff-sing-overlay.show .jigglypuff-walk {
    animation: jigglypuff-walk 4.4s ease-in-out infinite;
  }
  @keyframes jigglypuff-walk {
    0%, 16%  { transform: translateX(-28vw); }
    50%, 66% { transform: translateX(28vw); }
    100%     { transform: translateX(-28vw); }
  }
  /* Nivel 2: solo se encarga de voltear el sprite (scaleX) para que mire
     hacia el lado al que camina. Usa steps(1) para que el cambio de lado
     sea un volteo instantáneo (como el "flip" de un personaje 2D) en vez de
     una interpolación que lo dejaría aplastado al pasar por scaleX(0). Va
     en su propio elemento, separado del desplazamiento y del balanceo, para
     que ninguna de las tres animaciones interfiera con las otras. */
  .jigglypuff-flip {
    display: block;
  }
  #jigglypuff-sing-overlay.show .jigglypuff-flip {
    animation: jigglypuff-flip 4.4s steps(1) infinite;
  }
  @keyframes jigglypuff-flip {
    0%   { transform: scaleX(-1); } /* mirando a la izquierda: acaba de llegar caminando hacia allí */
    16%  { transform: scaleX(1); }  /* empieza a caminar a la derecha → se voltea a mirar a la derecha */
    66%  { transform: scaleX(-1); } /* empieza a caminar a la izquierda → se voltea a mirar a la izquierda */
    100% { transform: scaleX(-1); }
  }
  /* Nivel 3: balanceo/rebote vertical suave en el propio sprite, para dar
     sensación de estar cantando (como llevando el compás), independiente
     del volteo y del desplazamiento lateral. */
  #jigglypuff-sing-overlay.show .jigglypuff-sprite-wrap {
    animation: jigglypuff-sing-bob 1.25s ease-in-out infinite;
  }
  .jigglypuff-sprite-wrap {
    display: block;
    filter: drop-shadow(0 12px 16px #00000055);
  }
  #jigglypuff-sing-overlay img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    /* Es una imagen de alta resolución (768x774px), no un sprite de pixel
       art: usamos un remuestreo suave (auto) en vez de "pixelated" para que
       no se vea dentada/pixelada al reescalarla a un tamaño más pequeño. */
    image-rendering: auto;
  }
  .jigglypuff-notes {
    position: absolute;
    inset: -18px -34px auto -34px;
  }
  .jigglypuff-note {
    position: absolute;
    font-size: 1.3rem;
    opacity: 0;
  }
  .jigglypuff-note.n1 { left: -8px; top: 18%; }
  .jigglypuff-note.n2 { right: -12px; top: 4%; }
  .jigglypuff-note.n3 { left: 50%; top: -16px; }
  #jigglypuff-sing-overlay.show .jigglypuff-note.n1 { animation: jigglypuff-note-float 1.7s ease-in-out infinite .15s; }
  #jigglypuff-sing-overlay.show .jigglypuff-note.n2 { animation: jigglypuff-note-float 1.7s ease-in-out infinite .65s; }
  #jigglypuff-sing-overlay.show .jigglypuff-note.n3 { animation: jigglypuff-note-float 1.7s ease-in-out infinite 1.15s; }
  /* Recorrido vertical en 3 tramos, cada uno con su propio ritmo (la
     animation-timing-function de cada keyframe define el "easing" del tramo
     que entra a él), para que el movimiento se sienta fluido y natural en
     vez de mecánico:
       1) 0% → 16%: entrada rápida con frenado suave (ease-out) hasta la
          posición de reposo cerca de la parte alta.
       2) 16% → 88%: descenso lento y constante (ease-in-out) mientras canta,
          casi imperceptible, para no distraer de las respuestas.
       3) 88% → 100%: sale de la pantalla acelerando (ease-in) y se desvanece
          justo antes de desaparecer, coincidiendo con el final de la
          canción. Se usa calc(100% + Npx) en vez de un top fijo en % para
          garantizar que quede totalmente fuera de la vista sin importar la
          altura real de la pantalla. */
  @keyframes jigglypuff-descend {
    0%   { top: -220px; opacity: 0; animation-timing-function: cubic-bezier(.22,.68,.36,1); }
    8%   { opacity: 1; }
    16%  { top: 4%;    opacity: 1; animation-timing-function: ease-in-out; }
    88%  { top: 55%;   opacity: 1; animation-timing-function: cubic-bezier(.55,0,1,.45); }
    100% { top: calc(100% + 240px); opacity: 0; }
  }
  @keyframes jigglypuff-sing-bob {
    0%, 100% { transform: translateY(0) scaleY(1); }
    50%      { transform: translateY(-6%) scaleY(1.04); }
  }
  @keyframes jigglypuff-note-float {
    0%   { opacity: 0; transform: translateY(4px) scale(.75); }
    28%  { opacity: 1; }
    72%  { opacity: 1; }
    100% { opacity: 0; transform: translateY(-28px) scale(1.05); }
  }

  /* Evento Jigglypuff · Filtro de somnolencia: mientras canta, la pantalla
     se ve como si diera sueño (borrosidad y colores apagados sutiles, más
     una viñeta cálida y oscura que respira lentamente, con unos "párpados"
     que se cierran un poco a cada respiración) y, justo antes de terminar,
     hace un parpadeo final en el que los párpados se cierran del todo (ver
     .blink-final más abajo). Se implementa como un overlay independiente y
     ligero encima de la interfaz (mismo patrón que el resto de efectos de
     eventos: porygon-glitch-overlay, hypno-vignette, blastoise-rain-overlay...),
     NUNCA aplicando `filter` directamente sobre #app ni animando su valor:
     eso fue justo lo que causaba que la interfaz parpadeara y llegara a
     desaparecer, porque recalcular un filtro complejo en cada frame sobre
     un árbol tan grande -que además contiene backdrop-filter en el
     header- provoca errores de composición en muchos navegadores. Aquí
     solo se anima opacity/transform, que es barato y no genera ese
     problema, y el leve desenfoque se consigue con backdrop-filter FIJO
     (sin animar) sobre este overlay. */
  #jigglypuff-drowsy-overlay {
    position: fixed; inset: 0;
    z-index: 93;
    pointer-events: none;
    opacity: 0;
    backdrop-filter: blur(2px) saturate(.8) brightness(.94) sepia(.06);
    -webkit-backdrop-filter: blur(2px) saturate(.8) brightness(.94) sepia(.06);
    background: radial-gradient(ellipse at 50% 50%, transparent 38%, #2a1a4a4a 78%, #140a2680 100%);
    transition: opacity .9s ease;
    overflow: hidden;
  }
  #jigglypuff-drowsy-overlay.show {
    animation: jigglypuff-drowsy-pulse 3.6s ease-in-out infinite;
  }
  @keyframes jigglypuff-drowsy-pulse {
    0%, 100% { opacity: .3; }
    50%      { opacity: .75; }
  }
  /* "Párpados" que se cierran despacio y nunca llegan a taparse del todo
     (máx. ~11% de la pantalla cada uno) durante el vaivén normal — solo un
     detalle decorativo, la interfaz sigue siendo perfectamente visible y
     usable en todo momento. La altura se controla con una variable CSS
     (--jgp-lid-h) para poder ampliarla en el parpadeo final sin duplicar
     reglas. */
  .jigglypuff-drowsy-lid {
    position: absolute;
    left: 0; right: 0;
    height: var(--jgp-lid-h, 11%);
    background: linear-gradient(to bottom, #0000, #05010f);
    transform: scaleY(0);
  }
  .jigglypuff-drowsy-lid.top { top: 0; transform-origin: top; }
  .jigglypuff-drowsy-lid.bottom {
    bottom: 0; transform-origin: bottom;
    background: linear-gradient(to top, #0000, #05010f);
  }
  #jigglypuff-drowsy-overlay.show .jigglypuff-drowsy-lid {
    animation: jigglypuff-drowsy-blink 3.6s ease-in-out infinite;
  }
  @keyframes jigglypuff-drowsy-blink {
    0%, 100% { transform: scaleY(0); }
    50%      { transform: scaleY(1); }
  }

  /* Parpadeo final: justo antes de que acabe el efecto (JS añade la clase
     .blink-final durante JIGGLYPUFF_FINAL_BLINK_MS, sincronizado para que
     termine exactamente cuando acaba la canción), los mismos párpados
     crecen hasta un 52% cada uno -se solapan un poco en el centro para no
     dejar ningún hueco- y pasan a un color sólido (sin degradado), tapando
     la pantalla por completo un instante antes de volver a abrirse. Como
     esta regla añade un ID a la especificidad, gana automáticamente sobre
     la animación de vaivén normal y sobre el color con degradado de arriba,
     sin necesidad de tocar el orden de las reglas. Justo con los párpados
     cerrados del todo (JIGGLYPUFF_BLINK_REVEAL_MS) es cuando el JS ilumina
     la respuesta correcta, así que al abrirse los ojos ya está brillando. */
  #jigglypuff-drowsy-overlay.blink-final .jigglypuff-drowsy-lid {
    --jgp-lid-h: 52%;
    background: #05010f;
    animation: jigglypuff-final-blink 1.1s ease-in-out 1 forwards;
  }
  @keyframes jigglypuff-final-blink {
    0%   { transform: scaleY(0); } /* ojos abiertos */
    30%  { transform: scaleY(1); } /* se cierran del todo */
    55%  { transform: scaleY(1); } /* permanecen cerrados un instante */
    85%  { transform: scaleY(0); } /* se abren */
    100% { transform: scaleY(0); }
  }
  /* Mientras dura el parpadeo final, el overlay padre debe alcanzar opacidad
     total justo cuando los párpados están cerrados del todo (mismos % que
     arriba), en vez de quedarse limitado al máx. .75 de jigglypuff-drowsy-pulse.
     Al listar esta animación DESPUÉS de la de vaivén sobre la misma propiedad
     (opacity), gana ella para ese rango de tiempo sin tener que tocar la
     animación de vaivén ni la especificidad. */
  #jigglypuff-drowsy-overlay.show.blink-final {
    animation: jigglypuff-drowsy-pulse 3.6s ease-in-out infinite,
               jigglypuff-final-blink-opacity 1.1s ease-in-out 1 forwards;
  }
  @keyframes jigglypuff-final-blink-opacity {
    0%   { opacity: .75; } /* ojos abiertos */
    30%  { opacity: 1;   } /* se cierran del todo: opacidad total */
    55%  { opacity: 1;   } /* permanecen cerrados un instante */
    85%  { opacity: .75; } /* se abren */
    100% { opacity: .75; }
  }

  /* Evento Jigglypuff: al terminar de cantar, la respuesta correcta brilla
     con un pulso dorado-verdoso para destacarla, sin desactivar el resto de
     opciones (el jugador sigue pudiendo responder con total normalidad). */
  .answer-btn.jigglypuff-glow {
    animation: jigglypuff-correct-glow 1s ease-in-out infinite;
    border-color: var(--green);
  }
  @keyframes jigglypuff-correct-glow {
    0%, 100% { box-shadow: var(--jgp-glow-soft); }
    50%      { box-shadow: var(--jgp-glow-strong); }
  }

  /* ── MODO HISTORIA: sistema de vidas (corazones) ── */
  .lives-wrap {
    display: none; /* solo visible en Modo Historia, activado por JS */
    align-items: center;
    gap: 3px;
    padding: 5px 10px;
    background: linear-gradient(160deg, var(--bg-card2), var(--bg-card));
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    box-shadow: inset 0 1px 0 #ffffff0d;
  }
  .lives-wrap .heart {
    font-size: 1.15rem;
    line-height: 1;
    display: inline-block;
    filter: drop-shadow(0 0 6px #ff4d4d77);
    animation: heart-idle 1.7s ease-in-out infinite;
    transition: filter .35s ease, opacity .35s ease;
    will-change: transform;
  }
  .lives-wrap .heart[data-life="2"] { animation-delay: .18s; }
  .lives-wrap .heart[data-life="3"] { animation-delay: .36s; }

  @keyframes heart-idle {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.14); }
  }

  /* corazón perdido: se oscurece y queda "apagado" */
  .lives-wrap .heart.lost {
    filter: grayscale(1) brightness(.4);
    opacity: .5;
    animation: none;
    transform: scale(.88);
  }

  /* animación de "romperse" al perder justo esta vida */
  .lives-wrap .heart.losing {
    animation: heart-break .6s ease forwards;
  }
  @keyframes heart-break {
    0%   { transform: scale(1) rotate(0deg); filter: drop-shadow(0 0 6px #ff4d4d77); }
    20%  { transform: scale(1.5) rotate(-10deg); filter: brightness(1.5) drop-shadow(0 0 16px #ff0000cc); }
    45%  { transform: scale(.65) rotate(12deg); }
    70%  { transform: scale(1.18) rotate(-6deg); filter: grayscale(.6) brightness(.7); }
    100% { transform: scale(.88) rotate(0deg); filter: grayscale(1) brightness(.4); opacity: .5; }
  }

  /* nervios: solo queda 1 corazón con vida → late más rápido y con más fuerza */
  .lives-wrap.critical .heart:not(.lost):not(.losing) {
    animation: heart-panic .55s ease-in-out infinite;
  }
  @keyframes heart-panic {
    0%, 100%  { transform: scale(1); filter: drop-shadow(0 0 6px #ff4d4d77); }
    50%       { transform: scale(1.4); filter: drop-shadow(0 0 18px #ff0000dd); }
  }

  /* pulso rojo de tensión en toda la pantalla cuando queda 1 vida */
  #nervous-overlay {
    position: fixed; inset: 0; z-index: 250;
    pointer-events: none;
    opacity: 0;
    background: radial-gradient(ellipse at center, transparent 50%, #ff000060 100%);
  }
  #nervous-overlay.show {
    animation: nervous-pulse 1.1s ease-in-out infinite;
  }
  @keyframes nervous-pulse {
    0%, 100% { opacity: .45; }
    50%      { opacity: .95; }
  }

  /* pantalla de Game Over (reutiliza #story-complete-overlay con paleta roja) */
  #story-complete-overlay.gameover {
    background: radial-gradient(circle at 50% 38%, #3a0a0a, var(--bg-dark) 72%);
  }
  #story-complete-overlay.gameover .story-title {
    background: linear-gradient(120deg, #ff6b6b, #b30000, #ff6b6b, #ff3030);
    background-size: 300% 300%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: 0 0 40px #ff000066;
  }
  #story-complete-overlay .story-subtitle {
    max-width: 300px;
  }