/* The origin story: scroll-driven diorama scenes in craft materials (felt, corduroy, pipe cleaners),
   faceless wireframe people, and a tap-along game. Shares tokens with styles.css. */
body.story { padding: 0; overflow-x: hidden; }
.story-top { position: fixed; inset: 0 0 auto 0; z-index: 5; display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 16px; background: color-mix(in srgb, var(--ground) 82%, transparent); backdrop-filter: blur(6px); border-bottom: 1px solid var(--line); }
.story-top a { color: var(--ink); text-decoration: none; font-family: var(--font-display); font-weight: 600; }
/* The back link gives way on a narrow phone; the call to action keeps its full width. */
.story-top > a:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.story-top .btn { flex: 0 0 auto; white-space: nowrap; }
.story-top .btn { padding: 6px 12px; }
.progress { position: fixed; left: 0; top: 0; height: 4px; width: 0; background: linear-gradient(90deg, var(--sp-safety), var(--sp-body), var(--sp-sensory), var(--sp-emotion), var(--sp-relationships), var(--sp-purpose), var(--sp-play), var(--sp-learning), var(--sp-habits), var(--sp-authenticity)); z-index: 6; }

.hero { min-height: 92vh; display: grid; place-items: center; text-align: center; padding: 96px 16px 40px; position: relative; overflow: hidden; }
.hero h1 { font-size: clamp(2rem, 1.3rem + 3.5vw, 4.4rem); font-weight: 500; line-height: 1.05; max-width: 14ch; margin: 0 auto; }
.hero p { max-width: 46ch; margin: 18px auto 0; color: var(--ink-2); font-size: 1.1rem; }
.hero .hint { margin-top: 36px; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-3); animation: bob 2.2s ease-in-out infinite; }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } }
.hero-wheel { width: min(380px, 72vw); margin: 0 auto 8px; }
.cover-wheel { position: relative; aspect-ratio: 1; border-radius: 50%; overflow: hidden; box-shadow: 0 18px 40px rgba(43,34,26,0.28), inset 0 0 0 6px rgba(255,255,255,0.35); will-change: transform; }
.cover-wheel img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cover-wheel .shadow { position: absolute; inset: 0; border-radius: 50%; box-shadow: inset 0 -30px 60px rgba(43,34,26,0.25); pointer-events: none; }
.cover-wheel.nocover { background: conic-gradient(var(--sp-safety), var(--sp-body), var(--sp-sensory), var(--sp-emotion), var(--sp-relationships), var(--sp-purpose), var(--sp-play), var(--sp-learning), var(--sp-habits), var(--sp-authenticity), var(--sp-safety)); }
.cover-wheel.nocover img { display: none; }
.broken-wheel { width: min(280px, 60vw); height: auto; overflow: visible; }
.broken-wheel .bw-spin { animation: wobble 2.6s ease-in-out infinite; }
.broken-wheel .loose { animation: settle 2.6s ease-in-out infinite; transform-origin: center; }
.broken-wheel .loose.l2 { animation-delay: -1.1s; }
@keyframes wobble { 0% { transform: rotate(-6deg) translateY(0); } 25% { transform: rotate(4deg) translateY(4px); } 50% { transform: rotate(-3deg) translateY(1px); } 75% { transform: rotate(7deg) translateY(5px); } 100% { transform: rotate(-6deg) translateY(0); } }
@keyframes settle { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(3px) rotate(6deg); } }
@media (prefers-reduced-motion: reduce) { .broken-wheel .bw-spin, .broken-wheel .loose { animation: none; } }

.scene { position: relative; height: 260vh; }
.scene .stage { position: sticky; top: 0; height: 100vh; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 420px); align-items: center; gap: 24px; padding: 64px 16px 16px; }
@media (max-width: 800px) { .scene .stage { grid-template-columns: 1fr; grid-template-rows: 1fr auto; padding-top: 56px; } }
.scene .art { width: 100%; height: min(70vh, 640px); }
.scene .art svg { width: 100%; height: 100%; display: block; }
.scene .copy { display: grid; gap: 12px; }
.scene .era { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--sp, var(--ink-3)); font-weight: 700; }
.scene h2 { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.6rem); }
.scene p { color: var(--ink-2); max-width: 44ch; }
.scene .meter { border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; background: var(--surface); display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; }
.scene .meter b { font-family: var(--font-display); font-size: 2rem; font-weight: 600; color: var(--sp, var(--ink)); font-variant-numeric: tabular-nums; }
.scene .meter small { display: block; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-3); }
.scene .meter .bar { grid-column: 1 / -1; height: 10px; background: var(--surface-2); border-radius: 5px; overflow: hidden; }
.scene .meter .bar i { display: block; height: 100%; width: 0; background: var(--sp, var(--accent)); border-radius: 5px; transition: width 0.15s linear; }
[data-in], [data-out] { will-change: opacity, transform; }
.scene .stage.bg-night { background: radial-gradient(ellipse at 50% 120%, #3b3550 0%, #1e1c2b 60%, #14131d 100%); color: #EFE4D0; }
.scene .stage.bg-night p { color: #cfc7b8; } .scene .stage.bg-night h2 { color: #f5ecd8; } .scene .stage.bg-night .meter { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.15); } .scene .stage.bg-night .meter small { color: #b5ad9e; }
.scene .stage.bg-dawn { background: linear-gradient(180deg, #F2D7B8 0%, #EFE4CE 55%, #D9C9A6 100%); }
.scene .stage.bg-soot { background: linear-gradient(180deg, #9FA3A8 0%, #C9C4B8 50%, #8C7A62 100%); }
.scene .stage.bg-glow { background: linear-gradient(180deg, #2A2E45 0%, #3C3F63 60%, #1E2033 100%); color: #EFE4D0; }
.scene .stage.bg-glow p { color: #cfc7d8; } .scene .stage.bg-glow h2 { color: #fff; } .scene .stage.bg-glow .meter { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.15); } .scene .stage.bg-glow .meter small { color: #b8b3c8; }
.scene .stage.bg-storm { background: radial-gradient(circle at 50% 40%, #F6EAD3 0%, #E8D2B0 45%, #D9B58F 100%); }
:root[data-theme="dark"] .scene .stage.bg-dawn, :root[data-theme="dark"] .scene .stage.bg-storm { filter: brightness(0.8); }

/* Craft materials */
.felt { filter: url(#felt); }
.fuzzy { filter: url(#fuzzy); }
.wire { fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.wire-head { fill: none; stroke: currentColor; stroke-width: 3; }
.ping { fill: var(--coral); stroke: #fff; stroke-width: 2; }

/* The road */
.road { padding: 120px 16px; max-width: 1100px; margin: 0 auto; display: grid; gap: 24px; }
.road h2 { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.6rem); max-width: 24ch; }
.road .track { position: relative; margin-bottom: 68px; height: 64px; border-radius: 32px; background: repeating-linear-gradient(90deg, #6E4E33 0 18px, #7A5839 18px 36px); box-shadow: inset 0 3px 8px rgba(0,0,0,0.25); overflow: visible; }
.road .track .mark { position: absolute; top: 0; bottom: 0; width: 3px; background: var(--paper, #fff); }
.road .track .mark span { position: absolute; top: 72px; left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: 0.78rem; color: var(--ink-2); }
/* Labels at the ends of the track anchor inward instead of centring, or they run off a phone. */
.road .track .mark.start span { left: 0; transform: none; }
.road .track .mark.end span { left: auto; right: 0; transform: none; }
.road .track .mark.below span { top: 94px; }
.road .track .sliver { position: absolute; right: 0; top: -8px; bottom: -8px; width: 3px; background: var(--coral); box-shadow: 0 0 0 4px color-mix(in srgb, var(--coral) 35%, transparent); }
.road .zoom { margin-top: 24px; display: grid; grid-template-columns: 1fr; gap: 10px; }
.road .zoom .track { background: repeating-linear-gradient(90deg, #B5533C 0 24px, #C4644C 24px 48px); }
.road .legend { font-size: 0.9rem; color: var(--ink-2); }
.road .stat { font-family: var(--font-display); font-size: clamp(1.4rem, 1rem + 1.5vw, 2.2rem); }

/* Game */
.game { padding: 80px 16px 120px; max-width: 900px; margin: 0 auto; display: grid; gap: 18px; }
.game h2 { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.6rem); }
.game .board { position: relative; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 14px; box-shadow: var(--shadow); overflow: hidden; user-select: none; -webkit-user-select: none; touch-action: manipulation; }
.game canvas { display: block; width: 100%; height: auto; }
.game .hud { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 14px; border-top: 1px solid var(--line); flex-wrap: wrap; font-size: 0.9rem; }
.game .hud b { font-family: var(--font-display); font-size: 1.4rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.game .hud .era { color: var(--ink-2); }
.game .hud .hr { color: var(--coral); }
.game .overlay { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: 24px; background: color-mix(in srgb, var(--surface) 88%, transparent); backdrop-filter: blur(3px); }
.game .overlay .box { display: grid; gap: 12px; max-width: 46ch; }
.game .overlay h3 { font-size: 1.6rem; }
.game .result { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; text-align: center; }
.game .result div { border: 1px solid var(--line); border-radius: 8px; padding: 8px; background: var(--surface); }
.game .result b { display: block; font-family: var(--font-display); font-size: 1.6rem; font-weight: 600; }
.game .result small { color: var(--ink-3); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; }
.ending { text-align: center; padding: 40px 16px 120px; display: grid; gap: 14px; justify-items: center; }
.ending h2 { font-size: clamp(1.8rem, 1.3rem + 2vw, 3rem); max-width: 22ch; }
.ending p { max-width: 50ch; color: var(--ink-2); }
@media (prefers-reduced-motion: reduce) { .hero .hint { animation: none; } }