/* ==========================================================================
   Seedlinz: My Little Seed
   Palette from the SeedliNZ icon system brand board.
   ========================================================================== */

:root{
  --forest:#0E3B2E;   /* trust, nature, depth   */
  --moss:#2E6B46;     /* mid green, derived     */
  --leaf:#7DA942;     /* growth, freshness      */
  --sage:#CFE0BB;     /* balance, calm, light   */
  --cream:#FAF9F0;    /* warmth, clarity, space */
  --glow:#FFD984;     /* hope, discovery        */
  --blossom:#C75B48;  /* accent: p?hutukawa     */

  --soil:#6B4F3A;
  --ink:var(--forest);
  --ink-soft:#4a6559;

  --radius:18px;
  --tap:56px;                 /* minimum touch target */
  /* One gutter for the page and the bottom bar. They are both capped at the
     same width, so if these two ever differ the bar sits wider than the game
     and the edges visibly fail to line up. */
  --gutter:10px;
  --column:520px;

  --shadow:0 2px 0 rgba(14,59,46,.14), 0 8px 20px rgba(14,59,46,.10);
  --ease:cubic-bezier(.33,.9,.4,1);
}

/* On a bigger screen, or when somebody zooms out, a 520px column looks lost in
   the window. The game and the bottom bar both read from --column, so raising
   it widens them together and they cannot fall out of alignment. */
@media (min-width:700px){ :root{--column:620px} }
@media (min-width:1000px){ :root{--column:700px} }

*,*::before,*::after{box-sizing:border-box}

html,body{height:100%}
/* the "How to play" link on the seed screen glides down rather than jumping.
   game.js overrides this to "auto" whenever reduced motion is on. */
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font:400 17px/1.5 "Nunito","Quicksand","Segoe UI",system-ui,-apple-system,sans-serif;
  -webkit-text-size-adjust:100%;
  -webkit-tap-highlight-color:transparent;
  overscroll-behavior-y:contain;
}

#app{
  max-width:var(--column);
  margin:0 auto;
  min-height:100%;
  padding:0 var(--gutter) calc(96px + env(safe-area-inset-bottom));
  display:flex;
  flex-direction:column;
  gap:12px;
}

h1,h2,h3{margin:0;font-weight:800;letter-spacing:-.01em}

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.skip{
  position:absolute;left:-999px;top:0;z-index:50;
  background:var(--forest);color:var(--cream);padding:12px 18px;border-radius:0 0 12px 0;
}
.skip:focus{left:0}

.muted{color:var(--ink-soft);font-size:14.5px;margin:6px 0 0}
.centered{text-align:center}

/* ---------- focus ---------- */
:focus-visible{
  outline:3px solid var(--forest);
  outline-offset:3px;
  border-radius:8px;
}

/* ---------- top bar ---------- */
.topbar{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:14px 2px 0;
}
.brand{display:flex;align-items:center;gap:10px;min-width:0}
.emblem{width:44px;height:44px;border-radius:50%;flex:none}
.wordmark{font-size:19px;line-height:1.05;display:flex;flex-direction:column}
.tagline{font-size:11.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--leaf)}

.toolbar{display:flex;gap:6px;flex:none;align-items:center}

/* ---------- music volume ---------- */
.vol{
  display:flex;align-items:center;gap:7px;
  background:#fff;border-radius:14px;box-shadow:var(--shadow);
  padding:0 12px;height:48px;
}
.vol-label{
  font-size:9.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;
  color:var(--ink-soft);white-space:nowrap;cursor:pointer;
}
.vol-out{
  font:800 11px/1 inherit;color:var(--moss);min-width:30px;text-align:right;
  font-variant-numeric:tabular-nums;
}
.vol.off .vol-out{color:var(--ink-soft)}

/* a range input, made big enough for thumbs */
.vol-range{
  -webkit-appearance:none;appearance:none;
  width:92px;height:44px;                /* tall hit area, short visible track */
  background:transparent;margin:0;cursor:pointer;
}
.vol-range:focus{outline:none}
.vol-range:focus-visible{outline:3px solid var(--forest);outline-offset:2px;border-radius:8px}

.vol-range::-webkit-slider-runnable-track{
  height:10px;border-radius:999px;
  background:linear-gradient(to right,
    var(--leaf) 0, var(--leaf) var(--fill,35%),
    var(--sage) var(--fill,35%), var(--sage) 100%);
}
.vol-range::-moz-range-track{
  height:10px;border-radius:999px;background:var(--sage);
}
.vol-range::-moz-range-progress{height:10px;border-radius:999px;background:var(--leaf)}

.vol-range::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:26px;height:26px;border-radius:50%;
  background:var(--forest);border:3px solid #fff;
  box-shadow:0 1px 4px rgba(14,59,46,.4);
  margin-top:-8px;                       /* centre on the 10px track */
  transition:transform .14s var(--ease);
}
.vol-range::-moz-range-thumb{
  width:26px;height:26px;border-radius:50%;
  background:var(--forest);border:3px solid #fff;
  box-shadow:0 1px 4px rgba(14,59,46,.4);
}
.vol-range:active::-webkit-slider-thumb{transform:scale(1.18)}
.vol-range:active::-moz-range-thumb{transform:scale(1.18)}

.vol.off .vol-range::-webkit-slider-thumb{background:var(--ink-soft)}
.vol.off .vol-range::-moz-range-thumb{background:var(--ink-soft)}

/* on narrow phones the slider takes its own full-width row under the buttons */
@media (max-width:479px){
  .topbar{flex-wrap:wrap}
  .toolbar{flex:1 1 100%;order:2;margin-top:2px}
  .vol{flex:1}
  .vol-range{flex:1;width:auto;min-width:80px}
}
.icon-btn{
  min-width:48px;min-height:48px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
  border:2px solid transparent;border-radius:14px;
  background:#fff;color:var(--forest);
  font:inherit;font-size:9.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  cursor:pointer;box-shadow:var(--shadow);
  transition:transform .15s var(--ease),background .15s;
}
.icon-btn .ico{font-size:17px;line-height:1}
.icon-btn:active{transform:translateY(2px)}
.icon-btn[aria-pressed="true"]{background:var(--sage);border-color:var(--moss)}
.icon-btn[aria-pressed="true"] .ico{opacity:.5}

/* ---------- help ---------- */
.help{
  background:#fff;border-radius:var(--radius);padding:16px 18px;box-shadow:var(--shadow);
  border:2px solid var(--sage);
}
.help h2{font-size:16px;margin-bottom:8px}
.help ul{margin:0;padding-left:18px;font-size:15px}
.help li{margin:4px 0}
kbd{
  background:var(--sage);border-radius:6px;padding:1px 6px;
  font:700 13px/1 ui-monospace,monospace;color:var(--forest);
  border-bottom:2px solid rgba(14,59,46,.25);
}
.credit{border-top:2px dotted var(--sage);padding-top:10px;margin-top:12px}
.sound-note{
  border-top:2px dotted var(--sage);padding-top:10px;margin-top:12px;
}
.sound-note strong{color:var(--forest)}
.sound-note em{font-style:normal;font-weight:800;color:var(--moss)}
.credit-link{
  display:inline-block;min-height:32px;line-height:32px;
  color:var(--moss);font-weight:800;text-underline-offset:3px;
}
.text-btn{
  margin-top:12px;min-height:48px;width:100%;
  background:var(--cream);border:2px dashed var(--moss);border-radius:14px;
  color:var(--forest);font:700 15px/1 inherit;cursor:pointer;
}

/* ---------- NPC ---------- */
.npc{display:flex;align-items:center;gap:10px}
.npc-face{width:54px;height:54px;flex:none}
.npc-bubble{
  margin:0;position:relative;flex:1;
  background:#fff;border-radius:16px;padding:11px 14px;
  font-size:15.5px;line-height:1.35;box-shadow:var(--shadow);
  border:2px solid var(--sage);
}
.npc-bubble::before{
  content:"";position:absolute;left:-9px;top:20px;
  width:0;height:0;border:8px solid transparent;border-right-color:var(--sage);
}

/* ---------- scenes ---------- */
.scene{display:flex;flex-direction:column;gap:12px}
.scene[hidden]{display:none}
.scene-h{font-size:20px;text-align:center}

/* ---------- seed choosing ---------- */
/* the first thing anybody ever reads, so it says what the game is */
.first-time{
  margin:0;text-align:center;font-size:15px;line-height:1.45;
  color:var(--ink-soft);
  background:#fff;border:2px dashed var(--sage);border-radius:var(--radius);
  padding:11px 14px;
}
.first-time a{
  display:inline-block;min-height:32px;line-height:32px;
  color:var(--moss);font-weight:800;text-underline-offset:3px;white-space:nowrap;
}

.seed-grid{display:grid;gap:10px}
@media (min-width:430px){.seed-grid{grid-template-columns:repeat(3,1fr)}}
.seed-card{
  display:flex;align-items:center;gap:14px;
  min-height:var(--tap);padding:12px 16px;
  background:#fff;border:3px solid var(--sage);border-radius:var(--radius);
  box-shadow:var(--shadow);cursor:pointer;font:inherit;color:var(--forest);text-align:left;
  transition:transform .18s var(--ease),border-color .18s;
}
@media (min-width:430px){
  .seed-card{flex-direction:column;text-align:center;gap:6px;padding:16px 10px}
}
.seed-card:hover,.seed-card:focus-visible{border-color:var(--leaf);transform:translateY(-3px)}
.seed-card:active{transform:translateY(0)}

/* the grown plant, drawn by the same code that draws yours */
.seed-art{
  display:block;flex:none;
  width:56px;height:96px;
  background:linear-gradient(#eaf3df,#dcecd0);
  border-radius:12px;padding:5px 2px;
}
@media (min-width:430px){
  .seed-art{width:100%;height:116px}
}
/* no overflow:visible here: the viewBox already contains the whole plant,
   so nothing should be escaping the card */
.seed-art svg{width:100%;height:100%;display:block}
/* the blooms ease open when the card appears, once */
.seed-art .bloom{animation-duration:.9s}

.seed-words{display:flex;flex-direction:column;gap:2px;min-width:0}
@media (min-width:430px){.seed-words{align-items:center}}
.seed-name{font-weight:800;font-size:17px}
.seed-note{font-size:13.5px;color:var(--ink-soft);line-height:1.3}

/* ---------- portals: open a little world ---------- */
.portals{display:grid;gap:12px}
@media (min-width:460px){.portals{grid-template-columns:repeat(3,1fr)}}
.portal{
  position:relative;display:block;width:100%;padding:0;
  border:3px solid #fff;border-radius:var(--radius);overflow:hidden;
  background:var(--cream);cursor:pointer;box-shadow:var(--shadow);
  font:inherit;color:var(--forest);
  transition:transform .2s var(--ease),border-color .2s,box-shadow .2s;
}
.portal img{
  display:block;width:100%;height:150px;object-fit:cover;object-position:50% 42%;
}
@media (min-width:460px){.portal img{height:190px}}
.portal-label{
  display:flex;flex-direction:column;gap:2px;
  padding:10px 14px 12px;text-align:left;
  background:#fff;
}
.portal-label strong{font-size:16px}
.portal-label em{font-style:normal;font-size:13.5px;color:var(--ink-soft)}
.portal:hover,.portal:focus-visible{
  transform:translateY(-4px);border-color:var(--glow);
  box-shadow:0 4px 0 rgba(14,59,46,.14),0 14px 28px rgba(14,59,46,.18);
}
.portal:active{transform:translateY(0)}

/* ==========================================================================
   The stage (sky + ground)
   ========================================================================== */
.stage{
  position:relative;
  height:280px;
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow);
  background:linear-gradient(#CFE0BB,#eaf3df 62%);
  border:3px solid #fff;
}
.sky{position:absolute;inset:0}
.sky.sunny{background:linear-gradient(#bfe0e8,#FFF6DF 70%)}

.sun{
  position:absolute;top:18px;right:22px;width:46px;height:46px;border-radius:50%;
  background:var(--glow);box-shadow:0 0 0 10px rgba(255,217,132,.3),0 0 0 22px rgba(255,217,132,.16);
}
.sun.big{
  width:64px;height:64px;top:14px;right:18px;
  animation:pulse 7s ease-in-out infinite;
}
@keyframes pulse{0%,100%{box-shadow:0 0 0 10px rgba(255,217,132,.32),0 0 0 24px rgba(255,217,132,.16)}
50%{box-shadow:0 0 0 16px rgba(255,217,132,.34),0 0 0 34px rgba(255,217,132,.12)}}

.cloud{
  position:absolute;height:22px;border-radius:999px;background:#fff;opacity:.92;
  box-shadow:18px -8px 0 -2px #fff, 38px 2px 0 -5px #fff;
}
.cloud.c1{width:52px;top:30px;left:-70px;animation:drift 42s linear infinite}
.cloud.c2{width:38px;top:62px;left:-70px;animation:drift 58s linear infinite 6s;opacity:.75}
.cloud.c3{width:62px;top:96px;left:-70px;animation:drift 74s linear infinite 18s;opacity:.6}
.cloud.c4{width:44px;top:14px;left:-70px;animation:drift 50s linear infinite 28s;opacity:.8}
@keyframes drift{from{transform:translateX(0)}to{transform:translateX(640px)}}

.hill{
  position:absolute;left:-10%;right:-10%;bottom:78px;height:90px;
  background:var(--leaf);opacity:.32;border-radius:50% 50% 0 0;
}

.ground{
  position:absolute;left:0;right:0;bottom:0;height:96px;
  background:
    radial-gradient(120% 70% at 50% 0%, #6d9c54 0%, #5d8c48 55%, #4c7a3c 100%);
  border-top:4px solid #7DA942;
}
.ground::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(5px 2px at 14% 40%, rgba(255,255,255,.22) 50%, transparent 51%),
    radial-gradient(5px 2px at 62% 62%, rgba(255,255,255,.18) 50%, transparent 51%),
    radial-gradient(5px 2px at 86% 34%, rgba(255,255,255,.2) 50%, transparent 51%);
}

/* ---------- the plant ---------- */
.plant-wrap{
  position:absolute;left:50%;bottom:34px;transform:translateX(-50%);
  width:170px;height:210px;z-index:1;pointer-events:none;
  display:flex;align-items:flex-end;justify-content:center;
}
.plant-holder{width:100%;height:100%;display:flex;align-items:flex-end;justify-content:center}
.plant-holder svg{width:100%;height:100%;overflow:visible}

#plant{transform-origin:50% 100%}
#plant.sway{animation:sway 1.5s var(--ease)}
@keyframes sway{
  0%{transform:rotate(0)}22%{transform:rotate(-5deg)}
  48%{transform:rotate(4deg)}72%{transform:rotate(-2.5deg)}100%{transform:rotate(0)}
}
#plant.wiggle{animation:wiggle .7s var(--ease)}
@keyframes wiggle{
  0%,100%{transform:scale(1,1)}30%{transform:scale(1.06,.95)}60%{transform:scale(.97,1.05)}
}
#plant.grow-pop{animation:growpop 1s var(--ease)}
@keyframes growpop{0%{transform:scale(.72) translateY(14px)}60%{transform:scale(1.07)}100%{transform:scale(1)}}

.leaf-part{transform-box:fill-box;transform-origin:0% 100%}
#plant.sway .leaf-part{animation:leafsway 1.5s var(--ease)}
@keyframes leafsway{0%,100%{transform:rotate(0)}40%{transform:rotate(6deg)}70%{transform:rotate(-4deg)}}

.bloom{transform-box:fill-box;transform-origin:50% 50%;animation:bloomin .9s var(--ease) backwards}
@keyframes bloomin{from{transform:scale(0)}to{transform:scale(1)}}

/* ---------- sparkles / droplets ---------- */
.sparkles,.droplets{position:absolute;inset:0;pointer-events:none}
.spark{
  position:absolute;font-size:18px;font-weight:800;color:var(--glow);
  text-shadow:0 1px 2px rgba(14,59,46,.35);
  animation:rise 1.2s var(--ease) forwards;
}
@keyframes rise{from{opacity:0;transform:translateY(8px) scale(.6)}
20%{opacity:1}to{opacity:0;transform:translateY(-48px) scale(1.15)}}

.drop{
  position:absolute;top:18px;width:7px;height:11px;border-radius:50% 50% 50% 50%/60% 60% 40% 40%;
  background:#8ecae6;animation:fall .85s ease-in forwards;
}
@keyframes fall{from{opacity:0;transform:translateY(-10px)}
15%{opacity:1}to{opacity:0;transform:translateY(130px)}}

/* ---------- decoration spots ---------- */
.spots{position:absolute;inset:0;pointer-events:none;z-index:3}
.spot{
  pointer-events:auto;position:absolute;
  width:54px;height:54px;border-radius:50%;
  border:3px dashed rgba(250,249,240,.72);
  background:rgba(14,59,46,.14);
  display:grid;place-items:center;cursor:pointer;padding:0;
  transition:transform .18s var(--ease),background .18s,border-color .18s;
}
.spot-a{left:8px;bottom:18px}
.spot-b{right:8px;bottom:18px}
.spot-c{left:50%;bottom:4px;transform:translateX(-50%)}
.spot-c:active{transform:translateX(-50%) scale(.94)}
.spot.filled{border-style:solid;border-color:rgba(250,249,240,.95);background:rgba(250,249,240,.3)}
.spot.ready{border-color:var(--glow);background:rgba(255,217,132,.3);animation:readypulse 1.6s ease-in-out infinite}
@keyframes readypulse{0%,100%{box-shadow:0 0 0 0 rgba(255,217,132,.6)}50%{box-shadow:0 0 0 9px rgba(255,217,132,0)}}
.spot-art{display:block;width:34px;height:34px;pointer-events:none}
.spot-art svg{width:100%;height:100%}

/* ---------- growth bar ---------- */
.growth-bar{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap}
.growth-pips{display:flex;gap:6px}
.pip{
  width:34px;height:9px;border-radius:999px;background:var(--sage);
  transition:background .4s var(--ease);
}
.pip.on{background:var(--leaf)}
.pip.full{background:var(--forest)}
.stage-caption{margin:0;font-weight:800;font-size:15.5px;color:var(--moss)}

/* ==========================================================================
   Activities
   ========================================================================== */
.activities{display:flex;gap:10px;align-items:stretch}

.big-btn{
  min-height:var(--tap);
  display:flex;align-items:center;justify-content:center;gap:10px;
  border:none;border-radius:var(--radius);cursor:pointer;
  font:800 16px/1 inherit;color:var(--cream);background:var(--forest);
  box-shadow:var(--shadow);padding:12px 18px;
  transition:transform .14s var(--ease),filter .14s;
}
.big-btn:active{transform:translateY(3px);filter:brightness(1.08)}
.water-btn{flex:1 1 44%;background:var(--moss)}
.water-btn .can{width:42px;height:32px;flex:none}
.calm-btn,.wander-btn{width:100%;background:var(--forest)}
.bloom-dot{
  width:20px;height:20px;border-radius:50%;background:var(--glow);flex:none;
  box-shadow:0 0 0 5px rgba(255,217,132,.3);
}
.bloom-dot.leafy{background:var(--leaf);box-shadow:0 0 0 5px rgba(125,169,66,.3)}

.chimes{flex:1 1 56%;display:grid;grid-template-columns:repeat(4,1fr);gap:7px}
.chime{
  min-height:var(--tap);border:none;border-radius:14px;cursor:pointer;
  font:800 18px/1 inherit;color:var(--forest);
  box-shadow:var(--shadow);
  transition:transform .1s var(--ease),filter .1s;
}
.ch1{background:var(--sage)}
.ch2{background:var(--leaf)}
.ch3{background:var(--glow)}
.ch4{background:#A8CBE0}
.chime:active,.chime.ring{transform:translateY(-6px) scale(1.04);filter:brightness(1.1)}

/* ---------- basket ---------- */
.basket{
  background:#fff;border:3px solid var(--sage);border-radius:var(--radius);
  padding:12px 14px;box-shadow:var(--shadow);
}
.basket-h{font-size:14px;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-soft)}
.basket-items{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.basket-items:empty{display:none}
.bitem{
  min-width:var(--tap);min-height:var(--tap);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  border:3px solid var(--sage);border-radius:14px;background:var(--cream);
  cursor:pointer;padding:6px 10px;font:700 12px/1 inherit;color:var(--forest);
  transition:transform .15s var(--ease),border-color .15s;
}
.bitem svg{width:26px;height:26px}
.bitem:hover{transform:translateY(-2px)}
.bitem[aria-pressed="true"]{border-color:var(--glow);background:#FFF6DF;transform:translateY(-3px)}
.bitem .count{font-size:11px;color:var(--ink-soft)}

/* ---------- sunshine ---------- */
.butterfly{
  position:absolute;top:120px;left:28px;
  width:58px;height:48px;padding:0;border:none;background:none;cursor:pointer;
  animation:flutter 7s ease-in-out forwards;
}
.butterfly svg{width:100%;height:100%}
.wing{transform-box:fill-box;transform-origin:85% 50%;animation:flapl .32s ease-in-out infinite alternate}
.wr{transform-origin:15% 50%;animation-name:flapr}
@keyframes flapl{from{transform:rotateY(0)}to{transform:rotateY(62deg)}}
@keyframes flapr{from{transform:rotateY(0)}to{transform:rotateY(-62deg)}}
/* she drifts in, then lands so she is easy to tap */
@keyframes flutter{
  0%{transform:translate(0,0)}
  30%{transform:translate(80px,34px)}
  60%{transform:translate(185px,-10px)}
  85%{transform:translate(120px,70px)}
  100%{transform:translate(152px,120px)}
}
.blanket{
  position:absolute;right:16px;bottom:16px;width:96px;height:34px;border-radius:14px;
  background:repeating-linear-gradient(45deg,#C75B48 0 9px,#FAF9F0 9px 18px);
  opacity:.9;box-shadow:0 3px 0 rgba(14,59,46,.18);
}
.rest-line,.find-line{
  margin:0;text-align:center;font-size:15.5px;color:var(--ink-soft);font-weight:600;
}

/* ---------- forest ---------- */
.forest-stage{height:300px}
.forest-art{position:absolute;inset:0;width:100%;height:100%}
.finds{position:absolute;inset:0}
.find{
  position:absolute;width:var(--tap);height:var(--tap);
  border:none;background:none;padding:0;cursor:pointer;
  display:grid;place-items:center;border-radius:50%;
  transition:transform .2s var(--ease);
}
.find svg{width:34px;height:34px;filter:drop-shadow(0 2px 3px rgba(14,59,46,.4))}
.find::before{
  content:"";position:absolute;inset:6px;border-radius:50%;
  background:radial-gradient(rgba(255,217,132,.55),transparent 70%);
  opacity:0;transition:opacity .25s;
}
.find:hover::before,.find:focus-visible::before{opacity:1}
.find:hover,.find:focus-visible{transform:scale(1.12)}
.find.taken{animation:collected .55s var(--ease) forwards;pointer-events:none}
@keyframes collected{to{transform:translateY(-40px) scale(.2);opacity:0}}

.found-row{display:flex;gap:8px;justify-content:center;min-height:30px;flex-wrap:wrap}
.found-chip{
  display:flex;align-items:center;gap:6px;
  background:#fff;border:2px solid var(--sage);border-radius:999px;
  padding:5px 12px;font:700 13px/1 inherit;color:var(--forest);
}
.found-chip svg{width:18px;height:18px}
.found-chip.done{border-color:var(--leaf);background:#f1f7e6}

/* ---------- sharing ---------- */
.share-card{
  display:flex;align-items:center;gap:14px;
  background:#fff;border:3px solid var(--sage);border-radius:var(--radius);
  padding:12px 14px;box-shadow:var(--shadow);
}
.share-qr{
  width:96px;height:96px;flex:none;display:block;border-radius:8px;
  background:var(--cream);
}
@media (max-width:379px){ .share-qr{width:76px;height:76px} }
.share-words{display:flex;flex-direction:column;gap:6px;min-width:0}
.share-words strong{font-size:16px}
.share-words p{margin:0;font-size:13.5px;line-height:1.35;color:var(--ink-soft)}
.share-btn{
  align-self:flex-start;background:var(--moss);
  padding:10px 16px;font-size:14.5px;gap:8px;min-height:var(--tap);
}
.share-ico svg{width:20px;height:20px;display:block}

/* ---------- Seedlinz elsewhere ---------- */
.elsewhere{
  background:#fff;border:3px solid var(--sage);border-radius:var(--radius);
  padding:12px 14px;box-shadow:var(--shadow);
}
.elsewhere-h{
  font-size:12px;text-transform:uppercase;letter-spacing:.08em;
  color:var(--ink-soft);margin-bottom:8px;
}
.link-list{list-style:none;margin:0;padding:0;display:grid;gap:7px}
@media (min-width:430px){
  .link-list{grid-template-columns:1fr 1fr}
  /* an odd one out spans the row rather than sitting as a lonely half */
  .link-list li:last-child:nth-child(odd){grid-column:1 / -1}
}

.out-link{
  display:flex;align-items:center;gap:11px;
  min-height:var(--tap);padding:8px 12px;
  border:2px solid var(--sage);border-radius:14px;
  background:var(--cream);color:var(--forest);text-decoration:none;
  transition:transform .15s var(--ease),border-color .15s,background .15s;
}
.out-link:hover,.out-link:focus-visible{
  transform:translateY(-2px);border-color:currentColor;background:#fff;
}
.out-ico{flex:none;display:block;width:28px;height:28px}
.out-ico svg{width:100%;height:100%;display:block}
.out-words{display:flex;flex-direction:column;line-height:1.2;min-width:0}
.out-words strong{font-size:15px;color:var(--forest)}
.out-words em{font-style:normal;font-size:12.5px;color:var(--ink-soft)}
.out-away{margin-left:auto;color:var(--ink-soft);font-size:15px;flex:none}

/* each one carries its own colour on the icon only, so the row stays calm */
.l-facebook{color:#1877F2}
.l-tiktok{color:#0E3B2E}
.l-spotify{color:#1DB954}

.elsewhere-note{
  margin:9px 0 0;font-size:12px;line-height:1.35;color:var(--ink-soft);
}

/* ==========================================================================
   The shared grove
   ========================================================================== */
.portal-wide{grid-column:1/-1}
.portal-art{display:block}
.portal-art svg{display:block;width:100%;height:120px}
@media (min-width:460px){.portal-art svg{height:140px}}

/* the whole scene is kept short so the giving buttons are visible on arrival,
   not stranded below the fold under a big picture */
#scene-grove{gap:6px}
/* .stage.grove-stage, not .grove-stage: the "larger screens" block near the
   bottom of this file sets .stage{height:330px}, which has the same
   specificity and comes later, so a bare .grove-stage rule loses and the
   grove silently renders 150px taller than intended. That extra height is
   what kept pushing the giving buttons down behind the dock. */
.stage.grove-stage{height:140px}
@media (min-width:560px) and (min-height:860px){.stage.grove-stage{height:180px}}

.grove-empty{
  position:absolute;left:0;right:0;bottom:16px;margin:0;
  color:var(--cream);font-weight:800;font-size:14.5px;
  text-shadow:0 1px 3px rgba(14,59,46,.7);text-align:center;
}
.grove-empty[hidden]{display:none}

/* ---------- the grove landscape ---------- */
.grove-art{position:absolute;inset:0;width:100%;height:100%;display:block}

/* each thing eases in when the gifts that bring it arrive */
.g-tree,.g-flower,.g-shroom{animation:arrive .7s var(--ease) backwards}
.g-tree{transform-box:fill-box;transform-origin:50% 100%}
.g-river path{transition:stroke-dashoffset 1.4s var(--ease)}

.birds,.flutters{position:absolute;inset:0;pointer-events:none}
.bird[hidden],.flutter[hidden]{display:none}

/* butterflies, brought by the water along with the flowers */
.flutter{
  position:absolute;width:17px;height:14px;left:-24px;
  background:no-repeat center/contain
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 20'%3E%3Cellipse cx='12' cy='10' rx='1.2' ry='5' fill='%230E3B2E'/%3E%3Cpath d='M11 9C7 2 1 3 2 9c.8 4 6 5 9 2z' fill='%23FFD984'/%3E%3Cpath d='M13 9c4-7 10-6 9 0-.8 4-6 5-9 2z' fill='%23C75B48'/%3E%3C/svg%3E");
}
.f1{top:58%;animation:wander 34s linear infinite}
.f2{top:70%;animation:wander 44s linear infinite 9s;transform:scale(.8)}
.f3{top:64%;animation:wander 52s linear infinite 21s;transform:scale(.68)}
@keyframes wander{
  0%{left:-8%;transform:translateY(0)}
  25%{transform:translateY(-16px)}
  50%{transform:translateY(6px)}
  75%{transform:translateY(-12px)}
  100%{left:106%;transform:translateY(0)}
}
body.reduced .flutter{animation:none}
body.reduced .f1{left:24%}
body.reduced .f2{left:56%}
body.reduced .f3{left:78%}
.bird{
  position:absolute;width:13px;height:6px;
  border:solid var(--forest);border-width:2px 2px 0 0;
  transform:rotate(-45deg);opacity:.65;
}
.bird::after{
  content:"";position:absolute;left:-11px;top:-2px;width:13px;height:6px;
  border:solid var(--forest);border-width:0 0 2px 2px;transform:rotate(-90deg);
}
.b1{top:22px;left:-20px;animation:fly 26s linear infinite}
.b2{top:36px;left:-20px;animation:fly 32s linear infinite 4s;transform:rotate(-45deg) scale(.78)}
.b3{top:14px;left:-20px;animation:fly 38s linear infinite 11s;transform:rotate(-45deg) scale(.62)}
@keyframes fly{to{left:112%}}

@keyframes arrive{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:scale(1)}}

body.reduced .bird{animation:none}
body.reduced .b1{left:22%}
body.reduced .b2{left:52%}
body.reduced .b3{left:76%}

.grove-count{
  margin:0;text-align:center;font-weight:800;font-size:16px;color:var(--forest);
}
.milestone-line{
  margin:0;text-align:center;font-size:13px;line-height:1.4;color:var(--ink-soft);
}
.milestone-line .reached{color:var(--moss);font-weight:800}
.milestone-line .coming{color:var(--forest);font-weight:800}
.grove-count .num{color:var(--leaf);font-size:21px}

/* ---------- gauges ---------- */
.gauges{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.gauge{
  display:flex;align-items:center;justify-content:center;gap:6px;
  background:#fff;border:3px solid var(--sage);border-radius:14px;
  padding:5px 4px;box-shadow:var(--shadow);
}
.gauge-ico svg{width:19px;height:19px;display:block}
.gauge strong{font-size:17px;font-variant-numeric:tabular-nums;line-height:1.1}
.gauge-lbl{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-soft)}
/* remembered numbers, not live ones */
.stale{opacity:.55}
.gauges.stale .gauge{border-style:dashed}
.gauge.bump strong{animation:bump .5s var(--ease)}
@keyframes bump{0%,100%{transform:scale(1)}40%{transform:scale(1.3);color:var(--leaf)}}

/* ---------- giving ---------- */
/* These sit directly under the picture, above the counts and the gauges.
   Trimming pixels off the bottom of this scene failed repeatedly, so the
   buttons now live where nothing can push them behind the dock, and the
   numbers below them are free to scroll. Still four in a row at every
   width, because a second row would start the same problem again. */
.give{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.give-btn{
  position:relative;flex-direction:column;justify-content:center;gap:3px;
  text-align:center;padding:8px 4px;font-size:15.5px;
}
.give-txt{font-size:13px;line-height:1.1}
.give-water{background:#3E7C9B}
.give-sun{background:#C9941F}
.give-seed{background:var(--forest)}
.give-note{background:var(--moss)}
.give-ico svg{width:24px;height:24px;display:block}
.give-have{
  position:absolute;top:5px;right:5px;
  min-width:20px;height:20px;padding:0 5px;
  display:grid;place-items:center;border-radius:999px;
  background:rgba(250,249,240,.26);font-size:12px;font-variant-numeric:tabular-nums;
}
/* nothing to give yet: still a live button, it just points you at the earning */
.give-btn.empty{background:var(--sage);color:var(--forest);box-shadow:none;border:3px dashed var(--moss)}
.give-btn.empty .give-ico svg [fill="#fff"],
.give-btn.empty .give-ico svg circle,
.give-btn.empty .give-ico svg path{fill:var(--moss);stroke:var(--moss)}
.give-btn.empty .give-have{background:rgba(14,59,46,.12);color:var(--ink-soft)}

.grove-mine{
  margin:0;text-align:center;font-size:13px;line-height:1.3;font-weight:600;
  color:var(--ink-soft);
  background:#fff;border:2px dashed var(--sage);border-radius:14px;padding:6px 12px;
}

/* ==========================================================================
   How to play, at the foot of the page
   ========================================================================== */
.how{
  background:#fff;border:3px solid var(--sage);border-radius:var(--radius);
  padding:16px 18px;box-shadow:var(--shadow);
}
.how h2{font-size:18px;margin-bottom:8px}
.how-lead{margin:0 0 12px;font-size:14.5px;line-height:1.45;color:var(--ink-soft)}

.how-list{margin:0;display:grid;gap:10px}
.how-list dt{
  font-weight:800;font-size:14px;color:var(--forest);
  text-transform:uppercase;letter-spacing:.05em;
}
.how-list dd{
  margin:3px 0 0;font-size:14.5px;line-height:1.45;color:var(--ink-soft);
  padding-left:12px;border-left:3px solid var(--sage);
}

.how-note{
  margin:14px 0 0;padding-top:12px;border-top:2px dotted var(--sage);
  font-size:13px;line-height:1.4;color:var(--ink-soft);
}

/* ---------- dock ---------- */
/* Five equal columns rather than flex. A grid column of 1fr genuinely cannot
   overflow its container, whereas flex items default to min-width:auto and
   refuse to shrink below their label, which pushed Grove off narrow screens
   (and off any screen where the player has larger text set). */
.dock{
  position:fixed;left:0;right:0;bottom:0;z-index:20;
  display:grid;grid-template-columns:repeat(5,1fr);gap:4px;
  max-width:var(--column);margin:0 auto;
  padding:8px var(--gutter) calc(8px + env(safe-area-inset-bottom));
  background:rgba(250,249,240,.96);
  backdrop-filter:blur(8px);
  border-top:2px solid var(--sage);
}
.dock[hidden]{display:none}
.dock-btn{
  min-width:0;                 /* the part that lets a long label shrink */
  min-height:var(--tap);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  border:none;border-radius:14px;background:transparent;cursor:pointer;
  font:800 12px/1 inherit;color:var(--ink-soft);
  transition:background .18s,color .18s;
  padding:0 2px;
}
.dock-btn svg{width:24px;height:24px;flex:none}
/* the label never widens the button: it shrinks, then truncates */
.dock-btn span{
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.dock-btn[aria-current="true"]{background:var(--forest);color:var(--cream)}

@media (max-width:420px){
  /* the gutter is shared, so narrowing it moves the game and the bar together */
  :root{--gutter:8px}
  .dock{gap:2px}
  .dock-btn{font-size:10px;letter-spacing:-.02em}
  .dock-btn svg{width:22px;height:22px}
}
/* very narrow, or large text: the icons carry it and the labels step aside */
@media (max-width:330px){
  .dock-btn span{display:none}
  .dock-btn svg{width:26px;height:26px}
}

/* ---------- toast ---------- */
.toast{
  position:fixed;left:50%;bottom:calc(84px + env(safe-area-inset-bottom));
  transform:translate(-50%,16px);
  background:var(--forest);color:var(--cream);
  padding:11px 20px;border-radius:999px;font-weight:800;font-size:15px;
  box-shadow:0 8px 22px rgba(14,59,46,.3);
  opacity:0;pointer-events:none;transition:opacity .3s,transform .3s var(--ease);
  z-index:30;max-width:92vw;text-align:center;
}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* ==========================================================================
   Reduced motion
   ========================================================================== */
body.reduced *,
body.reduced *::before,
body.reduced *::after{
  animation-duration:.001ms !important;
  animation-iteration-count:1 !important;
  transition-duration:.001ms !important;
}
body.reduced .cloud{opacity:.8}
body.reduced .cloud.c1{left:40px}
body.reduced .cloud.c2{left:170px}
body.reduced .cloud.c3{left:280px}
body.reduced .cloud.c4{left:110px}
body.reduced .butterfly{animation:none;top:150px;left:60px}
body.reduced .spark{opacity:1;animation:none;transform:translateY(-26px)}
body.reduced .drop{display:none}
body.reduced .find.taken{display:none}

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

/* ---------- larger screens ----------
   Both conditions matter. These heights used to be gated on width alone,
   which is the wrong measurement: a window can be 600px wide and only 750px
   tall, and then a 330px stage pushes the scene's own buttons down behind the
   fixed dock. That is what put the watering can's basket, the forest's
   "wander a little further" and the grove's giving buttons partly under the
   bar. Give the picture more room only when there is actually more room to
   give it. */
@media (min-width:560px) and (min-height:860px){
  .stage{height:330px}
  .forest-stage{height:360px}
  .plant-wrap{width:210px;height:250px}
}