:root{--void: #03031a;--navy: #0c0c4f;--signal: #ff4f2e;--ember: #ff9a5c;--lattice: #8e8bff;--text: #e4e6ff;--muted: #a3a6d6;--hair: rgba(142, 139, 255, .32);--body: "Geist", system-ui, sans-serif;--display: "Oxanium", "Geist", system-ui, sans-serif;--mono: "Geist Mono", ui-monospace, monospace;--view-x: 0px;--view-w: 100vw;--view-h: 80vh;--bar-h: 80px;--below: 0px;color-scheme:dark}*{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden;background:var(--void);color:var(--text);font-family:var(--body);-webkit-font-smoothing:antialiased;font-synthesis:none;overscroll-behavior:none;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}h1,h2,p,dl,dd{margin:0}button{font:inherit;color:inherit;cursor:pointer}a{color:inherit}:focus-visible{outline:2px solid var(--ember);outline-offset:3px}#screen{position:fixed;inset:0;width:100%;height:100%;display:block;cursor:crosshair}body.is-locked #screen{cursor:none}.crosshair{position:fixed;left:calc(var(--view-x) + var(--view-w) / 2);top:calc(var(--view-h) / 2);width:4px;height:4px;margin:-2px 0 0 -2px;background:var(--ember);opacity:.7;pointer-events:none;display:none}body[data-screen=play] .crosshair{display:block}.aim-hint{position:fixed;left:calc(var(--view-x) + var(--view-w) / 2);top:calc(var(--view-h) - 52px);transform:translate(-50%);padding:8px 14px;background:#03031ac7;font:500 13px/1 var(--mono);color:var(--ember);pointer-events:none;display:none;white-space:nowrap}html:not(.is-touch) body[data-screen=play]:not(.is-locked) .aim-hint{display:block}.toast{position:fixed;left:calc(var(--view-x) + var(--view-w) / 2);top:calc(var(--view-h) * .12);z-index:15;transform:translate(-50%,-8px);max-width:calc(100vw - 32px);padding:10px 16px;background:#03031ad1;border-left:3px solid var(--signal);font:500 clamp(13px,1.6vw,16px)/1.3 var(--mono);color:var(--text);text-align:center;opacity:0;transition:opacity .2s,transform .2s;pointer-events:none}.toast.is-on{opacity:1;transform:translate(-50%)}.touch{position:fixed;inset:0;z-index:10;display:none;touch-action:none}.is-touch body[data-screen=play] .touch{display:block}.stick{position:absolute;left:0;top:0;width:120px;height:120px;border-radius:50%;border:2px solid rgba(142,139,255,.45);background:#0c0c4f59;opacity:0;pointer-events:none}.stick.is-on{opacity:1}body.has-room .stick:not(.is-on){opacity:.5;transform:translate(max(24px,env(safe-area-inset-left)),calc(var(--view-h) + var(--bar-h) + (var(--below) - 120px) / 2))}.stick i{position:absolute;left:36px;top:36px;width:44px;height:44px;border-radius:50%;background:#ff4f2ebf}.touch-buttons{position:absolute;right:max(16px,env(safe-area-inset-right));bottom:calc(var(--bar-h) + 14px);display:grid;grid-template-columns:auto auto;grid-template-areas:"swap map" "use fire";gap:12px;align-items:end;justify-items:center}body.has-room .touch-buttons{bottom:calc((var(--below) - 172px) / 2)}.touch-buttons button{display:grid;place-items:center;border:0;border-radius:50%;padding:0;font:600 12px/1 var(--mono);text-transform:uppercase;letter-spacing:.04em;color:var(--text);background:#0c0c4f9e;box-shadow:inset 0 0 0 2px #8e8bff80;touch-action:none;-webkit-tap-highlight-color:transparent}.touch-buttons button:active{background:#ff4f2e8c}.t-fire{grid-area:fire;width:88px;height:88px;background:#ff4f2e8c!important;box-shadow:inset 0 0 0 2px var(--ember)!important;font-size:14px!important}.t-fire:active{background:#ff9a5ccc!important}.t-use{grid-area:use;width:64px;height:64px}.t-swap{grid-area:swap;width:48px;height:48px;font-size:10px!important}.t-map{grid-area:map;width:48px;height:48px;font-size:10px!important}.t-pause{position:absolute;top:max(12px,env(safe-area-inset-top));right:max(12px,env(safe-area-inset-right));width:44px;height:44px;display:flex;gap:5px;align-items:center;justify-content:center;border:0;background:#03031a99;box-shadow:inset 0 0 0 1px var(--hair)}.t-pause span{width:5px;height:16px;background:var(--text)}.screen{position:fixed;inset:0;z-index:20;display:grid;place-items:center;padding:28px 16px;overflow-y:auto;touch-action:pan-y}.screen[hidden]{display:none}.title-screen{background:radial-gradient(ellipse at 50% 42%,#03031a80,#03031af0 72%)}.panel-screen{background:#03031acc}.title-wrap{width:min(920px,100%);display:grid;justify-items:center;text-align:center;container-type:inline-size}.logo{width:100%;white-space:nowrap;font:800 clamp(24px,8.6cqw,82px)/1 var(--display);letter-spacing:-.04em;text-transform:uppercase;text-shadow:0 2px 0 #7a1c10,0 4px 0 #5a140c,0 6px 0 #3a0c08,0 8px 0 #1a0604,0 14px 30px rgba(0,0,0,.7)}.logo-a{color:var(--signal)}.logo-b{color:var(--text)}.tagline{margin-top:18px;max-width:42ch;font:500 clamp(16px,2.1vw,20px)/1.4 var(--body);color:var(--muted)}.difficulty{width:min(540px,100%);margin-top:32px;display:grid;justify-items:stretch}.difficulty-heading{display:flex;justify-content:space-between;align-items:baseline;gap:16px}.choose{font:600 18px/1.2 var(--display);color:var(--text)}#diff-level{font:600 13px/1 var(--mono);color:var(--ember);font-variant-numeric:tabular-nums}#diff-range{appearance:none;-webkit-appearance:none;width:100%;height:30px;margin:14px 0 0;background:linear-gradient(90deg,var(--signal) var(--progress, 33.333%),rgba(142,139,255,.38) var(--progress, 33.333%)) center / 100% 5px no-repeat;border:0;cursor:pointer;touch-action:pan-x}#diff-range::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:22px;height:22px;background:var(--void);border:4px solid var(--signal);border-radius:3px;box-shadow:0 0 0 3px #ff4f2e38,0 0 18px #ff4f2e59}#diff-range::-moz-range-thumb{width:14px;height:14px;background:var(--void);border:4px solid var(--signal);border-radius:3px;box-shadow:0 0 0 3px #ff4f2e38,0 0 18px #ff4f2e59}#diff-range:focus-visible{outline:2px solid var(--ember);outline-offset:4px}.diff-steps{display:flex;justify-content:space-between;padding:0 4px;font:500 11px/1 var(--mono);color:var(--muted)}.diff-readout{min-height:58px;margin-top:16px;display:grid;align-content:start;gap:3px}.diff-readout strong{font:700 21px/1.2 var(--display);color:var(--text)}.diff-readout p{font:400 14px/1.35 var(--body);color:var(--muted)}.start-game{width:100%;margin-top:12px;gap:12px}.start-game span{font-size:20px;line-height:1}.controls{margin-top:26px;font:400 13px/1.4 var(--mono);color:var(--muted)}.controls-desktop{display:grid;grid-template-columns:repeat(4,auto);gap:10px 22px;justify-content:center}.controls-desktop div{display:grid;gap:2px;text-align:left}.controls-desktop dt{color:var(--ember)}.controls-touch{display:none;max-width:40ch}.is-touch .controls-desktop{display:none}.is-touch .controls-touch{display:block}.back{margin-top:26px;font:500 14px/1 var(--body);color:var(--muted);text-decoration:none;border-bottom:1px solid var(--hair);padding-bottom:4px}.back:hover{color:var(--text);border-color:var(--ember)}.panel{width:min(440px,100%);padding:32px 28px;display:grid;gap:14px;text-align:center;background:#07072ef0;box-shadow:inset 0 0 0 1px var(--hair),inset 0 3px 0 var(--signal);clip-path:polygon(0 0,calc(100% - 18px) 0,100% 18px,100% 100%,18px 100%,0 calc(100% - 18px))}.panel h2{font:700 clamp(26px,5vw,34px)/1.1 var(--display);letter-spacing:-.02em}.panel p{color:var(--muted);line-height:1.45}.panel .sub{font:500 15px/1.3 var(--mono);color:var(--muted)}.panel .sub b{color:var(--text);font-weight:600}.stack{display:grid;gap:8px;margin-top:6px}.btn{display:flex;align-items:center;justify-content:center;min-height:48px;padding:0 20px;border:0;font:600 15px/1 var(--body);text-decoration:none;background:#0c0c4fe6;box-shadow:inset 0 0 0 1px var(--hair);clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,10px 100%,0 calc(100% - 10px))}.btn:hover,.btn:focus-visible{box-shadow:inset 0 0 0 1px var(--ember);outline:none}.btn-primary{background:var(--signal);color:#fff;box-shadow:none}.btn-primary:hover,.btn-primary:focus-visible{background:var(--ember);color:var(--void);box-shadow:none}.tally{display:grid;grid-template-columns:1fr 1fr;gap:2px;margin:6px 0 8px}.tally div{display:grid;gap:4px;padding:12px;background:#0c0c4fb3;text-align:left}.tally dt{font:500 12px/1 var(--mono);color:var(--muted)}.tally dd{font:600 22px/1.1 var(--mono);color:var(--text);font-variant-numeric:tabular-nums}.tally div:last-child dd{color:var(--ember)}@media(max-width:640px){.controls-desktop{grid-template-columns:repeat(2,auto)}.difficulty{margin-top:26px}}@media(max-height:520px)and (orientation:landscape){.screen{place-items:start center}.tagline{margin-top:12px}.difficulty{margin-top:16px}.controls{margin-top:14px}}@media(prefers-reduced-motion:reduce){.toast{transition:none}}
