/* ABYSS corridor layer (FIX-1 item 1). Loaded with the page but inert until
   engine/abyss.js gets a live WebGL context and adds html.abyss-on — so the
   no-JS, reduced-motion and no-WebGL page stays byte-identical to the
   pre-corridor build (the designed fallback rung). */

#abyss {
  position: fixed; inset: 0; z-index: -1;
  width: 100%; height: 100%;
  display: block; pointer-events: none;
}

/* Live depth readout for the corridor. Empty in the markup; text is set by
   engine/abyss.js only. */
#abyssHud {
  position: fixed; left: clamp(14px, 2vw, 28px); bottom: 12px; z-index: 55;
  pointer-events: none;
  font-family: var(--sc-font-mono, ui-monospace, monospace);
  font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  font-variant-numeric: tabular-nums; white-space: nowrap;
  color: var(--sc-ink-soft);
}
@media (max-width: 760px) { #abyssHud { font-size: 9px; bottom: 9px; } }

/* The swap that lets the canvas show: the page ground moves from body to html,
   and body goes transparent so the fixed canvas behind it is visible. Same
   solid --sc-canvas either way, so body-text contrast is unchanged. */
html.abyss-on { background: var(--sc-canvas); }
html.abyss-on body { background: transparent; }