:root{color-scheme:dark;--cyan:#33dcff;--blue:#168dff;--orange:#ff6b2b;--red:#ff304f;--ink:#050a14;--panel:#0c1728}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;min-height:100%;background:radial-gradient(circle at 50% 10%,#13233f 0,#050914 48%,#02040a 100%);font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:#d9f6ff;overflow:hidden}
body:before{content:"";position:fixed;inset:0;pointer-events:none;background:linear-gradient(rgba(35,220,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(35,220,255,.025) 1px,transparent 1px);background-size:24px 24px}
.shell{width:min(100vw,1280px);height:100dvh;margin:auto;display:grid;grid-template-rows:auto minmax(0,1fr) auto;padding:10px 14px 12px;gap:8px}
header,footer{display:flex;align-items:center;justify-content:space-between;gap:16px;text-shadow:0 0 12px rgba(51,220,255,.45)}
header h1{font-size:clamp(15px,2vw,24px);letter-spacing:.12em;margin:2px 0 0}.eyebrow{font-size:10px;letter-spacing:.28em;color:var(--cyan)}
.status{display:flex;gap:22px;font-weight:800;color:#fff}.status span:first-child{color:var(--orange)}
.stage{position:relative;min-height:0;border:1px solid rgba(51,220,255,.5);box-shadow:0 0 0 2px #06111f,0 0 0 3px rgba(22,141,255,.35),0 0 28px rgba(22,141,255,.2);overflow:hidden;background:#050a14}
.stage:after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,transparent 0 3px,rgba(0,0,0,.07) 3px 4px);mix-blend-mode:multiply}
canvas{display:block;width:100%;height:100%;object-fit:contain;touch-action:none}
.hud{position:absolute;z-index:3;pointer-events:none}.left{left:14px;top:14px;width:min(260px,42vw)}
.meter{display:grid;grid-template-columns:42px 1fr 34px;align-items:center;gap:6px;margin-bottom:6px;font-size:12px;font-weight:900}.meter i{height:12px;border:1px solid #42dfff;background:#06101f;padding:2px}.meter b{display:block;height:100%;width:100%;background:linear-gradient(90deg,#0f87ff,#3ce9ff);box-shadow:0 0 10px #25d8ff}.meter.ammo b{background:linear-gradient(90deg,#ff9b25,#ff4c34);box-shadow:0 0 10px #ff6b2b}.dash{display:inline-block;margin-top:3px;border-left:3px solid var(--cyan);padding:5px 8px;background:rgba(5,10,20,.72);font-size:11px;color:#5affbe}
.mission{right:14px;top:14px;text-align:right;background:rgba(5,10,20,.78);border-right:3px solid var(--orange);padding:7px 10px}.mission small{display:block;color:#67ddff;letter-spacing:.18em}.mission strong{font-size:12px;color:#fff}
.overlay{position:absolute;z-index:5;inset:0;display:grid;place-items:center;background:rgba(1,4,10,.72);backdrop-filter:blur(4px);transition:.2s}.overlay.hidden{opacity:0;pointer-events:none}.panel{width:min(470px,86%);border:1px solid #2bd9ff;padding:28px;background:linear-gradient(145deg,rgba(13,30,54,.97),rgba(4,10,20,.97));box-shadow:0 0 0 3px #07111f,0 0 40px rgba(27,170,255,.35);clip-path:polygon(0 0,calc(100% - 20px) 0,100% 20px,100% 100%,20px 100%,0 calc(100% - 20px))}.panel h2{font-size:clamp(24px,5vw,46px);line-height:.95;margin:10px 0;color:#fff;text-shadow:3px 3px 0 #0c77b6}.panel p{font:14px/1.55 system-ui,sans-serif;color:#b9d6e6}.panel button{border:0;background:linear-gradient(90deg,#117dff,#2ee5ff);color:#03101c;font:900 14px ui-monospace,monospace;letter-spacing:.12em;padding:12px 18px;cursor:pointer;box-shadow:0 0 18px rgba(46,229,255,.45)}
footer{font-size:10px;letter-spacing:.12em;color:#70a4bc;justify-content:center;gap:32px}
.touch{display:none;position:absolute;z-index:4;inset:auto 12px 10px;justify-content:space-between;align-items:end;pointer-events:none}.touch button{pointer-events:auto;touch-action:none;border:1px solid rgba(51,220,255,.6);background:rgba(5,16,30,.7);color:#dffbff;font:800 12px ui-monospace;padding:0;border-radius:50%;width:50px;height:50px;box-shadow:inset 0 0 15px rgba(51,220,255,.16)}.dpad{width:154px;display:grid;grid-template-columns:repeat(3,50px);grid-template-rows:repeat(2,50px);gap:2px}.dpad button:nth-child(1){grid-column:2}.dpad button:nth-child(2){grid-column:1}.dpad button:nth-child(3){grid-column:2}.dpad button:nth-child(4){grid-column:3}.actions{display:flex;gap:8px;align-items:end}.actions .fire{width:68px;height:68px;border-color:#ff6b4a;color:#ffd9d0}
@media (pointer:coarse),(max-width:760px){.shell{padding:4px;grid-template-rows:auto minmax(0,1fr)}footer{display:none}header{padding:2px 4px}.touch{display:flex}.mission{top:auto;bottom:90px}.left{top:8px;left:8px}.status{font-size:11px;gap:8px}}
@media (max-height:520px){header{display:none}.shell{grid-template-rows:1fr}.touch button{width:44px;height:44px}.dpad{width:136px;grid-template-columns:repeat(3,44px);grid-template-rows:repeat(2,44px)}.actions .fire{width:58px;height:58px}}