* { margin:0; padding:0; box-sizing:border-box; }
html,body { width:100%; height:100%; overflow:hidden; background:#0a0f1e;
  font-family: ui-monospace, "Cascadia Mono", "Segoe UI Mono", Menlo, Consolas, monospace;
  color:#eaf4ff; }
#app { position:fixed; inset:0; }
canvas.scene { position:absolute; inset:0; width:100%; height:100%; display:block; }
#hud { position:absolute; inset:0; pointer-events:none; }
.hud-top { position:absolute; top:10px; left:14px; right:14px; display:flex;
  gap:18px; align-items:center; font-size:14px; letter-spacing:.08em;
  text-shadow:0 0 8px rgba(255,180,90,.55); }
.hud-top b { color:#ffc46b; }
#shield-wrap { flex:1; max-width:220px; height:10px; border:1px solid #ffc46b88; border-radius:5px; overflow:hidden; }
#shield { height:100%; width:100%; background:linear-gradient(90deg,#7fe8c9,#ffd166); }
#msg { position:absolute; top:18%; left:0; right:0; text-align:center; font-size:clamp(20px,4vw,34px);
  color:#ffe9c4; letter-spacing:.25em; text-shadow:0 0 18px #ff8a3d; opacity:0; transition:opacity .4s; }
.overlay { position:absolute; inset:0; display:flex; flex-direction:column; gap:14px;
  align-items:center; justify-content:center; text-align:center;
  background:radial-gradient(ellipse at 50% 40%, #1d2a4f 0%, #070b18 75%); z-index:10; }
.overlay h2 { font-size:clamp(26px,6vw,46px); letter-spacing:.22em; color:#ffc46b;
  text-shadow:0 0 24px #ff7a2d; }
.overlay p { max-width:520px; line-height:1.7; font-size:14px; color:#cfe3ff; padding:0 18px; }
.overlay .kbd { display:inline-block; border:1px solid #ffc46b66; border-radius:5px;
  padding:1px 7px; color:#ffd9a0; background:#ffffff10; }
.btn { pointer-events:auto; cursor:pointer; display:inline-block; text-decoration:none;
  font:inherit; font-size:16px; letter-spacing:.2em; color:#0a0f1e; background:linear-gradient(180deg,#ffd9a0,#ff9b3d);
  border:none; border-radius:10px; padding:14px 34px; box-shadow:0 0 24px #ff9b3d66; }
.btn:hover { filter:brightness(1.15); }
#touch { position:absolute; inset:0; pointer-events:none; display:none; }
@media (pointer:coarse) { #touch { display:block; } }
.tbtn { position:absolute; pointer-events:auto; width:74px; height:74px; border-radius:50%;
  border:2px solid #ffc46b99; background:#0d1730aa; color:#ffd9a0; font-size:11px; letter-spacing:.1em;
  display:flex; align-items:center; justify-content:center; touch-action:none; user-select:none; }
.tbtn:active { background:#ff9b3d55; }
#t-left   { left:16px;  bottom:110px; }
#t-right  { left:104px; bottom:110px; }
#t-up     { right:104px; bottom:110px; }
#t-fire   { right:16px; bottom:110px; width:88px; height:88px; border-color:#ff6b6b; color:#ffb3b3; }
#t-boost  { right:16px; bottom:20px; }
#t-down   { left:16px; bottom:20px; }

#flash { position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity .25s;
  box-shadow: inset 0 0 140px 40px #ff3d3d; z-index:5; }
#hitmark { position:absolute; top:57%; left:50%; transform:translate(-50%,-50%);
  color:#7fe8c9; font-size:26px; letter-spacing:.3em; opacity:0; transition:opacity .3s;
  text-shadow:0 0 12px #7fe8c9; pointer-events:none; z-index:5; }