/* ───────────────────────────────────────────────────────────────────── base.css — STRUCTURE, theme-agnostic. Layout, typography, components and animation, all painted through design TOKENS (CSS custom properties). The token VALUES live in the theme files (theme-manuscript.css / theme-pixel.css) and are selected by . Add a theme = add a token set. Runtime-only vars (--wound, --depth) are set live by the controller. ───────────────────────────────────────────────────────────────────────── */ :root { --wound: 0; } * { box-sizing: border-box; } body { margin: 0; background: radial-gradient(120% 80% at 50% -10%, #1a1410 0%, var(--bg) 60%); color: var(--ink); font: 16px/1.5 var(--font-body); min-height: 100vh; } /* ── Ambient layers (persist across screen swaps; never capture clicks) ── */ .ambient { position: fixed; inset: 0; pointer-events: none; } .ambient.torch { z-index: 0; background: radial-gradient(120% 85% at 50% -12%, rgba(86, 60, 30, 0.5) 0%, rgba(20, 15, 11, 0) 55%); animation: flicker 6s ease-in-out infinite; } .ambient.blood { z-index: 5; background: radial-gradient(120% 100% at 50% 50%, transparent 46%, rgba(94, 20, 20, 0.3) 78%, var(--blood-edge) 100%); opacity: var(--wound); transition: opacity 700ms ease; } /* Difficulty as felt depth: a cold rises from below as the tier climbs, cooling the warm torch. Sits behind the content, like the torch. */ .ambient.deep { z-index: 1; background: radial-gradient(130% 110% at 50% 118%, rgba(30, 44, 64, 0.55) 0%, rgba(20, 28, 40, 0) 56%); opacity: var(--depth, 0); transition: opacity 900ms ease; } /* The combat room scene: a foe backdrop behind the manuscript panel. Sits lowest (behind torch/deep/app), cooled by the same --depth as the world, with a vignette scrim that keeps text legible around the leaf and sinks the corners into the dark. Toggled on only during combat by the controller. Opacity is NOT transitioned: the fade-in always sits behind the opaque enter-room reveal (so it'd never be seen), while a fade-OUT on leaving combat would race the next panel's screen-in entrance — two overlapping transitions reading as a "double" load. Snapping it leaves one clean entrance. The filter still eases (the boss phase-2 colour shift). */ .ambient.room { z-index: 0; background-size: cover; background-position: center; background-repeat: no-repeat; opacity: 0; transition: filter 600ms ease; filter: saturate(calc(1 - var(--depth, 0) * 0.5)) brightness(calc(0.92 - var(--depth, 0) * 0.18)); } .ambient.room.on { opacity: 0.9; } .ambient.room.cold { filter: saturate(0.32) brightness(0.74) hue-rotate(8deg); } /* boss phase 2 */ .ambient.room::after { content: ""; position: absolute; inset: 0; background: radial-gradient(125% 108% at 50% 30%, rgba(8,8,11,0) 24%, rgba(7,8,12,0.5) 70%, rgba(4,5,8,0.92) 100%), linear-gradient(rgba(8,9,12,0.34), rgba(8,9,12,0.5)); } /* The keep's MAIN backdrop: the descent stair, shown behind the non-combat screens (creation, gates, run-end). Sits LOWEST of all (behind the foe room scene, torch and deep), so when combat begins the foe's `.ambient.room` fades in over it. Cover-positioned and dimmed by its own ::after scrim so the manuscript panel and text stay legible; cooled by the same `--depth` as the world. Toggled on by the controller on every non-combat screen (applyKeepBackdrop). Opacity is NOT transitioned for the same reason the room isn't — it always sits behind an opaque screen-in entrance. */ .ambient.keep { z-index: -1; background-size: cover; background-position: center; background-repeat: no-repeat; opacity: 0; filter: saturate(calc(1 - var(--depth, 0) * 0.5)) brightness(calc(0.9 - var(--depth, 0) * 0.18)); } .ambient.keep.on { opacity: 0.7; } .ambient.keep::after { content: ""; position: absolute; inset: 0; background: radial-gradient(125% 110% at 50% 28%, rgba(8,8,11,0) 18%, rgba(7,8,12,0.55) 68%, rgba(4,5,8,0.94) 100%), linear-gradient(rgba(8,9,12,0.42), rgba(8,9,12,0.58)); } /* The boss bleeds the room even at full health; near death it beats. */ body.boss-fight .ambient.blood { opacity: calc(0.14 + var(--wound) * 0.86); } /* Low on health: the wound vignette PULSES red like a racing heart — a stronger, faster double-thump than the resting bleed, so the danger reads at a glance (paired with the ember surge driven from the controller). */ body.critical .ambient.blood { animation: heartbeat 1.15s ease-in-out infinite; } /* The ember field: fire sparks streaming up the whole screen. The canvas is painted by the controller; this just places it above the scene and keeps it from ever catching a click (inherited from .ambient). */ .ambient.sparks { z-index: 6; width: 100%; height: 100%; } /* The keep's masonry is a procedural