/* $BELIEVE — base reset + boot layout.
   Kept deliberately small: layers below (HUD, gate, strata UI) get their own
   stylesheets as those tasks land. This file only owns the page shell. */

/* The terminal face, vendored (optimization pass): every stylesheet asks
   for "Space Mono" first, but nothing ever shipped it -- most visitors
   silently fell back to Courier New. Two latin woff2 files (~33KB total,
   @fontsource build), font-display swap so text never blocks on them. */
@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../vendor/fonts/space-mono-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../vendor/fonts/space-mono-latin-700-normal.woff2') format('woff2');
}

/* The muted tier of the palette. Every stylesheet references it as
   var(--believe-grey, #6a6f5e); this single definition overrides those
   fallbacks everywhere. #8a907c is the darkest green-grey that still
   clears WCAG AA 4.5:1 on the lightest surface it appears on (the HUD
   panel mix, 5.12:1) -- don't darken it below that without re-running
   the contrast math. */
:root {
  --believe-grey: #8a907c;
}

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

/* js/scramble.js's a11y scaffold: while a glyph-scramble is in flight the
   FINAL text lives in this visually-hidden span (stable accessible content
   from frame one) while an aria-hidden sibling carries the glyph noise.
   Standard visually-hidden recipe -- rendered (so it stays in the a11y
   tree), but clipped to nothing. */
.sr-scramble-final {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

html, body {
  width: 100%;
  height: 100%;
  background: #050603;
  overscroll-behavior: none;
}

body {
  font-family: "Space Mono", "Courier New", monospace;
  color: #b8d62e;
  overflow: hidden;
}

#scene {
  position: fixed;
  inset: 0;
  display: block;
  width: 100vw;
  /* iOS URL-bar dance: 100vh is the LARGE viewport (bar collapsed), so the
     canvas overshoots the visible area while the bar is showing. dvh tracks
     the dynamic viewport; the vh line stays as the fallback for engines
     that don't parse dvh (they skip the unknown value). Same pair on
     #doubt-fx in fx.css. */
  height: 100vh;
  height: 100dvh;
  outline: none;
}

#gate,
#hud {
  position: fixed;
  inset: 0;
  pointer-events: none;
}

#fallback {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  text-align: center;
  background: #050603;
  color: #b8d62e;
}

#fallback[hidden] {
  display: none;
}