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

body {
  background: #050810;
  color: #e0e8ff;
  font-family: 'Courier New', monospace;
  overflow: hidden;
  width: 100vw;
  height: 100vh;
}

#gameCanvas {
  display: block;
  position: fixed;
  top: 0; left: 0;
  width: 100vw;
  height: 100vh;
}

/* HUD overlay */
#hud-overlay {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  display: none;
}
#hud-overlay.active { display: block; }

#mission-info {
  position: absolute;
  top: 12px; left: 14px;
  display: flex; flex-direction: column; gap: 3px;
}
#mission-title  { font-size: 11px; color: #aac; letter-spacing: 2px; text-transform: uppercase; }
#mission-objective { font-size: 14px; font-weight: bold; color: #fff; }

#timer-bar-wrap {
  position: absolute;
  top: 12px; left: 50%; transform: translateX(-50%);
  width: 200px; height: 8px;
  background: #1a1f2e; border: 1px solid #334;
  border-radius: 4px; overflow: hidden;
}
#timer-bar {
  height: 100%; width: 100%;
  background: linear-gradient(90deg, #00c8ff, #0066ff);
  transition: width 0.5s linear;
}
#timer-bar.urgent { background: linear-gradient(90deg, #ff4444, #ff8800); animation: pulse 0.5s infinite alternate; }

@keyframes pulse { from { opacity: 1; } to { opacity: 0.5; } }

#weapon-info {
  position: absolute;
  top: 10px; right: 14px;
  display: flex; align-items: center; gap: 8px;
}
#ammo-display { font-size: 22px; font-weight: bold; color: #fff; letter-spacing: 1px; }

#player-info {
  position: absolute;
  bottom: 14px; left: 14px;
  display: flex; flex-direction: column; gap: 6px;
}
#shield-icons { display: flex; gap: 5px; }
#xp-bar-wrap {
  width: 160px; height: 6px;
  background: #1a1f2e; border: 1px solid #334; border-radius: 3px; overflow: hidden;
}
#xp-bar { height: 100%; background: linear-gradient(90deg, #ffd700, #ff8c00); width: 0%; transition: width 0.4s; }
#rank-display { font-size: 10px; color: #ffd700; letter-spacing: 2px; }

#minimap {
  position: absolute;
  bottom: 14px; right: 14px;
  border: 1px solid #334;
  background: rgba(10,13,24,0.8);
  border-radius: 4px;
}

#kill-feed {
  position: absolute;
  top: 60px; right: 14px;
  display: flex; flex-direction: column; gap: 4px;
  pointer-events: none;
}
.kill-entry {
  background: rgba(0,0,0,0.6);
  color: #fff;
  font-size: 12px;
  padding: 3px 8px;
  border-left: 2px solid #ff4444;
  animation: slidein 0.3s ease, fadeout 0.5s 2.5s forwards;
  border-radius: 0 3px 3px 0;
}
@keyframes slidein { from { transform: translateX(120px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes fadeout { from { opacity: 1; } to { opacity: 0; } }

#medal-popup {
  position: absolute;
  top: 35%; left: 50%; transform: translate(-50%, -50%);
  pointer-events: none;
}
.medal-card {
  background: linear-gradient(135deg, #1a1f2e, #0d1020);
  border: 2px solid #ffd700;
  padding: 16px 28px;
  text-align: center;
  border-radius: 8px;
  animation: medal-in 0.5s cubic-bezier(.17,.67,.4,1.4), medal-out 0.5s 2.5s forwards;
}
.medal-card h3 { color: #ffd700; font-size: 18px; letter-spacing: 2px; }
.medal-card p  { color: #aac; font-size: 12px; margin-top: 4px; }
@keyframes medal-in  { from { transform: scale(0.5) rotate(-10deg); opacity: 0; } to { transform: scale(1) rotate(0deg); opacity: 1; } }
@keyframes medal-out { from { opacity: 1; } to { opacity: 0; transform: translateY(-20px); } }

/* Screens */
.screen {
  position: fixed;
  top: 0; left: 0;
  width: 100vw; height: 100vh;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(5,8,16,0.95);
  z-index: 100;
}
.screen.active { display: flex; }

.screen-content {
  text-align: center;
  max-width: 700px;
  width: 90%;
  padding: 32px;
}

.game-title {
  font-size: clamp(36px, 8vw, 72px);
  letter-spacing: 6px;
  color: #fff;
  text-shadow: 0 0 30px #0066ff, 0 0 60px #003399;
  margin-bottom: 8px;
}
.subtitle { color: #667; font-size: 13px; letter-spacing: 3px; margin-bottom: 40px; }

h2 { font-size: 22px; letter-spacing: 4px; color: #aac; margin-bottom: 24px; }

.btn-primary, .btn-secondary {
  display: inline-block;
  margin: 8px;
  padding: 14px 40px;
  font-family: 'Courier New', monospace;
  font-size: 15px;
  letter-spacing: 3px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s;
}
.btn-primary {
  background: linear-gradient(135deg, #0066ff, #003399);
  color: #fff;
}
.btn-primary:hover { background: linear-gradient(135deg, #0080ff, #0050cc); transform: scale(1.04); }
.btn-secondary {
  background: transparent;
  color: #aac;
  border: 1px solid #334;
}
.btn-secondary:hover { border-color: #0066ff; color: #fff; }

/* Mission grid */
#mission-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
  margin-bottom: 24px;
}
.mission-card {
  background: #0d1020;
  border: 1px solid #223;
  border-radius: 6px;
  padding: 16px;
  cursor: pointer;
  text-align: left;
  transition: all 0.2s;
  position: relative;
}
.mission-card:hover:not(.locked) { border-color: #0066ff; transform: translateY(-2px); }
.mission-card.locked { opacity: 0.45; cursor: default; }
.mission-card .mission-num  { font-size: 10px; color: #556; letter-spacing: 2px; }
.mission-card .mission-name { font-size: 14px; font-weight: bold; color: #fff; margin: 4px 0; }
.mission-card .mission-meta { font-size: 11px; color: #667; }
.mission-card .badge-xp     { font-size: 11px; color: #ffd700; margin-top: 6px; }
.lock-icon {
  position: absolute; top: 12px; right: 12px;
  font-size: 18px;
}

/* Rewards screen */
#badge-grid {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 12px;
  margin-bottom: 20px;
}
.badge-item {
  width: 90px; text-align: center;
  background: #0d1020; border: 1px solid #223; border-radius: 6px;
  padding: 10px 6px;
}
.badge-item.unlocked { border-color: #ffd700; }
.badge-icon { font-size: 28px; }
.badge-name { font-size: 10px; color: #aac; margin-top: 4px; letter-spacing: 1px; }

#stats-grid {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px;
  margin-bottom: 20px;
}
.stat-item { background: #0d1020; border: 1px solid #223; border-radius: 4px; padding: 10px; }
.stat-value { font-size: 22px; font-weight: bold; color: #0088ff; }
.stat-label { font-size: 10px; color: #556; letter-spacing: 1px; }

/* Leaderboard */
#leaderboard-table { width: 100%; border-collapse: collapse; margin-bottom: 20px; }
#leaderboard-table th { color: #556; font-size: 11px; letter-spacing: 2px; padding: 8px; border-bottom: 1px solid #223; }
#leaderboard-table td { padding: 10px 8px; font-size: 14px; border-bottom: 1px solid #111; }
#leaderboard-table tr:first-child td { color: #ffd700; }

/* Game over */
#go-stats { margin: 20px 0; color: #aac; line-height: 2; font-size: 14px; }

/* Cinematic mission start bars */
.cinematic-bar {
  position: fixed;
  left: 0; width: 100%;
  height: 0;
  background: #000;
  transition: height 0.5s ease;
  z-index: 200;
}
#bar-top    { top: 0; }
#bar-bottom { bottom: 0; }
.cinematic-active { height: 80px !important; }

#wave-announce {
  position: fixed;
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  text-align: center;
  z-index: 210;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s;
}
#wave-announce.show { opacity: 1; }
#wave-announce h1   { font-size: clamp(28px, 6vw, 56px); letter-spacing: 8px; color: #fff; text-shadow: 0 0 40px #0066ff; }
#wave-announce p    { font-size: 14px; letter-spacing: 3px; color: #aac; margin-top: 8px; }