/* playable-story — a game layer over a living world. Colours and fonts only from the theme variables.
   Glass chrome flips between dark and light with the scene (html[data-ui]). */
:root {
  --ring: min(34vmin, 290px);
  --pad: clamp(16px, 3vw, 40px);
  --ink: var(--fg); --ink-2: color-mix(in srgb, var(--fg) 78%, transparent); --ink-3: color-mix(in srgb, var(--fg) 56%, transparent);
  --glass: color-mix(in srgb, var(--bg) 42%, transparent); --glass-line: color-mix(in srgb, var(--fg) 18%, transparent); --glass-hi: rgba(255,255,255,.14);
  --shadow: 0 1px 22px color-mix(in srgb, var(--bg) 70%, transparent);
  --ease-back: cubic-bezier(.34, 1.56, .64, 1);
}
html[data-ui="light"] {
  --ink: var(--c-ink, #15221d); --ink-2: color-mix(in srgb, var(--c-ink, #15221d) 80%, transparent); --ink-3: color-mix(in srgb, var(--c-ink, #15221d) 60%, transparent);
  --glass: rgba(255, 253, 246, .5); --glass-line: rgba(255, 255, 255, .62); --glass-hi: rgba(255,255,255,.7);
  --shadow: 0 1px 24px rgba(255, 252, 240, .55);
}
html { background: var(--bg); color: var(--fg); font-family: var(--font-sans); -webkit-font-smoothing: antialiased; }
body { margin: 0; }
a { color: inherit; }
::selection { background: var(--accent); color: #1a1408; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
em { font-style: italic; }

/* ---------- glass ---------- */
.glass { position: relative; isolation: isolate; color: var(--ink); transition: color .5s var(--ease-out); }
.glass::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--glass); border: 1px solid var(--glass-line);
  box-shadow: inset 0 1px 0 var(--glass-hi), 0 10px 30px -12px rgba(0,0,0,.35); backdrop-filter: blur(16px) saturate(1.35); -webkit-backdrop-filter: blur(16px) saturate(1.35); transition: background .5s var(--ease-out), border-color .5s; }

/* ---------- loader: a ring drawn by real progress, a countdown to zero ---------- */
.loader { background: radial-gradient(120% 90% at 50% 110%, color-mix(in srgb, var(--accent2) 16%, var(--bg)) 0%, var(--bg) 60%); display: grid; place-items: center; }
.loader-in { position: relative; width: var(--ring); height: var(--ring); display: grid; place-items: center; }
.loader-ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.loader-ring circle { fill: none; stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.lr-track { stroke: color-mix(in srgb, var(--fg) 14%, transparent); stroke-dasharray: 1 2.2; }
.lr-fill { stroke: var(--accent); stroke-width: 2.4 !important; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: calc(100 - var(--p, 0) * 100); filter: drop-shadow(0 0 6px var(--accent)); }
.loader-count { margin: 0; display: grid; justify-items: center; gap: 6px; }
.loader-count b { font: 400 clamp(56px, 9vmin, 92px)/1 var(--font-display); font-variant-numeric: tabular-nums; letter-spacing: -.03em; }
.loader-count span { font: 500 11px var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.loader-end { position: absolute; bottom: -54px; margin: 0; font: italic 400 22px var(--font-display); color: var(--accent); opacity: 0; transform: translateY(8px); transition: opacity .5s, transform .6s var(--ease-out); }
.loader.is-zero .loader-end { opacity: 1; transform: none; }
.loader-name { position: absolute; top: 26px; left: var(--pad); margin: 0; font: 500 12px var(--font-mono); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-3); }

/* ---------- stage layers ---------- */
.veil { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; display: none; }
.gate-open .veil, .gate-melting .veil { display: block; }
.gate-fade .veil { opacity: 0; transition: opacity .45s linear; }
.poster { background: radial-gradient(60% 45% at 62% 58%, #6f9a74 0%, #3e6a55 38%, transparent 70%), linear-gradient(180deg, #2c4a78 0%, #c9a996 55%, #5c5a72 100%); }
.poster[style] { background-size: cover; background-position: 70% center; }

/* ---------- HUD ---------- */
.hud-top { position: fixed; z-index: 30; top: 0; left: 0; right: 0; display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; gap: 16px; padding: 16px var(--pad); pointer-events: none; }
.hud-top > * { pointer-events: auto; }
.hud-left { display: flex; gap: 8px; align-items: center; }
.brand { display: inline-flex; align-items: center; gap: 9px; height: 42px; padding: 0 16px 0 10px; border-radius: 99px; text-decoration: none; font: 600 13px var(--font-sans); letter-spacing: .14em; text-transform: uppercase; }
.brand svg { width: 24px; height: 24px; color: var(--accent); }
.sound { position: relative; isolation: isolate; height: 42px; padding: 0 14px; border-radius: 99px; border: 0; background: none; display: inline-flex; gap: 8px; align-items: center; cursor: pointer; font: 500 11px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink); }
.sound::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--glass); border: 1px solid var(--glass-line); box-shadow: inset 0 1px 0 var(--glass-hi); backdrop-filter: blur(16px) saturate(1.35); -webkit-backdrop-filter: blur(16px) saturate(1.35); }
.sound.is-on { color: var(--accent); }

.timeline { position: relative; width: min(420px, 34vw); opacity: 0; transform: translateY(-24px); transition: opacity .6s, transform .9s var(--ease-back) .08s; }
.tl-pill { height: 42px; border-radius: 99px; }
.tl-clip { position: absolute; inset: 0; overflow: hidden; border-radius: 99px; -webkit-mask: linear-gradient(90deg, transparent 0, #000 20%, #000 80%, transparent 100%); mask: linear-gradient(90deg, transparent 0, #000 20%, #000 80%, transparent 100%); }
.tl-tape, .tl-list { position: absolute; left: 50%; top: 0; height: 42px; margin: 0; padding: 0; list-style: none; will-change: transform; }
.tl-ticks i { position: absolute; top: 7px; width: 1px; height: 6px; background: var(--ink-3); transform-origin: 50% 0; opacity: .6; }
.tl-ticks i.maj { height: 9px; opacity: 1; }
.tl-list li { position: absolute; top: 0; transform: translateX(-50%); }
.tl-list a { display: flex; gap: 5px; align-items: baseline; padding: 20px 8px 0; text-decoration: none; white-space: nowrap; font: 500 10.5px var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); opacity: calc(.45 + var(--near, 0) * .55); transform: scale(calc(.94 + var(--near, 0) * .14)); transition: color .3s; }
.tl-list a.is-current { color: var(--ink); }
.tl-list a[data-task="done"] .tl-n::after { content: '✓'; margin-left: 3px; color: var(--accent); }
.tl-n { color: var(--accent); }
html[data-ui="light"] .tl-n { color: var(--c-ink-accent, var(--accent)); }
.tl-head { position: absolute; left: 50%; top: 4px; width: 2px; height: 16px; margin-left: -1px; border-radius: 2px; background: var(--accent); box-shadow: 0 0 10px var(--accent); }
.tl-now { position: absolute; left: 0; right: 0; top: 50px; margin: 0; display: flex; justify-content: center; gap: 10px; font: 500 10px var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); text-shadow: var(--shadow); white-space: nowrap; }
.tl-now b { font-weight: 500; color: var(--accent); }
html[data-ui="light"] .tl-now b { color: var(--c-ink-accent, var(--accent)); }

.xp { justify-self: end; display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 16px 0 12px; border-radius: 99px; font: 600 15px var(--font-sans); font-variant-numeric: tabular-nums; opacity: 0; transform: translateY(-24px); transition: opacity .6s, transform .9s var(--ease-back) .16s, color .5s; }
.xp svg { width: 18px; height: 18px; fill: var(--accent); filter: drop-shadow(0 0 6px color-mix(in srgb, var(--accent) 70%, transparent)); }
.xp > span { font: 500 11px var(--font-mono); letter-spacing: .08em; color: var(--ink-3); }
.xp.is-flash::before { animation: xpflash 1.8s var(--ease-out); }
.xp.is-flash svg { animation: xpspin 1.2s var(--ease-out); }
@keyframes xpflash { 0%, 30% { border-color: var(--accent); box-shadow: inset 0 1px 0 var(--glass-hi), 0 0 0 2px var(--accent), 0 0 36px var(--accent); } 100% { } }
.xp.is-flash b { animation: xpnum .9s var(--ease-back); } @keyframes xpnum { 0% { transform: scale(1.35); color: var(--accent); } 100% { transform: none; } }
.xp b { display: inline-block; }
@keyframes xpspin { 0% { transform: rotate(0) scale(1.6); } 100% { transform: rotate(180deg) scale(1); } }
.xp-plus { position: absolute; right: 12px; top: 46px; font: 600 12px var(--font-mono); font-style: normal; color: var(--accent); opacity: 0; text-shadow: var(--shadow); }
.xp-plus.is-on { animation: plus 1.6s var(--ease-out); }
@keyframes plus { 0% { opacity: 0; transform: translateY(-6px); } 15% { opacity: 1; } 70% { opacity: 1; } 100% { opacity: 0; transform: translateY(10px); } }

.gate-done .timeline, .gate-done .xp { opacity: 1; transform: none; }

/* dock: one line that says what to do next */
.dock { position: fixed; z-index: 30; left: 50%; bottom: 18px; transform: translate(-50%, 90px); display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 18px 0 6px; border-radius: 99px; font: 500 13px var(--font-sans); white-space: nowrap; max-width: calc(100vw - 32px); transition: transform .9s var(--ease-back) .3s, color .5s; pointer-events: none; }
.gate-done .dock { transform: translate(-50%, 0); }
.dock-icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: color-mix(in srgb, var(--accent) 22%, transparent); color: var(--accent); flex: none; }
.dock-icon svg { width: 20px; height: 20px; }
.dock-text { overflow: hidden; text-overflow: ellipsis; }
.dock-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-3); flex: none; }
.dock[data-mode="task"]::before { border-color: color-mix(in srgb, var(--accent) 70%, transparent); box-shadow: inset 0 1px 0 var(--glass-hi), 0 0 24px -4px color-mix(in srgb, var(--accent) 60%, transparent); }
.dock[data-mode="task"] .dock-dot { background: var(--accent); animation: pulse 1.4s ease-in-out infinite; }
.dock[data-mode="done"] .dock-dot { background: var(--accent2); }
.dock.is-empty, .dock[data-mode="cta"] { transform: translate(-50%, 90px) !important; }
.is-idle .dock .dock-dot { animation: bob 1.6s ease-in-out infinite; background: var(--accent); }
@keyframes bob { 50% { transform: translateY(5px); } }
@keyframes pulse { 50% { transform: scale(1.8); opacity: .5; } }

/* ---------- burst: star + XP at the centre of your stroke ---------- */
.burst { position: fixed; z-index: 45; left: 50%; top: 50%; width: 0; height: 0; pointer-events: none; opacity: 0; }
.burst svg { position: absolute; left: -48px; top: -48px; width: 96px; height: 96px; fill: var(--accent); filter: drop-shadow(0 0 18px var(--accent)) drop-shadow(0 0 40px rgba(255,240,200,.7)); }
.burst b { position: absolute; left: -80px; width: 160px; top: 60px; text-align: center; font: 600 20px var(--font-sans); color: #fffaf0; text-shadow: 0 0 18px rgba(0,0,0,.35); letter-spacing: .02em; }
.burst.is-on { opacity: 1; animation: burst-in .9s var(--ease-back) both; }
.burst.is-on svg { animation: star 1.4s var(--ease-out) both; }
.burst.is-fly { transition: transform .8s cubic-bezier(.55, 0, .3, 1), opacity .8s ease-in; transform: translate(var(--fx), var(--fy)) scale(.2); opacity: 0; }
@keyframes burst-in { 0% { transform: scale(.2); } 100% { transform: scale(1); } }
@keyframes star { 0% { transform: rotate(-90deg) scale(.3); } 100% { transform: rotate(0) scale(1); } }

/* ---------- intro + gate ---------- */
main { position: relative; z-index: 2; }
.intro { position: relative; height: 100vh; min-height: 560px; }
.intro::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, color-mix(in srgb, var(--bg) 42%, transparent) 0%, color-mix(in srgb, var(--bg) 18%, transparent) 32%, transparent 55%); opacity: 0; transition: opacity 1.2s; }
.gate-done .intro::before { opacity: 1; }
.intro-in { position: absolute; left: var(--pad); top: clamp(92px, 14vh, 150px); max-width: 640px; color: var(--ink); text-shadow: var(--shadow); transition: color .5s; }
.intro-kicker { margin: 0 0 14px; font: 500 11px var(--font-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2); }
.intro-title { margin: 0; display: grid; gap: 14px; font-weight: 400; }
.t-name { font: 400 clamp(84px, 12.5vw, 200px)/.82 var(--font-display); letter-spacing: -.045em; }
.t-sub { font: 400 clamp(19px, 1.6vw, 25px)/1.25 var(--font-display); max-width: 22ch; color: var(--ink-2); }
.t-sub em { color: var(--accent); }
.intro-lede { margin: 18px 0 0; max-width: 36ch; font-size: 16px; line-height: 1.5; color: var(--ink-2); }
.gate-ui { display: none; }
.gate-open .gate-ui, .gate-melting .gate-ui { display: block; }
.gate-hint { position: fixed; left: 50%; top: 50%; width: var(--ring); height: var(--ring); transform: translate(-50%, -50%); pointer-events: none; transition: opacity .4s, transform .6s var(--ease-out); }
.gate-hint svg { width: 100%; height: 100%; overflow: visible; }
.gh-ring { fill: none; stroke: color-mix(in srgb, var(--fg) 30%, transparent); stroke-width: 1.2; stroke-dasharray: 1.5 5; vector-effect: non-scaling-stroke; }
.gh-comet { transform-origin: 100px 100px; animation: comet 4s cubic-bezier(.45, 0, .55, 1) infinite; }
.gh-tail { fill: none; stroke: var(--accent); stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 26 100; stroke-dashoffset: -74; transform: rotate(-90deg); transform-origin: 100px 100px; opacity: .8; filter: drop-shadow(0 0 5px var(--accent)); vector-effect: non-scaling-stroke; }
.gh-head { fill: #fffaf0; filter: drop-shadow(0 0 6px var(--accent)); }
@keyframes comet { 0% { transform: rotate(-26deg); opacity: 0; } 8% { opacity: 1; } 50% { transform: rotate(334deg); opacity: 1; } 58%, 100% { transform: rotate(334deg); opacity: 0; } }
.gate-prompt { position: fixed; left: 50%; top: calc(50% + var(--ring) / 2 + 26px); transform: translateX(-50%); margin: 0; width: max-content; max-width: calc(100vw - 40px); text-align: center; font: 400 clamp(26px, 2.6vw, 38px)/1.1 var(--font-display); color: #fff8ea; text-shadow: 0 2px 30px rgba(0,0,0,.4); }
.gate-prompt em { color: var(--accent); }
.gate-help { position: fixed; left: 50%; top: calc(50% + var(--ring) / 2 + 76px); transform: translateX(-50%); margin: 0; width: max-content; max-width: calc(100vw - 40px); text-align: center; font: 500 11px var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 248, 234, .66); }
.gate-note { position: fixed; left: 50%; top: calc(50% - 10px); transform: translate(-50%, -50%); margin: 0; font: italic 400 24px var(--font-display); color: #fff8ea; text-shadow: 0 2px 20px rgba(0,0,0,.5); pointer-events: none; }
.gate-shake .gate-note { animation: shake .5s; }
@keyframes shake { 20%, 60% { transform: translate(calc(-50% - 8px), -50%); } 40%, 80% { transform: translate(calc(-50% + 8px), -50%); } }
.gate-actions { position: fixed; left: 50%; bottom: 30px; transform: translateX(-50%); display: flex; gap: 14px; align-items: center; }
.btn-skip { height: 44px; padding: 0 20px; border-radius: 99px; border: 0; background: none; cursor: pointer; font: 500 13px var(--font-sans); color: #fff8ea; }
.btn-skip::before { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.22); }
.btn-skip:hover::before { background: rgba(255,255,255,.16); }
.kbd { font: 500 10px var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 248, 234, .55); }
.is-drawing .gate-hint { opacity: 0; transform: translate(-50%, -50%) scale(1.06); }
.is-drawing .gate-prompt, .is-drawing .gate-help, .is-drawing .gate-actions { opacity: .25; transition: opacity .4s; }
.gate-melting .gate-ui { opacity: 0; transition: opacity .5s; }
.gate-open .intro-in, .gate-melting .intro-in { color: #fff8ea; }
.gate-open .t-sub, .gate-melting .t-sub { color: rgba(255, 248, 234, .78); }
.gate-open, .gate-open body, .gate-melting, .gate-melting body { overflow: hidden; }
.gate-open body { touch-action: none; }
.gate-pending .hud-top .timeline, .gate-pending .xp, .gate-open .timeline, .gate-open .xp { opacity: 0; }
.scroll-cue { position: absolute; left: 50%; bottom: 84px; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 10px; font: 500 11px var(--font-mono); letter-spacing: .14em; text-transform: uppercase; text-decoration: none; color: var(--ink); text-shadow: var(--shadow); opacity: 0; transition: opacity .8s .9s; }
.gate-done .scroll-cue { opacity: 1; }
.scroll-cue i { width: 22px; height: 34px; border: 1px solid currentColor; border-radius: 12px; position: relative; }
.scroll-cue i::after { content: ''; position: absolute; left: 50%; top: 7px; width: 3px; height: 7px; margin-left: -1.5px; border-radius: 2px; background: currentColor; animation: wheel 1.8s var(--ease-io) infinite; }
@keyframes wheel { 60% { transform: translateY(9px); opacity: 0; } 61% { transform: none; opacity: 0; } 100% { opacity: 1; } }

/* ---------- chapters: a pinned copy panel, the world performs beside it ---------- */
.chapter { position: relative; min-height: var(--h, 240vh); }
.ch-pin { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; justify-content: center; gap: 22px; padding: 112px var(--pad) 96px; box-sizing: border-box; isolation: isolate; }
.ch-pin::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(90deg, color-mix(in srgb, var(--bg) 58%, transparent) 0%, color-mix(in srgb, var(--bg) 30%, transparent) 30%, transparent 52%); transition: opacity .6s; }
.side-right .ch-pin::before { transform: scaleX(-1); }
html[data-ui="light"] .ch-pin::before { background: linear-gradient(90deg, rgba(252, 248, 238, .62) 0%, rgba(252, 248, 238, .34) 30%, transparent 52%); }
.ch-copy, .task { width: min(480px, 38vw); }
.side-right .ch-copy, .side-right .task { margin-left: auto; }
.ch-copy { color: var(--ink); transition: color .5s; }
.ch-kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 16px; font: 500 11px var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); text-shadow: var(--shadow); }
.ch-num { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--accent) 70%, transparent); color: var(--accent); letter-spacing: 0; }
.ch-stamp { padding: 3px 8px; border-radius: 99px; background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--ink); }
.ch-title { margin: 0 0 18px; font: 400 clamp(40px, 4.5vw, 74px)/.98 var(--font-display); letter-spacing: -.025em; text-shadow: var(--shadow); }
.ch-title em { color: var(--c-emph, var(--accent)); }
html[data-ui="light"] .ch-title em { color: var(--c-emph-light, var(--c-emph, var(--accent))); }
.ch-body { font-size: clamp(16px, 1.15vw, 18px); line-height: 1.55; color: var(--ink-2); max-width: 40ch; text-shadow: var(--shadow); }
.ch-body p { margin: 0 0 .7em; }
.ch-counter { margin: 12px 0 0; display: flex; align-items: baseline; gap: 12px; }
.ch-counter b { font: 400 clamp(64px, 7vw, 120px)/.9 var(--font-display); letter-spacing: -.04em; color: var(--accent); font-variant-numeric: tabular-nums; text-shadow: var(--shadow); min-width: 2ch; }
.ch-counter span { font: 500 11px var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); }

/* the task card (glass lives on ::before, so fixed-position controls inside stay relative to the viewport) */
.task { position: relative; isolation: isolate; padding: 16px 18px 14px; border-radius: 18px; color: var(--ink); transition: color .5s, opacity .5s; }
.task::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--glass); border: 1px solid var(--glass-line); box-shadow: inset 0 1px 0 var(--glass-hi), 0 18px 40px -20px rgba(0,0,0,.4); backdrop-filter: blur(16px) saturate(1.3); -webkit-backdrop-filter: blur(16px) saturate(1.3); }
.task.is-nudge::before { animation: nudge .6s; }
@keyframes nudge { 30% { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 40%, transparent); } }
.task-head { display: flex; align-items: center; gap: 10px; margin: 0 0 6px; font: 600 16px/1.3 var(--font-sans); }
.task-label em { font-style: normal; color: var(--accent); }
.task-badge { flex: none; padding: 4px 8px; border-radius: 99px; font: 500 10px var(--font-mono); letter-spacing: .06em; background: var(--accent); color: #1c1606; }
.task[data-state="done"] .task-badge { background: var(--accent2); }
.task[data-state="done"] .task-badge::before { content: '✓ '; }
.task[data-state="skipped"] .task-badge { background: transparent; color: var(--ink-3); border: 1px solid var(--glass-line); text-decoration: line-through; }
.task-help { margin: 0; font-size: 13px; line-height: 1.45; color: var(--ink-2); }
.task-status { margin: 8px 0 0; min-height: 1em; font: 500 12px/1.4 var(--font-mono); letter-spacing: .04em; color: var(--accent); }
html[data-ui="light"] .task-status { color: var(--c-ink-accent, #7a5410); }
.task-skip { margin-top: 6px; padding: 0; border: 0; background: none; cursor: pointer; font: 500 11px var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); text-decoration: underline; text-underline-offset: 3px; }
.task-skip:hover { color: var(--ink); }
.task[data-state="done"] .task-skip, .task[data-state="skipped"] .task-skip { display: none; }
.spots, .layers { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.spot-facts { margin: 10px 0 0; padding-left: 18px; font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.layers { display: grid; gap: 4px; }
.layer { font-size: 13px; line-height: 1.4; color: var(--ink-2); }
.layer b { color: var(--ink); margin-right: 6px; }

/* controls on the stage (WebGL, motion allowed): positioned by app code at their world anchors */
.task-ctl { touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.has-webgl:not(.reduced) .task .task-ctl, .has-webgl:not(.reduced) .task .layer { position: fixed; z-index: 5; left: -999px; top: -999px; opacity: 0; pointer-events: none; transition: opacity .5s; }
.has-webgl:not(.reduced) .task.is-live .task-ctl { opacity: 1; pointer-events: auto; }
.has-webgl:not(.reduced) .task.is-live .task-ctl.is-off { opacity: 0; pointer-events: none; }
.has-webgl:not(.reduced) .spots li { display: contents; }

/* hold orb */
.orb { width: 104px; height: 104px; margin: 12px 0 0; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; display: grid; place-items: center; --hold: 0; }
.has-webgl:not(.reduced) .orb { transform: translate(-50%, -50%) scale(calc(1 - var(--hold) * .06)); margin: 0; }
.orb-ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.orb-ring circle { fill: none; stroke: rgba(255, 255, 255, .35); stroke-width: 2; }
.orb-ring .orb-fill { stroke: var(--accent); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: calc(100 - var(--hold) * 100); filter: drop-shadow(0 0 6px var(--accent)); }
.orb-core { width: 62px; height: 62px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #fffdf5, color-mix(in srgb, var(--accent) 55%, #fff) 60%, color-mix(in srgb, var(--accent) 80%, transparent)); box-shadow: 0 0 30px color-mix(in srgb, var(--accent) 80%, transparent), 0 0 80px rgba(255, 240, 210, .45); transition: transform .3s var(--ease-back); }
.orb:hover .orb-core { transform: scale(1.08); }
.is-holding .orb-core { transform: scale(.9); }
.orb-ripple { position: absolute; inset: 14px; border-radius: 50%; border: 1.5px solid rgba(255, 250, 235, .7); animation: ripple 2.8s var(--ease-out) infinite; pointer-events: none; }
.orb-ripple + .orb-ripple { animation-delay: 1.4s; }
@keyframes ripple { 0% { transform: scale(.8); opacity: .9; } 100% { transform: scale(2.1); opacity: 0; } }
.orb-label { position: absolute; left: calc(100% + 14px); top: 50%; transform: translateY(-50%); display: grid; gap: 2px; text-align: left; white-space: nowrap; font: 500 12px/1.2 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: #fffaf0; text-shadow: 0 1px 12px rgba(0,0,0,.45); }
.orb-label b { font-size: 15px; letter-spacing: .16em; }
.task[data-state="done"] .orb, .task[data-state="skipped"] .orb { opacity: 0 !important; pointer-events: none !important; }
.reduced .orb, .no-webgl .orb { width: auto; height: 46px; border-radius: 99px; padding: 0 18px; display: inline-flex; gap: 10px; background: var(--accent); color: #1c1606; }
.reduced .orb .orb-ring, .reduced .orb .orb-ripple, .no-webgl .orb .orb-ring, .no-webgl .orb .orb-ripple { display: none; }
.reduced .orb-core, .no-webgl .orb-core { width: 14px; height: 14px; box-shadow: none; }
.reduced .orb-label, .no-webgl .orb-label { position: static; transform: none; color: inherit; text-shadow: none; display: flex; gap: 6px; }

/* drag handle */
.handle { display: inline-flex; align-items: center; gap: 12px; margin: 12px 0 0; cursor: grab; }
.has-webgl:not(.reduced) .handle { transform: translate(-31px, -50%); margin: 0; }
.handle.is-dragging { cursor: grabbing; }
.handle-knob { position: relative; width: 62px; height: 62px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--accent) 88%, white); box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 30%, transparent), 0 0 36px color-mix(in srgb, var(--accent) 70%, transparent), 0 10px 20px -8px rgba(0,0,0,.4); transition: transform .3s var(--ease-back); }
.handle-knob::after { content: ''; position: absolute; inset: -10px; border-radius: 50%; border: 1.5px solid color-mix(in srgb, var(--accent) 80%, white); animation: ripple 2.4s var(--ease-out) infinite; }
.handle:hover .handle-knob, .handle:focus-visible .handle-knob { transform: scale(1.08); }
.handle.is-dragging .handle-knob { transform: scale(.92); }
.handle.is-dragging .handle-knob::after { animation: none; opacity: 0; }
.handle-knob i { width: 22px; height: 22px; position: relative; }
.handle-knob i::before, .handle-knob i::after { content: ''; position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; border: solid #2a1d06; border-width: 0 2px 2px 0; }
.arr-y::before { transform: translate(-50%, -110%) rotate(-135deg); } .arr-y::after { transform: translate(-50%, 10%) rotate(45deg); }
.arr-x::before { transform: translate(-110%, -50%) rotate(135deg); } .arr-x::after { transform: translate(10%, -50%) rotate(-45deg); }
.handle-label { padding: 7px 12px; border-radius: 99px; background: rgba(15, 22, 18, .55); color: #fffaf0; font: 500 11px var(--font-mono); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.task[data-state="done"] .handle, .task[data-state="skipped"] .handle { opacity: .0 !important; pointer-events: none !important; }

/* layer labels on the cut face */
.has-webgl:not(.reduced) .task.is-live .layer { opacity: 0; transform: translate(14px, -50%); display: flex; align-items: center; gap: 8px; max-width: 280px; padding: 6px 12px 6px 8px; border-radius: 99px; background: rgba(15, 22, 18, .6); color: #fffaf0; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); font-size: 12px; }
.has-webgl:not(.reduced) .task.is-live .layer::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--accent); flex: none; }
.has-webgl:not(.reduced) .task.is-live .layer b { color: #fffaf0; margin: 0; white-space: nowrap; }
.has-webgl:not(.reduced) .task.is-live .layer span { color: rgba(255, 250, 240, .72); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.has-webgl:not(.reduced) .task.is-live .layer.is-shown:not(.is-off) { opacity: 1; }

/* hotspots */
.spot { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px 0 6px; border: 1px solid var(--glass-line); border-radius: 99px; background: var(--glass); cursor: pointer; font: 500 12px var(--font-sans); color: var(--ink); }
.has-webgl:not(.reduced) .spot { transform: translate(-18px, -50%); border-color: rgba(255,255,255,.5); background: rgba(15, 22, 18, .5); color: #fffaf0; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.spot-dot { position: relative; width: 24px; height: 24px; border-radius: 50%; background: #fffaf0; box-shadow: 0 0 16px rgba(255, 245, 220, .9); display: grid; place-items: center; }
.spot-dot::before { content: '+'; font: 600 16px/1 var(--font-sans); color: #1c1606; }
.spot-dot::after { content: ''; position: absolute; inset: -6px; border-radius: 50%; border: 1.5px solid rgba(255, 250, 235, .8); animation: ripple 2.2s var(--ease-out) infinite; }
.spot.is-found .spot-dot { background: var(--accent); }
.spot.is-found .spot-dot::before { content: '✓'; font-size: 13px; }
.spot.is-found .spot-dot::after { animation: none; opacity: 0; }
.spot-card { display: none; }
.has-webgl:not(.reduced) .spot-card { display: block; position: fixed; z-index: 6; width: 250px; padding: 14px 16px; border-radius: 16px; background: rgba(252, 249, 240, .92); color: #17221d; box-shadow: 0 20px 40px -16px rgba(0,0,0,.45); opacity: 0; transform: translateY(-50%) scale(.96); transition: opacity .35s, transform .45s var(--ease-back); pointer-events: none; }
.spot-card.is-on { opacity: 1 !important; transform: translateY(-50%) scale(1); }
.task:not(.is-live) .spot-card { opacity: 0 !important; }
.spot-card b { display: block; font: 400 20px/1.1 var(--font-display); margin-bottom: 6px; }
.spot-card p { margin: 0; font-size: 13.5px; line-height: 1.45; }
.reduced .spot-card.is-on, .no-webgl .spot-card.is-on { display: block; margin-top: 10px; font-size: 14px; }

/* ---------- finale ---------- */
.finale { position: relative; min-height: 160vh; overflow-x: clip; }
.finale-in { position: sticky; top: 0; min-height: 100vh; box-sizing: border-box; padding: 104px var(--pad) 48px; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; gap: 14px; width: min(600px, 46vw); color: var(--ink); isolation: isolate; }
.finale-in::before { content: ''; position: absolute; inset: 0 -40vw 0 -10vw; z-index: -1; pointer-events: none; background: linear-gradient(90deg, color-mix(in srgb, var(--bg) 62%, transparent) 0%, color-mix(in srgb, var(--bg) 34%, transparent) 45%, transparent 75%); }
.finale-title { margin: 0; font: 400 clamp(44px, 5vw, 80px)/.92 var(--font-display); letter-spacing: -.035em; text-shadow: var(--shadow); }
.finale-title em { color: var(--accent); }
.finale-text { max-width: 46ch; font-size: 16px; line-height: 1.55; color: var(--ink-2); text-shadow: var(--shadow); }
.finale-text p { margin: 0 0 .6em; }
.summary { width: 100%; box-sizing: border-box; border-radius: 22px; padding: 18px 20px 16px; text-align: left; }
.summary-head { margin: 0 0 10px; font: 500 11px var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); }
.summary dl { margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.summary dl div { display: grid; gap: 6px; padding-top: 10px; border-top: 1px solid var(--glass-line); }
.summary dt { font: 500 10px/1.3 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.summary dd { margin: 0; display: flex; align-items: baseline; gap: 6px; }
.summary dd b { font: 400 34px/1 var(--font-display); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.summary dd span { font: 500 12px var(--font-mono); color: var(--ink-3); }
.summary-note { margin: 12px 0 0; font: italic 400 17px/1.35 var(--font-display); color: var(--ink-2); }
.cta { display: inline-flex; align-items: center; gap: 14px; height: 56px; padding: 0 12px 0 28px; border-radius: 99px; background: var(--accent); color: #1c1606; text-decoration: none; font: 600 16px var(--font-sans); box-shadow: 0 16px 40px -14px color-mix(in srgb, var(--accent) 80%, transparent); transition: transform .5s var(--ease-out), box-shadow .4s; }
.cta i { width: 36px; height: 36px; border-radius: 50%; background: #1c1606; position: relative; }
.cta i::after { content: ''; position: absolute; left: 12px; top: 13px; width: 8px; height: 8px; border: solid var(--accent); border-width: 2px 2px 0 0; transform: rotate(45deg); }
.cta:hover { box-shadow: 0 20px 50px -12px var(--accent); }
.finale-small { margin: 0; font: 500 11px var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); text-shadow: var(--shadow); }
.replay { border: 0; background: none; cursor: pointer; font: 500 11px var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); text-decoration: underline; text-underline-offset: 3px; }

.foot { position: relative; z-index: 2; padding: 28px var(--pad) 34px; background: var(--bg); color: var(--muted); font: 500 11px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; border-top: 1px solid var(--line); }
.foot-row { display: flex; justify-content: space-between; gap: 12px; margin: 0 0 10px; }
.legal { margin: 0; font: 400 13px/1.5 var(--font-sans); text-transform: none; letter-spacing: 0; max-width: 70ch; }

/* custom cursor (appears on the first pointer move) */
.cursor { color: var(--accent); opacity: 0; transition: opacity .4s; }
.pointer-seen .cursor { opacity: 1; }
.is-jump [data-reveal], .is-jump [data-reveal] .u { transition: none !important; }
.cursor span { color: var(--ink); text-shadow: var(--shadow); font-family: var(--font-mono); }

/* reduced motion: nothing moves by itself; controls sit in the panel */
.reduced .gh-comet { animation: none; opacity: 0; }
.reduced .orb-ripple, .reduced .handle-knob::after, .reduced .spot-dot::after { animation: none; }
.reduced .burst { display: none; }
.reduced .xp.is-flash::before, .reduced .xp.is-flash b, .reduced .xp.is-flash svg, .reduced .xp-plus.is-on, .reduced .dock-dot { animation: none !important; }

/* no WebGL: the story reads as a page over the poster */
.no-webgl .ch-copy, .no-webgl .task { width: min(560px, 100%); }

/* ---------- phones: the world in the upper half, the copy in a sheet below ---------- */
@media (max-width: 820px) {
  :root { --ring: min(58vw, 250px); }
  .hud-top { grid-template-columns: auto minmax(0, 1fr) auto; padding: 12px 12px; gap: 8px; }
  .timeline { min-width: 0; }
  .tl-now { overflow: hidden; text-overflow: ellipsis; justify-content: flex-start; padding: 0 4px; }
  .kbd { display: none; }
  .brand { padding: 0 10px; height: 38px; } .brand span { display: none; }
  .sound { height: 38px; padding: 0 12px; } .sound [data-sound-label] { display: none; }
  .xp { height: 38px; font-size: 14px; padding: 0 12px 0 10px; }
  .timeline { width: auto; justify-self: stretch; }
  .tl-pill { height: 38px; }
  .tl-clip { -webkit-mask: none; mask: none; }
  .tl-tape, .tl-head { display: none; }
  .tl-list { position: static; display: flex; gap: 4px; height: 38px; align-items: center; padding: 0 14px; transform: none !important; }
  .tl-list li { position: relative; left: auto !important; transform: none; flex: 1; height: 4px; border-radius: 4px; background: color-mix(in srgb, var(--ink) 20%, transparent); overflow: hidden; }
  .tl-list li::after { content: ''; position: absolute; inset: 0; background: var(--accent); transform-origin: 0 50%; transform: scaleX(var(--fill, 0)); }
  .tl-list a { position: absolute; inset: -12px 0; padding: 0; opacity: 0; }
  .tl-now { top: 44px; }
  .intro-in { top: 88px; }
  .t-name { font-size: clamp(76px, 24vw, 120px); }
  .gate-actions { flex-direction: column; gap: 8px; bottom: 24px; }
  .gate-prompt { top: calc(50% + var(--ring) / 2 + 18px); font-size: 27px; }
  .gate-help { top: calc(50% + var(--ring) / 2 + 58px); }
  .ch-pin { justify-content: flex-end; padding: 0 14px 78px; gap: 10px; }
  .ch-copy, .task, .side-right .ch-copy, .side-right .task { width: auto; margin: 0; }
  .ch-copy { padding: 14px 16px 12px; border-radius: 18px; position: relative; isolation: isolate; }
  .ch-copy::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--glass); border: 1px solid var(--glass-line); backdrop-filter: blur(16px) saturate(1.3); -webkit-backdrop-filter: blur(16px) saturate(1.3); }
  .ch-kicker { margin-bottom: 8px; font-size: 10px; } .ch-num { width: 24px; height: 24px; }
  .ch-title { font-size: clamp(30px, 8.6vw, 40px); margin-bottom: 8px; text-shadow: none; }
  .ch-body { font-size: 14.5px; line-height: 1.45; text-shadow: none; }
  .ch-body p + p { display: none; }
  .chapter:has(.task) .ch-body { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .ch-counter b { font-size: 56px; }
  .task { padding: 12px 14px 10px; }
  .task-help { display: none; }
  .has-webgl:not(.reduced) .task.is-live .layer { max-width: 190px; } .has-webgl:not(.reduced) .task.is-live .layer span { display: none; }
  .has-webgl:not(.reduced) .spot-card { width: min(250px, calc(100vw - 40px)); left: 20px !important; top: 150px !important; transform: none; }
  .has-webgl:not(.reduced) .spot-card.is-on { transform: none; }
  .has-webgl:not(.reduced) .spot .spot-name { display: none; }
  .orb-label { left: 50%; top: calc(100% + 12px); transform: translateX(-50%); text-align: center; }
  .dock { bottom: 12px; height: 42px; font-size: 12px; }
  .finale-in { width: auto; justify-content: flex-end; padding: 0 14px 40px; gap: 10px; }
  .finale-title { font-size: clamp(38px, 11vw, 52px); }
  .finale .ch-kicker { display: none; }
  .finale-text { font-size: 14.5px; } .finale-text p + p { display: none; }
  .summary { padding: 14px 16px 12px; } .summary-note { font-size: 15px; }
  .finale-in::before { inset: 30vh 0 0; background: linear-gradient(0deg, color-mix(in srgb, var(--bg) 80%, transparent) 40%, transparent); }
  .summary dl { grid-template-columns: repeat(2, 1fr); }
  .summary dd b { font-size: 34px; }
  .foot-row { flex-direction: column; }
}