/* ==========================================================================
   FarmIt - Design System & Styles
   --------------------------------------------------------------------------
   Standalone. Not processed by the GoE-Craft Tailwind build and not linked
   from any GoE-Craft page. Plain CSS only, written mobile first.

   Direction: warm wood and lively forest green, lit by golden yellow, with
   FarmIt orange as the brand colour (navbar, logo, key accents). Chunky
   Lilita One headings, beveled game-style buttons and tiles, and the real
   in-game GUI frames where they fit.

   COLOUR RULE: raw colour values live ONLY in the PALETTE block of section
   01. Everything below uses the THEME ROLE variables (or palette names).
   To recolour a part of the site, change its role in section 01; to shift
   the whole brand, change the palette. Tints are built with color-mix(),
   so they follow the palette automatically.

   Contents
     01  Tokens
     02  Reset & base
     03  Layout, section backgrounds, headings
     04  Buttons, badges
     05  In-game GUI frames & decoration
     06  Navbar & mobile menu
     07  Hero
     08  Checker strip
     09  Nora (guide)
     10  Features
     11  Latest updates
     12  Leaderboards
     13  Last section spacing, popups, cookie notice
     14  Footer
     15  Support page
     15b Phone layout
     16  Motion & reveal
     17  Print
   ========================================================================== */


/* ==========================================================================
   01  TOKENS
   ========================================================================== */
:root {
  /* ======================================================================
     PALETTE  -  the only place raw colour values are written.
     ====================================================================== */

  /* --- Wood: outlines -> page -> cards -> sections -> frames ------------ */
  --wood-950: #160C05;   /* outlines and hard shadows */
  --wood-900: #24170C;   /* page background, footer */
  --wood-850: #2E1D0F;   /* dark card fill */
  --wood-800: #3C2614;   /* dark warm section (updates) */
  --wood-700: #4F331B;   /* raised card fill */
  --wood-650: #5E3D21;   /* wood section base */
  --wood-600: #744B28;   /* card borders */
  --wood-500: #93623A;   /* frames, hover borders */
  --wood-400: #B07A47;
  --dirt-a:   #5A391D;   /* grass block dirt checker */
  --dirt-b:   #6B4423;

  /* --- Forest ------------------------------------------------------------ */
  --forest-950: #0E2A0C;  /* darkest green (stays dark so art pops) */
  --forest-900: #184414;  /* section stripe A */
  --forest-800: #20561B;  /* section stripe B */
  --forest-700: #2B6B23;
  --forest-650: #2E7225;  /* navbar green (cream text 5.4:1) */
  --forest-600: #378530;
  --forest-500: #4FA83A;  /* grass edge, dividers */
  --forest-400: #7ACB4C;  /* bright in-game grass, accents only */
  --leaf-mist:  #DCEECB;  /* soft text on green */

  /* --- Gold & orange ------------------------------------------------------ */
  --sun:          #FFC933;
  --sun-light:    #FFE48A;
  --sun-deep:     #DB9B00;
  --orange:       #FF7F1A;  /* FarmIt brand orange: logo "It", accents */
  --orange-light: #FFA040;  /* orange text on wood/dark backgrounds (passes 4.5:1) */
  --orange-deep:  #D2560A;

  /* --- Other accents ---------------------------------------------------- */
  --sky:           #2F6FA0;  /* "patch" update tag */
  --glow-sky:      #6EC6FF;  /* feature icon glows (data.js -> features[].glow) */
  --glow-ruby:     #FF5E57;
  --glow-blossom:  #FF8AD8;
  --medal-base:    #D9C9A8;
  --medal-silver:  #D8DDE0;
  --medal-bronze:  #D5A06A;

  /* --- Text ------------------------------------------------------------- */
  --cream:     #FFF3DB;
  --text:      #F6E8CC;
  --text-soft: #D8C29E;
  --text-mute: #C1A883;
  --ink-dark:  #2A1404;   /* text on yellow / orange */
  --ink-warm:  #4A2608;   /* body text on yellow */
  --ink-rust:  #7A3500;   /* small labels on yellow */

  /* --- In-game GUI (sampled from the game's frame PNGs) ----------------- */
  --gui-panel:    #5E3E22;
  --gui-panel-in: #3F2917;
  --gui-frame:    #C08B4F;
  --gui-edge:     #33200F;
  --gui-text:     #FFF3DC;
  --gui-muted:    #C7B292;
  --gui-soft:     #D8C3A4;

  /* ======================================================================
     THEME ROLES  -  what each part of the page uses. Recolour here.
     ====================================================================== */
  --outline:      var(--wood-950);   /* dark rims and hard drop shadows */
  --page-bg:      var(--wood-900);
  --focus-ring:   var(--sun);

  /* Navbar: leafy green, cream text, gold accents, dark Play button. */
  --nav-bg:        var(--forest-650);
  --nav-edge:      var(--forest-900);
  --nav-glow:      color-mix(in srgb, var(--forest-400) 28%, transparent);
  --nav-lip:       color-mix(in srgb, var(--forest-400) 55%, transparent);
  --nav-ink:       var(--cream);
  --nav-ink-soft:  color-mix(in srgb, var(--cream) 92%, var(--forest-650));
  --nav-hover-bg:  color-mix(in srgb, var(--forest-950) 38%, transparent);
  --nav-accent:    var(--sun);   /* active-link bar, hovers, focus ring */
  --nav-cta-bg:    var(--wood-850);
  --nav-cta-ink:   var(--sun);
  --nav-panel-bg:  var(--wood-700);

  /* Section backgrounds */
  --sec-wood:        var(--wood-650);   /* game systems, community */
  --sec-warm:        var(--wood-800);   /* updates */
  --sec-forest-a:    var(--forest-900); /* guide, leaderboards, support hero */
  --sec-forest-b:    var(--forest-800);
  --plank-line:      color-mix(in srgb, var(--outline) 45%, transparent);
  --plank-light:     color-mix(in srgb, var(--sun-light) 7%, transparent);
  --footer-bg:       var(--wood-700);   /* medium-dark wood, continues the page */
  --footer-rule:     color-mix(in srgb, var(--outline) 40%, transparent);
  --divider-grass:   var(--forest-500);

  /* Surfaces */
  --card-bg:          var(--wood-850);  /* dark cards on wood/green */
  --card-border:      var(--wood-600);
  --card-border-hot:  var(--sun);
  --card-raised:      var(--wood-700);  /* update cards, lighter than their section */
  --card-raised-edge: var(--wood-500);
  --frame-wood:       var(--wood-500);  /* Nora step picture rim */
  --stage-bg-a:       var(--forest-950);
  --stage-bg-b:       color-mix(in srgb, var(--forest-950) 80%, black);
  --placeholder-a:    var(--forest-900);  /* empty image slots */
  --placeholder-b:    var(--forest-800);

  /* Grass block (support strip) */
  --grass-top:  var(--forest-400);
  --grass-edge: var(--forest-500);

  /* Text roles */
  --eyebrow-ink:     var(--orange-light);
  --eyebrow-mark:    var(--orange);
  --text-on-forest:  var(--leaf-mist);
  --text-on-sun:     var(--ink-dark);
  --text-on-sun-soft:var(--ink-warm);

  /* Kept for older inline styles (support page icon tile). */
  --soil-deep: var(--ink-dark);

  /* --- Shape & depth ---------------------------------------------------- */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 22px;
  --r-pill: 999px;

  --hard: 0 5px 0 var(--outline);
  --lift: 0 14px 30px rgba(0, 0, 0, .4);
  --bevel: inset 0 2px 0 color-mix(in srgb, var(--sun-light) 9%, transparent), inset 0 -3px 0 rgba(0, 0, 0, .28);

  /* --- Spacing ---------------------------------------------------------- */
  --sp-2: .5rem;
  --sp-3: .75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 5.5rem;

  /* --- Layout ----------------------------------------------------------- */
  --wrap: 1200px;
  --wrap-narrow: 820px;
  --gutter: 1rem;
  --nav-h: 64px;

  /* --- Type ------------------------------------------------------------- */
  --font-display: 'Lilita One', 'Trebuchet MS', system-ui, sans-serif;
  --font-body: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-pixel: 'Press Start 2P', 'Courier New', monospace;

  /* --- Motion ----------------------------------------------------------- */
  --ease: cubic-bezier(.22, .8, .3, 1);
  --t-fast: .16s var(--ease);
  --t: .26s var(--ease);
  --t-slow: .5s var(--ease);
}

@media (min-width: 768px) {
  :root { --gutter: 2rem; --nav-h: 72px; }
}

/* Wide and ultrawide monitors: the content column grows in steps and the
   text and spacing (rem based) scale up a little with it, so the page fills
   the screen instead of sitting in a narrow strip down the middle. Laptops
   and normal desktops (below 1700px) are untouched. */
@media (min-width: 1700px) {
  :root { --wrap: 1440px; }
  html { font-size: 106.25%; }   /* 17px */
}
@media (min-width: 2100px) {
  :root { --wrap: 1680px; }
  html { font-size: 112.5%; }    /* 18px */
}
@media (min-width: 2500px) {
  :root { --wrap: 1860px; }
  html { font-size: 118.75%; }   /* 19px */
}


/* ==========================================================================
   02  RESET & BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: var(--nav-h);
  /* Shows only past the page edges (scroll bounce), so match the footer. */
  background: var(--footer-bg);
}

body {
  margin: 0;
  background: var(--page-bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

body.is-locked { overflow: hidden; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.08;
  color: var(--cream);
  margin: 0 0 var(--sp-3);
  letter-spacing: .005em;
  text-wrap: balance;   /* even lines, no single word left on the last one */
}
h1 { font-size: clamp(2.6rem, 8vw, 5rem); }
h2 {
  font-size: clamp(1.9rem, 4.2vw, 2.9rem);
  text-shadow: 0 3px 0 color-mix(in srgb, var(--outline) 55%, transparent);
}
h3 { font-size: clamp(1.15rem, 2vw, 1.35rem); }
h4 { font-size: 1.05rem; }
h1 em, h2 em, h3 em { font-style: normal; color: var(--sun); }

p { margin: 0 0 var(--sp-4); }
p:last-child { margin-bottom: 0; }

a { color: var(--sun); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
a:hover { color: var(--sun-light); }

img, svg, video { max-width: 100%; display: block; }
img { height: auto; }

ul, ol { margin: 0; padding: 0; }
li { list-style: none; }

button { font: inherit; color: inherit; }

:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}

.skip-link {
  position: absolute;
  left: var(--sp-4);
  top: -100px;
  z-index: 200;
  background: var(--sun);
  color: var(--ink-dark);
  padding: .7rem 1.1rem;
  border-radius: var(--r-sm);
  font-weight: 800;
  text-decoration: none;
  transition: top var(--t-fast);
}
.skip-link:focus { top: var(--sp-4); color: var(--ink-dark); }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.icon {
  width: 1.5rem; height: 1.5rem;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.icon-xs { width: .85rem; height: .85rem; }
.icon-sm { width: 1.1rem; height: 1.1rem; }
.icon-lg { width: 2rem; height: 2rem; }


/* ==========================================================================
   03  LAYOUT, SECTION BACKGROUNDS, HEADINGS
   ========================================================================== */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap-narrow { max-width: var(--wrap-narrow); }

.section {
  position: relative;
  padding-block: var(--sp-8);
  /* Hard dark seam between sections, the way blocks meet in game. */
  border-top: 3px solid var(--outline);
  box-shadow: inset 0 1px 0 var(--plank-light);
}
@media (min-width: 900px) {
  .section { padding-block: var(--sp-9); }
}

/* Warm wood: horizontal planks. Every other board is a touch darker, each
   seam has a dark gap and a lit lip, and the edges fall off slightly. */
.bg-wood {
  background-color: var(--sec-wood);
  background-image:
    linear-gradient(90deg,
      color-mix(in srgb, var(--outline) 22%, transparent),
      transparent 16%, transparent 84%,
      color-mix(in srgb, var(--outline) 22%, transparent)),
    repeating-linear-gradient(180deg,
      transparent 0 62px,
      var(--plank-line) 62px 64px,
      var(--plank-light) 64px 66px,
      color-mix(in srgb, var(--outline) 9%, transparent) 66px 128px,
      var(--plank-line) 128px 130px,
      var(--plank-light) 130px 132px);
}

/* Darker warm brown (updates, support FAQ): barn boards running vertically,
   with a soft lamp glow (--warm-glow) from the top so it never reads as a
   flat black slab. */
.bg-warm {
  --warm-glow: radial-gradient(ellipse 75% 55% at 50% 0%, color-mix(in srgb, var(--orange) 14%, transparent), transparent 70%);
  background-color: var(--sec-warm);
  background-image:
    var(--warm-glow),
    repeating-linear-gradient(90deg,
      transparent 0 118px,
      color-mix(in srgb, var(--outline) 35%, transparent) 118px 120px,
      var(--plank-light) 120px 121px);
}

/* A section that carries on the one above it as one continuous space: no
   dark seam, no extra top padding. On .bg-warm the boards line up with the
   section above, and the lamp glow moves from the top edge to the centre
   (behind the content) so no band appears where the two sections meet.
   Used for the support page's "Still stuck?" block after the FAQ. */
.section-continued {
  --warm-glow: radial-gradient(ellipse 50% 60% at 50% 50%, color-mix(in srgb, var(--orange) 13%, transparent), transparent 72%);
  border-top: 0;
  box-shadow: none;
  padding-top: 0;
}

/* A wooden farm fence drawn across the top edge of a section, straddling the
   seam, to mark a clear break between two neighbouring wood sections.
   Posts sit in front of two rails; every piece has a dark rim and a lit
   left/top edge so it reads on both lighter and darker wood.
   Used between the support categories and the FAQ. */
.section-fenced {
  --fence-wood:  var(--wood-500);
  --fence-light: var(--wood-400);
  padding-top: calc(var(--sp-8) + 24px);
}
@media (min-width: 900px) { .section-fenced { padding-top: calc(var(--sp-9) + 24px); } }
.section-fenced::before {
  content: '';
  position: absolute;
  left: 0; right: 0;
  top: -28px;
  height: 54px;
  z-index: 1;
  pointer-events: none;
  background:
    /* posts, every 112px */
    repeating-linear-gradient(90deg,
      transparent 0 48px,
      var(--outline) 48px 50px,
      var(--fence-light) 50px 53px,
      var(--fence-wood) 53px 62px,
      var(--outline) 62px 64px,
      transparent 64px 112px),
    /* two rails */
    linear-gradient(180deg,
      transparent 0 11px,
      var(--outline) 11px 13px,
      var(--fence-light) 13px 15px,
      var(--fence-wood) 15px 21px,
      var(--outline) 21px 23px,
      transparent 23px 31px,
      var(--outline) 31px 33px,
      var(--fence-light) 33px 35px,
      var(--fence-wood) 35px 41px,
      var(--outline) 41px 43px,
      transparent 43px);
  filter: drop-shadow(0 4px 0 color-mix(in srgb, var(--outline) 45%, transparent));
}

/* Forest: wide diagonal mowing stripes with a sunlit centre. */
.bg-forest {
  /* Orange labels cannot reach 4.5:1 on the lighter green stripe, so labels
     on green sections turn gold instead. */
  --eyebrow-ink: var(--sun);
  background-color: var(--sec-forest-a);
  background-image:
    radial-gradient(ellipse 70% 60% at 50% 40%, color-mix(in srgb, var(--forest-400) 14%, transparent), transparent 70%),
    repeating-linear-gradient(135deg,
      var(--sec-forest-a) 0 38px,
      var(--sec-forest-b) 38px 76px);
}

/* Section heading block */
.sec-head {
  max-width: 46rem;
  margin-bottom: var(--sp-6);
}
.sec-head-center { margin-inline: auto; text-align: center; }
.sec-head h2 { margin-bottom: var(--sp-3); }
.sec-head p:not(.eyebrow) {
  color: var(--text-soft);
  font-size: 1.05rem;
  margin: 0;
}
.sec-head-row {
  max-width: none;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-4);
}
.sec-head-row h2 { margin: 0; }

/* Small orange label with a pixel square, sits above every heading. */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  margin: 0 0 var(--sp-3);
  font-family: var(--font-body);
  font-size: .95rem;
  font-weight: 900;
  line-height: 1;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--eyebrow-ink);
}
.eyebrow::before {
  content: '';
  width: 11px; height: 11px;
  flex: none;
  background: var(--eyebrow-mark);
  box-shadow: 0 0 0 2px var(--outline), 2px 2px 0 2px var(--outline);
}
.eyebrow-dark { color: var(--ink-rust); }
.eyebrow-dark::before { background: var(--ink-rust); box-shadow: none; }


/* ==========================================================================
   04  BUTTONS, BADGES
   ========================================================================== */
/* Base button: solid fill, dark outline, lit top edge, hard drop shadow that
   collapses when pressed. Same recipe as an in-game button. */
.btn {
  --btn-bg: var(--wood-700);
  --btn-fg: var(--cream);
  --btn-edge: var(--outline);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  padding: .75rem 1.35rem;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 2px solid var(--btn-edge);
  border-radius: var(--r-md);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.08rem;
  line-height: 1.1;
  letter-spacing: .02em;
  text-decoration: none;
  cursor: pointer;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .22), 0 4px 0 var(--btn-edge);
  transition: transform var(--t-fast), box-shadow var(--t-fast), filter var(--t-fast), background var(--t-fast), color var(--t-fast);
}
.btn:hover {
  color: var(--btn-fg);
  transform: translateY(-2px);
  filter: brightness(1.08);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .28), 0 6px 0 var(--btn-edge), var(--lift);
}
.btn:active {
  transform: translateY(3px);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .16), 0 1px 0 var(--btn-edge);
}

.btn-sm { padding: .5rem .95rem; font-size: .95rem; border-radius: var(--r-sm); }
.btn-lg { padding: .9rem 1.6rem; font-size: 1.15rem; }
.btn-block { width: 100%; }

.btn-sun  { --btn-bg: var(--sun); --btn-fg: var(--ink-dark); --btn-edge: var(--outline); }
.btn-dark { --btn-bg: var(--wood-850); --btn-fg: var(--cream); --btn-edge: var(--outline); border-color: var(--wood-600); }
.btn-dark:hover { --btn-fg: var(--sun); }
.btn-ink  { --btn-bg: var(--wood-850); --btn-fg: var(--sun); --btn-edge: var(--outline); }

/* The PLAY button. The one place the page spends a gradient: yellow into
   orange with a dark play disc, so it is the brightest thing on screen. */
.btn-play {
  --btn-edge: var(--outline);
  --btn-fg: var(--ink-dark);
  padding: .55rem 1.6rem .55rem .55rem;
  gap: .85rem;
  border: 3px solid var(--outline);
  border-radius: var(--r-pill);
  background: linear-gradient(180deg, color-mix(in srgb, var(--sun-light) 55%, var(--sun)) 0%, var(--sun) 45%, var(--orange) 100%);
  font-size: 1.2rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  box-shadow:
    inset 0 3px 0 rgba(255, 255, 255, .55),
    inset 0 -4px 0 color-mix(in srgb, var(--orange-deep) 35%, transparent),
    0 6px 0 var(--outline),
    0 12px 34px color-mix(in srgb, var(--orange) 35%, transparent);
}
.btn-play:hover {
  box-shadow:
    inset 0 3px 0 rgba(255, 255, 255, .6),
    inset 0 -4px 0 color-mix(in srgb, var(--orange-deep) 35%, transparent),
    0 8px 0 var(--outline),
    0 16px 44px color-mix(in srgb, var(--orange) 55%, transparent);
}
.btn-play:active {
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, .4), 0 2px 0 var(--outline);
}
.btn-play-icon {
  width: 2.4rem; height: 2.4rem;
  display: grid;
  place-items: center;
  flex: none;
  border-radius: 50%;
  background: var(--ink-dark);
  color: var(--sun);
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .4);
  transition: transform var(--t);
}
.btn-play-icon .icon { margin-left: 3px; }
.btn-play:hover .btn-play-icon { transform: scale(1.08) rotate(-8deg); }

.btn-xl { font-size: clamp(1.25rem, 2.6vw, 1.6rem); padding: .6rem 2.1rem .6rem .6rem; }
.btn-xl .btn-play-icon { width: 3rem; height: 3rem; }

.btn[aria-disabled="true"],
.btn:disabled { pointer-events: none; opacity: .45; box-shadow: none; }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--sp-3); }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-weight: 800;
  font-size: .95rem;
  color: var(--sun);
  text-decoration: none;
}
.link-arrow svg { transition: transform var(--t-fast); }
.link-arrow:hover svg { transform: translateX(4px); }

/* --- Badges ----------------------------------------------------------------- */
.badge {
  display: inline-flex;
  align-items: center;
  padding: .25rem .55rem;
  border-radius: var(--r-xs);
  font-size: .66rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  line-height: 1.4;
  background: var(--card-raised);
  color: var(--text-soft);
  border: 1px solid var(--card-border);
}
.badge-placeholder {
  background: repeating-linear-gradient(45deg, var(--card-bg) 0 6px, var(--wood-800) 6px 12px);
  border-color: var(--card-raised-edge);
  color: var(--sun-light);
}
.badge-sample { background: color-mix(in srgb, var(--sun) 12%, transparent); border-color: color-mix(in srgb, var(--sun) 40%, transparent); color: var(--sun); }

.noscript-wrap { padding-block: var(--sp-4); }
.noscript-note {
  margin: 0;
  padding: .85rem 1.1rem;
  border: 2px solid var(--wood-600);
  border-left: 5px solid var(--orange);
  border-radius: var(--r-sm);
  background: var(--wood-850);
  color: var(--text);
  font-weight: 700;
}

/* Category pills on update cards */
.cat {
  display: inline-block;
  padding: .22rem .55rem;
  border-radius: var(--r-xs);
  font-size: .66rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  background: var(--forest-600);
  color: var(--cream);
}
.cat[data-cat="event"]        { background: var(--orange); color: var(--ink-dark); }
.cat[data-cat="announcement"] { background: var(--sun); color: var(--ink-dark); }
.cat[data-cat="patch"]        { background: var(--sky); color: var(--cream); }


/* ==========================================================================
   05  IN-GAME GUI FRAMES & DECORATION
   --------------------------------------------------------------------------
   Real frame art exported from the game, drawn as 9-slice borders so they
   stretch to any size without distorting the corners. Slice numbers are in
   SOURCE pixels and must not change. `border-width` scales the frame on
   screen and is a whole multiple of the slice so the pixels stay crisp.

     main_frame_background.png  157x125  slice 21 27 19 27
     ui_frame.png               100x69   slice 7
     task_frame.png             101x69   slice 6
   ========================================================================== */
.mc-panel {
  position: relative;
  background: var(--gui-panel);
  color: var(--gui-text);
  border-width: 21px 27px 19px 27px;
  border-style: solid;
  border-color: transparent;
  border-image: url("../assets/images/ui/main_frame_background.png") 21 27 19 27 fill stretch;
  padding: var(--sp-4) var(--sp-2) var(--sp-3);
  filter: drop-shadow(0 10px 0 rgba(0, 0, 0, .4));
}
@media (min-width: 760px) {
  .mc-panel {
    border-width: 42px 54px 38px 54px;
    padding: var(--sp-4) var(--sp-4) var(--sp-5);
  }
}

.mc-vine {
  position: absolute;
  top: -26px;
  width: 80px; height: 154px;
  pointer-events: none;
  z-index: 2;
  image-rendering: pixelated;
}
.mc-vine--l { left: -30px; }
.mc-vine--r { right: -30px; }
@media (max-width: 759px) {
  .mc-vine { width: 40px; height: 77px; top: -14px; }
  .mc-vine--l { left: -12px; }
  .mc-vine--r { right: -12px; }
}
/* On phones the board's tab row runs edge to edge and scrolls; the vines
   would sit on top of the tabs, so they are dropped. */
@media (max-width: 559px) { .mc-vine { display: none; } }

/* Grass block edge: bright grass on top, dirt checker below. */
.soil-strip {
  height: 26px;
  background:
    linear-gradient(180deg,
      var(--forest-400) 0 8px,
      var(--forest-500) 8px 12px,
      transparent 12px),
    repeating-linear-gradient(90deg,
      var(--dirt-a) 0 16px,
      var(--dirt-b) 16px 32px);
  border-bottom: 3px solid var(--outline);
}

/* Vine corner from the game, hung above the support hero label. */
.vine-deco {
  position: absolute;
  width: 86px; height: 65px;
  image-rendering: pixelated;
  pointer-events: none;
  display: none;
}
.vine-deco--tl { top: -62px; left: -34px; }
@media (min-width: 1100px) {
  .vine-deco { display: block; animation: sway 8s ease-in-out infinite; }
}
@keyframes sway {
  0%, 100% { transform: translateY(0) rotate(-3deg); }
  50%      { transform: translateY(-8px) rotate(3deg); }
}


/* ==========================================================================
   06  NAVBAR & MOBILE MENU
   --------------------------------------------------------------------------
   Leafy green bar (--nav-bg) with cream links, a lit grass-green top lip, a
   darker green bottom edge and a soft green glow. Gold (--nav-accent) marks
   the active link, hovers and focus. The Play button stays dark brown with
   gold text so it stands apart from the bar. The logo keeps its orange "It".
   All colours come from the --nav-* roles in section 01.
   ========================================================================== */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--nav-bg);
  border-bottom: 3px solid var(--nav-edge);
  box-shadow:
    inset 0 2px 0 var(--nav-lip),
    0 3px 0 color-mix(in srgb, var(--outline) 35%, transparent),
    0 8px 22px var(--nav-glow);
  transition: box-shadow var(--t);
}
.nav.is-scrolled {
  box-shadow:
    inset 0 2px 0 var(--nav-lip),
    0 3px 0 color-mix(in srgb, var(--outline) 35%, transparent),
    0 10px 26px var(--nav-glow),
    0 12px 30px rgba(0, 0, 0, .3);
}
.nav :focus-visible { outline-color: var(--nav-accent); }

.nav-inner {
  height: var(--nav-h);
  display: flex;
  align-items: center;
  gap: var(--sp-4);
}
/* Desktop: three columns. The brand (FarmIt + Bedrock logos) hugs the left,
   the actions the right, and the links centre in the space between them. */
@media (min-width: 1100px) {
  .nav-inner { display: grid; grid-template-columns: auto 1fr auto; }
  .nav-inner .nav-links { justify-self: center; }
  .nav-inner .nav-brand { justify-self: start; }
  .nav-inner .nav-actions { justify-self: end; }
}

/* --- Logo -----------------------------------------------------------------
   Logos live in assets/images/brand/. logo-farmit-nav.png is the FARM IT!
   title (straw hat included) cropped to its artwork and saved at 447x150, so
   it stays sharp at the ~46px it is shown at. Used in the navbar and footer.
   logo-farmit.png is the full-size crop, logo-farmit-source.png the original.
   ------------------------------------------------------------------------- */
.logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  margin-right: auto;
  flex: none;
}
.logo-img {
  height: 46px;
  width: auto;
  filter: drop-shadow(0 3px 0 rgba(0, 0, 0, .35));
  transition: transform var(--t-fast);
}
.logo:hover .logo-img { transform: rotate(-3deg) scale(1.04); }
.ft .logo-img { height: 64px; }

/* FarmIt logo + the Bedrock Edition title beside it, split by a thin rule,
   so visitors know at a glance which edition FarmIt is for.
   logo-bedrock-edition-nav.png is a 341x120 copy of logo-bedrock-edition.png. */
/* The hat makes the FarmIt image taller than its letters (the letters fill
   the bottom 67%). So the two logos are bottom-aligned and the Bedrock title
   is set to the letters' height (0.67 x the logo height at every size):
   that puts both titles on one centre line. */
.nav-brand {
  display: flex;
  align-items: flex-end;
  gap: .9rem;
  margin-right: auto;
  flex: none;
}
.nav-brand .logo { margin-right: 0; }
.nav-edition {
  height: 31px;     /* 0.67 x 46px */
  width: auto;
  padding-left: .9rem;
  border-left: 2px solid color-mix(in srgb, var(--nav-ink) 28%, transparent);
  box-sizing: content-box;
  filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .35));
}
@media (min-width: 1100px) and (max-width: 1279px) {
  .nav-inner .logo-img { height: 40px; }
  .nav-edition { height: 27px; }   /* 0.67 x 40px */
}
@media (max-width: 560px) {
  .nav-brand { gap: .6rem; }
  .nav-inner .logo-img { height: 36px; }
  .nav-edition { height: 24px; padding-left: .6rem; }   /* 0.67 x 36px */
}
@media (max-width: 380px) { .nav-edition { display: none; } }

/* --- Desktop links ---------------------------------------------------------
   Two kinds of link, styled differently on purpose:
   - Page links (.nav-page: Wiki, Support, and Home on support.html) go to
     another page. Icon + label, gold underline on the page you are on.
   - Section links (.nav-sec: Home, How to Play, Features, Updates) jump to a
     part of the homepage. They sit together in a dark inset track, and a gold
     pill (.nav-pill) slides behind the section currently on screen. The pill is
     positioned by initScrollSpy() in js/main.js via --pill-x / --pill-w.
   ------------------------------------------------------------------------- */
.nav-links { display: none; }
@media (min-width: 1100px) {
  .nav-links { display: flex; align-items: center; gap: .35rem; }
}
.nav-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .5rem .75rem;
  border-radius: var(--r-sm);
  font-weight: 800;
  font-size: .95rem;
  line-height: 1.2;
  white-space: nowrap;
  color: var(--nav-ink-soft);
  text-decoration: none;
  transition: color var(--t-fast), background var(--t-fast), box-shadow var(--t-fast);
}

/* Page links */
.nav-page .icon { color: var(--nav-accent); transition: transform var(--t); }
.nav-page:hover { color: var(--nav-accent); background: var(--nav-hover-bg); }
.nav-page:hover .icon { transform: translateY(-2px) rotate(-8deg); }
.nav-page[aria-current="page"] {
  color: var(--nav-ink);
  box-shadow: inset 0 -3px 0 var(--nav-accent);
  border-radius: var(--r-sm) var(--r-sm) 2px 2px;
}

/* Section track */
.nav-sections {
  --pill-x: 0px;
  --pill-w: 0px;
  position: relative;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 4px;
  margin-inline: .35rem;
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--forest-950) 55%, transparent);
  box-shadow:
    inset 0 2px 4px rgba(0, 0, 0, .35),
    0 1px 0 color-mix(in srgb, var(--forest-400) 30%, transparent);
}
.nav-sec {
  z-index: 1;
  padding: .4rem .85rem;
  border-radius: var(--r-pill);
}
.nav-sec:hover { color: var(--sun-light); }
.nav-sec.is-active { color: var(--ink-dark); }
.nav-sec .icon { color: var(--nav-accent); transition: color var(--t-fast); }
.nav-sec.is-active .icon { color: currentColor; }

/* The sliding highlight. Hidden until a section is in view. */
.nav-pill {
  position: absolute;
  top: 4px; bottom: 4px;
  left: 0;
  width: var(--pill-w);
  transform: translateX(var(--pill-x));
  border-radius: var(--r-pill);
  background: linear-gradient(180deg, var(--sun-light), var(--sun));
  box-shadow:
    inset 0 -2px 0 color-mix(in srgb, var(--sun-deep) 70%, transparent),
    0 0 14px color-mix(in srgb, var(--sun) 55%, transparent);
  opacity: 0;
  transition: transform .4s var(--ease), width .4s var(--ease), opacity var(--t);
  pointer-events: none;
}
.nav-sections.has-active .nav-pill { opacity: 1; }
/* No transition on first placement, so it does not slide in from the left. */
.nav-sections.no-anim .nav-pill { transition: none; }

/* 1100-1279px: tighten so everything fits on one row; page icons drop out
   (the Discord shortcut also hides below 1280px, see .nav-social). */
@media (min-width: 1100px) and (max-width: 1279px) {
  .nav-link { padding-inline: .55rem; font-size: .9rem; }
  .nav-sec { padding-inline: .65rem; }
  .nav-page .icon,
  .nav-sec .icon { display: none; }
}

.nav-actions { display: flex; align-items: center; gap: .6rem; flex: none; }
.nav-social {
  display: none;
  color: var(--nav-ink);
  padding: .4rem;
  border-radius: var(--r-sm);
  transition: color var(--t-fast), background var(--t-fast);
}
@media (min-width: 1280px) { .nav-social { display: inline-flex; } }
.nav-social:hover { color: var(--nav-accent); background: var(--nav-hover-bg); }

/* Play Now in the bar: the same gold-orange pill as the hero and Start your
   farm buttons (.btn-play), just sized down to fit the bar. */
.nav-cta {
  padding: .3rem 1.05rem .3rem .3rem;
  gap: .55rem;
  font-size: .95rem;
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, .55),
    inset 0 -3px 0 color-mix(in srgb, var(--orange-deep) 35%, transparent),
    0 4px 0 var(--outline);
}
.nav-cta .btn-play-icon { width: 1.75rem; height: 1.75rem; }
.nav-cta .btn-play-icon .icon { margin-left: 2px; }
@media (max-width: 420px) {
  .nav-cta { padding: .25rem .75rem .25rem .25rem; font-size: .85rem; }
  .nav-inner .logo-img { height: 32px; }
  .nav-edition { height: 21px; }   /* 0.67 x 32px */
}

/* appearance and align-items are set explicitly because Safari's default
   button style uses align-items: flex-start, which shrinks the bars to 0 wide. */
.nav-toggle {
  -webkit-appearance: none;
  appearance: none;
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  gap: 5px;
  width: 42px; height: 42px;
  padding: 0 10px;
  background: var(--nav-cta-bg);
  border: 2px solid var(--outline);
  border-radius: var(--r-sm);
  box-shadow: 0 3px 0 color-mix(in srgb, var(--outline) 60%, transparent);
  cursor: pointer;
}
@media (min-width: 1100px) { .nav-toggle { display: none; } }
.nav-toggle span {
  display: block;
  width: 100%;
  height: 2.5px;
  background: var(--sun);
  border-radius: 2px;
  transition: transform var(--t), opacity var(--t-fast);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

.nav-panel {
  position: fixed;
  inset: var(--nav-h) 0 0;
  z-index: 99;
  background: var(--nav-panel-bg);
  border-top: 3px solid var(--nav-edge);
  padding: var(--sp-5) var(--gutter) var(--sp-7);
  overflow-y: auto;
  transform: translateY(-8px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t), transform var(--t), visibility var(--t);
}
.nav-panel.is-open { opacity: 1; visibility: visible; transform: none; }
@media (min-width: 1100px) { .nav-panel { display: none; } }

.nav-panel-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .95rem .25rem;
  border-bottom: 2px solid var(--card-border);
  font-family: var(--font-display);
  font-size: 1.4rem;
  color: var(--cream);
  text-decoration: none;
}
.nav-panel-link:hover { color: var(--sun); }
.nav-panel-link[aria-current="page"],
.nav-panel-link.is-active { color: var(--sun); }
.nav-panel-link.is-active svg { color: var(--sun); }
.nav-panel-link svg { color: var(--orange-light); }
.nav-panel .btn { margin-top: var(--sp-5); }
.nav-panel-socials { display: flex; gap: .6rem; margin-top: var(--sp-5); }
.nav-panel-socials a {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  border-radius: var(--r-sm);
  border: 2px solid var(--card-border);
  background: var(--card-bg);
  color: var(--text);
}
.nav-panel-socials a:hover { color: var(--sun); border-color: var(--sun); }


/* ==========================================================================
   07  HERO
   --------------------------------------------------------------------------
   background-hero.jpg fills one screen. A short invite sits in the bottom left, lined up
   with the navbar logo: headline, one line about the game, Play Now. A dark
   wash rises from that corner so the copy reads over the busy scene.
   ========================================================================== */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  /* Exactly one screen below the navbar, so the next section starts below the fold. */
  min-height: clamp(540px, calc(100svh - var(--nav-h)), 940px);
  background: var(--page-bg);
}
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Farmer and cow on the right, open grass on the left for the copy. On
     narrower screens the sides are cropped; 30% keeps the farmer to the right. */
  object-position: 30% 40%;
  filter: brightness(.85);   /* the render is already vivid; just a step darker so the copy reads */
}
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    /* shade in the bottom left, behind the copy */
    radial-gradient(ellipse 70% 65% at 0% 100%, color-mix(in srgb, var(--outline) 72%, transparent), transparent 72%),
    linear-gradient(180deg,
      color-mix(in srgb, var(--page-bg) 50%, transparent) 0%,
      transparent 18%),
    linear-gradient(0deg,
      color-mix(in srgb, var(--wood-800) 80%, transparent) 0%,
      color-mix(in srgb, var(--wood-800) 30%, transparent) 22%,
      transparent 45%),
    radial-gradient(ellipse 125% 95% at 50% 45%, transparent 60%, color-mix(in srgb, var(--outline) 32%, transparent) 100%);
}

.hero-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-4);
  padding-top: var(--sp-8);
  padding-bottom: clamp(2.5rem, 9vh, 5.5rem);
}
.hero-title {
  margin: 0;
  max-width: 15ch;
  font-size: clamp(2.4rem, 4.6vw, 3.8rem);   /* ends before the farmer in background-hero.jpg */
  line-height: 1;
  letter-spacing: .01em;
  text-transform: uppercase;
  text-wrap: balance;
  color: var(--cream);
  text-shadow: 0 4px 0 var(--outline), 0 0 24px rgba(0, 0, 0, .45);
}
/* Phones: one line across the screen instead of two big ones. The line
   is about 15.6em long in Lilita One, so 1/16 of the width keeps it in. */
@media (max-width: 639px) {
  .hero-title {
    max-width: none;
    white-space: nowrap;
    font-size: min(2.4rem, calc((100vw - var(--gutter) * 2) / 16));
    text-shadow: 0 3px 0 var(--outline), 0 0 18px rgba(0, 0, 0, .45);
  }
}
.hero-lead {
  margin: 0;
  max-width: 34rem;
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  font-weight: 700;
  line-height: 1.45;
  color: color-mix(in srgb, var(--cream) 90%, transparent);
  text-shadow: 0 2px 0 var(--outline), 0 0 12px rgba(0, 0, 0, .6);
}
.hero-cta { margin-top: var(--sp-2); }

@media (max-width: 640px) {
  .hero { min-height: 78svh; }
  .hero-bg { object-position: 68% center; }   /* keep the farmer in frame */
}


/* ==========================================================================
   08  CHECKER STRIP
   ========================================================================== */
.strip {
  position: relative;
  border-top: 5px solid var(--divider-grass);
  box-shadow: inset 0 3px 0 rgba(0, 0, 0, .3);
  border-bottom: 3px solid var(--outline);
  background:
    conic-gradient(var(--wood-800) 25%, var(--wood-700) 0 50%, var(--wood-800) 0 75%, var(--wood-700) 0)
    0 0 / 30px 30px;
}
/* Three columns so the words stay centred and the Discord pill sits at the
   right edge of the content width. Below 900px the pill drops under them. */
.strip-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: .6rem 1rem;
  max-width: var(--wrap);
  margin-inline: auto;
  padding: 1rem var(--gutter);
}
.strip-list {
  grid-column: 2;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: .35rem 1.4rem;
  margin: 0;
  padding: 0;
}

/* "N farmers online": a small dark pill with a live green dot. */
.strip-discord {
  grid-column: 3;
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .35rem .85rem .35rem .7rem;
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--outline) 70%, transparent);
  border: 2px solid color-mix(in srgb, var(--divider-grass) 70%, transparent);
  color: var(--cream);
  font-size: .9rem;
  font-weight: 800;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 3px 0 var(--outline);
  transition: transform var(--t-fast), border-color var(--t-fast);
}
.strip-discord[hidden] { display: none; }
.strip-discord b { font-family: var(--font-display); font-weight: 400; font-size: 1.05rem; color: var(--sun); }
.strip-discord:hover { transform: translateY(-2px); border-color: var(--divider-grass); }
.strip-discord-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #43D16B;
  animation: online-pulse 2s ease-out infinite;
}
@keyframes online-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(67, 209, 107, .6); }
  70%  { box-shadow: 0 0 0 7px rgba(67, 209, 107, 0); }
  100% { box-shadow: 0 0 0 0 rgba(67, 209, 107, 0); }
}
@media (prefers-reduced-motion: reduce) { .strip-discord-dot { animation: none; } }
@media (max-width: 899px) {
  .strip-inner { grid-template-columns: 1fr; justify-items: center; }
  .strip-list, .strip-discord { grid-column: 1; justify-self: center; }
}
.strip-list li {
  display: inline-flex;
  align-items: center;
  gap: 1.4rem;
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 2.6vw, 1.85rem);
  line-height: 1.1;
  color: var(--sun);
  text-shadow: 0 3px 0 var(--outline);
}
.strip-list li + li::before {
  content: '';
  width: 11px; height: 11px;
  background: var(--orange);
  box-shadow: 0 0 0 2px var(--outline);
}
/* Phones: tighter spacing and a viewport-scaled size keep all five words on
   one line, so a separator never starts a wrapped line. */
@media (max-width: 560px) {
  .strip-inner { padding-inline: .75rem; }
  .strip-list { gap: .35rem .5rem; }
  .strip-list li { gap: .5rem; font-size: 4.3vw; }
  .strip-list li + li::before { width: 8px; height: 8px; }
}


/* ==========================================================================
   09  NORA (GUIDE)
   --------------------------------------------------------------------------
   "Nora will help you get started!" centred on top, the "Stuck?" support
   sign at the bottom, and between them one step card in the farmer-gloves
   frame (the same 9-slice as the support page's "Still stuck?" banner, see
   .help-cta in section 15), in three columns: the step rail (one game icon
   per step, joined by a line), the step picture with the step text over it
   and round arrows on its sides, and Nora with her speech bubble.

   The frame stays put; only its content changes. All step pictures, texts
   and bubbles are rendered at once and stacked, and .is-active shows the
   current one, so the card never changes size. The arrows, a rail icon, a
   tap on the card, the arrow keys or a sideways swipe change the step
   (js/main.js -> renderSteps, initGuideSteps).

   On desktop the section fills the screen under the navbar and the frame
   grows into the leftover height (see "Desktop: fill the screen" below),
   so the next section never peeks in and the frame keeps a natural shape.
   ========================================================================== */
.guide { overflow: hidden; }
@media (min-width: 900px) {
  .section.guide { padding-top: var(--sp-5); }   /* bottom: see the seam below */
}

.guide-head.sec-head { max-width: none; margin-bottom: var(--sp-4); }
.guide h2 {
  font-size: clamp(1.8rem, 3.6vw, 2.9rem);
  line-height: 1.1;
  margin: 0;
}

/* --- Seam: from the guide to the game systems ------------------------------
   A strip of grass and soil (same recipe as .soil-strip) joins the green
   field to the barn wood, and a wooden sign planted on it points to the
   support page. On wide screens the sign sits across the strip, half over
   each section, so both sections pad for it with 46px (half the sign's
   height). On phones the strip widens and holds the sign instead.

   ui_frame.png, 100x69, uniform 7px slice, drawn at 2x.
   ui_frame_vine_left/right.png, 64x44, hung over the sign's top corners. */
.seam {
  position: relative;
  z-index: 2;               /* the sign paints over both sections */
  height: 26px;
  background:
    linear-gradient(180deg,
      var(--forest-400) 0 8px,
      var(--forest-500) 8px 12px,
      transparent 12px),
    repeating-linear-gradient(90deg, var(--dirt-a) 0 16px, var(--dirt-b) 16px 32px);
  border-block: 3px solid var(--outline);
}
/* The strip already draws the edge, so the next section skips its own. */
.seam + .section { border-top: 0; box-shadow: none; }

.seam-sign {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(44rem, calc(100% - var(--gutter) * 2));
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .45rem .75rem;
  border: 14px solid transparent;
  border-image: url("../assets/images/ui/ui_frame.png") 7 fill stretch;
  filter: drop-shadow(0 6px 0 rgba(0, 0, 0, .4));
}
.seam-vine {
  position: absolute;
  top: -34px;
  width: 64px; height: 44px;
  image-rendering: pixelated;
  pointer-events: none;
}
.seam-vine--l { left: -30px; }
.seam-vine--r { right: -30px; }

/* Life-ring tile, same bevel recipe as the support page icons. */
.seam-icon {
  flex: none;
  width: 46px; height: 46px;
  display: grid;
  place-items: center;
  border-radius: var(--r-md);
  background: var(--sun);
  color: var(--ink-dark);
  border: 3px solid var(--outline);
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, .45), 0 3px 0 var(--outline);
}
.seam-text { flex: 1; min-width: 0; }
.seam-title {
  margin: 0;
  font-size: 1.35rem;
  line-height: 1.1;
  color: var(--gui-text);
  text-shadow: 0 2px 0 var(--outline);
}
.seam-text p { margin: .1rem 0 0; font-size: .92rem; line-height: 1.35; color: var(--gui-soft); }
.seam-cta { flex: none; }
.seam-cta .icon { transition: transform var(--t-fast); }
.seam-cta:hover .icon { transform: translateX(3px); }

/* Room in both sections for their half of the sign. The sign belongs to the
   guide, so it sits close under the frame (--sp-6) and the larger gap
   (--after-seam, about 90-105px to the heading) comes after it. */
@media (min-width: 640px) {
  .section.guide { padding-bottom: calc(46px + var(--sp-6)); }
  #features.section {
    --after-seam: clamp(4.5rem, 6vw, 5.5rem);
    padding-top: calc(46px + var(--after-seam));
  }
  /* Jumping to Features from the navbar hides the sign under the navbar
     and leaves the heading about 45px below it, with all tiles in view. */
  #features { scroll-margin-top: calc(var(--sp-6) - 16px - var(--after-seam)); }
}

/* The phone copy of the sign, at the end of the Roadmap (index.html, #roadmap). */
.seam-sign--phone { display: none; }

/* Phones: no strip. The guide meets Game systems with the usual section
   edge, and the sign moves under the Roadmap as a plain box (the copy above). */
@media (max-width: 639px) {
  .seam { display: none; }
  .seam + .section {
    border-top: 3px solid var(--outline);
    box-shadow: inset 0 1px 0 var(--plank-light);
  }
  .seam-sign--phone { display: flex; margin-top: var(--sp-7); }
  .seam-sign {
    position: relative;
    left: auto; top: auto;
    transform: none;
    width: auto;
    flex-wrap: wrap;
    gap: .75rem .85rem;
  }
  .seam-vine { top: -26px; }
  .seam-vine--l { left: -18px; }
  .seam-vine--r { right: -18px; }
  .seam-cta { flex: 1 1 100%; justify-content: center; }
}

/* --- Frame ------------------------------------------------------------------
   farmer_gloves_frame_open.png, 214x169, slice 75 42 37 42 (source px).
   Card colour is painted only over the inner panel; .step-inner is pulled
   out into the see-through parts of the border, as in .help-cta. */
.step-card {
  --s: 2;                                            /* frame scale */
  --pip: 48px;                                       /* step rail icon tile */
  --step-progress: 0;                                /* rail fill, set by main.js */
  position: relative;
  border-style: solid;
  border-color: transparent;
  border-width: calc(75px * var(--s)) calc(42px * var(--s)) calc(37px * var(--s)) calc(42px * var(--s));
  border-image: url("../assets/images/ui/farmer_gloves_frame_open.png") 75 42 37 42 stretch;
  image-rendering: pixelated;
  background-image: linear-gradient(var(--card-bg), var(--card-bg));
  background-repeat: no-repeat;
  background-origin: border-box;
  background-clip: border-box;
  background-position: calc(25px * var(--s)) calc(22px * var(--s));
  background-size: calc(100% - 50px * var(--s)) calc(100% - 39px * var(--s));
  filter: drop-shadow(0 8px 0 rgba(0, 0, 0, .4));
  cursor: pointer;
  touch-action: pan-y;                               /* sideways swipes change the step */
}

/* Three columns: step rail | picture | Nora. */
.step-inner {
  margin: calc(-53px * var(--s)) calc(-17px * var(--s)) calc(-20px * var(--s));
  padding: var(--sp-4) var(--sp-5);
  image-rendering: auto;
  display: grid;
  gap: var(--sp-4);
}
@media (min-width: 760px) {
  .step-inner {
    grid-template-columns: auto minmax(0, 1fr) clamp(130px, 17%, 190px);
    gap: clamp(1rem, 2vw, 1.6rem);
    padding-block: var(--sp-5);
  }
}

/* --- Step rail ----------------------------------------------------------------
   One game icon per step (data.js -> steps[].img) with the step's short
   name, top to bottom, joined by a line. The line fills green up to the
   current step (--step-progress). Current tile gold, finished ones green
   with a tick. The icons keep a fixed gap and sit together in the middle
   of the column, however tall the picture gets. */
.step-rail {
  position: relative;
  align-self: center;
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.step-rail::before,
.step-rail::after {
  content: '';
  position: absolute;
  top: calc(var(--pip) / 2);
  bottom: calc(var(--pip) / 2);
  left: calc(var(--pip) / 2 - 4px);
  width: 8px;
  border-radius: 4px;
}
.step-rail::before {
  background: var(--wood-800);
  box-shadow: inset 0 0 0 2px var(--outline);
}
.step-rail::after {
  background: var(--forest-400);
  border: 2px solid var(--outline);
  transform: scaleY(var(--step-progress));
  transform-origin: top;
  transition: transform .35s var(--ease);
}

.step-pip {
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text-soft);
  font-family: var(--font-display);
  font-size: 1.08rem;
  line-height: 1;
  text-align: left;
  cursor: pointer;
}
.step-pip-icon {
  position: relative;
  flex: none;
  width: var(--pip); height: var(--pip);
  display: grid;
  place-items: center;
  border-radius: var(--r-sm);
  border: 3px solid var(--outline);
  background: var(--wood-700);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .12), inset 0 -3px 0 rgba(0, 0, 0, .25), 0 3px 0 var(--outline);
  transition: transform var(--t-fast), background var(--t-fast);
}
.step-pip-icon .icon { width: 1.4rem; height: 1.4rem; stroke-width: 2.3; }
/* Game icons are 32px pixel art: drawn at 32px so they stay crisp. */
.step-pip-icon img { width: 32px; height: 32px; object-fit: contain; image-rendering: pixelated; }
.step-pip:hover .step-pip-icon { transform: translateY(-2px); background: var(--wood-600); }
.step-pip:hover { color: var(--cream); }

.step-pip-done {
  position: absolute;
  top: -8px; right: -8px;
  width: 20px; height: 20px;
  display: none;
  place-items: center;
  border-radius: 50%;
  border: 2px solid var(--outline);
  background: var(--forest-400);
  color: var(--ink-dark);
}
.step-pip-done .icon { width: 12px; height: 12px; max-width: none; stroke-width: 4; }

.step-pip[data-done] { color: var(--leaf-mist); }
.step-pip[data-done] .step-pip-icon { background: var(--forest-600); }
.step-pip[data-done] .step-pip-done { display: grid; }
.step-pip[aria-current="step"] { color: var(--sun-light); }
.step-pip[aria-current="step"] .step-pip-icon {
  background: var(--sun);
  transform: scale(1.1);
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, .45), inset 0 -3px 0 rgba(0, 0, 0, .18), 0 3px 0 var(--outline), 0 0 0 4px color-mix(in srgb, var(--sun) 30%, transparent);
}

/* --- Step picture -------------------------------------------------------------
   Looping clips from data.js -> steps[].video (or stills from .picture;
   16:9 recommended, they are cropped to fill) fill the whole middle
   column. Every clip sits in the slot at once and only the active one is
   shown (and played, see main.js -> initStepVideos). A missing file shows
   a labelled slot. The step text sits over the bottom left of the picture
   and the round arrows over its sides. */
.step-stage { position: relative; min-width: 0; }
.step-shot {
  position: relative;
  aspect-ratio: 16 / 9;
  width: 100%;
  overflow: hidden;
  border: 3px solid var(--outline);
  border-radius: var(--r-md);
  background: repeating-linear-gradient(135deg, var(--placeholder-a) 0 22px, var(--placeholder-b) 22px 44px);
  box-shadow: 0 0 0 3px var(--frame-wood), inset 0 0 40px rgba(0, 0, 0, .35);
}
.step-shot figure {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  transition: opacity .25s var(--ease);
}
.step-shot figure.is-active { opacity: 1; }
.step-shot img,
.step-shot video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.step-shot figure.is-missing img,
.step-shot figure.is-missing video { display: none; }
.step-shot figure.is-missing::before {
  content: 'Step clip\A' attr(data-file);
  white-space: pre-line;
  position: absolute;
  inset: 12px 76px 45% 76px;           /* kept clear of the arrows and the text */
  display: grid;
  place-items: center;
  padding: .5rem;
  border: 2px dashed color-mix(in srgb, var(--sun) 45%, transparent);
  border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--outline) 35%, transparent);
  color: var(--text-mute);
  font-size: .78rem;
  font-weight: 800;
  line-height: 1.5;
  text-align: center;
  word-break: break-all;
}

/* Round arrows: back on the left (dark), next on the right (gold). Back is
   hidden on the first step. */
.step-arrow {
  -webkit-appearance: none;
  appearance: none;
  position: absolute;
  z-index: 2;
  top: 40%;
  width: 48px; height: 48px;
  margin-top: -24px;
  padding: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 3px solid var(--outline);
  cursor: pointer;
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, .3), 0 4px 0 var(--outline), 0 8px 16px rgba(0, 0, 0, .35);
  transition: transform var(--t-fast), opacity var(--t-fast), background var(--t-fast);
}
.step-arrow .icon { width: 1.5rem; height: 1.5rem; max-width: none; stroke-width: 3; }
.step-arrow--prev { left: 14px; background: var(--wood-800); color: var(--sun-light); }
.step-arrow--prev .icon { transform: rotate(90deg); }
.step-arrow--next { right: 14px; background: var(--sun); color: var(--ink-dark); }
.step-arrow--next .icon { transform: rotate(-90deg); }
.step-arrow:hover { transform: translateY(-2px); }
.step-arrow--prev:hover { background: var(--wood-700); }
.step-arrow--next:hover { background: var(--sun-light); }
.step-arrow:active { transform: translateY(1px); }
.step-arrow:disabled { opacity: 0; pointer-events: none; }

/* Step text straight on the clip, bottom left, no box. A soft shadow fades
   up from the bottom of the clip and the letters carry a dark outline, so
   the text stays readable over bright footage. All texts share one grid
   cell (bottom aligned), so nothing jumps between steps. */
.step-shot::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(0deg,
    color-mix(in srgb, var(--outline) 78%, transparent) 0%,
    color-mix(in srgb, var(--outline) 40%, transparent) 22%,
    transparent 45%);
}
.step-slides {
  position: absolute;
  z-index: 2;
  left: 18px;
  bottom: 14px;
  width: min(24rem, calc(100% - 36px));
  display: grid;
  user-select: text;
  text-shadow:
    2px 0 0 var(--outline), -2px 0 0 var(--outline),
    0 2px 0 var(--outline), 0 -2px 0 var(--outline),
    0 3px 8px rgba(0, 0, 0, .6);
}
.step-slide {
  grid-area: 1 / 1;
  display: grid;
  align-content: end;
  gap: .2rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s var(--ease), visibility 0s .25s;
}
.step-slide.is-active {
  opacity: 1;
  visibility: visible;
  transition: opacity .25s var(--ease), visibility 0s;
}
.step-num {
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--orange-light);
}
.step-slide h3 {
  margin: 0;
  font-size: clamp(1.2rem, 1.9vw, 1.7rem);
  line-height: 1.05;
  color: var(--cream);
}
.step-slide p {
  margin: 0;
  font-size: clamp(.86rem, 1.1vw, .98rem);
  font-weight: 700;
  line-height: 1.4;
  color: var(--sun-light);
}

/* --- Nora ---------------------------------------------------------------------
   Her speech bubble (data.js -> steps[].tip, one per step, stacked like the
   texts) right above her head, and Nora herself standing free (no box) on
   the frame floor, level with the bottom of the picture. She is never
   cropped: on short screens she shrinks to fit under the bubble. */
.step-nora {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 16px;
  min-width: 0;
}
.step-bubble {
  position: relative;
  display: grid;
  padding: .65rem .8rem;
  border: 3px solid var(--outline);
  border-radius: var(--r-md);
  background: var(--cream);
  color: var(--ink-dark);
  box-shadow: inset 0 -3px 0 color-mix(in srgb, var(--wood-400) 35%, transparent), 0 4px 0 var(--outline);
  font-size: .95rem;
  font-weight: 800;
  line-height: 1.3;
}
/* Tail pointing down at Nora: a dark triangle with a cream one inside. */
.step-bubble::before,
.step-bubble::after {
  content: '';
  position: absolute;
  left: 38%;
  border-style: solid;
  border-color: transparent;
}
.step-bubble::before { bottom: -17px; border-width: 14px 11px 0; border-top-color: var(--outline); margin-left: -11px; }
.step-bubble::after  { bottom: -11px; border-width: 10px 7px 0;  border-top-color: var(--cream);   margin-left: -7px; }
.step-tip {
  grid-area: 1 / 1;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s var(--ease), visibility 0s .25s;
}
.step-tip.is-active { opacity: 1; visibility: visible; transition: opacity .25s var(--ease), visibility 0s; }

/* Her box has nora.png's own shape (420x637), so she fits it exactly; a
   soft shadow on the floor under her feet grounds her. The animated
   nora-idle.gif (629x599, Nora left of centre with her watering can) is
   cropped to the same box: object-position 33% keeps her and the can in. */
.step-nora-art {
  position: relative;
  flex: 0 1 auto;
  width: 100%;
  aspect-ratio: 420 / 637;
  min-height: 0;
  margin: 0;
  background: radial-gradient(ellipse 42% 5% at 50% 97%, color-mix(in srgb, var(--outline) 70%, transparent), transparent);
}
.step-nora-art picture { display: contents; }
.step-nora-art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 33% 100%;
  filter: drop-shadow(0 6px 6px rgba(0, 0, 0, .4));
  pointer-events: none;
}

/* --- Desktop: fill the screen -------------------------------------------------
   The section is at least one screen tall (minus the navbar, capped for very
   tall monitors), so the next section never peeks in. The picture takes the
   height left over: the screen height minus the navbar, about 248px for
   the padding (including room for the support sign), heading and frame
   wood, and the card's inner padding (--step-pad-y, roomier on taller
   screens, tighter on short laptops). The rail and Nora match its height.
   Any space left goes above the heading, in green, so the frame and the
   support sign under it stay together as one block.

   Kept from getting long and flat: the whole block is at most 2.4 times as
   wide as the card is tall, so on short laptop screens it narrows a little
   and stays centred instead of stretching. */
@media (min-width: 900px) {
  .section.guide {
    display: grid;
    align-content: end;
    min-height: min(calc(100svh - var(--nav-h)), 60rem);
  }
  .guide > .wrap {
    max-width: min(var(--wrap), calc((100svh - var(--nav-h) - 170px) * 2.4 + var(--gutter) * 2));
  }
  .step-card { --step-pad-y: clamp(1rem, 6svh - 1rem, 2.5rem); }
  .step-inner { padding-block: var(--step-pad-y); }
  .step-stage { height: clamp(240px, calc(100svh - var(--nav-h) - 248px - var(--step-pad-y) * 2), 34rem); }
  .step-shot { aspect-ratio: auto; height: 100%; }
}

/* Wide monitors: Nora's column grows with the frame (it stops at 190px
   otherwise) and the rail tiles get bigger, with the 32px game icons drawn
   at an even 2x on ultrawide screens so they stay crisp. */
@media (min-width: 1700px) {
  .step-inner { grid-template-columns: auto minmax(0, 1fr) clamp(130px, 17%, 15rem); }
  .step-card { --pip: 56px; }
}
@media (min-width: 2100px) {
  .step-card { --pip: 76px; }
  .step-pip-icon img { width: 64px; height: 64px; }
}

/* Narrower desktops and tablets: the rail keeps its icons only. */
@media (min-width: 760px) and (max-width: 999px) {
  .step-pip-label {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}

/* --- Phones: rail across the top, picture, text under it, Nora last -------- */
@media (max-width: 759px) {
  .step-card { --s: 1; --pip: 44px; }
  .step-inner { padding: var(--sp-3) var(--sp-3) var(--sp-4); }

  .step-rail { flex-direction: row; justify-content: space-between; gap: .5rem; }
  .step-rail::before,
  .step-rail::after {
    top: calc(var(--pip) / 2 - 4px);
    bottom: auto;
    left: calc(var(--pip) / 2 + 6px);
    right: calc(var(--pip) / 2 + 6px);
    width: auto;
    height: 8px;
  }
  .step-rail::after { transform: scaleX(var(--step-progress)); transform-origin: left; }
  .step-rail li { width: calc(var(--pip) + 12px); }
  .step-pip { flex-direction: column; gap: .35rem; width: 100%; font-size: .85rem; text-align: center; }

  /* Centred on the 16:9 picture, not on picture + text box: a percentage
     margin is measured from the width, so 28.125% is half the picture's
     height (9 / 16 / 2). */
  .step-arrow { top: 0; width: 40px; height: 40px; margin-top: calc(28.125% - 20px); }
  .step-arrow--prev { left: 8px; }
  .step-arrow--next { right: 8px; }
  .step-shot figure.is-missing::before { inset: 10px 56px; font-size: .7rem; }
  /* The text sits under the clip on the dark frame, so the clip needs no shade. */
  .step-slides { position: relative; left: auto; bottom: auto; width: auto; margin-top: var(--sp-4); padding-inline: 4px; }
  .step-shot::after { display: none; }

  /* Nora small on the left, the bubble pointing at her from the right. */
  .step-nora { flex-direction: row-reverse; align-items: center; gap: 18px; }
  .step-bubble { flex: 1; }
  .step-bubble::before,
  .step-bubble::after { left: auto; top: 50%; bottom: auto; border-color: transparent; }
  .step-bubble::before { left: -17px; margin: -11px 0 0; border-width: 11px 14px 11px 0; border-right-color: var(--outline); }
  .step-bubble::after  { left: -11px; margin: -7px 0 0;  border-width: 7px 10px 7px 0;  border-right-color: var(--cream); }
  /* Head and shoulders in a round green badge. */
  .step-nora-art {
    flex: none;
    width: 84px; height: 84px;
    aspect-ratio: auto;
    overflow: hidden;
    border: 3px solid var(--outline);
    border-radius: 50%;
    background: radial-gradient(circle at 50% 35%, var(--forest-400), var(--forest-600));
    box-shadow: 0 0 0 3px var(--frame-wood);
  }
  .step-nora-art img { width: 100%; height: 200%; object-fit: cover; object-position: 50% 0; filter: none; }
}


/* ==========================================================================
   10  FEATURES
   --------------------------------------------------------------------------
   "There's always something to do on the farm!" centred on top, a grid of
   item cards under it, and "Ready to jump into the game?" at the bottom.
   ========================================================================== */
.systems { display: grid; gap: var(--sp-6); }
.systems-head.sec-head { max-width: none; margin-bottom: 0; }
.systems-head em { white-space: nowrap; }   /* "on the farm!" never splits */
.systems-head h2 { margin: 0; }
/* Intro line under the heading: bigger cream text. */
.systems-intro {
  max-width: 40rem;
  margin: var(--sp-4) auto 0;
}
.sec-head .systems-intro .systems-lead {
  margin: 0;
  text-wrap: balance;
  font-size: clamp(1.1rem, 1.8vw, 1.3rem);
  font-weight: 800;
  line-height: 1.35;
  color: var(--cream);
}

/* "Ready to jump into the game?" + Start your farm, centred under the
   grid. The button matches the hero's Play Now exactly. */
.systems-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-4);
  margin-top: var(--sp-4);
  text-align: center;
}
.systems-cta-title {
  margin: 0;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  color: var(--cream);
  text-shadow: 0 3px 0 var(--outline);
}

.sys-grid {
  display: grid;
  gap: .9rem;
  grid-template-columns: 1fr;
}
@media (min-width: 640px)  { .sys-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 640px) and (max-width: 999px) {
  /* An odd last card spans the row instead of sitting beside a gap. */
  .sys:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (min-width: 1000px) { .sys-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Each card: the game icon on its coloured backlight on the left and the
   title and text beside it. On hover the card lifts, the rim turns gold and the icon
   hops out of its slot. */
.sys {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .8rem 1rem .8rem .8rem;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--sun-light) 4%, transparent), transparent 60%),
    var(--card-bg);
  border: 2px solid var(--card-border);
  border-radius: var(--r-lg);
  box-shadow: var(--bevel), 0 5px 0 rgba(0, 0, 0, .4);
  transition: transform var(--t), border-color var(--t), box-shadow var(--t);
}
.sys:hover {
  transform: translateY(-3px);
  border-color: var(--card-border-hot);
  box-shadow: var(--bevel), 0 8px 0 rgba(0, 0, 0, .4), 0 0 0 3px color-mix(in srgb, var(--sun) 18%, transparent);
}

/* Holds the game icon set on each feature in data.js -> img
   (assets/icons/features/, 32px and 64px pixel art drawn at 56px); without
   `img` the SVG from the sprite is used. No box: the icon floats on a soft
   backlight in its own colour (--glow, from data.js -> features[].glow,
   set inline by main.js), with a faint ring of rays turning behind it.
   On hover the light brightens. */
.sys-icon {
  --glow: var(--sun);
  position: relative;
  flex: none;
  width: 76px; height: 76px;
  display: grid;
  place-items: center;
  color: var(--glow);
}
.sys-icon::before,
.sys-icon::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  transition: opacity var(--t), transform var(--t);
}
/* The backlight. */
.sys-icon::before {
  inset: -10px;
  background: radial-gradient(circle,
    color-mix(in srgb, var(--glow) 75%, transparent) 0%,
    color-mix(in srgb, var(--glow) 34%, transparent) 40%,
    transparent 70%);
  opacity: .85;
}
/* The rays. */
.sys-icon::after {
  inset: -6px;
  background: repeating-conic-gradient(color-mix(in srgb, var(--glow) 32%, transparent) 0deg 8deg, transparent 8deg 30deg);
  -webkit-mask: radial-gradient(circle, #000 25%, transparent 66%);
  mask: radial-gradient(circle, #000 25%, transparent 66%);
  animation: gift-rays 24s linear infinite;
  opacity: .55;
}
.sys:hover .sys-icon::before { opacity: 1; transform: scale(1.12); }
.sys:hover .sys-icon::after { opacity: .9; }
.sys-icon img,
.sys-icon .icon { position: relative; z-index: 1; }
.sys-icon img {
  width: 56px; height: 56px;
  object-fit: contain;
  image-rendering: pixelated;
  filter: drop-shadow(0 4px 0 rgba(0, 0, 0, .35));
  transition: transform var(--t);
}
.sys-icon .icon { width: 2rem; height: 2rem; }
.sys:hover .sys-icon img { transform: translateY(-5px) rotate(-5deg) scale(1.08); }
@media (prefers-reduced-motion: reduce) {
  .sys-icon::after { animation: none; }
}

.sys-body { min-width: 0; flex: 1; }
.sys h3 { font-size: 1.2rem; margin: 0 0 .2rem; color: var(--cream); }
.sys p { font-size: .88rem; color: var(--text-soft); margin: 0; line-height: 1.4; }


/* ==========================================================================
   11  LATEST UPDATES
   ========================================================================== */
.news-grid {
  display: grid;
  gap: var(--sp-5);
  grid-template-columns: 1fr;
}
@media (min-width: 680px) { .news-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .news-grid { grid-template-columns: repeat(3, 1fr); } }
/* Two-column range: an odd last card spans the row and lays out
   side by side (image left, text right) instead of sitting alone. */
@media (min-width: 680px) and (max-width: 979px) {
  .news-card:last-child:nth-child(odd) { grid-column: 1 / -1; flex-direction: row; gap: .4rem; }
  .news-card:last-child:nth-child(odd) .news-media { flex: 0 0 50%; align-self: flex-start; }
}

/* Framed screenshot card. The card is LIGHTER than its section (--card-raised
   on --sec-warm) so the three cards lift clearly off the background. */
.news-card {
  display: flex;
  flex-direction: column;
  padding: .55rem;
  background: var(--card-raised);
  border: 2px solid var(--card-raised-edge);
  border-radius: var(--r-lg);
  box-shadow: var(--bevel), var(--hard);
  transition: transform var(--t), border-color var(--t);
}
.news-card:hover { transform: translateY(-5px) rotate(-.4deg); border-color: var(--card-border-hot); }

.news-media {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--r-sm);
  border: 2px solid var(--outline);
  overflow: hidden;
  background: var(--placeholder-a);
}
.news-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--t-slow);
}
.news-card:hover .news-media img { transform: scale(1.05); }

.news-media-empty {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--forest-400);
  background: repeating-linear-gradient(135deg, var(--placeholder-a) 0 14px, var(--placeholder-b) 14px 28px);
}
.news-media-empty svg { width: 40px; height: 40px; opacity: .7; }
/* "Placeholder" flag sits on the image, not in the meta row, so the meta row
   stays one line and the titles line up across cards. */
.news-flag {
  position: absolute;
  top: .6rem; left: .6rem;
  z-index: 1;
  box-shadow: 0 2px 0 var(--outline);
}

.news-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: .9rem .5rem .45rem;
  gap: .5rem;
}
.news-top { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; }
.news-date { font-size: .78rem; font-weight: 800; color: var(--text-mute); }
.news-card h3 { font-size: 1.2rem; margin: 0; }
.news-card p { font-size: .92rem; color: var(--text-soft); margin: 0; }
.news-foot { margin-top: auto; padding-top: .5rem; }
.news-foot .is-disabled { color: var(--text-mute); font-weight: 800; font-size: .86rem; }


/* ==========================================================================
   11b ROADMAP
   --------------------------------------------------------------------------
   Planned features as stops on a winding dirt path across the green field
   (js/main.js -> renderRoadmap). Phones and tablets: the path runs straight
   down the left with each sign beside its stop. From 900px: the stops sit
   in one row, alternately high and low, with their signs above (high stops)
   or below (low stops), and the SVG path curves through them. The y values
   28 and 72 in renderRoadmap are the stop centres; keep --rm-lane and
   --rm-mark in step with them (centre = mark / 2 from the lane's edge,
   i.e. 4.5rem / 2 / 8rem = 28%).
   ========================================================================== */
.roadmap .sec-head { margin-bottom: var(--sp-5); }
.roadmap .sec-head p:not(.eyebrow) { color: var(--text-on-forest); max-width: 40rem; margin-inline: auto; }

.rm-track {
  --rm-mark: 4.5rem;
  --rm-lane: 8rem;
  position: relative;
}

/* The path. Three strokes on one curve: a dark grassy edge, the dirt, and
   a dotted line of footsteps walking along it. Stroke widths do not stretch
   with the SVG (vector-effect), and the path fades in and out at the ends. */
.rm-path { display: none; }
.rm-path path { fill: none; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; }
.rm-path-edge  { stroke: color-mix(in srgb, var(--forest-950) 70%, transparent); stroke-width: 30px; }
.rm-path-dirt  { stroke: var(--dirt-b); stroke-width: 22px; }
.rm-path-steps {
  stroke: color-mix(in srgb, var(--sun-light) 38%, transparent);
  stroke-width: 5px;
  stroke-dasharray: 1 16;
  animation: rm-walk 1.6s linear infinite;
}
@keyframes rm-walk { to { stroke-dashoffset: -17; } }

/* Narrow screens: one column, straight path down the left. */
.rm-stops {
  position: relative;
  display: grid;
  gap: var(--sp-4);
}
.rm-stops::before {
  content: '';
  position: absolute;
  top: 1rem; bottom: 1rem;
  left: calc(var(--rm-mark) / 2 - 11px);
  width: 22px;
  border-radius: var(--r-pill);
  background:
    radial-gradient(circle, color-mix(in srgb, var(--sun-light) 38%, transparent) 2.5px, transparent 3px) center top / 22px 17px repeat-y,
    var(--dirt-b);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--forest-950) 70%, transparent);
}
.rm-stop {
  position: relative;
  display: grid;
  grid-template-columns: var(--rm-mark) minmax(0, 1fr);
  align-items: center;
  gap: var(--sp-4);
}

/* The stop: a round wooden plot with the game icon on its coloured light.
   Hovering the stop (or its sign) makes the icon hop. */
.rm-mark {
  --glow: var(--sun);
  position: relative;
  z-index: 1;
  width: var(--rm-mark); height: var(--rm-mark);
  display: grid;
  place-items: center;
  border-radius: 50%;
  background:
    radial-gradient(circle, color-mix(in srgb, var(--glow) 55%, transparent) 0%, color-mix(in srgb, var(--glow) 18%, transparent) 50%, transparent 72%),
    var(--wood-850);
  border: 3px solid var(--wood-500);
  box-shadow: 0 0 0 3px var(--outline), var(--bevel), 0 6px 0 3px color-mix(in srgb, var(--outline) 70%, transparent);
  transition: transform var(--t), border-color var(--t);
}
.rm-mark img {
  width: 3.1rem; height: 3.1rem;
  object-fit: contain;
  image-rendering: pixelated;
  filter: drop-shadow(0 3px 0 rgba(0, 0, 0, .35));
  transition: transform var(--t);
}
.rm-stop:hover .rm-mark { transform: translateY(-3px); border-color: var(--sun); }
.rm-stop:hover .rm-mark img { transform: translateY(-4px) rotate(-6deg) scale(1.08); }

/* The last stop, "and more": a dashed plot with a bobbing question mark. */
.rm-stop.is-more .rm-mark {
  border-style: dashed;
  border-color: var(--sun);
  background: color-mix(in srgb, var(--forest-950) 75%, transparent);
}
.rm-q {
  font-family: var(--font-display);
  font-size: 2.4rem;
  line-height: 1;
  color: var(--sun);
  text-shadow: 0 3px 0 var(--outline);
  animation: rm-bob 2.4s var(--ease) infinite;
}
@keyframes rm-bob {
  0%, 100% { transform: translateY(0) rotate(-6deg); }
  50%      { transform: translateY(-5px) rotate(6deg); }
}

/* The sign: a little wooden plank with the feature name and one line. */
.rm-sign {
  position: relative;
  padding: .6rem .85rem .7rem;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--sun-light) 5%, transparent), transparent 60%),
    var(--card-bg);
  border: 2px solid var(--card-border);
  border-radius: var(--r-md);
  box-shadow: var(--bevel), 0 4px 0 rgba(0, 0, 0, .4);
  transition: border-color var(--t);
}
.rm-stop:hover .rm-sign { border-color: var(--card-border-hot); }
.rm-sign h3 { font-size: 1.1rem; margin: 0 0 .15rem; }
.rm-sign p { font-size: .85rem; line-height: 1.4; color: var(--text-soft); margin: 0; }
.rm-stop.is-more .rm-sign { border-style: dashed; }

/* Wide screens: one row of stops along the winding path. The track is a
   three-row grid (signs above, the path lane, signs below); the list and
   each stop share those rows through subgrid. */
@media (min-width: 900px) {
  .rm-track {
    display: grid;
    grid-template-rows: auto var(--rm-lane) auto;
  }
  .rm-path {
    display: block;
    grid-row: 2;
    grid-column: 1;
    width: 100%; height: 100%;
    -webkit-mask: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
    mask: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
  }
  .rm-stops {
    grid-row: 1 / -1;
    grid-column: 1;
    grid-template-columns: repeat(var(--stops, 6), minmax(0, 1fr));
    grid-template-rows: subgrid;
    gap: 0 var(--sp-3);
  }
  .rm-stops::before { display: none; }
  .rm-stop {
    grid-row: 1 / -1;
    grid-template-columns: none;
    grid-template-rows: subgrid;
    justify-items: center;
    gap: 0;
  }
  .rm-mark { grid-row: 2; align-self: start; }
  .rm-stop.is-low .rm-mark { align-self: end; }
  .rm-sign {
    grid-row: 1;
    align-self: end;
    width: 100%;
    margin-bottom: .9rem;
    text-align: center;
  }
  .rm-stop.is-low .rm-sign { grid-row: 3; align-self: start; margin: .9rem 0 0; }
  /* A short post joins each sign to its stop. */
  .rm-sign::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 100%;
    width: 6px; height: .9rem;
    margin-left: -3px;
    background: var(--wood-500);
    border-inline: 2px solid var(--outline);
  }
  .rm-stop.is-low .rm-sign::after { top: auto; bottom: 100%; }
}
@media (min-width: 900px) and (max-width: 1099px) {
  .rm-sign { padding: .55rem .6rem .65rem; }
  .rm-sign h3 { font-size: 1rem; }
  .rm-sign p { font-size: .8rem; }
}
@media (prefers-reduced-motion: reduce) {
  .rm-path-steps, .rm-q { animation: none; }
}

/* Creator Program: one slim line under the path, deliberately small. */
.creator-note {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: .5rem .8rem;
  width: fit-content;
  max-width: 100%;
  margin: var(--sp-6) auto 0;
  padding: .45rem .6rem .45rem .5rem;
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--outline) 55%, transparent);
  border: 2px solid color-mix(in srgb, var(--divider-grass) 60%, transparent);
  color: var(--text-on-forest);
  font-size: .9rem;
  line-height: 1.35;
}
.creator-note p { margin: 0; }
.creator-note strong { color: var(--cream); }
.creator-note-icon {
  flex: none;
  width: 28px; height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--sun);
  color: var(--ink-dark);
  border: 2px solid var(--outline);
}
.creator-note-link {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  color: var(--sun);
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
}
.creator-note-link .icon { transition: transform var(--t-fast); }
.creator-note-link:hover { text-decoration: underline; }
.creator-note-link:hover .icon { transform: translateX(3px); }
@media (max-width: 639px) {
  .creator-note { border-radius: var(--r-md); padding: .65rem .8rem; text-align: center; }
}


/* ==========================================================================
   12  LEADERBOARDS
   ========================================================================== */
.lb .wrap { position: relative; z-index: 1; }
.lb-board { max-width: 900px; margin-inline: auto; }

.lb-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
  justify-content: space-between;
  margin-bottom: var(--sp-5);
}

/* Wooden tabs; the active one becomes a gold sign. */
.lb-tabs {
  display: flex;
  gap: .4rem;
  overflow-x: auto;
  padding: 0 0 .5rem;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}
.lb-tab {
  flex: none;
  padding: .5rem 1rem;
  border-radius: var(--r-sm);
  border: 2px solid var(--gui-edge);
  background: var(--wood-600);
  color: var(--gui-text);
  font-family: var(--font-display);
  font-size: 1rem;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .1), 0 3px 0 var(--gui-edge);
  transition: background var(--t-fast), color var(--t-fast), transform var(--t-fast);
}
.lb-tab:hover { background: var(--wood-400); transform: translateY(-1px); }
.lb-tab[aria-selected="true"] {
  background: var(--sun);
  border-color: var(--sun-deep);
  color: var(--ink-dark);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .45), 0 3px 0 var(--sun-deep);
}
.lb-tab[disabled] { opacity: .45; cursor: not-allowed; }

.mc-panel .badge-sample {
  background: var(--gui-panel-in);
  border-color: var(--sun-deep);
  color: var(--sun);
}

/* --- Podium --------------------------------------------------------------- */
.lb-podium { display: grid; gap: var(--sp-3); margin-bottom: var(--sp-4); }
@media (min-width: 760px) {
  .lb-podium { grid-template-columns: repeat(3, 1fr); align-items: end; gap: var(--sp-4); }
}

/* ui_frame.png, 100x69, uniform 7px slice, drawn at 2x. */
.podium {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: .5rem;
  padding: var(--sp-3);
  background: var(--gui-panel);
  border: 14px solid transparent;
  border-image: url("../assets/images/ui/ui_frame.png") 7 fill stretch;
  transition: transform var(--t), filter var(--t);
}
.podium:hover { transform: translateY(-4px); filter: drop-shadow(0 6px 0 rgba(0, 0, 0, .28)); }
@media (min-width: 760px) {
  .podium[data-rank="1"] { order: 2; padding-block: var(--sp-6) var(--sp-5); }
  .podium[data-rank="2"] { order: 1; }
  .podium[data-rank="3"] { order: 3; }
}
.podium[data-rank="1"] { filter: drop-shadow(0 0 14px color-mix(in srgb, var(--sun) 45%, transparent)); }
.podium[data-rank="1"]::after {
  content: '';
  position: absolute;
  inset: -2px;
  border: 3px solid var(--sun);
  border-radius: 6px;
  pointer-events: none;
}

.podium-medal {
  display: inline-grid;
  place-items: center;
  width: 30px; height: 30px;
  border-radius: var(--r-xs);
  font-family: var(--font-pixel);
  font-size: .52rem;
  color: var(--ink-dark);
  background: var(--medal-base);
  border: 2px solid var(--gui-edge);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .45), 0 2px 0 var(--gui-edge);
}
.podium[data-rank="1"] .podium-medal { background: var(--sun); }
.podium[data-rank="2"] .podium-medal { background: var(--medal-silver); }
.podium[data-rank="3"] .podium-medal { background: var(--medal-bronze); }

.lb-avatar {
  width: 56px; height: 56px;
  display: grid;
  place-items: center;
  border-radius: var(--r-xs);
  background: var(--forest-600);
  color: #fff;
  font-family: var(--font-display);
  font-size: 1.4rem;
  line-height: 1;
  border: 2px solid var(--gui-edge);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .22), 0 2px 0 var(--gui-edge);
  image-rendering: pixelated;
  overflow: hidden;
  flex: none;
}
.lb-avatar img { width: 100%; height: 100%; object-fit: cover; }
.podium[data-rank="1"] .lb-avatar { width: 68px; height: 68px; font-size: 1.75rem; }

.podium-name { font-family: var(--font-display); font-size: 1.15rem; color: var(--gui-text); word-break: break-word; }
.podium-value { font-family: var(--font-display); font-size: 1.4rem; color: var(--sun); line-height: 1.1; }
.podium-stat { font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--gui-muted); }

/* --- Rows 4 to 10 ---------------------------------------------------------- */
.lb-rows { display: grid; gap: .4rem; }
/* task_frame.png, 101x69, uniform 6px slice, drawn at 2x. */
.lb-row {
  display: grid;
  grid-template-columns: 2.2rem 40px 1fr auto;
  align-items: center;
  gap: .75rem;
  padding: .2rem .35rem;
  background: var(--gui-panel-in);
  border: 12px solid transparent;
  border-image: url("../assets/images/ui/task_frame.png") 6 fill stretch;
  transition: transform var(--t-fast), filter var(--t-fast);
}
.lb-row:hover { transform: translateX(3px); filter: brightness(1.18); }
.lb-rank { font-family: var(--font-pixel); font-size: .62rem; color: var(--sun-light); text-align: center; }
.lb-row .lb-avatar { width: 40px; height: 40px; font-size: 1rem; }
.lb-name {
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--gui-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lb-value { font-family: var(--font-display); color: var(--sun); white-space: nowrap; }

.lb-empty {
  padding: var(--sp-6) var(--sp-4);
  text-align: center;
  border: 3px dashed var(--gui-frame);
  border-radius: var(--r-sm);
  background: var(--gui-panel-in);
  color: var(--gui-soft);
}
.lb-empty p { margin: 0; }
.lb-empty strong { color: var(--sun); }
.lb-empty-mob { width: 96px; height: auto; margin: 0 auto var(--sp-3); image-rendering: pixelated; }

.lb-foot {
  margin-top: var(--sp-5);
  font-size: .82rem;
  color: var(--text-mute);
  text-align: center;
}


/* ==========================================================================
   13  LAST SECTION SPACING, POPUPS, COOKIE NOTICE
   ========================================================================== */
/* The last section on every page leaves room for the animal parade that
   stands on the footer edge (see .ft-parade). */
main > .section:last-child { padding-bottom: calc(var(--sp-8) + 80px); }
@media (min-width: 900px) { main > .section:last-child { padding-bottom: calc(var(--sp-9) + 90px); } }


/* --- Wiki link while it has no address ------------------------------------ */
[data-wiki].is-soon { cursor: default; }
[data-wiki].is-soon::after {
  content: 'Soon';
  margin-left: .35rem;
  padding: .1rem .35rem;
  border-radius: var(--r-xs);
  background: color-mix(in srgb, var(--sun) 20%, transparent);
  color: var(--sun-light);
  font-family: var(--font-body);
  font-size: .58rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  vertical-align: 1px;
}

/* --- Popup overlay -----------------------------------------------------------
   One layer above everything (nav included; the skip link and the cookie
   notice excepted) that blurs and dims the page and centres the popup cards
   in a column (the Discord invitation). If the stack is taller than the
   screen the layer scrolls (margin:auto keeps the top reachable, which
   justify-content:center would not). body.has-popups stops the page behind
   from scrolling. */
body.has-popups { overflow: hidden; }
.popups {
  position: fixed;
  inset: 0;
  z-index: 150;
  display: flex;
  padding: 24px 20px;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: color-mix(in srgb, var(--outline) 55%, transparent);
  -webkit-backdrop-filter: blur(7px) saturate(.85);
  backdrop-filter: blur(7px) saturate(.85);
  opacity: 0;
  transition: opacity .35s var(--ease);
}
.popups[hidden] { display: none; }
.popups.is-open { opacity: 1; }
.popups-stack {
  margin: auto;
  width: min(34rem, 100%);   /* rem: grows with the text on wide monitors */
  display: grid;
  gap: 18px;
}
.popups-stack > [hidden] { display: none; }

@media (max-width: 480px) {
  .popups { padding: 16px 12px; }
  .popups-stack { gap: 12px; }
}

/* --- "Claim free gift" (Farmer's Pack) Discord invitation --------------------
   A green card with a gold rim. On top, the game's red ribbon
   (banner.png, 182x44, slice 4 40 18 40, drawn 1.5x) straddles the rim
   with "Farmer's Pack", and the big CLAIM FREE GIFT title sits centred
   under it. Below, the gift turns on a sunburst on the left and the pitch,
   Join button and "Maybe later" sit on the right. The X is the game's own close
   button (ui/close_button.png, 17x17, drawn 2x). */
.discord-popup {
  position: relative;
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  grid-template-areas:
    "ribbon ribbon"
    "title  title"
    "art    body";
  align-items: center;
  column-gap: 18px;
  margin-top: 22px;                     /* room for the ribbon above the rim */
  padding: 0 28px 26px 18px;
  background-color: var(--forest-700);
  background-image:
    radial-gradient(ellipse 70% 38% at 50% 18%, color-mix(in srgb, var(--sun) 26%, transparent), transparent 75%),
    radial-gradient(ellipse 60% 70% at 18% 100%, color-mix(in srgb, var(--forest-400) 26%, transparent), transparent 70%),
    repeating-linear-gradient(135deg, var(--forest-700) 0 22px, var(--forest-800) 22px 44px);
  border: 3px solid var(--sun);
  border-radius: var(--r-xl);
  box-shadow:
    inset 0 0 0 3px var(--outline),
    0 0 0 3px var(--outline),
    0 9px 0 var(--outline),
    0 26px 50px rgba(0, 0, 0, .5);
  color: var(--text-on-forest);
  opacity: 0;
  transform: translateY(28px) scale(.97);
  transition: opacity .35s var(--ease), transform .45s var(--ease);
}
.discord-popup.is-open { opacity: 1; transform: none; }

.discord-popup-ribbon {
  grid-area: ribbon;
  justify-self: center;
  margin-top: -24px;
  border-style: solid;
  border-color: transparent;
  border-width: 6px 60px 27px 60px;
  border-image: url("../assets/images/ui/banner.png") 4 40 18 40 fill stretch;
  image-rendering: pixelated;
  padding: 2px 4px 0;
  font-family: var(--font-display);
  font-size: 1.15rem;
  line-height: 1.2;
  color: var(--cream);
  text-shadow: 0 2px 0 rgba(0, 0, 0, .45);
  white-space: nowrap;
}

/* The big title: cream letters with a thick dark outline and a hard drop,
   like the game's own headline text. The outline is stacked shadows rather
   than text-stroke, so it looks the same in every browser. */
.discord-popup-title {
  grid-area: title;
  margin: 2px 0 14px;
  text-align: center;
  text-transform: uppercase;
  font-size: clamp(2.3rem, 9vw, 3.4rem);
  line-height: .95;
  letter-spacing: .01em;
  color: var(--cream);
  text-shadow:
    3px 0 0 var(--outline), -3px 0 0 var(--outline),
    0 3px 0 var(--outline), 0 -3px 0 var(--outline),
    2px 2px 0 var(--outline), -2px 2px 0 var(--outline),
    2px -2px 0 var(--outline), -2px -2px 0 var(--outline),
    0 6px 0 var(--outline), 3px 6px 0 var(--outline), -3px 6px 0 var(--outline),
    0 14px 18px rgba(0, 0, 0, .35);
}
.discord-popup-title span { color: var(--sun); }

/* The gift on its own square: a warm glow, sun rays turning behind it, and
   the 30x32 pixel art scaled 4x (pixelated, so it stays crisp) with a
   little hop and wiggle. */
.discord-popup-art {
  grid-area: art;
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--sun) 48%, transparent) 0%, transparent 68%);
}
.discord-popup-art::before {
  content: '';
  position: absolute;
  inset: -6%;
  border-radius: 50%;
  background: repeating-conic-gradient(color-mix(in srgb, var(--sun-light) 30%, transparent) 0deg 10deg, transparent 10deg 30deg);
  -webkit-mask: radial-gradient(circle, #000 30%, transparent 70%);
  mask: radial-gradient(circle, #000 30%, transparent 70%);
  animation: gift-rays 14s linear infinite;
}
.discord-popup-art img {
  position: relative;
  width: 120px;
  height: 128px;
  image-rendering: pixelated;
  filter: drop-shadow(0 6px 0 rgba(0, 0, 0, .35));
  animation: gift-hop 2.6s var(--ease) infinite;
}
@keyframes gift-rays { to { transform: rotate(360deg); } }
@keyframes gift-hop {
  0%, 60%, 100% { transform: translateY(0) rotate(0); }
  70% { transform: translateY(-6px) rotate(-6deg); }
  80% { transform: translateY(0) rotate(5deg); }
  90% { transform: translateY(-2px) rotate(-2deg); }
}
@media (prefers-reduced-motion: reduce) {
  .discord-popup-art::before,
  .discord-popup-art img { animation: none; }
}

.discord-popup-body { grid-area: body; display: grid; gap: .8rem; justify-items: start; }
.discord-popup p { margin: 0; font-size: 1.02rem; font-weight: 700; line-height: 1.45; color: var(--cream); }
.discord-popup p strong { color: var(--sun); }
.discord-popup-join { width: 100%; justify-content: center; }
.discord-popup-later {
  justify-self: center;
  padding: .1rem 0;
  background: none;
  border: 0;
  color: var(--text-on-forest);
  font-weight: 800;
  font-size: .88rem;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.discord-popup-later:hover { color: var(--sun-light); }

/* The game's close button, drawn 2x and crisp. */
.discord-popup-x {
  -webkit-appearance: none;
  appearance: none;
  position: absolute;
  z-index: 1;
  top: 14px; right: 14px;
  width: 34px; height: 34px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  filter: drop-shadow(0 3px 0 rgba(0, 0, 0, .4));
  transition: transform var(--t-fast), filter var(--t-fast);
}
.discord-popup-x img { display: block; width: 34px; height: 34px; image-rendering: pixelated; }
.discord-popup-x:hover { transform: scale(1.1) rotate(4deg); filter: drop-shadow(0 3px 0 rgba(0, 0, 0, .4)) brightness(1.12); }
.discord-popup-x:active { transform: scale(.95); }
.discord-popup :focus-visible { outline-color: var(--sun-light); }

/* Wide monitors: the gift scales with the bigger text (5x, still crisp). */
@media (min-width: 2100px) {
  .discord-popup { grid-template-columns: 190px minmax(0, 1fr); }
  .discord-popup-art img { width: 150px; height: 160px; }
}

/* Phones: everything in one centred column, the gift above the text. */
@media (max-width: 480px) {
  .discord-popup {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "ribbon" "title" "art" "body";
    padding: 0 18px 20px;
    text-align: center;
  }
  .discord-popup-ribbon { font-size: 1rem; border-width: 4px 40px 18px 40px; margin-top: -16px; }
  .discord-popup-title { margin-bottom: 6px; font-size: clamp(2rem, 9vw, 2.6rem); }
  /* The X sits on the card's corner, clear of the big title. */
  .discord-popup-x { top: -13px; right: -9px; }
  .discord-popup-art { width: 104px; justify-self: center; }
  .discord-popup-art img { width: 60px; height: 64px; }   /* 2x, crisp */
  .discord-popup-body { justify-items: center; margin-top: 6px; }
  .discord-popup p { font-size: .95rem; }
}

/* --- Cookie notice -----------------------------------------------------------
   A small warm wood card fixed in the bottom-left corner (full width with
   a margin on phones). No backdrop: the page stays usable behind it, and it
   sits above the Discord overlay so it can still be answered. The cookie
   (ui/cookie.png) sits on a warm glow in its own column; if the file goes
   missing a labelled slot shows instead. */
.cookies {
  position: fixed;
  left: 20px;
  bottom: 20px;
  z-index: 160;
  width: min(390px, calc(100% - 40px));
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 14px 18px 14px 10px;
  background-color: var(--wood-850);
  background-image:
    radial-gradient(ellipse 70% 80% at 15% 50%, color-mix(in srgb, var(--sun) 14%, transparent), transparent 70%),
    repeating-linear-gradient(90deg, var(--wood-850) 0 26px, var(--wood-800) 26px 52px);
  border: 3px solid var(--wood-500);
  border-radius: var(--r-lg);
  box-shadow: 0 5px 0 var(--outline), 0 14px 30px rgba(0, 0, 0, .4);
  color: var(--cream);
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .35s var(--ease), transform .45s var(--ease);
}
.cookies[hidden] { display: none; }
.cookies.is-open { opacity: 1; transform: none; }

.cookies-art {
  position: relative;
  display: grid;
  place-items: center;
  margin: 0;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--sun) 30%, transparent) 0%, transparent 66%);
}
/* cookie.png is 36x36 pixel art: shown at 2x, pixelated so it stays crisp. */
.cookies-art img {
  width: 72px;
  height: 72px;
  image-rendering: pixelated;
  filter: drop-shadow(0 5px 0 rgba(0, 0, 0, .35));
  animation: cookie-bob 3.2s ease-in-out infinite;
}
@keyframes cookie-bob {
  0%, 100% { transform: translateY(0) rotate(-4deg); }
  50%      { transform: translateY(-4px) rotate(4deg); }
}
@media (prefers-reduced-motion: reduce) { .cookies-art img { animation: none; } }
.cookies-art.is-missing img { display: none; }
.cookies-art.is-missing::before {
  content: attr(data-file);
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: .4rem;
  border: 2px dashed color-mix(in srgb, var(--sun) 45%, transparent);
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--outline) 35%, transparent);
  color: var(--text-mute);
  font-size: .72rem;
  font-weight: 800;
  text-align: center;
}

.cookies-body { display: grid; gap: .45rem; justify-items: start; }
.cookies-title { font-size: 1.15rem; color: var(--sun); text-shadow: 0 3px 0 rgba(0, 0, 0, .35); }
.cookies p { margin: 0; font-size: .84rem; line-height: 1.4; }
.cookies-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .9rem; margin-top: .2rem; }
.cookies-alt,
.ft-cookies {
  padding: .3rem 0;
  background: none;
  border: 0;
  color: inherit;
  font: inherit;
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.cookies-alt { font-size: .85rem; }
.cookies-alt:hover,
.ft-cookies:hover { color: var(--sun-light); }
.ft-cookies { padding: 0; }
.cookies :focus-visible { outline-color: var(--sun-light); }

/* Phones: a slim card so it covers as little of the page as possible. The
   cookie shrinks to a small badge beside the title, the text is shorter
   on the line, and both buttons sit on one row. */
@media (max-width: 480px) {
  .cookies {
    left: 10px;
    bottom: 10px;
    width: calc(100% - 20px);
    grid-template-columns: 40px minmax(0, 1fr);
    align-items: start;
    gap: 4px 10px;
    padding: 10px 12px;
  }
  .cookies-art { align-self: start; }
  .cookies-art img { width: 36px; height: 36px; animation: none; }   /* 1x, crisp */
  .cookies-body { gap: .3rem; }
  .cookies-title { font-size: 1rem; line-height: 1.1; margin: 0; }
  .cookies p { font-size: .78rem; line-height: 1.35; }
  .cookies-actions { flex-wrap: nowrap; gap: .8rem; margin-top: .15rem; }
  .cookies-actions .btn { padding-block: .4rem; }
}
/* ==========================================================================
   14  FOOTER
   ========================================================================== */
.ft {
  position: relative;
  background: var(--footer-bg);
  color: var(--text-soft);
  font-size: .93rem;
  border-top: 6px solid var(--divider-grass);
  box-shadow: inset 0 4px 0 rgba(0, 0, 0, .3);
}
.ft a { color: var(--text-soft); text-decoration: none; }
.ft a:hover { color: var(--sun); }

/* Animals standing on the footer's grass edge. */
.ft-parade {
  position: absolute;
  left: 0; right: 0;
  top: -6px;
  display: flex;
  justify-content: center;
  pointer-events: none;
}
.ft-parade img {
  width: 470px; height: auto;
  transform: translateY(-100%);
  image-rendering: pixelated;
}
@media (max-width: 560px) { .ft-parade img { width: 300px; } }

.ft-top {
  display: grid;
  gap: var(--sp-6);
  padding-block: var(--sp-7) var(--sp-6);
}
@media (min-width: 760px) {
  .ft-top { grid-template-columns: minmax(0, 1.6fr) repeat(2, minmax(0, 1fr)); }
}
.ft-blurb { margin: var(--sp-3) 0 var(--sp-4); max-width: 30rem; }

.ft-socials { display: flex; gap: .5rem; flex-wrap: wrap; }
.ft-socials a {
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  border-radius: var(--r-sm);
  background: var(--card-bg);
  border: 2px solid var(--card-border);
  color: var(--text);
}
.ft-socials a:hover { background: var(--sun); color: var(--ink-dark); border-color: var(--sun); }

.ft-col h4 {
  font-family: var(--font-body);
  color: var(--eyebrow-ink);
  font-size: .74rem;
  font-weight: 900;
  letter-spacing: .16em;
  text-transform: uppercase;
  margin-bottom: var(--sp-3);
}
.ft-col li { margin-bottom: .55rem; }

.ft-bottom {
  border-top: 2px solid var(--footer-rule);
  padding-block: var(--sp-4) var(--sp-5);
  display: grid;
  gap: var(--sp-3);
  font-size: .82rem;
  color: var(--text-mute);
}
@media (min-width: 760px) { .ft-bottom { grid-template-columns: 1fr auto; align-items: center; } }
.ft-legal { display: flex; flex-wrap: wrap; gap: var(--sp-4); }
.ft-disclaimer { margin-top: .2rem; font-size: .78rem; line-height: 1.6; }


/* ==========================================================================
   15  SUPPORT PAGE
   ========================================================================== */
.support-hero {
  position: relative;
  --eyebrow-ink: var(--sun);
  overflow: hidden;
  padding-block: var(--sp-8);
  background-color: var(--sec-forest-a);
  background-image:
    radial-gradient(ellipse 70% 60% at 50% 40%, color-mix(in srgb, var(--forest-400) 14%, transparent), transparent 70%),
    repeating-linear-gradient(135deg, var(--sec-forest-a) 0 38px, var(--sec-forest-b) 38px 76px);
}
.support-hero .wrap { position: relative; z-index: 1; }
.support-hero .btn-row { margin-top: var(--sp-6); }
.support-hero h1 {
  color: var(--sun);
  font-size: clamp(2.4rem, 7vw, 4rem);
  text-shadow: 0 4px 0 var(--outline);
}
.support-hero p:not(.eyebrow) { font-size: 1.1rem; color: var(--text-on-forest); max-width: 40rem; }

.sup-mob {
  position: absolute;
  right: 7%;
  bottom: 0;
  width: 160px;
  height: auto;
  image-rendering: pixelated;
  pointer-events: none;
  display: none;
  filter: drop-shadow(0 10px 10px rgba(0, 0, 0, .5));
}
@media (min-width: 1000px) { .sup-mob { display: block; } }

.sup-grid { display: grid; gap: var(--sp-4); grid-template-columns: 1fr; }
@media (min-width: 640px)  { .sup-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .sup-grid { grid-template-columns: repeat(3, 1fr); } }

.sup-card {
  display: flex;
  flex-direction: column;
  gap: .55rem;
  padding: var(--sp-5);
  background: var(--card-bg);
  border: 2px solid var(--card-border);
  border-radius: var(--r-lg);
  box-shadow: var(--bevel), var(--hard);
  transition: transform var(--t), border-color var(--t);
}
.sup-card:hover { transform: translateY(-4px); border-color: var(--card-border-hot); }
.sup-card .sup-icon {
  width: 52px; height: 52px;
  display: grid;
  place-items: center;
  border-radius: var(--r-md);
  background: var(--sun);
  color: var(--ink-dark);
  border: 3px solid var(--outline);
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, .45), 0 4px 0 var(--outline);
  margin-bottom: .35rem;
}
.sup-card:nth-child(even) .sup-icon { background: var(--orange); }
.sup-card h3 { margin: 0; font-size: 1.3rem; }
.sup-card p { font-size: .94rem; color: var(--text-soft); margin: 0; }
.sup-card .link-arrow { margin-top: auto; padding-top: var(--sp-3); }

/* --- FAQ accordion --------------------------------------------------------- */
.faq { display: grid; gap: .6rem; max-width: 48rem; margin-inline: auto; }
.faq-item {
  background: var(--card-bg);
  border: 2px solid var(--card-border);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: border-color var(--t);
}
.faq-item:hover { border-color: var(--card-raised-edge); }
.faq-item.is-open { border-color: var(--card-border-hot); }
.faq-item h3 { margin: 0; }

.faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: 1rem 1.2rem;
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 1.02rem;
  color: var(--cream);
}
.faq-q:hover { color: var(--sun); }
.faq-chev { flex: none; color: var(--orange); transition: transform var(--t); }
.faq-item.is-open .faq-chev { transform: rotate(180deg); }

.faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--t); }
.faq-item.is-open .faq-a { grid-template-rows: 1fr; }
.faq-a > div { overflow: hidden; }
.faq-a p { padding: 0 1.2rem 1.15rem; margin: 0; color: var(--text-soft); font-size: .96rem; }

/* --- Support contact banner ------------------------------------------------
   Framed in the game's farmer-gloves frame. farmer_gloves_frame_open.png is
   a copy of the original with the brown inner panel made transparent (vines
   kept), so only the wooden frame and vines show.

   9-slice (source px): 75 42 37 42. The slices are this big so each top
   corner holds its whole vine (vines reach 74px down and 41px in) and the
   post texture near the bottom stays in the corner instead of stretching.
   Drawn at 2x on wider screens, 1x on phones (whole pixels stay crisp).

   Inside the frame the card colour is painted only over the inner panel
   (source inset 22 25 17 25), and .help-cta-inner is pulled up and out into
   the see-through parts of the border so the content uses that space. */
.help-cta {
  --s: 2;                                   /* frame scale */
  border-style: solid;
  border-color: transparent;
  border-width: calc(75px * var(--s)) calc(42px * var(--s)) calc(37px * var(--s)) calc(42px * var(--s));
  border-image: url("../assets/images/ui/farmer_gloves_frame_open.png") 75 42 37 42 stretch;
  image-rendering: pixelated;
  background-image: linear-gradient(var(--card-bg), var(--card-bg));
  background-repeat: no-repeat;
  background-origin: border-box;
  background-clip: border-box;
  background-position: calc(25px * var(--s)) calc(22px * var(--s));
  background-size: calc(100% - 50px * var(--s)) calc(100% - 39px * var(--s));
  filter: drop-shadow(0 8px 0 rgba(0, 0, 0, .4));
  text-align: center;
}
.help-cta-inner {
  margin: calc(-53px * var(--s)) calc(-17px * var(--s)) calc(-20px * var(--s));
  padding: var(--sp-7) var(--sp-6) var(--sp-6);
  image-rendering: auto;
}
@media (max-width: 560px) {
  .help-cta { --s: 1; }
  .help-cta-inner { padding: var(--sp-6) var(--sp-4) var(--sp-5); }
  .help-cta .btn-row .btn { width: 100%; font-size: 1rem; padding-inline: 1rem; }
}
.help-cta p:not(.eyebrow) { color: var(--text-soft); max-width: 36rem; margin-inline: auto; }
.help-cta .btn-row { justify-content: center; margin-top: var(--sp-5); }
/* Life-ring tile, same bevel recipe as the support category icons. */
.help-cta-icon {
  display: inline-grid;
  place-items: center;
  width: 64px; height: 64px;
  margin-bottom: var(--sp-5);
  border-radius: var(--r-lg);
  background: var(--sun);
  color: var(--ink-dark);
  border: 3px solid var(--outline);
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, .45), 0 4px 0 var(--outline);
}

/* ==========================================================================
   15b  PHONE LAYOUT
   --------------------------------------------------------------------------
   One place for phone-only adjustments (up to 560px wide), so the pages stay
   compact and scannable instead of becoming one long column of tall cards.
   ========================================================================== */
@media (max-width: 560px) {
  /* Tighter section rhythm */
  .section { padding-block: var(--sp-7); }
  .section-fenced { padding-top: calc(var(--sp-7) + 24px); }
  .sec-head { margin-bottom: var(--sp-5); }
  .sec-head p:not(.eyebrow) { font-size: .98rem; }

  /* Features: two compact columns, icon on top */
  .sys-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; }
  .sys { flex-direction: column; gap: .7rem; padding: .9rem .7rem .8rem; text-align: center; }
  .sys-icon { width: 60px; height: 60px; }
  .sys-icon img { width: 44px; height: 44px; }
  .sys h3 { font-size: 1.02rem; }
  .sys p { font-size: .8rem; }
  .sys:last-child:nth-child(odd) { grid-column: 1 / -1; }

  /* Leaderboard: tabs scroll with a fade hint; podium sits side by side */
  .lb-tabs {
    -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent);
            mask-image: linear-gradient(90deg, #000 85%, transparent);
    padding-right: 1.5rem;
  }
  .lb-podium { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; gap: .35rem; }
  .podium { padding: .5rem .2rem; gap: .3rem; border-width: 8px; }
  .podium[data-rank="1"] { order: 2; padding-block: 1rem .75rem; }
  .podium[data-rank="2"] { order: 1; }
  .podium[data-rank="3"] { order: 3; }
  .podium .lb-avatar { width: 38px; height: 38px; font-size: 1rem; }
  .podium[data-rank="1"] .lb-avatar { width: 46px; height: 46px; font-size: 1.2rem; }
  .podium-medal { width: 26px; height: 26px; font-size: .45rem; }
  .podium-name { font-size: .9rem; }
  .podium-value { font-size: 1rem; }
  .podium-stat { display: none; }
  .lb-row { grid-template-columns: 1.6rem 32px 1fr auto; gap: .5rem; border-width: 10px; }
  .lb-row .lb-avatar { width: 32px; height: 32px; font-size: .85rem; }

  /* Updates: swipe sideways through the cards instead of a long stack */
  .news-grid {
    grid-auto-flow: column;
    grid-template-columns: none;
    grid-auto-columns: 84%;
    gap: .75rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    margin-inline: calc(var(--gutter) * -1);
    padding: .25rem var(--gutter) 1rem;
    scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
  }
  .news-grid::-webkit-scrollbar { display: none; }
  .news-card { scroll-snap-align: start; }
  .news-card:hover { transform: none; }

  /* Support help cards: icon beside the text */
  .sup-card {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    column-gap: .9rem;
    row-gap: .3rem;
    align-items: start;
    padding: 1rem;
  }
  .sup-card > * { grid-column: 2; }
  .sup-card .sup-icon { grid-column: 1; grid-row: 1 / span 3; width: 46px; height: 46px; margin: 0; }
  .sup-card h3 { font-size: 1.15rem; }
  .sup-card .link-arrow { padding-top: .35rem; }
  .support-hero .btn-row .btn { flex: 1 1 auto; }

  /* Footer: brand on top, the two link columns side by side */
  .ft-top { grid-template-columns: 1fr 1fr; gap: var(--sp-5) var(--sp-4); padding-block: var(--sp-6) var(--sp-5); }
  .ft-top > :first-child { grid-column: 1 / -1; }
}



/* ==========================================================================
   16  MOTION & REVEAL
   ========================================================================== */
.js .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .55s var(--ease), transform .55s var(--ease);
}
.js .reveal.is-visible { opacity: 1; transform: none; }
.js .reveal[data-delay="1"] { transition-delay: .07s; }
.js .reveal[data-delay="2"] { transition-delay: .14s; }
.js .reveal[data-delay="3"] { transition-delay: .21s; }
.js .reveal[data-delay="4"] { transition-delay: .28s; }


@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .js .reveal { opacity: 1; transform: none; }
}


/* ==========================================================================
   17  PRINT
   ========================================================================== */
@media print {
  .nav, .nav-panel, .vine-deco, .sup-mob, .ft-parade, .skip-link { display: none !important; }
  body { background: #fff; color: #000; }
  .section { padding-block: 1rem; }
}