/* ---------- Fonts (self-hosted) ---------- */
@font-face {
  font-family: "Pixelify Sans";
  src: url("fonts/pixelify-sans-latin-wght-normal.woff2") format("woff2-variations"),
       url("fonts/pixelify-sans-latin-wght-normal.woff2") format("woff2");
  font-weight: 400 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Hanken Grotesk";
  src: url("fonts/hanken-grotesk-latin-wght-normal.woff2") format("woff2-variations"),
       url("fonts/hanken-grotesk-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}

/* ==========================================================
   Tokens. "Classic" is the default cartridge; the other
   cartridges below only override these variables.
   ========================================================== */
:root {
  --paper: #edf1fa;
  --grid: #d8dff0;
  --ink: #000000;          /* borders and outlines */
  --heading: #000000;
  --text: #1d222b;
  --text-soft: #3b4350;
  --surface: #ffffff;      /* window bodies */

  --hero-bg: #ffd43b;
  --hero-heading: #000000;
  --hero-text: #000000;
  --hero-shadow: #ffffff;

  --bar-white: #ffffff;
  --bar-sun: #ffd43b;
  --bar-sky: #74c0fc;
  --bar-mint: #63e6be;
  --bar-purple: #b197fc;
  --bar-pink: #ffa8c5;
  --bar-text: #000000;
  --bar-dark: #000000;
  --bar-dark-text: #ffffff;
  --dot-bg: #ffffff;

  --btn-bg: #ffffff;
  --btn-text: #000000;
  --btn-dark-bg: #000000;
  --btn-dark-text: #ffffff;
  --btn-dark-shadow: #b197fc;

  --chip-bg: #edf1fa;
  --highlight: #ffd43b;
  --highlight-text: #000000;

  --border-w: 3px;
  --shadow: 6px 6px 0 var(--ink);
  --shadow-sm: 4px 4px 0 var(--ink);
  --shadow-hover: 6px 6px 0 var(--ink);
  --shadow-pressed: 0 0 0 var(--ink);
  --lift: translate(-2px, -2px);
  --press: translate(4px, 4px);

  /* map illustration and game */
  --land: #e9f5db;
  --parcel: #d3ebbd;
  --road: #ffffff;
  --river: #1c7ed6;
  --zone: rgba(28, 126, 214, 0.2);
  --building: #868e96;
  --flag: #f03e3e;
  --flag-text: #ffffff;
  --hit: #2f9e44;
  --range-track: #ffffff;
  --range-thumb: #ffd43b;

  --pixel: "Pixelify Sans", "Courier New", monospace;
  --sans: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --wide: 74rem;
  --gutter: 1.5rem;
  --gap: 1.5rem;
}

/* ---------- Cartridge: Game Boy (four greens) ---------- */
:root[data-theme="gameboy"] {
  --paper: #8bac0f;
  --grid: rgba(15, 56, 15, 0.12);
  --ink: #0f380f;
  --heading: #0f380f;
  --text: #0f380f;
  --text-soft: #306230;
  --surface: #9bbc0f;

  --hero-bg: #306230;
  --hero-heading: #9bbc0f;
  --hero-text: #9bbc0f;
  --hero-shadow: #0f380f;

  --bar-white: #8bac0f;
  --bar-sun: #8bac0f;
  --bar-sky: #8bac0f;
  --bar-mint: #8bac0f;
  --bar-purple: #8bac0f;
  --bar-pink: #8bac0f;
  --bar-text: #0f380f;
  --bar-dark: #0f380f;
  --bar-dark-text: #9bbc0f;
  --dot-bg: #9bbc0f;

  --btn-bg: #9bbc0f;
  --btn-text: #0f380f;
  --btn-dark-bg: #0f380f;
  --btn-dark-text: #9bbc0f;
  --btn-dark-shadow: #8bac0f;

  --chip-bg: #8bac0f;
  --highlight: #306230;
  --highlight-text: #9bbc0f;

  --land: #9bbc0f;
  --parcel: #8bac0f;
  --road: #8bac0f;
  --river: #306230;
  --zone: rgba(48, 98, 48, 0.28);
  --building: #8bac0f;
  --flag: #0f380f;
  --flag-text: #9bbc0f;
  --hit: #306230;
  --range-track: #9bbc0f;
  --range-thumb: #8bac0f;
}

/* ---------- Cartridge: Amber terminal ---------- */
:root[data-theme="amber"] {
  --paper: #140d00;
  --grid: rgba(255, 176, 0, 0.07);
  --ink: #ffb000;
  --heading: #ffb000;
  --text: #ffb000;
  --text-soft: #d19200;
  --surface: #1c1300;

  --hero-bg: #ffb000;
  --hero-heading: #140d00;
  --hero-text: #140d00;
  --hero-shadow: #8a5d00;

  --bar-white: #ffb000;
  --bar-sun: #ffb000;
  --bar-sky: #ffb000;
  --bar-mint: #ffb000;
  --bar-purple: #ffb000;
  --bar-pink: #ffb000;
  --bar-text: #140d00;
  --bar-dark: #3d2a00;
  --bar-dark-text: #ffb000;
  --dot-bg: #140d00;

  --btn-bg: #1c1300;
  --btn-text: #ffb000;
  --btn-dark-bg: #140d00;
  --btn-dark-text: #ffb000;
  --btn-dark-shadow: #8a5d00;

  --chip-bg: #140d00;
  --highlight: #ffb000;
  --highlight-text: #140d00;

  --land: #1c1300;
  --parcel: #2a1c00;
  --road: #3d2a00;
  --river: #ffb000;
  --zone: rgba(255, 176, 0, 0.16);
  --building: #7a5200;
  --flag: #fff1c1;
  --flag-text: #140d00;
  --hit: #ffb000;
  --range-track: #140d00;
  --range-thumb: #ffb000;
}
:root[data-theme="amber"] h1,
:root[data-theme="amber"] h2,
:root[data-theme="amber"] h3,
:root[data-theme="amber"] .contact-email { text-shadow: 0 0 10px rgba(255, 176, 0, 0.45); }
:root[data-theme="amber"] .win-hero h1 { text-shadow: 0.05em 0.05em 0 var(--hero-shadow); }
:root[data-theme="amber"] body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 50;
  background: repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0.22) 0 1px, transparent 1px 3px);
}

/* ---------- Cartridge: Windows 95 ---------- */
:root[data-theme="win95"] {
  --paper: #008080;
  --grid: transparent;
  --ink: #000000;
  --heading: #000000;
  --text: #000000;
  --text-soft: #303030;
  --surface: #c0c0c0;

  --hero-bg: #c0c0c0;
  --hero-heading: #000080;
  --hero-text: #000000;
  --hero-shadow: #ffffff;

  --bar-white: #000080;
  --bar-sun: #000080;
  --bar-sky: #000080;
  --bar-mint: #000080;
  --bar-purple: #000080;
  --bar-pink: #000080;
  --bar-text: #ffffff;
  --bar-dark: #000080;
  --bar-dark-text: #ffffff;
  --dot-bg: #c0c0c0;

  --btn-bg: #c0c0c0;
  --btn-text: #000000;
  --btn-dark-bg: #c0c0c0;
  --btn-dark-text: #000000;
  --btn-dark-shadow: #000000;

  --chip-bg: #ffffff;
  --highlight: #000080;
  --highlight-text: #ffffff;

  --border-w: 2px;
  --shadow: inset -2px -2px 0 #808080, inset 2px 2px 0 #ffffff;
  --shadow-sm: inset -2px -2px 0 #808080, inset 2px 2px 0 #ffffff;
  --shadow-hover: inset -2px -2px 0 #808080, inset 2px 2px 0 #ffffff;
  --shadow-pressed: inset 2px 2px 0 #808080, inset -2px -2px 0 #ffffff;
  --lift: none;
  --press: translate(1px, 1px);

  --range-track: #ffffff;
  --range-thumb: #c0c0c0;
}
:root[data-theme="win95"] .win-bar { margin: 3px 3px 0; border-bottom: 0; }
:root[data-theme="win95"] .win-dots i { box-shadow: inset -1px -1px 0 #808080, inset 1px 1px 0 #ffffff; border-width: 1px; }
:root[data-theme="win95"] .btn-dark { outline: 1px solid #000; outline-offset: -5px; }

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  color: var(--text);
  background-color: var(--paper);
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 24px 24px;
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--pixel);
  font-weight: 600;
  color: var(--heading);
  margin: 0;
  line-height: 1.15;
}

p, ul, dl, figure { margin: 0; }
a { color: inherit; }
button { font: inherit; color: inherit; }

:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
}

.wrap {
  width: 100%;
  max-width: var(--wide);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0.75rem;
  background: var(--ink);
  color: var(--paper);
  padding: 0.5rem 0.75rem;
  z-index: 60;
}
.skip:focus { left: 0.75rem; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------- Header ---------- */
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
}
.wordmark {
  font-family: var(--pixel);
  font-weight: 700;
  font-size: 1.25rem;
  text-decoration: none;
  color: var(--heading);
  white-space: nowrap;
}
.site-header ul {
  display: flex;
  align-items: center;
  gap: 1rem;
  list-style: none;
  padding: 0;
  margin: 0;
  font-family: var(--mono);
  font-size: 0.875rem;
}
.site-header nav a { text-decoration: none; color: var(--heading); }
.site-header nav a:not(.nav-button):hover { text-decoration: underline; text-underline-offset: 0.25em; }
.nav-optional { margin-right: 0.25rem; }

.nav-button {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--btn-bg);
  color: var(--btn-text) !important;
  border: 2px solid var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
  padding: 0.3rem 0.7rem;
  font-family: var(--mono);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.4;
  cursor: pointer;
}
:root[data-theme="win95"] .nav-button { box-shadow: var(--shadow-sm); }

.speaker { width: 16px; height: 16px; fill: currentColor; }
.speaker .wave { opacity: 0.2; }
.sound-toggle[aria-pressed="true"] .speaker .wave { opacity: 1; }
.sound-toggle[aria-pressed="true"] { background: var(--highlight); color: var(--highlight-text) !important; }

/* ---------- Buttons ---------- */
.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 1.75rem;
}
.btn {
  display: inline-block;
  background: var(--btn-bg);
  color: var(--btn-text);
  border: var(--border-w) solid var(--ink);
  box-shadow: var(--shadow-sm);
  padding: 0.7rem 1.1rem;
  font-family: var(--mono);
  font-weight: 500;
  font-size: 0.9375rem;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
}
.btn-dark {
  background: var(--btn-dark-bg);
  color: var(--btn-dark-text);
  box-shadow: 4px 4px 0 var(--btn-dark-shadow);
}
:root[data-theme="win95"] .btn-dark { box-shadow: var(--shadow-sm); font-weight: 600; }
.btn:hover, .nav-button:hover { transform: var(--lift); box-shadow: var(--shadow-hover); }
.btn-dark:hover { box-shadow: 6px 6px 0 var(--btn-dark-shadow); }
:root[data-theme="win95"] .btn-dark:hover { box-shadow: var(--shadow-hover); }
.btn:active, .nav-button:active { transform: var(--press); box-shadow: var(--shadow-pressed); }
@media (prefers-reduced-motion: no-preference) {
  .btn, .nav-button, .cart, .demo-tab { transition: transform 80ms ease, box-shadow 80ms ease; }
}

/* ---------- Board of windows ---------- */
.board {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--gap);
  padding-top: 0.75rem;
  padding-bottom: 3rem;
}
.span-4  { grid-column: span 4; }
.span-5  { grid-column: span 5; }
.span-6  { grid-column: span 6; }
.span-7  { grid-column: span 7; }
.span-8  { grid-column: span 8; }
.span-12 { grid-column: span 12; }

.win {
  background: var(--surface);
  border: var(--border-w) solid var(--ink);
  box-shadow: var(--shadow);
  min-width: 0;
}
.win-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.5rem 0.9rem;
  border-bottom: var(--border-w) solid var(--ink);
  color: var(--bar-text);
}
.win-bar h2 { font-size: 1.25rem; color: inherit; text-shadow: none !important; }
.win-dots { display: flex; gap: 6px; flex-shrink: 0; }
.win-dots i {
  width: 14px; height: 14px;
  border: 2px solid var(--ink);
  background: var(--dot-bg);
}
.bar-white  { background: var(--bar-white); }
.bar-sun    { background: var(--bar-sun); }
.bar-sky    { background: var(--bar-sky); }
.bar-mint   { background: var(--bar-mint); }
.bar-purple { background: var(--bar-purple); }
.bar-pink   { background: var(--bar-pink); }
.bar-dark   { background: var(--bar-dark); color: var(--bar-dark-text); }
.bar-dark .win-dots i { background: var(--bar-dark-text); border-color: var(--bar-dark-text); }
:root[data-theme="win95"] .bar-dark .win-dots i { background: var(--dot-bg); border-color: #000; }

.win-body { padding: 1.5rem; }
.win-body > * + * { margin-top: 0.9rem; }

h3 { font-size: 1.3125rem; }
.meta, .date {
  font-family: var(--mono);
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--text-soft);
}
.meta { margin-top: 0.3rem; }
.win-body a:not(.btn) {
  text-decoration-line: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.2em;
}
.win-body a:not(.btn):hover { background: var(--highlight); color: var(--highlight-text); }

/* Hero */
.win-hero { background: var(--hero-bg); display: flex; }
.win-hero .win-body {
  padding: clamp(1.5rem, 4vw, 3rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.win-hero h1 {
  color: var(--hero-heading);
  font-size: clamp(2.75rem, 7.5vw, 5.75rem);
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: -0.01em;
  text-shadow: 0.05em 0.05em 0 var(--hero-shadow);
}
.lede {
  max-width: 36em;
  font-size: clamp(1.0625rem, 1.8vw, 1.1875rem);
  line-height: 1.55;
  color: var(--hero-text);
}
.win-hero .lede { margin-top: 1.5rem; }

/* Status */
.status > div {
  padding-block: 0.7rem;
  border-top: 2px dashed var(--ink);
}
.status > div:first-child { border-top: 0; padding-top: 0; }
.status dt {
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--text-soft);
}
.status dd {
  margin: 0.1rem 0 0;
  font-weight: 600;
  color: var(--heading);
}

/* Cartridge switcher */
.cartridges {
  margin-top: 1.25rem !important;
  padding-top: 1rem;
  border-top: var(--border-w) solid var(--ink);
}
.cart-title {
  font-family: var(--pixel);
  font-weight: 600;
  font-size: 1rem;
  color: var(--heading);
}
.cart-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.6rem;
  margin-top: 0.7rem;
}
.cart {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.35rem;
  padding: 0.55rem 0.4rem 0.45rem;
  background: var(--btn-bg);
  color: var(--btn-text);
  border: 2px solid var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
  cursor: pointer;
  /* cartridge notch */
  clip-path: polygon(0 0, 70% 0, 70% 5px, 100% 5px, 100% 100%, 0 100%);
}
:root[data-theme="win95"] .cart { box-shadow: var(--shadow-sm); }
.cart:hover { transform: var(--lift); }
.cart[aria-pressed="true"] {
  transform: translateY(3px);
  box-shadow: 0 0 0 var(--ink);
  background: var(--highlight);
  color: var(--highlight-text);
}
:root[data-theme="win95"] .cart[aria-pressed="true"] { box-shadow: var(--shadow-pressed); }
.cart-label {
  display: block;
  height: 22px;
  border: 2px solid var(--ink);
}
.cl-classic { background: linear-gradient(90deg, #ffd43b 0 25%, #74c0fc 25% 50%, #63e6be 50% 75%, #b197fc 75%); }
.cl-gameboy { background: linear-gradient(90deg, #0f380f 0 25%, #306230 25% 50%, #8bac0f 50% 75%, #9bbc0f 75%); }
.cl-amber   { background: repeating-linear-gradient(to bottom, #ffb000 0 2px, #140d00 2px 5px); }
.cl-win95   { background: linear-gradient(to bottom, #000080 0 35%, #c0c0c0 35% 70%, #008080 70%); }
.cart-name {
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 500;
  line-height: 1.2;
  text-align: center;
}

/* Now */
.now-body {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 1rem 2rem;
  align-items: start;
}
.now-body > * + * { margin-top: 0; }
.now-body h3 { font-size: 1.625rem; }
.now-text > * + * { margin-top: 0.75rem; }

/* RAVEN */
.raven {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 1.5rem 2.25rem;
  align-items: start;
}
.raven > * + * { margin-top: 0; }
.raven-text > * + * { margin-top: 0.9rem; }
.feature-title { font-size: 2.25rem; }
.raven-text .meta { margin-top: 0.3rem; }
.points { padding-left: 1.1rem; }
.points li + li { margin-top: 0.4rem; }
.points li::marker { content: "■  "; font-size: 0.7em; }

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  padding: 0;
}
.chips li {
  font-family: var(--mono);
  font-size: 0.8125rem;
  line-height: 1.2;
  padding: 0.3rem 0.55rem;
  border: 2px solid var(--ink);
  background: var(--chip-bg);
}

/* ---------- Map: explore mode + game ---------- */
.buffer-demo { container-type: inline-size; }

.demo-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}
.demo-tab {
  background: var(--btn-bg);
  color: var(--btn-text);
  border: 2px solid var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
  padding: 0.4rem 0.7rem;
  font-family: var(--mono);
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
}
:root[data-theme="win95"] .demo-tab { box-shadow: var(--shadow-sm); }
.demo-tab:hover { transform: var(--lift); }
.demo-tab[aria-pressed="true"] {
  background: var(--highlight);
  color: var(--highlight-text);
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 var(--ink);
}
:root[data-theme="win95"] .demo-tab[aria-pressed="true"] { box-shadow: var(--shadow-pressed); }

.map-frame { position: relative; }
.buffer-demo svg {
  display: block;
  width: 100%;
  height: auto;
  border: var(--border-w) solid var(--ink);
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}
.buffer-demo .land { fill: var(--land); }
.buffer-demo .parcels path { fill: var(--parcel); stroke: var(--land); stroke-width: 4; }
.buffer-demo .road { fill: none; stroke: var(--road); stroke-width: 7; stroke-linecap: square; }
.buffer-demo .zone { fill: none; stroke: var(--zone); stroke-linecap: round; stroke-linejoin: round; }
.buffer-demo .river { fill: none; stroke: var(--river); stroke-width: 10; stroke-linecap: round; stroke-linejoin: round; }
.buffer-demo .structures rect {
  fill: var(--building);
  stroke: var(--ink);
  stroke-width: 1.5;
}
:root[data-theme="amber"] .buffer-demo .structures rect,
:root[data-theme="amber"] .g-body { stroke: #ffb000; }
.buffer-demo .structures rect.is-flagged { fill: var(--flag); stroke-width: 2.5; }

.is-playing .structures { display: none; }

/* game buildings */
.g-bld { cursor: crosshair; outline: none; }
.g-hit { fill: transparent; }
.g-body { fill: var(--building); stroke: var(--ink); stroke-width: 2.5; }
.g-pop { transform-box: fill-box; transform-origin: center; }
.g-bld:focus-visible .g-body { stroke-width: 4; stroke-dasharray: 3 2; }
.g-bld.is-hit .g-body { fill: var(--hit); }
.g-bld.is-wrong .g-body { fill: var(--flag); }
.g-bld.is-missed .g-body { fill: var(--flag); opacity: 0.45; }
.g-bld.is-gone { opacity: 0; }
.g-mark { fill: none; stroke: var(--surface); stroke-width: 3; stroke-linecap: square; display: none; }
.g-bld.is-hit .g-mark-hit, .g-bld.is-wrong .g-mark-wrong { display: inline; }
:root[data-theme="gameboy"] .g-bld.is-hit .g-body { fill: var(--surface); }
:root[data-theme="gameboy"] .g-bld.is-hit .g-mark { stroke: var(--ink); }
:root[data-theme="amber"] .g-bld.is-hit .g-body { fill: #ffb000; }
:root[data-theme="amber"] .g-mark { stroke: #140d00; }

@media (prefers-reduced-motion: no-preference) {
  .g-pop { animation: g-pop 160ms steps(4, end); }
  .g-bld.is-wrong .g-pop { animation: g-shake 240ms steps(6, end); }
  .g-bld.is-gone, .g-bld.is-missed { transition: opacity 200ms steps(3, end); }
  .g-bld.is-ending .g-pop { animation: g-blink 600ms steps(2, end) infinite; }
}
@keyframes g-pop { from { transform: scale(0.2); } to { transform: scale(1); } }
@keyframes g-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}
@keyframes g-blink { 50% { opacity: 0.35; } }

/* overlay card on top of the map */
.game-overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 0.75rem;
  background: color-mix(in srgb, var(--surface) 55%, transparent);
}
.game-overlay[hidden] { display: none; }
.game-card {
  max-width: 26rem;
  background: var(--surface);
  border: var(--border-w) solid var(--ink);
  box-shadow: var(--shadow-sm);
  padding: 0.95rem 1.15rem;
}
.game-card > * + * { margin-top: 0.55rem; }
.game-card h4 { font-size: 1.375rem; }
.game-card p { font-size: 0.875rem; line-height: 1.5; }
.game-card .btn { margin-top: 0.8rem; }
.card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}
.big-score {
  font-family: var(--pixel);
  font-weight: 700;
  font-size: 1.75rem !important;
  line-height: 1 !important;
  color: var(--heading);
  white-space: nowrap;
}
.game-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
}
.game-stats div {
  border: 2px solid var(--ink);
  background: var(--chip-bg);
  padding: 0.35rem 0.55rem;
}
.game-stats dt { font-family: var(--mono); font-size: 0.6875rem; color: var(--text-soft); }
.game-stats dd { margin: 0; font-family: var(--pixel); font-weight: 600; font-size: 1.25rem; color: var(--heading); }
.best-note { font-family: var(--mono); font-size: 0.8125rem !important; color: var(--text-soft); }

/* narrow map: the card sits under the map instead of on it */
@container (max-width: 460px) {
  .game-overlay {
    position: static;
    background: none;
    padding: 0;
    margin-top: 0.9rem;
    place-items: stretch;
  }
  .game-card { max-width: none; }
}

/* explore controls */
.demo-controls {
  display: grid;
  grid-template-columns: auto minmax(8rem, 1fr);
  align-items: center;
  gap: 0.6rem 1.25rem;
  margin-top: 1rem;
  font-family: var(--mono);
  font-size: 0.875rem;
}
.demo-controls[hidden], .game-panel[hidden] { display: none; }
.demo-controls label { font-weight: 500; white-space: nowrap; color: var(--heading); }
.demo-controls output { margin-left: 0.35rem; font-variant-numeric: tabular-nums; }
.demo-count { grid-column: 1 / -1; color: var(--text-soft); }
.demo-count strong, .game-hud dd.is-bad {
  display: inline-block;
  min-width: 2ch;
  text-align: center;
  background: var(--flag);
  color: var(--flag-text);
  border: 2px solid var(--ink);
  padding: 0 0.3rem;
  margin-right: 0.15rem;
}
.demo-help {
  grid-column: 1 / -1;
  font-family: var(--sans);
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--text-soft);
}

/* game HUD */
.game-panel { margin-top: 1rem; }
.game-panel > * + * { margin-top: 0.7rem; }
.game-hud {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.5rem;
}
.game-hud > div {
  border: 2px solid var(--ink);
  background: var(--chip-bg);
  padding: 0.3rem 0.5rem;
}
.game-hud dt { font-family: var(--mono); font-size: 0.6875rem; color: var(--text-soft); white-space: nowrap; }
.game-hud dd {
  margin: 0;
  font-family: var(--pixel);
  font-weight: 600;
  font-size: 1.375rem;
  line-height: 1.2;
  color: var(--heading);
  font-variant-numeric: tabular-nums;
}
.game-hud dd.is-low { color: var(--flag); }
:root[data-theme="gameboy"] .game-hud dd.is-low,
:root[data-theme="amber"] .game-hud dd.is-low { text-decoration: underline; }

/* chunky range slider */
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 26px;
  background: transparent;
  margin: 0;
  cursor: pointer;
}
input[type="range"]::-webkit-slider-runnable-track {
  height: 12px;
  background: var(--range-track);
  border: 2px solid var(--ink);
}
input[type="range"]::-moz-range-track {
  height: 8px;
  background: var(--range-track);
  border: 2px solid var(--ink);
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 22px; height: 22px;
  margin-top: -7px;
  background: var(--range-thumb);
  border: 3px solid var(--ink);
  border-radius: 0;
}
input[type="range"]::-moz-range-thumb {
  width: 16px; height: 16px;
  background: var(--range-thumb);
  border: 3px solid var(--ink);
  border-radius: 0;
}

.buffer-demo figcaption {
  margin-top: 0.75rem;
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--text-soft);
}

/* ---------- Dated entries ---------- */
.entry + .entry {
  margin-top: 1.4rem;
  padding-top: 1.4rem;
  border-top: 2px dashed var(--ink);
}
.entry > * + * { margin-top: 0.5rem; }
.entry .date { margin-top: 0; }
.entry h3 { margin-top: 0.2rem; }
.entry .meta { margin-top: 0.25rem; }
.entry .chips { margin-top: 0.8rem; }

/* Skills */
.skills > div + div { margin-top: 1rem; }
.skills dt {
  font-family: var(--mono);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--heading);
}
.skills dd { margin: 0.35rem 0 0; color: var(--text-soft); }

/* Recognition */
.plain-list { list-style: none; padding: 0; }
.plain-list li { color: var(--text-soft); }
.plain-list li + li { margin-top: 1rem; }
.plain-list strong { display: block; color: var(--heading); font-weight: 700; }

/* Contact */
.contact-email {
  font-family: var(--pixel);
  font-weight: 600;
  font-size: clamp(1.5rem, 3.6vw, 2.25rem);
  line-height: 1.15;
  overflow-wrap: anywhere;
  color: var(--heading);
}
.contact-email a { text-decoration: none !important; }

/* Footer */
.site-footer {
  padding-bottom: 2.5rem;
  font-family: var(--mono);
  font-size: 0.8125rem;
  color: var(--text-soft);
}
:root[data-theme="win95"] .site-footer { color: #ffffff; }

/* ---------- Narrow screens ---------- */
@media (max-width: 64rem) {
  .raven { grid-template-columns: minmax(0, 1fr); }
  .span-4, .span-8 { grid-column: span 6; }
  .win-hero { grid-column: span 12; }
  .win-hero + .win { grid-column: span 12; }
}

@media (max-width: 48rem) {
  .board > .win { grid-column: 1 / -1; }
  .now-body { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 36rem) {
  :root {
    --gutter: 1rem;
    --gap: 1.25rem;
    --shadow: 4px 4px 0 var(--ink);
  }
  :root[data-theme="win95"] { --shadow: inset -2px -2px 0 #808080, inset 2px 2px 0 #ffffff; }
  .nav-optional { display: none; }
  .sound-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .win-body { padding: 1.1rem; }
  .feature-title { font-size: 1.875rem; }
  .demo-controls { grid-template-columns: minmax(0, 1fr); }
  .btn { flex: 1 1 auto; text-align: center; }
  .game-hud { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cart-row { gap: 0.45rem; }
}