/* Bold — the house default. A saturated field, never a muted neutral: pick the
 * game's own hue for --ground; dark surfaces are deep shades of it, chrome is
 * translucent over it. (Mack, 2026-09-29: "we make bold beautiful work") */
@font-face { font-family: 'Space Grotesk'; src: url(/fonts/space-grotesk-400.woff2) format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Space Grotesk'; src: url(/fonts/space-grotesk-500.woff2) format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Space Grotesk'; src: url(/fonts/space-grotesk-700.woff2) format('woff2'); font-weight: 700; font-display: swap; }

:root {
  --ground: #3021c4; --panel: rgba(0,0,0,.22); --panel-2: rgba(0,0,0,.28);
  --ink: #fbf7ff; --ink-dim: rgba(251,247,255,.7); --rule: rgba(255,255,255,.18); --rule-soft: rgba(255,255,255,.1);
  --accent: #f5b324; --accent-ink: #1b0f6e; --good: #81b64c; --warn: #d9a13b;
  --display: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
  --ui: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --radius: 16px; --rule-w: 1.5px; --shadow-hard: 0 6px 0 rgba(0,0,0,.45);
  color-scheme: dark;
}

/* Buttons are clay pills: fat, slightly tilted, they squash when pressed. */
.btn {
  font-family: var(--display); font-weight: 700; font-size: 19px; letter-spacing: .08em; text-transform: uppercase;
  border: 0; border-radius: 999px; padding: 16px 34px; min-height: 58px; min-width: 220px;
  background: var(--accent); color: var(--accent-ink);
  box-shadow: 0 6px 0 #a06a00, 0 12px 26px rgba(0,0,0,.45);
  transform: rotate(-1.5deg); transition: transform .12s cubic-bezier(.3,1.6,.5,1), box-shadow .12s;
}
.btn:hover { transform: rotate(-1.5deg) translateY(-2px) scale(1.02); }
.btn:active { transform: rotate(0deg) translateY(5px) scaleY(.94); box-shadow: 0 1px 0 #a06a00, 0 4px 10px rgba(0,0,0,.4); }
.btn.ghost { background: rgba(0,0,0,.28); color: var(--ink); box-shadow: 0 5px 0 rgba(0,0,0,.45); transform: rotate(1deg); font-size: 15px; min-height: 48px; }
.btn.ghost:hover { transform: rotate(1deg) translateY(-2px); }
.btn.ghost:active { transform: translateY(4px) scaleY(.94); box-shadow: 0 1px 0 rgba(0,0,0,.45); }
.screen .big { font-family: var(--display); font-weight: 700; letter-spacing: .02em; }
.screen .label { letter-spacing: .22em; font-weight: 500; }
.strip { letter-spacing: .15em; font-size: 26px; }