:root{--bg:#0f1226;--panel:#121736;--ink:#e9f1ff;--accent:#7cffb2;--warn:#ffb86b;--danger:#ff6b6b}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;margin:0;background:var(--bg);color:var(--ink);font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}
body{display:flex;flex-direction:column;align-items:center;gap:12px;padding:14px}
header{font-weight:900;letter-spacing:.3px;text-align:center}
#wrap{display:grid;gap:12px;place-items:center;width:min(96vw,1100px)}
canvas{width:100%;height:clamp(300px,58vh,620px);background:linear-gradient(#1a1f3d,#12142a);border-radius:14px;outline:2px solid #2a2f5a}
#hud{width:100%;display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between}
.badge{padding:10px 14px;border-radius:999px;background:#1e2347;font-weight:800;font-variant-numeric:tabular-nums}
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
button{padding:10px 14px;border-radius:12px;border:none;background:var(--accent);color:#04120b;font-weight:900;cursor:pointer;transition:transform .06s ease,filter .15s ease}
button:hover{transform:translateY(-1px)}
button:active{transform:translateY(0)}
button[disabled]{opacity:.5;cursor:not-allowed}
.shop{display:flex;gap:8px}
.card{background:var(--panel);border:2px solid #2a2f5a;border-radius:14px;padding:10px 12px;box-shadow:0 6px 20px rgba(0,0,0,.25)}
.hint{opacity:.9}
.pill{padding:6px 10px;border-radius:999px;background:#1e2347}
.towerBtn{display:flex;align-items:center;gap:8px}
.towerSwatch{width:18px;height:18px;border-radius:6px;outline:2px solid #2a2f5a}
.overlay{position:fixed;inset:0;display:none;place-items:center;background:rgba(10,12,24,.65)}
.overlay.show{display:grid}

/* Utility colors via data-attrs if you want to theme buttons */
button#sell{background:var(--warn);color:#21120a}
button#upgrade{background:var(--danger);color:#210808}

/* Focus visibility for keyboard users */
:focus-visible{outline:3px solid #9ae6b4;outline-offset:2px;border-radius:12px}

canvas#game { cursor: crosshair; }

/* Small screens */
@media (max-width:600px){
  header{font-size:1rem}
  .badge{padding:8px 10px}
  button{padding:9px 12px}
}