/* =============================================================================
   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;
  /* El morado aclarado, para TEXTO pequeño sobre la noche. El `--violet` de
     arriba es de trazos y fondos: a 9 px en negativo se lee mal, y el sistema
     de niveles lo necesita en cinco sitios (candados, nivel, subidas). */
  --violet-soft: #c3a4ff;
  --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;
}

/* =============================================================================
   LOS CURSORES
   =============================================================================
   IMÁGENES, NO ELEMENTOS. Los dibuja el sistema operativo: van a la velocidad
   del ratón y no cuestan un solo fotograma. Antes el de la partida eran nueve
   elementos con sus animaciones —un punto, un aro que respiraba y seis motas de
   polvo girando— y encima de una partida a sesenta fotogramas, con paneles con
   desenfoque por medio, cada movimiento del ratón obligaba a recomponer media
   pantalla: el cursor iba a rastras y se llevaba por delante justo lo que estaba
   adornando.

   VIVEN AQUÍ, en las variables, porque los usan dos hojas que no se hablan: la
   del menú y la de la partida. Y son distintos a propósito — en el menú se
   apunta a botones y en la casa se apunta al mundo.

   POR QUÉ SE VEN SOBRE CUALQUIER FONDO: todos llevan un filo oscuro pegado al
   trazo de color. El verde limo de la marca sobre el suelo del cuartel —que es
   oliva— casi no se ve, y un cursor que desaparece en media pantalla no es un
   cursor.

   EL TAMAÑO ES 32×32 Y NO MÁS: por encima de ahí hay sistemas que se plantan y
   devuelven la flecha de siempre.
============================================================================= */

:root {
  /* EL DE LA CASA: donde converge tu linterna. Un punto duro, un aro fino y
     cuatro marcas fuera — se lee como una mira sin serlo del todo, que es lo que
     es: no disparas, alumbras. */
  --cursor-mira:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cg fill='none' stroke='rgba(4,3,10,.62)' stroke-width='3.4' stroke-linecap='round'%3E%3Ccircle cx='16' cy='16' r='9'/%3E%3Cpath d='M16 2.5v4M16 25.5v4M2.5 16h4M25.5 16h4'/%3E%3C/g%3E%3Cg fill='none' stroke='%23a8f425' stroke-width='1.5' stroke-linecap='round'%3E%3Ccircle cx='16' cy='16' r='9' opacity='.8'/%3E%3Cpath d='M16 3v3.4M16 25.6V29M3 16h3.4M25.6 16H29'/%3E%3C/g%3E%3Ccircle cx='16' cy='16' r='2.1' fill='%23a8f425' stroke='rgba(4,3,10,.85)' stroke-width='1'/%3E%3C/svg%3E") 16 16, crosshair;

  /* EL DEL MENÚ: un aro y un punto, sin marcas. Aquí no se apunta a nada, se
     señala. */
  --cursor-punto:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26'%3E%3Ccircle cx='13' cy='13' r='8.5' fill='none' stroke='rgba(0,0,0,.5)' stroke-width='3.4'/%3E%3Ccircle cx='13' cy='13' r='8.5' fill='none' stroke='rgba(255,255,255,.9)' stroke-width='1.4'/%3E%3Ccircle cx='13' cy='13' r='2.6' fill='%23a8f425' stroke='rgba(0,0,0,.45)' stroke-width='1'/%3E%3C/svg%3E") 13 13, default;

  /* Y ENCIMA DE ALGO QUE SE PULSA el aro se abre y se enciende. Es el mismo
     gesto que hacía el cursor animado, ahora sin costar nada. */
  --cursor-pulsable:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Ccircle cx='16' cy='16' r='11' fill='none' stroke='rgba(0,0,0,.5)' stroke-width='3.6'/%3E%3Ccircle cx='16' cy='16' r='11' fill='none' stroke='%23a8f425' stroke-width='1.7'/%3E%3Ccircle cx='16' cy='16' r='2.8' fill='%23ffffff'/%3E%3C/svg%3E") 16 16, pointer;
}