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

:root {
  --font-sans: system-ui, -apple-system, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'Cascadia Code', 'Courier New', monospace;

  /* Surfaces (forest green, inset wells: content field lighter than cards) */
  --bg: #172419;          /* page / main content (the field behind cards) */
  --bg-panel: #0e1712;    /* cards, stats, widgets (recessed, darker than field) */
  --bg-elevated: #5fb87a14;/* table header / alt rows */
  --bg-chrome: #0b130e;   /* header + sidebar */
  --border: #274031;
  --border-soft: #1d3023;

  /* Text (cool pale) */
  --text: #dbe6dd;
  --text-muted: #95a89a;
  --text-dim: #7d908a;

  /* Primary accent: forest green (links, nav, headings, stats) */
  --accent: #57b06f;
  --accent-hover: #74c98a;
  --accent-soft: rgba(87, 176, 111, 0.13);

  /* Secondary accent: brass, used sparingly (Play Now button, content links) */
  --accent2: #c9a45c;
  --accent2-hover: #dcb874;
  --accent2-soft: rgba(201, 164, 92, 0.13);
}

body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr;
}

a { color: var(--accent2); text-decoration: none; }
a:hover { color: var(--accent2-hover); text-decoration: underline; }

h1 { font-family: var(--font-mono); font-size: 1.5rem; font-weight: 700; color: var(--text); margin-bottom: 0.75rem; }
h2 { font-family: var(--font-mono); font-size: 1.2rem; font-weight: 700; color: var(--text); margin-bottom: 0.5rem; }
h3 { font-family: var(--font-mono); font-size: 1rem; font-weight: 600; color: var(--text); margin-bottom: 0.4rem; }
p  { line-height: 1.65; color: var(--text-muted); margin-bottom: 0.75rem; }

.card {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1.25rem;
  margin-bottom: 1.25rem;
}

.section-label {
  font-family: var(--font-mono);
  font-size: 0.67rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-dim);
  margin-bottom: 0.65rem;
  padding-bottom: 0.45rem;
  border-bottom: 1px solid var(--border-soft);
}

.prose h1, .prose h2, .prose h3 { margin-top: 1.25rem; margin-bottom: 0.5rem; }
.prose p { margin-bottom: 0.75rem; }
.prose ul, .prose ol { padding-left: 1.4rem; margin-bottom: 0.75rem; }
.prose li { line-height: 1.6; color: var(--text-muted); }
.prose img { max-width: 100%; border-radius: 4px; margin: 0.75rem 0; }
.prose a { color: var(--accent2); }
.prose hr { border: none; border-top: 1px solid var(--border); margin: 1.5rem 0; }