:root {
  --ink: #1e1a1a;
  --parchment: #f2ead3;
  --parchment-2: #e8e2d0;
  --stone: #cfcac0;
  --moss: #8c8c6a;
  --gold: #f2d27a;
  --blood: #a33b2b;
  --panel: #2a2522;
  --panel-2: #36302b;
  --line: #4a423b;
  --strong: #6fae5a;
  --normal: #c9b77a;
  --weak: #c0614d;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--ink);
  color: var(--parchment);
  font: 14px/1.4 Georgia, "Iowan Old Style", "Palatino Linotype", serif;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
button, select {
  font: inherit;
  color: var(--parchment);
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 6px 10px;
  cursor: pointer;
}
button:hover:not(:disabled) { border-color: var(--gold); }
button:disabled { opacity: 0.45; cursor: not-allowed; }
button.on { background: var(--gold); color: var(--ink); border-color: var(--gold); }
button.danger:hover:not(:disabled) { border-color: var(--weak); }
kbd { font: 12px ui-monospace, monospace; border: 1px solid var(--line); border-radius: 3px; padding: 0 4px; }
code { font: 12px ui-monospace, monospace; color: var(--stone); }

.hud {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 20px;
  padding: 8px 16px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
}
.title { font-size: 18px; color: var(--gold); letter-spacing: 0.02em; }
.title span { color: var(--stone); font-size: 14px; }
.stats { display: flex; gap: 16px; align-items: center; font-variant-numeric: tabular-nums; }
.stat { display: inline-flex; align-items: center; gap: 6px; font-size: 16px; }
.stat.phase { color: var(--stone); font-size: 14px; min-width: 14ch; }
.ico { display: inline-block; width: 14px; height: 14px; border-radius: 50%; }
.ico.gold { background: radial-gradient(circle at 35% 35%, #fff3c4, var(--gold) 55%, #9a7a26); }
.ico.lives { background: var(--blood); clip-path: polygon(50% 100%, 0 35%, 15% 5%, 50% 25%, 85% 5%, 100% 35%); border-radius: 0; }
.controls { display: flex; gap: 8px; align-items: center; margin-left: auto; flex-wrap: wrap; }
.speed { display: inline-flex; }
.speed button { border-radius: 0; margin-left: -1px; }
.speed button:first-child { border-radius: 6px 0 0 6px; }
.speed button:last-child { border-radius: 0 6px 6px 0; }

main { flex: 1; display: flex; min-height: 0; }
#stage { position: relative; flex: 1; min-width: 0; }
#map { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
#paused-banner {
  position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
  background: rgba(30, 26, 26, 0.85); border: 1px solid var(--gold); color: var(--gold);
  padding: 6px 14px; border-radius: 6px; pointer-events: none;
}
#toasts {
  position: absolute; bottom: 12px; left: 12px; display: flex; flex-direction: column; gap: 6px;
  pointer-events: none; max-width: min(420px, 80%);
}
.toast {
  background: rgba(30, 26, 26, 0.9); border-left: 3px solid var(--weak); padding: 6px 10px; border-radius: 4px;
  animation: fade 3.2s forwards;
}
.toast.good { border-left-color: var(--gold); }
@keyframes fade { 0%, 75% { opacity: 1; } 100% { opacity: 0; } }

.side {
  width: 300px; flex: none; overflow-y: auto; background: var(--panel); border-left: 1px solid var(--line);
  padding: 4px 14px 14px;
}
.side h2 { font-size: 15px; color: var(--gold); margin: 14px 0 8px; font-weight: normal; letter-spacing: 0.03em; }
.side section + section { border-top: 1px solid var(--line); }
.hint { color: var(--moss); font-size: 12px; margin: 6px 0 0; }
.card {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 8px; touch-action: none;
}
.card.on { border-color: var(--gold); background: #3f372f; }
.card-body { display: flex; flex-direction: column; flex: 1; }
.card-body small { color: var(--stone); font-size: 12px; }
.cost { color: var(--gold); font-variant-numeric: tabular-nums; }
.tower-ico {
  width: 28px; height: 34px; flex: none;
  background: linear-gradient(90deg, #8a8070 50%, #6d6457 50%);
  clip-path: polygon(50% 0, 100% 18%, 100% 82%, 50% 100%, 0 82%, 0 18%);
}
.kv { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; margin: 0 0 8px; }
.kv dt { color: var(--moss); }
.kv dd { margin: 0; font-variant-numeric: tabular-nums; }
.row { display: flex; gap: 8px; align-items: center; margin-top: 8px; }
.row select { flex: 1; }
.buttons button { flex: 1; }
.telegraph { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; }
.telegraph li { display: flex; align-items: center; gap: 8px; }
.telegraph .dot { width: 12px; height: 12px; border-radius: 50%; flex: none; }
.telegraph .count { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--stone); }
.legend i, .telegraph i { font-style: normal; font-size: 11px; padding: 0 5px; border-radius: 3px; color: var(--ink); }
.strong { background: var(--strong); }
.normal { background: var(--normal); }
.weak { background: var(--weak); }
.meta p { margin: 10px 0 0; color: var(--stone); font-size: 12px; }

.overlay {
  position: fixed; inset: 0; background: rgba(15, 12, 12, 0.7); display: grid; place-items: center; z-index: 10;
}
.overlay[hidden], #selected[hidden], #paused-banner[hidden] { display: none; }
.panel {
  background: var(--panel); border: 1px solid var(--gold); border-radius: 10px; padding: 20px 28px;
  min-width: min(360px, calc(100vw - 32px)); text-align: center;
}
.panel h2 { color: var(--gold); margin: 0 0 6px; font-weight: normal; font-size: 26px; }
.stars { font-size: 34px; color: var(--gold); margin: 0; letter-spacing: 0.1em; }

@media (max-width: 760px) {
  body { overflow: auto; }
  main { flex-direction: column; }
  #stage { min-height: 60vh; }
  .side { width: auto; border-left: 0; border-top: 1px solid var(--line); }
  .controls { margin-left: 0; }
}