/* Shared by the site pages and the games: colour tokens (light and dark), fonts, resets, animations.
   Page-specific layout lives in app.css (site) and game.css (games). */
:root {
  --paper: #ffffff;
  --grid: #e1e9f1;
  --sheet: #fffdfa;
  --surface: #ffffff;
  --ink: #3a3432;
  --ink-soft: #766c67;
  --line: #e3d9cc;
  --pencil: #3b4a5d;
  --ok: #4a9a3a;
  --go: #4a9a3a;
  --bad: #c4453c;
  --reveal: #d4862a;
  --key-edge: #d9cfc1;
  --shadow: 0 8px 22px rgb(70 55 45 / .10);
  --on-accent: #ffffff;
  --shade: #000000;
  --cA: #dfa92b; --cB: #96684c; --cC: #b23a4e; --cD: #7fb35c; --cE: #64809f;
  --cF: #d97b2e; --cG: #6fa053; --cH: #dd8a3c; --cI: #8a5f43; --cJ: #5e9ec7;
  --cK: #a77bc4; --cL: #e07a9a;
  --eye: #3a3432; --star-edge: #a8770f;
  --display: "Baloo 2", "Nunito", ui-rounded, system-ui, sans-serif;
  --text: "Nunito", ui-rounded, system-ui, -apple-system, "Segoe UI", sans-serif;
  --hand: "Patrick Hand", "Chalkboard SE", "Comic Sans MS", cursive;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #1b1b20; --grid: #282830; --sheet: #25221f; --surface: #2f2b28;
    --ink: #f3ede7; --ink-soft: #b7aca5; --line: #463e38; --pencil: #c3d2e6;
    --ok: #7cc56a; --bad: #f07f74; --reveal: #f0a752; --key-edge: #151311;
    --shadow: 0 8px 22px rgb(0 0 0 / .40);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #1b1b20; --grid: #282830; --sheet: #25221f; --surface: #2f2b28;
  --ink: #f3ede7; --ink-soft: #b7aca5; --line: #463e38; --pencil: #c3d2e6;
  --ok: #7cc56a; --bad: #f07f74; --reveal: #f0a752; --key-edge: #151311;
  --shadow: 0 8px 22px rgb(0 0 0 / .40);
  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body {
  margin: 0;
  background-color: var(--paper);
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 20px 20px;
  color: var(--ink);
  font-family: var(--text);
  font-size: 16px;
  font-weight: 700;
  -webkit-tap-highlight-color: transparent;
}
a { color: inherit; }
img { max-width: 100%; }
button {
  font: inherit;
  color: inherit;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
}
:focus-visible { outline: 3px solid var(--cJ); outline-offset: 3px; }

/* The build number at the foot of every page (partials/version). */
.version { margin-top: 28px; text-align: center; color: var(--ink-soft); font-size: .8rem; font-weight: 600; opacity: .7; }

/* The inline SVG sprite (partials/icons, partials/animals): hidden by size, not display: none,
   because Safari does not resolve clip paths inside a display: none subtree. */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

@keyframes blink { 50% { opacity: 0; } }
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-7px); }
  40% { transform: translateX(7px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
}
@keyframes pop { 50% { transform: scale(1.14); } }
@keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}