/* ==========================================================================
   BASE — reset, fuentes, foco, grano (fase T / T0)

   Todo lo que es de documento y no de componente. Nada de esto existía:
   el proyecto no tenía reset, no cargaba fuentes, no tenía un solo estado
   de foco y no respetaba `prefers-reduced-motion`.
   ========================================================================== */

/* --- Fuentes ---------------------------------------------------------------
   Auto-hospedadas a propósito: linkear a Google Fonts sería la primera
   dependencia de red del proyecto, y `build.js` es explícito sobre no sumar
   la primera dependencia. Subset latin (cubre á é í ó ú ñ ü ¿ ¡).
   `font-display: swap` para que el texto se lea desde el primer frame. */

@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fuentes/inter-var-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Barlow Condensed";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fuentes/barlow-condensed-600-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Barlow Condensed";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fuentes/barlow-condensed-700-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --- Reset ---------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font-ui);
  font-size: var(--fs-3);
  line-height: var(--lh);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* --- El fondo (fase T0b) --------------------------------------------
     T0 dejaba un color plano: la mitad de la sensación de "transmisión" se
     pierde ahí. Cuatro capas, de adelante para atrás — no un pseudo-elemento
     con z-index (eso obliga a pelear el orden de pintado contra `.panel`);
     el propio `background` de un elemento SIEMPRE pinta detrás de sus
     hijos, así que esto queda atrás de todo sin trucos.
       1. viñeta: transparente en el centro-arriba, opaca en los bordes —
          el escenario queda en el punto de luz, y de paso apaga la malla
          antes de que llegue al borde (el mismo efecto que un mask radial).
       2. horizonte: un halo apenas visible detrás de donde va la topbar.
       3-4. malla: líneas cada 64px al 8% — la retícula de un gráfico de
          transmisión, no un fondo de pantalla a cuadros.
     `background-attachment: fixed` para que no se mueva con el scroll: es
     el marco de la aplicación, no un elemento más de la página. */
  background:
    radial-gradient(110% 75% at 50% -6%, transparent 0%, transparent 32%, var(--bg-void) 68%),
    radial-gradient(80% 36% at 50% 0%, var(--horizon), transparent 72%),
    radial-gradient(50% 30% at 100% 100%, var(--horizon), transparent 70%),
    repeating-linear-gradient(0deg, var(--line-faint) 0 1px, transparent 1px 40px),
    repeating-linear-gradient(90deg, var(--line-faint) 0 1px, transparent 1px 40px),
    var(--bg-void);
  background-attachment: fixed;
}

/* Encuadre del monitor: 4 L de 32px en el viewport. Se lee a un metro. */
body::before {
  content: "";
  position: fixed;
  inset: calc(var(--topbar-alto) + 8px) 12px 40px 12px;
  z-index: 9998;
  pointer-events: none;
  background-image:
    linear-gradient(var(--ice), var(--ice)),
    linear-gradient(var(--ice), var(--ice)),
    linear-gradient(var(--ice), var(--ice)),
    linear-gradient(var(--ice), var(--ice)),
    linear-gradient(var(--ice), var(--ice)),
    linear-gradient(var(--ice), var(--ice)),
    linear-gradient(var(--ice), var(--ice)),
    linear-gradient(var(--ice), var(--ice));
  background-size:
    32px 3px, 3px 32px,
    32px 3px, 3px 32px,
    32px 3px, 3px 32px,
    32px 3px, 3px 32px;
  background-position:
    left top, left top,
    right top, right top,
    left bottom, left bottom,
    right bottom, right bottom;
  background-repeat: no-repeat;
  opacity: 0.85;
}

h1, h2, h3, h4, p, figure { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

img, svg, canvas { display: block; max-width: 100%; }

button, input, select, textarea {
  font: inherit;
  color: inherit;
  margin: 0;
}

button { background: none; border: none; padding: 0; cursor: pointer; }

/* Todo número del juego va en cifras tabulares. Sin esto, un contador que
   sube tiembla porque el 1 es más angosto que el 8. */
.num, .tabular { font-variant-numeric: tabular-nums; }

/* --- El grano -------------------------------------------------------------
   Un SVG de ruido inline, fijo, al 3,5%. Cuesta una regla y es la mitad de
   la diferencia entre "una página oscura" y "una transmisión". No intercepta
   el mouse y no se imprime. */

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* --- Foco -----------------------------------------------------------------
   Antes de la fase T no había ni un `:focus-visible`: el juego no se podía
   jugar con teclado. El anillo va en --live porque el foco ES "lo activo". */

:focus-visible {
  outline: 2px solid var(--live);
  outline-offset: 2px;
  border-radius: var(--r-sharp);
}
:focus:not(:focus-visible) { outline: none; }

/* Un salto al contenido para el teclado, escondido hasta que se lo enfoca. */
.saltar-al-contenido {
  position: absolute;
  left: -9999px;
  top: var(--s-2);
  z-index: 10000;
  padding: var(--s-2) var(--s-4);
  background: var(--bg-raised);
  border: 1px solid var(--live);
  border-radius: var(--r);
}
.saltar-al-contenido:focus { left: var(--s-2); }

/* --- Barras de scroll ------------------------------------------------------ */

* { scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: var(--line-strong);
  border-radius: var(--r-pill);
  border: 3px solid transparent;
  background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background-clip: content-box; background-color: var(--ink-mute); }

/* --- Utilidades ------------------------------------------------------------ */

/* Visible para un lector de pantalla, invisible en la pantalla. Lo usa el
   `aria-live` del feed: el log narrativo se anuncia sin duplicarse en pantalla. */
.solo-lectores {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

[hidden] { display: none !important; }

/* --- Motion reducido -------------------------------------------------------
   No es un extra de accesibilidad: la fase T mete conteo de números, entrada
   de tarjetas y el reproductor por beats de T3. Sin este interruptor, para
   alguien con sensibilidad vestibular el juego pasa de aburrido a inusable.
   El reproductor además lee esta preferencia en JS y salta a `instantáneo`. */

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