*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

body { background:#000; overflow:hidden; font-family:'Courier New',monospace; user-select:none; }

#app { position:relative; width:100vw; height:100vh; }
#canvas { display:block; width:100%; height:100%; }

/* ── HUD ── */
#hud { position:absolute; inset:0; pointer-events:none; color:#c8ff50; }

#hud-top {
  display:flex; justify-content:space-between; align-items:flex-start;
  padding:16px 24px; gap:10px;
}

.hud-box {
  display:flex; flex-direction:column; align-items:center;
  background:rgba(0,0,0,0.55); border:1px solid rgba(200,255,80,0.35);
  padding:8px 20px; border-radius:4px; min-width:110px;
}

.lbl { font-size:9px; letter-spacing:3px; opacity:.6; margin-bottom:4px; }

#h-score, #h-wave { font-size:28px; font-weight:bold; text-shadow:0 0 10px #c8ff50; }

/* 플레이어 HP 하트 */
#h-player-hp { display:flex; gap:5px; }
.hp-seg {
  width:14px; height:14px; border-radius:50%;
  background:#c8ff50; box-shadow:0 0 6px #c8ff50;
  transition:background .2s;
}
.hp-seg.lost { background:transparent; border:1px solid rgba(200,255,80,0.3); box-shadow:none; }

/* 기지 HP 바 */
#hud-bottom {
  position:absolute; bottom:0; left:0; right:0;
  display:flex; justify-content:center; padding:16px;
}

#base-hp-wrap {
  display:flex; flex-direction:column; align-items:center; gap:6px;
  background:rgba(0,0,0,0.6); border:1px solid rgba(200,255,80,0.35);
  padding:10px 24px; border-radius:4px; min-width:220px;
}

#base-hp-bar-bg {
  width:180px; height:12px;
  background:rgba(255,255,255,0.1); border-radius:6px; overflow:hidden;
}

#base-hp-bar {
  height:100%; width:100%; background:#c8ff50;
  border-radius:6px; transition:width .3s, background .3s;
  box-shadow:0 0 8px #c8ff50;
}

/* ── Overlay ── */
#overlay {
  position:absolute; inset:0; background:rgba(0,0,0,0.88);
  display:flex; align-items:center; justify-content:center; z-index:100;
}
#overlay.hidden { display:none; }

#overlay-box { text-align:center; color:#c8ff50; padding:40px; }

#ov-title {
  font-size:52px; letter-spacing:10px;
  text-shadow:0 0 25px #c8ff50, 0 0 50px #88cc00; margin-bottom:4px;
}
#ov-sub { font-size:20px; letter-spacing:14px; opacity:.5; margin-bottom:20px; }
#ov-msg { font-size:18px; margin-bottom:28px; opacity:.85; min-height:24px; }

#ctrl-box {
  border:1px solid rgba(200,255,80,0.3); padding:18px 36px;
  border-radius:4px; margin-bottom:28px; background:rgba(200,255,80,0.04);
}
.ctrl-row { font-size:13px; line-height:2.4; display:flex; align-items:center; gap:14px; }

kbd {
  background:rgba(200,255,80,0.15); border:1px solid rgba(200,255,80,0.4);
  padding:2px 10px; border-radius:3px; font-family:inherit;
  font-size:12px; min-width:70px; text-align:center;
}

#start-btn {
  background:transparent; color:#c8ff50; border:2px solid #c8ff50;
  padding:12px 52px; font-size:20px; font-family:inherit;
  letter-spacing:6px; cursor:pointer; pointer-events:all;
  transition:background .2s, box-shadow .2s; border-radius:3px;
}
#start-btn:hover { background:rgba(200,255,80,0.15); box-shadow:0 0 22px rgba(200,255,80,.45); }

/* 피격 플래시 */
@keyframes flash-red { 0%,100%{background:transparent} 50%{background:rgba(255,60,0,.3)} }
#app.hit { animation:flash-red 0.25s ease; }