/* style.css — Autowarden */
* { box-sizing: border-box; }
html, body {
  margin:0; padding:0; height:100%;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background:#0a0e12; color:#e8edf2;
  -webkit-font-smoothing:antialiased;
  overflow:hidden;
  touch-action: manipulation;
  color-scheme: dark;
}
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="light"] body { background:#c4ccb0; color:#1a1f12; }

#app {
  display:flex; flex-direction:column;
  height:100%; height:100dvh;
  width:100%;
}

/* HUD */
#hud {
  display:flex; align-items:center; gap:14px;
  padding:10px 14px;
  background:linear-gradient(180deg,#141b22,#0e1419);
  border-bottom:1px solid rgba(255,255,255,0.08);
  flex-wrap:wrap;
}
.brand { display:flex; align-items:center; gap:8px; }
.brand .logo { color:#ffb43d; font-size:20px; }
.brand .title { font-weight:800; letter-spacing:2px; font-size:15px; color:#f0c94d; }
.stats { display:flex; gap:8px; flex:1; flex-wrap:wrap; }
.stat {
  display:flex; flex-direction:column;
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:8px;
  padding:5px 12px; min-width:72px;
}
.stat .lbl { font-size:9px; letter-spacing:1.5px; color:#8a98a8; font-weight:700; }
.stat .val { font-size:16px; font-weight:800; font-variant-numeric:tabular-nums; }
#stat-hp .val { color:#7ee881; }
#stat-money .val { color:#f0c94d; }
.actions { display:flex; gap:8px; }

.btn {
  border:1px solid rgba(255,255,255,0.15);
  background:rgba(255,255,255,0.05);
  color:#e8edf2; font-weight:700; letter-spacing:0.5px;
  padding:9px 16px; border-radius:8px; cursor:pointer;
  font-size:13px; transition:transform .08s, background .15s, border-color .15s;
  -webkit-tap-highlight-color:transparent;
}
.btn:hover { background:rgba(255,255,255,0.1); }
.btn:active { transform:translateY(1px); }
.btn:disabled { opacity:0.45; cursor:not-allowed; }
.btn.primary {
  background:linear-gradient(180deg,#ffb43d,#e8932a);
  color:#1a1206; border-color:#f0a020;
}
.btn.primary:hover { background:linear-gradient(180deg,#ffc35a,#f0a020); }
.btn.ghost { background:transparent; padding:9px 11px; }
.btn.small { padding:7px 10px; font-size:12px; }
.btn.danger { border-color:rgba(255,107,107,0.4); color:#ff8a8a; }
.btn.danger:hover { background:rgba(255,107,107,0.12); }

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

.msg {
  position:absolute; top:12px; left:50%; transform:translateX(-50%);
  background:rgba(10,14,18,0.85); border:1px solid rgba(255,180,61,0.4);
  color:#ffd27a; padding:8px 16px; border-radius:20px;
  font-size:13px; font-weight:600; backdrop-filter:blur(6px);
  pointer-events:none; white-space:nowrap; max-width:90vw;
  animation: pop .25s ease;
}
.msg.hidden { display:none; }
@keyframes pop { from{ opacity:0; transform:translate(-50%,-6px);} to{opacity:1;transform:translate(-50%,0);} }

/* Tower panel */
.panel {
  position:absolute; width:220px;
  background:rgba(16,22,28,0.96);
  border:1px solid rgba(255,255,255,0.12);
  border-radius:10px; box-shadow:0 10px 30px rgba(0,0,0,0.5);
  backdrop-filter:blur(8px); z-index:5;
  animation: pop .15s ease;
}
.panel.hidden { display:none; }
.panel-head {
  display:flex; justify-content:space-between; align-items:center;
  padding:9px 12px; border-bottom:1px solid rgba(255,255,255,0.08);
  font-weight:700; font-size:13px; color:#f0c94d;
}
.panel-head .x {
  background:none; border:none; color:#8a98a8; cursor:pointer; font-size:14px;
}
.panel-head .x:hover { color:#fff; }
.panel-body { padding:10px 12px; display:flex; flex-direction:column; gap:6px; }
.panel-body .row { display:flex; justify-content:space-between; font-size:12px; }
.panel-body .row span:first-child { color:#8a98a8; }
.panel-body .row span:last-child { font-weight:600; }
.btns { display:flex; flex-direction:column; gap:6px; margin-top:6px; }
.btns .btn { width:100%; text-align:left; }

/* Build bar */
#buildbar {
  display:flex; align-items:center; gap:12px;
  padding:10px 12px;
  background:linear-gradient(180deg,#0e1419,#0a0e12);
  border-top:1px solid rgba(255,255,255,0.08);
  overflow-x:auto;
}
.hint { font-size:12px; color:#8a98a8; white-space:nowrap; min-width:140px; }
.towers { display:flex; gap:8px; flex:1; }
.towerbtn {
  display:flex; flex-direction:column; align-items:center; gap:2px;
  min-width:74px; padding:8px 10px;
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.1);
  border-radius:10px; cursor:pointer; color:#e8edf2;
  transition:transform .08s, background .15s, border-color .15s;
  -webkit-tap-highlight-color:transparent;
}
.towerbtn:hover { background:rgba(255,255,255,0.08); }
.towerbtn:active { transform:translateY(1px); }
.towerbtn.active {
  border-color:var(--c); background:rgba(255,180,61,0.12);
  box-shadow:0 0 0 2px rgba(255,180,61,0.2) inset;
}
.towerbtn.poor { opacity:0.5; }
.tb-icon {
  font-size:20px; color:var(--c);
  text-shadow:0 0 8px var(--c);
  font-weight:800;
}
.tb-name { font-size:11px; font-weight:700; letter-spacing:0.3px; }
.tb-cost { font-size:10px; color:#f0c94d; font-weight:700; }
.audio { margin-left:auto; }

/* Light theme */
:root[data-theme="light"] #hud { background:linear-gradient(180deg,#e6eccf,#d4dcc0); border-color:rgba(0,0,0,0.12); }
:root[data-theme="light"] .stat { background:rgba(0,0,0,0.05); border-color:rgba(0,0,0,0.1); }
:root[data-theme="light"] .stat .lbl { color:#5a6340; }
:root[data-theme="light"] #buildbar { background:linear-gradient(180deg,#d4dcc0,#c4ccb0); border-color:rgba(0,0,0,0.12); }
:root[data-theme="light"] .towerbtn { background:rgba(0,0,0,0.05); border-color:rgba(0,0,0,0.1); color:#1a1f12; }
:root[data-theme="light"] .btn { background:rgba(0,0,0,0.05); color:#1a1f12; border-color:rgba(0,0,0,0.15); }
:root[data-theme="light"] .panel { background:rgba(230,236,207,0.97); border-color:rgba(0,0,0,0.15); color:#1a1f12; }
:root[data-theme="light"] .panel-head { border-color:rgba(0,0,0,0.1); }
:root[data-theme="light"] .panel-body .row span:first-child { color:#5a6340; }
:root[data-theme="light"] .msg { background:rgba(230,236,207,0.9); color:#7a5a10; border-color:rgba(180,120,20,0.4); }
:root[data-theme="light"] .brand .title { color:#8a5a10; }

/* Responsive */
@media (max-width:560px){
  .brand .title { display:none; }
  .stat { min-width:56px; padding:4px 8px; }
  .stat .val { font-size:14px; }
  .btn { padding:8px 12px; font-size:12px; }
  .hint { display:none; }
  .towerbtn { min-width:60px; padding:6px 8px; }
  .tb-name { font-size:10px; }
}
@media (max-height:480px){
  #hud { padding:6px 10px; }
  #buildbar { padding:6px 8px; }
}