:root {
    --bg: #0a0e1a;
    --surface: #111827;
    --surface2: #1a2236;
    --border: #2a3a5c;
    --accent: #00d4ff;
    --accent2: #7c3aed;
    --gold: #f59e0b;
    --red: #ef4444;
    --green: #22c55e;
    --text: #e2e8f0;
    --text2: #94a3b8;
    --monster: #1a3a1a;
    --spell: #0f2a3a;
    --trap: #2a0f2a;
    --monster-border: #22c55e;
    --spell-border: #0ea5e9;
    --trap-border: #a855f7;
    --zone-bg: rgba(255,255,255,0.04);
    --zone-hover: rgba(0,212,255,0.12);
  }
  * { box-sizing: border-box; margin: 0; padding: 0; }
  body { background: var(--bg); color: var(--text); font-family: 'Segoe UI', sans-serif; height: 100vh; overflow: hidden; display: flex; flex-direction: column; }

/* Utility */
.flex-spacer { flex: 1; }
  .row { display: flex; gap: 4px; align-items: center; }
  ::-webkit-scrollbar { width: 4px; height: 4px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }