/* Shared by every page: the Garden palette from design/mockups/make_polished.py,
   the game's own fonts (served from this folder, so the site makes no third-party
   requests), and the footer. */
@font-face {
  font-family: "Fredoka";
  src: url("fonts/Fredoka.ttf") format("truetype");
  font-weight: 300 700;
  font-display: swap;
}
@font-face {
  font-family: "Nunito";
  src: url("fonts/Nunito.ttf") format("truetype");
  font-weight: 200 1000;
  font-display: swap;
}

:root {
  --ink: #3a2a1c;
  --ink-soft: #5c4532;
  --sky-top: #8fd0ff;
  --sky-bot: #dff3ff;
  --hill-far: #a8dc8a;
  --hill-near: #7fc862;
  --grass: #67b74c;
  --grass-dark: #4c9a37;
  --leaf: #2f7a24;
  --soil: #4a3323;
  --soil-hi: #6a4a33;
  --oak: #8a5a33;
  --oak-hi: #b07a46;
  --cream: #f1e8d4;
  --cream-hi: #fbf6ea;
  --cream-lo: #d8cbb0;
  --tile-line: #b9a88a;
  --brass: #e2ab3f;
  --brass-hi: #ffe08a;
  --brass-lo: #a8732a;
  --water: #3aa3ff;
  --water-dark: #1660c4;
  --water-core: #d6efff;
  --honey: #ffb61e;
  --fizz: #ff4d73;
  --mint: #4fd35f;
  --button: #5ac83a;
  --button-lo: #2f8f1f;
  --bounce: cubic-bezier(.34, 1.56, .64, 1);
  --display: "Fredoka", "Nunito", system-ui, sans-serif;
  --body: "Nunito", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
/* Soil under everything, so a short page ends in the footer's colour, not the sky */
html { background: var(--soil); }
body {
  font-family: var(--body);
  font-weight: 600;
  color: var(--ink);
  background-color: var(--grass);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; }
a { color: var(--water-dark); text-decoration-thickness: 2px; text-underline-offset: 2px; }
a:hover { color: var(--leaf); }
:focus-visible { outline: 3px solid var(--water-dark); outline-offset: 3px; border-radius: 6px; }

/* Skip link: off screen until a keyboard reaches it, then over the page's top corner. */
.skip-link {
  position: absolute; left: 16px; top: -80px; z-index: 100;
  padding: 10px 18px; border-radius: 12px;
  background: var(--cream-hi); color: var(--ink); font-weight: 800; text-decoration: none;
  box-shadow: 0 4px 0 var(--cream-lo);
}
.skip-link:focus { top: 16px; }

/* Footer: a soil band under a grass lip */
.lip { display: block; width: 100%; height: 28px; margin-bottom: -1px; position: relative; z-index: 1; }
.site-footer {
  position: relative; z-index: 1;
  text-align: center; color: var(--cream-lo); font-size: 14px;
  padding: 18px 16px 40px; background: var(--soil);
}
.site-footer nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 20px; margin-bottom: 12px; }
.site-footer a { color: var(--cream); text-decoration: none; font-weight: 800; }
.site-footer a:hover { color: var(--brass-hi); text-decoration: underline; }
.site-footer a[aria-current="page"] { color: var(--brass-hi); }