* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 100%; height: 100%; overflow: hidden; background: #0b0e14; font-family: system-ui, 'Segoe UI', sans-serif; }
#game { display: block; touch-action: none; }

/* Top HUD */
#hud {
  position: fixed; top: 0; left: 0; right: 0; height: 44px;
  display: flex; align-items: center; gap: 18px; padding: 0 16px;
  background: rgba(12,16,24,0.85); border-bottom: 1px solid #232a38;
  color: #e6e6f0; font-size: 16px; font-weight: 600; z-index: 10;
}
#hud .back { color: #8a8aa0; text-decoration: none; font-weight: 500; }
#hud .back:hover { color: #ffd25a; }
#money { color: #f0c050; } #baseHp { color: #2ec27e; }
#phaseLabel { margin-left: auto; color: #8a8aa0; font-weight: 500; font-size: 14px; }

/* Build toolbar */
#buildbar {
  position: fixed; bottom: 0; left: 0; right: 0;
  display: flex; align-items: flex-end; justify-content: center; gap: 18px; flex-wrap: wrap;
  padding: 10px 12px; background: rgba(12,16,24,0.9); border-top: 1px solid #232a38; z-index: 10;
}
.bar-section { display: flex; flex-direction: column; gap: 4px; }
.bar-label { font-size: 11px; color: #8a8aa0; text-transform: uppercase; letter-spacing: .06em; text-align: center; }
#toolbar, #upgradePanel { display: flex; gap: 8px; }
.upg .t-lv { font-size: 11px; color: #8a8aa0; }
.upg { min-width: 84px; }
.tool {
  background: #1e2430; border: 2px solid #2c3344; border-radius: 10px;
  padding: 8px 14px; cursor: pointer; color: #e6e6f0; min-width: 92px;
  display: flex; flex-direction: column; align-items: center; gap: 2px; transition: .12s;
}
.tool:hover { border-color: #ffd25a; }
.tool.selected { border-color: #ffd25a; background: #2a2410; }
.tool.cant { opacity: .45; }
.t-name { font-size: 14px; font-weight: 600; }
.t-cost { font-size: 12px; color: #f0c050; }
#startBtn {
  background: #1d6b3f; border: 2px solid #2ec27e; border-radius: 10px;
  padding: 10px 20px; cursor: pointer; color: #eafff2; font-size: 15px; font-weight: 600;
}
#startBtn:hover { background: #258a52; }

/* Bomb button (touch) */
#bombBtn {
  position: fixed; right: 24px; bottom: 28px; z-index: 12;
  width: 70px; height: 70px; border-radius: 50%;
  background: rgba(255,150,40,0.20); border: 3px solid #ffa83a; color: #fff;
  font-size: 30px; display: none; align-items: center; justify-content: center;
  cursor: pointer; touch-action: manipulation; user-select: none;
}
#bombBtn:disabled { opacity: .45; border-color: #555; color: #aaa; }
#bombBtn:active:not(:disabled) { background: rgba(255,150,40,0.45); }

/* Per-turret upgrade panel */
.hidden { display: none !important; }
#turretPanel {
  position: fixed; z-index: 15; background: rgba(16,20,28,0.96); border: 1px solid #2c3344;
  border-radius: 10px; padding: 8px; display: flex; flex-direction: column; gap: 6px; min-width: 150px;
}
#tp-info { font-size: 12px; color: #cdd6e3; text-align: center; }
.tp-row { display: flex; gap: 6px; }
#turretPanel button {
  flex: 1; background: #1e2430; border: 1px solid #2c3344; border-radius: 7px;
  padding: 6px 8px; color: #e6e6f0; font-size: 12px; cursor: pointer;
}
#turretPanel button:hover:not(:disabled) { border-color: #ffd25a; color: #ffd25a; }
#turretPanel button:disabled { opacity: .4; cursor: not-allowed; }

/* Lost / Won overlays */
.overlay {
  position: fixed; inset: 0; display: none; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.7); z-index: 20;
}
.go-card {
  background: #16161f; border: 1px solid #2c3344; border-radius: 14px; padding: 32px;
  text-align: center; color: #e6e6f0; display: flex; flex-direction: column; gap: 12px; align-items: center;
}
.go-icon { font-size: 48px; }
.go-card button {
  background: #1e2430; border: 2px solid #2c3344; border-radius: 10px; padding: 10px 22px;
  cursor: pointer; color: #e6e6f0; font-size: 15px;
}
.go-card button:hover { border-color: #ffd25a; color: #ffd25a; }
.go-card .back { color: #8a8aa0; text-decoration: none; font-size: 13px; }