:root{color-scheme:dark;--paper:#e7e4dc;--muted:#7e898c;--orange:#d76422;--cyan:#71c8df;--ink:#05080b}
*{box-sizing:border-box}html,body,#app{margin:0;width:100%;height:100%;overflow:hidden;background:#020406;font-family:Arial,Helvetica,sans-serif;color:var(--paper)}body{user-select:none}button{font:inherit}canvas{position:fixed;inset:0;width:100%;height:100%;display:block;background:#030609}#grain{position:fixed;inset:0;pointer-events:none;z-index:7;opacity:.18;background-image:repeating-linear-gradient(0deg,rgba(255,255,255,.018) 0,rgba(255,255,255,.018) 1px,transparent 1px,transparent 3px);mix-blend-mode:soft-light}
.hidden{display:none!important}.screen{position:fixed;inset:0;z-index:20;background:radial-gradient(circle at 70% 42%,rgba(26,39,45,.28),transparent 32%),linear-gradient(115deg,#070b0e 0%,#030506 54%,#010203 100%);overflow:hidden;padding:6.5vw}.screen:before{content:"";position:absolute;left:67%;top:-10%;height:120%;width:1px;background:rgba(255,255,255,.08);transform:rotate(12deg)}.screen:after{content:"";position:absolute;right:-8vw;top:0;width:42vw;height:100%;background:linear-gradient(135deg,transparent 0 34%,rgba(215,100,34,.055) 34% 35%,transparent 35% 48%,rgba(255,255,255,.025) 48% 48.3%,transparent 48.3%)}
.brand{position:absolute;left:6.5vw;top:5.2vh;font:700 9px/1 monospace;letter-spacing:.26em;color:#707b7e}.titleBlock{position:absolute;left:6.5vw;top:50%;transform:translateY(-49%)}.eyebrow{font:700 9px/1 monospace;letter-spacing:.3em;color:#8a9394;margin-bottom:19px}.titleBlock h1{margin:0;font-size:clamp(64px,10.4vw,160px);font-weight:900;line-height:.72;letter-spacing:-.072em;transform:scaleX(.78);transform-origin:left center}.titleBlock h1 span{color:#bfc5c3}.titleBlock .rule{width:min(61vw,690px);height:7px;margin:35px 0 14px;background:rgba(255,255,255,.10);position:relative}.titleBlock .rule b{display:block;width:19%;height:100%;background:var(--orange)}.titleBlock p{margin:0;font:700 10px/1 monospace;letter-spacing:.34em;color:#9aa1a1}
#board{position:absolute;bottom:9vh;left:6.5vw;width:245px;height:51px;border:0;border-top:1px solid rgba(255,255,255,.19);border-bottom:1px solid rgba(255,255,255,.09);background:linear-gradient(90deg,rgba(215,100,34,.15),transparent);color:#f2eee5;padding:0 17px;display:flex;align-items:center;justify-content:space-between;font-weight:800;font-size:13px;letter-spacing:.16em;cursor:pointer;text-align:left}#board:before{content:"";position:absolute;left:0;top:-1px;bottom:-1px;width:4px;background:var(--orange)}#board i{font-style:normal;color:var(--orange);font-size:20px;transition:transform .16s}#board:hover i{transform:translateX(6px)}#board:hover{background:linear-gradient(90deg,rgba(215,100,34,.24),transparent)}#board:disabled{opacity:.25;cursor:default}#loadText{position:absolute;right:4.5vw;bottom:5.4vh;font:9px/1 monospace;letter-spacing:.18em;color:#596467}.build{position:absolute;right:4.5vw;top:5.2vh;font:700 8px/1 monospace;letter-spacing:.18em;color:#354044}
#pause{background:rgba(3,5,7,.86);backdrop-filter:blur(10px)}.pauseBlock{position:absolute;left:8vw;top:50%;transform:translateY(-50%);border-left:4px solid var(--orange);padding-left:25px}.pauseBlock small{font:700 9px/1 monospace;letter-spacing:.24em;color:#737d80}.pauseBlock h2{font-size:clamp(28px,4vw,60px);margin:12px 0 7px;letter-spacing:-.03em}.pauseBlock p{margin:0;font:10px/1.4 monospace;color:#707a7c}
#hud{position:fixed;inset:0;z-index:8;pointer-events:none;transition:opacity .25s}#route{position:absolute;left:28px;top:23px;height:38px;display:flex;align-items:center;gap:12px;font:700 9px/1 monospace;letter-spacing:.14em;text-shadow:0 2px 6px #000}.dim{color:#697275}#route strong{font-size:11px;color:#dc742e}#route>i{width:48px;height:1px;background:#4d575a;display:block}#route #nextStop{color:#dfe3df}
#objective{position:absolute;right:28px;top:22px;width:225px;text-align:right;text-shadow:0 2px 7px #000}#objective small{display:block;font:700 7px/1 monospace;letter-spacing:.26em;color:#616c6f;margin-bottom:6px}#objective b{display:block;font:700 10px/1 monospace;letter-spacing:.14em;color:#e3e4dd}.objectiveLine{height:2px;background:rgba(255,255,255,.12);margin-top:9px;overflow:hidden}.objectiveLine i{display:block;width:100%;height:100%;transform:scaleX(0);transform-origin:right;background:var(--orange);transition:transform .35s ease}
#crosshair{position:absolute;left:50%;top:50%;width:18px;height:18px;transform:translate(-50%,-50%);opacity:.52}#crosshair span{position:absolute;background:#f5f2e9}#crosshair span:first-child{left:8px;top:1px;width:1px;height:16px}#crosshair span:nth-child(2){left:1px;top:8px;width:16px;height:1px}#crosshair i{position:absolute;left:7px;top:7px;width:3px;height:3px;border:1px solid #fff;transform:rotate(45deg)}
#prompt{position:absolute;left:50%;top:57.5%;transform:translateX(-50%);font:700 10px/1 monospace;letter-spacing:.15em;color:#e0e4df;opacity:0;transition:opacity .14s;text-shadow:0 2px 5px #000;background:rgba(3,6,8,.44);padding:8px 10px;border-bottom:1px solid rgba(215,100,34,.6)}#prompt.active{opacity:1}#hint{position:absolute;left:28px;bottom:21px;font:9px/1 monospace;letter-spacing:.10em;color:rgba(230,230,224,.43);text-shadow:0 1px 3px #000}#speed{position:absolute;right:28px;bottom:20px;text-align:right;font-family:monospace;color:#d6dddc;text-shadow:0 2px 5px #000}#speed b{font-size:27px;line-height:.8;letter-spacing:-.08em}#speed span{display:block;font-size:7px;letter-spacing:.32em;color:#727c7d;margin-top:6px}
.blackout{position:fixed;inset:0;z-index:11;background:#000;pointer-events:none;animation:blackPulse .51s steps(2,end) infinite}.blackout span{position:absolute;right:30px;bottom:28px;font:700 8px/1 monospace;letter-spacing:.28em;color:#6f1e0f}@keyframes blackPulse{0%,47%{opacity:.96}48%,78%{opacity:.72}79%,100%{opacity:.99}}
.chapter{position:fixed;left:0;top:15%;z-index:12;width:min(590px,80vw);padding:20px 30px 20px 6.5vw;background:linear-gradient(90deg,rgba(4,7,9,.95),rgba(4,7,9,.70),transparent);border-top:1px solid rgba(255,255,255,.12);border-bottom:1px solid rgba(255,255,255,.07);transition:opacity .45s}.chapter small,.complete small,.signalCard small{display:block;font:700 8px/1 monospace;letter-spacing:.28em;color:#d56a24;margin-bottom:10px}.chapter strong{display:block;font-size:clamp(29px,3.6vw,48px);letter-spacing:-.035em;line-height:.9}.chapter span{display:block;font:9px/1 monospace;letter-spacing:.23em;color:#798488;margin-top:10px}
.signalCard{position:fixed;left:28px;bottom:62px;z-index:12;max-width:370px;padding:14px 16px 13px;background:rgba(4,8,10,.80);border-left:2px solid #557177;box-shadow:0 10px 36px rgba(0,0,0,.25);backdrop-filter:blur(6px)}.signalCard small{color:#667b80;margin-bottom:7px}.signalCard b{display:block;font:700 10px/1.25 monospace;letter-spacing:.08em}.signalCard span{display:block;margin-top:5px;font:9px/1.35 monospace;color:#7b8587}
.complete{position:fixed;right:0;bottom:11%;z-index:13;width:min(720px,90vw);padding:29px 6.5vw 29px 38px;background:linear-gradient(270deg,rgba(5,8,10,.96),rgba(5,8,10,.72),transparent);border-right:5px solid var(--orange);text-align:right;box-shadow:0 20px 60px rgba(0,0,0,.28)}.complete strong{display:block;font-size:clamp(24px,3.4vw,48px);line-height:.92;letter-spacing:-.04em}.complete span{display:block;font:9px/1.45 monospace;color:#889295;margin-top:14px;letter-spacing:.04em}
.fatal{position:fixed;z-index:99;left:20px;right:20px;bottom:20px;padding:14px;background:#330b08;border-left:4px solid #ff522f;color:#ffd4c8;font:12px/1.4 monospace;white-space:pre-wrap}.fatal.hidden{display:none}#qa-status{display:none}
@media(max-width:760px){.screen{padding:8vw}.screen:before{left:78%}.brand{left:8vw}.titleBlock{left:8vw}.titleBlock h1{font-size:17vw}.titleBlock .rule{width:74vw}.titleBlock p{font-size:8px;letter-spacing:.20em}.eyebrow{font-size:8px;letter-spacing:.18em}#board{left:8vw;bottom:10vh}.build{display:none}#loadText{right:8vw;bottom:4vh;max-width:46vw;text-align:right;line-height:1.5}#hint{display:none}#route{left:15px;top:15px}#route>i{width:18px}#objective{right:15px;top:auto;bottom:50px;width:190px}#speed{right:15px;bottom:14px}.signalCard{left:15px;bottom:48px;max-width:66vw}.chapter{padding-left:8vw}.complete{padding-right:8vw}}
.transitionMask{position:fixed;inset:-8%;z-index:10;pointer-events:none;opacity:0;background:radial-gradient(circle at 50% 50%,transparent 0 24%,rgba(2,5,8,.68) 58%,#010203 100%),repeating-linear-gradient(90deg,rgba(113,200,223,.08) 0 1px,transparent 1px 14px);mix-blend-mode:screen;transform:scale(1.08);transition:opacity .03s linear}.transitionMask[data-kind="recursion"]{background:radial-gradient(ellipse at center,transparent 0 16%,rgba(30,10,7,.28) 35%,rgba(7,12,16,.78) 61%,#010203 100%),repeating-linear-gradient(0deg,rgba(113,200,223,.10) 0 1px,transparent 1px 9px),repeating-linear-gradient(90deg,rgba(215,100,34,.055) 0 1px,transparent 1px 23px);transform:scale(1.12)}.transitionMask[data-kind="scale"]{background:radial-gradient(circle at 38% 62%,rgba(215,100,34,.20),transparent 18%),radial-gradient(circle at center,transparent 0 12%,rgba(2,5,8,.78) 55%,#010203 100%)}

.transitionMask[data-kind="gravity"]{background:radial-gradient(circle at center,transparent 0 16%,rgba(3,7,11,.58) 48%,#010203 100%),repeating-linear-gradient(52deg,rgba(113,200,223,.12) 0 1px,transparent 1px 18px),repeating-linear-gradient(-38deg,rgba(215,100,34,.09) 0 1px,transparent 1px 27px);mix-blend-mode:screen}

.transitionMask[data-kind="finale"]{background:radial-gradient(circle at 50% 46%,transparent 0 10%,rgba(24,5,40,.26) 28%,rgba(3,6,12,.76) 58%,#010203 100%),repeating-linear-gradient(38deg,rgba(113,200,223,.11) 0 1px,transparent 1px 17px),repeating-linear-gradient(-43deg,rgba(176,72,232,.09) 0 1px,transparent 1px 29px);mix-blend-mode:screen;transform:scale(1.14) rotate(.5deg)}
.transitionMask[data-kind="terminus"]{background:radial-gradient(circle at center,transparent 0 9%,rgba(1,2,4,.88) 48%,#000 78%);mix-blend-mode:normal}
.transitionMask[data-kind="ending"]{background:#000;mix-blend-mode:normal}
body:has(#qa-status[data-state*='"world":"GAME_COMPLETE"']) #grain{opacity:.10}

/* Phase 8 cinematic presentation */
#grain{opacity:.105;background-image:repeating-linear-gradient(0deg,rgba(255,255,255,.012) 0,rgba(255,255,255,.012) 1px,transparent 1px,transparent 4px)}
#lens{position:fixed;inset:0;z-index:6;pointer-events:none;background:radial-gradient(ellipse at 50% 47%,transparent 0 53%,rgba(0,0,0,.055) 73%,rgba(0,0,0,.19) 100%),linear-gradient(180deg,rgba(255,174,92,.015),transparent 20%,transparent 78%,rgba(23,59,74,.022));transition:opacity .25s,background .25s}#lens.focus{background:radial-gradient(circle at 50% 50%,rgba(215,100,34,.018) 0 2%,transparent 9% 54%,rgba(0,0,0,.08) 78%,rgba(0,0,0,.20) 100%)}
#hud:before,#hud:after{content:"";position:absolute;left:0;right:0;height:44px;pointer-events:none;opacity:.24}#hud:before{top:0;background:linear-gradient(#0008,transparent)}#hud:after{bottom:0;background:linear-gradient(transparent,#0007)}
#route,#objective,#speed,#hint{filter:drop-shadow(0 2px 7px rgba(0,0,0,.58))}
#crosshair{transition:opacity .16s,transform .16s;filter:drop-shadow(0 1px 3px #000)}#crosshair.interact{opacity:.95;transform:translate(-50%,-50%) scale(.83)}#crosshair.interact span{background:var(--orange)}#crosshair.interact i{border-color:#ffd5b8;box-shadow:0 0 12px rgba(215,100,34,.45)}
#prompt{top:56.5%;padding:9px 13px 8px;background:linear-gradient(90deg,rgba(3,6,8,.18),rgba(3,6,8,.82),rgba(3,6,8,.18));border-bottom-color:rgba(215,100,34,.72);box-shadow:0 10px 26px rgba(0,0,0,.18);transform:translate(-50%,4px);transition:opacity .16s,transform .16s}#prompt.active{opacity:1;transform:translate(-50%,0)}
.chapter{backdrop-filter:blur(9px);background:linear-gradient(90deg,rgba(4,7,9,.94),rgba(4,7,9,.70) 68%,rgba(4,7,9,0));box-shadow:0 18px 55px rgba(0,0,0,.20)}
.chapter strong{font-weight:850;text-shadow:0 5px 24px rgba(0,0,0,.34)}
.signalCard{background:linear-gradient(100deg,rgba(4,8,10,.90),rgba(4,8,10,.72));box-shadow:0 13px 42px rgba(0,0,0,.32)}
.complete{backdrop-filter:blur(10px);box-shadow:0 24px 80px rgba(0,0,0,.42)}
.screen{background:radial-gradient(circle at 72% 38%,rgba(38,57,64,.25),transparent 31%),radial-gradient(circle at 13% 82%,rgba(134,58,22,.085),transparent 27%),linear-gradient(118deg,#080c10 0%,#030506 56%,#010203 100%)}
#board{transition:background .18s,transform .18s,box-shadow .18s}#board:hover{transform:translateX(2px);box-shadow:-12px 0 34px rgba(215,100,34,.08)}
.transitionMask{filter:contrast(1.04)}
body:has(#qa-status[data-state*='"world":"CITY"']) #lens{opacity:.78}body:has(#qa-status[data-state*='"world":"ENDING"']) #lens,body:has(#qa-status[data-state*='"world":"GAME_COMPLETE"']) #lens{opacity:.62}
@media(max-width:760px){#hud:before,#hud:after{height:34px}#prompt{top:54.5%;max-width:82vw;text-align:center;line-height:1.25}.chapter{width:min(620px,92vw)}#lens{opacity:.7}}

/* Phase 9 release hardening UI */
body,canvas{touch-action:none}
.secondaryAction{position:absolute;bottom:3.2vh;left:6.5vw;width:245px;height:38px;border:0;border-left:2px solid #50656b;background:rgba(11,18,21,.72);color:#aeb9b9;padding:0 15px;display:flex;align-items:center;justify-content:space-between;font:700 9px/1 monospace;letter-spacing:.13em;cursor:pointer}.secondaryAction i{font-style:normal;color:var(--cyan);font-size:14px}.secondaryAction:hover{background:rgba(16,27,31,.9);color:#eef3ef}
#loadBar{position:absolute;right:4.5vw;bottom:3.2vh;width:min(300px,34vw);height:2px;background:rgba(255,255,255,.08);overflow:hidden}#loadBar i{display:block;width:100%;height:100%;background:linear-gradient(90deg,var(--orange),#eaa168);transform:scaleX(0);transform-origin:left;transition:transform .24s ease}
#startOptions{position:absolute;right:4.5vw;bottom:8.5vh;display:flex;gap:8px;align-items:center;font:700 8px/1 monospace;letter-spacing:.12em;color:#627074}#startOptions label{display:flex;align-items:center;gap:8px}select,#startOptions button,.pauseActions button{border:1px solid rgba(255,255,255,.12);background:#081014;color:#aeb8b8;font:700 8px/1 monospace;letter-spacing:.11em;padding:8px 10px;outline:none}select{cursor:pointer}#startOptions button,.pauseActions button{cursor:pointer}#startOptions button:hover,.pauseActions button:hover{border-color:rgba(215,100,34,.6);color:#f0eee7}
.pauseBlock{max-width:min(560px,84vw)}.pauseActions{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}.pauseQuality{display:flex;align-items:center;gap:10px;margin-top:15px;font:700 8px/1 monospace;letter-spacing:.15em;color:#667275}.pauseQuality select{min-width:112px}#checkpointLabel{display:block;margin-top:13px;font:700 8px/1 monospace;letter-spacing:.14em;color:#506066}
#perfBadge{position:absolute;right:27px;bottom:66px;padding:5px 7px;border:1px solid rgba(113,200,223,.18);background:rgba(3,8,11,.58);font:700 7px/1 monospace;letter-spacing:.09em;color:#7699a1;text-shadow:0 2px 4px #000}
.fatal button{margin-left:12px;border:1px solid #ff8068;background:#210503;color:#ffd4c8;padding:7px 10px;font:700 9px/1 monospace;letter-spacing:.1em;cursor:pointer}
@supports(padding:max(0px)){.screen{padding-left:max(6.5vw,env(safe-area-inset-left));padding-right:max(6.5vw,env(safe-area-inset-right))}}
@media(max-width:760px){.secondaryAction{left:8vw;bottom:4.6vh;width:215px}.screen #board{bottom:10.5vh;width:215px}#loadText{bottom:3.4vh}#loadBar{right:8vw;bottom:2.1vh;width:42vw}#startOptions{right:8vw;bottom:8.5vh;flex-direction:column;align-items:flex-end}#startOptions button{display:none}.pauseActions{max-width:260px}.pauseActions button{flex:1 1 120px}#perfBadge{right:14px;bottom:75px}#checkpointLabel{max-width:80vw}}

/* v1.0 release presentation */
.creditsLink{border:1px solid rgba(255,255,255,.10);background:rgba(8,16,20,.62);color:#7f9094;text-decoration:none;font:700 8px/1 monospace;letter-spacing:.11em;padding:9px 10px}.creditsLink:hover{border-color:rgba(113,200,223,.42);color:#d7e4e4}
@media(max-width:760px){.creditsLink{display:none}}