/* ==========================================================================
   accesibilidad.css — lo mínimo común a los 14 juegos (2026-09-25)

   1. FOCO VISIBLE CON TECLADO. Casi todos los juegos quitaban el contorno de
      foco (outline: none, 23 reglas) y solo el Crucigrama ponía otro en su
      lugar: navegando con el tabulador no se sabía dónde estabas. Con
      :focus-visible el contorno sale solo al usar el teclado, nunca al tocar
      o hacer clic, así que el aspecto de siempre no cambia.
      Especificidad 0-3-0 (:root + :is() + :focus-visible) a propósito: los
      "outline: none" de los juegos llegan a 0-2-0 (.clase:focus) y esta
      hoja va DESPUÉS de la del juego. Los campos de texto se quedan fuera:
      cada juego ya les pinta su propio estado de foco (borde, anillo).

   2. MOVIMIENTO REDUCIDO. Seis juegos no miraban prefers-reduced-motion
      (Blackjack, El Estadio, En el Once, En la Cadena, La Carrera, Tres en
      Raya). Aquí se acortan TODAS las animaciones y transiciones cuando el
      sistema lo pide; los juegos que ya tenían la suya la conservan. Los
      eventos animationend/transitionend siguen llegando (a 0,01 ms), así
      que no se queda nada esperando.

   3. .fh-sr: texto solo para lectores de pantalla (lo usa js/anuncio.js).
   ========================================================================== */

:root :is(a, button, select, summary, [role="button"], [tabindex]):focus-visible {
  outline: 2px solid var(--np-red, #b5221e);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

.fh-sr {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}