:root{--bg:#07060d;--red:#ff2a3d;--blue:#3aa8ff;--gold:#ffd23f;--panel:#120f1f;--line:#3a2b55}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:#e8e4ff;font-family:'Press Start 2P',monospace;min-height:100vh;overflow-x:hidden;display:flex;flex-direction:column;align-items:center}
#stars{position:fixed;inset:0;z-index:-1;background:
radial-gradient(1px 1px at 10% 20%,#fff,transparent),radial-gradient(1px 1px at 70% 30%,#fff,transparent),
radial-gradient(1px 1px at 40% 80%,#aaf,transparent),radial-gradient(2px 2px at 85% 75%,#fff,transparent),
radial-gradient(1px 1px at 25% 55%,#fcc,transparent),radial-gradient(1px 1px at 55% 10%,#fff,transparent),
radial-gradient(ellipse at 50% 120%,#2a0a1a,transparent 60%),var(--bg);background-size:300px 300px,250px 250px,200px 200px,400px 400px,180px 180px,320px 320px,100% 100%,100% 100%}
#wrap{display:flex;gap:12px;padding:10px;flex-wrap:wrap;justify-content:center;align-items:flex-start}
#stage{position:relative;box-shadow:0 0 30px #ff2a3d55,0 0 0 3px #000,0 0 0 5px var(--line)}
canvas{display:block;image-rendering:pixelated}
#crt{position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(0,0,0,.22) 0 1px,transparent 1px 3px)}
#crt.off{display:none}
#hud{width:210px;display:flex;flex-direction:column;gap:8px;font-size:9px}
.hud-title{font-size:20px;color:var(--blue);text-shadow:0 0 8px var(--blue)}
.hud-title span{display:block;font-size:10px;color:var(--red);text-shadow:0 0 8px var(--red);margin-top:4px;letter-spacing:3px}
.hud-box{background:var(--panel);border:2px solid var(--line);padding:8px;line-height:1.8}
.row{display:flex;justify-content:space-between}
.ammo b{color:var(--gold);font-size:12px}
#meter{height:10px;background:#000;border:1px solid var(--red);margin-top:6px}
#meterFill{height:100%;width:0;background:linear-gradient(90deg,#600,var(--red));box-shadow:0 0 8px var(--red);transition:width .2s}
.hud-small{font-size:7px;color:#888;line-height:1.6}
.hud-small a{color:var(--blue)}
#bar{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;padding:6px}
button{font-family:inherit;font-size:9px;background:var(--panel);color:#e8e4ff;border:2px solid var(--line);padding:8px 10px;cursor:pointer}
button:hover{border-color:var(--red);color:var(--red)}
#controls{display:none;width:100%;justify-content:space-between;padding:6px 14px;user-select:none;-webkit-user-select:none}
#dpad{display:grid;grid-template-columns:repeat(3,48px);grid-template-rows:repeat(3,48px)}
#dpad button{font-size:16px;padding:0}
.du{grid-column:2;grid-row:1}.dl{grid-column:1;grid-row:2}.dr{grid-column:3;grid-row:2}.dd{grid-column:2;grid-row:3}
#powers{display:grid;grid-template-columns:repeat(3,52px);gap:6px;align-content:center}
#powers button{font-size:20px;padding:8px 0}
@media (max-width:760px),(pointer:coarse){#controls{display:flex}#hud{width:100%;flex-direction:row;flex-wrap:wrap}#hud .hud-box{flex:1;min-width:140px}.hud-title{display:none}}
#overlay{position:fixed;inset:0;background:rgba(5,3,10,.88);z-index:10;display:flex;align-items:center;justify-content:center;padding:14px}
#overlay.hidden{display:none}
.panel{background:var(--panel);border:3px solid var(--red);box-shadow:0 0 40px #ff2a3d66;padding:20px;max-width:640px;width:100%;max-height:90vh;overflow:auto;text-align:center;line-height:1.9;font-size:10px}
.panel h1{font-size:22px;color:var(--blue);text-shadow:0 0 12px var(--blue),0 0 30px var(--red);margin-bottom:10px;animation:flick 3s infinite}
.panel h2{font-size:13px;color:var(--gold);margin-bottom:10px}
.panel p{color:#bbb;margin:8px 0}
.panel .btns{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:12px}
.panel .btns button{font-size:11px;padding:12px 14px}
@keyframes flick{0%,100%{opacity:1}92%{opacity:1}93%{opacity:.4}94%{opacity:1}97%{opacity:.6}}
.floor-h{color:var(--gold);text-align:left;margin:12px 0 4px;font-size:9px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(44px,1fr));gap:4px}
.cell{font-size:8px;padding:6px 0;line-height:1.5}
.cell.done{border-color:#2f9;color:#2f9}
.cell.lock{opacity:.3;pointer-events:none}
.cell.cur{border-color:var(--gold)}
input{font-family:inherit;font-size:10px;background:#000;color:#fff;border:2px solid var(--line);padding:8px;width:90px}
table{width:100%;font-size:9px;border-collapse:collapse}td{padding:4px;border-bottom:1px solid var(--line)}
.keys{text-align:left;font-size:9px}
footer{font-size:8px;color:#777;padding:10px 10px 20px;text-align:center;line-height:1.8}
footer a{color:var(--red)}