:root{--black:#050505;--cyan:#4FC2CC;--pink:#ED5FA1;--yellow:#F5E50C;--white:#f5f2e9;--muted:#aaa;--px:'Press Start 2P',monospace;--body:'Space Grotesk',system-ui,sans-serif}
*{box-sizing:border-box}html{background:var(--black);color:var(--white);scroll-behavior:auto}body{margin:0;background:var(--black);font-family:var(--body);font-weight:400;overflow-x:hidden}button,a{font:inherit}button{cursor:pointer}a{color:inherit;text-decoration:none}img{display:block;max-width:100%}
.hud{position:fixed;z-index:80;top:0;left:0;right:0;display:grid;grid-template-columns:1fr auto;align-items:center;gap:16px;padding:18px 22px;pointer-events:none;mix-blend-mode:normal}.hud-brand{pointer-events:auto;width:138px}.hud-brand img{width:100%;height:auto}.hud-chapter{font-family:var(--px);font-size:8px;letter-spacing:.02em;display:flex;gap:8px;align-items:center;color:rgba(255,255,255,.82)}.hud-chapter b{color:var(--pink)}.hud-progress{position:absolute;left:22px;right:22px;bottom:4px;height:2px;background:rgba(255,255,255,.13)}.hud-progress i{display:block;width:0;height:100%;background:linear-gradient(90deg,var(--cyan),var(--yellow),var(--pink))}
.experience{height:1000svh;position:relative}.stage{position:sticky;top:0;height:100svh;min-height:520px;overflow:hidden;background:#050505;isolation:isolate;perspective:1000px}.world-grid{position:absolute;inset:-25%;background-image:linear-gradient(rgba(79,194,204,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(79,194,204,.08) 1px,transparent 1px);background-size:46px 46px;transform:rotateX(66deg) translateY(52%) scale(1.35);transform-origin:center bottom;opacity:.32;z-index:-3}.stars i{position:absolute;width:4px;height:4px;background:var(--white);opacity:.5}.stars i:nth-child(1){left:7%;top:24%}.stars i:nth-child(2){left:14%;top:62%;background:var(--cyan)}.stars i:nth-child(3){left:86%;top:18%;background:var(--pink)}.stars i:nth-child(4){left:77%;top:68%}.stars i:nth-child(5){left:51%;top:15%;background:var(--yellow)}.stars i:nth-child(6){left:91%;top:48%}.stars i:nth-child(7){left:33%;top:73%;background:var(--cyan)}.stars i:nth-child(8){left:61%;top:78%;background:var(--pink)}
.scene{position:absolute;inset:0;display:grid;align-items:center;padding:clamp(74px,10vw,122px) clamp(20px,7vw,112px) clamp(34px,6vw,70px);opacity:0;visibility:hidden;pointer-events:none;will-change:transform,opacity}.scene.is-visible{visibility:visible}.scene.is-active{pointer-events:auto}.scene-label{font-family:var(--px);font-size:9px;line-height:1.6;color:var(--cyan);display:block;margin-bottom:20px}.scene-label.dark{color:#050505}.scene h2{font-family:var(--px);font-weight:400;font-size:clamp(36px,6.6vw,94px);line-height:1.14;letter-spacing:-.04em;margin:0}.scene h2 span{color:var(--pink)}.scene p{font-size:clamp(17px,1.7vw,25px);line-height:1.45;max-width:650px;margin:22px 0 0}.pixel-button{display:inline-flex;align-items:center;justify-content:space-between;gap:36px;margin-top:30px;padding:19px 22px;border:0;background:var(--yellow);color:#050505;font-family:var(--px);font-size:10px;box-shadow:6px 6px 0 var(--cyan);min-width:min(360px,100%)}.pixel-button.pink{background:var(--pink);box-shadow:6px 6px 0 var(--cyan)}.pixel-button b{font-size:20px}
.coin{position:absolute;z-index:65;width:46px;height:46px;border:5px solid #050505;background:var(--yellow);box-shadow:0 0 0 4px var(--pink),8px 8px 0 rgba(0,0,0,.32);display:grid;place-items:center;left:50%;top:50%;transform:translate(-50%,-50%);will-change:transform,opacity}.coin span{font-family:var(--px);font-size:17px;color:#050505}.guide{position:absolute;z-index:45;left:0;top:0;width:clamp(110px,18vw,260px);opacity:0;pointer-events:none;image-rendering:pixelated;will-change:transform,opacity}.continue-cue{position:absolute;z-index:70;left:50%;bottom:max(18px,env(safe-area-inset-bottom));transform:translateX(-50%);display:flex;align-items:center;gap:10px;font-family:var(--px);font-size:8px;color:rgba(255,255,255,.68);transition:opacity .2s}.continue-cue i{font-style:normal;color:var(--yellow);font-size:16px;animation:bob 1s steps(2,end) infinite}@keyframes bob{50%{transform:translateY(5px)}}
.scene-insert{place-items:center;text-align:center}.insert-center{width:min(760px,92vw);display:grid;justify-items:center}.insert-meta{font-family:var(--px);font-size:8px;color:var(--cyan);margin-bottom:24px}.insert-center h1{font-family:var(--px);font-size:clamp(58px,10vw,150px);font-weight:400;line-height:1.04;margin:0;color:var(--white);text-shadow:8px 8px 0 rgba(79,194,204,.22)}.insert-center h1 span{color:var(--yellow)}.insert-center p{margin:26px 0 30px;font-size:clamp(16px,2vw,22px);color:#bbb}.slot{width:150px;height:54px;border:3px solid var(--cyan);padding:13px;background:#080808;box-shadow:6px 6px 0 var(--pink)}.slot i{display:block;height:8px;background:#000;border:2px solid #333}.scroll-hint{margin-top:30px;font-family:var(--px);font-size:8px;display:flex;align-items:center;gap:13px;color:#ddd}.scroll-hint svg{width:18px;height:24px;stroke:var(--pink);fill:none;stroke-width:2;animation:bob 1s steps(2,end) infinite}
.scene-boot{grid-template-columns:minmax(260px,.9fr) 1fr;gap:clamp(30px,8vw,120px)}.cabinet-wrap{display:grid;place-items:center;transform-style:preserve-3d}.cabinet{width:min(370px,78vw);aspect-ratio:.78;background:#111;border:7px solid var(--cyan);box-shadow:14px 14px 0 var(--pink);padding:20px 18px 26px;position:relative;transform:rotateY(-8deg) rotateX(2deg)}.cabinet-marquee{font-family:var(--px);font-size:16px;text-align:center;color:var(--yellow);padding:14px 6px;border:4px solid var(--pink);margin-bottom:18px}.cabinet-screen{height:48%;border:7px solid #222;background:#020202;display:grid;place-items:center;box-shadow:inset 0 0 0 2px #000;overflow:hidden}.boot-lines{font-family:var(--px);text-align:left;width:80%;color:var(--cyan);font-size:8px;line-height:2}.boot-lines b{display:block;color:var(--yellow);font-size:clamp(28px,5vw,56px);line-height:1.2}.boot-lines small{color:var(--pink)}.cabinet-panel{height:70px;display:flex;align-items:center;justify-content:center;gap:15px}.cabinet-panel i{width:20px;height:20px;background:var(--pink);box-shadow:4px 4px 0 #000}.cabinet-panel i:nth-child(2){background:var(--yellow)}.cabinet-panel i:nth-child(3){background:var(--cyan)}.cabinet-panel i:nth-child(4){width:44px}.cabinet-slot{position:absolute;bottom:18px;right:30px;width:54px;height:10px;background:#000;border:2px solid #444}.boot-copy{max-width:650px}.boot-copy h2{color:var(--yellow)}
.scene-blog{grid-template-columns:1.2fr .8fr;gap:clamp(26px,7vw,90px)}.crt{width:min(760px,100%);aspect-ratio:1.42;background:#181818;border:8px solid #303030;box-shadow:14px 14px 0 var(--cyan);padding:18px;transform:rotateY(8deg);transform-style:preserve-3d}.crt-top{height:34px;background:var(--white);color:#050505;display:flex;justify-content:space-between;align-items:center;padding:0 12px;font-family:var(--px);font-size:7px}.crt-top b{color:#050505}.crt-body{height:calc(100% - 34px);background:#070707;border:4px solid #050505;padding:clamp(18px,4vw,38px);display:grid;grid-template-columns:.7fr 1.3fr;align-items:center;gap:24px;position:relative;overflow:hidden}.crt-body:after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent 0 3px,rgba(255,255,255,.035) 3px 4px);pointer-events:none}.blog-pixel-logo img{width:100%;max-height:230px}.blog-copy{display:grid;gap:16px;font-family:var(--px);font-size:clamp(8px,1.3vw,13px);line-height:1.6}.blog-copy strong{color:var(--yellow);font-size:1.5em}.blog-copy span:nth-child(2){color:var(--cyan)}.blog-copy span:nth-child(3){color:var(--pink)}.blog-bars{position:absolute;left:0;right:0;bottom:0;height:24px;display:flex}.blog-bars i{flex:1}.blog-bars i:nth-child(1){background:var(--yellow)}.blog-bars i:nth-child(2){background:var(--pink)}.blog-bars i:nth-child(3){background:var(--cyan)}.blog-bars i:nth-child(4){background:var(--yellow)}.blog-bars i:nth-child(5){background:var(--pink)}.blog-caption{align-self:end;padding-bottom:6vh}.blog-caption p{max-width:440px}
.scene-radio{grid-template-columns:1.25fr .75fr;gap:clamp(28px,7vw,100px)}.radio-wrap{max-width:760px}.radio-title{font-family:var(--px);font-size:clamp(48px,8vw,118px);color:var(--pink);line-height:1}.frequency{margin-top:45px}.frequency-track{height:14px;background:#1b1b1b;border:3px solid var(--white);position:relative}.frequency-track:before{content:"";position:absolute;left:0;right:0;top:50%;height:2px;background:var(--cyan)}.frequency-track i{position:absolute;top:50%;left:45%;width:30px;height:48px;background:var(--yellow);border:4px solid #050505;transform:translate(-50%,-50%);box-shadow:4px 4px 0 var(--pink)}.frequency-marks{display:flex;justify-content:space-between;margin-top:12px;font-family:var(--px);font-size:7px;color:#aaa}.wave{display:flex;align-items:end;gap:6px;height:150px;margin-top:40px}.wave i{flex:1;background:var(--cyan);height:30%;min-width:3px}.wave i:nth-child(3n){background:var(--yellow);height:70%}.wave i:nth-child(4n){background:var(--pink);height:95%}.radio-copy h2{color:var(--white)}
.scene-night{overflow:hidden}.night-floor{position:absolute;inset:45% -30% -40%;background-image:linear-gradient(rgba(237,95,161,.38) 2px,transparent 2px),linear-gradient(90deg,rgba(79,194,204,.38) 2px,transparent 2px);background-size:62px 62px;transform:perspective(540px) rotateX(66deg);transform-origin:center top}.night-sign{position:absolute;right:6vw;top:16vh;font-family:var(--px);font-size:clamp(52px,10vw,150px);color:var(--yellow);text-shadow:8px 8px 0 var(--pink);transform:rotate(4deg)}.night-copy{position:relative;z-index:5;align-self:center;max-width:650px}.night-copy h2{color:var(--cyan)}.memory-float{position:absolute;inset:0;perspective:1000px;pointer-events:none}.memory-float img{position:absolute;width:clamp(90px,15vw,210px);border:5px solid #fff;box-shadow:12px 12px 0 rgba(0,0,0,.55);object-fit:cover}.memory-float img:nth-child(1){left:58%;top:23%;transform:rotate(-8deg) translateZ(30px)}.memory-float img:nth-child(2){left:75%;top:48%;transform:rotate(7deg) translateZ(80px)}.memory-float img:nth-child(3){left:47%;top:65%;transform:rotate(5deg) translateZ(130px)}.memory-float img:nth-child(4){left:82%;top:14%;transform:rotate(-4deg) translateZ(160px)}.memory-float img:nth-child(5){left:66%;top:73%;transform:rotate(-10deg) translateZ(200px)}
.scene-memory{place-items:center;text-align:center;overflow:hidden}.memory-center{position:relative;z-index:15;max-width:760px}.memory-center h2 span{color:var(--yellow)}.memory-center p{margin-inline:auto}.memory-tunnel{position:absolute;inset:0;perspective:900px;transform-style:preserve-3d}.memory-tunnel img{position:absolute;width:clamp(110px,18vw,260px);max-height:38vh;object-fit:cover;border:5px solid #fff;box-shadow:10px 10px 0 #000}.memory-tunnel img:nth-child(1){left:5%;top:16%;transform:translateZ(-200px) rotate(-8deg)}.memory-tunnel img:nth-child(2){right:4%;top:13%;transform:translateZ(-120px) rotate(8deg)}.memory-tunnel img:nth-child(3){left:12%;bottom:10%;transform:translateZ(10px) rotate(5deg)}.memory-tunnel img:nth-child(4){right:12%;bottom:7%;transform:translateZ(80px) rotate(-6deg)}.memory-tunnel img:nth-child(5){left:38%;top:4%;transform:translateZ(-280px) rotate(3deg)}.memory-tunnel img:nth-child(6){right:37%;bottom:1%;transform:translateZ(-60px) rotate(-3deg)}
.scene-archive{grid-template-columns:1fr 1fr;gap:clamp(30px,8vw,120px)}.archive-drawer{height:min(540px,66vh);position:relative;perspective:1000px;transform-style:preserve-3d}.drawer-back{position:absolute;inset:14% 5% 12%;background:#111;border:6px solid var(--cyan);box-shadow:12px 12px 0 var(--pink)}.drawer-stack{position:absolute;inset:10% 12% 20%;transform-style:preserve-3d}.drawer-stack img{position:absolute;width:45%;max-height:58%;object-fit:cover;border:5px solid #fff;box-shadow:8px 8px 0 #000}.drawer-stack img:nth-child(1){left:2%;top:4%;transform:rotate(-7deg) translateZ(20px)}.drawer-stack img:nth-child(2){right:5%;top:10%;transform:rotate(8deg) translateZ(50px)}.drawer-stack img:nth-child(3){left:18%;bottom:2%;transform:rotate(4deg) translateZ(80px)}.drawer-stack img:nth-child(4){right:13%;bottom:0;transform:rotate(-5deg) translateZ(110px)}.drawer-front{position:absolute;left:0;right:0;bottom:2%;height:26%;background:var(--pink);border:6px solid #050505;box-shadow:0 12px 0 var(--cyan);display:grid;place-items:center;font-family:var(--px);font-size:clamp(16px,2.5vw,30px);color:#050505}.archive-copy h2 span{color:var(--yellow)}
.scene-quest{background:var(--yellow);color:#050505;grid-template-columns:.45fr 1.2fr;gap:clamp(30px,8vw,120px)}.quest-token{font-family:var(--px);font-size:clamp(80px,18vw,240px);width:1em;height:1em;background:var(--pink);display:grid;place-items:center;border:10px solid #050505;box-shadow:18px 18px 0 var(--cyan);transform:rotate(-8deg)}.quest-copy h2{font-size:clamp(46px,8vw,112px)}.quest-copy p{color:#111}.quest-strong{font-weight:700!important}.quest-cta{display:flex;justify-content:space-between;align-items:center;gap:24px;background:#050505;color:#fff;margin-top:28px;padding:20px 22px;font-family:var(--px);font-size:9px;box-shadow:8px 8px 0 var(--pink);max-width:620px}.quest-cta b{font-size:20px;color:var(--yellow)}
.scene-game{grid-template-columns:1fr 1fr;gap:clamp(30px,8vw,120px)}.portal{width:min(480px,78vw);aspect-ratio:1;place-self:center;position:relative;display:grid;place-items:center;perspective:800px}.portal-ring{position:absolute;inset:8%;border:10px solid var(--cyan);transform:rotate(45deg)}.ring-b{inset:20%;border-color:var(--pink);transform:rotate(-22deg)}.ring-c{inset:32%;border-color:var(--yellow);transform:rotate(12deg)}.portal-core{font-family:var(--px);font-size:clamp(26px,5vw,60px);color:#fff}.game-copy h2 span{color:var(--pink)}
.scene-final{place-items:center}.final-lockup{width:min(1100px,94vw);display:grid;grid-template-columns:minmax(130px,.55fr) 1.45fr;align-items:center;gap:clamp(26px,7vw,90px)}.final-lockup>img{width:100%;max-width:300px;justify-self:center}.final-lockup h2{font-size:clamp(38px,7vw,94px)}.final-lockup h2 span{color:var(--cyan)}.final-links{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}.final-links a{border:2px solid #fff;padding:12px 14px;font-family:var(--px);font-size:7px}.final-links a:first-child{background:var(--yellow);color:#050505;border-color:var(--yellow)}.restart{position:absolute;right:24px;bottom:26px;background:transparent;border:0;color:#aaa;font-family:var(--px);font-size:7px}
.archive-overlay{position:fixed;z-index:150;inset:0;background:#050505;overflow:auto;opacity:0;visibility:hidden;transition:opacity .22s}.archive-overlay.open{opacity:1;visibility:visible}.archive-top{position:sticky;top:0;z-index:5;background:rgba(5,5,5,.95);display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid #242424}.archive-brand{display:flex;align-items:center;gap:18px;font-family:var(--px);font-size:7px}.archive-brand img{width:130px}.close-btn{background:var(--pink);border:0;padding:13px 16px;font-family:var(--px);font-size:7px;color:#050505}.archive-gallery{padding:clamp(48px,8vw,100px) clamp(16px,5vw,70px)}.archive-intro{max-width:780px;margin-bottom:50px}.archive-intro>span{font-family:var(--px);font-size:8px;color:var(--cyan)}.archive-intro h2{font-family:var(--px);font-size:clamp(30px,5vw,68px);line-height:1.15;font-weight:400;margin:18px 0}.archive-intro p{font-size:18px;color:#bbb;max-width:620px}.poster-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.poster-card{aspect-ratio:4/5;overflow:hidden;background:#111;border:0;padding:0;cursor:pointer}.poster-card img{width:100%;height:100%;object-fit:cover;filter:grayscale(1);transition:filter .25s,transform .25s}.poster-card:hover img,.poster-card:focus-visible img{filter:grayscale(0);transform:scale(1.02)}.lightbox{position:fixed;z-index:20;inset:0;background:rgba(0,0,0,.96);display:grid;grid-template-columns:64px 1fr 64px;align-items:center;opacity:0;visibility:hidden}.lightbox.open{opacity:1;visibility:visible}.lightbox-stage{height:86vh;display:grid;place-items:center}.lightbox-stage img{max-width:100%;max-height:100%;object-fit:contain}.lightbox-close{position:absolute;right:18px;top:18px;background:var(--pink);border:0;width:48px;height:48px;font-size:24px}.lightbox-nav{background:transparent;border:0;color:#fff;font-size:28px;height:100%}.lightbox-count{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);font-family:var(--px);font-size:7px;color:#aaa}
@media(max-width:760px){.hud{padding:14px 14px}.hud-brand{width:104px}.hud-chapter{font-size:6px}.hud-progress{left:14px;right:14px}.experience{height:1080svh}.stage{height:100svh;min-height:560px}.scene{padding:72px 18px 46px;align-items:center}.scene h2{font-size:clamp(32px,10vw,52px);line-height:1.2}.scene p{font-size:17px;line-height:1.45}.scene-label{font-size:7px;margin-bottom:14px}.coin{width:38px;height:38px;border-width:4px}.guide{width:120px}.continue-cue{font-size:6px}.insert-center h1{font-size:clamp(48px,16vw,76px);text-shadow:5px 5px 0 rgba(79,194,204,.22)}.insert-center p{font-size:16px}.slot{width:126px;height:48px}.scene-boot,.scene-blog,.scene-radio,.scene-archive,.scene-quest,.scene-game{grid-template-columns:1fr;gap:18px}.scene-boot{align-content:center}.cabinet{width:min(260px,66vw);padding:12px;border-width:5px;box-shadow:8px 8px 0 var(--pink)}.cabinet-marquee{font-size:10px;padding:10px;margin-bottom:10px}.cabinet-panel{height:42px}.cabinet-panel i{width:14px;height:14px}.boot-copy{align-self:start}.crt{width:100%;aspect-ratio:1.3;border-width:5px;padding:10px;box-shadow:7px 7px 0 var(--cyan);transform:none}.crt-top{height:28px;font-size:5px}.crt-body{grid-template-columns:.65fr 1.35fr;padding:14px;gap:10px}.blog-copy{font-size:6px;gap:8px}.blog-caption{padding:0;align-self:auto}.radio-wrap{width:100%;align-self:end}.radio-title{font-size:clamp(42px,16vw,72px)}.frequency{margin-top:20px}.wave{height:72px;margin-top:18px;gap:3px}.radio-copy{align-self:start}.night-sign{top:12%;right:4%;font-size:clamp(38px,16vw,76px)}.night-copy{max-width:76%;align-self:end;padding-bottom:7vh}.night-floor{inset:50% -70% -45%;background-size:40px 40px}.memory-float img{width:24vw;max-width:104px;border-width:3px;box-shadow:5px 5px 0 #000}.memory-float img:nth-child(1){left:61%;top:25%}.memory-float img:nth-child(2){left:72%;top:48%}.memory-float img:nth-child(3){left:44%;top:62%}.memory-float img:nth-child(4){left:74%;top:13%}.memory-float img:nth-child(5){left:62%;top:72%}.memory-center{padding:0 16px}.memory-center p{font-size:16px}.memory-tunnel img{width:25vw;max-width:110px;border-width:3px;box-shadow:5px 5px 0 #000}.scene-archive{align-content:center}.archive-drawer{height:34vh;min-height:230px}.drawer-back{inset:12% 3% 12%;border-width:4px;box-shadow:6px 6px 0 var(--pink)}.drawer-stack img{border-width:3px;box-shadow:4px 4px 0 #000}.drawer-front{border-width:4px;box-shadow:0 7px 0 var(--cyan);font-size:13px}.archive-copy p{font-size:16px}.pixel-button{margin-top:18px;padding:16px;font-size:8px;min-width:0;width:100%;box-shadow:5px 5px 0 var(--cyan)}.scene-quest{align-content:center;padding-top:80px;padding-bottom:50px}.quest-token{width:92px;height:92px;font-size:52px;border-width:6px;box-shadow:8px 8px 0 var(--cyan);justify-self:start}.quest-copy h2{font-size:clamp(40px,14vw,66px)}.quest-copy p{font-size:16px}.quest-cta{font-size:7px;padding:16px;box-shadow:5px 5px 0 var(--pink)}.scene-game{align-content:center}.portal{width:min(230px,58vw);justify-self:center}.portal-ring{border-width:6px}.game-copy p{font-size:16px}.final-lockup{grid-template-columns:1fr;text-align:center;gap:18px}.final-lockup>img{width:120px}.final-lockup h2{font-size:clamp(30px,9vw,46px)}.final-links{justify-content:center}.final-links a{font-size:6px;padding:10px}.restart{right:14px;bottom:16px}.poster-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.archive-top{padding:12px}.archive-brand span{display:none}.archive-brand img{width:100px}.lightbox{grid-template-columns:42px 1fr 42px}.lightbox-stage{height:78vh}.lightbox-nav{font-size:22px}.world-grid{background-size:34px 34px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.continue-cue i,.scroll-hint svg{animation:none}.coin,.guide,.scene,.world-grid{transition:none!important}}

/* v3 — deterministic story navigation + mobile polish */
html.story-mode,body.story-mode{height:100%;overflow:hidden;overscroll-behavior:none}
.story-mode .experience{height:100dvh;min-height:100dvh}
.story-mode .stage{height:100dvh;min-height:0;position:relative;top:auto;touch-action:none;overscroll-behavior:none}
.story-mode .continue-cue{pointer-events:auto;cursor:pointer}
.scene,.coin,.guide,.portal,.archive-drawer,.quest-token,.cabinet,.drawer-front,.drawer-stack{will-change:transform,opacity}
.cabinet,.slot,.blog-bars i,.wave i,.drawer-front,.drawer-stack,.quest-token,.final-lockup>img{transition:none}
.archive-overlay,.lightbox{touch-action:pan-y}

/* Main quest: fit as a complete mobile composition */
@media(max-width:760px){
  .scene-quest{display:grid;grid-template-columns:1fr;grid-template-rows:auto 1fr;align-content:center;gap:14px;padding:68px 18px 26px;overflow:hidden}
  .quest-token{position:absolute;right:18px;top:76px;width:64px;height:64px;font-size:34px;border-width:4px;box-shadow:6px 6px 0 var(--cyan);opacity:.92;z-index:1}
  .quest-copy{position:relative;z-index:2;align-self:center;max-width:100%}
  .quest-copy .scene-label{padding-right:76px;margin-bottom:12px}
  .quest-copy h2{font-size:clamp(34px,12.2vw,52px);line-height:1.08;letter-spacing:-.045em;max-width:90%;margin:0 0 12px}
  .quest-copy p{font-size:clamp(13px,3.8vw,16px);line-height:1.36;margin:10px 0 0;max-width:100%}
  .quest-copy .quest-strong{font-size:clamp(13px,3.7vw,15px);margin-top:10px!important}
  .quest-cta{width:100%;max-width:none;margin-top:16px;padding:15px 13px;font-size:clamp(5.7px,1.8vw,7px);line-height:1.45;gap:10px;box-shadow:5px 5px 0 var(--pink)}
  .quest-cta b{font-size:15px;flex:none}
}
@media(max-width:360px){
  .quest-token{width:54px;height:54px;font-size:28px;right:14px;top:70px}
  .quest-copy .scene-label{padding-right:58px}
  .quest-copy h2{font-size:clamp(30px,11.5vw,40px);max-width:92%}
  .quest-copy p{font-size:13px;line-height:1.3}
  .quest-copy .quest-strong{font-size:12.5px}
  .quest-cta{font-size:5.4px;padding:13px 11px;margin-top:13px}
}
@media(max-height:650px) and (max-width:760px){
  .hud{padding-top:10px}
  .scene-quest{padding-top:58px;padding-bottom:18px;gap:8px}
  .quest-token{top:61px;width:48px;height:48px;font-size:24px;box-shadow:4px 4px 0 var(--cyan)}
  .quest-copy h2{font-size:30px;margin-bottom:8px;max-width:86%}
  .quest-copy p{font-size:12.5px;line-height:1.26;margin-top:7px}
  .quest-copy .quest-strong{font-size:12px;margin-top:7px!important}
  .quest-cta{padding:11px 10px;margin-top:10px;font-size:5px;box-shadow:4px 4px 0 var(--pink)}
  .scene-label{margin-bottom:8px}
}

/* tighter mobile scene rhythm without overlap */
@media(max-width:760px){
  .stage{overflow:hidden}
  .scene{inset:0;min-height:0;overflow:hidden}
  .scene-night .night-copy{padding-bottom:4dvh}
  .memory-center{max-width:92vw}
  .scene-final{padding-bottom:54px}
  .continue-cue{bottom:14px}
}

/* v3 desktop performance + legibility patch */
.scene{will-change:auto;backface-visibility:hidden}
.scene.is-visible{will-change:transform,opacity}
/* Narrative copy always sits above moving coins, guide characters, photographs and props. */
.boot-copy,.blog-caption,.radio-copy,.night-copy,.memory-center,.archive-copy,.quest-copy,.game-copy,.final-lockup{position:relative;z-index:52}
.coin{z-index:38}
.guide{z-index:34}
.cabinet-wrap,.crt,.radio-wrap,.archive-drawer,.portal{position:relative;z-index:12}
.night-floor{z-index:0}
.night-sign{z-index:6}
.memory-float,.memory-tunnel{z-index:8}
.quest-token{position:relative;z-index:10}
/* Keep decorative media away from the primary reading zone on desktop. */
@media(min-width:761px){
  .night-copy{max-width:min(620px,46vw);padding:24px 26px 24px 0;background:linear-gradient(90deg,rgba(5,5,5,.88) 0%,rgba(5,5,5,.58) 72%,transparent 100%)}
  .scene-memory .memory-center{padding:28px 42px;background:radial-gradient(ellipse at center,rgba(5,5,5,.9) 0%,rgba(5,5,5,.72) 62%,transparent 100%)}
  .archive-copy,.radio-copy,.blog-caption,.game-copy{isolation:isolate}
}
/* Short desktop viewports need slightly tighter composition so copy stays clear of HUD/footer cues. */
@media(min-width:761px) and (max-height:760px){
  .scene{padding-top:82px;padding-bottom:44px}
  .scene h2{font-size:clamp(34px,5.3vw,72px)}
  .scene p{font-size:clamp(16px,1.45vw,21px);margin-top:16px}
  .scene-label{margin-bottom:13px}
  .radio-title{font-size:clamp(44px,7vw,86px)}
  .wave{height:104px;margin-top:24px}
  .frequency{margin-top:28px}
  .archive-drawer{height:min(450px,60vh)}
  .quest-copy h2{font-size:clamp(42px,6.5vw,80px)}
  .quest-copy p{margin-top:14px}
  .quest-cta{margin-top:18px;padding:16px 18px}
}

/* v3 playlist scene — lightweight custom Spotify handoff */
.scene-playlist{grid-template-columns:minmax(0,.86fr) minmax(420px,1.14fr);gap:clamp(34px,7vw,110px);background:
  radial-gradient(circle at 78% 28%,rgba(79,194,204,.09),transparent 31%),
  radial-gradient(circle at 18% 72%,rgba(237,95,161,.07),transparent 34%)}
.playlist-copy{position:relative;z-index:52;max-width:650px}
.playlist-copy h2 span{color:var(--yellow)}
.playlist-cta{display:flex;align-items:center;justify-content:space-between;gap:22px;width:min(420px,100%);margin-top:30px;padding:18px 20px;background:var(--yellow);color:#050505;border:0;font-family:var(--px);font-size:9px;box-shadow:7px 7px 0 var(--pink)}
.playlist-cta svg{width:24px;height:24px;fill:none;stroke:#050505;stroke-width:2.5;stroke-linecap:square;stroke-linejoin:miter;flex:none}
.playlist-terminal{position:relative;z-index:14;width:min(690px,100%);justify-self:end;background:#090909;border:2px solid rgba(79,194,204,.55);box-shadow:12px 12px 0 rgba(237,95,161,.28);padding:22px;overflow:hidden;contain:layout paint style}
.playlist-terminal:before{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(255,255,255,.025) 0,rgba(255,255,255,.025) 1px,transparent 1px,transparent 4px);opacity:.55}
.playlist-head{position:relative;display:flex;justify-content:space-between;align-items:end;gap:20px;padding-bottom:16px;border-bottom:1px solid rgba(255,255,255,.14)}
.playlist-head>div{display:grid;gap:8px}.playlist-head span,.playlist-foot{font-family:var(--px);font-size:6px;color:#7d8587;letter-spacing:.02em}.playlist-head b{font-family:var(--px);font-size:11px;color:var(--cyan);font-weight:400}.playlist-head>strong{font-family:var(--px);font-size:15px;color:var(--yellow);font-weight:400}
.playlist-eq{height:48px;display:flex;align-items:end;gap:5px;margin:17px 0 8px;overflow:hidden}
.playlist-eq i{display:block;flex:1;max-width:24px;min-width:4px;background:linear-gradient(180deg,var(--pink),var(--yellow));height:28%;transform-origin:bottom}
.scene-playlist.is-active .playlist-eq i{animation:playlistEq .9s steps(4,end) infinite alternate}
.playlist-eq i:nth-child(2n){animation-delay:-.25s}.playlist-eq i:nth-child(3n){animation-delay:-.5s}.playlist-eq i:nth-child(4n){animation-delay:-.7s}
@keyframes playlistEq{0%{transform:scaleY(.32)}33%{transform:scaleY(.95)}67%{transform:scaleY(.54)}100%{transform:scaleY(1.35)}}
.playlist-tracks{position:relative;display:grid}
.playlist-track{display:grid;grid-template-columns:30px minmax(0,1fr) auto;align-items:center;gap:12px;padding:11px 4px;border-bottom:1px solid rgba(255,255,255,.09)}
.playlist-track em{font-family:var(--px);font-style:normal;font-size:6px;color:#72797b}.playlist-track>div{min-width:0;display:grid;gap:2px}.playlist-track strong{font-size:14px;line-height:1.2;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.playlist-track span{font-size:11px;color:#7f8586;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.playlist-track time{font-family:var(--px);font-size:6px;color:#8c9293}
.scene-playlist.is-active .playlist-track:nth-child(3){background:rgba(79,194,204,.09)}
.scene-playlist.is-active .playlist-track:nth-child(3) em,.scene-playlist.is-active .playlist-track:nth-child(3) strong{color:var(--cyan)}
.playlist-foot{position:relative;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;padding-top:15px}.playlist-foot i{height:1px;background:linear-gradient(90deg,var(--cyan),var(--yellow),var(--pink))}

/* Playlist copy is always above the moving narrative props. */
.playlist-copy{z-index:52}

@media(max-width:760px){
  .scene-playlist{grid-template-columns:1fr;align-content:center;gap:16px;padding-top:72px;padding-bottom:46px}
  .playlist-copy h2{font-size:clamp(31px,9.8vw,46px);line-height:1.14}
  .playlist-copy p{font-size:15px;line-height:1.38;margin-top:12px}
  .playlist-cta{width:100%;margin-top:15px;padding:14px 14px;font-size:6px;box-shadow:5px 5px 0 var(--pink)}
  .playlist-cta svg{width:19px;height:19px}
  .playlist-terminal{justify-self:stretch;padding:13px 13px 11px;border-width:1px;box-shadow:6px 6px 0 rgba(237,95,161,.28)}
  .playlist-head{padding-bottom:10px}.playlist-head>div{gap:5px}.playlist-head span{font-size:5px}.playlist-head b{font-size:8px}.playlist-head>strong{font-size:10px}
  .playlist-eq{height:26px;margin:9px 0 3px;gap:3px}
  .playlist-track{grid-template-columns:22px minmax(0,1fr) auto;gap:7px;padding:7px 2px}.playlist-track em,.playlist-track time{font-size:5px}.playlist-track strong{font-size:11px}.playlist-track span{font-size:9px}
  .playlist-track:nth-child(n+5){display:none}
  .playlist-foot{padding-top:9px;font-size:4.5px;gap:7px}
}
@media(max-width:360px), (max-height:650px) and (max-width:760px){
  .scene-playlist{gap:10px;padding-top:62px;padding-bottom:30px}
  .playlist-copy h2{font-size:29px}.playlist-copy p{font-size:12.5px;line-height:1.3}.playlist-cta{margin-top:10px;padding:11px;font-size:5px}
  .playlist-terminal{padding:10px}.playlist-eq{height:20px;margin:6px 0 2px}.playlist-track{padding:5px 2px}.playlist-track strong{font-size:10px}.playlist-track span{font-size:8px}.playlist-track:nth-child(n+4){display:none}.playlist-foot{display:none}
}
@media(prefers-reduced-motion:reduce){.scene-playlist.is-active .playlist-eq i{animation:none}}

/* Let CSS handle the radio equalizer so JS does less per-frame work. */
.scene-radio.is-active .wave i{animation:radioPulse .72s ease-in-out infinite alternate;transform-origin:bottom}
.scene-radio.is-active .wave i:nth-child(2n){animation-delay:-.18s}.scene-radio.is-active .wave i:nth-child(3n){animation-delay:-.36s}.scene-radio.is-active .wave i:nth-child(5n){animation-delay:-.54s}
@keyframes radioPulse{from{transform:scaleY(.42)}to{transform:scaleY(1.18)}}
@media(prefers-reduced-motion:reduce){.scene-radio.is-active .wave i{animation:none}}


/* v3 stable compatibility + low-power patch */
/* Old browsers that do not understand svh/dvh keep the classic vh fallback. */
.experience{height:1000vh;height:1000svh}
.stage{height:100vh;height:100svh}
.story-mode .experience{height:100vh;min-height:100vh;height:100dvh;min-height:100dvh}
.story-mode .stage{height:100vh;height:100dvh;min-height:0;position:relative;top:auto;touch-action:none;overscroll-behavior:none}
.continue-cue{bottom:18px;bottom:max(18px,env(safe-area-inset-bottom))}
.scene{contain:layout paint style}

/* Degrade decoration, never content, on weak hardware / data-saver devices. */
.low-power .scene.is-visible{will-change:opacity,transform}
.low-power .world-grid{opacity:.20;perspective:none}
.low-power .stars i:nth-child(n+5){display:none}
.low-power .continue-cue i,
.low-power .scroll-hint svg,
.low-power .scene-radio.is-active .wave i,
.low-power .scene-playlist.is-active .playlist-eq i{animation:none!important}
.low-power .memory-float img:nth-child(n+4),
.low-power .memory-tunnel img:nth-child(n+5){display:none}
.low-power .memory-float img,
.low-power .memory-tunnel img,
.low-power .drawer-stack img{box-shadow:4px 4px 0 rgba(0,0,0,.45)}
.low-power .cabinet,
.low-power .crt,
.low-power .playlist-terminal,
.low-power .quest-token{box-shadow:none}
.low-power .crt-body:after,
.low-power .playlist-terminal:before{display:none}
.low-power .portal-ring{border-width:5px}

@media(max-width:760px){
  .story-mode .experience{height:100vh;min-height:100vh;height:100dvh;min-height:100dvh}
  .story-mode .stage{height:100vh;height:100dvh}
}

/* v3 native-scroll navigation patch
   ---------------------------------------------------------------
   Scrolling is intentionally NOT intercepted by JavaScript anymore.
   Browser-native scroll snapping handles Magic Mouse, trackpads,
   mouse wheels and touch with the same behavior. */
html.native-story-scroll{
  scroll-snap-type:y mandatory;
  scroll-behavior:auto;
  overscroll-behavior-y:none;
}
html.native-story-scroll.overlay-open{overflow:hidden}
.story-mode .experience{
  --scene-count:11;
  position:relative!important;
  height:calc(var(--scene-count) * 100vh)!important;
  min-height:0!important;
  overflow:visible!important;
}
@supports(height:100dvh){
  .story-mode .experience{height:calc(var(--scene-count) * 100dvh)!important}
}
.story-mode .stage{
  position:sticky!important;
  position:-webkit-sticky!important;
  top:0!important;
  z-index:2;
  width:100%;
  height:100vh!important;
  min-height:0!important;
  overflow:hidden;
  touch-action:auto!important;
  overscroll-behavior:auto!important;
}
@supports(height:100dvh){.story-mode .stage{height:100dvh!important}}
.snap-rail{
  position:absolute;
  inset:0;
  z-index:0;
  display:flex;
  flex-direction:column;
  pointer-events:none;
}
.snap-stop{
  flex:0 0 100vh;
  height:100vh;
  scroll-snap-align:start;
  scroll-snap-stop:always;
}
@supports(height:100dvh){
  .snap-stop{flex-basis:100dvh;height:100dvh}
}
/* The fixed visual stage is transparent to native scrolling; only actual
   links/buttons remain clickable. */
.story-mode .stage{pointer-events:none}
.story-mode .stage a,
.story-mode .stage button,
.story-mode .archive-overlay,
.story-mode .lightbox{pointer-events:auto}
/* Root-native snapping replaces the previous custom mobile touch capture. */
@media(max-width:760px){
  .story-mode .experience{
    height:calc(var(--scene-count) * 100vh)!important;
  }
  @supports(height:100dvh){
    .story-mode .experience{height:calc(var(--scene-count) * 100dvh)!important}
  }
  .story-mode .stage{touch-action:auto!important}
}