/* style.css — Monkey Mayhem TD */
:root{
  --bg:#15110d;
  --bg2:#1f1812;
  --panel:#2a2018;
  --panel2:#362a1e;
  --panel3:#423424;
  --border:#4a3a28;
  --border2:#5e4a34;
  --text:#f5ead8;
  --muted:#b8a888;
  --muted2:#8a7a60;
  --accent:#fbbf24;
  --accent2:#f97316;
  --accent3:#dc2626;
  --green:#22c55e;
  --red:#ef4444;
  --blue:#38bdf8;
  --purple:#8b5cf6;
  --teal:#16a3a3;
  --radius:12px;
  --radius-sm:8px;
  --shadow:0 4px 16px rgba(0,0,0,.4);
  --shadow-lg:0 12px 40px rgba(0,0,0,.5);
  color-scheme: dark;
}
html[data-theme="light"]{
  --bg:#f0e6d2;
  --bg2:#e6dac0;
  --panel:#fff8ec;
  --panel2:#f4e8d0;
  --panel3:#e8dcc0;
  --border:#d4c4a4;
  --border2:#c4b490;
  --text:#3a2a18;
  --muted:#7a6a4e;
  --muted2:#9a8a6a;
  --shadow:0 4px 16px rgba(0,0,0,.12);
  --shadow-lg:0 12px 40px rgba(0,0,0,.18);
  color-scheme: light;
}
@media (prefers-color-scheme: light){
  html:not([data-theme="dark"]):not([data-theme="light"]){
    --bg:#f0e6d2; --bg2:#e6dac0; --panel:#fff8ec; --panel2:#f4e8d0; --panel3:#e8dcc0;
    --border:#d4c4a4; --border2:#c4b490; --text:#3a2a18; --muted:#7a6a4e; --muted2:#9a8a6a;
    --shadow:0 4px 16px rgba(0,0,0,.12); --shadow-lg:0 12px 40px rgba(0,0,0,.18);
    color-scheme: light;
  }
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;height:100%;overflow:hidden;}
body{
  font-family:'Trebuchet MS','Segoe UI',-apple-system,BlinkMacSystemFont,Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg); color:var(--text);
  touch-action:manipulation;
  -webkit-user-select:none; user-select:none;
  -webkit-font-smoothing:antialiased;
}
#app{display:flex;flex-direction:column;height:100%;height:100dvh;}

/* HUD */
#hud{
  display:flex; justify-content:space-between; align-items:center;
  gap:10px; padding:10px 16px;
  background:linear-gradient(180deg,var(--bg2) 0%,var(--bg) 100%);
  border-bottom:2px solid var(--border);
  flex-wrap:wrap; position:relative; z-index:5;
}
#hud::after{
  content:''; position:absolute; bottom:-2px; left:0; right:0; height:2px;
  background:linear-gradient(90deg,transparent,var(--accent),transparent);
  opacity:.3;
}
.hud-brand{
  display:flex; align-items:center; gap:8px;
  font-weight:800; font-size:15px; letter-spacing:.02em;
  white-space:nowrap;
}
.brand-mark{
  width:28px; height:28px; border-radius:8px;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  box-shadow:0 2px 8px rgba(251,191,36,.3);
  position:relative; flex-shrink:0;
}
.brand-mark::after{
  content:''; position:absolute; inset:6px;
  background:var(--bg); border-radius:4px;
}
.brand-mark::before{
  content:''; position:absolute; inset:9px;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  border-radius:2px;
}
.brand-text{display:flex;align-items:baseline;gap:4px;}
.brand-sub{
  font-size:10px; color:var(--accent); letter-spacing:.15em;
  background:var(--panel); padding:2px 6px; border-radius:4px;
  border:1px solid var(--border);
}
.hud-group{display:flex; gap:8px; align-items:center; flex-wrap:wrap;}
.stat{
  display:flex; align-items:center; gap:6px;
  background:var(--panel); border:1px solid var(--border);
  padding:6px 12px; border-radius:var(--radius-sm); font-weight:800; font-size:14px;
  transition:transform .15s, box-shadow .15s, border-color .15s;
  box-shadow:0 1px 3px rgba(0,0,0,.2);
}
.stat .ico{width:20px;height:20px;display:inline-block;background-size:contain;background-repeat:no-repeat;background-position:center;}
.stat .lbl{font-size:9px;color:var(--muted2);letter-spacing:.1em;text-transform:uppercase;font-weight:800;}
.stat b{font-size:16px; line-height:1;}
.stat.flash{animation:flash .4s;}
@keyframes flash{0%,100%{transform:scale(1);}50%{transform:scale(1.12);box-shadow:0 0 16px var(--red);border-color:var(--red);}}
.hide-sm{display:none;}
@media(min-width:600px){.hide-sm{display:flex;}}

.hud-powers{display:flex;gap:6px;}
.power-btn{
  position:relative; display:flex; flex-direction:column; align-items:center;
  background:var(--panel); border:1px solid var(--border); color:var(--text);
  padding:5px 10px; border-radius:var(--radius-sm); cursor:pointer; font-family:inherit;
  font-weight:800; font-size:10px; min-width:60px; transition:all .15s;
  box-shadow:0 1px 3px rgba(0,0,0,.2);
}
.power-btn:hover:not(.disabled){border-color:var(--accent);transform:translateY(-2px);box-shadow:0 4px 12px rgba(251,191,36,.2);}
.power-btn:active:not(.disabled){transform:translateY(0);}
.power-btn.disabled{opacity:.4;cursor:not-allowed;}
.power-btn .pw-name{white-space:nowrap;}
.power-btn .pw-cost{color:var(--accent);font-size:9px;}
.power-btn .cd{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.65);border-radius:var(--radius-sm);font-size:13px;color:var(--accent);font-weight:800;}
.power-btn .cd:empty{display:none;}

/* Stage */
#stage{flex:1; position:relative; overflow:hidden; background:#3a5a2a;}
#game{display:block; width:100%; height:100%; cursor:crosshair; touch-action:none;}

/* Wave progress bar */
#wave-progress{
  position:absolute; top:0; left:0; right:0; height:3px;
  background:rgba(0,0,0,.3); z-index:3;
}
#wave-progress.hidden{display:none;}
#wave-progress-fill{
  height:100%; width:0%;
  background:linear-gradient(90deg,var(--accent),var(--accent2));
  transition:width .3s ease;
  box-shadow:0 0 8px rgba(251,191,36,.5);
}

/* Overlay */
#overlay{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background:rgba(10,6,2,.8); backdrop-filter:blur(6px); z-index:10;
  animation:fadeIn .3s ease;
}
@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}
#overlay.hidden{display:none;}
.panel{
  background:linear-gradient(180deg,var(--panel2),var(--panel));
  border:2px solid var(--border2); border-radius:20px;
  padding:36px 44px; text-align:center; max-width:90%;
  box-shadow:var(--shadow-lg);
  animation:panelIn .4s cubic-bezier(.22,1,.36,1);
}
@keyframes panelIn{from{opacity:0;transform:scale(.9) translateY(10px);}to{opacity:1;transform:scale(1) translateY(0);}}
.panel-badge{
  display:inline-block; font-size:11px; font-weight:800; letter-spacing:.1em;
  text-transform:uppercase; color:var(--accent);
  background:rgba(251,191,36,.12); border:1px solid rgba(251,191,36,.3);
  padding:4px 14px; border-radius:20px; margin-bottom:12px;
}
.panel h2{font-size:32px;margin:0 0 6px;color:var(--accent);letter-spacing:.01em;font-weight:800;}
.panel.win h2{color:var(--green);}
.panel.win .panel-badge{color:var(--green);background:rgba(34,197,94,.12);border-color:rgba(34,197,94,.3);}
.panel.lose h2{color:var(--red);}
.panel.lose .panel-badge{color:var(--red);background:rgba(239,68,68,.12);border-color:rgba(239,68,68,.3);}
.panel .big{font-size:18px;font-weight:700;margin:8px 0;}
.panel .big b{color:var(--accent);}
.panel .sub{color:var(--muted);margin:4px 0 20px;font-size:14px;}
.big-btn{
  font-size:18px; font-weight:800;
  background:linear-gradient(180deg,var(--accent),var(--accent2));
  color:#3a1a00; border:none; padding:14px 40px; border-radius:var(--radius); cursor:pointer;
  box-shadow:0 5px 0 #b45309, 0 8px 20px rgba(251,191,36,.3);
  transition:transform .1s, box-shadow .1s; letter-spacing:.02em;
  font-family:inherit;
}
.big-btn:hover{transform:translateY(-2px);box-shadow:0 7px 0 #b45309, 0 10px 24px rgba(251,191,36,.4);}
.big-btn:active{transform:translateY(3px);box-shadow:0 2px 0 #b45309, 0 4px 12px rgba(251,191,36,.2);}

/* Dock */
#dock{
  background:linear-gradient(0deg,var(--bg2),var(--bg));
  border-top:2px solid var(--border);
  padding:8px 12px 12px;
  display:flex; flex-direction:column; gap:8px;
  position:relative; z-index:5;
}
#dock::before{
  content:''; position:absolute; top:-2px; left:0; right:0; height:2px;
  background:linear-gradient(90deg,transparent,var(--accent),transparent);
  opacity:.2;
}
.dock-row{display:flex;align-items:center;gap:10px;}
.dock-label{
  font-size:9px;letter-spacing:.14em;color:var(--muted2);font-weight:800;
  text-transform:uppercase; white-space:nowrap; writing-mode:vertical-lr;
  transform:rotate(180deg); padding:4px 0;
}
#tower-bar{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 4px;flex:1;}
#tower-bar::-webkit-scrollbar{height:4px;}
#tower-bar::-webkit-scrollbar-track{background:transparent;}
#tower-bar::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px;}
.tower-btn{
  display:flex; flex-direction:column; align-items:center; gap:3px;
  background:var(--panel); border:2px solid var(--border); color:var(--text);
  padding:7px 12px; border-radius:var(--radius); cursor:pointer; font-family:inherit;
  font-weight:800; min-width:72px; flex-shrink:0; transition:all .15s;
  box-shadow:0 1px 3px rgba(0,0,0,.2);
}
.tower-btn:hover:not(.disabled){border-color:var(--accent);transform:translateY(-3px);box-shadow:0 6px 16px rgba(251,191,36,.15);}
.tower-btn:active:not(.disabled){transform:translateY(-1px);}
.tower-btn.active{
  border-color:var(--accent);background:var(--panel2);
  box-shadow:0 0 0 2px var(--accent), 0 4px 16px rgba(251,191,36,.25);
  transform:translateY(-2px);
}
.tower-btn.disabled{opacity:.4;}
.tb-icon{
  width:28px;height:28px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:14px; position:relative;
  box-shadow:inset 0 -3px 6px rgba(0,0,0,.2), inset 0 2px 4px rgba(255,255,255,.2);
}
.tb-icon.audio-on::after{content:'♪';font-size:16px;color:var(--text);}
.tb-icon.audio-off::after{content:'×';font-size:18px;color:var(--muted);}
.audio-btn .tb-icon{background:var(--panel2)!important;}
.tb-name{font-size:10px;white-space:nowrap;letter-spacing:.01em;}
.tb-cost{font-size:11px;color:var(--accent);font-weight:800;}

/* Tower info */
#tower-info{
  background:var(--panel2); border:2px solid var(--accent); border-radius:var(--radius);
  padding:10px 14px; display:flex; flex-direction:column; gap:6px;
  box-shadow:0 0 0 1px rgba(251,191,36,.2), 0 4px 16px rgba(0,0,0,.3);
  animation:slideUp .25s ease;
}
@keyframes slideUp{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:translateY(0);}}
#tower-info.hidden{display:none;}
.ti-head{display:flex;align-items:center;gap:8px;font-weight:800;font-size:14px;}
.ti-dot{width:12px;height:12px;border-radius:50%;box-shadow:0 0 8px currentColor;}
.ti-lvl{color:var(--accent);font-size:11px;margin-left:auto;background:rgba(251,191,36,.12);padding:2px 8px;border-radius:10px;}
.ti-desc{font-size:11px;color:var(--muted);line-height:1.4;}
.ti-stats{display:flex;gap:12px;font-size:11px;color:var(--muted2);font-weight:700;}
.ti-stats span{background:var(--panel);padding:3px 8px;border-radius:6px;border:1px solid var(--border);}
.ti-actions{display:flex;gap:6px;flex-wrap:wrap;}
.ti-btn{
  background:var(--panel); border:1px solid var(--border); color:var(--text);
  padding:7px 14px; border-radius:var(--radius-sm); cursor:pointer; font-family:inherit;
  font-weight:800; font-size:12px; transition:all .15s;
}
.ti-btn:hover:not(.disabled){border-color:var(--accent);background:var(--panel2);}
.ti-btn:active:not(.disabled){transform:scale(.96);}
.ti-btn.disabled{opacity:.5;cursor:not-allowed;}
.ti-btn.sell{color:var(--red);}
.ti-btn.sell:hover:not(.disabled){border-color:var(--red);}
.ti-btn.close{color:var(--muted);}

@media(max-width:520px){
  #hud{padding:8px 10px;gap:6px;}
  .hud-brand{font-size:13px;}
  .brand-mark{width:24px;height:24px;}
  .stat{padding:5px 8px;font-size:12px;gap:4px;}
  .stat b{font-size:14px;}
  .stat .lbl{font-size:8px;}
  .power-btn{min-width:48px;padding:4px 6px;font-size:9px;}
  .power-btn .pw-name{font-size:9px;}
  .power-btn .pw-cost{font-size:8px;}
  #dock{padding:6px 8px 10px;}
  .dock-label{display:none;}
  .tower-btn{min-width:60px;padding:5px 8px;}
  .tb-icon{width:24px;height:24px;}
  .panel{padding:28px 28px;}
  .panel h2{font-size:26px;}
  .big-btn{font-size:16px;padding:12px 30px;}
}
@media(max-width:380px){
  .hud-brand{display:none;}
}