*{box-sizing:border-box}
html,body{margin:0;height:100%;background:#05070a;color:#e8f2ff;overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;font-family:"Courier New",ui-monospace,Menlo,monospace}
#app{position:fixed;inset:0;--u:1.4}
#stage{position:absolute;left:50%;top:46px;transform:translateX(-50%);width:calc(360px*var(--u));height:calc(480px*var(--u));background:#0a0c10;box-shadow:0 0 0 2px #3a4250,0 0 40px #ff7a2a33;overflow:hidden}
canvas#cv{width:100%;height:100%;display:block}
#hud{position:absolute;left:0;right:0;top:0;padding:calc(var(--u)*4px) calc(var(--u)*6px);pointer-events:none;background:linear-gradient(#05070acc,#05070a00);text-shadow:1px 1px 0 #000}
#hud .r1{display:flex;justify-content:space-between;gap:6px;font-weight:700;font-size:max(11px,calc(var(--u)*9px));letter-spacing:.04em;color:#cde}
#hud b{color:#ffcf5a;font-weight:700}#hLives{color:#ff7a3a;letter-spacing:.12em}
#hud .r2{display:flex;align-items:center;gap:6px;margin-top:calc(var(--u)*3px)}
#hpWrap{flex:1;height:calc(var(--u)*7px);min-height:6px;background:#10161c;border:1px solid #5a6676;border-radius:2px;overflow:hidden}
#hpBar{display:block;height:100%;width:100%;background:linear-gradient(90deg,#27d17a,#b8f04a);transition:width .12s}
#hpBar.mid{background:linear-gradient(90deg,#f0a82a,#ffd24a)}#hpBar.low{background:linear-gradient(90deg,#e0302a,#ff6a4a)}
#hDistr{font-weight:700;font-size:max(10px,calc(var(--u)*8px));color:#9cf;min-width:2.4em;text-align:right}
#tools{position:absolute;right:calc(var(--u)*5px);top:calc(var(--u)*30px);display:flex;gap:6px;z-index:4}
#tools button{font:700 max(10px,calc(var(--u)*7px))/1 "Courier New",monospace;color:#cde;background:#0a0c10aa;border:1px solid #6a7a8c;border-radius:4px;padding:5px 7px;cursor:pointer;min-width:28px}
#tools button:hover,#tools button[aria-pressed=true]{background:#2a3a4c;color:#fff}
#combo{position:absolute;left:calc(var(--u)*6px);top:calc(var(--u)*30px);pointer-events:none;text-shadow:1px 1px 0 #000;width:calc(var(--u)*80px)}
#combo .cm{font-weight:700;font-size:max(15px,calc(var(--u)*16px));color:#ffcf5a;line-height:1}#combo .cm b{font-size:1.3em}
#combo .cb{height:calc(var(--u)*4px);min-height:3px;background:#0a0c10cc;border:1px solid #ffcf5a88;margin:2px 0}#combo .cb i{display:block;height:100%;width:100%;background:linear-gradient(90deg,#ff5a2a,#ffcf5a)}
#combo .cp{font-size:max(10px,calc(var(--u)*8px));color:#cde;font-weight:700}
#bot{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:space-between;align-items:flex-end;padding:calc(var(--u)*5px) calc(var(--u)*6px);pointer-events:none;font-weight:700;font-size:max(10px,calc(var(--u)*8px));background:linear-gradient(#05070a00,#05070acc);text-shadow:1px 1px 0 #000}
#wpn{color:#7fe4ff}#bot .air{color:#777;border:1px solid #555;padding:1px 5px;border-radius:3px;background:#0a0c10aa}#bot .air.on{color:#fff;border-color:#ff5a3a;background:#5a1a12cc}#bot .air.run{color:#ffe;border-color:#fff;background:#c0301ecc}
#toast{position:absolute;left:50%;transform:translate(-50%,-30px);top:calc(var(--u)*60px);opacity:0;transition:opacity .25s,transform .25s;text-align:center;pointer-events:none;background:#0a0c10ee;border:2px solid #ffcf5a;border-radius:6px;padding:8px 12px;max-width:92%;box-shadow:0 0 18px #ff9a3a88;z-index:5}
#toast.on{opacity:1;transform:translate(-50%,0)}#toast b{display:block;color:#ffcf5a;font-size:max(13px,calc(var(--u)*11px));letter-spacing:.06em}#toast small{display:block;color:#cde;font-size:max(10px,calc(var(--u)*8px));margin-top:3px}
#banner{position:absolute;left:0;right:0;top:32%;text-align:center;font-weight:700;font-size:max(17px,calc(var(--u)*20px));letter-spacing:.12em;color:#fff;text-shadow:2px 2px 0 #000,0 0 14px #ff7a2a;pointer-events:none;opacity:0;transition:opacity .4s}#banner.on{opacity:1}#banner small{display:block;font-size:.55em;color:#ffcf5a;margin-top:4px;letter-spacing:.2em}
#crt{position:absolute;inset:0;pointer-events:none;display:none;background:repeating-linear-gradient(0deg,rgba(0,0,0,.26) 0,rgba(0,0,0,.26) 1px,transparent 1px,transparent 3px);box-shadow:inset 0 0 calc(var(--u)*34px) #000a;mix-blend-mode:multiply}
body.crt #crt{display:block}
#btns{position:fixed;display:none;z-index:3;gap:10px;flex-direction:row}
body.touch #btns{display:flex}
#btns .act{font:700 14px/1.1 "Courier New",monospace;color:#fff;background:#2a3446cc;border:2px solid #7fa0c8;border-radius:50%;width:74px;height:74px;padding:0}
#btns .act.air{background:#8a2216dd;border-color:#ff7a5a;width:92px;height:92px}
#btns .act.off{opacity:.35}#btns .act:active{filter:brightness(1.5)}
#stick{position:fixed;width:84px;height:84px;margin:-42px 0 0 -42px;border:2px solid #9fc8ff88;border-radius:50%;display:none;pointer-events:none;z-index:3}
#stick i{position:absolute;left:50%;top:50%;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;background:#9fc8ff66;border:2px solid #cfe4ff}
#stick.on{display:block}
#hint{position:fixed;left:12px;display:none;z-index:2;font-size:12px;color:#9ab;letter-spacing:.06em;pointer-events:none}
body.touch #hint{display:block}
#back{position:fixed;left:10px;top:10px;font:600 12px/1 system-ui,sans-serif;color:#ffcf5a;background:rgba(10,14,20,.6);border:1px solid #a86a2a;border-radius:6px;padding:6px 10px;text-decoration:none;z-index:6;box-shadow:0 0 12px #ff9a3a55}
.ov{position:fixed;inset:0;z-index:20;display:none;align-items:center;justify-content:center;background:rgba(5,7,10,.84);overflow:auto;padding:54px 12px 12px;touch-action:pan-y}
.ov.on{display:flex}
.ov .card{width:min(600px,100%);margin:auto;text-align:center;background:#0d1218ee;border:2px solid #a86a2a;border-radius:10px;padding:16px 14px;box-shadow:0 0 40px #ff7a2a55}
.ov h1{margin:0 0 4px;font-size:clamp(28px,6vw,44px);letter-spacing:.12em;color:#fff;text-shadow:0 0 14px #ff7a2a,3px 3px 0 #7a2a10}
.ov h2{margin:0 0 8px;font-size:clamp(20px,5vw,30px);letter-spacing:.1em;color:#ffcf5a}
.ov p{margin:6px 0;color:#cde;font-size:14px;line-height:1.35}
.ov .big{font-size:26px;color:#ffcf5a;font-weight:700;margin:4px 0}
.ov button.go,.ov a.go{display:inline-block;margin:8px 6px 2px;font:700 18px "Courier New",monospace;letter-spacing:.1em;color:#0a0c10;background:linear-gradient(#ffd878,#ff9a3a);border:0;border-radius:8px;padding:12px 22px;cursor:pointer;box-shadow:0 4px 0 #a8501a;text-decoration:none;min-height:44px}
.ov button.alt,.ov a.alt{background:#1a222c;color:#cde;box-shadow:0 4px 0 #0a0c10;border:1px solid #6a7a8c;font-size:14px}
.ov .keys{font-size:12px;color:#9ab;margin:8px 0;line-height:1.7}.ov .keys kbd{background:#1a222c;border:1px solid #6a7a8c;border-radius:3px;padding:1px 5px;color:#fff}
.ov .new{color:#ff7a3a;font-weight:700;letter-spacing:.1em}
.ov .stats{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;margin:8px 0}.ov .stats span{background:#141c26;border:1px solid #3a4a5c;border-radius:6px;padding:4px 8px;font-size:12px;color:#9cf}.ov .stats b{color:#ffcf5a}
.shop{text-align:left;margin:8px 0}.shop h3{margin:10px 0 4px;font-size:12px;letter-spacing:.14em;color:#ff9a3a}
.shop .row{display:flex;align-items:center;gap:8px;border:1px solid #3a4a5c;border-radius:6px;padding:6px 8px;margin:4px 0;background:#121a24}
.shop .row .nm{flex:1;font-size:13px;color:#fff}.shop .row .nm small{display:block;color:#8aa;font-size:11px}
.shop .pips{letter-spacing:2px;color:#ffcf5a;font-size:11px;white-space:nowrap}
.shop button{font:700 12px "Courier New",monospace;color:#0a0c10;background:#7fe4ff;border:0;border-radius:5px;padding:8px 10px;cursor:pointer;min-width:84px;min-height:36px}
.shop button:disabled{background:#2a3440;color:#789;cursor:default}
.shop .bal{font-size:20px;color:#ffcf5a;font-weight:700;text-align:center}
.ov .load{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;margin:6px 0}.ov .load button{font:700 12px "Courier New",monospace;color:#cde;background:#1a222c;border:1px solid #6a7a8c;border-radius:5px;padding:7px 10px;cursor:pointer;min-height:34px}.ov .load button.sel{background:#ff9a3a;color:#0a0c10;border-color:#ffd878}
@media (max-width:700px){.ov p{font-size:13px}}
