* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #14171c; color: #e6e6e6;
  font: 14px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
button { font: inherit; cursor: pointer; border: 1px solid #3a4150; background: #262b35;
  color: #e6e6e6; border-radius: 6px; padding: 6px 10px; }
button:hover:not(:disabled) { background: #323848; }
button:disabled { opacity: .45; cursor: not-allowed; }
button.primary { background: #2f6fdb; border-color: #3b7ff0; font-weight: 600; width: 100%; padding: 10px; }
button.primary:hover:not(:disabled) { background: #3b7ff0; }
button.active { background: #2f6fdb; border-color: #3b7ff0; }
button.danger { background: #7a2b2b; border-color: #a33; }
button.danger:hover { background: #963636; }
.muted { color: #9aa3b2; }
.small { font-size: 12px; }
h3 { margin: 0 0 8px; font-size: 15px; }

#app { display: flex; flex-direction: column; height: 100%; }
#topbar { display: flex; align-items: center; gap: 18px; padding: 8px 14px; background: #1c2029;
  border-bottom: 1px solid #2b3140; }
#topbar .stat { font-size: 16px; display: flex; align-items: center; gap: 6px; }
#topbar .stat b { font-variant-numeric: tabular-nums; }
#topbar .spacer { flex: 1; }
#topbar .controls { display: flex; gap: 6px; }

main { flex: 1; display: flex; gap: 12px; padding: 12px; min-height: 0; }
#board { flex: 1; display: flex; align-items: flex-start; justify-content: center; min-width: 0; }
canvas { max-width: 100%; height: auto; background: #3b6d2a; border-radius: 8px;
  box-shadow: 0 0 0 1px #2b3140, 0 10px 30px rgba(0,0,0,.4); display: block; touch-action: none; }

#panel { width: 320px; flex: none; display: flex; flex-direction: column; gap: 10px; overflow-y: auto; }
.card { background: #1c2029; border: 1px solid #2b3140; border-radius: 8px; padding: 12px; }

#shop-list { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.shop-item { display: flex; flex-direction: column; gap: 2px; padding: 8px; border-radius: 6px;
  border: 1px solid #2b3140; background: #22272f; cursor: pointer; user-select: none; }
.shop-item:hover { border-color: #4a5468; }
.shop-item.active { border-color: #3b7ff0; background: #263553; }
.shop-item.poor { opacity: .5; }
.shop-item .name { font-weight: 600; }
.shop-item .cost { color: #f4c542; font-size: 13px; }
.shop-item .desc { font-size: 11px; color: #9aa3b2; }

#selected .stats { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 10px; font-size: 13px; margin: 6px 0 10px; }
#selected .stats span { color: #9aa3b2; }
.upgrades { display: flex; flex-direction: column; gap: 5px; }
.upg { display: flex; align-items: center; gap: 8px; padding: 6px 8px; text-align: left; }
.upg .lvl { color: #9aa3b2; font-size: 12px; min-width: 32px; }
.upg .nm { flex: 1; }
.upg .cost { color: #f4c542; }
.upg.max .cost { color: #6fcf97; }
.row { display: flex; gap: 6px; margin-top: 8px; }
.row button { flex: 1; }
.targeting { display: flex; gap: 4px; margin-top: 8px; }
.targeting button { flex: 1; font-size: 12px; padding: 4px; }

#overlay[hidden] { display: none; }
#overlay { position: fixed; inset: 0; background: rgba(0,0,0,.7); display: flex; align-items: center;
  justify-content: center; z-index: 10; }
.modal { background: #1c2029; border: 1px solid #3a4150; border-radius: 12px; padding: 28px 32px;
  text-align: center; max-width: 420px; }
.modal h2 { margin: 0 0 10px; }

@media (max-width: 1000px) {
  main { flex-direction: column; }
  #panel { width: 100%; }
}