:root{color-scheme:dark}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{background:#0b0c12;color:#dfe6f2;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;overflow:hidden;user-select:none;-webkit-user-select:none;overscroll-behavior:none}.app{position:fixed;top:0;right:0;bottom:0;left:0}canvas.stage{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;display:block;touch-action:none;-webkit-tap-highlight-color:transparent}.hud-top{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;gap:12px;padding:6px 10px;pointer-events:none;font-size:12px}.bars{display:flex;flex-direction:column;gap:3px;width:42%;max-width:240px}.bar{display:flex;align-items:center;gap:6px}.bar-label{width:30px;font-size:9px;letter-spacing:.5px;opacity:.65}.bar-track{flex:1;height:7px;background:#ffffff1a;border-radius:4px;overflow:hidden}.bar-fill{height:100%;transition:width .12s linear}.bar-fill.life{background:linear-gradient(90deg,#ff5a5a,#ff9a5a)}.bar-fill.energy{background:linear-gradient(90deg,#2f8bff,#39d3ff)}.counters{display:flex;gap:12px;margin-left:auto;font-variant-numeric:tabular-nums;font-weight:600}.coin{color:#ffd54a}.coin.special{color:#69f0ff}.score{opacity:.8;font-weight:500}.level{color:#9cffb0;font-weight:600}.readout{display:flex;gap:8px;opacity:.55;font-size:10px;font-variant-numeric:tabular-nums}.readout .slow{color:#ffe08a;opacity:1}.hud-slots{position:absolute;left:0;right:0;bottom:0;display:flex;flex-direction:column;gap:5px;padding:6px 8px;align-items:center;pointer-events:none}.slot-row{display:flex;gap:6px;justify-content:center}.slot{position:relative;overflow:hidden;pointer-events:auto;width:92px;height:40px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;border:1px solid rgba(255,255,255,.14);border-radius:8px;background:#121620b8;color:#cdd6e6;font:inherit;cursor:pointer}.slot-fill{position:absolute;left:0;right:0;bottom:0;z-index:0;pointer-events:none;transition:height .05s linear}.slot.ranged.active .slot-fill{background:#39d3ff38}.slot.melee.active .slot-fill{background:#ffb14a38}.slot-kind{position:relative;z-index:1;font-size:8px;letter-spacing:.6px;opacity:.55}.slot-name{position:relative;z-index:1;font-size:12px;font-weight:600}.slot.ranged.active{border-color:#39d3ff;box-shadow:0 0 0 1px #39d3ff,0 0 14px #39d3ff59;color:#eafcff}.slot.melee.active{border-color:#ffb14a;box-shadow:0 0 0 1px #ffb14a,0 0 14px #ffb14a59;color:#fff3e2}.panel-toggle{position:absolute;top:8px;right:8px;pointer-events:auto;background:#121620d9;color:#dfe6f2;border:1px solid rgba(255,255,255,.15);border-radius:8px;padding:6px 10px;font:inherit;font-size:12px;cursor:pointer}.panel{position:absolute;top:0;right:0;height:100%;width:288px;max-width:84vw;background:#0c0e14e6;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border-left:1px solid rgba(255,255,255,.1);display:flex;flex-direction:column;pointer-events:auto;font-size:12px}.panel-head{display:flex;align-items:center;justify-content:space-between;padding:8px 10px;border-bottom:1px solid rgba(255,255,255,.08);font-size:12px}.panel-head .x{background:none;border:none;color:#aab3c5;cursor:pointer;font-size:14px}.panel-body{overflow-y:auto;padding:8px 10px 24px}.panel section{margin-bottom:10px;padding-bottom:8px;border-bottom:1px solid rgba(255,255,255,.05)}.panel h4{margin:4px 0 6px;font-size:10px;letter-spacing:.8px;text-transform:uppercase;opacity:.55}.seg,.row-btns{display:flex;gap:4px;margin-bottom:6px;flex-wrap:wrap}.seg.small,.row-btns.small{align-items:center}.seg-label{font-size:10px;opacity:.6;align-self:center;margin-right:2px}.panel button{background:#1e2432e6;color:#cdd6e6;border:1px solid rgba(255,255,255,.12);border-radius:6px;padding:5px 8px;font:inherit;font-size:11px;cursor:pointer;flex:1 0 auto}.panel button.on{background:#2f6bd8;border-color:#4f8bff;color:#fff}.chk{display:inline-flex;align-items:center;gap:4px;font-size:10px;opacity:.7;flex:1 0 auto}.chk.on{opacity:1;color:#9cccff}.chk input{accent-color:#4f8bff}.gear-row{margin-bottom:8px}.gear-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:3px}.gear-cat{font-size:10px;text-transform:uppercase;letter-spacing:.6px;opacity:.6}.gear-blurb{font-size:10px;color:#9cccff}.slider{margin:5px 0}.slider label{display:flex;justify-content:space-between;font-size:11px;opacity:.85;margin-bottom:1px}.slider .val{font-variant-numeric:tabular-nums;color:#9cccff}.slider input[type=range]{width:100%;accent-color:#4f8bff}.btn{width:100%;padding:8px;border-radius:8px;border:1px solid rgba(255,255,255,.15);background:#1e2432e6;color:#dfe6f2;font:inherit;cursor:pointer}.btn.reset{margin-top:4px}.btn.primary{background:#2f6bd8;border-color:#4f8bff;color:#fff;font-weight:600}.hint{margin-top:10px;font-size:10px;line-height:1.5;opacity:.5}.tutorial{position:absolute;top:20%;left:0;right:0;display:flex;flex-direction:column;align-items:center;gap:10px;pointer-events:none;z-index:5}.tut-banner{display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px 22px;border-radius:14px;background:#0a0e16d1;border:1px solid rgba(120,200,255,.35);box-shadow:0 6px 24px #00000073;max-width:82%;text-align:center}.tut-banner.retry{border-color:#ff78788c}.tut-step{font-size:10px;letter-spacing:1.2px;color:#6fb7ff;opacity:.9}.tut-prompt{font-size:17px;font-weight:600;color:#eaf3ff}.tut-skip{pointer-events:auto;background:#141a26e6;color:#aab3c5;border:1px solid rgba(255,255,255,.14);border-radius:8px;padding:6px 12px;font:inherit;font-size:12px;cursor:pointer}.gameover{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;background:#06080c8c;pointer-events:auto}.gameover-card{text-align:center;padding:22px 30px;border-radius:14px;background:#10141ef2;border:1px solid rgba(255,255,255,.12)}.gameover-card h2{margin:0 0 6px;letter-spacing:1px}.gameover-card p{margin:0 0 14px;opacity:.8}.gameover-card .special{color:#69f0ff}