/* ─────────────────────────────────────────────────────────────
   SeedTree — hotspot zone layout
   Position and size of every click zone, by data-target.
   The tuner (Shift+T → Click zones) edits these live and outputs
   updated values to paste back here.

   Coordinate model:  --x, --y  = top-left % of stage
                      --w, --h  = width, height % of stage
   ───────────────────────────────────────────────────────────── */

/* ════════════════════════════════════════
   Desktop zones — visible at width > 768px
   ════════════════════════════════════════ */
.zones--desktop .hotspot[data-target="heart"]            { --x: 40.375%; --y: 34.745%; --w: 20%;   --h: 30%;   }
.zones--desktop .hotspot[data-target="canopy"]           { --x: 28.77%;  --y:  2.334%; --w: 43.1%; --h: 34.4%; }
.zones--desktop .hotspot[data-target="landscape-left"]   { --x:  0%;     --y: 30%;     --w: 31%;   --h: 23.9%; }
.zones--desktop .hotspot[data-target="landscape-right"]  { --x: 69%;     --y: 30%;     --w: 31%;   --h: 28%;   }
.zones--desktop .hotspot[data-target="river"]            { --x: 60.574%; --y: 57.056%; --w: 23.3%; --h:  8.8%; }
.zones--desktop .hotspot[data-target="mushrooms"]        { --x:  1.15%;  --y: 53.85%;  --w: 20.1%; --h: 33.1%; }
.zones--desktop .hotspot[data-target="soil"]             { --x: 27.3%;   --y: 66.1%;   --w: 46.9%; --h:  9%;   }
.zones--desktop .hotspot[data-target="flowers"]          { --x: 85.412%; --y: 54.252%; --w: 14%;   --h: 36%;   }
.zones--desktop .hotspot[data-target="butterfly-left"]   { --x: 18%;     --y:  6%;     --w:  9%;   --h: 11%;   }
.zones--desktop .hotspot[data-target="butterfly-right"]  { --x: 74%;     --y:  6%;     --w:  9%;   --h: 11%;   }

/* ════════════════════════════════════════
   Mobile zones — visible at width ≤ 768px
   ════════════════════════════════════════ */
.zones--mobile .hotspot[data-target="heart"]      { --x: 33%;    --y: 38.6%;  --w: 34%;   --h: 19%;   }
.zones--mobile .hotspot[data-target="canopy"]     { --x: 18%;    --y:  4%;    --w: 64%;   --h: 30%;   }
.zones--mobile .hotspot[data-target="river"]      { --x: 60%;    --y: 54%;    --w: 18%;   --h:  7%;   }
.zones--mobile .hotspot[data-target="landscape"]  { --x:  0%;    --y: 29.737%;--w: 29%;   --h: 24.6%; }
.zones--mobile .hotspot[data-target="mushrooms"]  { --x:  2.45%; --y: 55.7%;  --w: 18.5%; --h: 25.2%; }
.zones--mobile .hotspot[data-target="soil"]       { --x: 21.44%; --y: 65.778%;--w: 56%;   --h:  9%;   }
.zones--mobile .hotspot[data-target="flowers"]    { --x: 84.4%;  --y: 50.2%;  --w: 15.2%; --h: 47%;   }
.zones--mobile .hotspot[data-target="butterfly"]  { --x: 70%;    --y: 38%;    --w: 16%;   --h:  9%;   }