/* ---------- story mode ---------- */
body.story-open, body.prompt-open { overflow: hidden; }

.story-btn {
    display: inline-flex; align-items: center; gap: 7px; padding: 2px 10px 2px 8px; border: 1px solid rgba(220, 20, 60, .45); border-radius: 999px;
    font: 500 .9em var(--display); color: var(--light-color); background: rgba(220, 20, 60, .1); cursor: pointer; vertical-align: 1px;
    transition: background .25s, border-color .25s, box-shadow .25s;
}
.story-btn i { font-size: .7em; color: var(--primary-color); }
.story-btn:hover { background: rgba(220, 20, 60, .2); border-color: var(--primary-color); box-shadow: 0 6px 22px -10px var(--primary-glow); }

.story-prompt { position: fixed; inset: 0; z-index: 900; display: grid; place-items: center; padding: 24px; }
.story-prompt[hidden] { display: none; }
.story-prompt-scrim { position: absolute; inset: 0; background: rgba(6, 6, 8, .66); backdrop-filter: blur(6px); opacity: 0; transition: opacity .35s var(--ease); }
.story-prompt.show .story-prompt-scrim { opacity: 1; }
.story-prompt-card {
    position: relative; width: min(460px, 100%); max-height: calc(100dvh - 48px); overflow-y: auto; padding: 20px 24px 24px;
    border: 1px solid var(--border-2); border-radius: 16px; background: var(--surface);
    box-shadow: 0 32px 90px -24px rgba(0, 0, 0, .95), 0 0 70px -24px rgba(220, 20, 60, .3);
    opacity: 0; transform: translateY(16px) scale(.97); transition: opacity .3s var(--ease), transform .45s var(--ease);
}
.story-prompt.show .story-prompt-card { opacity: 1; transform: none; }
.story-prompt-handle { display: none; }
.story-prompt-head { display: flex; align-items: center; gap: 10px; margin: 0 -8px 16px 0; }
.story-prompt-badge { display: inline-flex; align-items: center; gap: 7px; padding: 5px 10px; border-radius: 999px; background: rgba(220, 20, 60, .12); color: var(--primary-color); font: 600 12px var(--display); }
.story-prompt-badge i { font-size: 11px; }
.story-prompt-meta { font: 500 11.5px var(--mono); color: var(--dim); }
.story-prompt-close {
    display: grid; place-items: center; width: 36px; height: 36px; margin-left: auto; border: 0; border-radius: 10px; background: transparent; color: var(--muted);
    font-size: 16px; cursor: pointer; transition: background .2s, color .2s;
}
.story-prompt-close:hover { background: var(--surface-2); color: var(--light-color); }
.story-prompt-preview { margin: 0 0 18px; padding: 14px 16px 10px; border: 1px solid var(--border); border-radius: 12px; background: radial-gradient(ellipse at 80% 0%, rgba(220, 20, 60, .1), transparent 60%), var(--bg); }
.story-prompt-art { display: block; width: 100%; height: auto; overflow: visible; }
.sp-track { fill: none; stroke: var(--border-2); stroke-width: 2; stroke-dasharray: 2 6; }
.sp-line { fill: none; stroke: var(--primary-color); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; filter: drop-shadow(0 0 6px rgba(255, 45, 85, .7)); }
.story-prompt.show .sp-line { animation: spDraw 3.2s cubic-bezier(.6, 0, .3, 1) .35s infinite; }
@keyframes spDraw { 0% { stroke-dashoffset: 1; } 60%, 85% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
.sp-nodes circle { fill: var(--bg); stroke: var(--border-2); stroke-width: 2; }
.story-prompt.show .sp-nodes circle { animation: spNode 3.2s ease infinite; animation-delay: calc(.35s + var(--i) * .62s); }
.sp-nodes .hot { stroke: var(--primary-color); }
@keyframes spNode { 0% { fill: var(--bg); } 6%, 60% { fill: var(--primary-color); stroke: var(--primary-color); } 80%, 100% { fill: var(--bg); } }
.sp-labels text { font: 500 10px var(--mono); letter-spacing: .14em; text-transform: uppercase; fill: var(--muted); text-anchor: middle; }
.story-prompt h3 { margin: 0 0 8px; font: 700 21px/1.25 var(--display); letter-spacing: -.02em; color: var(--light-color); }
.story-prompt-copy { margin: 0 0 16px; font-size: 14.5px; line-height: 1.6; color: var(--muted); }
.story-prompt-points { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0 0 22px; padding: 0; list-style: none; font-size: 12.5px; color: var(--muted); }
.story-prompt-points li { display: inline-flex; align-items: center; gap: 7px; }
.story-prompt-points i { font-size: 11px; color: var(--dim); }
.story-prompt-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.story-prompt-actions .btn { justify-content: center; min-height: 46px; padding: 12px 16px; font-size: 14.5px; }
.story-prompt-go { box-shadow: 0 12px 32px -14px var(--primary-glow); }
.story-prompt-go i { font-size: 11px; }

.story-landing { animation: storyLand .9s var(--ease) both; }
@keyframes storyLand { from { opacity: 0; transform: translateY(40px); } }

.story {
    position: fixed; inset: 0; z-index: 1200; background: var(--bg); color: var(--text);
    clip-path: inset(50% 0 50% 0); transition: clip-path .75s cubic-bezier(.7, 0, .2, 1);
}
.story[hidden] { display: none; }
.story.open { clip-path: inset(0 0 0 0); }
.story::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background:
        linear-gradient(rgba(255, 255, 255, .022) 1px, transparent 1px) 0 0 / 100% 64px,
        radial-gradient(ellipse at 70% 40%, rgba(220, 20, 60, .1), transparent 60%);
}
.story::after {
    content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; pointer-events: none; background: #fff; opacity: 0;
    box-shadow: 0 0 10px #ff2d55, 0 0 30px #dc143c;
}
.story.flash::after { animation: storyFlash .75s ease-out; }
@keyframes storyFlash { 0% { opacity: 1; transform: scaleX(0); } 30% { opacity: 1; transform: scaleX(1); } 100% { opacity: 0; transform: scaleX(1); } }

.story-scroll { position: absolute; inset: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
.story-scroll::-webkit-scrollbar { display: none; }

.story-ui {
    position: absolute; left: 0; right: 0; top: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; padding: 20px 32px 28px; pointer-events: none;
    background: linear-gradient(var(--bg) 55%, transparent);
}
.story-ui > * { pointer-events: auto; }
.story-progress { position: absolute; left: 0; right: 0; top: 0; height: 2px; background: rgba(255, 255, 255, .06); }
.story-progress i { display: block; height: 100%; background: linear-gradient(90deg, var(--primary-dark), var(--primary-color)); box-shadow: 0 0 12px var(--primary-glow); transform: scaleX(0); transform-origin: left; }
.story-chapter { margin: 0; font: 500 11px var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.story-chapter::before { content: ''; display: inline-block; width: 6px; height: 6px; margin-right: 10px; border-radius: 50%; background: var(--primary-color); box-shadow: 0 0 10px var(--primary-color); vertical-align: 1px; }
.story-exit { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid var(--border-2); border-radius: 10px; background: rgba(14, 14, 18, .7); color: var(--muted); font: 500 11px var(--mono); letter-spacing: .14em; text-transform: uppercase; cursor: pointer; transition: color .25s, border-color .25s; }
.story-exit:hover { color: var(--light-color); border-color: var(--primary-color); }
.story-exit kbd { font-size: 10px; }
.story-exit i { display: none; font-size: 15px; }

.story-thread { position: absolute; left: 34px; top: 96px; bottom: 96px; z-index: 4; width: 2px; background: rgba(255, 255, 255, .06); pointer-events: none; }
.story-thread > i { position: absolute; inset: 0; background: linear-gradient(var(--primary-dark), var(--primary-color)); box-shadow: 0 0 10px var(--primary-glow); transform: scaleY(var(--t, 0)); transform-origin: top; }
.story-thread > b { position: absolute; left: 50%; top: calc(var(--t, 0) * 100%); width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px rgba(220, 20, 60, .25), 0 0 16px var(--primary-color); }
.story-thread span {
    position: absolute; left: 50%; width: 8px; height: 8px; margin: -4px 0 0 -4px; border: 1px solid var(--border-2); border-radius: 50%; background: var(--bg);
    transition: border-color .3s, background .3s;
}
.story-thread span.on { border-color: var(--primary-color); background: var(--primary-color); }
.story-thread span.now { box-shadow: 0 0 0 4px rgba(220, 20, 60, .2); }

.story-hint {
    position: absolute; left: 50%; bottom: 26px; z-index: 5; display: flex; flex-direction: column; align-items: center; gap: 10px; margin: 0; transform: translateX(-50%);
    font: 500 10.5px var(--mono); letter-spacing: .3em; text-transform: uppercase; color: var(--dim); pointer-events: none; transition: opacity .4s;
}
.story-hint i { width: 1px; height: 40px; background: linear-gradient(var(--border-2), var(--primary-color)); }
.story.started .story-hint { opacity: 0; }

.scene { position: relative; height: 260vh; --p: 0; }
.scene-tall { height: 340vh; }
.scene-end { height: 170vh; }
.scene-stage {
    position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden;
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 56px;
    max-width: 1240px; margin: 0 auto; padding: 80px 48px 60px;
}
.scene-year {
    position: absolute; right: -2vw; bottom: -6vh; margin: 0; pointer-events: none; user-select: none; white-space: nowrap;
    font: 700 clamp(160px, 28vw, 420px)/1 var(--display); letter-spacing: -.06em; color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, .05);
    transform: translateY(calc((.5 - var(--p)) * 26vh));
}
.scene-stage { --out: clamp(0, (var(--p) - .9) * 10, 1); }
.scene-text { position: relative; z-index: 2; transform: translateY(calc((.35 - var(--p)) * 6vh - var(--out) * 4vh)); }
.scene-text, .scene-art { opacity: calc(1 - var(--out)); filter: blur(calc(var(--out) * 5px)); }
.scene-end .scene-stage { --out: 0; }
.scene-text > *, .scene-wins li { opacity: 0; transform: translateY(26px); filter: blur(6px); transition: opacity .7s var(--ease), transform .8s var(--ease), filter .7s var(--ease); }
.scene-text > .scene-wins { opacity: 1; transform: none; filter: none; }
.scene-text .on, .scene-wins li.on { opacity: 1; transform: none; filter: none; }
.scene-kicker { margin: 0 0 18px; font: 500 12px var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--primary-color); }
.scene h2 { margin: 0 0 22px; font: 700 clamp(34px, 4.4vw, 62px)/1.04 var(--display); letter-spacing: -.035em; color: var(--light-color); }
.scene-text > p:not(.scene-kicker) { margin: 0 0 16px; max-width: 540px; font-size: 18px; line-height: 1.65; color: var(--muted); }
.scene-text b { color: var(--light-color); font-weight: 600; }
.scene-text .turn { color: var(--text); border-left: 2px solid var(--primary-color); padding-left: 14px; font-style: italic; }
.scene-wins { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 10px; max-width: 540px; }
.scene-wins li { display: flex; flex-direction: column; gap: 2px; padding: 12px 16px; border: 1px solid var(--border); border-left: 2px solid var(--primary-color); border-radius: 10px; background: rgba(18, 18, 23, .7); }
.scene-wins b { font: 600 15.5px var(--display); color: var(--light-color); }
.scene-wins span { font-size: 14px; color: var(--muted); }
.scene-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

.scene-art { position: relative; z-index: 1; display: grid; place-items: center; }
.scene-art svg { width: min(100%, 470px); height: auto; overflow: visible; }
.scene-art text { font: 500 13px var(--mono); fill: var(--text); text-anchor: middle; }
.scene-art .tty text { text-anchor: start; font-size: 12.5px; }
.scene-art .p { fill: var(--primary-color); }
.scene-art .dim { fill: var(--dim); }
.scene-art .core { font: 700 20px var(--display); fill: var(--light-color); }
.scene-art .big { font: 700 26px var(--display); fill: var(--light-color); }
.scene-art .sub { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; fill: var(--muted); }
.scene-art .sub.hot { fill: var(--primary-color); }

.draw {
    fill: none; stroke: var(--text); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1;
    stroke-dashoffset: calc(1 - clamp(0, (var(--p) - var(--s, 0)) / var(--l, .3), 1));
}
.draw.thin { stroke: var(--border-2); stroke-width: 1.5; }
.draw.glow { stroke: #ff3a5c; stroke-width: 3; filter: drop-shadow(0 0 6px rgba(255, 45, 85, .8)) drop-shadow(0 0 18px rgba(220, 20, 60, .6)); }
.pop {
    --k: clamp(0, (var(--p) - var(--s, 0)) * 7, 1);
    opacity: var(--k); transform: translateY(calc((1 - var(--k)) * 10px)) scale(calc(.85 + var(--k) * .15)); transform-box: fill-box; transform-origin: center;
}
.fade-later { --gone: clamp(0, (var(--p) - var(--f, 1)) * 4, 1); }
.draw.fade-later { opacity: calc(1 - var(--gone) * .78); }
.pop.fade-later { opacity: calc(var(--k) * (1 - var(--gone) * .78)); }
.flow { --k: clamp(0, (var(--p) - var(--s, 0)) * 6, 1); fill: none; stroke: var(--primary-color); stroke-width: 2; stroke-dasharray: 3 14; opacity: var(--k); animation: flow 1.1s linear infinite; }
@keyframes flow { to { stroke-dashoffset: -17; } }

.box { fill: var(--surface); stroke: var(--border-2); stroke-width: 1.5; }
.badge { fill: rgba(46, 230, 200, .1); stroke: var(--signal); stroke-width: 1; }
.scene-art .badge-t { fill: var(--signal); font-size: 12px; }
.lock { fill: var(--primary-color); }
.lock-loop { fill: none; stroke: var(--primary-color); stroke-width: 4; }
.grow {
    --k: clamp(0, (var(--p) - var(--s, 0)) * 5, 1);
    fill: var(--surface-2); stroke: var(--border-2); stroke-width: 1; transform: scaleY(var(--k)); transform-box: fill-box; transform-origin: bottom;
}
.grow.hero-b { fill: #1d1219; stroke: rgba(220, 20, 60, .5); }
.windows rect { fill: rgba(255, 210, 120, .55); }
.chip { fill: var(--surface); stroke: var(--border-2); }
.scene-art .chip-v { font: 700 18px var(--display); fill: var(--signal); text-anchor: start; }
.scene-art .chip-l { font-size: 11px; fill: var(--muted); text-anchor: start; letter-spacing: .04em; }
.thin-line { stroke: var(--dim); stroke-width: 2; }
.star { fill: var(--primary-color); filter: drop-shadow(0 0 12px rgba(255, 45, 85, .8)); }
.ring { fill: none; stroke: rgba(255, 255, 255, .06); stroke-dasharray: 2 8; transform-origin: 200px 200px; animation: ringSpin 40s linear infinite; }
@keyframes ringSpin { to { transform: rotate(360deg); } }
.node { fill: var(--surface-2); stroke: var(--primary-color); stroke-width: 2; }
.caret-svg { fill: var(--primary-color); animation: blink 1s steps(1) infinite; }
.scene-art .q { font: 700 34px var(--display); fill: var(--dim); }
.pop.q.fade-later { opacity: calc(var(--k) * (1 - var(--gone))); }
.scene-art .ok { fill: var(--signal); }
.led { fill: var(--signal); filter: drop-shadow(0 0 4px var(--signal)); }
.clock { fill: none; stroke: var(--border-2); stroke-width: 2; }
.clock-hand { stroke: var(--primary-color); stroke-width: 2.5; stroke-linecap: round; transform-box: view-box; transform-origin: 62px 74px; transform: rotate(calc(var(--p) * 1080deg)); }
.clock-hand.short { stroke: var(--light-color); transform: rotate(calc(var(--p) * 90deg)); }
.tag { fill: rgba(220, 20, 60, .1); stroke: rgba(220, 20, 60, .5); }
.scene-art .tag-t { font-size: 11px; letter-spacing: .14em; fill: var(--light-color); }
.scene-art .ticker { font: 700 18px var(--display); fill: var(--signal); font-variant-numeric: tabular-nums; }
.scene-art .ticker .sub { font: 500 11px var(--mono); }
.signal-s { stroke: var(--signal); }
.node.sig { stroke: var(--signal); }
.pulse { --k: clamp(0, (var(--p) - var(--s, 0)) * 6, 1); fill: #fff; opacity: var(--k); offset-rotate: 0deg; filter: drop-shadow(0 0 5px var(--primary-color)); animation: pulseRun 1.6s linear infinite reverse; }
.pulse.out { animation-direction: normal; fill: var(--signal); filter: drop-shadow(0 0 5px var(--signal)); }
@keyframes pulseRun { from { offset-distance: 0%; } to { offset-distance: 100%; } }
.traveler {
    --k: clamp(0, (var(--p) - var(--s, 0)) / var(--l, .3), 1);
    fill: #fff; offset-rotate: 0deg; offset-distance: calc(var(--k) * 100%); opacity: calc(min(1, var(--k) * 20));
    filter: drop-shadow(0 0 6px #ff2d55) drop-shadow(0 0 14px #dc143c);
}
.traveler.sig { filter: drop-shadow(0 0 6px var(--signal)); }

.scene-end .scene-stage { grid-template-columns: 1fr; justify-items: center; text-align: center; }
.scene-end .scene-text > p:not(.scene-kicker) { margin-left: auto; margin-right: auto; }
.scene-end .scene-actions { justify-content: center; }
.scene-slash { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.scene-slash { z-index: 0; opacity: .55; clip-path: inset(0 calc((1 - clamp(0, var(--p) / .3, 1)) * 100%) 0 0); }
.scene-slash line { stroke: #ff3a5c; stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linecap: round; filter: drop-shadow(0 0 6px rgba(255, 45, 85, .8)) drop-shadow(0 0 18px rgba(220, 20, 60, .6)); }
.scene-end .scene-text { position: relative; z-index: 1; }

@media (max-width: 760px) {
    .story-prompt { place-items: end stretch; padding: 0; }
    .story-prompt-card {
        width: 100%; max-height: 88dvh; padding: 10px 20px calc(20px + env(safe-area-inset-bottom)); border-width: 1px 0 0; border-radius: 20px 20px 0 0;
        transform: translateY(100%); transition: opacity .2s, transform .4s cubic-bezier(.2, .8, .2, 1);
    }
    .story-prompt.show .story-prompt-card { transform: translateY(var(--drag, 0px)); }
    .story-prompt.dragging .story-prompt-card { transition: none; }
    .story-prompt-handle { display: block; width: 40px; height: 4px; margin: 0 auto 12px; border-radius: 4px; background: var(--border-2); }
    .story-prompt-head { margin-bottom: 14px; }
    .story-prompt-preview { padding: 12px 12px 8px; margin-bottom: 16px; }
    .story-prompt h3 { font-size: 20px; }
    .story-prompt-copy { font-size: 14px; }
    .story-prompt-points { margin-bottom: 18px; }
    .story-prompt-actions { grid-template-columns: 1fr; }
    .story-prompt-go { order: -1; }
    .story-ui { padding: 12px 16px 26px; }
    .scene { height: 240vh; }
    .scene-tall { height: 320vh; }
    .scene-stage { grid-template-columns: 1fr; grid-template-rows: auto 1fr; align-items: start; gap: 8px; padding: 72px 20px 28px; }
    .scene-art { order: -1; height: 30svh; }
    .scene-art { width: 100%; min-height: 0; }
    .scene-art svg { position: absolute; inset: 0; width: 100%; height: 100%; }
    .scene-tall .scene-art { height: 22svh; }
    .scene h2 { font-size: clamp(28px, 8.4vw, 38px); margin-bottom: 14px; }
    .scene-kicker { font-size: 10px; margin-bottom: 10px; letter-spacing: .14em; }
    .scene-text > p:not(.scene-kicker) { font-size: 15.5px; line-height: 1.55; margin-bottom: 10px; }
    .scene-wins { margin-top: 12px; gap: 6px; }
    .scene-wins li { padding: 8px 12px; }
    .scene-wins b { font-size: 14px; }
    .scene-wins span { font-size: 12.5px; }
    .scene-end .scene-stage { grid-template-rows: 1fr; align-items: center; }
    .scene-text { transform: translateY(calc(var(--out) * -4vh)); }
    .scene-slash { top: 14%; }
    .story-hint { bottom: 18px; }
}
@media (max-width: 1100px) {
    .story-thread { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .story, .story.open { clip-path: none; transition: none; }
    .story.flash::after { animation: none; }
    .scene-text > *, .scene-wins li { opacity: 1; transform: none; filter: none; transition: none; }
    .scene-year, .scene-text { transform: none; }
    .draw { stroke-dashoffset: 0; }
    .pop, .flow { opacity: 1; transform: none; }
    .grow { transform: none; }
    .flow, .ring, .caret-svg, .pulse { animation: none; }
    .pulse { display: none; }
    .scene-text, .scene-art { opacity: 1; filter: none; }
    .story-prompt, .story-prompt.show, .story-prompt-card, .story-prompt-scrim { transition: none; }
    .sp-line, .sp-nodes circle, .story-landing { animation: none !important; }
    .sp-line { stroke-dashoffset: 0; }
}