:root{color-scheme:dark;--ink:#eaf1ec;--muted:#a4b7b7;--acid:#d4f174;--line:#ffffff25}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{margin:0;width:100%;height:100%;overflow:hidden;overscroll-behavior:none;background:#0c161b;font:14px system-ui,-apple-system,sans-serif;color:var(--ink);user-select:none;-webkit-user-select:none;touch-action:none}button,input{font:inherit}button{cursor:pointer;border:1px solid var(--line);background:#182b30dd;color:var(--ink);padding:13px 20px;border-radius:4px;touch-action:none;transition:background .15s,transform .15s}button:hover{background:#34494a}button:active{transform:translateY(2px)}button:focus-visible,input:focus-visible{outline:2px solid var(--acid);outline-offset:3px}button.primary{background:var(--acid);border-color:var(--acid);color:#19291b;font-weight:800}button.primary:hover{background:#e6ffa2}button[disabled]{opacity:.35;cursor:default}[hidden]{display:none!important}#app{position:relative;width:100%;height:100vh;height:100dvh;overflow:hidden}canvas{width:100%;height:100%;display:block}#vignette{position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 110px #040a1466}.screen{position:absolute;inset:0;z-index:10;display:flex;align-items:center;padding: max(24px,env(safe-area-inset-top)) max(7vw,env(safe-area-inset-right)) max(24px,env(safe-area-inset-bottom)) max(7vw,env(safe-area-inset-left));background:linear-gradient(90deg,#09171bf5 0%,#0a1921c7 43%,#0b18221a 100%);overflow:auto;touch-action:pan-y}.content{width:min(600px,100%)}.eyebrow,.micro{font:700 10px ui-monospace,monospace;letter-spacing:3px;color:var(--acid)}h1{font:900 clamp(62px,12vw,150px)/.88 system-ui;letter-spacing:-.085em;margin:22px 0 12px}h1 span{color:var(--acid)}.subtitle{font-size:16px;letter-spacing:.45em;margin-bottom:28px}p{line-height:1.9;color:#b3c5c4;max-width:440px;font-size:13px}.menu{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px}.menu button{min-width:135px}.version{font:10px monospace;letter-spacing:2px;color:#859b9c;margin-top:35px}.tag{display:inline-block;border-left:2px solid var(--acid);padding:3px 12px;color:#d6e5d9;font-size:11px;letter-spacing:1px;margin-top:12px}h2{font-size:36px;letter-spacing:-1px;margin:12px 0}h3{margin:6px 0}.grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin:22px 0}.wide{width:min(1080px,100%)}.stagecard{padding:18px 12px;text-align:left;min-height:175px;position:relative;overflow:hidden;background:linear-gradient(155deg,var(--c),#11242cf0 80%)}.stagecard:before{content:'';position:absolute;width:120px;height:80px;right:-35px;top:20px;border:1px solid #ffffff25;transform:rotate(-35deg)}.stagecard b{font:700 40px monospace;display:block;color:#ffffff4a;margin-bottom:18px}.stagecard strong{font-size:15px;display:block}.stagecard small{display:block;margin-top:8px;color:#afc5c3;font-size:10px}.back{padding:9px 16px}.settings{display:flex;align-items:center;gap:18px;margin:18px 0}.settings label{min-width:70px}.settings input{accent-color:var(--acid);width:min(220px,40vw)}.controls{display:grid;grid-template-columns:120px 1fr;gap:9px;color:#b9cbca;margin:20px 0}.controls b{color:var(--ink)}.stats{display:flex;gap:30px;margin:25px 0}.stats b{display:block;font:700 32px monospace;color:var(--acid)}.stats span{color:#9cb1b4;font-size:11px}.health{display:flex;gap:4px;margin:7px 0}.health i{width:20px;height:6px;background:var(--acid);transform:skew(-15deg)}.health i.empty{background:#ffffff20}#hud{position:absolute;z-index:3;top:max(17px,env(safe-area-inset-top));left:max(23px,env(safe-area-inset-left));right:max(23px,env(safe-area-inset-right));display:flex;justify-content:space-between;align-items:flex-start;gap:15px;text-shadow:0 2px 5px #000}#weapon{font:10px monospace;color:#d9e7de;letter-spacing:1px}.mission{text-align:center;width:26%;font-size:11px;letter-spacing:2px;color:#e8eece}.track{height:2px;background:#ffffff30;margin-top:10px}.track i{height:100%;display:block;background:var(--acid)}.hudright{display:flex;align-items:center;gap:18px;font:18px monospace}#pause{padding:8px 15px}#bossbar{position:absolute;top:max(85px,calc(env(safe-area-inset-top) + 65px));left:30%;width:40%;z-index:3;text-align:center;font:10px monospace;letter-spacing:2px}#bossbar>div{height:5px;background:#17242d;margin-top:7px}#bosshp{display:block;height:100%;background:#f28c6e}#toast{position:absolute;z-index:5;top:25%;width:100%;text-align:center;font-weight:800;letter-spacing:3px;color:#f0ffd0;text-shadow:0 3px 14px #000;pointer-events:none;opacity:0;transition:opacity .2s}#touch{position:absolute;inset:0;pointer-events:none;z-index:4}#stick{position:absolute;left:max(35px,calc(env(safe-area-inset-left) + 15px));bottom:max(28px,env(safe-area-inset-bottom));width:112px;height:112px;border:1px solid #deefda45;border-radius:50%;background:#182b3144;pointer-events:auto;touch-action:none;box-shadow:inset 0 0 30px #a1cdca10}#stick:before,#stick:after{content:'';position:absolute;background:#deefda20}#stick:before{width:1px;height:100%;left:50%}#stick:after{height:1px;width:100%;top:50%}#knob{position:absolute;left:33px;top:33px;width:44px;height:44px;border:1px solid #dcefd966;border-radius:50%;background:#bcd9d740}#stick span{position:absolute;bottom:-18px;width:150px;left:-17px;text-align:center;font-size:8px;letter-spacing:1px;color:#adbfbd}.actions{position:absolute;right:max(25px,calc(env(safe-area-inset-right) + 10px));bottom:max(23px,env(safe-area-inset-bottom));display:grid;grid-template-columns:64px 74px 86px;grid-template-rows:50px 76px;gap:9px;align-items:center;pointer-events:none}.actions button{pointer-events:auto;padding:0;width:100%;height:100%;border-radius:50%;font-size:12px;background:#182e3b88;border-color:#c4ddcc50}.actions .small{width:53px;height:45px;border-radius:8px;font-size:10px}#swapTouch{grid-column:2;justify-self:center}#grenadeTouch{grid-column:3;justify-self:center}#jumpTouch{grid-column:2;grid-row:2}#fireTouch{grid-column:3;grid-row:2;background:#cfe98535;color:#e6ffa2;font-weight:900;border-color:#d4f17499}#keyhint{position:absolute;bottom:12px;left:0;width:100%;text-align:center;font:9px monospace;letter-spacing:1px;color:#a0b8b4;pointer-events:none}#rotate{display:none;position:absolute;bottom:7px;text-align:center;width:100%;font-size:10px;color:#c4d6c6;pointer-events:none;z-index:20}#rotate span{font-size:20px;margin-right:8px}@media(pointer:coarse){#keyhint{display:none}}@media(max-height:500px){h1{font-size:80px;margin:12px 0 8px}.subtitle{margin-bottom:12px;font-size:12px}.menu{margin-top:15px}.version{margin-top:14px}.screen{padding-top:max(15px,env(safe-area-inset-top));padding-bottom:15px}.tag{margin-top:3px}p{font-size:11px;line-height:1.7}.stagecard{min-height:145px;padding:12px}.stagecard b{font-size:30px;margin-bottom:12px}h2{font-size:27px;margin:8px 0}.controls{font-size:11px;gap:6px;margin:12px 0}.settings{margin:11px 0}.health i{width:16px}#hud{top:max(10px,env(safe-area-inset-top))}.stats{margin:14px 0}}@media(orientation:portrait){.screen{align-items:center;padding:25px}.grid{grid-template-columns:repeat(2,1fr);gap:8px}.stagecard{min-height:100px;padding:10px}.stagecard b{font-size:23px;margin-bottom:5px}.stagecard:last-child{grid-column:1 / -1}.mission{display:none}#rotate{display:block}#stick{left:19px;width:98px;height:98px;bottom:50px}#knob{left:26px;top:26px}.actions{right:14px;bottom:45px;grid-template-columns:30px 63px 70px;grid-template-rows:43px 65px;gap:7px}#bossbar{left:23%;width:54%}.subtitle{font-size:13px}.version{font-size:8px}}
/* Allow menu scrolling without allowing the playfield to pan or zoom. */
html,body{touch-action:manipulation}canvas,#touch{touch-action:none}.screen{align-items:flex-start;overscroll-behavior:contain}.content,.wide{margin-block:auto}