/* base.css — design tokens, reset, page layout */
:root {
  --ink-0: #0a0e1f;          /* deepest background */
  --ink-1: #121736;
  --ink-2: #1b2350;
  --ink-3: #283166;
  --gold: #e9c46a;
  --gold-bright: #ffd97a;
  --parch: #efe6d0;
  --muted: #9aa3c7;
  --good: #6fdc8c;
  --bad: #ff6b6b;
  --amber: #f4a83a;
  --amethyst: #9b6dd6;
  --emerald: #46c08a;
  --ruby: #e8556b;
  --sapphire: #4aa3e8;
  --steel: #9fb0c3;
  --card-radius: 10px;
  --shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
  font-size: 15px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'Spectral', Georgia, serif;
  color: var(--parch);
  background:
    radial-gradient(1200px 700px at 50% -10%, #20275c 0%, transparent 60%),
    radial-gradient(900px 600px at 90% 110%, #2a1745 0%, transparent 55%),
    linear-gradient(160deg, var(--ink-0), var(--ink-1));
  min-height: 100vh;
  overflow: hidden;
}

h1, h2, h3, .turn-banner, .name, .end-turn, .primary-btn {
  font-family: 'Cinzel', serif;
  letter-spacing: 0.02em;
}

#layout {
  display: grid;
  grid-template-columns: 1fr 300px;
  height: 100vh;
  gap: 0;
}

#board {
  display: grid;
  /* opponent field | centre | player field | hand — the two fields share
     equal space; the hand has its own row so it doesn't steal from your side. */
  grid-template-rows: 1fr auto 1fr auto;
  padding: 10px 16px;
  min-width: 0;
  overflow: hidden;
}
#board.locked { /* visually subtle; interactions are gated in JS */ }

/* Scrollbars */
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb { background: var(--ink-3); border-radius: 6px; }
::-webkit-scrollbar-track { background: transparent; }

button { cursor: pointer; font-family: inherit; }
button:disabled { cursor: not-allowed; opacity: 0.4; }