/* Shared styles for the static content pages (about, contact, how-to-play, faq,
   privacy, terms, 404). The :root token block below mirrors public/index.html
   lines 49-70; index.html stays the source of truth. Content pages link
   themes/modern.css and themes/retro.css before this file, so each theme's
   token overrides (scoped html[data-theme="..."]) apply here exactly as they do
   on the game page. Reused chrome classes (.card, .theme-select, .brand-mark,
   .brand-name spans, body) are already styled by those theme files, so no theme
   file needs editing to theme these pages. darkroom.js is NOT loaded here. */

:root {
  --bg: #F1F1F3;
  --card: #FFFFFF;
  --ink: #18181B;
  --muted: #52525B;
  --faint: #71717A;
  --border: #E4E4E7;
  --border-strong: #A1A1AA;
  --accent: #6366F1;
  --accent-strong: #4F46E5;
  --footer-ink: #6A6A72;
  --footer-ink-strong: #27272B;
  --green: #22C55E;  --green-ink: #15803D;
  --yellow: #EAB308; --yellow-ink: #A16207;
  --orange: #F97316; --orange-ink: #C2410C;
  --red: #EF4444;    --red-ink: #B91C1C;
  --radius: 16px;
  --radius-sm: 10px;
  --gutter: 18px;
  --shadow-sm: 0 1px 2px rgba(24,24,27,0.06), 0 1px 3px rgba(24,24,27,0.05);
  --shadow-lg: 0 12px 32px -12px rgba(24,24,27,0.18), 0 2px 8px rgba(24,24,27,0.05);
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono: ui-monospace, 'SF Mono', 'JetBrains Mono', 'Menlo', monospace;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

.wrap {
  max-width: 448px;
  margin: 0 auto;
  padding: 20px var(--gutter) 64px;
  min-height: 100%;
}

/* ---------- header ---------- */
.topbar {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  gap: 9px;
  margin-bottom: 22px;
}
.brand-link {
  display: inline-flex; align-items: center; gap: 9px;
  text-decoration: none; color: inherit;
}
.brand-mark {
  width: 22px; height: 22px; border-radius: 7px;
  background: linear-gradient(135deg, #F97316, #22C55E 52%, #6366F1);
}
.brand-name { font-weight: 700; font-size: 18px; letter-spacing: -0.02em; }
.theme-select {
  position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  font-family: var(--font); font-size: 12px; font-weight: 500;
  color: var(--muted); background: var(--card);
  border: 1px solid var(--border); border-radius: 8px; padding: 4px 6px;
}
.theme-select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- card ---------- */
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 22px;
}
/* On phones the card goes edge-to-edge, matching the game page. */
@media (max-width: 448px) {
  .card {
    margin-left: calc(-1 * var(--gutter));
    margin-right: calc(-1 * var(--gutter));
    border-radius: 0;
    border-left: none;
    border-right: none;
    padding-left: max(22px, env(safe-area-inset-left));
    padding-right: max(22px, env(safe-area-inset-right));
  }
}

/* ---------- prose ---------- */
.page-copy h1 {
  font-size: 22px; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 12px;
}
.page-copy h2 {
  font-size: 15px; font-weight: 600; color: var(--ink); margin: 24px 0 8px;
}
.page-copy p, .page-copy li {
  font-size: 14px; color: var(--muted); margin: 0 0 10px;
}
.page-copy ul, .page-copy ol { margin: 0 0 10px; padding-left: 20px; }
.page-copy li { margin-bottom: 6px; }
.page-copy b, .page-copy strong { color: var(--ink); font-weight: 600; }
.page-copy a {
  color: var(--accent-strong); text-decoration: underline; text-underline-offset: 3px;
}
.page-copy .lead { font-size: 14.5px; }
.page-copy .meta { font-size: 12.5px; color: var(--faint); }
.page-copy .diff-list { list-style: none; padding: 0; }
.page-copy .diff-list li { padding-left: 16px; text-indent: -16px; }
.page-copy .diff-list .diff-dot { margin-right: 6px; }

.diff-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; vertical-align: middle; }
.diff-dot.easy { background: var(--green); }
.diff-dot.hard { background: var(--orange); }
.diff-dot.insane { background: var(--red); }

/* ---------- footer ---------- */
/* Low profile: a quiet link row under a thin hairline, no card panel. Footer
   text uses its own --footer-ink token so it stays legible on every theme's
   page background (the shared --muted/--ink tokens are dark grays meant for
   cards, unreadable on the retro navy background). */
.site-footer {
  margin-top: 28px; padding-top: 12px; border-top: 1px solid var(--border);
  text-align: center; font-size: 11.5px; line-height: 1.7;
}
.site-footer nav a {
  color: var(--footer-ink); text-decoration: none; white-space: nowrap;
}
.site-footer nav a:hover {
  color: var(--footer-ink-strong); text-decoration: underline; text-underline-offset: 3px;
}
.footer-sep { color: var(--footer-ink); opacity: 0.5; margin: 0 4px; }
.footer-note { color: var(--footer-ink); margin: 6px 0 0; font-size: 11px; }

a:focus-visible, .site-footer a:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}