@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;900&display=swap");

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

:root{
  --blue:#4a9eff;--blue-d:#2a7edf;--blue-dim:#0e1e3a;
  --gold:#ffd700;--green:#44ff88;--red:#ff4455;--orange:#ff9944;
  --bg:#07070f;--bg1:#0d0d1a;--bg2:#131320;--bg3:#1a1a2a;
  --border:#ffffff0d;--border2:#ffffff1a;--border3:#ffffff28;
  --text:#e8e8f2;--muted:#5a5a78;--muted2:#8888aa;
  --radius:10px;--radius-lg:16px;--radius-xl:22px;
}

body{background:var(--bg);color:var(--text);font-family:"Inter","Segoe UI",sans-serif;height:100vh;overflow:hidden;-webkit-font-smoothing:antialiased}
#app{width:100vw;height:100vh;position:relative}

/* SCREENS */
.screen{
  position:absolute;inset:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;
  transform:translateY(12px);
  transition:opacity .28s cubic-bezier(.4,0,.2,1), transform .28s cubic-bezier(.4,0,.2,1);
  will-change:opacity,transform;
}
.screen.active{opacity:1;pointer-events:all;transform:translateY(0);}
.screen.leaving{opacity:0;transform:translateY(-12px);}

/* OVERLAY */
.overlay{position:fixed;inset:0;background:#000000bb;display:flex;align-items:center;justify-content:center;z-index:50;backdrop-filter:blur(4px)}
.overlay.hidden,.hidden{display:none!important}

/* MODAL */
.modal-box{background:var(--bg2);border:1px solid var(--border2);border-radius:var(--radius-xl);padding:0;overflow:hidden;box-shadow:0 24px 80px #000c;min-width:360px}
.modal-box.wide{min-width:640px}.modal-box.map-modal{min-width:700px;max-height:85vh;overflow-y:auto}
.modal-box.tall{max-height:80vh;display:flex;flex-direction:column}
.modal-header{display:flex;align-items:center;gap:12px;padding:16px 20px;border-bottom:1px solid var(--border);flex-shrink:0}
.modal-header h2,.modal-header h3{flex:1;font-size:17px;font-weight:700;letter-spacing:.3px}

/* BUTTONS */
.menu-btn{display:flex;align-items:center;gap:10px;padding:13px 32px;border-radius:var(--radius);font-size:14px;font-weight:600;font-family:inherit;cursor:pointer;border:none;transition:transform .12s,box-shadow .12s,background .12s,color .12s;letter-spacing:.3px;width:220px;justify-content:center}
.menu-btn:hover{transform:translateY(-2px)}
.menu-btn:active{transform:translateY(0)}
.menu-btn-primary{background:var(--blue);color:#fff;box-shadow:0 4px 20px #4a9eff44}
.menu-btn-primary:hover{background:var(--blue-d);box-shadow:0 6px 28px #4a9eff66}
.menu-btn-secondary{background:var(--bg3);color:var(--text);border:1px solid var(--border2)}
.menu-btn-secondary:hover{border-color:var(--blue);color:var(--blue);background:#0e1e3a}
.menu-btn-ghost{background:transparent;color:var(--muted2);border:1px solid var(--border)}
.menu-btn-ghost:hover{color:var(--text);border-color:var(--border2)}

.icon-btn{background:var(--bg3);border:1px solid var(--border2);color:var(--muted2);width:36px;height:36px;border-radius:8px;font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .12s,color .12s,border-color .12s;font-family:inherit;flex-shrink:0}
.icon-btn:hover{background:var(--bg2);color:var(--text);border-color:var(--border3)}

/* ══ MAIN MENU ══ */
#main-menu{overflow:hidden}
#menu-bg-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;display:block}
.menu-content{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center}

.menu-logo{text-align:center;margin-bottom:44px}
.logo-towers{display:flex;align-items:flex-end;justify-content:center;gap:6px;margin-bottom:20px;height:60px}
.logo-tower{border-radius:4px 4px 0 0;background:linear-gradient(180deg,#4a9eff 0%,#1a4a8a 100%);box-shadow:0 0 20px #4a9eff55;position:relative}
.logo-tower::before{content:'';position:absolute;top:-8px;left:50%;transform:translateX(-50%);width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-bottom:8px solid #4a9eff}
.lt1{width:18px;height:36px;animation:towerPulse 2.4s ease-in-out infinite}
.lt2{width:22px;height:52px;animation:towerPulse 2.4s ease-in-out .3s infinite}
.lt3{width:18px;height:40px;animation:towerPulse 2.4s ease-in-out .6s infinite}
@keyframes towerPulse{0%,100%{box-shadow:0 0 16px #4a9eff55}50%{box-shadow:0 0 32px #4a9effaa}}

#main-menu h1{font-size:50px;font-weight:900;letter-spacing:8px;color:#fff;line-height:1;margin-bottom:10px}
#main-menu h1 span{color:var(--blue);text-shadow:0 0 40px #4a9eff66}
.tagline{font-size:12px;letter-spacing:4px;color:var(--muted);text-transform:uppercase}

.menu-buttons{display:flex;flex-direction:column;gap:10px;margin:36px 0 32px}
.menu-stats-row{display:flex;align-items:center;gap:32px;background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius-lg);padding:16px 36px}
.menu-stat{text-align:center}
.menu-stat-val{font-size:26px;font-weight:700;color:var(--blue);line-height:1;margin-bottom:4px}
.menu-stat-label{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:1.5px}
.menu-stat-divider{width:1px;height:36px;background:var(--border2)}

/* ══ MAP SELECT ══ */
#map-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;padding:16px}
.map-card{background:var(--bg3);border:2px solid var(--border);border-radius:var(--radius-lg);padding:0;cursor:pointer;transition:border-color .15s,transform .12s,box-shadow .12s;overflow:hidden}
.map-card:hover{border-color:var(--blue);transform:translateY(-2px);box-shadow:0 8px 24px #4a9eff22}
.map-card.selected{border-color:var(--blue);box-shadow:0 0 0 3px #4a9eff33}
.map-preview{width:100%;height:100px;display:block}
.map-info{padding:12px 14px}
.map-name{font-weight:700;font-size:14px;margin-bottom:4px}
.map-diff{font-size:11px;font-weight:600;letter-spacing:.5px;text-transform:uppercase}
.map-diff.easy{color:#44ff88}.map-diff.medium{color:#ffd700}.map-diff.hard{color:#ff9944}.map-diff.extreme{color:#ff4455}
.map-desc{font-size:11px;color:var(--muted2);margin-top:4px;line-height:1.4}
.map-select-btn{display:block;width:calc(100% - 40px);margin:0 20px 20px;padding:11px;background:var(--blue);color:#fff;border:none;border-radius:8px;font-size:14px;font-weight:600;font-family:inherit;cursor:pointer;transition:background .12s}
.map-select-btn:hover{background:var(--blue-d)}

/* ══ SKILL TREE ══ */
#skilltree-screen{align-items:stretch;justify-content:flex-start;background:var(--bg)}
#st-header{display:flex;align-items:center;gap:14px;padding:12px 18px;background:var(--bg1);border-bottom:1px solid var(--border);flex-shrink:0}
#st-header h2{font-size:17px;font-weight:700}
.st-points-badge{display:flex;align-items:center;gap:6px;background:#1e1600;border:1px solid #ffd70033;border-radius:20px;padding:6px 14px;font-size:13px;font-weight:600}
#st-points{color:var(--gold)}
.st-points-label{color:var(--muted);font-size:11px}
#st-container{flex:1;position:relative;overflow:auto;background:var(--bg);cursor:grab;user-select:none}
#st-container.dragging{cursor:grabbing}
#st-bg-canvas{position:absolute;top:0;left:0;pointer-events:none;z-index:0}
#st-canvas{position:absolute;top:0;left:0;pointer-events:none;z-index:1}
#st-nodes{position:absolute;top:0;left:0;z-index:2}

.st-node{position:absolute;width:72px;height:72px;border-radius:50%;border:2px solid #ffffff12;background:var(--bg2);display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;transform:translate(-50%,-50%);transition:border-color .18s,background .18s,box-shadow .18s,transform .14s;user-select:none;font-size:26px}
.st-node:hover:not(.locked){transform:translate(-50%,-50%) scale(1.12);border-color:var(--blue);box-shadow:0 0 22px #4a9eff55}
.st-node.unlocked{border-color:var(--blue);background:#0a1e3a;box-shadow:0 0 12px #4a9eff33}
.st-node.maxed{border-color:var(--gold);background:#1a1400;box-shadow:0 0 12px #ffd70033}
.st-node.locked{opacity:.3;cursor:not-allowed}
.st-node.available{border-color:#4a9eff66;animation:nodePulse 2s ease-in-out infinite}
@keyframes nodePulse{0%,100%{box-shadow:0 0 8px #4a9eff22}50%{box-shadow:0 0 18px #4a9eff55}}
.node-rank{font-size:9px;font-weight:700;color:var(--muted);margin-top:2px;letter-spacing:.5px}
.st-node.unlocked .node-rank{color:var(--blue)}
.st-node.maxed .node-rank{color:var(--gold)}

#st-tooltip{position:fixed;background:var(--bg2);border:1px solid var(--border2);border-radius:var(--radius);padding:14px 16px;max-width:240px;font-size:13px;pointer-events:none;z-index:200;box-shadow:0 8px 32px #000c;backdrop-filter:blur(8px)}
.tt-name{font-size:14px;font-weight:700;color:var(--blue);margin-bottom:6px}
.tt-branch{font-size:10px;text-transform:uppercase;letter-spacing:1px;color:var(--muted);margin-bottom:6px}
.tt-desc{color:#bbb;margin-bottom:8px;line-height:1.5}
.tt-effect{color:var(--green);font-size:12px;margin-bottom:6px;line-height:1.5}
.tt-cost{font-size:12px}

/* ══ ALMANAC ══ */
#almanac-grid,#almanac-overlay-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:16px;overflow-y:auto}
.almanac-card{background:var(--bg3);border:1px solid var(--border);border-radius:var(--radius);padding:14px;text-align:center}
.almanac-icon{width:48px;height:48px;border-radius:50%;margin:0 auto 8px;display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:700;color:#fff}
.almanac-name{font-weight:700;font-size:13px;margin-bottom:6px}
.almanac-stat{display:flex;justify-content:space-between;font-size:11px;color:var(--muted2);margin-bottom:2px}
.almanac-stat span:last-child{color:var(--text);font-weight:600}

/* ══ GAME HUD ══ */
#game-screen{flex-direction:column;justify-content:flex-start;align-items:stretch}
#hud{display:flex;align-items:center;justify-content:space-between;padding:0 12px;height:56px;background:var(--bg1);border-bottom:1px solid var(--border);flex-shrink:0;gap:8px}
.hud-group{display:flex;align-items:center;gap:4px}
.hud-stat{display:flex;align-items:center;gap:7px;padding:5px 10px;border-radius:8px;background:var(--bg2);border:1px solid var(--border)}
.hud-icon{font-size:14px;line-height:1}
.hud-val{font-size:15px;font-weight:700;line-height:1;color:var(--text)}
.hud-val.lives{color:#ff7788}.hud-val.gold{color:var(--gold)}.hud-val.exp{color:var(--green)}
.hud-label{font-size:9px;color:var(--muted);text-transform:uppercase;letter-spacing:.8px;line-height:1;margin-top:2px}
.hud-center{flex:1;display:flex;justify-content:center;align-items:center;gap:8px}

.wave-btn{background:var(--blue);color:#fff;border:none;padding:9px 22px;border-radius:8px;font-size:13px;font-weight:600;font-family:inherit;cursor:pointer;transition:background .12s,transform .1s,box-shadow .12s;box-shadow:0 2px 14px #4a9eff44;letter-spacing:.3px;white-space:nowrap}
.wave-btn:hover{background:var(--blue-d);transform:translateY(-1px);box-shadow:0 4px 18px #4a9eff55}
.wave-btn:active{transform:translateY(0)}
.wave-btn:disabled{background:var(--bg3);color:var(--muted);box-shadow:none;cursor:not-allowed;transform:none}

.auto-btn{background:var(--bg3);color:var(--muted2);border:1px solid var(--border2);padding:7px 12px;border-radius:8px;font-size:11px;font-weight:600;font-family:inherit;cursor:pointer;transition:background .12s,color .12s,border-color .12s;white-space:nowrap}
.auto-btn.on{background:#0e2a0e;color:var(--green);border-color:#33aa33}
.auto-btn:hover{border-color:var(--border3);color:var(--text)}

.hud-right-group{justify-content:flex-end;gap:4px}

/* ══ GAME AREA ══ */
#game-area{flex:1;display:flex;overflow:hidden;min-height:0}
#game-canvas{display:block;width:100%;height:100%;flex:1;min-width:0}

/* ══ TOWER PANEL ══ */
#tower-panel{width:220px;background:var(--bg1);border-left:1px solid var(--border);display:flex;flex-direction:column;overflow:hidden;flex-shrink:0}
.panel-section{padding:10px 8px;overflow-y:auto}
.panel-selected{flex:1}
.panel-divider{height:1px;background:var(--border);flex-shrink:0}
.panel-title{font-size:10px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:1.5px;margin-bottom:8px}

#tower-buttons{display:grid;grid-template-columns:1fr 1fr;gap:5px;overflow-y:auto;max-height:320px}
.tower-btn{background:var(--bg2);border:1px solid var(--border);border-radius:8px;padding:7px 6px;cursor:pointer;color:var(--text);font-size:11px;font-family:inherit;text-align:center;transition:border-color .12s,background .12s,transform .1s;display:flex;flex-direction:column;align-items:center;gap:4px}
.tower-btn:hover:not(.locked-tower){border-color:var(--blue);background:var(--blue-dim);transform:translateY(-1px)}
.tower-btn.selected{border-color:var(--blue);background:var(--blue-dim)}
.tower-btn.locked-tower{opacity:.3;cursor:not-allowed}
.tb-icon{width:28px;height:28px;border-radius:6px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.tb-info{width:100%}
.tb-name{font-weight:600;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center}
.tb-cost{color:var(--gold);font-size:10px;margin-top:1px;text-align:center}
.tb-locked{color:var(--muted);font-size:10px;margin-top:1px;text-align:center}

.hint-text{color:var(--muted);font-size:12px}
#selected-info{font-size:12px;color:#aaa;line-height:1.7}
.sel-name{font-weight:700;font-size:13px;margin-bottom:8px;color:var(--text);display:flex;align-items:center;gap:6px}
.sel-lv{font-size:10px;color:var(--muted);background:var(--bg3);border-radius:4px;padding:1px 5px}
.sel-stat-row{display:flex;justify-content:space-between;font-size:11px;color:var(--muted);margin-bottom:3px}
.sel-stat-row span:last-child{color:var(--text);font-weight:600}
.action-btn{width:100%;border-radius:6px;padding:7px 10px;font-size:11px;font-weight:600;font-family:inherit;cursor:pointer;margin-top:5px;transition:background .12s,transform .1s;border:1px solid transparent}
.action-btn:hover{transform:translateY(-1px)}
.action-btn:active{transform:translateY(0)}
.upgrade-btn{background:#0a2a0a;border-color:#2a8a2a;color:var(--green)}
.upgrade-btn:hover{background:#122a12}
.sell-btn{background:#2a0a0a;border-color:#8a2a2a;color:#ff7788}
.sell-btn:hover{background:#2a1212}

/* ══ STATS OVERLAY ══ */
#stats-content{padding:16px 20px;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.stat-item{background:var(--bg3);border-radius:8px;padding:10px 14px}
.stat-item-val{font-size:22px;font-weight:700;color:var(--text);line-height:1;margin-bottom:3px}
.stat-item-label{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:1px}

/* ══ DEATH SCREEN ══ */
#death-screen{background:var(--bg)}
.death-content{display:flex;flex-direction:column;align-items:center;animation:deathIn .5s ease}
@keyframes deathIn{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
.death-skull{font-size:60px;margin-bottom:14px}
.death-title{font-size:42px;font-weight:900;color:var(--red);letter-spacing:4px;text-transform:uppercase;text-shadow:0 0 40px #ff445566;margin-bottom:24px}
.death-stats{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius-lg);padding:18px 32px;margin-bottom:14px;display:flex;gap:32px}
.death-stat{text-align:center}
.death-stat-val{font-size:28px;font-weight:700;color:var(--text);line-height:1;margin-bottom:4px}
.death-stat-label{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:1.5px}
.death-sp{font-size:17px;font-weight:700;color:var(--gold);margin-bottom:28px;display:flex;align-items:center;gap:8px}
.death-sp::before{content:"✦";font-size:13px}
.death-buttons{display:flex;flex-direction:column;gap:8px}

/* SCROLLBAR */
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:#ffffff14;border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:#ffffff22}

/* PAUSE */
.pause-box{padding:32px 40px;display:flex;flex-direction:column;align-items:center;gap:10px;min-width:280px}
.pause-title{font-size:24px;font-weight:900;color:var(--text);letter-spacing:2px;margin-bottom:8px}
.pause-box .menu-btn{width:200px}

/* ACHIEVEMENTS */
#achievements-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:16px;overflow-y:auto}
.ach-card{background:var(--bg3);border:1px solid var(--border);border-radius:var(--radius);padding:14px;display:flex;gap:12px;align-items:flex-start}
.ach-card.unlocked{border-color:#ffd70044;background:#1a1400}
.ach-icon{font-size:24px;flex-shrink:0;width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:var(--bg2);border-radius:8px}
.ach-card.unlocked .ach-icon{background:#2a2000}
.ach-name{font-weight:700;font-size:13px;margin-bottom:3px}
.ach-desc{font-size:11px;color:var(--muted2);line-height:1.4}
.ach-card.locked .ach-name{color:var(--muted)}

/* GLOBAL STATS */
#global-stats-content{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;padding:16px}

/* CONTINUE BUTTON */
.menu-btn-continue{background:linear-gradient(135deg,#1a3a1a,#0e2a0e);color:var(--green);border:1px solid #33aa33;box-shadow:0 4px 20px #44ff8822}
.menu-btn-continue:hover{background:linear-gradient(135deg,#223a22,#163a16);box-shadow:0 6px 28px #44ff8844}

/* ACHIEVEMENT TOAST */
.ach-toast{position:fixed;bottom:24px;right:24px;background:var(--bg2);border:1px solid #ffd70066;border-radius:12px;padding:14px 18px;display:flex;align-items:center;gap:12px;z-index:999;transform:translateX(120%);transition:transform .35s cubic-bezier(.34,1.56,.64,1);box-shadow:0 8px 32px #000a;min-width:240px}
.ach-toast.show{transform:translateX(0)}
.ach-toast-icon{font-size:28px}
.ach-toast-name{font-size:10px;color:var(--gold);text-transform:uppercase;letter-spacing:1px;margin-bottom:2px}
.ach-toast-title{font-size:14px;font-weight:700;color:var(--text)}

/* ALMANAC LOCKED */
.locked-almanac{opacity:0.55}
.locked-almanac .almanac-icon{filter:grayscale(1)}

/* ══ FLASHY BUTTONS ══ */
.menu-btn {
  position: relative;
  overflow: hidden;
}
.menu-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.08) 0%, transparent 60%);
  opacity: 0;
  transition: opacity .15s;
}
.menu-btn:hover::after { opacity: 1; }
.menu-btn:active { transform: scale(0.97) !important; }
.menu-btn-primary {
  background: linear-gradient(135deg, #5aadff 0%, #2a7edf 100%);
  box-shadow: 0 4px 20px #4a9eff44, inset 0 1px 0 rgba(255,255,255,0.15);
}
.menu-btn-primary:hover {
  background: linear-gradient(135deg, #6abbff 0%, #3a8eef 100%);
  box-shadow: 0 6px 28px #4a9eff66, inset 0 1px 0 rgba(255,255,255,0.2);
}
.menu-btn-secondary:hover { box-shadow: 0 4px 16px #4a9eff22; }
.menu-btn-continue {
  background: linear-gradient(135deg, #22aa44 0%, #0e7a2a 100%);
  box-shadow: 0 4px 20px #44ff8833, inset 0 1px 0 rgba(255,255,255,0.1);
}
.menu-btn-continue:hover {
  background: linear-gradient(135deg, #2acc55 0%, #1a9a3a 100%);
  box-shadow: 0 6px 28px #44ff8855;
}

/* Icon button flashy */
.icon-btn {
  position: relative;
  overflow: hidden;
  transition: background .12s, color .12s, border-color .12s, transform .1s, box-shadow .12s;
}
.icon-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px #0006; }
.icon-btn:active { transform: scale(0.92); }

/* Wave button pulse when ready */
.wave-btn:not(:disabled) {
  animation: wavePulse 2s ease-in-out infinite;
}
@keyframes wavePulse {
  0%,100% { box-shadow: 0 2px 14px #4a9eff44; }
  50%      { box-shadow: 0 2px 22px #4a9eff88; }
}
.wave-btn:disabled { animation: none; }

/* Map card hover */
.map-card {
  transition: border-color .15s, transform .15s cubic-bezier(.34,1.56,.64,1), box-shadow .15s;
}
.map-card:hover {
  transform: translateY(-4px) scale(1.01);
  box-shadow: 0 12px 32px #4a9eff33;
}
.map-card:active { transform: translateY(-1px) scale(0.99); }

/* Tower button flashy */
.tower-btn {
  transition: border-color .12s, background .12s, transform .12s cubic-bezier(.34,1.56,.64,1), box-shadow .12s;
}
.tower-btn:hover:not(.locked-tower) {
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 4px 12px #4a9eff33;
}
.tower-btn:active:not(.locked-tower) { transform: scale(0.96); }
.tower-btn.selected {
  box-shadow: 0 0 0 2px #4a9eff66, 0 4px 12px #4a9eff33;
}

/* Action buttons */
.action-btn {
  position: relative;
  overflow: hidden;
  transition: background .12s, transform .1s cubic-bezier(.34,1.56,.64,1), box-shadow .12s;
}
.action-btn:hover { transform: translateY(-2px); box-shadow: 0 4px 10px #0004; }
.action-btn:active { transform: scale(0.95); }

/* ══ DUAL UPGRADE PATHS ══ */
.upg-path { margin-top: 6px; }
.upg-path-header { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.upg-path-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; }
.upgrade-btn-b {
  width: 100%; border-radius: 6px; padding: 7px 10px; font-size: 11px; font-weight: 600;
  font-family: inherit; cursor: pointer; margin-top: 0;
  transition: background .12s, transform .1s; border: 1px solid #8a5a00;
  background: #2a1a00; color: #ff9944;
}
.upgrade-btn-b:hover { background: #3a2a00; transform: translateY(-2px); }
.upgrade-btn-b:active { transform: scale(0.95); }
.upg-maxed { font-size: 10px; color: var(--gold); text-align: center; padding: 4px 0; }
.upg-locked { font-size: 10px; color: var(--muted); text-align: center; padding: 4px 0; font-style: italic; }

/* ══ SKIP WAVE BUTTON ══ */
.skip-btn{background:var(--bg3);color:var(--muted2);border:1px solid var(--border2);padding:7px 14px;border-radius:8px;font-size:11px;font-weight:600;font-family:inherit;cursor:pointer;transition:background .12s,color .12s,border-color .12s,transform .1s;white-space:nowrap}
.skip-btn:not(:disabled):hover{background:#2a1a00;color:var(--orange);border-color:var(--orange);transform:translateY(-1px)}
.skip-btn:disabled{opacity:.4;cursor:not-allowed}

/* ══ SETTINGS ══ */
.settings-content{padding:20px 24px;display:flex;flex-direction:column;gap:20px}
.settings-section{display:flex;flex-direction:column;gap:8px}
.settings-label{font-size:12px;font-weight:600;color:var(--muted2);text-transform:uppercase;letter-spacing:1px}
.settings-row{display:flex;align-items:center;gap:12px}
.settings-slider{flex:1;height:4px;accent-color:var(--blue);cursor:pointer}
.settings-val{font-size:13px;font-weight:700;color:var(--text);min-width:36px;text-align:right}

/* ══ PRIVACY ══ */
.privacy-content{padding:20px 24px;overflow-y:auto;line-height:1.7;color:var(--muted2)}
.privacy-content h3{font-size:16px;color:var(--text);margin-bottom:12px}
.privacy-content h4{font-size:13px;color:var(--text);margin:16px 0 6px;font-weight:700}
.privacy-content p{font-size:13px;margin-bottom:8px}
.privacy-content ul{font-size:13px;padding-left:20px}
.privacy-content li{margin-bottom:4px}

/* ══ IMPROVED HUD ══ */
#hud{
  background:linear-gradient(180deg,#0f0f1e 0%,#0a0a16 100%);
  border-bottom:1px solid #ffffff14;
  box-shadow:0 2px 16px #00000066;
}
.hud-stat{
  background:linear-gradient(135deg,#1a1a2e 0%,#111128 100%);
  border:1px solid #ffffff14;
  box-shadow:inset 0 1px 0 #ffffff08;
  transition:border-color .15s,box-shadow .15s;
}
.hud-stat:hover{border-color:#ffffff22;box-shadow:inset 0 1px 0 #ffffff10,0 2px 8px #0004}
.hud-val{text-shadow:0 0 8px currentColor}
.hud-val.lives{text-shadow:0 0 10px #ff778888}
.hud-val.gold{text-shadow:0 0 10px #ffd70066}
.hud-val.exp{text-shadow:0 0 10px #44ff8866}

/* ══ IMPROVED WAVE BUTTON ══ */
.wave-btn{
  background:linear-gradient(135deg,#5aadff 0%,#2a7edf 100%);
  box-shadow:0 2px 14px #4a9eff44,inset 0 1px 0 rgba(255,255,255,0.15);
  text-shadow:0 1px 2px rgba(0,0,0,0.3);
}
.wave-btn:not(:disabled):hover{
  background:linear-gradient(135deg,#6abbff 0%,#3a8eef 100%);
  box-shadow:0 4px 20px #4a9eff66,inset 0 1px 0 rgba(255,255,255,0.2);
}

/* ══ IMPROVED TOWER PANEL ══ */
#tower-panel{
  background:linear-gradient(180deg,#0d0d1a 0%,#0a0a16 100%);
  border-left:1px solid #ffffff10;
  box-shadow:-2px 0 12px #00000044;
}
.panel-title{
  font-size:9px;letter-spacing:2px;
  color:#4a9eff88;
  border-bottom:1px solid #ffffff08;
  padding-bottom:6px;margin-bottom:8px;
}

/* ══ IMPROVED TOWER BUTTONS ══ */
.tower-btn{
  background:linear-gradient(135deg,#1a1a2e 0%,#141428 100%);
  border:1px solid #ffffff10;
  box-shadow:inset 0 1px 0 #ffffff06;
  position:relative;overflow:hidden;
}
.tower-btn::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(255,255,255,0.04) 0%,transparent 60%);
  opacity:0;transition:opacity .15s;
}
.tower-btn:hover:not(.locked-tower)::before{opacity:1}
.tower-btn:hover:not(.locked-tower){
  border-color:var(--blue);
  background:linear-gradient(135deg,#1a2a4a 0%,#0e1e3a 100%);
  box-shadow:0 4px 12px #4a9eff33,inset 0 1px 0 #4a9eff22;
  transform:translateY(-2px) scale(1.02);
}
.tower-btn.selected{
  border-color:var(--blue);
  background:linear-gradient(135deg,#1a2a4a 0%,#0e1e3a 100%);
  box-shadow:0 0 0 2px #4a9eff44,0 4px 12px #4a9eff33;
}

/* ══ IMPROVED ACTION BUTTONS ══ */
.upgrade-btn{
  background:linear-gradient(135deg,#0e2a0e 0%,#0a1e0a 100%);
  border-color:#2a8a2a;
  box-shadow:inset 0 1px 0 #44ff8822;
}
.upgrade-btn:hover{background:linear-gradient(135deg,#163a16 0%,#122a12 100%);box-shadow:0 3px 10px #44ff8833,inset 0 1px 0 #44ff8833}
.upgrade-btn-b{
  background:linear-gradient(135deg,#2a1a00 0%,#1e1200 100%);
  border-color:#8a5a00;
  box-shadow:inset 0 1px 0 #ff994422;
}
.upgrade-btn-b:hover{background:linear-gradient(135deg,#3a2a00 0%,#2a1e00 100%);box-shadow:0 3px 10px #ff994433}
.sell-btn{
  background:linear-gradient(135deg,#2a0a0a 0%,#1e0808 100%);
  border-color:#8a2a2a;
  box-shadow:inset 0 1px 0 #ff778822;
}
.sell-btn:hover{background:linear-gradient(135deg,#3a1212 0%,#2a0e0e 100%);box-shadow:0 3px 10px #ff445533}

/* ══ IMPROVED MENU BUTTONS ══ */
.menu-btn{
  position:relative;overflow:hidden;
  letter-spacing:.5px;
  text-shadow:0 1px 2px rgba(0,0,0,0.2);
}
.menu-btn::before{
  content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,0.08),transparent);
  transition:left .4s ease;
}
.menu-btn:hover::before{left:100%}
.menu-btn:active{transform:scale(0.96)!important;transition:transform .06s}

/* ══ IMPROVED MAP CARDS ══ */
.map-card{
  background:linear-gradient(135deg,#1a1a2e 0%,#141428 100%);
  position:relative;overflow:hidden;
}
.map-card::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(255,255,255,0.03) 0%,transparent 50%);
  pointer-events:none;
}
.map-card:hover{
  border-color:var(--blue);
  box-shadow:0 12px 32px #4a9eff33,inset 0 0 0 1px #4a9eff22;
}

/* ══ SCROLLABLE SCREENS ══ */
#achievements-screen .modal-box,
#almanac-screen .modal-box,
#stats-screen .modal-box,
#settings-screen .modal-box,
#privacy-screen .modal-box {
  max-height: 90vh;
  display: flex;
  flex-direction: column;
}
#achievements-grid {
  overflow-y: auto;
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 14px;
}
#almanac-grid, #almanac-overlay-grid {
  overflow-y: auto;
  flex: 1;
}
.settings-content {
  overflow-y: auto;
  flex: 1;
}
.privacy-content {
  overflow-y: auto;
  flex: 1;
}

/* ══ BIGGER MODAL BOXES ══ */
.modal-box.wide { min-width: min(700px, 95vw); }
.modal-box.map-modal { min-width: min(760px, 96vw); max-height: 88vh; overflow-y: auto; }

/* ══ ACHIEVEMENT GRID 3-COL ON WIDE ══ */
@media (min-width: 900px) {
  #achievements-grid { grid-template-columns: 1fr 1fr 1fr; }
}

/* ══ SKIP BUTTON IMPROVED ══ */
.skip-btn {
  background: linear-gradient(135deg, #2a1a00 0%, #1e1200 100%);
  color: var(--orange);
  border: 1px solid #8a5a00;
  padding: 7px 14px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background .12s, color .12s, border-color .12s, transform .1s, box-shadow .12s;
  white-space: nowrap;
  box-shadow: inset 0 1px 0 #ff994422;
}
.skip-btn:not(:disabled):hover {
  background: linear-gradient(135deg, #3a2a00 0%, #2a1e00 100%);
  border-color: var(--orange);
  box-shadow: 0 3px 10px #ff994433;
  transform: translateY(-1px);
}
.skip-btn:disabled { opacity: .35; cursor: not-allowed; transform: none; }

/* ══ UPGRADE PATH TIER ROWS ══ */
.upg-path { margin-top: 5px; }
.upg-path + .upg-path { margin-top: 8px; border-top: 1px solid var(--border); padding-top: 8px; }
.upg-path-header { display: flex; align-items: center; gap: 6px; margin-bottom: 5px; }
.upg-path-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; }

/* Game canvas fills available space */
#game-screen { flex-direction: column; justify-content: flex-start; align-items: stretch; }
#game-area { flex: 1; display: flex; overflow: hidden; min-height: 0; }
#game-canvas { display: block; flex: 1; min-width: 0; min-height: 0; }

/* ══ SKILL TREE VFX ══ */
@keyframes stBurst {
  0%   { transform: scale(0.8); opacity: 1; }
  100% { transform: scale(2.2); opacity: 0; }
}
@keyframes stSpark {
  0%   { transform: translate(-50%,-50%) translate(0,0) scale(1); opacity: 1; }
  100% { transform: translate(-50%,-50%) translate(var(--tx),var(--ty)) scale(0); opacity: 0; }
}
/* Node unlock flash */
.st-node.just-unlocked {
  animation: nodeFlash .4s ease-out;
}
@keyframes nodeFlash {
  0%   { box-shadow: 0 0 0 0 rgba(74,158,255,0.8); }
  50%  { box-shadow: 0 0 30px 15px rgba(74,158,255,0.4); }
  100% { box-shadow: 0 0 12px 0 rgba(74,158,255,0.2); }
}
.st-node.just-maxed {
  animation: nodeMaxFlash .6s ease-out;
}
@keyframes nodeMaxFlash {
  0%   { box-shadow: 0 0 0 0 rgba(255,215,0,0.9); }
  40%  { box-shadow: 0 0 40px 20px rgba(255,215,0,0.5); }
  100% { box-shadow: 0 0 14px 0 rgba(255,215,0,0.3); }
}

/* ══ SHOP ══ */
.menu-btn-shop {
  background: linear-gradient(135deg, #2a1e00 0%, #1a1200 100%);
  color: var(--gold);
  border: 1px solid #ffd70066;
  box-shadow: 0 4px 20px #ffd70022;
}
.menu-btn-shop:hover {
  background: linear-gradient(135deg, #3a2a00 0%, #2a1e00 100%);
  box-shadow: 0 6px 28px #ffd70044;
}
.shop-coins-badge {
  display: flex; align-items: center; gap: 6px;
  background: #1e1600; border: 1px solid #ffd70033;
  border-radius: 20px; padding: 6px 14px;
  font-size: 14px; font-weight: 700;
}
#shop-content, #shop-overlay-content {
  overflow-y: auto; flex: 1; padding: 16px;
}
.shop-section { margin-bottom: 20px; }
.shop-section-title {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 1.5px; margin-bottom: 10px;
  padding-bottom: 6px; border-bottom: 1px solid var(--border);
}
.shop-item {
  display: flex; align-items: center; gap: 12px;
  background: var(--bg3); border: 1px solid var(--border);
  border-radius: 10px; padding: 12px 14px; margin-bottom: 8px;
  transition: border-color .15s;
}
.shop-item:hover { border-color: var(--border2); }
.shop-item.owned { opacity: 0.5; }
.shop-item-icon { font-size: 24px; flex-shrink: 0; width: 36px; text-align: center; }
.shop-item-info { flex: 1; min-width: 0; }
.shop-item-name { font-weight: 700; font-size: 13px; margin-bottom: 3px; }
.shop-item-desc { font-size: 11px; color: var(--muted2); line-height: 1.4; }
.shop-buy-btn {
  background: linear-gradient(135deg, #1e1600, #140e00);
  color: var(--gold); border: 1px solid #ffd70066;
  border-radius: 8px; padding: 8px 14px;
  font-size: 12px; font-weight: 600; font-family: inherit;
  cursor: pointer; white-space: nowrap; flex-shrink: 0;
  transition: background .12s, transform .1s, box-shadow .12s;
}
.shop-buy-btn:hover:not(.disabled) {
  background: linear-gradient(135deg, #2a1e00, #1e1400);
  box-shadow: 0 3px 10px #ffd70033; transform: translateY(-1px);
}
.shop-buy-btn.disabled { opacity: 0.4; cursor: not-allowed; }

/* ══ TARGETING SYSTEM ══ */
.targeting-row {
  display: flex; gap: 3px; flex-wrap: wrap;
  margin-bottom: 8px; margin-top: 2px;
}
.target-btn {
  flex: 1; min-width: 0;
  background: var(--bg3); border: 1px solid var(--border);
  color: var(--muted2); border-radius: 5px;
  padding: 4px 2px; font-size: 9px; font-weight: 600;
  font-family: inherit; cursor: pointer;
  transition: background .1s, color .1s, border-color .1s;
  white-space: nowrap;
}
.target-btn:hover { border-color: var(--border2); color: var(--text); }
.target-btn.active {
  background: var(--blue-dim); border-color: var(--blue);
  color: var(--blue);
}

/* ══ TOWER LIMIT BAR ══ */
.tower-limit-bar {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 10px 6px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.tower-limit-label {
  font-size: 9px; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: 1px; flex-shrink: 0;
}
.tower-limit-track {
  flex: 1; height: 6px; background: var(--bg3);
  border-radius: 3px; overflow: hidden;
  border: 1px solid var(--border);
}
.tower-limit-fill {
  height: 100%; border-radius: 3px;
  background: linear-gradient(90deg, #4a9eff, #aa88ff);
  transition: width .3s ease, background .3s;
}
.tower-limit-fill.near-full { background: linear-gradient(90deg, #ff9944, #ff4455); }
.tower-limit-fill.full { background: #ff4455; }
.tower-limit-count {
  font-size: 11px; font-weight: 700; color: var(--text);
  flex-shrink: 0; min-width: 32px; text-align: right;
}

/* Skill tree required popup */
@keyframes stReqPop {
  from { opacity:0; transform:translateY(-8px) scale(0.95); }
  to   { opacity:1; transform:translateY(0) scale(1); }
}