:root{color-scheme:dark;--gold:#d7c396;--ice:#a4dcd9}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#070e13;color:#edf1eb;font-family:Arial,sans-serif;touch-action:none}canvas{display:block;width:100%;height:100%;position:fixed;inset:0}button{font:inherit;color:inherit;background:#111c22b8;border:1px solid #7583876b;min-height:44px;padding:14px 20px;letter-spacing:2px;cursor:pointer;touch-action:manipulation}button:hover{background:#344441}button:focus-visible{outline:2px solid var(--gold)}[hidden]{display:none!important}header{position:fixed;z-index:4;top:max(20px,env(safe-area-inset-top));left:26px;right:26px;display:flex;align-items:center;justify-content:space-between}.brand{font-size:10px;color:#e1dec9;letter-spacing:2px}.brand span{display:block;margin-top:7px;color:#8b9b9e;font-size:8px}#pause{padding:8px 14px;border-radius:50%}.grain{pointer-events:none;position:fixed;inset:0;z-index:2;opacity:.09;background:repeating-linear-gradient(0deg,transparent 0 3px,#000 3px 4px)}.overlay{position:fixed;inset:0;z-index:5;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;padding:80px 26px 35px;background:linear-gradient(90deg,#040b11e8,#091519a8,#040b11dd);animation:reveal .9s both}.eyebrow{font-size:10px;letter-spacing:3px;color:var(--ice);line-height:1.8}.sigil{font:100px Georgia;color:var(--gold);text-shadow:0 0 35px #c1b27644;margin:20px 0 -5px}h1{font:clamp(32px,7vw,74px) Georgia;letter-spacing:.15em;margin:12px 0 25px}h2{font:clamp(32px,6vw,60px) Georgia;margin:24px 0;color:#e6e9db}.tagline{font:24px/1.35 Georgia;color:var(--gold);margin:0 0 25px}.introcopy{font-size:13px;line-height:1.8;color:#9cafb3}.primary{background:#d7c396;color:#151d20;border:0;margin:22px 0 10px;padding:18px 24px;font-size:11px;min-width:260px}.primary span{margin-left:32px}.small{font-size:10px;line-height:1.9;color:#84979d;letter-spacing:.5px}#cinema{background:#060d14b0}#cinema p,#modal p{max-width:510px;line-height:1.8;color:#b5c4c8;font-size:17px}#skip{border:0;background:none;font-size:10px;color:#819198;margin-top:25px;letter-spacing:1px}.objective{position:fixed;left:26px;top:max(90px,calc(env(safe-area-inset-top) + 65px));text-shadow:0 2px 8px #000;pointer-events:none}.objective small{color:var(--gold);font-size:9px;letter-spacing:2px}.objective strong{display:block;font:21px Georgia;margin-top:9px}.objective p{font-size:11px;color:#aac0c5;max-width:240px;line-height:1.5}.vitals{position:fixed;right:26px;top:97px;width:110px;display:flex;gap:7px;flex-wrap:wrap;font-size:8px;letter-spacing:1px}.vitals div{height:3px;background:#28383d;width:80px;order:3}.vitals i{display:block;height:100%;width:100%;background:var(--ice)}.vitals b{margin-left:auto}#subtitle{position:fixed;bottom:235px;left:50%;transform:translateX(-50%);width:min(540px,calc(100% - 40px));background:linear-gradient(90deg,transparent,#071118dd,transparent);text-align:center;padding:14px 20px;pointer-events:none}#subtitle small{font-size:8px;letter-spacing:1.5px;color:var(--gold)}#subtitle p{font-size:13px;line-height:1.5;margin:8px 0 0}.controls{position:fixed;left:0;right:0;bottom:max(34px,env(safe-area-inset-bottom));height:155px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;pointer-events:none}.joystick{pointer-events:auto;touch-action:none;width:132px;height:132px;flex-shrink:0;border:1px solid #b3cec14d;border-radius:50%;background:radial-gradient(circle,#22363844 35%,#92b8b509 36%,#122326a0 70%);display:flex;justify-content:center;align-items:center;position:relative;box-shadow:inset 0 0 25px #9dc8c50b}.joystick:after{content:'';position:absolute;inset:22px;border:1px dashed #d1dcd51a;border-radius:50%;pointer-events:none}.joystick i{display:flex;align-items:center;justify-content:center;font-style:normal;font-size:25px;width:52px;height:52px;border-radius:50%;background:#d1c29955;border:1px solid #e2d9b2;color:#bce2df;box-shadow:0 0 20px #d2b87716;z-index:1}.joystick small{position:absolute;bottom:-21px;letter-spacing:2px;font-size:8px;color:#9bafb1}.aim{width:112px;height:112px}.aim i{width:44px;height:44px;background:#88bab755;border-color:#a5d2d0}.actions{pointer-events:auto;display:flex;flex-direction:column;gap:8px}.actions button{font-size:9px;padding:9px;min-width:75px;letter-spacing:1px}.actions small{display:block;font-size:6px;margin-top:4px;color:#83989b}#interact{position:fixed;bottom:200px;left:50%;transform:translateX(-50%);background:#d7c396;color:#142126;z-index:3;font-size:10px}#modal{background:#040b10eb}#restart{border:0;background:none;color:#90a4a7;font-size:10px}@keyframes reveal{from{opacity:0}to{opacity:1}}@media(max-width:500px){header{left:18px;right:18px}.objective{left:18px}.vitals{top:155px;left:18px;width:92px}.controls{padding:0 20px}.joystick{width:116px;height:116px}.aim{width:100px;height:100px}.actions button{min-width:63px;padding:8px 5px}#subtitle{bottom:218px}.introcopy{font-size:12px}#cinema p{font-size:16px}h1{letter-spacing:.1em}}@media(max-height:600px){.sigil{display:none}.overlay{padding:45px 20px 15px}h1{margin:10px}.tagline{font-size:20px;margin:10px}.introcopy{display:none}.primary{margin:12px}.controls{bottom:25px;height:100px}.joystick{width:90px;height:90px}.aim{width:80px;height:80px}#subtitle{bottom:135px;max-width:400px}#interact{bottom:125px}.objective{top:75px}.vitals{top:150px}.small{margin:5px}#cinema p{font-size:14px;margin:5px}h2{margin:12px}}
#cinema:before,#cinema:after{content:'';position:absolute;left:0;right:0;height:10%;background:#020608;pointer-events:none}#cinema:before{top:0}#cinema:after{bottom:0}#cinema .eyebrow{animation:reveal 2s both}#cinema h2{animation:reveal 1.1s both}#cinema p{animation:reveal 2s both}@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important}}
/* v2: clean output, safe-area-aware phone HUD, deliberately reserved thumb zones. */
:root{--gold:#f5d795;--ice:#9ff5e9;--edge:18px;--safe-top:env(safe-area-inset-top,0px);--safe-bottom:env(safe-area-inset-bottom,0px);--control-height:142px;--control-bottom:max(26px,calc(var(--safe-bottom) + 12px))}
html,body{height:100%;height:100dvh;background:#102b3d}canvas{height:100%;height:100dvh}.grain{display:none}header{top:calc(var(--safe-top) + 14px);left:var(--edge);right:var(--edge);z-index:4}.brand{font-size:9px;letter-spacing:1.6px;text-shadow:0 1px 5px #071a2c}.brand span{color:#b0d3db}.overlay{background:linear-gradient(120deg,#081c36e8,#124c58bc 55%,#132b45dc);padding:calc(var(--safe-top) + 76px) 24px calc(var(--safe-bottom) + 24px);overflow:auto;overscroll-behavior:contain}.overlay .small{color:#b7d1d6}.introcopy{color:#c2d8dc}button{border-color:#a3cfcd70;background:#163d50d9;border-radius:4px}.primary{background:linear-gradient(115deg,#ffe4ae,#eac783);color:#15303b;box-shadow:0 4px 28px #03101d30}.primary:hover{background:#ffe6ac}.sigil{margin:8px 0;font-size:84px;color:#ffe6ae}.tagline{color:#ffe5af}.objective{top:calc(var(--safe-top) + 78px);left:var(--edge);right:76px;background:linear-gradient(90deg,#0a263ac9,transparent);padding:10px 12px 8px;border-left:2px solid #f5d795;max-width:320px}.objective strong{font:19px/1.2 Georgia;margin-top:7px}.objective p{margin:7px 0 0;color:#d2e6e8;font-size:10px;max-width:265px}.objective small{font-size:8px;color:#ffe2aa;letter-spacing:1.4px}.vitals{top:calc(var(--safe-top) + 82px);right:var(--edge);left:auto;width:54px;gap:5px;font-size:7px;text-shadow:0 1px 3px #10253b}.vitals b{font-size:11px}.vitals div{width:54px;height:4px;background:#142c3f}.vitals span{font-size:6px}.controls{bottom:var(--control-bottom);height:var(--control-height);left:0;right:0;padding:0 var(--edge);align-items:flex-end;z-index:3;gap:10px}.joystick{width:122px;height:122px;background:radial-gradient(circle,#234d6955,#0b2948a8);border-color:#cbf5ed80;box-shadow:0 4px 30px #09203930}.joystick i{background:#e5d5aa88;border-color:#ffe8ae;width:50px;height:50px}.joystick small{bottom:-18px;color:#e0f2ed;font-size:7px;letter-spacing:1.6px}.aim{width:104px;height:104px;margin-bottom:9px}.aim i{background:#94e9db88;border-color:#bbfff2;width:43px;height:43px}.actions{align-self:flex-end;margin-bottom:12px;gap:8px}.actions button{min-width:68px;min-height:44px;background:#173b51ed;font-size:9px;letter-spacing:.5px;padding:8px}.actions small{font-size:6px;color:#b2d0d5}.actions button:disabled{opacity:.42;cursor:default}.actions button:active:not(:disabled){background:#5c898b}#subtitle{bottom:calc(var(--control-bottom) + var(--control-height) + 60px);padding:10px 16px;width:min(500px,calc(100% - 36px));background:#0c273be8;border:1px solid #8bc7c330;border-radius:4px;z-index:2}#subtitle small{font-size:7px;color:#ffe0a4;letter-spacing:1px}#subtitle p{font-size:12px;line-height:1.45;margin-top:6px;color:#f1f7ef}#interact{bottom:calc(var(--control-bottom) + var(--control-height) + 10px);min-height:44px;padding:12px 22px;background:#f6d99c;color:#16303a;z-index:4}#cinema p,#modal p{color:#e0eeeb}#cinema:before,#cinema:after{height:6%;background:#031122}#skip,#restart{color:#c4dddd}#modal{background:#0a2338ed}
@media(max-width:380px){:root{--edge:12px}.joystick{width:108px;height:108px}.aim{width:94px;height:94px}.actions button{min-width:62px}.objective strong{font-size:17px}.objective{right:72px}.sigil{font-size:60px}.overlay{padding-left:18px;padding-right:18px}h1{font-size:32px}.tagline{font-size:21px}.introcopy{font-size:11px}}
@media(max-height:700px) and (orientation:portrait){.sigil{font-size:55px;margin:4px}.tagline{font-size:20px;margin-bottom:12px}h1{margin:8px 0 15px}.introcopy{margin:8px 0}.primary{margin:12px 0 6px}.objective p{font-size:9px}#subtitle{bottom:calc(var(--control-bottom) + var(--control-height) + 58px)}#subtitle p{font-size:11px}.controls{--control-height:122px}.small{font-size:9px}}
@media(orientation:landscape) and (max-height:600px){:root{--control-height:100px;--control-bottom:max(20px,var(--safe-bottom));--edge:24px}.controls{padding-left:max(24px,env(safe-area-inset-left));padding-right:max(24px,env(safe-area-inset-right))}.joystick{width:90px;height:90px}.aim{width:84px;height:84px;margin:0}.actions{flex-direction:row;gap:8px;margin-bottom:0}.actions button{min-width:66px}.objective{top:calc(var(--safe-top) + 62px);max-width:250px;right:auto}.objective strong{font-size:16px}.objective p{display:none}.vitals{top:calc(var(--safe-top) + 70px);right:24px}.overlay{padding:calc(var(--safe-top) + 44px) 24px 16px}.sigil,.introcopy,.small{display:none}.tagline{font-size:18px;margin:4px}h1{font-size:32px;margin:10px}.primary{margin:10px}#subtitle{width:min(430px,calc(100% - 250px));bottom:calc(var(--control-bottom) + var(--control-height) + 12px)}#subtitle p{font-size:11px}#interact{bottom:calc(var(--control-bottom) + 54px)}#cinema h2{font-size:30px}#cinema p{font-size:14px;max-width:500px}}

.class-grid{display:flex;gap:8px;margin:15px 0;max-width:600px}.class-card{flex:1;min-width:0;padding:12px 14px;font-size:11px;letter-spacing:.12em;background:#112632}.class-card small{display:block;font-size:9px;letter-spacing:0;color:#a4bcc8;margin-top:8px}.class-card.selected{border-color:#ffe5a3;box-shadow:inset 0 -3px #e6be6b}.overlay{overflow-y:auto}.introcopy{margin-bottom:0}@media(max-width:550px){.class-grid{gap:5px}.class-card{padding:11px 7px;font-size:10px}.class-card small{font-size:8px}.overlay h1{font-size:44px}.sigil{display:none}.overlay .tagline{margin:13px 0}.overlay{justify-content:center}}

body:after{content:"";position:fixed;inset:0;pointer-events:none;z-index:10;background:#02070b;opacity:0;transition:opacity .55s}body.deploying:after{opacity:1;transition:none}

body:before{content:"";position:fixed;inset:0;pointer-events:none;z-index:2;background:#ffc885;opacity:0}body.breach-flash:before{animation:breach .8s ease-out forwards}@keyframes breach{0%{opacity:.8}20%{opacity:.12}40%{opacity:.35}100%{opacity:0}}