/* ─────────────────────────────────────────────────────────────
 * Puzzle Cottage — shared base styles
 * Loaded before each page's inline <style> so per-page CSS
 * can still override/extend. Contains only rules that are
 * truly universal across every page.
 * ─────────────────────────────────────────────────────────── */

:root {
  --ink: #0f0e0c;
  --paper: #f5f2eb;
  --cream: #ede9df;
  --accent:  #b85c3a;  /* rust/terracotta — Shrink, Anagram Hunt */
  --accent2: #5a7548;  /* moss/forest     — Unfold */
  --accent3: #6b4423;  /* walnut/cocoa    — Sudoku, Echo */
  --accent4: #7d3a44;  /* wine/claret     — Connections, Memory, Trivia */
  --accent5: #b88938;  /* honey/wheat     — Word Scramble, Type Racer, Math Sprint */
  --muted: #605a50;
  --border: rgba(15, 14, 12, 0.12);
  --border-thick: rgba(15, 14, 12, 0.45);
  --gold: #b8860b;
}

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

body {
  font-family: 'DM Sans', sans-serif;
  background: var(--paper);
  color: var(--ink);
  min-height: 100vh;
}

/* Site-wide noise texture overlay — see CLAUDE.md design system */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 1000;
  opacity: 0.6;
}

/* Optional typographic utilities — kept here so per-page styles
 * don't need to re-declare the basic button reset pattern */
button { font-family: inherit; }

/* Respect prefers-reduced-motion globally */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ── A11y utilities ───────────────────────────────────────────── */

/* Visually hidden but accessible to screen readers + appears when focused (skip-links) */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.sr-only-focusable:focus,
.sr-only-focusable:focus-visible {
  position: fixed;
  top: 8px;
  left: 8px;
  width: auto;
  height: auto;
  padding: 10px 16px;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
  z-index: 9999;
  background: var(--ink);
  color: var(--paper);
  border-radius: 6px;
  text-decoration: none;
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  font-weight: 500;
}

/* Improve keyboard focus visibility without affecting mouse users */
:focus-visible {
  outline: 2px solid var(--accent3);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Buttons with only emoji/icon should still announce themselves — enforce via CSS reminder
 * ONLY: aria-label is the right way; this is a style safety net if one is missed. */
button:not([aria-label]):empty::before,
button[aria-label=""]::before {
  content: attr(title);
}

/* ── Shared masthead nav ─────────────────────────────────────────
 * Loaded before per-page <style>, so individual pages can still
 * override. Gives every page the same top-nav look: logo left,
 * Games/How it works/Tips/Archive/Privacy + streak pill right. */
.masthead .nav {
  display: flex;
  gap: 20px;
  align-items: center;
  flex-wrap: wrap;
}
.masthead .nav a {
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
  text-decoration: none;
  letter-spacing: 0.02em;
  transition: color 0.15s;
}
.masthead .nav a:hover { color: var(--ink); }
.masthead .nav a.active { color: var(--ink); }
.masthead .nav .streak,
.masthead .streak-badge {
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  background: var(--ink);
  color: var(--paper);
  padding: 4px 12px;
  border-radius: 99px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}
@media (max-width: 760px) {
  .masthead .nav { gap: 12px; }
  .masthead .nav a { font-size: 12px; }
}