:root{--rail:78px;--head:80px;--electric:#5685ef;--progress:0%}html,body{height:100%;overflow:hidden}body{background:#070c16}header{height:var(--head);position:relative;z-index:5;padding:0 3.5%;background:#090f19ed;border-bottom:1px solid #344e71}header .brandLogo{width:150px!important;height:44px!important}header nav{margin-left:auto;margin-right:35px;gap:30px}header #motion{font-size:14px;color:#8498b5;margin-right:20px}#world{height:calc(100svh - var(--head) - var(--rail));width:100%;display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;outline-offset:-4px;overscroll-behavior-x:contain}#world::-webkit-scrollbar{display:none}#world>section{flex:0 0 100%;width:100%;min-width:0;height:100%;min-height:0;max-height:none;max-width:none;margin:0;scroll-snap-align:start;scroll-snap-stop:always;position:relative;overflow-x:hidden;overflow-y:auto;padding:38px 7%;isolation:isolate;background:#0a121d}#world>section:before{content:'';position:absolute;inset:0;z-index:-2;background:linear-gradient(90deg,#080e19ee,#080e1999),url('city-background.png') center/cover;opacity:.6;pointer-events:none}#world>.hero{padding:0;overflow:hidden;background:#081220}.hero:before{display:none}.scene{inset:-3%;background-image:linear-gradient(#080d2522,#07102000 50%,#070d20aa),url('city-background.png');transform:translate3d(var(--pan-x,0px),var(--pan-y,0px),0) scale(1.02);transition:transform .5s ease-out;animation:cityBreathe 9s ease-in-out infinite alternate}.hero:after{background:repeating-linear-gradient(transparent 0 3px,#0002 3px 4px);z-index:4}.hud{padding:22px 3.5%;font-size:14px}.hud b{font-size:23px}.heroContent{width:66%;margin:auto 3% auto 31%;padding:0 0 40px;z-index:3}.hero .eyebrow{margin-bottom:12px;letter-spacing:3px;font-size:14px}.titleLogo{max-height:clamp(110px,24vh,220px);width:100%;filter:drop-shadow(0 0 18px #144bd350)}h1 span{font-size:clamp(32px,4vw,60px);margin-top:0;letter-spacing:7px}.tagline{margin:20px 0 24px;font-size:19px}.play{font-size:25px;padding:16px 39px;box-shadow:0 0 28px #bcd56b20,5px 5px #040b0e;transition:transform .2s,box-shadow .2s}.play:hover{box-shadow:0 0 38px #bcd56b60,5px 5px #040b0e;transform:translateY(-3px)}.menu{margin-top:22px;font-size:17px}.heroCharacter{width:36%;max-width:520px;left:1%;bottom:7%;height:65%;object-position:bottom;animation:ratIdle 2s steps(3,end) infinite;filter:drop-shadow(10px 15px 0 #03091ccc)}.heroBottom{padding:16px 3.5%;font-size:13px}.heroBottom a{color:#afc5ec}.heroBottom a:after{content:' ›';animation:continuePulse 1.5s steps(2,end) infinite}.sectionLabel{font-size:15px;margin-bottom:30px;padding-bottom:16px;border-color:#354e6b}.storyGrid{gap:9%;align-items:center;min-height:calc(100% - 70px)}.story h2{font-size:clamp(44px,5.4vw,86px);line-height:1.06}.storyCopy p{font-size:clamp(19px,1.7vw,25px);margin-bottom:14px}.storyCopy h3{font-size:clamp(30px,3.2vw,48px);margin:15px 0}.mission{margin:18px 0 4px;padding:9px 0}.mission p{margin:7px 0}.stamp{margin-top:30px}.story:before{background-position:left!important;opacity:.38!important}.token:before{background-position:right!important;opacity:.28!important}.token .terminal{max-width:1050px;margin:clamp(0px,3vh,35px) auto 0;background:#0e1b23e8;border:1px solid #5a7691;box-shadow:0 0 0 7px #07121ccc,18px 18px 0 #02070c66;position:relative}.terminal:after{content:'';position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(transparent 0 4px,#7cbbff06 4px 5px)}.terminalHead{border-color:#34495d}.tokenGrid{padding:30px 40px}.stats strong{font-variant-numeric:tabular-nums}.ending{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0}.ending:before{background:linear-gradient(#060b17b8,#060b17f0),url('city-background.png') center/cover!important;opacity:1!important}.ending h2{font-size:clamp(60px,11vh,130px);line-height:.87;margin-bottom:24px;letter-spacing:-3px;text-shadow:5px 5px #24497a}.ending .failed{margin:12px 0 24px;font-size:18px}.ending p{font-size:20px}.ending .buyBottom{margin-top:16px}.ending footer{padding:20px 0 0;display:block;width:min(900px,100%);border-top:1px solid #34445a;margin-top:30px;text-align:center}.ending footer>.brand{display:none}.ending footer p{font-size:12px;line-height:1.45;color:#9ba6b7}.ending footer button{font-size:14px;margin-top:10px}.journey{height:var(--rail);position:relative;z-index:5;display:flex;align-items:center;gap:25px;padding:0 3.5%;background:#090f19;border-top:1px solid #344e71}.journeyLabel{font-size:13px;color:#8195b1;letter-spacing:2px}.journey nav{display:flex;gap:30px;flex:1}.journey nav button{background:none;border:0;color:#7e91ad;padding:12px 0;font-size:17px;transition:color .3s;white-space:nowrap}.journey nav button span{color:#456898;margin-right:7px}.journey nav button[aria-current]{color:#e8edcb}.journey nav button[aria-current] span{color:var(--green)}.travelHint{font-size:13px;color:#778da9}.travelButtons{display:flex;gap:8px}.travelButtons button{background:#111f30;border:1px solid #36506e;color:#d9e4f7;width:38px;height:34px;font-size:23px}.travelButtons button:disabled{opacity:.25}.journeyProgress{position:absolute;top:-2px;left:0;height:2px;background:var(--green);width:var(--progress);box-shadow:0 0 12px #c0df7c}.rain{position:absolute;inset:0;pointer-events:none;z-index:2;overflow:hidden;opacity:.4}.rain i{position:absolute;width:1px;height:25px;background:linear-gradient(transparent,#81b6e688);top:-40px;left:var(--x);animation:rainfall var(--speed) linear infinite;animation-delay:var(--delay)}.storyGrid>div,.terminal,.ending>h2,.ending>.play{opacity:.2;transform:translateX(35px);transition:opacity .8s,transform .8s}.is-active .storyGrid>div,.is-active .terminal,.is-active.ending>h2,.is-active.ending>.play{opacity:1;transform:translateX(0)}.storyGrid>div:nth-child(2){transition-delay:.15s}.motion-off *{animation:none!important;transition:none!important}.motion-off .scene{transform:none!important}@keyframes ratIdle{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}@keyframes rainfall{to{transform:translate(-110px,95vh)}}@keyframes cityBreathe{from{filter:brightness(.86)}to{filter:brightness(1.05)}}@keyframes continuePulse{50%{opacity:.3}}@media(max-height:750px) and (min-width:801px){#world>section{padding:25px 6%}#world>.hero{padding:0}.hud{padding-top:14px}.hero .eyebrow{margin-bottom:8px}.titleLogo{max-height:155px}.heroContent{padding-bottom:15px}.tagline{margin:12px 0 18px}.menu{margin-top:15px}.storyGrid{align-items:start}.sectionLabel{margin-bottom:20px}.storyCopy p{font-size:20px}.storyCopy h3{font-size:32px;margin:12px 0}.story h2{font-size:60px}.tokenGrid{padding:20px 30px}.token .terminal{margin-top:0}.terminalFoot{padding:18px 30px}.ending{justify-content:flex-start}.ending h2{font-size:80px}.ending footer{margin-top:18px}}@media(max-width:900px){.journeyLabel,.travelHint{display:none}.journey nav{gap:18px}.journey nav button{font-size:15px}}@media(max-width:800px){:root{--head:72px;--rail:70px}header{padding:0 16px}header nav{display:none}header #motion{margin-left:auto;margin-right:12px;font-size:12px}header .sound{font-size:12px}.journey{padding:0 12px;gap:8px}.journey nav{gap:3px;justify-content:space-between}.journey nav button{font-size:12px;padding:10px 4px}.journey nav button span{display:block;font-size:17px;margin:0 0 2px}.travelButtons{gap:4px}.travelButtons button{width:29px;height:32px}#world>section{padding:25px 6%}.heroContent{width:100%;margin:auto;padding:0 14px 110px}.hero .eyebrow{font-size:12px;letter-spacing:1px}.titleLogo{max-height:150px}h1 span{font-size:9vw;letter-spacing:3px}.tagline{font-size:15px;letter-spacing:1px;margin:15px 0}.heroCharacter{width:48%;height:32%;left:-2%;bottom:4%}.hero .play{font-size:23px;padding:13px 32px}.hero .menu{margin-top:16px;font-size:16px}.heroBottom{font-size:12px;padding:10px 16px}.hud{padding:14px 16px}.hud b{font-size:20px}.heroBottom span{display:none}.storyGrid{display:block;min-height:0}.story h2{font-size:47px}.storyGrid>div+div{margin-top:35px}.stamp{margin-top:15px;font-size:17px}.storyCopy p{font-size:21px}.sectionLabel{margin-bottom:24px}.token .terminal{margin:0}.tokenGrid{padding:23px}.tokenGrid h2{font-size:49px}.stats{padding-top:16px}.stats strong{font-size:54px}.terminalFoot{padding:20px 23px}.contract{margin:0 23px}.ending{justify-content:flex-start}.ending h2{font-size:80px}.ending .failed{font-size:15px}.ending footer{margin-top:24px}.ending footer p{font-size:12px}.storyGrid>div,.terminal{transform:translateX(15px)}}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.scene{transform:none!important}.storyGrid>div,.terminal,.ending>h2,.ending>.play{opacity:1;transform:none}}

/* Align SPLINTA with the title rather than the floor. */
.heroCharacter{top:16%;bottom:auto;height:55%;object-position:center}.play[data-play]:disabled{opacity:1;cursor:not-allowed}.play[data-play]:disabled:hover{transform:none;background:var(--green);box-shadow:0 0 28px #bcd56b20,5px 5px #040b0e}@media(max-width:800px){.heroCharacter{top:17%;bottom:auto;width:34%;height:32%;left:0;object-position:center}.heroContent h1{width:73%;margin-left:27%}.heroContent h1 span{font-size:6.5vw;letter-spacing:1px}.heroContent{padding-bottom:30px}}

.heroCharacter{top:20%}@media(max-width:800px){.heroCharacter{top:20%}}

/* Dedicated scenery for each chapter. */
#world>.story:before{background:linear-gradient(90deg,#06110fd9,#07121a9c),url('sewer-story.png') center/cover!important;opacity:1!important}#world>.token:before{background:linear-gradient(90deg,#060e1aa3,#06122199),url('control-token.png') center/cover!important;opacity:1!important}#world>.ending:before{background:linear-gradient(#090d1b8c,#0a0e1cd9),url('uprising-ending.png') center/cover!important;opacity:1!important}
/* Fixed character placement matching the marked area. */
.heroCharacter{left:20%;top:28%;width:26%;max-width:520px;height:48%;bottom:auto;object-position:center;animation:none!important;transition:none!important;transform:none!important}
@media(min-width:801px){.heroContent{width:52%;margin-left:46%;margin-right:2%}}
@media(max-width:800px){.heroCharacter{left:2%;top:23%;width:32%;height:30%}}
/* Keep the character and title together at every desktop width. */
@media(min-width:801px){
  #world>.hero{display:grid;grid-template-columns:minmax(24px,1fr) minmax(0,430px) minmax(0,680px) minmax(24px,1fr);grid-template-rows:auto minmax(0,1fr) auto;column-gap:20px}
  .hero>.hud{grid-column:1/-1;grid-row:1;width:100%}
  .hero>.heroCharacter{position:relative;grid-column:2;grid-row:2;align-self:center;justify-self:end;left:auto;top:auto;bottom:auto;width:100%;height:auto;max-height:55vh;max-width:430px;object-fit:contain;object-position:center;margin:0;animation:none!important;transform:none!important}
  .hero>.heroContent{grid-column:3;grid-row:2;align-self:center;width:100%;min-width:0;margin:0;padding:0 0 20px}
  .hero>.heroBottom{grid-column:1/-1;grid-row:3;width:100%}
  .hero .titleLogo{max-width:680px}
}
/* Enlarge the still character to the marked title-to-button height. */
@media(min-width:801px){
  .hero>.heroCharacter{width:132%;max-width:568px;max-height:68vh;justify-self:end;margin-right:-12px}
  #world>.hero{column-gap:24px}
}

/* Stationary city with visible pixel rain. */
.hero>.scene{transform:none!important;transition:none;animation:none}.hero>.rain{opacity:.75;z-index:2}.hero>.rain i{width:2px;height:32px;background:linear-gradient(transparent 0%,#92c5ed55 40%,#b6d8f0aa 100%);box-shadow:0 0 2px #98caff22}.hero>.rain i:nth-child(3n){height:18px;width:1px;opacity:.65}.hero>.rain i:nth-child(5n){height:42px;opacity:.45}
/* One shared centerline for all header controls. */
header,header nav{align-items:center}
header nav{height:100%}
header nav>a,header nav>button,header>#motion,header>#sound{display:inline-flex;align-items:center;justify-content:center;min-height:38px;line-height:1;margin-top:0;margin-bottom:0;vertical-align:middle}
header nav>button,header>#motion{padding-top:0;padding-bottom:0}
/* Center the token panel within its stage, with safe overflow on short screens. */
#world>.token{display:flex;flex-direction:column;align-items:center}
#world>.token>.sectionLabel{width:100%;flex:none}
#world>.token>.terminal{width:100%;max-width:1050px;flex:none;margin:auto 0}
#world>.token:after{content:'';display:block;flex:none;height:65px}
@media(max-width:800px){#world>.token:after{height:24px}}

/* Cinematic storm opening: one subdued flash per story beat. */
.intro{overflow:hidden;background:#03070d}.introStorm{position:absolute;inset:0;pointer-events:none;background:linear-gradient(#020712d9,#02060bef),url('city-background.png') center/cover}.introStorm:after{content:'';position:absolute;inset:-40%;opacity:.2;background:repeating-linear-gradient(110deg,transparent 0 70px,#689ab844 71px 72px,transparent 73px 140px);animation:introRain .7s linear infinite}#introText{position:relative;z-index:2;text-shadow:0 3px #000,0 0 24px #4a74a044;max-width:90%}.textReveal{animation:introReveal .55s steps(7,end) both}.lightning{position:absolute;top:-8%;font:440px 'VT323',monospace;color:#9ebdeb;opacity:0;text-shadow:0 0 25px #669cf2;line-height:1;transform:rotate(-10deg)}.lightningLeft{left:8%}.lightningRight{right:9%;top:6%;font-size:320px;transform:rotate(13deg)}.stormFlash{position:absolute;inset:0;background:#9dc2ff;opacity:0}.strike .stormFlash{animation:stormFlash .65s ease-out}.strike .lightning{animation:boltFlash .7s ease-out}.strike .lightningRight{animation-delay:.08s}#skip,#introSound,.introTag{z-index:3}#introSound{position:absolute;top:30px;left:30px;background:#09122299;color:#b1c3d5;border:1px solid #344b65;padding:8px 12px;font-size:16px}.introProgress{position:absolute;bottom:0;left:0;height:2px;background:#708ba9;width:100%;transform-origin:left;animation:introTimer 18s linear both}.intro.hidden .introProgress{animation:none}.intro.hidden .introStorm:after{animation:none}@keyframes introRain{to{transform:translate(-45px,100px)}}@keyframes introReveal{from{opacity:0;transform:translateY(9px);filter:blur(2px)}to{opacity:1;transform:none;filter:none}}@keyframes stormFlash{0%{opacity:0}8%{opacity:.15}100%{opacity:0}}@keyframes boltFlash{0%{opacity:0}8%{opacity:.7}100%{opacity:0}}@keyframes introTimer{from{transform:scaleX(0)}to{transform:scaleX(1)}}@media(max-width:600px){.lightning{font-size:260px}.lightningRight{font-size:200px}#introSound{left:16px;top:18px;font-size:14px}#skip{right:16px;top:26px;font-size:15px}}

.ratPlatform{position:absolute;z-index:2;pointer-events:none;image-rendering:pixelated;object-fit:fill;visibility:hidden}.hero>.heroCharacter{z-index:3}.hero>.heroBottom{z-index:5}

/* Layered storm rain, with near and far droplets. */
.introStorm:after{display:none}.introRainLayer{position:absolute;inset:0;overflow:hidden;opacity:.6}.introRainLayer i{position:absolute;top:-80px;left:var(--rain-x);height:var(--rain-length);width:1px;background:linear-gradient(transparent,#93bed670);animation:introDrop var(--rain-speed) linear infinite;animation-delay:var(--rain-delay)}.introRainLayer i:nth-child(4n){width:2px;opacity:.8;background:linear-gradient(transparent,#bad9eb9c)}.introRainLayer i:nth-child(3n){opacity:.35}.introRainLayer i:nth-child(7n){filter:blur(.6px);width:3px}.intro.hidden .introRainLayer i{animation-play-state:paused}.stormFlash{z-index:1}.lightning{z-index:2}@keyframes introDrop{from{transform:translate3d(0,-50px,0) rotate(12deg)}to{transform:translate3d(-24vh,115vh,0) rotate(12deg)}}

#world>.boss:before{background:linear-gradient(90deg,#13090ed9,#080e19cc),url('boss-facility.png') center/cover;opacity:1}.bossGrid{display:grid;grid-template-columns:1fr 1fr;gap:9%;align-items:center;min-height:calc(100% - 70px);max-width:1200px;margin:0 auto}.bossTitle .eyebrow{color:#d89579}.bossTitle h2{font-size:clamp(60px,7vw,105px);color:#f06532}.bossTitle h2 span{display:block;font-size:.68em;color:var(--cream);margin-top:12px}.bossAside{font-size:16px;color:#b4a7a0;letter-spacing:1px}.bossMeter{border-left:3px solid #ef663d;padding:12px 18px;margin-top:30px}.bossMeter span{font-size:14px;color:#c1aaa0}.bossMeter div{color:#ef663d;font-size:25px;letter-spacing:3px}.bossMeter b{font-size:18px;color:#ef663d}.bossCopy>p{font-size:23px;line-height:1.35;margin:0 0 17px}.bossCopy h3{font:36px/1.1 'Black Ops One',Impact,sans-serif;color:var(--orange);margin:20px 0}.bossOrders{border-top:1px dashed #695044;padding-top:16px;margin-top:20px}.bossOrders>span{font-size:14px;color:#d89579;letter-spacing:2px}.bossOrders p{font-size:22px;line-height:1.3;margin:8px 0 18px}.realWorld{border-top:1px solid #51483f;padding:14px 0;color:#b9c5cc;font-size:17px;line-height:1.4}.realWorld summary{cursor:pointer;font-size:15px;letter-spacing:1px}.realWorld p{margin:14px 0}.realWorld a{font-size:14px;color:var(--green);text-decoration:underline}.journey nav{gap:20px}@media(max-width:1000px){.journeyLabel,.travelHint{display:none}.journey nav{gap:8px}.journey nav button{font-size:14px}}@media(max-width:800px){.bossGrid{display:block;min-height:0}.bossTitle h2{font-size:64px}.bossTitle{margin-bottom:32px}.bossMeter{margin-top:20px}.bossCopy>p{font-size:21px}.journey nav button{font-size:11px;padding:8px 1px}.journey nav{gap:4px}.travelButtons{gap:2px}.travelButtons button{width:25px}.journey{padding:0 8px;gap:5px}}

/* Official product exhibit inside the boss dossier. */
.bossProduct{display:flex;align-items:center;gap:16px;margin:24px 0 0;padding:14px;border:1px solid #786048;background:#071019da;box-shadow:5px 5px 0 #02060966}.productPhoto{display:block;flex:0 0 48%;max-width:230px}.productPhoto img{display:block;width:100%;height:auto;object-fit:contain;image-rendering:auto}.bossProduct figcaption{min-width:0}.productLabel{font-size:13px;letter-spacing:2px;color:#d89579}.bossProduct h3{font:28px/1.2 'Black Ops One',Impact,sans-serif;margin:10px 0 4px;color:var(--cream)}.bossProduct p{font-size:18px;margin:0 0 10px;color:var(--green)}.bossProduct small{display:block;color:#aeb8c1;font-size:14px}.bossProduct figcaption>a{display:inline-block;color:var(--green);font-size:15px;margin-top:16px;text-decoration:underline;text-underline-offset:4px}.bossProduct .productCredit{font-size:12px;margin-top:14px;color:#89959e}.bossTitle h2{font-size:clamp(58px,6vw,84px)}.bossTitle h2 span{font-size:.6em}.bossGrid{gap:7%}@media(max-width:800px){.bossProduct{max-width:470px}.bossTitle h2{font-size:64px}.productPhoto{flex-basis:44%}}

/* Native pixel cursors stay precise without a trailing animation. */
@media (hover:hover) and (pointer:fine){html,body,body *{cursor:url('cursor-pixel.svg') 2 2,auto}a,a *,button:not(:disabled),button:not(:disabled) *,summary,summary *,[role="button"]{cursor:url('cursor-active.svg') 2 2,pointer}button:disabled{cursor:not-allowed}input,textarea,[contenteditable="true"]{cursor:text}}
header>.brand{justify-content:center;height:100%}

/* The final thunder flash bridges the intro and the city reveal. */
.intro.revealCut{transition:none}
body.thunderReveal:after{content:'';position:fixed;inset:0;z-index:100;pointer-events:none;background:#b7d5ef;animation:finalThunderReveal 1.1s ease-out both}
@keyframes finalThunderReveal{0%{opacity:0}14.5%{opacity:.42}100%{opacity:0}}
@media(prefers-reduced-motion:reduce){body.thunderReveal:after{display:none}}

/* Main character without a cast shadow. */
.hero>.heroCharacter{filter:none}

.splintaLore{max-width:440px;margin-top:28px;padding-left:18px;border-left:2px solid var(--green)}.splintaLore .eyebrow{color:var(--green);margin:0 0 9px;font-size:14px;letter-spacing:2px}.splintaLore>p:last-child{font-size:22px;line-height:1.35;color:var(--cream);margin:0}

/* Keep the story columns together in a centered composition. */
@media(min-width:801px){
  .storyGrid{width:100%;max-width:1160px;margin-inline:auto;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);column-gap:clamp(32px,4vw,64px);align-items:center}
  .storyGrid>div{min-width:0}
  .story h2{font-size:clamp(44px,5.4vw,76px)}
}

/* Game links retain the console button appearance. */
a.play[data-play]{display:inline-block;line-height:normal;text-decoration:none}