/* ═══════════════════════════════════════════════════════════
   Tokens. Palette, type, spacing.

   Day and night change the SKY and the ambient light. They do not swap
   --ink and --cream. The previous site flipped a muted token with the theme
   while the surface it sat on did not, and the house ad fell to 2.04:1.
   Surfaces that invert carry an explicit colour; nothing infers one.
   ═══════════════════════════════════════════════════════════ */

:root {
  /* ── materials ── */
  --sky-hi:#4A90E2;  --sky-lo:#8FD3F4;
  --grass:#4FA64F;   --grass-lit:#6FD66F;
  --dirt:#7B5230;    --dirt-dk:#5A3A20;
  --stone:#4A4652;
  --deep:#2A2630;

  /* ── ink and paper: fixed in both themes ── */
  --ink:#141019;
  --cream:#FFF6E5;

  /* ── accents ── */
  --gold:#FFC700;
  --torch:#FF8C1A;
  --ore-cyan:#5BC8D8;
  --ore-mag:#E8A0FF;

  /* ── the cat ── */
  --cat:#FF8A3D;
  --cat-ear:#FF9EC4;

  /* ── muted text, one per ground. Never swapped by theme. ── */
  --muted-on-cream:#57534A;
  --label-on-cream:#5E5868;   /* 6.4:1 on --cream; the pixel labels live here */
  --muted-on-ink:#B9B2A4;

  /* Text sitting DIRECTLY on the sky. Safe to flip with the theme precisely
     because the sky flips with it too — unlike the old site's bug, where a
     muted token followed the theme while its surface did not. Text on a
     cream PANEL uses --ink in both themes and is not this. */
  --on-sky:var(--ink);
  --muted-on-sky:#1E2630;   /* 4.6:1 on --sky-hi; a warm grey cannot reach AA there */

  /* Underground, the material is the backdrop but never the ground text is
     read against — dirt and stone are mid-tones, and no muted colour reaches
     AA on a mid-tone. Each underground world darkens its own material. */
  --cave-dirt:#241A12;
  --cave-deep:#1C1510;
  --cave-stone:#1E1C24;

  /* ── ambient: what day/night actually changes ── */
  --ambient:rgba(255,255,255,0);
  --torch-glow:.55;
  --sky-shade:rgba(0,0,0,0);

  /* ── form ── */
  --bw:3px;
  --shadow:6px 6px 0 var(--ink);
  --shadow-sm:3px 3px 0 var(--ink);
  --radius:0;

  /* ── type ── */
  --f-pixel:'Press Start 2P', ui-monospace, monospace;
  --f-display:'Archivo Black', 'Arial Black', Impact, sans-serif;
  --f-body:'Space Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Pixel type never sets a sentence. These are the only sizes it gets. */
  --t-pixel-xs:6px;
  --t-pixel-sm:7px;
  --t-pixel-md:9px;

  --t-body:clamp(15px, 0.95rem + 0.2vw, 17px);
  --t-lead:clamp(16px, 1rem + 0.4vw, 19px);
  --t-h3:clamp(19px, 1.1rem + 0.9vw, 26px);
  --t-h2:clamp(26px, 1.4rem + 2.1vw, 44px);
  --t-name:clamp(23px, 1.3rem + 2.4vw, 46px);

  /* ── spacing ── */
  --gut:clamp(14px, 3.2vw, 30px);
  --page:1180px;
  --snap:cubic-bezier(.2,.9,.25,1);
}

:root[data-theme="night"] {
  --sky-hi:#0E1A2E;  --sky-lo:#243B55;
  --grass:#2E6B33;   --grass-lit:#3F8A44;
  --dirt:#4A3220;    --dirt-dk:#32220F;
  --stone:#2E2B36;
  --deep:#15121C;

  --ambient:rgba(10,8,16,.42);
  --torch-glow:1;
  --sky-shade:rgba(8,6,14,.3);

  --on-sky:var(--cream);
  --muted-on-sky:var(--muted-on-ink);
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 72px;
  overflow-x: hidden;
}

body {
  margin: 0;
  overflow-x: hidden;
  background: var(--deep);
  color: var(--cream);
  font: 400 var(--t-body)/1.62 var(--f-body);
  font-synthesis-weight: none;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
h1, h2, h3, h4 { margin: 0; line-height: 1.08; font-weight: 400; }
p { margin: 0 0 .8em; }
ul, ol, dl { margin: 0; padding: 0; list-style: none; }

::selection { background: var(--gold); color: var(--ink); }
:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 2px;
  box-shadow: 0 0 0 6px var(--gold);
}
/* on dark ground the ink ring disappears, so invert the pair */
.world:not(.world--surface) :focus-visible,
.hud :focus-visible {
  outline-color: var(--cream);
  box-shadow: 0 0 0 6px var(--ink);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* Visible only to a screen reader. */
.ch { display: inline-block; will-change: transform; }

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

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 300;
  background: var(--gold); color: var(--ink);
  padding: 12px 18px; border: var(--bw) solid var(--ink);
  font: 700 13px/1 var(--f-body); letter-spacing: .06em;
}
.skip:focus { left: 8px; top: 8px; }