/* =============================================================================
   POLTERBYTE · sistema de diseño
   Referencia: la maqueta que pasó el usuario. Negro casi puro, verde ácido de
   neón para la marca y la acción, morado para el ambiente, y tipografía de píxel
   GRANDE para todo lo que es rótulo.

   Regla de tipografía: Pixelify Sans manda en titulares, menú y botones, siempre
   a tamaño generoso — la letra de píxel pequeña no se lee. Rubik se queda para
   las frases explicativas, que necesitan leerse de corrido.
============================================================================= */

:root {
  /* --- La noche --- */
  --bg: #07060c;
  --bg-2: #0c0a16;
  --bg-3: #130f22;

  /* --- Neón --- */
  --lime: #a8f425;          /* la marca y la acción */
  --lime-soft: #c9ff6b;
  --lime-deep: #6aa310;
  --violet: #9d6bff;
  --violet-deep: #5b2fb8;
  --cyan: #35e0f0;
  --pink: #ff5fc8;
  --danger: #ff5566;
  --amber: #ffc447;

  /* --- Tinta --- */
  --ink: #f4f2ff;
  --ink-dim: #a79fc8;
  --ink-faint: #6e678c;

  /* --- Trazos y superficies --- */
  --line: rgba(157, 107, 255, 0.3);
  --line-lit: rgba(168, 244, 37, 0.55);
  --glass: rgba(12, 9, 24, 0.72);
  --glass-2: rgba(18, 13, 34, 0.86);

  /* --- Escala tipográfica. Todo un punto más grande que antes: el encargo era
         justamente que se leyera mejor. --- */
  --t-nano: 12px;
  --t-micro: 13px;
  --t-small: 15px;
  --t-body: 17px;
  --t-lead: 20px;
  --t-head: 34px;

  --gap: 12px;
  --r: 12px;
  --r-sm: 8px;

  /* Jersey 25: pixel ancha y de trazo grueso, con las aberturas abiertas. Es la
     de la referencia. Pixelify Sans se descartó: cierra tanto la C que
     «OSCURAS» se leía «OSOURAS». */
  --face-pixel: 'Jersey 25', 'Silkscreen', ui-monospace, monospace;

  /* La web de fuera usa otras dos. Spectral SC es una serif de VERSALITAS: a 60
     u 80 píxeles se lee de lejos y no se desmigaja como la de píxel, que era
     justo la queja. Caveat es manuscrita y solo sale en lo que "contesta" la
     spirit box, para que parezca escrito a mano en el cuaderno. */
  --face-titular: 'Spectral SC', 'Georgia', serif;

  /* LA GORDA REDONDEADA. Es la del claim del encabezado y la de los remates: la
     serif de versalitas queda solemne, y esto no es un juego solemne — es un
     juego de pasarlo mal y reírse. Tiene las mismas formas que el logo, así que
     puestas una encima de otra parecen de la misma casa. */
  --face-gorda: 'Baloo 2', 'Rubik', system-ui, sans-serif;
  --face-mano: 'Caveat', 'Segoe Script', cursive;
  --face-ui: 'Rubik', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --face-game: 'Silkscreen', ui-monospace, monospace; /* solo dentro del lienzo */

  --ease-pop: cubic-bezier(0.2, 0.9, 0.3, 1.2);
  --ease-out: cubic-bezier(0.2, 0.8, 0.3, 1);

  --nav-h: 152px;
}

@font-face { font-family: 'Jersey 25'; src: url('../assets/ui/jersey25.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Rubik'; src: url('../assets/ui/rubik-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Rubik'; src: url('../assets/ui/rubik-500.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Rubik'; src: url('../assets/ui/rubik-700.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Silkscreen'; src: url('../assets/ui/silkscreen-regular.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Spectral SC'; src: url('../assets/ui/spectralsc-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Spectral SC'; src: url('../assets/ui/spectralsc-600.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Caveat'; src: url('../assets/ui/caveat-500.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Baloo 2'; src: url('../assets/ui/baloo2-800.woff2') format('woff2'); font-weight: 800; font-display: swap; }
@font-face { font-family: 'Silkscreen'; src: url('../assets/ui/silkscreen-bold.woff2') format('woff2'); font-weight: 700; font-display: swap; }

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

html, body {
  margin: 0;
  min-height: 100%;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--face-ui);
  font-size: var(--t-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
}
body { overflow-x: hidden; }

/* Píxel gordo solo donde toca: el arte del juego y los lienzos. */
.pixelated,
.scene-art img,
.ghost-sprite,
#game-canvas canvas,
.shot canvas { image-rendering: pixelated; }

::selection { background: var(--lime); color: #0a1400; }

:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; border-radius: 4px; }

* { scrollbar-width: thin; scrollbar-color: rgba(157, 107, 255, 0.5) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: rgba(157, 107, 255, 0.45); border-radius: 99px; }
*::-webkit-scrollbar-track { background: transparent; }

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

/* =============================================================================
   LA MARCA
   =============================================================================
   POLTERBYTE: el fantasma y las letras, en assets/art/logo.png. Está aquí y no
   en la hoja de la portada porque sale en cuatro sitios que no se parecen en
   nada: la web, el panel del cazador, el de administración y la cortinilla.

   SE MIDE POR EL ALTO, nunca por el ancho: lo que hay que casar es con la barra
   o con la fila donde vive, y la lámina es tres veces más ancha que alta.
============================================================================= */
.marca {
  display: block;
  width: auto;
  height: 40px;
  user-select: none;
  -webkit-user-drag: none;
}