/* Self-hosted display font (Fredoka, OFL) — vendored as /fonts/fredoka.woff2 so
   there are no third-party font calls. Variable weight 400–700. */
@font-face {
  font-family: 'Fredoka';
  src: url('/fonts/fredoka.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

/* Neat Games — shared design tokens + base, used by the hub and every game. */
:root {
  --accent: #047857;
  --accent-soft: #ecfdf5;
  --bg: #f6f8f7;
  --fg: #1f2937;
  --muted: #6b7280;
  --card: #ffffff;
  --border: #e5e7eb;
  --radius: 12px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu,
    Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  --font-display: 'Fredoka', var(--font);
}

@media (prefers-color-scheme: dark) {
  :root {
    --accent: #34d399;
    --accent-soft: #064e3b;
    --bg: #0f1413;
    --fg: #e5e7eb;
    --muted: #9ca3af;
    --card: #1b211f;
    --border: #2c3531;
  }
}
/* Explicit overrides win over the media query. */
[data-theme="light"] {
  --accent: #047857; --accent-soft: #ecfdf5; --bg: #f6f8f7; --fg: #1f2937;
  --muted: #6b7280; --card: #ffffff; --border: #e5e7eb;
}
[data-theme="dark"] {
  --accent: #34d399; --accent-soft: #064e3b; --bg: #0f1413; --fg: #e5e7eb;
  --muted: #9ca3af; --card: #1b211f; --border: #2c3531;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--fg);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); }

/* Readable text selection in both themes (accent bg + bg-colored text are
   always high-contrast opposites). */
::selection { background: var(--accent); color: var(--bg); }
::-moz-selection { background: var(--accent); color: var(--bg); }

button {
  font-family: inherit;
  font-size: 1rem;
  cursor: pointer;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--fg);
  border-radius: 9px;
  padding: 0.5rem 0.8rem;
}
button:hover { border-color: var(--accent); }

.site-footer {
  text-align: center;
  padding: 1.5rem 1rem;
  color: var(--muted);
  font-size: 0.85rem;
}