:root{color-scheme:dark;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;background:#090d0f;color:#f2ecdc;--hud-bg: rgba(9, 13, 13, .84);--hud-border: rgba(230, 185, 83, .34);--amber: #e8ba58;--mint: #69d9b0;--danger: #eb655a;--muted: #9ba9a3}*{box-sizing:border-box}html,body,#cityGame{width:100%;height:100%;margin:0;overflow:hidden}body{overscroll-behavior:none;background:#090d0f}button,output{font:inherit}button{color:inherit}#cityViewport,#cityViewport canvas{position:absolute;inset:0;width:100%;height:100%;display:block}#cityViewport{background:#090d0f}#cityViewport canvas{outline:0;touch-action:none}.city-hud{position:absolute;inset:0;z-index:2;overflow:hidden;pointer-events:none;user-select:none}.city-stats,.profile-panel,.skillbar,.run-panel{border:1px solid var(--hud-border);background:var(--hud-bg);box-shadow:0 10px 28px #00000057;backdrop-filter:blur(10px)}.city-stats{position:absolute;z-index:5;top:max(12px,env(safe-area-inset-top));left:max(12px,env(safe-area-inset-left));width:min(390px,calc(100% - 86px));padding:9px 11px 10px;border-radius:6px}.city-stats__header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:7px;border-bottom:1px solid rgba(232,186,88,.17)}.city-stats__header span,.city-stats__grid span,.profile-panel__header span,.profile-output span,.run-kicker,.run-status{text-transform:uppercase}.city-stats__header span{color:var(--amber);font-size:10px;font-weight:900}.city-stats__header strong{color:var(--mint);font:800 10px ui-monospace,SFMono-Regular,Consolas,monospace}.city-stats__grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1px;margin-top:8px;background:#e8ba581a}.city-stats__grid>div{min-width:0;display:grid;gap:2px;padding:3px 8px;background:#080c0cf5}.city-stats__grid span{overflow:hidden;color:var(--muted);font-size:8px;font-weight:800;text-overflow:ellipsis;white-space:nowrap}.city-stats__grid strong{overflow:hidden;color:#f4ead0;font:900 15px ui-monospace,SFMono-Regular,Consolas,monospace;text-overflow:ellipsis}.profile-toggle,.pixel-toggle{position:absolute;z-index:9;top:max(12px,env(safe-area-inset-top));right:max(12px,env(safe-area-inset-right));width:40px;height:40px;display:grid;place-items:center;padding:0;border:1px solid var(--hud-border);border-radius:6px;background:#090d0de6;color:#f2dc9a;cursor:pointer;pointer-events:auto}.pixel-toggle{right:max(60px,calc(env(safe-area-inset-right) + 48px))}.profile-toggle:hover,.profile-toggle[aria-expanded=true],.pixel-toggle:hover,.pixel-toggle[aria-pressed=true]{border-color:var(--amber);background:#3d3117e6}.pixel-toggle[aria-pressed=true]{border-color:#65e8ff;background:#133e45eb;color:#a7f4ff;box-shadow:0 0 14px #40e0ff38}.profile-toggle svg,.pixel-toggle svg{width:20px;height:20px}.profile-panel{position:absolute;z-index:10;top:max(60px,calc(env(safe-area-inset-top) + 58px));right:max(12px,env(safe-area-inset-right));width:min(284px,calc(100% - 24px));max-height:calc(100% - 84px);overflow:auto;border-radius:6px;pointer-events:auto}.profile-panel[hidden]{display:none}.profile-panel__header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 10px;border-bottom:1px solid rgba(232,186,88,.18)}.profile-panel__header>div{min-width:0;display:flex;align-items:baseline;gap:8px}.profile-panel__header span{color:var(--mint);font-size:8px;font-weight:900}.profile-panel__header strong{color:#efe8d6;font-size:12px}.profile-panel__header button{width:28px;height:28px;flex:0 0 auto;padding:0;border:1px solid rgba(232,186,88,.24);border-radius:4px;background:#e8ba5812;color:#dfd7c3;font-size:20px;line-height:1;cursor:pointer}.profile-panel__header button:hover{border-color:var(--amber);color:#fff0bc}.profile-output{display:grid;padding:6px 10px 10px}.profile-output>div{min-height:27px;display:flex;align-items:baseline;justify-content:space-between;gap:16px;border-bottom:1px solid rgba(232,186,88,.1)}.profile-output span{color:var(--muted);font-size:9px;font-weight:700}.profile-output strong{max-width:150px;overflow-wrap:anywhere;color:var(--amber);font:800 10px ui-monospace,SFMono-Regular,Consolas,monospace;text-align:right}.reticle{position:absolute;z-index:4;top:50%;left:50%;width:34px;height:34px;margin:-17px 0 0 -17px;opacity:.78;--charge: 0}.reticle:before,.reticle:after{content:"";position:absolute;background:#fff1c4;box-shadow:0 0 5px #000000e6}.reticle:before{top:12px;left:16px;width:2px;height:10px}.reticle:after{top:16px;left:12px;width:10px;height:2px}.reticle i{position:absolute;inset:0;border-radius:50%;opacity:0;background:conic-gradient(var(--amber) calc(var(--charge) * 1turn),rgba(232,186,88,.14) 0);-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 0);mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 0)}.reticle.charging i,.reticle.hit i{opacity:1}.reticle.full i{animation:reticle-pulse .42s ease-in-out infinite alternate}.reticle.hit{animation:reticle-hit .16s ease-out both}.reticle.hit:before,.reticle.hit:after{background:#fff197;box-shadow:0 0 10px #e8ba58}@keyframes reticle-pulse{to{transform:scale(1.14);filter:brightness(1.6)}}@keyframes reticle-hit{0%{transform:scale(1.38)}to{transform:scale(1)}}.damage-flash{position:absolute;z-index:12;inset:0;opacity:0;background:radial-gradient(circle at center,transparent 34%,rgba(164,17,22,.22) 68%,rgba(155,8,14,.74) 100%);transition:opacity .11s linear}.damage-flash.active{opacity:1}.wave-banner,.evolution-toast{position:absolute;z-index:7;left:50%;min-width:260px;max-width:calc(100% - 28px);display:grid;gap:3px;padding:9px 24px;border-top:1px solid rgba(232,186,88,.68);border-bottom:1px solid rgba(232,186,88,.5);background:#070b0bb8;text-align:center;opacity:0;transform:translate(-50%,-9px);transition:opacity .17s ease,transform .17s ease}.wave-banner{top:13%}.evolution-toast{top:21%;border-color:#69d9b0a6}.wave-banner.show,.evolution-toast.show{opacity:1;transform:translate(-50%)}.wave-banner.show{animation:wave-banner-impact .52s cubic-bezier(.16,1,.3,1) both}@keyframes wave-banner-impact{0%{opacity:0;transform:translate(-50%,-10px) scale(1.12);filter:brightness(1.8)}38%{opacity:1;transform:translate(-50%) scale(.985);filter:brightness(1.18)}to{opacity:1;transform:translate(-50%) scale(1);filter:brightness(1)}}.wave-banner span,.evolution-toast span{color:var(--mint);font-size:9px;font-weight:900;text-transform:uppercase}.wave-banner strong,.evolution-toast strong{color:#fff0bd;font:800 17px Georgia,Times New Roman,serif}.charge-panel{position:absolute;z-index:5;left:50%;bottom:max(106px,calc(100px + env(safe-area-inset-bottom)));width:min(520px,calc(100% - 260px));transform:translate(-50%);opacity:0;transition:opacity .12s ease}.charge-panel.active,.charge-panel.charging{opacity:1}.charge-panel__label{display:flex;justify-content:space-between;gap:12px;margin-bottom:5px;color:#eee5cd;font-size:9px;font-weight:900;text-transform:uppercase;text-shadow:0 1px 3px #000}.charge-panel__label output{color:var(--amber);font:900 10px ui-monospace,SFMono-Regular,Consolas,monospace}.charge-track{position:relative;height:9px;overflow:hidden;border:1px solid rgba(244,226,176,.4);border-radius:3px;background:#040707d1}.charge-fill{position:absolute;inset:0 auto 0 0;width:0;background:var(--amber);box-shadow:0 0 11px currentColor}.charge-stop{position:absolute;z-index:2;top:0;bottom:0;left:calc(var(--charge-stop) * 100%);width:2px;transform:translate(-1px);background:#040707d1}.charge-stop.unlocked{background:#fff2bd;box-shadow:0 0 7px #ffda6fe6}.skillbar{position:absolute;z-index:6;left:50%;bottom:max(31px,calc(25px + env(safe-area-inset-bottom)));display:flex;gap:7px;padding:7px 9px;border-radius:8px;transform:translate(-50%);pointer-events:auto}.skill-slot{position:relative;width:56px;height:56px;flex:0 0 auto;overflow:hidden;padding:0;border:1px solid rgba(232,186,88,.4);border-radius:5px;background:#17201e;cursor:pointer}.skill-slot:hover:not(:disabled),.skill-slot.active{border-color:#f1ca72;filter:brightness(1.1)}.skill-slot:focus-visible,.profile-toggle:focus-visible,.pixel-toggle:focus-visible,.touch-button:focus-visible,.run-action:focus-visible{outline:2px solid var(--mint);outline-offset:2px}.skill-slot:disabled,.skill-slot.locked{cursor:default;opacity:.46}.skill-slot img{width:100%;height:100%;display:block;object-fit:cover}.skill-slot--flight{display:grid;place-items:center;background:#16332f;color:#b9f6df}.skill-slot--flight[aria-pressed=true],.skill-slot--flight.active{border-color:var(--mint);background:#265347;box-shadow:inset 0 0 18px #69d9b038,0 0 10px #69d9b040}.flight-mark{font:900 13px ui-monospace,SFMono-Regular,Consolas,monospace}.skill-key,.skill-name{position:absolute;z-index:3;color:#fff2bd;font:900 8px ui-monospace,SFMono-Regular,Consolas,monospace;text-shadow:0 1px 3px #000,0 0 4px #000;text-transform:uppercase}.skill-key{top:3px;left:4px}.skill-name{right:4px;bottom:3px;left:4px;overflow:hidden;text-align:right;text-overflow:ellipsis;white-space:nowrap}.skill-cooldown{position:absolute;z-index:2;inset:auto 0 0;height:0%;background:#030607cc;pointer-events:none}.skill-slot.flock-active{border-color:#78f5da;box-shadow:inset 0 0 14px #29f0b26b,0 0 11px #64dcff3d}.skill-slot.flock-chain:after{content:"x" attr(data-chain);position:absolute;z-index:4;top:3px;right:3px;min-width:17px;padding:1px 3px;border-radius:3px;background:#05453de6;color:#fff0a2;font:900 9px ui-monospace,SFMono-Regular,Consolas,monospace;line-height:14px;text-align:center}.orbs{position:absolute;inset:0;pointer-events:none}.orb{position:absolute;bottom:max(25px,calc(19px + env(safe-area-inset-bottom)));width:108px;height:108px;overflow:hidden;border:3px solid rgba(202,164,71,.72);border-radius:50%;background:radial-gradient(circle at 38% 30%,#2a1f14,#0b0805);box-shadow:0 0 0 3px #11130e,inset 0 8px 18px #ffffff14,0 7px 16px #0000008f}.orb-hp{left:max(24px,env(safe-area-inset-left))}.orb-energy{right:max(24px,env(safe-area-inset-right))}.orb-number{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;color:#fff;font-size:14px;font-weight:900;text-shadow:0 1px 3px #000}.orb-label{color:#ffffffb8;font-size:8px;letter-spacing:1.8px}.orb-frame{position:absolute;bottom:max(1px,env(safe-area-inset-bottom));width:148px;height:148px;opacity:.34;filter:drop-shadow(0 3px 6px rgba(0,0,0,.42))}.orb-frame-hp{left:1px}.orb-frame-energy{right:1px}.orb-hp.healing{filter:drop-shadow(0 0 15px rgba(111,255,170,.62))}.xp-bar{position:absolute;z-index:4;right:0;bottom:env(safe-area-inset-bottom);left:0;height:20px;display:flex;align-items:center;gap:10px;padding:0 168px;background:linear-gradient(transparent,#050808e6);color:#e9cd80;font-size:9px;font-weight:900;text-transform:uppercase}.xp-bar>span{flex:0 0 auto}.xp-track{position:relative;min-width:20px;height:6px;flex:1;overflow:hidden;border:1px solid rgba(232,186,88,.23);border-radius:2px;background:#0000009e}.xp-fill{width:0%;height:100%;background:linear-gradient(90deg,#397c5e,var(--mint),#e8ba58);box-shadow:0 0 8px #69d9b08c;transition:width .16s ease}.mobile-controls{display:none}.run-overlay{position:absolute;z-index:20;inset:0;display:grid;place-items:center;padding:20px;background:#020506a8;pointer-events:auto}.run-overlay[hidden],.run-overlay.is-hidden{display:none}.run-panel{width:min(400px,100%);padding:22px;border-radius:8px}.run-overlay[data-state=dead] .run-panel{border-color:#eb655ab3}.run-overlay[data-state=dead] .run-kicker,.run-overlay[data-state=dead] .run-status{color:#ff9286}.run-kicker{color:var(--mint);font:900 10px ui-monospace,SFMono-Regular,Consolas,monospace}.run-panel h1{margin:8px 0 7px;color:#f4cf78;font:800 29px/1.08 Georgia,Times New Roman,serif}.run-panel p{margin:0;color:#c7d0cb;font-size:13px;line-height:1.45}.run-result{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-top:17px;padding:10px 0;border-top:1px solid rgba(232,186,88,.2);border-bottom:1px solid rgba(232,186,88,.2)}.run-result[hidden]{display:none}.run-result span{color:var(--muted);font-size:10px;font-weight:900;text-transform:uppercase}.run-result strong{color:var(--amber);font:900 21px ui-monospace,SFMono-Regular,Consolas,monospace}.run-status{margin-top:17px;color:var(--muted);font:800 9px ui-monospace,SFMono-Regular,Consolas,monospace}.run-action{width:100%;min-height:42px;margin-top:8px;border:1px solid #e3b555;border-radius:5px;background:#d5a142;color:#171006;font-weight:900;cursor:pointer}.run-action:hover:not(:disabled){background:#e8bb60}.run-action:disabled,.run-action[aria-busy=true]{cursor:progress;opacity:.72}@media(max-width:800px){.city-stats{width:min(292px,calc(100% - 122px))}.city-stats__grid>div{padding-inline:5px}.city-stats__grid span[data-mobile-label]{font-size:0}.city-stats__grid span[data-mobile-label]:after{content:attr(data-mobile-label);font-size:8px}.skillbar{gap:5px;padding:6px 7px}.skill-slot{width:48px;height:48px}.skill-name{display:none}.xp-bar{padding-inline:130px}.charge-panel{width:min(420px,calc(100% - 210px))}}@media(max-width:720px){.orb{width:86px;height:86px}.orb-frame{width:120px;height:120px}.orb-hp{left:17px}.orb-energy{right:17px}.orb-frame-hp{left:0}.orb-frame-energy{right:0}}@media(pointer:coarse){.city-hud:has(#performanceProfilePanel:not([hidden])) .city-stats,.city-hud:has(#performanceProfilePanel:not([hidden])) .wave-banner,.city-hud:has(#performanceProfilePanel:not([hidden])) .evolution-toast,.city-hud:has(#performanceProfilePanel:not([hidden])) .charge-panel,.city-hud:has(#performanceProfilePanel:not([hidden])) .skillbar,.city-hud:has(#performanceProfilePanel:not([hidden])) .orbs,.city-hud:has(#performanceProfilePanel:not([hidden])) .xp-bar,.city-hud:has(#performanceProfilePanel:not([hidden])) .mobile-controls{display:none}.reticle{display:none}.mobile-controls{position:absolute;z-index:8;inset:0;display:block;pointer-events:none}.move-pad,.action-pad{position:absolute;bottom:max(12px,env(safe-area-inset-bottom));pointer-events:auto}.move-pad{left:max(12px,env(safe-area-inset-left));width:144px;height:104px}.action-pad{right:max(12px,env(safe-area-inset-right));width:154px;display:grid;grid-template-columns:repeat(3,48px);gap:5px}.touch-button{height:48px;padding:0;border:1px solid rgba(232,186,88,.5);border-radius:6px;background:#080d0dc7;color:#f2e0aa;font-size:9px;font-weight:900;text-transform:uppercase;touch-action:none}.touch-button:active,.touch-button.active{border-color:var(--mint);background:#194d3ee0}.move-pad .touch-button{position:absolute;width:46px;font-size:17px}.move-pad .touch-button[data-key=KeyW]{top:0;left:49px}.move-pad .touch-button[data-key=KeyA]{bottom:0;left:0}.move-pad .touch-button[data-key=KeyS]{bottom:0;left:49px}.move-pad .touch-button[data-key=KeyD]{right:0;bottom:0}.action-pad .touch-button{width:48px}.touch-button--major{border-color:#eb655ab3;background:#56221ddb}.skillbar{bottom:max(190px,calc(184px + env(safe-area-inset-bottom)));display:grid;grid-template-columns:repeat(6,minmax(0,44px));justify-content:center;width:min(296px,calc(100% - 16px));gap:4px;padding:6px}.skill-slot{width:100%;height:auto;min-width:0;aspect-ratio:1}.skill-key{font-size:7px}.charge-panel{bottom:max(247px,calc(241px + env(safe-area-inset-bottom)));width:min(300px,calc(100% - 24px))}.orb{bottom:calc(132px + env(safe-area-inset-bottom));width:72px;height:72px}.orb-frame{display:none}.xp-bar{right:max(80px,calc(env(safe-area-inset-right) + 68px));bottom:max(131px,calc(125px + env(safe-area-inset-bottom)));left:max(80px,calc(env(safe-area-inset-left) + 68px));height:32px;display:grid;grid-template-columns:auto minmax(20px,1fr) auto;padding:0;background:none;font-size:7px}.wave-banner{top:118px}.evolution-toast{top:174px}}@media(pointer:coarse)and (max-width:390px){.city-stats{width:calc(100% - 122px);padding-inline:8px}.city-stats__grid strong{font-size:13px}.move-pad{left:max(7px,env(safe-area-inset-left));width:132px;height:96px}.move-pad .touch-button{width:42px;height:44px}.move-pad .touch-button[data-key=KeyW],.move-pad .touch-button[data-key=KeyS]{left:45px}.action-pad{right:max(7px,env(safe-area-inset-right));width:135px;grid-template-columns:repeat(3,42px);gap:4px}.action-pad .touch-button{width:42px;height:44px;font-size:8px}.skillbar{bottom:max(178px,calc(172px + env(safe-area-inset-bottom)));grid-template-columns:repeat(6,minmax(0,41px));width:min(272px,calc(100% - 12px))}.charge-panel{bottom:max(231px,calc(225px + env(safe-area-inset-bottom)))}.xp-bar{bottom:max(117px,calc(111px + env(safe-area-inset-bottom)))}}@media(pointer:coarse)and (max-height:560px)and (orientation:landscape){.city-stats{width:246px}.city-stats__header{padding-bottom:4px}.city-stats__grid{margin-top:4px}.profile-panel{bottom:8px;max-height:none}.skillbar{bottom:max(7px,env(safe-area-inset-bottom));width:278px;grid-template-columns:repeat(6,40px)}.charge-panel{bottom:max(61px,calc(55px + env(safe-area-inset-bottom)));width:274px}.xp-bar{top:max(10px,env(safe-area-inset-top));right:auto;bottom:auto;left:50%;width:210px;transform:translate(-50%)}.wave-banner{top:72px}.evolution-toast{top:126px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation-duration:1ms!important;animation-iteration-count:1!important;transition-duration:1ms!important}}
