/* ── Reset ── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; user-select:none; }
.hidden { display:none !important; }
body { background:#000; overflow:hidden; font-family:'Rajdhani',sans-serif; cursor:none; }
#game-container { position:relative; width:100vw; height:100vh; }
#gameCanvas { display:block; width:100%; height:100%; }
#main-menu, #perks-screen, #howto-screen, #privacy-screen, #shop-overlay, #game-over, #pause-menu { cursor:default; }

/* ── HUD ── */
#hud {
  position:absolute; top:0; left:0; right:0;
  display:flex; justify-content:space-between; align-items:flex-start;
  padding:12px 16px; pointer-events:none; z-index:10;
  background:linear-gradient(to bottom, rgba(0,0,0,0.65) 0%, transparent 100%);
}
#hud-left, #hud-right { display:flex; flex-direction:column; gap:5px; min-width:210px; }
#hud-center { display:flex; flex-direction:column; align-items:center; gap:4px; }
.bar-row { display:flex; align-items:center; gap:6px; }
.bar-label { font-size:11px; color:#888; letter-spacing:1px; width:32px; text-align:right; font-family:'Orbitron',sans-serif; }
.bar-track { width:140px; height:9px; background:rgba(0,0,0,0.55); border-radius:5px; overflow:hidden; border:1px solid rgba(255,255,255,0.07); }
.bar-fill { height:100%; border-radius:5px; transition:width 0.15s; }
.bar-fill.green  { background:linear-gradient(90deg,#1a8a3a,#2ecc71); box-shadow:0 0 8px #2ecc7155; }
.bar-fill.purple { background:linear-gradient(90deg,#6c1fa0,#b44fff); box-shadow:0 0 8px #b44fff55; }
.bar-fill.blue   { background:linear-gradient(90deg,#1a5fa0,#3498db); box-shadow:0 0 8px #3498db55; }
.bar-val { font-size:11px; color:#bbb; font-family:'Orbitron',sans-serif; min-width:36px; }
#ammo-block {
  display:flex; align-items:baseline; gap:3px; margin-top:3px;
  background:rgba(0,0,0,0.4); padding:5px 10px; border-radius:8px;
  border:1px solid rgba(255,255,255,0.07);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.04);
}
#ammo-cur { font-size:28px; font-weight:700; color:#f1c40f; font-family:'Orbitron',sans-serif; text-shadow:0 0 12px rgba(241,196,15,0.6); }
#ammo-sep { font-size:16px; color:#555; }
#ammo-max { font-size:14px; color:#777; font-family:'Orbitron',sans-serif; }
#gun-name-hud { font-size:11px; color:#999; margin-left:8px; letter-spacing:1px; text-transform:uppercase; font-family:'Rajdhani',sans-serif; }
#low-ammo-warn { font-size:10px; color:#e74c3c; margin-left:6px; font-family:'Orbitron',sans-serif; animation:lowAmmoFlash 0.6s infinite alternate; display:none; }
@keyframes lowAmmoFlash { from{opacity:1} to{opacity:0.2} }
#wave-badge {
  font-family:'Orbitron',sans-serif; font-size:24px; font-weight:900;
  color:#fff; letter-spacing:3px;
  text-shadow:0 0 16px rgba(255,255,255,0.25), 0 2px 4px rgba(0,0,0,0.8);
}
#wave-num { color:#f1c40f; text-shadow:0 0 16px rgba(241,196,15,0.6); }
#phase-badge {
  font-size:11px; letter-spacing:2px; padding:4px 12px; border-radius:20px;
  font-family:'Orbitron',sans-serif; font-weight:700;
}
#phase-badge.day   { background:rgba(241,196,15,0.12); color:#f1c40f; border:1px solid rgba(241,196,15,0.35); text-shadow:0 0 8px rgba(241,196,15,0.4); }
#phase-badge.night { background:rgba(52,152,219,0.12); color:#74b9ff; border:1px solid rgba(52,152,219,0.35); text-shadow:0 0 8px rgba(116,185,255,0.4); }
#timer-badge { font-family:'Orbitron',sans-serif; font-size:20px; color:#e74c3c; font-weight:700; text-shadow:0 0 10px rgba(231,76,60,0.5); }
#timer-badge.urgent { animation:timerUrgent 0.5s infinite alternate; }
@keyframes timerUrgent { from{color:#e74c3c;text-shadow:0 0 10px rgba(231,76,60,0.5)} to{color:#ff6b6b;text-shadow:0 0 24px rgba(231,76,60,1.0)} }
#weather-badge {
  font-size:11px; color:#aad4f5; letter-spacing:1px; opacity:0.85;
  background:rgba(0,0,0,0.3); padding:3px 8px; border-radius:12px;
  border:1px solid rgba(170,212,245,0.15);
}
#money-hud { font-family:'Orbitron',sans-serif; font-size:20px; color:#f1c40f; text-align:right; text-shadow:0 0 10px rgba(241,196,15,0.5); }
#kills-hud { font-size:13px; color:#e74c3c; text-align:right; font-family:'Orbitron',sans-serif; text-shadow:0 0 6px rgba(231,76,60,0.4); }

/* ── Toolbar ── */
#toolbar {
  position:absolute; bottom:14px; left:50%; transform:translateX(-50%);
  display:flex; gap:7px; z-index:10;
  background:rgba(0,0,0,0.7); padding:7px 10px; border-radius:14px;
  border:1px solid rgba(255,255,255,0.09); backdrop-filter:blur(8px);
  box-shadow:0 4px 24px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.04);
}
.tool-slot {
  width:70px; height:74px; background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.1); border-radius:10px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  cursor:pointer; transition:all 0.15s; position:relative; gap:2px;
}
.tool-slot:hover { border-color:rgba(255,255,255,0.28); background:rgba(255,255,255,0.07); transform:translateY(-2px); }
.tool-slot.active {
  border-color:#f1c40f; background:rgba(241,196,15,0.1);
  box-shadow:0 0 16px rgba(241,196,15,0.35), inset 0 0 12px rgba(241,196,15,0.06);
}
.tool-slot.active::before { content:''; position:absolute; inset:-1px; border-radius:11px; background:linear-gradient(135deg,rgba(241,196,15,0.18),transparent); pointer-events:none; }
.gun-canvas { display:block; }
.slot-name { font-size:9px; color:#777; text-align:center; letter-spacing:0.5px; text-transform:uppercase; font-family:'Rajdhani',sans-serif; }
.slot-key { position:absolute; top:3px; right:5px; font-size:9px; color:#444; font-family:'Orbitron',sans-serif; }
.slot-reload-bar { position:absolute; bottom:0; left:0; height:3px; background:linear-gradient(90deg,#f39c12,#f1c40f); border-radius:0 0 10px 10px; transition:width 0.1s linear; box-shadow:0 0 6px rgba(241,196,15,0.5); }

/* ── Inventory Bar ── */
#inv-bar {
  position:absolute; bottom:100px; left:50%; transform:translateX(-50%);
  display:flex; gap:5px; z-index:10;
  background:rgba(0,0,0,0.55); padding:5px 8px; border-radius:10px;
  border:1px solid rgba(255,255,255,0.07); backdrop-filter:blur(4px);
}
.inv-slot {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  width:46px; height:50px; background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.1); border-radius:7px;
  position:relative; transition:all 0.15s;
}
.inv-slot.has-items { border-color:rgba(241,196,15,0.35); background:rgba(241,196,15,0.06); }
.inv-icon { font-size:18px; line-height:1; }
.inv-count {
  position:absolute; top:2px; right:4px;
  font-size:11px; font-family:'Orbitron',sans-serif; font-weight:700;
  color:#f1c40f; text-shadow:0 0 6px rgba(241,196,15,0.8);
}
.inv-count.zero { color:#444; text-shadow:none; }
.inv-label { font-size:7px; color:#666; text-transform:uppercase; letter-spacing:0.3px; margin-top:1px; }

/* ── Side Buttons ── */
#side-btns { position:absolute; top:110px; right:14px; display:flex; flex-direction:column; gap:6px; z-index:10; }
#side-btns button {
  background:rgba(0,0,0,0.7); border:1px solid rgba(255,255,255,0.12);
  color:#bbb; padding:8px 14px; border-radius:8px; cursor:pointer;
  font-size:12px; font-family:'Rajdhani',sans-serif; letter-spacing:1px;
  transition:all 0.18s; backdrop-filter:blur(6px);
  box-shadow:0 2px 8px rgba(0,0,0,0.4);
}
#side-btns button:hover {
  background:rgba(255,255,255,0.1); border-color:rgba(255,255,255,0.3);
  color:#fff; transform:translateX(-2px);
  box-shadow:0 4px 16px rgba(0,0,0,0.5);
}
#nv-btn.active {
  background:rgba(0,180,0,0.2); border-color:rgba(0,255,100,0.6);
  color:#00ff88; box-shadow:0 0 12px rgba(0,255,100,0.25);
  text-shadow:0 0 8px rgba(0,255,100,0.6);
}
#skip-btn { border-color:rgba(116,185,255,0.2); }
#skip-btn:hover { border-color:rgba(116,185,255,0.5); color:#74b9ff; }
#shop-btn { border-color:rgba(241,196,15,0.2); }
#shop-btn:hover { border-color:rgba(241,196,15,0.5); color:#f1c40f; }

/* ── Shop ── */
#shop-overlay {
  position:absolute; inset:0; background:rgba(0,0,0,0.85);
  display:flex; align-items:center; justify-content:center; z-index:50;
  backdrop-filter:blur(10px);
}
#shop-panel {
  background:linear-gradient(160deg,#0d1020,#131828);
  border:1px solid rgba(241,196,15,0.18); border-radius:16px;
  width:min(820px, 96vw); max-height:90vh; overflow:hidden;
  display:flex; flex-direction:column;
  box-shadow:0 0 60px rgba(241,196,15,0.08), 0 24px 80px rgba(0,0,0,0.9);
}
#shop-items { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:10px; padding:16px 20px; overflow-y:auto; flex:1; }
#shop-header { display:flex; justify-content:space-between; align-items:center; padding:20px 24px 14px; border-bottom:1px solid rgba(255,255,255,0.07); background:linear-gradient(90deg,rgba(241,196,15,0.04),transparent); }
#shop-header h2 { font-family:'Orbitron',sans-serif; font-size:22px; color:#f1c40f; text-shadow:0 0 20px rgba(241,196,15,0.5); letter-spacing:2px; }
#shop-sub { font-size:12px; color:#666; margin-top:3px; }
#shop-money { font-family:'Orbitron',sans-serif; font-size:24px; color:#f1c40f; text-shadow:0 0 12px rgba(241,196,15,0.6); }
#shop-tabs { display:flex; border-bottom:1px solid rgba(255,255,255,0.07); }
.stab { flex:1; padding:11px; background:transparent; border:none; color:#555; font-size:13px; font-family:'Rajdhani',sans-serif; letter-spacing:1.5px; cursor:pointer; transition:all 0.2s; border-bottom:2px solid transparent; text-transform:uppercase; }
.stab:hover { color:#aaa; background:rgba(255,255,255,0.04); }
.stab.active { color:#f1c40f; border-bottom-color:#f1c40f; background:rgba(241,196,15,0.06); text-shadow:0 0 8px rgba(241,196,15,0.4); }
#shop-items::-webkit-scrollbar { width:5px; }
#shop-items::-webkit-scrollbar-thumb { background:#2a2a3a; border-radius:3px; }
.shop-item {
  background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.08);
  border-radius:12px; padding:12px 10px 10px; cursor:pointer;
  transition:all 0.18s cubic-bezier(0.2,0,0,1);
  text-align:center; position:relative; overflow:hidden;
  display:flex; flex-direction:column; align-items:center; gap:3px;
  min-height:110px;
}
.shop-item::before {
  content:''; position:absolute; inset:0; border-radius:12px;
  background:linear-gradient(135deg,rgba(255,255,255,0.04) 0%,transparent 60%);
  pointer-events:none; z-index:0;
}
.shop-item > * { position:relative; z-index:1; }
.shop-item::after {
  content:''; position:absolute; bottom:0; left:10%; right:10%; height:2px;
  background:linear-gradient(90deg,transparent,rgba(241,196,15,0.5),transparent);
  opacity:0; transition:opacity 0.2s; border-radius:0 0 12px 12px; z-index:2;
}
.shop-item:hover { border-color:rgba(241,196,15,0.5); background:rgba(241,196,15,0.07); transform:translateY(-3px); box-shadow:0 8px 24px rgba(0,0,0,0.5), 0 0 20px rgba(241,196,15,0.08); }
.shop-item:hover::after { opacity:1; }
.shop-item:active { transform:translateY(-1px) scale(0.98); }
.shop-item.cant-afford { opacity:0.3; cursor:not-allowed; pointer-events:none; }
.shop-item.owned-item { border-color:rgba(46,204,113,0.35); background:rgba(46,204,113,0.04); }
.shop-item.owned-item::after { background:linear-gradient(90deg,transparent,rgba(46,204,113,0.5),transparent); opacity:1; }
.si-icon { margin-bottom:4px; display:flex; justify-content:center; flex-shrink:0; }
.si-name { font-size:12px; font-weight:700; color:#e8e8e8; letter-spacing:0.3px; line-height:1.2; word-break:break-word; }
.si-desc { font-size:9px; color:#666; line-height:1.3; }
.si-stats { display:flex; justify-content:center; gap:4px; flex-wrap:wrap; }
.si-stat { font-size:8px; color:#888; background:rgba(255,255,255,0.06); padding:2px 5px; border-radius:8px; border:1px solid rgba(255,255,255,0.08); white-space:nowrap; }
.si-stat b { color:#bbb; }
.si-price { font-family:'Orbitron',sans-serif; font-size:12px; color:#f1c40f; white-space:nowrap; text-shadow:0 0 8px rgba(241,196,15,0.4); }
.si-owned { font-size:9px; color:#2ecc71; text-shadow:0 0 6px rgba(46,204,113,0.5); }
#shop-footer { padding:14px 20px; border-top:1px solid rgba(255,255,255,0.07); display:flex; gap:8px; background:rgba(0,0,0,0.2); }
#shop-dismiss { flex:0 0 auto; padding:12px 18px; background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.1); border-radius:8px; color:#888; font-size:12px; font-family:'Orbitron',sans-serif; cursor:pointer; letter-spacing:1px; transition:all 0.15s; }
#shop-dismiss:hover { background:rgba(255,255,255,0.1); color:#fff; border-color:rgba(255,255,255,0.25); }
#shop-close { flex:1; padding:12px; background:linear-gradient(90deg,#922b21,#e74c3c); border:none; border-radius:8px; color:#fff; font-size:14px; font-family:'Orbitron',sans-serif; cursor:pointer; letter-spacing:2px; transition:all 0.15s; box-shadow:0 4px 16px rgba(231,76,60,0.3); }
#shop-close:hover { box-shadow:0 6px 24px rgba(231,76,60,0.5); transform:translateY(-1px); }

/* ── Boss Warning ── */
#boss-warning {
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  font-family:'Orbitron',sans-serif; font-size:36px; color:#e74c3c;
  text-shadow:0 0 40px #e74c3c, 0 0 80px rgba(231,76,60,0.5);
  font-weight:900; letter-spacing:5px; z-index:20;
  animation:bossFlash 0.35s infinite alternate;
  pointer-events:none;
  background:rgba(0,0,0,0.5); padding:12px 32px; border-radius:8px;
  border:1px solid rgba(231,76,60,0.4);
  box-shadow:0 0 40px rgba(231,76,60,0.3), inset 0 0 20px rgba(231,76,60,0.1);
}
@keyframes bossFlash {
  from { opacity:1; transform:translate(-50%,-50%) scale(1); text-shadow:0 0 40px #e74c3c; }
  to   { opacity:0.15; transform:translate(-50%,-50%) scale(1.04); text-shadow:0 0 80px #e74c3c, 0 0 120px rgba(231,76,60,0.8); }
}

/* ── Wave Clear Banner ── */
#wave-clear-banner {
  position:absolute; top:80px; left:50%; transform:translateX(-50%);
  font-family:'Orbitron',sans-serif; font-size:38px; font-weight:900;
  color:#2ecc71; letter-spacing:6px; z-index:20; pointer-events:none;
  text-shadow:0 0 40px rgba(46,204,113,0.9), 0 0 80px rgba(46,204,113,0.4);
  white-space:nowrap;
  animation:waveClearAnim 2.5s ease-out forwards;
}
@keyframes waveClearAnim {
  0%   { opacity:0; transform:translateX(-50%) scale(0.75); }
  15%  { opacity:1; transform:translateX(-50%) scale(1.06); }
  30%  { transform:translateX(-50%) scale(1.0); }
  70%  { opacity:1; }
  100% { opacity:0; transform:translateX(-50%) translateY(-20px) scale(1.0); }
}

/* ── Zombie type announcement ── */
#zombie-type-announce {
  position:absolute; top:28%; left:50%; transform:translateX(-50%);
  font-family:'Orbitron',sans-serif; font-size:16px; color:#e74c3c;
  letter-spacing:3px; z-index:20; pointer-events:none;
  text-shadow:0 0 16px rgba(231,76,60,0.8);
  background:rgba(0,0,0,0.6); padding:8px 20px; border-radius:6px;
  border:1px solid rgba(231,76,60,0.3);
}

/* ── Zombie count badge ── */
#zombie-count-badge {
  position:absolute; top:80px; left:50%; transform:translateX(-50%);
  background:rgba(0,0,0,0.7); border:1px solid rgba(231,76,60,0.4);
  border-radius:20px; padding:5px 18px;
  font-family:'Orbitron',sans-serif; font-size:13px; color:#e74c3c;
  pointer-events:none; z-index:10; display:none;
  text-shadow:0 0 8px rgba(231,76,60,0.5);
  box-shadow:0 0 12px rgba(231,76,60,0.15);
}
/* ── Main Menu ── */
#main-menu { position:absolute; inset:0; z-index:200; display:flex; align-items:center; justify-content:center; overflow:hidden; }
#mm-bg-canvas { position:absolute; inset:0; width:100%; height:100%; background:#020408; }
#mm-content { position:relative; z-index:1; text-align:center; }
#mm-logo { margin-bottom:40px; }
#mm-title {
  font-family:'Orbitron',sans-serif; font-size:72px; font-weight:900;
  color:#fff; letter-spacing:8px;
  text-shadow: 0 0 40px rgba(116,185,255,0.9), 0 0 80px rgba(116,185,255,0.5), 0 0 160px rgba(162,155,254,0.2), 0 2px 4px rgba(0,0,0,0.9);
  animation:titlePulse 3s ease-in-out infinite alternate;
}
@keyframes titlePulse {
  from { text-shadow: 0 0 30px rgba(116,185,255,0.6), 0 0 60px rgba(116,185,255,0.3), 0 2px 4px rgba(0,0,0,0.9); letter-spacing:8px; }
  to   { text-shadow: 0 0 70px rgba(116,185,255,1.0), 0 0 140px rgba(116,185,255,0.6), 0 0 220px rgba(162,155,254,0.35), 0 2px 4px rgba(0,0,0,0.9); letter-spacing:9px; }
}
#mm-title span.accent {
  color:#e74c3c;
  animation:accentPulse 3s ease-in-out infinite alternate;
}
@keyframes accentPulse {
  from { text-shadow:0 0 30px rgba(231,76,60,0.6), 0 0 60px rgba(231,76,60,0.3), 0 2px 4px rgba(0,0,0,0.9); }
  to   { text-shadow:0 0 70px rgba(231,76,60,1.0), 0 0 140px rgba(231,76,60,0.6), 0 0 220px rgba(255,100,60,0.35), 0 2px 4px rgba(0,0,0,0.9); }
}
#mm-subtitle {
  font-family:'Orbitron',sans-serif; font-size:11px; color:#e74c3c;
  letter-spacing:8px; margin-top:6px; text-transform:uppercase;
  opacity:0.7; text-shadow:0 0 10px rgba(231,76,60,0.4);
}
#mm-tagline {
  font-size:13px; color:#4a5568; letter-spacing:5px; margin-top:10px;
  text-transform:uppercase; font-family:'Rajdhani',sans-serif;
  animation:taglineFade 4s ease-in-out infinite alternate;
}
@keyframes taglineFade { from{opacity:0.4;color:#4a5568} to{opacity:0.9;color:#74b9ff} }
#mm-nav { display:flex; flex-direction:column; gap:10px; align-items:center; }
.mm-btn {
  width:280px; padding:15px 0; border:1px solid rgba(255,255,255,0.1);
  background:rgba(8,12,22,0.8); color:#aaa; font-size:13px;
  font-family:'Orbitron',sans-serif; letter-spacing:2.5px; border-radius:10px;
  cursor:pointer; transition:all 0.22s cubic-bezier(0.2,0,0,1);
  backdrop-filter:blur(10px); position:relative; overflow:hidden;
}
.mm-btn::before {
  content:''; position:absolute; inset:0;
  background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,0.06) 50%,transparent 100%);
  transform:translateX(-100%); transition:transform 0.5s;
}
.mm-btn:hover::before { transform:translateX(100%); }
.mm-btn:hover {
  background:rgba(15,22,40,0.95); border-color:rgba(116,185,255,0.5);
  color:#74b9ff; transform:translateY(-3px) scale(1.02);
  box-shadow:0 12px 32px rgba(0,0,0,0.5), 0 0 20px rgba(116,185,255,0.1);
}
.mm-btn:active { transform:translateY(-1px) scale(0.99); }
.mm-btn.primary {
  background:linear-gradient(135deg,rgba(116,185,255,0.12),rgba(162,155,254,0.12));
  border-color:rgba(116,185,255,0.45); color:#74b9ff;
  box-shadow:0 0 24px rgba(116,185,255,0.15), inset 0 1px 0 rgba(255,255,255,0.08);
  font-size:14px; letter-spacing:3px;
}
.mm-btn.primary:hover {
  box-shadow:0 0 50px rgba(116,185,255,0.35), 0 12px 32px rgba(0,0,0,0.5);
  border-color:rgba(116,185,255,0.8); color:#a8d8ff;
}
#mm-perk-coins-display {
  margin-top:22px; font-family:'Orbitron',sans-serif; font-size:13px;
  color:#f1c40f; opacity:0.9; letter-spacing:1px;
  text-shadow:0 0 10px rgba(241,196,15,0.4);
}
#mm-footer { margin-top:14px; display:flex; gap:16px; justify-content:center; align-items:center; }
#mm-footer a { font-size:10px; color:#2d3748; text-decoration:none; letter-spacing:1px; text-transform:uppercase; transition:color 0.15s; }
#mm-footer a:hover { color:#666; }
#mm-version { font-size:10px; color:#2d3748; letter-spacing:1px; font-family:'Orbitron',sans-serif; }

/* ── Perks Screen / Skill Tree ── */
#perks-screen {
  position:absolute; inset:0; background:rgba(0,0,0,0.94);
  display:flex; align-items:center; justify-content:center; z-index:210;
  backdrop-filter:blur(12px);
  animation:shopFadeIn 0.2s ease-out;
}
#perks-panel {
  background:linear-gradient(160deg,#0a0d16,#111828);
  border:1px solid rgba(241,196,15,0.15); border-radius:16px;
  width:94vw; max-width:1300px; height:90vh; overflow:hidden;
  display:flex; flex-direction:column;
  box-shadow:0 0 80px rgba(241,196,15,0.06), 0 24px 80px rgba(0,0,0,0.9);
}
#perks-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 28px; border-bottom:1px solid rgba(255,255,255,0.07);
  flex-shrink:0; background:linear-gradient(90deg,rgba(241,196,15,0.04),transparent);
}
#perks-header h2 { font-family:'Orbitron',sans-serif; font-size:22px; color:#f1c40f; text-shadow:0 0 20px rgba(241,196,15,0.5); letter-spacing:2px; }
#perks-coins-display { font-family:'Orbitron',sans-serif; font-size:20px; color:#f1c40f; text-shadow:0 0 12px rgba(241,196,15,0.5); }
#perks-back {
  background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.1);
  color:#888; padding:8px 16px; border-radius:8px; cursor:pointer;
  font-family:'Rajdhani',sans-serif; font-size:14px; letter-spacing:1px;
  transition:all 0.15s;
}
#perks-back:hover { background:rgba(255,255,255,0.1); color:#fff; border-color:rgba(255,255,255,0.25); }
#perks-tree-container { overflow:auto; position:relative; flex:1; background:radial-gradient(ellipse at 50% 0%,#0d1020,#07090f); }
#perks-tree-container::-webkit-scrollbar { width:8px; height:8px; }
#perks-tree-container::-webkit-scrollbar-track { background:#07090f; }
#perks-tree-container::-webkit-scrollbar-thumb { background:#1e2438; border-radius:4px; }
#perks-tree-container::-webkit-scrollbar-thumb:hover { background:#2a3050; }
#skill-tree-canvas { display:block; cursor:grab; user-select:none; }

/* ── How To Play / Privacy ── */
#howto-screen, #privacy-screen { position:absolute; inset:0; background:rgba(0,0,0,0.92); display:flex; align-items:center; justify-content:center; z-index:210; backdrop-filter:blur(8px); }
#howto-panel, #privacy-panel { background:linear-gradient(160deg,#0f1117,#161b26); border:1px solid rgba(255,255,255,0.1); border-radius:14px; padding:28px 32px; width:640px; max-height:82vh; overflow-y:auto; color:#ccc; box-shadow:0 20px 60px rgba(0,0,0,0.8); }
#howto-panel::-webkit-scrollbar, #privacy-panel::-webkit-scrollbar { width:5px; }
#howto-panel::-webkit-scrollbar-thumb, #privacy-panel::-webkit-scrollbar-thumb { background:#333; border-radius:3px; }
#howto-panel h2, #privacy-panel h2 { font-family:'Orbitron',sans-serif; font-size:20px; color:#f1c40f; margin-bottom:20px; }
.howto-section { margin-bottom:20px; }
.howto-section h3, #privacy-panel h3 { font-size:14px; color:#74b9ff; letter-spacing:1px; margin-bottom:10px; text-transform:uppercase; }
.howto-grid { display:grid; grid-template-columns:1fr 1fr; gap:4px 16px; font-size:13px; }
.howto-grid span:nth-child(odd) { color:#f1c40f; font-weight:600; }
.howto-section p, #privacy-panel p { font-size:13px; line-height:1.7; color:#888; margin-bottom:8px; }
#privacy-panel code { background:rgba(255,255,255,0.08); padding:1px 5px; border-radius:3px; font-size:12px; color:#74b9ff; }
#howto-back, #privacy-back { margin-top:20px; padding:10px 24px; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.12); color:#aaa; border-radius:6px; cursor:pointer; font-family:'Rajdhani',sans-serif; font-size:14px; letter-spacing:1px; transition:all 0.15s; }
#howto-back:hover, #privacy-back:hover { background:rgba(255,255,255,0.12); color:#fff; }

/* ── Pause Menu ── */
/* ── Game Over ── */
#game-over { position:absolute; inset:0; background:rgba(0,0,0,0.92); display:flex; align-items:center; justify-content:center; z-index:100; backdrop-filter:blur(12px); animation:shopFadeIn 0.3s ease-out; }
#go-panel {
  text-align:center; color:#fff; max-width:440px;
  background:linear-gradient(160deg,#0d1020,#131828);
  border:1px solid rgba(231,76,60,0.2); border-radius:16px;
  padding:36px 40px;
  box-shadow:0 0 60px rgba(231,76,60,0.08), 0 24px 80px rgba(0,0,0,0.9);
}
#go-skull { font-size:72px; margin-bottom:12px; animation:skullPulse 2s infinite; filter:drop-shadow(0 0 20px rgba(231,76,60,0.5)); }
@keyframes skullPulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.1) rotate(-3deg)} }
#go-title { font-family:'Orbitron',sans-serif; font-size:44px; color:#e74c3c; text-shadow:0 0 40px rgba(231,76,60,0.7); margin-bottom:8px; letter-spacing:3px; }
#go-sub { font-size:15px; color:#777; margin-bottom:18px; letter-spacing:1px; }
#go-stats { font-size:14px; color:#bbb; line-height:2.4; margin-bottom:14px; background:rgba(0,0,0,0.3); padding:12px 16px; border-radius:8px; border:1px solid rgba(255,255,255,0.05); }
#go-perk-note { font-size:14px; color:#f1c40f; margin-bottom:22px; font-family:'Orbitron',sans-serif; text-shadow:0 0 10px rgba(241,196,15,0.4); }
#go-btns { display:flex; gap:10px; justify-content:center; }
#go-btns button { padding:13px 28px; border:none; border-radius:10px; font-size:13px; font-family:'Orbitron',sans-serif; cursor:pointer; letter-spacing:1.5px; transition:all 0.15s; }
#go-perks-btn { background:linear-gradient(135deg,#6c1fa0,#9b59b6); color:#fff; box-shadow:0 4px 16px rgba(155,89,182,0.3); }
#go-restart-btn { background:linear-gradient(135deg,#922b21,#e74c3c); color:#fff; box-shadow:0 4px 16px rgba(231,76,60,0.3); }
#go-btns button:hover { transform:translateY(-2px); filter:brightness(1.15); }

/* ── Pause Menu ── */
#pause-menu { position:absolute; inset:0; background:rgba(0,0,0,0.8); display:flex; align-items:center; justify-content:center; z-index:150; backdrop-filter:blur(10px); animation:shopFadeIn 0.15s ease-out; }
#pause-panel {
  background:linear-gradient(160deg,#0a0d16,#111828);
  border:1px solid rgba(255,255,255,0.1); border-radius:16px;
  padding:30px 34px; width:400px;
  box-shadow:0 0 40px rgba(116,185,255,0.05), 0 24px 60px rgba(0,0,0,0.9);
  text-align:center;
}
#pause-title { font-family:'Orbitron',sans-serif; font-size:34px; font-weight:900; color:#fff; letter-spacing:8px; margin-bottom:6px; text-shadow:0 0 24px rgba(255,255,255,0.25); }
#pause-wave-info { font-size:12px; color:#555; margin-bottom:24px; letter-spacing:1.5px; text-transform:uppercase; }
#pause-btns { display:flex; flex-direction:column; gap:9px; margin-bottom:24px; }
#pause-btns button { padding:13px; border:none; border-radius:10px; font-size:13px; font-family:'Orbitron',sans-serif; cursor:pointer; letter-spacing:1.5px; transition:all 0.15s; }
#pause-resume { background:linear-gradient(90deg,#1a6b3a,#2ecc71); color:#fff; box-shadow:0 4px 16px rgba(46,204,113,0.25); }
.pause-secondary { background:rgba(255,255,255,0.06) !important; border:1px solid rgba(255,255,255,0.1) !important; color:#aaa !important; }
.pause-danger { background:rgba(192,57,43,0.2) !important; border:1px solid rgba(231,76,60,0.25) !important; color:#e74c3c !important; }
#pause-btns button:hover { transform:translateY(-2px); filter:brightness(1.12); }
#pause-controls { border-top:1px solid rgba(255,255,255,0.06); padding-top:16px; display:grid; grid-template-columns:1fr 1fr; gap:4px 12px; }
.pc-row { display:contents; }
.pc-row span:first-child { font-size:11px; color:#f1c40f; font-family:'Orbitron',sans-serif; text-align:right; padding:2px 0; }
.pc-row span:last-child  { font-size:11px; color:#777; text-align:left; padding:2px 0; }

/* ── Crosshair ── */
#crosshair {
  position:absolute; width:24px; height:24px; pointer-events:none; z-index:30;
  transform:translate(-50%,-50%);
}
#crosshair::before, #crosshair::after {
  content:''; position:absolute;
  background:rgba(255,255,255,0.9);
  box-shadow:0 0 4px rgba(255,255,255,0.6);
}
#crosshair::before { width:2px; height:100%; left:50%; transform:translateX(-50%); }
#crosshair::after  { height:2px; width:100%; top:50%; transform:translateY(-50%); }

/* ── Zombie count badge ── */
#zombie-count-badge {
  position:absolute; top:80px; left:50%; transform:translateX(-50%);
  background:rgba(0,0,0,0.7); border:1px solid rgba(231,76,60,0.4);
  border-radius:20px; padding:5px 18px;
  font-family:'Orbitron',sans-serif; font-size:13px; color:#e74c3c;
  pointer-events:none; z-index:10; display:none;
  text-shadow:0 0 8px rgba(231,76,60,0.5);
  box-shadow:0 0 12px rgba(231,76,60,0.15);
}

/* ── Flashlight battery ── */
#battery-display {
  display:flex; align-items:center; gap:6px;
  background:rgba(0,0,0,0.65); border:1px solid rgba(255,255,255,0.15);
  padding:6px 10px; border-radius:6px; font-size:13px; color:#ffe066;
  backdrop-filter:blur(4px);
}
#battery-bar-track {
  width:60px; height:7px; background:rgba(0,0,0,0.5);
  border-radius:4px; overflow:hidden; border:1px solid rgba(255,255,255,0.1);
}
#battery-bar-fill {
  height:100%; width:100%; border-radius:4px;
  background:linear-gradient(90deg,#2ecc71,#f1c40f);
  transition:width 0.3s, background 0.3s;
}

/* ── Sprint indicator ── */
#stamina-text { font-size:10px; min-width:40px; }