/* Base page + layer stack + loading screen. Piece-specific UI styles live with each piece
   (loaded via core/dom.js loadCSS) so pieces never edit this file. */
@font-face { font-family: 'Luckiest Guy'; src: url(../assets/fonts/LuckiestGuy.woff2) format('woff2'); font-display: block; }
@font-face { font-family: 'Creepster'; src: url(../assets/fonts/Creepster.woff2) format('woff2'); font-display: block; }
@font-face { font-family: 'Fredoka'; src: url(../assets/fonts/Fredoka.woff2) format('woff2'); font-weight: 300 700; font-display: block; }

:root {
  --ink: #1b1426; --paper: #fff7e6; --accent: #ffc933; --danger: #ff5d4d; --ok: #43c26b; --night: #120d1b;
  --display: 'Luckiest Guy', 'Arial Black', system-ui, sans-serif;
  --body: 'Fredoka', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color-scheme: dark;
  /* device safe-area insets, read by core/layout.js (zones are published back as --<zone>-x/y/w/h on #ui) */
  --sat: env(safe-area-inset-top, 0px); --sar: env(safe-area-inset-right, 0px); --sab: env(safe-area-inset-bottom, 0px); --sal: env(safe-area-inset-left, 0px);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--night); color: var(--paper); font-family: var(--body); overflow: hidden; overscroll-behavior: none; }
body { -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; touch-action: none; }
#app { position: fixed; inset: 0; }
#view { position: absolute; inset: 0; width: 100%; height: 100%; display: block; outline: none; }
#ui { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.layer { position: absolute; inset: 0; }
.layer > * { pointer-events: auto; }
#layer-world > * { pointer-events: none; }
#layer-fade { pointer-events: none; }
#layer-fade > * { pointer-events: none; }
#layer-fade .fade { position: absolute; inset: 0; opacity: 0; background: #000; }
#layer-fade .letterbox { position: absolute; left: 0; right: 0; height: 11vh; background: #000; transform: scaleY(0); }
#layer-fade .letterbox.top { top: 0; transform-origin: top; }
#layer-fade .letterbox.bottom { bottom: 0; transform-origin: bottom; }

/* loading screen */
#loading { position: absolute; inset: 0; display: grid; place-items: center; background: radial-gradient(ellipse at 50% 40%, #2a1d44 0%, var(--night) 70%); transition: opacity .4s ease; z-index: 10; }
#loading.done { opacity: 0; pointer-events: none; }
#loading .card { display: grid; gap: 18px; justify-items: center; padding: 16px; width: min(560px, 92vw); }
#loading h1 { margin: 0; font-family: var(--display); font-weight: 400; font-size: clamp(44px, 9vw, 96px); line-height: .95; letter-spacing: 2px; text-align: center; color: var(--paper); text-shadow: 0 5px 0 var(--ink), 0 9px 18px rgba(0,0,0,.5); }
#loading h1 em { font-style: normal; color: var(--accent); }
#loading h1 .nw { white-space: nowrap; }
/* the "3D" of SCARY SCALER 3D: the title screen's gold sticker (hud-ui menus.css .t-3d) — the same tilt (8deg, leaning
   right), proportion (.55 of the word), gradient, ink rim and gloss — riding on the logo's last word */
#loading h1 .mark3d { position: relative; z-index: 0; isolation: isolate; display: inline-block; margin-left: -.12em; padding: .14em .16em .04em .14em; border-radius: .2em; vertical-align: .3em;
  font-size: .55em; line-height: 1; letter-spacing: 0; color: var(--ink); text-shadow: 0 .05em 0 rgba(255,255,255,.55);
  background: linear-gradient(170deg, #fffbd0 0%, #ffe066 34%, #ffc21f 35%, #ff9d1f 100%); border: .085em solid var(--ink);
  box-shadow: inset 0 .07em 0 rgba(255,255,255,.75), inset 0 -.08em 0 rgba(160,70,0,.35), 0 .11em 0 var(--ink), 0 .2em .26em rgba(0,0,0,.45); transform: rotate(8deg); transform-origin: 30% 80%; }
#loading h1 .mark3d::before { content: ''; position: absolute; z-index: -1; left: .12em; right: .12em; top: .08em; height: .3em; border-radius: .14em .14em 50% 50%; background: linear-gradient(rgba(255,255,255,.7), rgba(255,255,255,0)); pointer-events: none; }
#loading .bar { width: 100%; height: 18px; border-radius: 999px; background: #2b2140; border: 3px solid var(--ink); overflow: hidden; box-shadow: 0 4px 0 var(--ink); }
#loading .bar > i { display: block; height: 100%; background: linear-gradient(90deg, #ffb31f, var(--accent)); transform-origin: left; transform: scaleX(0); transition: transform .2s ease; }
#loading .status { margin: 0; font-size: 16px; color: #cfc3ea; min-height: 1.5em; text-align: center; }
#loading.error .status { color: var(--danger); font-weight: 600; }
#loading .disclaimer { position: absolute; bottom: 14px; left: 16px; right: 16px; margin: 0; text-align: center; font-size: 13px; color: #9a8fbb; }
.nojs { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; font-size: 20px; }
@media (prefers-reduced-motion: reduce) { #loading, #loading .bar > i { transition: none; } }

/* Manual stepping (tests): CSS time is wall-clock, not simulation time, so turn transitions and
   animations off to keep captures deterministic. Drive UI motion that must show up in captures from
   simulation time instead (see juice bubbles). */
html.manual-step *, html.manual-step *::before, html.manual-step *::after { transition: none !important; animation: none !important; }

/* debug builds: which pieces run as stubs (forced with ?stub= / ?pieces=, or fallen back after a failure) */
.piece-badge { position: absolute; left: 8px; bottom: 6px; z-index: 5; max-width: calc(100% - 16px); padding: 2px 8px; border-radius: 6px; background: rgba(18,13,27,.72); color: #b9aed6; font: 600 11px var(--body); pointer-events: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.piece-badge.failed { background: #b3261e; color: #fff; }
/* piece STUBS (src/game/stubs/*.js): deliberately plain */
.stub-hud { position: absolute; left: 12px; top: 10px; padding: 4px 10px; border-radius: 6px; background: rgba(18,13,27,.75); font: 600 15px var(--body); color: var(--paper); }
.stub-prompt { position: absolute; left: 50%; bottom: 70px; transform: translateX(-50%); padding: 6px 14px; border-radius: 8px; background: var(--paper); color: var(--ink); font: 600 17px var(--body); }
.stub-bubble { position: absolute; left: 50%; bottom: 120px; transform: translateX(-50%); max-width: 70vw; padding: 6px 14px; border-radius: 10px; background: #fff; color: var(--ink); font: 600 16px var(--body); }
.stub-panel { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: grid; gap: 10px; justify-items: center; padding: 20px 28px; border-radius: 12px; background: rgba(18,13,27,.9); }
.stub-panel h1, .stub-panel h2 { margin: 0; font: 400 40px var(--display); color: var(--accent); }
.stub-disclaimer { margin: 0; font: 500 12px var(--body); color: #b9aed6; }
.stub-btn { pointer-events: auto; min-width: 180px; padding: 8px 20px; border-radius: 10px; border: 2px solid var(--ink); background: var(--paper); color: var(--ink); font: 400 20px var(--display); cursor: pointer; }

/* the chapter card between stages (game/main.js chapterCard): a stage switch reloads the page, and the first key / tap
   on this card is the gesture that wakes the sound before the stage's intro plays */
#gate { position: absolute; inset: 0; display: grid; place-items: center; z-index: 12; cursor: pointer; background: radial-gradient(ellipse at 50% 40%, #2a1d44 0%, var(--night) 70%); transition: opacity .4s ease; }
#gate.done { opacity: 0; }
#gate .card { display: grid; gap: 14px; justify-items: center; padding: 16px; width: min(760px, 92vw); text-align: center; }
#gate .kicker { margin: 0; padding: 4px 16px; border-radius: 999px; background: var(--accent); color: var(--ink); border: 3px solid var(--ink); box-shadow: 0 4px 0 var(--ink); font: 400 clamp(16px, 2.6vw, 24px) var(--display); letter-spacing: 1px; }
#gate h1 { margin: 0; font-family: var(--display); font-weight: 400; font-size: clamp(34px, 6.4vw, 72px); line-height: 1; letter-spacing: 1px; color: var(--paper); text-shadow: 0 5px 0 var(--ink), 0 9px 18px rgba(0,0,0,.5); }
#gate .blurb { margin: 0; font-size: clamp(15px, 2.2vw, 20px); color: #cfc3ea; max-width: 34em; }
#gate .press { margin: 10px 0 0; font: 400 clamp(18px, 2.8vw, 26px) var(--display); color: var(--paper); letter-spacing: 1px; animation: gate-pulse 1.1s ease-in-out infinite alternate; }
#gate .disclaimer { position: absolute; bottom: 14px; left: 16px; right: 16px; margin: 0; text-align: center; font-size: 13px; color: #9a8fbb; }
@keyframes gate-pulse { from { opacity: .55; transform: scale(.97); } to { opacity: 1; transform: scale(1.03); } }
@media (prefers-reduced-motion: reduce) { #gate, #gate .press { transition: none; animation: none; } }