/* v47.78.288.619: cache-buster.
   The v618 deploy briefly served this stylesheet as the SPA fallback (text/html)
   before propagating, so any browser that loaded in that window cached a
   text/html response for the old hashed filename and renders the site UNSTYLED
   until that entry expires — reproduced in a real browser, three loads running.
   Content-hashed filenames only defeat caches when the content changes, so this
   comment changes it. Bump the version if it ever happens again. */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* v47.78.288.547: iOS Safari auto-zooms the page when a focused input's
   font-size is under 16px — and leaves it zoomed afterwards. On touch
   devices force all form fields to 16px so the zoom never triggers
   (belt-and-braces with the viewport maximum-scale=1 in index.html). */
@media (pointer: coarse) {
  input, select, textarea { font-size: 16px !important; }
}

:root {
  --bg-void: #05070d;
  --bg-deep: #0a0e1a;
  --bg-card: #0f1423;
  --bg-panel: #111827;
  --bg-raised: #161d2e;
  --bg-hover: #1c2540;

  --border-dim: #1e2a42;
  --border-glow: #2d4070;
  --border-active: #4a7aff;

  --text-primary: #e8e4d9;
  --text-secondary: #8a9ab5;
  --text-muted: #4a5568;
  --text-accent: #c8a84b;

  --gold: #c8a84b;
  --gold-bright: #f0cc60;
  --gold-dim: #6b5420;

  /* v47.78.288.147: Chainbreaker brand orange — matches the wordmark
     and binder art. Use for prominent brand-tinted accents like the
     IMPORT DECK action in the deckbuilder. */
  --brand-orange: #e8801f;
  --brand-orange-bright: #ff9a36;

  --blue-rune: #4a9eff;
  --blue-dim: #1a3a6b;

  --red: #e05252;
  --red-dim: #5a1e1e;

  --green: #52c07a;
  --green-dim: #1a4a2e;

  --fury: #e05252;
  --calm: #4a9eff;
  --mind: #a855f7;
  --body: #52c07a;
  --chaos: #f97316;
  --order: #eab308;

  --p1-color: #4a9eff;
  --p1-dim: #1a3a6b;
  --p2-color: #e05252;
  --p2-dim: #5a1e1e;

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-card: 10px;

  --shadow-card: 0 4px 20px rgba(0,0,0,0.6);
  --shadow-glow-blue: 0 0 20px rgba(74,154,255,0.3);
  --shadow-glow-gold: 0 0 20px rgba(200,168,75,0.3);
  --shadow-glow-red: 0 0 20px rgba(224,82,82,0.3);

  --font-display: 'Cinzel', serif;
  --font-body: 'Crimson Pro', serif;
  --font-mono: 'JetBrains Mono', monospace;
}

html, body {
  height: 100%;
  width: 100%;
  overflow: hidden;
  background: var(--bg-void);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 16px;
}

#root {
  height: 100%;
  width: 100%;
  /* Intentionally no background — lets the GlobalBackground component
     (a fixed-position element with z-index: -1, mounted in main.tsx)
     show through. The body underneath is still var(--bg-void). */
}

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg-deep); }
::-webkit-scrollbar-thumb { background: var(--border-glow); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--border-active); }

button {
  cursor: pointer;
  font-family: var(--font-display);
  border: none;
  outline: none;
}

button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}