* { margin:0; padding:0; box-sizing:border-box; }
html,body { width:100%; height:100%; overflow:hidden; background:#1a1410; font-family:Verdana,Geneva,sans-serif; }
#stage { position:fixed; inset:0; }
#game-canvas { width:100%; height:100%; display:block; touch-action:none; }
#hud { position:fixed; inset:0; pointer-events:none; color:#f2e4c8; text-shadow:0 1px 2px #000; }
#hud-top { position:absolute; top:8px; left:10px; right:10px; display:flex; justify-content:space-between;
  font-weight:bold; font-size:15px; letter-spacing:1px; }
#hud-score { color:#ffd76a; } #hud-enemies { color:#ff8a5c; }
#hud-bars { position:absolute; bottom:12px; left:12px; width:min(240px,45vw); }
.bar-label { font-size:11px; letter-spacing:2px; margin-bottom:2px; opacity:.8; }
.bar { height:12px; background:rgba(0,0,0,.45); border:1px solid rgba(242,228,200,.5); margin-bottom:8px; }
#hull-fill { height:100%; width:100%; background:linear-gradient(90deg,#7fbf6a,#d8e05a); }
#reload-fill { height:100%; width:100%; background:#ffd76a; }
#reticle { position:absolute; left:50%; top:50%; width:34px; height:34px; margin:-17px 0 0 -17px;
  border:2px solid rgba(255,215,106,.9); border-radius:50%; display:none; }
#reticle::after { content:""; position:absolute; left:50%; top:50%; width:4px; height:4px; margin:-2px;
  background:#ffd76a; border-radius:50%; }
.tgroup { display:none; }
#touch-left { position:absolute; left:10px; bottom:10px; pointer-events:auto; }
#touch-right { position:absolute; right:10px; bottom:10px; pointer-events:auto; }
#touch-aim { position:absolute; top:0; right:0; width:55%; height:70%; pointer-events:auto; }
.tbtn { pointer-events:auto; -webkit-user-select:none; user-select:none;
  width:56px; height:52px; margin:2px; border-radius:10px; font-size:15px; font-weight:bold;
  color:#f2e4c8; background:rgba(30,22,16,.55); border:1px solid rgba(242,228,200,.45); touch-action:none; }
.tbtn.wide { width:118px; }
.tbtn.fire { width:96px; height:96px; border-radius:50%; background:rgba(120,40,20,.55);
  border:2px solid #ffd76a; font-size:18px; }
.tbtn.pressed { background:rgba(255,215,106,.4); }
body.touch-ui #hud .tgroup { display:block; }
body.touch-ui #hud-bars { bottom:auto; top:44px; }
#overlay { position:fixed; inset:0; display:flex; align-items:center; justify-content:center;
  background:radial-gradient(ellipse at center, rgba(30,20,12,.55), rgba(10,7,4,.9)); }
#overlay.hidden { display:none; }
#overlay-card { max-width:min(520px,88vw); padding:28px 30px; text-align:center; color:#f2e4c8;
  background:rgba(24,17,11,.85); border:1px solid rgba(255,215,106,.4); border-radius:14px; }
#ov-title { font-size:clamp(22px,6vw,34px); letter-spacing:3px; color:#ffd76a; margin-bottom:12px; }
#ov-body { font-size:14px; line-height:1.5; margin-bottom:10px; }
#ov-keys { font-size:12px; opacity:.85; margin-bottom:16px; line-height:1.6; }
#ov-btn { pointer-events:auto; cursor:pointer; font-size:18px; font-weight:bold; letter-spacing:2px;
  padding:12px 36px; color:#221608; background:linear-gradient(180deg,#ffd76a,#e8973f);
  border:none; border-radius:8px; }
#banner { position:absolute; left:50%; top:26%; transform:translateX(-50%);
  font-size:clamp(22px,5vw,40px); font-weight:bold; letter-spacing:4px;
  color:#ffd76a; text-shadow:0 0 18px #ff6a00, 0 2px 4px #000; opacity:0;
  transition:opacity .25s; pointer-events:none; }