/* Skin «phosphor» — decoración propia: lo que hace que parezca un osciloscopio. Los colores y tipografías están en tokens.css y
   la estructura en assets/css/base.css; aquí solo van los efectos que otro skin no tendría. */
@layer skin {
  /* pantalla CRT: scanlines + viñeta (efecto de pantalla, no UI). Posición y «no recibe toques»: base.css y guard.css */
  #crt {
    mix-blend-mode: multiply;
    background:
      radial-gradient(ellipse at center, transparent 58%, rgba(0, 0, 0, .7) 100%),
      repeating-linear-gradient(0deg, rgba(0, 0, 0, .2) 0 1px, transparent 1px 3px);
  }

  /* arranque de cada pantalla: sube el brillo y se enfoca */
  .screen, .langgate { animation: boot .35s steps(7) both; }
  @keyframes boot { from { opacity: 0; filter: brightness(3) blur(3px); } to { opacity: 1; filter: none; } }

  /* el logo se «descuadra» de vez en cuando, con separación RGB */
  .logo { animation: glitch 6s infinite; }
  @keyframes glitch {
    0%, 91%, 100% { translate: 0 0; filter: none; }
    92% { translate: -5px 0; filter: drop-shadow(4px 0 #ff2e63) drop-shadow(-4px 0 #00e5ff); }
    94% { translate: 6px 0; filter: drop-shadow(-4px 0 #ff2e63) drop-shadow(4px 0 #00e5ff); }
    96% { translate: -2px 0; filter: drop-shadow(2px 0 #ff2e63); }
  }

  /* modo ligero (lo activa el juego solo si el dispositivo va justo, ver assets/js/lite.js): sin brillos desenfocados ni filtros animados.
     Los brillos (text-shadow / box-shadow con desenfoque) viven en base.css porque son la identidad de este skin; esta regla, en la capa del
     skin, gana a todas sin pelear con la especificidad. */
  html[data-lite] *, html[data-lite] *::before, html[data-lite] *::after { text-shadow: none; box-shadow: none; }
  html[data-lite] .screen, html[data-lite] .langgate, html[data-lite] .logo { animation: none; filter: none; }
}