/* =========================================================
   VT323 — servida desde el propio dominio, no desde Google Fonts.
   El archivo es la fuente oficial sin tocar (VT323 v2.000, SIL OFL, 584 glifos);
   solo se ha cambiado el envoltorio TTF -> WOFF2 con tools/ttf_to_woff2.py.
   La licencia viaja al lado, en assets/fonts/OFL.txt, como exige la OFL.

   `font-display: block` y no `swap`: con swap el texto se pinta primero con la
   fuente de reserva y luego SALTA a VT323, que es justo el parpadeo que no
   queremos. Con block se espera unos milisegundos —la fuente pesa 30 KB, va
   precargada y viene del mismo origen— y se pinta ya bien.

   Sin `unicode-range` a propósito: la fuente cubre todo lo que usa la web
   (incluidos €, — y …), y declarar un rango estrecho solo podría dejar fuera
   algún carácter y romperlo.
   ========================================================= */
@font-face {
  font-family: 'VT323';
  src: url('../assets/fonts/VT323-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: block;
}

/* =========================================================
   BASE — tokens, reset, typography
   1rem = 10 design px of the 1672x941 reference (see core/scale.js)
   ========================================================= */
:root {
  --teal: #008080;
  --face: #c0c0c0;
  --face-light: #dfdfdf;
  --white: #ffffff;
  --shadow: #808080;
  --dark: #0a0a0a;
  --navy: #000080;
  --title-a: #000a7d;
  --title-b: #1b4aa0;
  --title-off-a: #808080;
  --title-off-b: #b4b4b4;
  --b: 2px; /* bevel line thickness, set by scale.js */

  --ui-font: Tahoma, "MS Sans Serif", "Microsoft Sans Serif", Geneva, Verdana, "DejaVu Sans", sans-serif;
  --shop-font: "VT323", "Lucida Console", "Courier New", monospace;

  /* Classic 2-ring bevels */
  --sh-raised:
    inset calc(var(--b) * -1) calc(var(--b) * -1) var(--dark),
    inset var(--b) var(--b) var(--white),
    inset calc(var(--b) * -2) calc(var(--b) * -2) var(--shadow),
    inset calc(var(--b) * 2) calc(var(--b) * 2) var(--face-light);
  --sh-window:
    inset calc(var(--b) * -1) calc(var(--b) * -1) var(--dark),
    inset var(--b) var(--b) var(--face-light),
    inset calc(var(--b) * -2) calc(var(--b) * -2) var(--shadow),
    inset calc(var(--b) * 2) calc(var(--b) * 2) var(--white);
  --sh-pressed:
    inset calc(var(--b) * -1) calc(var(--b) * -1) var(--white),
    inset var(--b) var(--b) var(--dark),
    inset calc(var(--b) * -2) calc(var(--b) * -2) var(--face-light),
    inset calc(var(--b) * 2) calc(var(--b) * 2) var(--shadow);
  --sh-field:
    inset calc(var(--b) * -1) calc(var(--b) * -1) var(--white),
    inset var(--b) var(--b) var(--shadow),
    inset calc(var(--b) * -2) calc(var(--b) * -2) var(--face-light),
    inset calc(var(--b) * 2) calc(var(--b) * 2) var(--dark);
  --sh-thin-in: inset -1px -1px var(--white), inset 1px 1px var(--shadow);
  --sh-thin-out: inset -1px -1px var(--shadow), inset 1px 1px var(--white);
  --checker: repeating-conic-gradient(var(--face) 0% 25%, var(--white) 0% 50%) 0 0 / 2px 2px;
}

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

html, body { height: 100%; overflow: hidden; }

body {
  background: var(--teal);
  color: #000;
  font-family: var(--ui-font);
  font-size: 1.6rem;
  line-height: 1.2;
  -webkit-font-smoothing: none;
  user-select: none;
  cursor: default;
}

button { font: inherit; color: inherit; cursor: default; }
img, svg { display: block; }
[hidden] { display: none !important; }

.ico { flex: none; }
body.is-dragging, body.is-dragging * { cursor: inherit !important; }

/* ---------- MOBILE (ver el bloque equivalente en window.css) ---------- */

/* Sin el destello azul del navegador sobre un chrome de Windows 98, y sin el
   retardo de 300 ms que el doble toque impone a cada pulsación de un control.
   El zoom de la página sigue disponible: solo deja de aplicarse a los botones. */
[data-mobile] .os { -webkit-tap-highlight-color: transparent; }
[data-mobile] button,
[data-mobile] .desktop-icon,
[data-mobile] .lb-item,
[data-mobile] .start-menu__item { touch-action: manipulation; }