:root {
  --bg: #0a0a12;
  --surface: #0d0d1a;
  --card: rgba(0, 0, 0, 0.5);
  --card-solid: #121820;
  --border: #1a3a1a;
  --border-subtle: #1a2a1a;
  --border-light: #2a3a5c;

  --text: #c8c8c8;
  --text-bright: #e0e0e0;
  --text-muted: #888;
  --text-dim: #666;

  --accent: #39ff14;
  --accent-cyan: #00ffff;
  --accent-teal: #00ffcc;
  --accent-blue: #00ccff;
  --accent-magenta: #ff00ff;

  --warn: #ffaa00;
  --warn-dim: #ccaa44;
  --danger: #ff4444;
  --success: #39ff14;
  --info: #00ffff;

  --tag-easy: #39ff14;
  --tag-medium: #ff8800;
  --tag-hard: #ff3344;
  --tag-turn-based: #ffaa00;
  --tag-simultaneous: #ff66aa;
  --tag-one-shot: #00ffff;

  --font-body: "Courier New", monospace;
  --font-mono: "Courier New", monospace;
  --font-ui: "Segoe UI", -apple-system, sans-serif;

  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 16px;
  --space-xl: 24px;
  --space-2xl: 32px;

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-pill: 24px;

  --shadow-nav: 0 4px 24px rgba(0, 0, 0, 0.5);
  --shadow-glow-green: 0 0 20px rgba(57, 255, 20, 0.06);

  --transition-base: 0.2s ease;
}

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

html {
  scroll-behavior: smooth;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  line-height: 1.6;
  min-height: 100vh;
}

a {
  color: var(--accent-cyan);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: var(--bg);
}

::-webkit-scrollbar-thumb {
  background: #1a3a1a;
  border: 1px solid var(--accent);
}