:root {
  --bg:#1c1f26; --panel:#262b34; --accent:#e8b84b; --good:#5bd65b; --bad:#e0665a;
  --text:#e8e8e8; --muted:#9aa0aa;
}
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body { margin:0; height:100%; background:var(--bg); color:var(--text);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; overscroll-behavior:none; }
#app { display:flex; flex-direction:column; height:100dvh; max-width:1100px; margin:0 auto; }

/* HUD */
#hud-top { display:flex; align-items:center; justify-content:space-between;
  padding:8px 12px; background:var(--panel); min-height:44px; }
.hud-item { font-size:14px; margin-right:12px; }
.hud-title { font-weight:700; }
#hud-bottom { background:var(--panel); padding:8px; }

/* stage */
#stage { position:relative; flex:1; min-height:0; overflow:hidden;
  display:flex; align-items:center; justify-content:center; }
#game { width:100%; height:100%; display:block; touch-action:none; }

/* wave banner */
#wave-banner { position:absolute; top:6px; left:50%; transform:translateX(-50%);
  background:rgba(0,0,0,.7); padding:6px 14px; border-radius:999px; font-weight:700; }

/* tower bar */
#tower-bar { display:flex; gap:6px; overflow-x:auto; padding:2px 0; }
.tower-slot { flex:0 0 auto; min-width:74px; padding:6px 8px; border-radius:8px;
  background:#333a45; border:2px solid transparent; text-align:center; cursor:pointer; }
.tower-slot.sel { border-color:var(--accent); }
.tower-slot .t-name { font-size:11px; font-weight:700; display:block; }
.tower-slot .t-cost { font-size:11px; color:var(--accent); }
.tower-slot .t-tier { font-size:10px; color:var(--muted); }
.tower-slot:active { transform:scale(.96); }

/* action bar */
#action-bar { display:flex; gap:8px; margin-top:8px; }
#action-bar button { flex:1; padding:10px; border:none; border-radius:8px;
  font-size:13px; font-weight:700; background:#333a45; color:var(--text); cursor:pointer; }
#action-bar button.primary { background:var(--accent); color:#111; }
#action-bar button.disabled { opacity:.4; pointer-events:none; }
#btn-speed { background:#2c5f8a !important; }

/* overlay */
#overlay { position:fixed; inset:0; background:rgba(0,0,0,.78);
  display:flex; align-items:center; justify-content:center; z-index:50; }
#overlay.hidden { display:none; }
#overlay-box { background:var(--panel); border-radius:16px; padding:28px; max-width:90%;
  width:360px; text-align:center; }
#overlay-box h1 { margin:0 0 8px; color:var(--accent); }
#overlay-actions { display:flex; flex-direction:column; gap:8px; margin-top:18px; }
#overlay-actions button { padding:12px; border:none; border-radius:8px; font-size:14px;
  font-weight:700; background:var(--accent); color:#111; cursor:pointer; }

/* coins + boosts */
.hud-item.coins { color:var(--accent); }
#boosts-modal { position:fixed; inset:0; background:rgba(0,0,0,.7); display:flex;
  align-items:center; justify-content:center; z-index:60; }
#boosts-modal.hidden { display:none; }
#boosts-box { background:var(--panel); border-radius:16px; padding:22px; width:320px;
  max-width:92%; max-height:80vh; overflow:auto; }
#boosts-box h2 { margin:0 0 12px; color:var(--accent); }
.boost-row { display:flex; justify-content:space-between; align-items:center;
  padding:8px 4px; border-bottom:1px solid #333a45; font-size:13px; }
.boost-row button { background:var(--accent); color:#111; border:none; border-radius:6px;
  padding:6px 12px; font-weight:700; cursor:pointer; }
#btn-respec { width:100%; margin-top:12px; padding:10px; border:none; border-radius:8px;
  background:#5a4a2a; color:#fff; font-weight:700; cursor:pointer; }
#btn-boosts-close { width:100%; margin-top:8px; padding:10px; border:none; border-radius:8px;
  background:#333a45; color:#fff; font-weight:700; cursor:pointer; }

/* leaderboard modal (F4: rows are built with textContent, never innerHTML) */
#leaderboard-modal { position:fixed; inset:0; background:rgba(0,0,0,.7); display:flex;
  align-items:center; justify-content:center; z-index:20; }
#leaderboard-modal.hidden { display:none; }
#leaderboard-box { background:var(--panel); border-radius:16px; padding:22px; width:320px;
  max-height:80vh; overflow:auto; }
#leaderboard-box h2 { margin:0 0 12px; color:var(--accent); }
.lb-row { display:flex; justify-content:space-between; align-items:center;
  padding:6px 0; border-bottom:1px solid #ffffff14; font-size:14px; gap:10px; }
.lb-row span:last-child { color:#9aa4b2; white-space:nowrap; }
#btn-leaderboard-close { width:100%; margin-top:12px; padding:10px; border:none; border-radius:8px;
  background:#2a2f3a; color:#fff; }