/* =====================================================
   🌾 Pixel Farm — shared design system
   Cozy pixel-art farm-game style. Every page loads this file.
   Fonts (load in <head>):
   https://fonts.googleapis.com/css2?family=Tiny5&family=Chakra+Petch:wght@400;500;600;700&display=swap
   ===================================================== */

:root {
  /* palette — day */
  --sky-1: #7ec8f0; --sky-2: #9dd6f5; --sky-3: #bfe5f8; --sky-4: #ddf2fb;
  --cloud: #ffffff; --cloud-shade: #d6eefa;
  --grass-1: #5fb544; --grass-2: #4a9a36; --grass-3: #3a7d2b;
  --dirt-1: #a8703f; --dirt-2: #8a5a31; --dirt-3: #6b4426;
  --wood-1: #a8703f; --wood-2: #7f532b; --wood-3: #5e3c1f; --wood-4: #3f2512;
  --paper-1: #fbeccb; --paper-2: #f2d9a6; --paper-3: #d9b77a;
  --ink: #3b2414; --ink-soft: #6e4a2e; --ink-faint: #9a7656;
  --gold: #f6c544; --gold-dark: #c98f1d;
  --berry: #d9504a; --berry-dark: #9e2f2c;
  --leaf: #6cc04a; --leaf-dark: #3f8a2a;
  --water: #4fa7e0; --water-dark: #2c6fa6;
  --purple: #9a6bd1;

  --bg: var(--sky-3);
  --text: var(--ink);
  --focus: var(--ink);              /* focus ring: dark on day surfaces */

  --px: 4px;                         /* one "pixel" unit */
  --font-display: "Tiny5", "Chakra Petch", system-ui, sans-serif;
  --font-body: "Chakra Petch", "Tiny5", system-ui, sans-serif;
  --maxw: 1080px;
  --gutter: 16px;
  color-scheme: light;
}
html { font-synthesis: none; }  /* Tiny5 has one weight — avoid fake bold */

/* night — dark mode */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --sky-1: #141a3a; --sky-2: #1c2550; --sky-3: #263266; --sky-4: #34427d;
    --cloud: #4a5690; --cloud-shade: #36417a;
    --grass-1: #2f6b3a; --grass-2: #255a30; --grass-3: #1b4524;
    --dirt-1: #5e3f26; --dirt-2: #4b321e; --dirt-3: #362315;
    --wood-1: #8a5f38; --wood-2: #6e4a2a; --wood-3: #52361d; --wood-4: #2e1d0f;
    --paper-1: #e9d8b4; --paper-2: #d6c093; --paper-3: #b49a68;
    --bg: var(--sky-2);
    --focus: #ffe066;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --sky-1: #141a3a; --sky-2: #1c2550; --sky-3: #263266; --sky-4: #34427d;
  --cloud: #4a5690; --cloud-shade: #36417a;
  --grass-1: #2f6b3a; --grass-2: #255a30; --grass-3: #1b4524;
  --dirt-1: #5e3f26; --dirt-2: #4b321e; --dirt-3: #362315;
  --wood-1: #8a5f38; --wood-2: #6e4a2a; --wood-3: #52361d; --wood-4: #2e1d0f;
  --paper-1: #e9d8b4; --paper-2: #d6c093; --paper-3: #b49a68;
  --bg: var(--sky-2);
  --focus: #ffe066;
  color-scheme: dark;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh;
  font-family: var(--font-body); font-size: 16px; line-height: 1.6;
  color: var(--text);
  /* stepped (banded) sky — no smooth gradients */
  background:
    linear-gradient(180deg,
      var(--sky-1) 0 120px, var(--sky-2) 120px 260px,
      var(--sky-3) 260px 420px, var(--sky-4) 420px) fixed;
  background-color: var(--bg);
  overflow-x: hidden;
  -webkit-font-smoothing: none;
}
img, svg { max-width: 100%; }
img.pixelated, .sprite, .sprite svg { image-rendering: pixelated; image-rendering: crisp-edges; }
a { color: inherit; }
h1, h2, h3, h4 { font-family: var(--font-display); line-height: 1.2; margin: 0 0 .5em; letter-spacing: .02em; }
h1 { font-size: clamp(1.9rem, 6vw, 3.2rem); }
h2 { font-size: clamp(1.4rem, 4vw, 2rem); }
h3 { font-size: 1.2rem; }
p { margin: 0 0 1em; }
:focus-visible { outline: var(--px) solid var(--focus); outline-offset: 2px; }
.paper { --focus: var(--ink); } /* light parchment in both themes → dark ring */
::selection { background: var(--gold); color: var(--ink); }

.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pixel-font { font-family: var(--font-display); }
.center { text-align: center; }

/* ---------- pixel frame primitives ----------
   Notched corners via clip-path + hard inset shadows = chunky game UI */
.px-notch {
  clip-path: polygon(
    0 var(--px), var(--px) var(--px), var(--px) 0,
    calc(100% - var(--px)) 0, calc(100% - var(--px)) var(--px), 100% var(--px),
    100% calc(100% - var(--px)), calc(100% - var(--px)) calc(100% - var(--px)), calc(100% - var(--px)) 100%,
    var(--px) 100%, var(--px) calc(100% - var(--px)), 0 calc(100% - var(--px)));
}

/* wooden panel (signboards, nav, dialogs) */
.wood {
  position: relative;
  color: var(--paper-1);
  background:
    repeating-linear-gradient(180deg, transparent 0 14px, rgba(0,0,0,.12) 14px 16px),
    var(--wood-2);
  border: var(--px) solid var(--wood-4);
  box-shadow:
    inset var(--px) var(--px) 0 var(--wood-1),
    inset calc(var(--px) * -1) calc(var(--px) * -1) 0 var(--wood-3);
}

/* parchment card (content) */
.paper {
  position: relative;
  color: var(--ink);
  background: var(--paper-1);
  border: var(--px) solid var(--wood-4);
  box-shadow:
    inset var(--px) var(--px) 0 #fff7e2,
    inset calc(var(--px) * -1) calc(var(--px) * -1) 0 var(--paper-3),
    0 var(--px) 0 0 rgba(0,0,0,.25);
}

/* inventory slot (icon squares, tags) */
.slot {
  display: inline-grid; place-items: center;
  background: var(--paper-2);
  border: var(--px) solid var(--wood-3);
  box-shadow: inset var(--px) var(--px) 0 var(--paper-3), inset calc(var(--px) * -1) calc(var(--px) * -1) 0 #fff3d6;
}

/* ---------- buttons ---------- */
.btn {
  --btn-bg: var(--gold); --btn-hi: #ffe28a; --btn-lo: var(--gold-dark); --btn-fg: var(--ink);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 8px 18px;
  font-family: var(--font-display); font-size: 1rem; font-weight: 600; letter-spacing: .03em;
  color: var(--btn-fg); text-decoration: none; cursor: pointer;
  background: var(--btn-bg);
  border: var(--px) solid var(--wood-4);
  box-shadow:
    inset var(--px) var(--px) 0 var(--btn-hi),
    inset calc(var(--px) * -1) calc(var(--px) * -1) 0 var(--btn-lo),
    0 var(--px) 0 0 var(--wood-4);
  transform: translateY(0);
  transition: transform .06s steps(1), box-shadow .06s steps(1);
}
.btn:hover { filter: brightness(1.08); }
.btn:active, .btn.is-pressed {
  transform: translateY(var(--px));
  box-shadow: inset var(--px) var(--px) 0 var(--btn-lo), 0 0 0 0 var(--wood-4);
}
.btn--green { --btn-bg: var(--leaf); --btn-hi: #9be07a; --btn-lo: var(--leaf-dark); --btn-fg: var(--ink); }
.btn--red   { --btn-bg: var(--berry); --btn-hi: #f08a80; --btn-lo: var(--berry-dark); --btn-fg: #fff; }
.btn--blue  { --btn-bg: var(--water); --btn-hi: #8ccbf2; --btn-lo: var(--water-dark); --btn-fg: var(--ink); }
.btn--wood  { --btn-bg: var(--wood-2); --btn-hi: var(--wood-1); --btn-lo: var(--wood-3); --btn-fg: var(--paper-1); }
.btn--sm { min-height: 44px; padding: 4px 12px; font-size: .9rem; }
.btn[aria-pressed="true"], .btn.is-active { --btn-bg: var(--leaf); --btn-hi: #9be07a; --btn-lo: var(--leaf-dark); --btn-fg: var(--ink); }

/* ---------- top nav (wooden signboard bar) ---------- */
.site-nav {
  position: sticky; top: 0; z-index: 50;
  padding: 8px 0;
}
.site-nav .bar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 8px 12px;
}
.site-nav .brand {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-display); font-weight: 700; font-size: 1.15rem;
  color: var(--paper-1); text-decoration: none; text-shadow: 2px 2px 0 var(--wood-4);
  min-height: 44px;
}
.site-nav .links { display: flex; gap: 6px; margin-left: auto; flex-wrap: wrap; }
.site-nav .links a {
  font-family: var(--font-display); font-size: .95rem; text-decoration: none;
  color: var(--paper-1); padding: 6px 10px;
  border: var(--px) solid transparent;
}
.site-nav .links a:hover { background: var(--wood-3); }
.site-nav .links a[aria-current="page"] {
  background: var(--paper-1); color: var(--ink); border-color: var(--wood-4);
}
@media (max-width: 640px) {
  .site-nav .bar { gap: 8px; }
  .site-nav .lang-toggle { margin-left: auto; } /* keep toggle on the brand row */
  .site-nav .links { order: 1; width: 100%; margin-left: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px; }
  .site-nav .links a { padding: 8px 2px; font-size: .78rem; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-height: 44px; display: grid; place-items: center; }
}

/* language toggle (used by lang.js) */
.lang-toggle {
  display: inline-flex; gap: 0; padding: 0; cursor: pointer;
  font-family: var(--font-display); font-size: .85rem; font-weight: 700;
  background: var(--wood-3); color: var(--paper-2);
  border: var(--px) solid var(--wood-4);
}
.lang-toggle { min-height: 44px; min-width: 44px; }
.lang-toggle span { padding: 4px 8px; display: grid; place-items: center; }
.lang-toggle span.on { background: var(--gold); color: var(--ink); }
.lang-toggle.corner { position: absolute; top: 16px; right: 16px; z-index: 5; }

/* ---------- scenery ---------- */
/* hero area with clouds + ground strip; put .ground at the bottom */
.scene { position: relative; overflow: hidden; }
.ground {
  height: 48px;
  background:
    linear-gradient(180deg, var(--grass-1) 0 12px, var(--grass-2) 12px 20px, var(--dirt-1) 20px 32px, var(--dirt-2) 32px 40px, var(--dirt-3) 40px);
  position: relative;
}
.ground::before { /* grass tufts */
  content: ""; position: absolute; left: 0; right: 0; top: -8px; height: 8px;
  background: repeating-linear-gradient(90deg, var(--grass-1) 0 8px, transparent 8px 20px, var(--grass-2) 20px 24px, transparent 24px 36px);
}
.cloud {
  position: absolute; width: 96px; height: 32px; background: var(--cloud);
  box-shadow: 16px -12px 0 0 var(--cloud), 44px -16px 0 4px var(--cloud), 0 8px 0 0 var(--cloud-shade);
  animation: drift 60s steps(120) infinite linear;
  pointer-events: none; opacity: .95;
}
@keyframes drift { from { transform: translateX(-20vw); } to { transform: translateX(110vw); } }

/* night stars (only visible in dark) */
.stars { position: fixed; inset: 0; pointer-events: none; z-index: -1; display: none;
  background-image:
    radial-gradient(2px 2px at 10% 12%, #fff 98%, transparent), radial-gradient(2px 2px at 30% 6%, #fff 98%, transparent),
    radial-gradient(2px 2px at 52% 18%, #fff 98%, transparent), radial-gradient(2px 2px at 70% 9%, #fff 98%, transparent),
    radial-gradient(2px 2px at 86% 22%, #fff 98%, transparent), radial-gradient(2px 2px at 20% 30%, #fff 98%, transparent),
    radial-gradient(2px 2px at 64% 34%, #fff 98%, transparent), radial-gradient(2px 2px at 92% 4%, #fff 98%, transparent);
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .stars { display: block; } }
:root[data-theme="dark"] .stars { display: block; }

/* ---------- layout helpers ---------- */
.section { padding-top: 40px; padding-bottom: 40px; } /* vertical only, so .section.wrap keeps its gutter */
.section-title {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 6px 16px; margin: 0 0 20px;
  font-size: clamp(1.2rem, 3.5vw, 1.6rem);
}
.grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.tag {
  display: inline-block; padding: 2px 8px; font-size: .8rem; font-weight: 600;
  font-family: var(--font-body);
  background: var(--paper-2); color: var(--ink-soft); border: 2px solid var(--wood-3);
}
.muted { color: var(--ink-soft); }

/* dialog box (NPC speech) */
.dialog { padding: 16px 20px; }
.dialog .name {
  position: absolute; top: calc(var(--px) * -6); left: 16px;
  padding: 2px 10px; font-family: var(--font-display); font-weight: 700; font-size: .9rem;
}

/* form fields */
.field {
  width: 100%; min-height: 44px; padding: 8px 12px;
  font: inherit; color: var(--ink);
  background: #fff9ea; border: var(--px) solid var(--wood-4);
  box-shadow: inset var(--px) var(--px) 0 var(--paper-3);
}
.field::placeholder { color: var(--ink-faint); }

/* footer */
.site-footer { margin-top: 40px; }
.site-footer .inner { padding: 16px 0 24px; text-align: center; color: var(--paper-1); font-family: var(--font-display); font-size: .9rem; background: var(--dirt-3); }

/* simple entrance */
.pop-in { animation: pop .35s steps(4) both; }
@keyframes pop { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}