/* ==========================================================================
   base.css — reset, tokens, app shell
   The single circle is the motif; black & white is home. Era skins layer on top.
   ========================================================================== */

:root {
  /* --- default (terminal / David's native black-on-white) --- */
  --paper: #f4f2ec;      /* off-white "paper", not pure #fff — softer, printed feel */
  --ink: #14130f;        /* near-black ink */
  --ink-soft: #4a4740;
  --ink-faint: #8a857a;
  --rule: #d8d4c8;       /* hairline rules */
  --accent: #14130f;     /* accent defaults to ink; eras override */
  --lit: #14130f;        /* HUD "lit" color; eras override */
  --glow: rgba(20,19,15,0.28);

  --font-mono: "SFMono-Regular", ui-monospace, "DejaVu Sans Mono", "Menlo",
               "Consolas", "Liberation Mono", monospace;
  --font-title: "Times New Roman", "Georgia", serif;

  --stage-max: 760px;
  --radius: 2px;

  --tick: 42ms;          /* base typing cadence unit */

  color-scheme: light dark;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: #000;      /* boot is black; cold open lives here */
  color: var(--ink);
  font-family: var(--font-mono);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overscroll-behavior: none;
}

body {
  min-height: 100dvh;
  overflow: hidden;      /* the experience is a stage, not a scroll — until storefront */
}

/* When we reach the storefront (Step 3) we re-enable scroll via [data-era="shop"]. */
body[data-era="shop"] { overflow: auto; }

#stage {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
}

/* --- controls (mute) --- */
#controls {
  position: fixed;
  top: max(10px, env(safe-area-inset-top));
  left: 12px;
  z-index: 60;
  opacity: 0;
  transition: opacity 600ms ease;
}
#controls.show { opacity: 0.55; }
#controls.show:hover { opacity: 1; }

#mute-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: transparent;
  border: 1px solid currentColor;
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 5px 9px;
  border-radius: var(--radius);
  cursor: pointer;
  opacity: 0.9;
}
#mute-btn .ctl-icon { width: 1ch; text-align: center; }
#mute-btn[aria-pressed="true"] { opacity: 0.5; }

.noscript {
  position: fixed; inset: 0; display: grid; place-items: center;
  color: var(--paper); font-family: var(--font-mono); padding: 24px; text-align: center;
}

/* dead-end URL guesses — the server answers, flatly */
.dead-end {
  position: fixed; inset: 0;
  display: grid; place-items: center;
  background: #000;
  font-family: var(--font-mono);
}
.dead-end .de-line {
  color: #f4f2ec;
  font-size: clamp(14px, 3.6vw, 18px);
  letter-spacing: 0.08em;
  text-align: center;
  padding: 0 24px;
}
.dead-end .de-home {
  position: fixed;
  bottom: max(22px, env(safe-area-inset-bottom));
  left: 50%; translate: -50% 0;
  color: #6b6a66;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-decoration: none;
}
.dead-end .de-home:hover { color: #f4f2ec; }

/* Visually hidden but available to screen readers */
.sr-only {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}