*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}
html,body{margin:0;height:100%;overflow:hidden;background:#000;font-family:"Courier New",monospace;color:#fff;touch-action:none}
#stage{position:fixed;inset:0}
#gl,#ui{position:absolute;inset:0;width:100%;height:100%;display:block}
#gl{image-rendering:pixelated;image-rendering:crisp-edges}
#ui{pointer-events:none}
.hidden{display:none!important}
#hud{position:fixed;inset:0;pointer-events:none;text-shadow:2px 2px 0 #000;font-weight:bold}
#scoreBox{position:absolute;left:14px;top:10px}
.lbl{font-size:11px;color:#ffd84a;letter-spacing:2px}
#score{font-size:30px}
#combo{font-size:16px;color:#7fffd4;min-height:20px}
#progWrap{position:absolute;left:50%;top:10px;transform:translateX(-50%);text-align:center;width:min(40vw,360px)}
#zone{font-size:14px;color:#ffd84a;letter-spacing:1px}
#prog{height:8px;border:2px solid #fff;margin-top:4px;background:#0006}
#progFill{height:100%;width:0;background:linear-gradient(90deg,#ffd84a,#ff6f8a)}
#timeLeft{font-size:12px;margin-top:2px}
#slots{position:absolute;left:14px;bottom:12px;display:flex;gap:6px}
.slot{font-size:12px;padding:4px 7px;border:2px solid #fff6;background:#0005;color:#ccc}
.slot.on{border-color:#ffd84a;color:#ffd84a;background:#3a2a0088}
#ammoBox{position:absolute;right:14px;bottom:12px;text-align:right}
#wname{font-size:13px;color:#ffd84a}
#ammo{font-size:30px}
#reloadBar{height:6px;width:140px;margin-left:auto;background:#0006;border:1px solid #fff8;visibility:hidden}
#reloadFill{height:100%;width:0;background:#7fffd4}
#hint{font-size:12px;color:#ff8a8a;min-height:15px}
.tbtn{position:absolute;right:12px;top:10px;pointer-events:auto;width:40px;height:40px;font:bold 16px monospace;background:#0007;color:#fff;border:2px solid #fff8;border-radius:6px}
#mbtns{display:none}
body.touch #mbtns{display:block}
body.touch #slots,body.touch .desk{display:none}
body:not(.touch) .touch{display:none}
.mb{position:absolute;pointer-events:auto;font:bold 13px monospace;color:#fff;background:#0008;border:2px solid #fff9;border-radius:10px;width:78px;height:46px}
.mb.on{border-color:#ffd84a;color:#ffd84a;background:#3a2a00aa}
.wb[data-w="0"]{left:10px;bottom:10px}.wb[data-w="1"]{left:94px;bottom:10px}.wb[data-w="2"]{left:178px;bottom:10px}
#mReload{right:10px;bottom:84px}#mZoom{right:94px;bottom:84px}
body.touch #ammoBox{bottom:12px;right:12px}
body.touch #ammoBox #reloadBar{width:100px}
#pops{position:absolute;inset:0;overflow:hidden}
.pop{position:absolute;transform:translate(-50%,-50%);text-align:center;font-size:20px;color:#fff;animation:pop 1.3s ease-out forwards;white-space:nowrap}
.pop small{display:block;font-size:12px;color:#ffd84a}
@keyframes pop{0%{transform:translate(-50%,-50%) scale(.5);opacity:1}15%{transform:translate(-50%,-70%) scale(1.2)}100%{transform:translate(-50%,-180%) scale(1);opacity:0}}
.screen{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;background:radial-gradient(#1b103088,#000c);padding:16px;overflow:auto}
.logo{font-size:min(16vw,110px);font-weight:900;letter-spacing:-4px;line-height:1;text-shadow:6px 6px 0 #000}
.l1{color:#ffd84a}.l2{color:#ff6f8a}
.sub{letter-spacing:4px;color:#7fffd4;font-size:min(3.4vw,16px);text-align:center}
.card{max-width:640px;background:#0008;border:2px solid #fff4;padding:10px 16px;font-size:14px;line-height:1.45}
.ctl{color:#ffd84a;margin-top:6px}
.big{pointer-events:auto;font:bold 20px monospace;padding:12px 28px;background:#ffd84a;color:#1b1030;border:0;border-radius:8px;box-shadow:4px 4px 0 #000;cursor:pointer}
.big.alt{background:#7fffd4}
.screen .row{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
#report{background:#f5ecd2;color:#2a1a10;max-width:760px;width:100%;padding:14px 18px;border:4px solid #8a5a2a;box-shadow:6px 6px 0 #000;font-size:14px}
#report h2{margin:0 0 4px;font-size:22px}
#report table{width:100%;border-collapse:collapse;margin:8px 0}
#report td,#report th{border-bottom:1px dashed #8a5a2a88;padding:3px 4px;text-align:left}
#report .grade{float:right;font-size:64px;font-weight:900;color:#c0392b;line-height:.9;border:4px solid #c0392b;padding:0 12px;transform:rotate(-8deg)}
#report .sw{display:inline-block;width:12px;height:12px;border:1px solid #000;margin-right:5px;vertical-align:middle}
#report .stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:2px 12px}
#report .note{font-style:italic;margin-top:6px}
#rotate{display:none;position:fixed;inset:0;background:#1b1030;z-index:99;align-items:center;justify-content:center;flex-direction:column;font-size:20px;text-align:center}
#rotate div{font-size:70px}
@media (orientation:portrait) and (pointer:coarse){#rotate{display:flex}}
@media (max-height:500px){.logo{font-size:64px}.card{font-size:12px}.big{font-size:16px;padding:9px 20px}#report{font-size:11px;padding:8px}#report .grade{font-size:44px}}