/* Living garden: world scene, story, valley map and daily garden. */

/* ---------- Region palettes (accents only; tiles keep their own colours) ---------- */
body {
  --world-glow: #24433a;
  --world-sky: #16302a;
  --world-edge: #40564a;
  --world-accent: #c5cf9d;
  --mote: #f4e39a;
  --petal: #f3dfa0;
  /* The sky over the page is the story's time of day (#world, below). */
  background: radial-gradient(
    ellipse at 50% 40%,
    var(--world-glow) 0,
    transparent 65%
  );
}
body[data-region="pond"] {
  --world-glow: #1f4442;
  --world-sky: #132f33;
  --world-edge: #3f5a55;
  --world-accent: #bcd9cc;
  --mote: #e6f0b0;
  --petal: #f4c9d4;
}
body[data-region="orchard"] {
  --world-glow: #2b453a;
  --world-sky: #2a2c2c;
  --world-edge: #4f5a4c;
  --world-accent: #e9c9cf;
  --mote: #f7dbe2;
  --petal: #f6d3dc;
}
body[data-region="lanterns"] {
  --world-glow: #33422f;
  --world-sky: #2b2a1f;
  --world-edge: #5a5842;
  --world-accent: #ecd08c;
  --mote: #f5cf7c;
  --petal: #f5d48a;
}
body[data-region="meadow"] {
  --world-glow: #2f4833;
  --world-sky: #26301f;
  --world-edge: #55603f;
  --world-accent: #e8cf86;
  --mote: #f1d98a;
  --petal: #f0b27a;
}
body[data-region="glasshouse"] {
  --world-glow: #294a39;
  --world-sky: #1b3526;
  --world-edge: #4c6a4b;
  --world-accent: #d5e8b6;
  --mote: #eaf2b8;
  --petal: #e5f0c0;
}
body[data-region="mill"] {
  --world-glow: #1f4046;
  --world-sky: #142838;
  --world-edge: #3d5a60;
  --world-accent: #b9d7e6;
  --mote: #d9efff;
  --petal: #cfe8f6;
}
body[data-region="roses"] {
  --world-glow: #3a3a36;
  --world-sky: #2f2129;
  --world-edge: #5f4b50;
  --world-accent: #efb8c0;
  --mote: #f6c4cc;
  --petal: #f2a9b6;
}
body[data-region="wood"] {
  --world-glow: #213c2e;
  --world-sky: #12261d;
  --world-edge: #3c5541;
  --world-accent: #cfe3a6;
  --mote: #e2f5a2;
  --petal: #b9c9f2;
}
body[data-region="stars"] {
  --world-glow: #25374a;
  --world-sky: #182240;
  --world-edge: #45506a;
  --world-accent: #d7ddf6;
  --mote: #fff3c8;
  --petal: #e6ebff;
}
body[data-mode="daily"] {
  --world-glow: #3a432e;
  --world-sky: #2d2a1c;
  --world-edge: #5d5a41;
  --world-accent: #f0d68c;
}
#board {
  position: relative;
  z-index: 1;
  /* The board sits in the same light as the stage: its frame and the gaps
     between tiles take a little of the sky's light (tiles, pipes, light,
     markers and hints keep their own colours). */
  border-color: color-mix(in srgb, var(--world-edge), var(--sky-light) 24%);
  background-color: color-mix(in srgb, #0e211c, var(--sky-light) 9%);
  box-shadow:
    0 20px 60px #0003,
    0 0 44px -14px color-mix(in srgb, var(--sky-light) 40%, transparent);
  transition:
    --sky-light 2.2s ease,
    border-color 0.4s;
}
#chapter {
  display: flex;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* A long place name gives way before the garden's position does: "THE
   LAMPLIGHTER'S H… · GARDEN 3 OF 10", never "… · GARDEN 3 O…". */
#chapter > span {
  flex: none;
}
#chapter .place-name,
#chapter .place-position {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
#chapter .place-name ~ .place-position {
  flex: none;
}
#chapter .place-sep {
  white-space: pre;
}
#chapter .place-name {
  color: var(--world-accent);
}
@media (max-width: 400px) {
  #chapter {
    letter-spacing: 1.3px;
  }
}
/* The narrow landscape sidebar has room for two short lines, not one long one. */
@media (min-width: 500px) and (max-height: 560px) and (orientation: landscape) {
  #chapter {
    display: block;
    white-space: normal;
    line-height: 16px;
  }
  #chapter .place-name {
    display: block;
  }
  #chapter .place-sep {
    display: none;
  }
}

/* ---------- The world behind the play screen ---------- */
main {
  position: relative;
  z-index: 1;
}
#world {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  --scene-h: clamp(56px, 13vh, 210px);
  /* The page's sky: a deep version of the stage's (sky.ts keeps it dark
     enough for the page's light text), fading into the garden's dark. */
  background: linear-gradient(
    var(--sky-page) 0,
    color-mix(in srgb, var(--sky-page) 60%, transparent) 42%,
    transparent 80%
  );
  transition:
    --sky-page 2.2s ease,
    --sky-light 2.2s ease,
    --sky-haze 2.2s ease,
    --sky-dark 2.2s ease;
}
.world-sky {
  position: absolute;
  inset: 0 0 auto;
  height: 55vh;
  background: radial-gradient(
    ellipse 60% 70% at 50% -10%,
    color-mix(in srgb, var(--world-accent) 7%, transparent),
    transparent 70%
  );
  animation: breathe 14s ease-in-out infinite;
}
.world-scene {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--scene-h);
}
.scene-hills {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}
.scene-side {
  position: absolute;
  bottom: 0;
  width: clamp(0px, calc((100vw - 580px) / 2), 440px);
  aspect-ratio: 3 / 2;
  height: auto;
}
.scene-side.left {
  left: 0;
}
.scene-side.right {
  right: 0;
}
.tree-dark {
  fill: #0c1d17;
}
@media (max-width: 767px), (max-height: 560px) {
  .scene-side {
    display: none;
  }
}
.hill.far {
  fill: color-mix(in srgb, #0f231d, var(--sky-light) calc(var(--sky-haze) * 20%));
}
.hill.near {
  fill: color-mix(in srgb, #0b1b16, var(--sky-light) calc(var(--sky-haze) * 8%));
}
.scene-path {
  fill: none;
  stroke: color-mix(in srgb, var(--world-accent) 22%, transparent);
  stroke-width: 1.5;
  stroke-dasharray: 2 9;
  stroke-linecap: round;
}
.scene-life {
  opacity: 0.7;
}
.scene-life .v-glow {
  stroke-width: 3;
}
.world-motes {
  position: absolute;
  inset: 0;
}
.mote {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--mote);
  box-shadow: 0 0 8px 2px color-mix(in srgb, var(--mote) 45%, transparent);
  opacity: 0.4;
  animation: drift 11s ease-in-out infinite;
  animation-delay: calc(var(--i) * -1.9s);
}
.mote.petal {
  width: 7px;
  height: 5px;
  border-radius: 70% 20% 70% 20%;
  background: var(--petal);
  box-shadow: none;
  opacity: 0.55;
  animation: fall 17s linear infinite;
  animation-delay: calc(var(--i) * -2.3s);
}
.mote.pollen {
  width: 3px;
  height: 3px;
  opacity: 0.5;
  animation: rise 13s ease-in-out infinite;
  animation-delay: calc(var(--i) * -1.7s);
}
.mote.twinkle {
  width: 3px;
  height: 3px;
  box-shadow: 0 0 6px 1px color-mix(in srgb, var(--mote) 60%, transparent);
  animation: twinkle 5s ease-in-out infinite;
  animation-delay: calc(var(--i) * -0.8s);
}
/* By day the fireflies and night sparkles give way to slow sun motes: pale
   dust drifting in the light, no glow. Petals and pollen keep their own. */
#world[data-light="day"] .mote:is(.firefly, .twinkle) {
  width: 3px;
  height: 3px;
  background: #fff6dc;
  box-shadow: 0 0 3px #fff6dc55;
  animation: sun-mote 21s ease-in-out infinite;
  animation-delay: calc(var(--i) * -2.6s);
}
@keyframes sun-mote {
  0%,
  100% {
    transform: translate(0, 0);
    opacity: 0;
  }
  40% {
    opacity: 0.45;
  }
  60% {
    transform: translate(18px, -10px);
    opacity: 0.3;
  }
}
/* Phones: the puzzle is the whole screen. Keep three quiet lights in the margins. */
@media (max-width: 599px), (max-height: 560px) {
  .mote:nth-child(n + 4) {
    display: none;
  }
}
.world-walkers {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(var(--scene-h) * 0.1);
  height: 30px;
  display: none;
}
@media (min-width: 900px) and (min-height: 640px) {
  .world-walkers {
    display: block;
  }
}
.walker {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 42px;
  height: 30px;
  transform: translateX(-80px);
  animation: stroll 96s linear infinite;
  animation-delay: calc(var(--i) * -27s);
}
.walker.fox {
  animation-duration: 64s;
}
.walker svg {
  width: 100%;
  height: 100%;
  overflow: visible;
  animation: bob 0.8s ease-in-out infinite alternate;
}
.figure {
  fill: #07130f;
}
.figure .brim,
.figure .arm {
  fill: none;
  stroke: #07130f;
  stroke-width: 1.6;
  stroke-linecap: round;
}
.figure .held {
  fill: #f6dc8a;
}
.fox .fox-body {
  fill: #c9793f;
}
/* Moonlit silhouettes: just visible against the hills, never bright. */
.world-walkers .figure {
  fill: #2c443a;
}
.world-walkers .figure .brim,
.world-walkers .figure .arm {
  stroke: #2c443a;
}
.world-walkers .fox .fox-body {
  fill: #6e4128;
}
.world-paused #world *,
.world-paused #garden-dialog * {
  animation-play-state: paused !important;
}
@keyframes breathe {
  50% {
    opacity: 0.6;
  }
}
@keyframes drift {
  0%,
  100% {
    transform: translate(0, 0);
    opacity: 0.15;
  }
  35% {
    opacity: 0.8;
  }
  50% {
    transform: translate(14px, -22px);
  }
  70% {
    opacity: 0.35;
  }
}
@keyframes fall {
  0% {
    transform: translate(0, -40px) rotate(0);
    opacity: 0;
  }
  15% {
    opacity: 0.6;
  }
  85% {
    opacity: 0.5;
  }
  100% {
    transform: translate(46px, 150px) rotate(300deg);
    opacity: 0;
  }
}
@keyframes rise {
  0%,
  100% {
    transform: translate(0, 20px);
    opacity: 0;
  }
  50% {
    transform: translate(-10px, -30px);
    opacity: 0.6;
  }
}
@keyframes twinkle {
  0%,
  100% {
    opacity: 0.25;
  }
  50% {
    opacity: 0.9;
  }
}
@keyframes stroll {
  0% {
    transform: translateX(-80px);
  }
  60%,
  100% {
    transform: translateX(calc(100vw + 80px));
  }
}
@keyframes bob {
  to {
    transform: translateY(-1.5px);
  }
}
@media (prefers-reduced-motion: reduce) {
  /* Still pictures: the cast stands on the path instead of walking it. */
  .walker {
    transform: translateX(calc(4vw + var(--i) * 5vw));
  }
}

/* ---------- Completion: petals and light around the board ---------- */
#bloom-burst {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.burst-glow {
  position: absolute;
  left: var(--cx);
  top: var(--cy);
  width: var(--side);
  height: var(--side);
  margin: calc(var(--side) / -2) 0 0 calc(var(--side) / -2);
  border-radius: 50%;
  background: radial-gradient(
    circle,
    color-mix(in srgb, var(--petal) 30%, transparent) 0,
    transparent 68%
  );
  opacity: 0;
}
.burst-petal {
  position: absolute;
  left: var(--cx);
  top: var(--cy);
  width: 10px;
  height: 7px;
  margin: -3.5px 0 0 -5px;
  border-radius: 70% 20% 70% 20%;
  background: var(--petal);
  opacity: 0;
}
.burst-petal.light {
  width: 6px;
  height: 6px;
  margin: -3px 0 0 -3px;
  border-radius: 50%;
  background: #fff4c4;
  box-shadow: 0 0 8px 2px #f4df9577;
}
#bloom-burst.go .burst-petal {
  animation: burst 2.4s cubic-bezier(0.2, 0.7, 0.3, 1) var(--d) both;
}
#bloom-burst.go .burst-glow {
  animation: glow-out 2s ease-out both;
}
@keyframes burst {
  0% {
    transform: translate(calc(var(--dx) * 0.62), calc(var(--dy) * 0.62))
      rotate(0) scale(0.5);
    opacity: 0;
  }
  18% {
    opacity: 0.95;
  }
  100% {
    transform: translate(var(--dx), calc(var(--dy) + 36px)) rotate(var(--r))
      scale(1);
    opacity: 0;
  }
}
@keyframes glow-out {
  0% {
    transform: scale(0.85);
    opacity: 0;
  }
  30% {
    opacity: 1;
  }
  100% {
    transform: scale(1.35);
    opacity: 0;
  }
}

/* ---------- Small place pictures (scene, map, story) ---------- */
.v-hedge,
.v-canopy,
.v-pine {
  fill: #2f5a3e;
}
.v-canopy {
  fill: #3a6844;
}
.v-pine {
  fill: #274a33;
}
.v-stone {
  fill: #7f8f7c;
}
.v-line,
.v-trunk,
.v-reed,
.v-path,
.v-terrace,
.v-birch,
.v-wheel,
.v-pane,
.v-water-line,
.v-shine,
.v-bramble {
  fill: none;
  stroke-linecap: round;
}
.v-line {
  stroke: #aab39a;
  stroke-width: 2;
}
.v-trunk {
  stroke: #6d5a43;
  stroke-width: 2.4;
}
.v-willow {
  fill: none;
  stroke: #5f9a5e;
  stroke-width: 1.3;
  stroke-linecap: round;
}
.v-reed {
  stroke: #6f9a5c;
  stroke-width: 1.4;
}
.v-path {
  stroke: #6d6a52;
  stroke-width: 3;
  stroke-dasharray: 1 4;
}
.v-glow {
  fill: #f6dc8a;
  stroke: #f6dc8a44;
  stroke-width: 5;
}
.fly {
  fill: #f3ec9c;
  animation: fly 6s ease-in-out infinite;
  animation-delay: calc(var(--i) * -1.4s);
}
.v-water {
  fill: #2c5d62;
}
.v-shine {
  stroke: #cdeceb;
  stroke-width: 1.3;
  opacity: 0.7;
}
.v-shine.s1 {
  animation: shimmer 4.5s ease-in-out infinite;
}
.v-shine.s2 {
  animation: shimmer 5.5s ease-in-out -2s infinite;
}
.v-leaf {
  fill: #4f8a55;
}
.v-bloom {
  fill: #f3b8c8;
}
.v-blossom {
  fill: #f5d0da;
}
.petal {
  fill: #f7dbe2;
  animation: petal-fall 7s linear infinite;
}
.petal.p2 {
  animation-delay: -2.5s;
}
.petal.p3 {
  animation-delay: -5s;
}
.lantern {
  animation: lantern 3.6s ease-in-out infinite;
  animation-delay: calc(var(--i) * -0.9s);
}
.v-hill {
  fill: #2f5134;
}
.v-flowers {
  fill: #ecbf55;
}
.v-flowers.alt {
  fill: #c4cff5;
}
.butterfly {
  fill: #f2e2a0;
  animation: flutter 5s ease-in-out infinite;
}
.butterfly.b2 {
  animation-delay: -2.2s;
}
.v-glass {
  fill: #cfe8b62a;
  stroke: #cfe6c0;
  stroke-width: 1.4;
}
.v-pane {
  stroke: #cfe6c077;
  stroke-width: 0.9;
}
.awake .v-glass {
  fill: #eaf2b83d;
}
.pollen {
  fill: #f2e9a0;
  animation: pollen 5s ease-in-out infinite;
}
.pollen.p2 {
  animation-delay: -1.7s;
}
.pollen.p3 {
  animation-delay: -3.3s;
}
.v-house {
  fill: #3d4c42;
}
.v-wheel {
  stroke: #b99c6c;
  stroke-width: 1.8;
}
.wheel {
  transform-box: fill-box;
  transform-origin: center;
  animation: turn 16s linear infinite;
}
.v-water-line {
  stroke: #3a7188;
  stroke-width: 4;
}
.v-shine.flow {
  stroke: #cdeeff;
  stroke-width: 1.2;
  stroke-dasharray: 4 14;
  animation: flow 3s linear infinite;
}
.v-terrace {
  stroke: #4b6e45;
  stroke-width: 3;
}
.v-roses {
  fill: #ef93a6;
}
.drop {
  fill: #cfeeff;
  animation: spray 1.8s ease-out infinite;
}
.drop.d2 {
  animation-delay: -0.6s;
}
.drop.d3 {
  animation-delay: -1.2s;
}
.v-birch {
  stroke: #e3e8da;
  stroke-width: 2.2;
}
.v-bells {
  fill: #93aaf2;
}
.v-dome {
  fill: #b9c3d9;
}
.star {
  fill: #fff2c0;
  animation: twinkle 4s ease-in-out infinite;
  animation-delay: calc(var(--i) * -0.9s);
}
.v-bramble {
  stroke: #6e6a4c;
  stroke-width: 1.4;
}
/* An overgrown place: dim, still, tangled. */
.vignette {
  transition: filter 1.8s ease-out;
}
.vignette.asleep {
  filter: grayscale(0.9) brightness(0.52);
}
.vignette.asleep * {
  animation: none;
}
.vignette.waking-region {
  filter: saturate(0.75) brightness(0.9);
}
@keyframes fly {
  0%,
  100% {
    transform: translate(0, 0);
    opacity: 0.2;
  }
  50% {
    transform: translate(3px, -4px);
    opacity: 1;
  }
}
@keyframes shimmer {
  0%,
  100% {
    transform: translateX(-3px);
    opacity: 0.25;
  }
  50% {
    transform: translateX(3px);
    opacity: 0.85;
  }
}
@keyframes petal-fall {
  0% {
    transform: translate(0, -4px);
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  100% {
    transform: translate(8px, 16px);
    opacity: 0;
  }
}
@keyframes lantern {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.72;
  }
}
@keyframes flutter {
  0%,
  100% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(6px, -4px);
  }
}
@keyframes pollen {
  0% {
    transform: translate(0, 6px);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: translate(-3px, -10px);
    opacity: 0;
  }
}
@keyframes turn {
  to {
    transform: rotate(360deg);
  }
}
@keyframes flow {
  to {
    stroke-dashoffset: -36;
  }
}
@keyframes spray {
  0% {
    transform: translate(0, 4px);
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
  100% {
    transform: translate(0, -4px);
    opacity: 0;
  }
}

/* The daily entry (#daily-open) is a row in the menu: see layout.css. */

/* ---------- Dialog shells shared by the map, story and daily cards ---------- */
#story-card,
#daily-dialog {
  border: 1px solid #60735a;
  border-radius: 24px;
  color: #e9eddf;
  background:
    radial-gradient(ellipse at 50% 0%, #2c4a3a55, transparent 60%), #142b24;
  box-shadow: 0 28px 100px #0008;
}
#story-card::backdrop,
#daily-dialog::backdrop {
  background: #061710b0;
  backdrop-filter: blur(6px);
}
#story-card .primary,
#daily-dialog .primary,
.valley-actions .primary {
  background: #e6d28a;
  color: #233529;
  border: 0;
}

/* Quiet text buttons shared by the story, daily and valley dialogs. */
.story-actions button,
.daily-actions button,
.valley-actions button {
  min-height: 46px;
  padding: 8px 16px;
  border: 0;
  border-radius: 23px;
  background: transparent;
  color: #c5d3bf;
  font: 15px system-ui;
  cursor: pointer;
}
.story-actions button[hidden] {
  display: none;
}

/* ---------- Valley map ---------- */
#garden-dialog[open] {
  display: block;
}
#garden-dialog {
  width: min(560px, 94vw);
  padding: 12px 20px 18px;
}
.atlas-top {
  top: -12px;
  min-height: 44px;
}
#map-top-left {
  display: flex;
  align-items: center;
  min-height: 44px;
}
#map-back {
  min-height: 44px;
  padding: 0 14px 0 8px;
  border: 1px solid #50694e;
  border-radius: 22px;
  background: transparent;
  color: #dce3be;
  font: 14px system-ui;
  cursor: pointer;
}
#map-back:hover {
  background: #2c4633;
}
.valley-heading {
  text-align: center;
  padding: 0 0 4px;
}
.valley-heading .eyebrow {
  font-size: 11px;
  letter-spacing: 1.5px;
  color: #ced8b4;
}
.valley-heading h2 {
  font:
    normal clamp(26px, 5vw, 34px) Georgia,
    serif;
  letter-spacing: -0.5px;
  margin: 2px 0 2px;
  color: #f0eacc;
}
#garden-progress {
  font:
    italic 15px Georgia,
    serif;
  color: #ddd8af;
  margin: 0;
}
.valley-places {
  margin: 1px 0 0;
  font-size: 12px;
  color: #b5c9b6;
}
.valley {
  position: relative;
  width: min(100%, 440px, calc((94svh - 250px) * 360 / 380));
  aspect-ratio: 360 / 380;
  margin: 6px auto 4px;
}
.valley-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.valley-tree {
  fill: #0f231c;
}
.valley-star {
  fill: #f3ecc4;
  animation: twinkle 5s ease-in-out infinite;
  animation-delay: calc(var(--i) * -1.1s);
}
.valley-route {
  fill: none;
  stroke: #9aa773;
  stroke-opacity: 0.3;
  stroke-width: 1.4;
  stroke-dasharray: 2 6;
  stroke-linecap: round;
}
.valley-route.lit {
  stroke: #f2dd8f;
  stroke-opacity: 0.75;
  stroke-width: 2;
  stroke-dasharray: none;
  filter: drop-shadow(0 0 3px #f2dd8f88);
}
.here-ring {
  fill: #f2dd8f14;
  stroke: #f2dd8f;
  stroke-opacity: 0.7;
  stroke-width: 1.3;
  stroke-dasharray: 3 4;
  animation: here 3s ease-in-out infinite;
}
@keyframes here {
  50% {
    stroke-opacity: 0.3;
  }
}
.map-walker .figure {
  fill: #e9e2c4;
}
.map-walker .figure .brim,
.map-walker .figure .arm {
  stroke: #e9e2c4;
}
.region-node {
  position: absolute;
  width: 25%;
  height: 16%;
  min-width: 44px;
  min-height: 44px;
  transform: translate(-50%, -62%);
  padding: 0;
  border: 0;
  border-radius: 18px;
  background: transparent;
  cursor: pointer;
}
.region-node:hover {
  background: #f2dd8f10;
}
.region-name {
  position: absolute;
  left: 50%;
  bottom: -3px;
  transform: translateX(-50%);
  white-space: nowrap;
  font:
    12px Georgia,
    serif;
  color: #e6e2c6;
  text-shadow:
    0 1px 3px #0b1a15,
    0 0 8px #0b1a15;
}
.region-node.overgrown .region-name {
  color: #aebca8;
}
.region-node.here .region-name {
  color: #f6e4a0;
}
.region-node.here .region-name::after {
  content: " · here";
  font: 600 10px system-ui;
  letter-spacing: 0.5px;
  color: #e6d28a;
}
.valley-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 2px;
}
.valley-actions .primary {
  font-weight: 600;
  font-size: 14px;
}
.valley-quiet {
  display: flex;
  justify-content: center;
  gap: 4px;
}
.valley-quiet button {
  flex: 1 1 0;
  min-height: 44px;
  font-size: 13px;
  color: #d2dcb8;
}
/* Three quiet actions share the row (Daily, The story, More gardens):
   short labels wrap onto two lines rather than cut off. */
.valley-actions .valley-quiet button {
  padding: 6px 8px;
  white-space: normal;
  text-overflow: clip;
  line-height: 1.15;
  text-wrap: balance;
}
.valley-quiet button:hover {
  color: #fff0b7;
}
#map-daily.locked {
  color: #aebca8;
}

/* A place: its picture, a line of story, and its gardens. */
.place-heading {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  padding: 10px 0 4px;
}
.place-art {
  height: 64px;
  border-radius: 16px;
  background: radial-gradient(ellipse at 50% 100%, #2e4d3b, #0f231d 75%);
  overflow: hidden;
}
/* The place's own time of day (sky.ts), as far as the player has got. */
.place-art[data-sky] {
  background:
    radial-gradient(ellipse 80% 60% at 50% 100%, #2e4d3b, transparent 75%),
    linear-gradient(var(--sky-top), var(--sky-mid) 55%, var(--sky-low));
}
.place-art svg {
  display: block;
  width: 100%;
  height: 100%;
}
.place-heading .eyebrow {
  font-size: 11px;
  letter-spacing: 1.2px;
  color: #ced8b4;
}
.place-heading h2 {
  font:
    normal 24px Georgia,
    serif;
  margin: 3px 0 4px;
  color: #f0eacc;
}
.place-words {
  margin: 0;
  font:
    italic 13.5px/1.45 Georgia,
    serif;
  color: #d8d6b8;
  text-wrap: pretty;
}
.place-view .chapter-pager {
  margin: 10px 0 4px;
}
.place-view .chapter-pager > div {
  flex-direction: column;
  gap: 1px;
  text-align: center;
}
.place-view .chapter-pager span {
  font-size: 12px;
  letter-spacing: 0.02em;
}
.place-view #garden-map {
  padding-top: 8px;
}
.place-view.unreached .place-words {
  color: #b5c3ad;
}
@media (max-width: 400px) {
  #garden-dialog {
    padding: 8px 14px 14px;
  }
  .place-heading {
    grid-template-columns: 70px minmax(0, 1fr);
    gap: 10px;
    padding-top: 4px;
  }
  .place-art {
    height: 52px;
  }
  .place-heading h2 {
    font-size: 21px;
  }
  .place-words {
    font-size: 13px;
  }
  .region-name {
    font-size: 11px;
  }
  .region-node.here .region-name::after {
    content: "";
  }
}
/* Short landscape screens: words on the left, the valley or gardens on the right. */
@media (min-width: 500px) and (max-height: 560px) {
  #garden-dialog {
    width: min(760px, 96vw);
    max-height: 96svh;
    padding: 6px 16px 10px;
  }
  .atlas-top {
    margin-bottom: 0;
  }
  .valley-view {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto 1fr;
    column-gap: 16px;
    align-items: center;
  }
  .valley-heading {
    text-align: left;
    align-self: end;
  }
  .valley {
    grid-column: 2;
    grid-row: 1 / 3;
    width: auto;
    height: calc(96svh - 76px);
    margin: 0;
  }
  .valley-actions {
    align-self: start;
    margin-top: 8px;
  }
  .valley-quiet {
    justify-content: flex-start;
  }
  .place-view {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.3fr);
    column-gap: 18px;
    align-items: start;
  }
  .place-heading {
    grid-column: 1;
    grid-row: 1 / 3;
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 0;
  }
  .place-art {
    height: 70px;
  }
  .place-view .chapter-pager {
    grid-column: 2;
    margin: 14px 0 2px;
  }
  .place-view #garden-map {
    grid-column: 2;
    padding-top: 2px;
  }
  /* Places of 11–12 gardens stay in two rows, so none drop below the fold. */
  .place-view #garden-map:has(> .garden-node:nth-child(11)) {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

/* ---------- Daily garden ---------- */
#daily-dialog {
  width: min(400px, 92vw);
  max-height: 92svh;
  padding: 14px 22px 18px;
  overflow: auto;
}
.daily-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.daily-top .eyebrow {
  font-size: 11px;
  letter-spacing: 1.5px;
  color: #ced8b4;
}
#daily-dismiss {
  width: 44px;
  height: 44px;
  border: 1px solid #5e725455;
  border-radius: 50%;
  background: transparent;
  color: #b8c7ad;
  font: 27px Georgia;
  cursor: pointer;
}
#daily-title {
  font:
    normal 30px Georgia,
    serif;
  margin: 2px 0 4px;
  color: #f0eacc;
}
.daily-date {
  margin: 0;
  font:
    italic 15px Georgia,
    serif;
  color: #ddd8af;
}
.daily-lede {
  margin: 6px 0 12px;
  font-size: 14px;
  line-height: 1.45;
  color: #cfdac6;
}
.daily-calendar {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px 4px;
}
.daily-calendar li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.daily-calendar .dow {
  font-size: 11px;
  color: #98ae99;
}
.daily-calendar .day {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 13px;
  color: #b5c9b6;
  background: #0f231d88;
}
.daily-calendar .day svg {
  width: 26px;
  height: 26px;
}
.daily-calendar .bloomed .day {
  background: #2c4633;
}
.daily-calendar .today .day {
  outline: 1.5px solid #e6d28a;
  outline-offset: 1px;
  color: #f6e4a0;
}
.daily-streak {
  margin: 12px 0 0;
  font:
    15px Georgia,
    serif;
  color: #f0e3a8;
}
.daily-locked {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.daily-locked span {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 1.5px solid #91aa75;
}
.daily-locked span.on {
  background: #d6d69d;
  border-color: #d6d69d;
}
.daily-actions {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 16px;
}
.daily-actions button[hidden] {
  display: none;
}
.daily-actions .primary.quiet {
  background: transparent;
  color: #e6d28a;
  border: 1px solid #e6d28a66;
}
@media (max-height: 560px) and (min-width: 500px) {
  #daily-dialog {
    width: min(520px, 92vw);
    padding: 8px 18px 12px;
  }
  .daily-lede {
    margin: 2px 0 8px;
  }
  .daily-calendar {
    gap: 4px;
  }
  .daily-actions {
    flex-direction: row;
    margin-top: 8px;
  }
  .daily-actions button {
    flex: 1;
  }
}

/* The cast in story pictures: soft moonlit silhouettes, the fox in russet. */
.story-art .figure,
.story-company .figure {
  fill: #0b1a15;
}
.story-art .figure .brim,
.story-art .figure .arm {
  stroke: #0b1a15;
}
.story-art .v-hill {
  fill: #1e3a2a;
}
.story-art {
  overflow: hidden;
}
#story-card button:focus-visible,
#daily-dialog button:focus-visible,
#garden-dialog button:focus-visible {
  outline: 2px solid #f2d88d;
  outline-offset: 3px;
}
.valley-actions button {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* ---------- Phones: a small garden in each bottom corner ---------- */
.scene-phone {
  position: absolute;
  bottom: 0;
  width: min(44vw, 210px);
  height: calc(min(44vw, 210px) * 0.4);
  display: none;
}
/* A shade lighter than the page's own hills, so the corner gardens read
   as silhouettes, yet far quieter than anything on the board. */
.scene-phone .hill.far {
  fill: #17332a;
}
.scene-phone .hill.near {
  fill: #0e211b;
}
.scene-phone .tree-dark {
  fill: #1c3b30;
}
.scene-phone.left {
  left: 0;
}
.scene-phone.right {
  right: 0;
}
.scene-phone .scene-life {
  opacity: 0.75;
}
.phone-grass {
  fill: none;
  stroke: #2d5242;
  stroke-width: 1.3;
  stroke-linecap: round;
}
.phone-blooms {
  fill: color-mix(in srgb, var(--world-accent) 55%, transparent);
}
@media (max-width: 767px) and (min-height: 561px) {
  .scene-phone {
    display: block;
  }
}
/* A soft light over the top of the phone screen, tinted by the region. */
@media (max-width: 767px) {
  .world-sky {
    background: radial-gradient(
      ellipse 90% 60% at 50% -12%,
      color-mix(in srgb, var(--world-accent) 11%, transparent),
      transparent 72%
    );
  }
}

/* ---------- Polish, 2026-09-28 art review: figures, map, daily ---------- */
.fox .fox-tip {
  fill: #f3e9d2;
}
.world-walkers .fox .fox-tip {
  fill: #8d735c;
}

/* Valley header: the name, then one line of counts. */
.valley-heading h2 {
  margin-top: 0;
}
.valley-counts {
  margin: 2px 0 0;
  font-size: 12px;
  color: #b5c9b6;
}
.valley-counts #garden-progress {
  font:
    italic 15px Georgia,
    serif;
  color: #ddd8af;
}
.valley-counts .valley-places {
  white-space: nowrap;
}
@media (max-width: 400px) {
  .valley-counts .valley-places {
    display: block;
  }
  .valley-counts .valley-sep {
    display: none;
  }
}
/* Continue names the landmark on the map, then the place. */
#map-continue {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  line-height: 1.2;
}
.continue-where {
  font-size: 12.5px;
  font-weight: 500;
  opacity: 0.85;
}
/* Labels sit on a soft plate so the lit path passes under, not through, them. */
.region-name {
  padding: 0 5px 1px;
  border-radius: 7px;
  background: #142b24d9;
}
@media (max-width: 400px) and (min-width: 360px) {
  .region-node.here .region-name::after {
    content: " · here";
    font-size: 9px;
  }
}
/* Short landscape: the heading and actions sit together in the middle of
   their column instead of leaving a well of empty space below. */
@media (min-width: 500px) and (max-height: 560px) {
  .valley-view {
    grid-template-rows: 1fr auto auto 1fr;
  }
  .valley-heading {
    grid-row: 2;
  }
  .valley-actions {
    grid-row: 3;
    align-self: start;
    margin-top: 14px;
  }
  .valley {
    grid-row: 1 / 5;
  }
}

/* Place view: flowers keep a gentle stagger, numbers share one baseline. */
.garden-node:nth-child(even) {
  transform: none;
}
.garden-node:nth-child(odd) .map-flower {
  translate: 0 -5px;
}
.garden-node.locked {
  color: #d3dcc8;
}
.garden-node.locked .map-flower {
  opacity: 0.85;
}
.map-lock {
  stroke: #cbd5bf;
}

/* Daily dialog: the eyebrow never runs into the close button. */
.daily-top {
  gap: 12px;
}
.daily-top .eyebrow {
  min-width: 0;
}
@media (max-width: 360px) {
  .daily-top .eyebrow {
    font-size: 10px;
    letter-spacing: 1px;
  }
}

/* Story stage container (filled by stage.ts; sized by the layout). */
#story-stage {
  position: relative;
  min-height: 0;
}
#story-stage:empty {
  display: none;
}

/* ---------- Story stage (stage.ts) ----------
   The current place as a small scene above the play area. `--heal` (0–1) is
   the share of the place's gardens in bloom: it brings colour, dawn, the lit
   path and the landmark's lights. Registered so it can ease between states. */
@property --heal {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}
/* Time of day (sky.ts): one resolved sky per point in the story, set as these
   properties on the stage, the world, the board and every story picture.
   Registered so a change of sky (the next garden, a heal) eases rather than
   jumps. Defaults are a quiet night. */
@property --sky-top { syntax: "<color>"; inherits: true; initial-value: #050b1a; }
@property --sky-mid { syntax: "<color>"; inherits: true; initial-value: #0b172d; }
@property --sky-low { syntax: "<color>"; inherits: true; initial-value: #182a40; }
@property --sky-sun-c { syntax: "<color>"; inherits: true; initial-value: #f3edd2; }
@property --sky-light { syntax: "<color>"; inherits: true; initial-value: #6b87c4; }
@property --sky-cloud { syntax: "<color>"; inherits: true; initial-value: #2a3850; }
@property --sky-page { syntax: "<color>"; inherits: true; initial-value: #0b1a16; }
@property --sky-ambient { syntax: "<number>"; inherits: true; initial-value: 0.8; }
@property --sky-haze { syntax: "<number>"; inherits: true; initial-value: 0.22; }
@property --sky-stars { syntax: "<number>"; inherits: true; initial-value: 1; }
@property --sky-moon { syntax: "<number>"; inherits: true; initial-value: 1; }
@property --sky-sun { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --sky-dark { syntax: "<number>"; inherits: true; initial-value: 1; }
@property --sky-rain { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --sky-clouds { syntax: "<number>"; inherits: true; initial-value: 0.25; }
@property --sun-x { syntax: "<number>"; inherits: true; initial-value: 40; }
@property --sun-y { syntax: "<number>"; inherits: true; initial-value: 190; }
@property --moon-x { syntax: "<number>"; inherits: true; initial-value: 300; }
@property --moon-y { syntax: "<number>"; inherits: true; initial-value: 40; }
#story-stage {
  height: var(--stage-height, var(--stage-interim, 160px));
  overflow: hidden;
  pointer-events: none;
  user-select: none;
  border-radius: 18px;
  isolation: isolate;
  container-type: size;
  background: #0b1a16;
}
.stage-scene {
  --far: #29483b;
  --mid: #1f3d30;
  --near: #142c22;
  --sil: #0a1813;
  --stone: #9aa58f;
  --leaf: #3b6a47;
  --lawn: #2f5a3d;
  --wood: #6a5139;
  --water: #3f6f6e;
  --glow: #ffe29a;
  --lit: #f6dc8a;
  --bloom0: #f6d68a;
  --bloom1: #f3b7c4;
  --bloom2: #c7e39a;
  position: absolute;
  inset: 0;
  overflow: hidden;
  /* The sky of this point in the story (sky.ts), top to horizon. */
  background: linear-gradient(
    var(--sky-top),
    var(--sky-mid) 52%,
    var(--sky-low) 80%
  );
  --sky-ease: 1.6s ease;
  transition:
    --heal 1.4s ease,
    opacity 0.6s ease,
    --sky-top var(--sky-ease),
    --sky-mid var(--sky-ease),
    --sky-low var(--sky-ease),
    --sky-sun-c var(--sky-ease),
    --sky-light var(--sky-ease),
    --sky-cloud var(--sky-ease),
    --sky-ambient var(--sky-ease),
    --sky-haze var(--sky-ease),
    --sky-stars var(--sky-ease),
    --sky-moon var(--sky-ease),
    --sky-sun var(--sky-ease),
    --sky-dark var(--sky-ease),
    --sky-rain var(--sky-ease),
    --sky-clouds var(--sky-ease),
    --sun-x var(--sky-ease),
    --sun-y var(--sky-ease),
    --moon-x var(--sky-ease),
    --moon-y var(--sky-ease);
}
.stage-scene.entering,
.stage-scene.leaving {
  opacity: 0;
}
.stage-land,
.stage-scene svg.layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
/* The land starts grey and dim; each bloom brings its colour back. */
.stage-land,
.stage-front {
  filter: saturate(calc(0.28 + 0.72 * var(--heal)))
    brightness(calc((0.72 + 0.34 * var(--heal)) * var(--sky-ambient)));
}
.st-star {
  fill: #f4f1dc;
}
.st-stars {
  opacity: calc(0.9 * var(--sky-stars));
}
/* Sun and moon ride the sky's own path (sky.ts positions, stage units). */
.st-sun-g {
  transform: translate(
    calc(var(--sun-x) * 1px),
    calc(var(--sun-y) * 1px)
  );
  opacity: var(--sky-sun);
}
.st-sun {
  fill: color-mix(in srgb, var(--sky-sun-c) 80%, #fff);
}
.st-sun-halo {
  fill: var(--sky-sun-c);
  opacity: 0.22;
}
.st-sun-glow {
  fill: var(--sky-sun-c);
  opacity: 0.1;
}
.st-moon-g {
  transform: translate(
    calc(var(--moon-x) * 1px),
    calc(var(--moon-y) * 1px)
  );
  opacity: var(--sky-moon);
}
.st-moon {
  fill: #f1ecd2;
  opacity: 0.9;
}
/* The land sits in the sky's light: far hills fade toward the horizon's
   colour (dawn peach, golden amber, night blue), nearer ones less. */
.st-hill.far {
  fill: color-mix(
    in srgb,
    var(--far),
    var(--sky-low) calc(var(--sky-haze) * 70%)
  );
}
.st-hill.mid {
  fill: color-mix(
    in srgb,
    var(--mid),
    var(--sky-light) calc(var(--sky-haze) * 30%)
  );
}
.st-hill.near {
  fill: color-mix(
    in srgb,
    var(--near),
    var(--sky-light) calc(var(--sky-haze) * 14%)
  );
}
/* Rain while the sky is stormy (the Weir); still under reduced motion. */
.stage-rain {
  position: absolute;
  inset: -20% 0 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    105deg,
    transparent 0 9px,
    #cfe0ee40 9px 10px
  );
  opacity: calc(var(--sky-rain) * 0.8);
  animation: stage-rain 0.6s linear infinite;
}
.stage-scene:not([data-sky*="storm"]) .stage-rain {
  display: none;
}
.st-hedge,
.st-tree {
  fill: color-mix(in srgb, var(--far) 70%, var(--leaf));
}
.st-river {
  fill: var(--water);
  opacity: 0.7;
}
.st-terrace {
  fill: none;
  stroke: color-mix(in srgb, var(--far) 60%, var(--stone));
  stroke-width: 2;
}
.st-speck.b0 {
  fill: var(--bloom0);
}
.st-speck.b1 {
  fill: var(--bloom1);
}
.st-speck.b2 {
  fill: var(--bloom2);
}
.st-speck {
  opacity: calc(0.2 + 0.8 * var(--heal));
}
.st-far-light {
  fill: var(--glow);
  opacity: calc(0.15 + 0.85 * var(--heal));
}
.st-path,
.st-path-lit {
  fill: none;
  stroke-linecap: round;
}
.st-path {
  stroke: color-mix(in srgb, var(--near) 60%, var(--stone));
  stroke-width: 5;
  opacity: 0.5;
}
.st-path-lit {
  stroke: var(--lit);
  stroke-width: 2.4;
  stroke-dasharray: 100 100;
  stroke-dashoffset: calc(100 - 100 * var(--heal));
  opacity: 0.85;
}

/* The landmark: silhouettes, stone and leaves; its lights follow the heal. */
.st-landmark .p-sil,
.st-landmark .p-dark {
  fill: var(--sil);
}
.st-landmark .p-dark {
  fill: #050d0a;
}
.st-landmark .p-stone,
.st-landmark .statue-fox {
  fill: var(--stone);
}
.st-landmark .p-leaf {
  fill: var(--leaf);
}
.st-landmark .p-leaf.faint {
  opacity: 0.6;
}
.st-landmark .p-lawn {
  fill: var(--lawn);
}
.st-landmark .p-wood,
.st-landmark .p-drawer {
  fill: var(--wood);
}
.st-landmark .p-drawer {
  fill: color-mix(in srgb, var(--wood) 70%, #000);
}
.st-landmark .p-water {
  fill: var(--water);
}
.st-landmark .p-glass {
  fill: color-mix(in srgb, var(--water) 40%, #cfe8d8);
  opacity: 0.35;
}
.st-landmark .p-pane,
.st-landmark .p-line,
.st-landmark .p-reed,
.st-landmark .p-frond,
.st-landmark .p-strand,
.st-landmark .p-weave,
.st-landmark .p-hedge-line,
.st-landmark .p-terrace,
.st-landmark .p-wisteria,
.st-landmark .p-birch,
.st-landmark .p-shine,
.st-landmark .p-stream,
.st-landmark .p-path,
.st-landmark .p-smoke,
.st-landmark .p-bird {
  fill: none;
  stroke-linecap: round;
  stroke-width: 1.6;
}
.st-landmark .p-line {
  stroke: var(--stone);
}
.st-landmark .p-line.thick {
  stroke-width: 3;
}
.st-landmark .p-pane {
  stroke: color-mix(in srgb, var(--stone) 70%, #fff);
  opacity: 0.5;
}
.st-landmark .p-reed,
.st-landmark .p-frond {
  stroke: color-mix(in srgb, var(--leaf) 80%, #d8e6b0);
}
.st-landmark .p-strand {
  stroke: color-mix(in srgb, var(--leaf) 50%, var(--glow) calc(var(--heal) * 50%));
  stroke-width: 1.2;
}
.st-landmark .p-weave,
.st-landmark .p-hedge-line {
  stroke: color-mix(in srgb, var(--leaf) 60%, #000);
  stroke-width: 1.4;
}
.st-landmark .p-terrace {
  stroke: var(--stone);
  stroke-width: 2.4;
}
.st-landmark .p-wisteria {
  stroke: var(--bloom2);
  stroke-width: 3;
  opacity: calc(0.2 + 0.8 * var(--heal));
}
.st-landmark .p-birch {
  stroke: #dfe6da;
  stroke-width: 4;
}
.st-landmark .p-shine,
.st-landmark .p-stream {
  stroke: color-mix(in srgb, var(--water) 40%, #fff);
  opacity: calc(0.25 + 0.6 * var(--heal));
}
.st-landmark .p-stream {
  stroke: var(--water);
  stroke-width: 5;
}
.st-landmark .p-path {
  stroke: color-mix(in srgb, var(--near) 50%, var(--stone));
  stroke-width: 6;
}
.st-landmark .p-smoke {
  stroke: #c8d0c0;
  opacity: calc(0.15 + 0.4 * var(--heal));
}
.st-landmark .p-bird {
  stroke: var(--sil);
  opacity: calc(var(--heal));
}
.st-landmark .p-wheel {
  fill: none;
  stroke: var(--wood);
  stroke-width: 2.6;
}
.st-landmark .p-pot,
.st-landmark .p-marrow,
.st-landmark .p-hay {
  fill: #b77a45;
}
.st-landmark .p-marrow {
  fill: color-mix(in srgb, #6f9a3f 70%, #d9c56a);
}
.st-landmark .p-hay {
  fill: #d9b766;
}
.st-landmark .p-cloth {
  fill: #c9696a;
}
.st-landmark .p-hive.b0 {
  fill: #d9a35a;
}
.st-landmark .p-hive.b1 {
  fill: #9cb7c9;
}
.st-landmark .p-hive.b2 {
  fill: #d98e8e;
}
/* The sixth hive stays quiet: weathered grey, never warmed by the heal. */
.st-landmark .p-hive.quiet {
  fill: #8a8f88;
  filter: saturate(0.4);
}
.st-landmark .p-bell {
  fill: #c9a55a;
}
.st-landmark .p-owl {
  fill: #b89a72;
}
.st-landmark .p-glow {
  fill: var(--glow);
  opacity: calc(0.1 + 0.55 * var(--heal));
}
.st-landmark .p-glow.soft {
  opacity: calc(0.04 + 0.26 * var(--heal));
}
.st-landmark .p-glow.ray,
.st-landmark .p-glow.comet,
.st-landmark .p-glow.sheet {
  opacity: calc(0.05 + 0.5 * var(--heal));
}
.st-landmark .p-glow.jet {
  fill: none;
  stroke: color-mix(in srgb, var(--glow) 40%, #cfeaf0);
  stroke-width: 1.6;
  stroke-linecap: round;
}
.st-landmark .p-bloom {
  fill: var(--bloom0);
  opacity: calc(0.12 + 0.88 * var(--heal));
}
.st-landmark .p-bloom.b1 {
  fill: var(--bloom1);
}
.st-landmark .p-bloom.b2 {
  fill: var(--bloom2);
}
.st-landmark .p-bloom.white {
  fill: #f4f5ff;
}
.st-landmark .p-bloom.bell {
  fill: #8c96f0;
}
.st-landmark .p-bloom.kingfisher {
  fill: #3fa7e0;
}
.stage-scene[data-restored] .st-landmark .p-glow {
  opacity: 1;
}
.stage-scene[data-restored] .st-landmark .p-glow.soft {
  opacity: 0.32;
}
.stage-scene[data-restored] .st-landmark .p-glow.ray,
.stage-scene[data-restored] .st-landmark .p-glow.comet,
.stage-scene[data-restored] .st-landmark .p-glow.sheet {
  opacity: 0.6;
}

/* Heal spots: one quiet light per garden, woken by its bloom. */
.spot .off,
.spot .on {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  transition:
    opacity 0.8s ease,
    transform 0.8s ease;
}
.spot .on {
  opacity: 0;
  transform: scale(0.4);
}
.spot.lit .on {
  opacity: 1;
  transform: none;
}
.spot.lit .off {
  opacity: 0;
}
.s-stem,
.s-ripple,
.s-heart-line {
  fill: none;
  stroke: color-mix(in srgb, var(--leaf) 70%, #9fb58f);
  stroke-width: 1.1;
  stroke-linecap: round;
}
.s-ripple {
  stroke: color-mix(in srgb, var(--water) 60%, #fff);
  opacity: 0.6;
}
.s-heart-line {
  stroke: #0003;
  stroke-width: 0.6;
}
.s-bud {
  fill: #56665d;
}
.s-pad,
.s-leafy {
  fill: color-mix(in srgb, var(--leaf) 80%, #000);
}
.s-stone {
  fill: color-mix(in srgb, var(--stone) 60%, #000);
}
.s-glass {
  fill: #cfe8d833;
  stroke: #cfe8d880;
  stroke-width: 0.6;
}
.s-glassglow {
  fill: var(--glow);
  opacity: 0.5;
}
.s-boat {
  fill: #d8c8a0;
}
.s-light,
.s-heart {
  fill: var(--glow);
}
.s-halo {
  fill: var(--glow);
  opacity: 0.2;
}
.s-petal,
.s-petal.b0 {
  fill: var(--bloom0);
}
.s-petal.b1 {
  fill: var(--bloom1);
}
.s-petal.b2 {
  fill: var(--bloom2);
}
.s-petal.white {
  fill: #f6f7ff;
}
.s-petal.bell {
  fill: #8c96f0;
}
/* The garden being played: its spot shimmers, waiting. */
.spot.here .s-bud {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: spot-waiting 3.4s ease-in-out infinite;
}
@keyframes spot-waiting {
  50% {
    fill: color-mix(in srgb, #56665d 45%, var(--glow));
    transform: scale(1.14);
  }
}
/* Awake lights breathe, each at its own pace (3.6–4.9 s) and phase. */
.spot.lit .s-halo {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: spot-breathe 4.2s ease-in-out infinite;
  animation-delay: calc(var(--i) * -0.73s);
}
.spot:nth-child(3n + 1).lit .s-halo {
  animation-duration: 3.6s;
}
.spot:nth-child(3n + 2).lit .s-halo {
  animation-duration: 4.9s;
}
@keyframes spot-breathe {
  50% {
    opacity: 0.4;
    transform: scale(1.14);
  }
}
/* The garden being played, once awake, is a touch brighter and quicker. */
.spot.current.lit .s-halo {
  animation-name: spot-breathe-here;
  animation-duration: 3.2s;
}
@keyframes spot-breathe-here {
  0%,
  100% {
    opacity: 0.26;
  }
  50% {
    opacity: 0.5;
    transform: scale(1.2);
  }
}
.spot.waking .on {
  animation: spot-wake 1.3s cubic-bezier(0.2, 0.8, 0.25, 1) both;
}
/* The flash settles into breathing rather than holding still. */
.spot.waking .s-halo {
  animation:
    spot-flash 1.6s ease-out both,
    spot-breathe 4.2s ease-in-out 1.6s infinite;
}
@keyframes spot-wake {
  0% {
    opacity: 0;
    transform: scale(0.2);
  }
  55% {
    opacity: 1;
    transform: scale(1.3);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
@keyframes spot-flash {
  0% {
    opacity: 0;
  }
  30% {
    opacity: 0.8;
  }
  100% {
    opacity: 0.2;
  }
}
/* Lit flowers sway from their stems; fireflies and floating lanterns drift;
   lilies bob. Unlit spots stay still. (On an inner group, so the wake and
   heal animations on .on are never overridden.) */
.spot .sway {
  transform-box: fill-box;
  transform-origin: 50% 100%;
}
.spot.lit .sway {
  animation: spot-sway 5.2s ease-in-out infinite alternate;
  animation-delay: calc(var(--i) * -1.3s);
}
.spot:nth-child(2n).lit .sway {
  animation-duration: 6.4s;
}
@keyframes spot-sway {
  from {
    transform: rotate(-2.5deg);
  }
  to {
    transform: rotate(2.5deg);
  }
}
.stage-scene[data-life="fireflies"] .spot.lit .sway,
.stage-scene[data-life="stream"] .spot.lit .sway,
.stage-scene[data-life="water"] .spot.lit .sway {
  animation-name: spot-drift;
  animation-duration: 5s;
}
.stage-scene:is([data-life="lanterns"], [data-life="glass"]) .spot.lit .sway {
  animation: none;
}
@keyframes spot-drift {
  from {
    transform: translateY(0.4px);
  }
  to {
    transform: translateY(-1.6px);
  }
}

/* The cast: silhouettes against the land, Parsnip in russet. */
.stage-life .figure {
  fill: var(--sil);
  transform-box: fill-box;
  transform-origin: 50% 100%;
}
.stage-life .figure .arm,
.stage-life .figure .brim {
  stroke: var(--sil);
}
.stage-life .actor.visitor .figure {
  fill: color-mix(in srgb, var(--sil) 70%, var(--mid));
}
.stage-life .figure .held {
  fill: var(--glow);
}
.stage-life .fox .fox-body {
  fill: #c9793f;
}
.stage-life .held {
  animation: lantern-flicker 4.4s ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * -1.1s);
}
@keyframes lantern-flicker {
  50% {
    opacity: 0.74;
  }
}

/* The place heals: colour floods out from the landmark, lights wake in a
   wave, motes rise and the cast answers the story's mood. */
.stage-flood {
  position: absolute;
  inset: -30%;
  background: radial-gradient(
    circle at 44% 82%,
    color-mix(in srgb, var(--glow) 80%, #fff) 0,
    color-mix(in srgb, var(--glow) 45%, transparent) 18%,
    transparent 52%
  );
  mix-blend-mode: screen;
  opacity: 0;
  transform: scale(0.2);
}
#story-stage.healing .stage-scene {
  --sky-ease: 2.1s cubic-bezier(0.3, 0.1, 0.2, 1) 0.15s;
  transition:
    --heal 1.9s cubic-bezier(0.3, 0.1, 0.2, 1) 0.15s,
    --sky-top var(--sky-ease),
    --sky-mid var(--sky-ease),
    --sky-low var(--sky-ease),
    --sky-sun-c var(--sky-ease),
    --sky-light var(--sky-ease),
    --sky-cloud var(--sky-ease),
    --sky-ambient var(--sky-ease),
    --sky-haze var(--sky-ease),
    --sky-stars var(--sky-ease),
    --sky-moon var(--sky-ease),
    --sky-sun var(--sky-ease),
    --sky-dark var(--sky-ease),
    --sky-rain var(--sky-ease),
    --sky-clouds var(--sky-ease),
    --sun-x var(--sky-ease),
    --sun-y var(--sky-ease),
    --moon-x var(--sky-ease),
    --moon-y var(--sky-ease);
}
#story-stage.healing .stage-flood {
  animation: stage-flood 2.3s ease-out both;
}
@keyframes stage-flood {
  0% {
    opacity: 0;
    transform: scale(0.15);
  }
  30% {
    opacity: 0.85;
  }
  100% {
    opacity: 0;
    transform: scale(1.5);
  }
}
#story-stage.healing .spot .on {
  animation: spot-wave 1.1s ease-out both;
  animation-delay: calc(0.35s + var(--i) * 0.09s);
}
#story-stage.healing .spot .s-halo {
  animation: spot-flash 1.4s ease-out both;
  animation-delay: calc(0.35s + var(--i) * 0.09s);
}
@keyframes spot-wave {
  0% {
    transform: none;
  }
  45% {
    transform: scale(1.35);
  }
  100% {
    transform: none;
  }
}
.stage-motes {
  position: absolute;
  inset: 0;
}
.stage-motes span {
  position: absolute;
  bottom: 16%;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--glow);
  box-shadow: 0 0 6px 1px var(--glow);
  opacity: 0;
  animation: mote-rise 2.2s ease-out both;
  animation-delay: calc(0.3s + var(--d));
}
@keyframes mote-rise {
  15% {
    opacity: 0.95;
  }
  100% {
    opacity: 0;
    transform: translate(calc((var(--i) - 8) * 1.5px), -90px);
  }
}
/* Happy endings: the cast hops; wonder: a slow lift; sad ones stay still
   while the lantern brightens and fewer, slower lights rise. */
#story-stage.healing
  :is(
    [data-mood="joy"],
    [data-mood="funny"],
    [data-mood="triumph"],
    [data-mood="hope"],
    [data-mood="warm"],
    [data-mood="finale"]
  )
  .actor
  > .figure {
  animation: actor-hop 0.55s ease-out 2 both;
  animation-delay: calc(0.9s + var(--i) * 0.12s);
}
@keyframes actor-hop {
  40% {
    transform: translateY(-9%);
  }
}
#story-stage.healing [data-mood="wonder"] .actor > .figure {
  animation: actor-lift 1.8s ease-in-out both;
  animation-delay: calc(0.6s + var(--i) * 0.15s);
}
@keyframes actor-lift {
  50% {
    transform: translateY(-3%) scaleY(1.02);
  }
}
#story-stage.healing
  :is(
    [data-mood="sad"],
    [data-mood="tender"],
    [data-mood="worry"],
    [data-mood="setback"]
  )
  .stage-motes
  span:nth-child(2n) {
  display: none;
}
#story-stage.healing
  :is(
    [data-mood="sad"],
    [data-mood="tender"],
    [data-mood="worry"],
    [data-mood="setback"]
  )
  .stage-motes
  span {
  animation-duration: 3s;
}
/* The storm at the weir: rain sweeps in as the place wakes. */
.stage-scene[data-mood="setback"] .stage-flood::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    105deg,
    transparent 0 9px,
    #cfe0ee55 9px 10px
  );
}
#story-stage.healing [data-mood="setback"] .stage-flood {
  mix-blend-mode: normal;
  background: #0a141c66;
  animation: stage-storm 2.4s ease-in both;
}
@keyframes stage-storm {
  0% {
    opacity: 0;
    transform: none;
  }
  40%,
  100% {
    opacity: 1;
    transform: none;
  }
}
#story-stage.healing [data-mood="setback"] .stage-flood::after {
  animation: stage-rain 0.5s linear infinite;
}
@keyframes stage-rain {
  to {
    transform: translate(-6px, 22px);
  }
}

/* A line of story over the sky. */
.stage-caption {
  position: absolute;
  z-index: 2;
  inset: 0 0 auto;
  margin: 0;
  padding: 10px 16px 22px;
  font:
    italic 14px/1.35 Georgia,
    serif;
  color: #f2ebcf;
  text-shadow: 0 1px 8px #000c;
  background: linear-gradient(#07120ecc, #07120e00);
  text-wrap: balance;
  transition: opacity 0.26s ease;
}
.stage-caption span {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}
.stage-caption.changing {
  opacity: 0;
}
/* More gardens carry no story line: the lit valley on its own. */
.stage-caption:has(> span:empty) {
  opacity: 0;
}
@container (max-height: 150px) {
  .stage-caption {
    padding: 7px 12px 16px;
    font-size: 12.5px;
  }
}
@container (min-width: 560px) {
  .stage-caption {
    padding: 14px 22px 26px;
    font-size: 15px;
  }
}
#story-stage.paused *,
#story-stage.paused *::after {
  animation-play-state: paused;
}

/* Story cards carry the feeling of the moment in their light. */
#story-card[data-mood="sad"],
#story-card[data-mood="tender"],
#story-card[data-mood="worry"],
#story-card[data-mood="setback"] {
  background:
    radial-gradient(ellipse at 50% 0%, #2e405055, transparent 60%), #13262a;
  border-color: #56707a;
}
#story-card[data-mood="wonder"] {
  background:
    radial-gradient(ellipse at 50% 0%, #3a3f6a55, transparent 60%), #152629;
}
#story-card[data-mood="finale"],
#story-card[data-mood="triumph"] {
  background:
    radial-gradient(ellipse at 50% 0%, #6a5a2c66, transparent 62%), #172b22;
  border-color: #8a7d4d;
}

/* The valley strip: ten small lights, one per region, filled as they wake. */
.story-progress {
  margin: 12px 24px 0;
}
.valley-strip {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0;
  margin: 0 0 6px;
  padding: 0;
  list-style: none;
}
.valley-strip li {
  display: flex;
  align-items: center;
}
.valley-strip li + li::before {
  content: "";
  width: 12px;
  height: 1px;
  background: #60735a88;
}
.valley-strip .dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1px solid #8fa28a88;
  background: conic-gradient(#f2d88d var(--lit), transparent 0);
}
.valley-strip .full .dot {
  background: #f2d88d;
  border-color: #f2d88d;
  box-shadow: 0 0 8px #f2d88d99;
}
.valley-strip .here .dot {
  width: 14px;
  height: 14px;
  border-color: #f2d88d;
}
.story-progress p {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.45;
  color: #cfdac6;
}
.story-progress p + p {
  color: #aebfa9;
}
@media (min-width: 500px) and (max-height: 560px) {
  .story-progress {
    grid-column: 2;
    margin: 6px 22px 0;
  }
  .valley-strip {
    justify-content: flex-start;
  }
  .story-progress p {
    text-align: left;
  }
}
@media (max-height: 700px) and (max-width: 499px) {
  .story-progress {
    margin: 8px 20px 0;
  }
}

/* Region light for the stage. */
.stage-scene[data-region="pond"] {
  --water: #3e7a7c;
  --bloom0: #f4b7c9;
  --bloom1: #f7a1bb;
  --bloom2: #fff0c9;
}
.stage-scene[data-region="orchard"] {
  --leaf: #4b7a4c;
  --bloom0: #f8d2dc;
  --bloom1: #fbe6ec;
  --bloom2: #9a64b4;
}
.stage-scene[data-region="lanterns"] {
  --glow: #ffcf73;
  --lit: #ffcf73;
  --bloom0: #f5d48a;
}
.stage-scene[data-region="meadow"] {
  --lawn: #4a6b35;
  --bloom0: #ea5a48;
  --bloom1: #7394ea;
  --bloom2: #f4ead0;
}
.stage-scene[data-region="glasshouse"] {
  --water: #5d9e86;
  --glow: #f0f5b8;
  --bloom0: #e98ec6;
  --bloom1: #f2e27a;
  --bloom2: #c9a2f0;
}
.stage-scene[data-region="mill"] {
  --water: #4b87a8;
  --glow: #ffd88a;
  --bloom0: #f2e2a8;
}
.stage-scene[data-region="roses"] {
  --bloom0: #ea6f8a;
  --bloom1: #f6b6c4;
  --bloom2: #b99ae8;
}
.stage-scene[data-region="wood"] {
  --leaf: #2f5d3a;
  --glow: #e7f5a6;
  --bloom0: #8c96f0;
  --bloom1: #b9c3f5;
  --bloom2: #e2f5a2;
}
.stage-scene[data-region="stars"] {
  --far: #243452;
  --mid: #1c2a40;
  --near: #121c2c;
  --glow: #fff3c8;
  --lit: #fff3c8;
  --bloom0: #f4f5ff;
}

@media (prefers-reduced-motion: reduce) {
  #world,
  #board,
  .stage-rain,
  #story-stage *,
  #story-stage *::before,
  #story-stage *::after,
  .story-art .stage-scene,
  .story-art .stage-scene *,
  .menu-art .stage-scene,
  .menu-art .stage-scene * {
    animation: none !important;
    transition: none !important;
  }
}
.st-grass {
  fill: none;
  stroke: color-mix(in srgb, var(--near) 55%, var(--leaf));
  stroke-width: 1.1;
  stroke-linecap: round;
}
.st-flower {
  fill: var(--bloom0);
  opacity: calc(var(--heal) * 0.9);
}
.st-flower.b1 {
  fill: var(--bloom1);
}
.st-flower.b2 {
  fill: var(--bloom2);
}
.st-landmark .p-post {
  fill: none;
  stroke: var(--wood);
  stroke-width: 2.2;
  stroke-linecap: round;
}
.st-landmark .p-post.thick {
  stroke-width: 4;
}
.st-landmark .p-foam {
  fill: #e8f2f2;
  opacity: calc(0.2 + 0.6 * var(--heal));
}
.st-moon-halo {
  fill: #f3edd2;
  opacity: 0.1;
}
/* Someone new arrives as the place heals (Parsnip’s cubs, Wren). */
#story-stage.healing .actor.wren,
#story-stage.healing .actor.cub {
  animation: actor-arrive 1.8s ease-out 0.7s both;
}
@keyframes actor-arrive {
  from {
    opacity: 0;
  }
}
/* ---------- A living stage ----------
   Owner direction (2026-09-28): the scene should feel alive and layered;
   lights pulse softly, stars twinkle, grass sways, nothing obnoxious. Every
   motion here is a slow transform or opacity loop (no script per frame), with
   low amplitude and its own period and phase; nearer things move more than far
   ones. Reduced motion stills all of it (above); a hidden tab pauses it. */

/* Depth: each layer drifts a few pixels over half a minute, the near ones
   further, so the valley has parallax without anything visibly travelling.
   Only on the live stage (story cards stay framed); the layers paint past
   their own box so their edges never show. */
#story-stage .stage-scene svg.layer {
  overflow: visible;
  animation: drift-near 32s ease-in-out infinite alternate;
}
#story-stage .stage-scene svg.l-sky {
  animation: none;
}
#story-stage .stage-scene svg.l-far {
  animation-name: drift-far;
}
#story-stage .stage-scene svg.l-mid {
  animation-name: drift-mid;
}
#story-stage .stage-scene svg.l-front {
  animation-name: drift-front;
}
@keyframes drift-far {
  from {
    transform: translateX(-0.25%);
  }
  to {
    transform: translateX(0.25%);
  }
}
@keyframes drift-mid {
  from {
    transform: translateX(-0.5%);
  }
  to {
    transform: translateX(0.5%);
  }
}
@keyframes drift-near {
  from {
    transform: translateX(-0.8%);
  }
  to {
    transform: translateX(0.8%);
  }
}
@keyframes drift-front {
  from {
    transform: translateX(-1.3%);
  }
  to {
    transform: translateX(1.3%);
  }
}

/* Stars twinkle one by one at 3.6–7.3 s; the brighter ones also swell. */
.st-star {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: star-twinkle 5.2s ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * -1.37s);
}
.st-star:nth-child(5n + 1) {
  animation-duration: 3.6s;
}
.st-star:nth-child(5n + 2) {
  animation-duration: 6.1s;
}
.st-star:nth-child(5n + 3) {
  animation-duration: 4.4s;
}
.st-star:nth-child(5n + 4) {
  animation-duration: 7.3s;
}
.st-star.bright {
  animation-name: star-twinkle-bright;
}
@keyframes star-twinkle {
  0%,
  100% {
    opacity: 0.9;
  }
  50% {
    opacity: 0.3;
  }
}
@keyframes star-twinkle-bright {
  0%,
  100% {
    opacity: 1;
    transform: scale(1.25);
  }
  45% {
    opacity: 0.45;
    transform: scale(0.85);
  }
}
/* A rare shooting star (once every 47 s, about a second long), only while
   the place is still dark; the starry region keeps its night. */
.st-shoot {
  fill: #fbf6e2;
  opacity: 0;
  animation: shooting-star 47s linear infinite;
  animation-delay: -34s;
}
.l-sky .st-shoot {
  --night: var(--sky-stars);
}
@keyframes shooting-star {
  0%,
  96.6% {
    opacity: 0;
    transform: translate(238px, 42px);
  }
  97.2% {
    opacity: calc(0.85 * var(--night, 1));
  }
  98.8% {
    opacity: 0;
    transform: translate(184px, 58px);
  }
  100% {
    opacity: 0;
    transform: translate(184px, 58px);
  }
}
.st-moon-halo {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: moon-breathe 9s ease-in-out infinite;
}
@keyframes moon-breathe {
  50% {
    transform: scale(1.15);
  }
}

/* Clouds and mist: soft banks that drift slowly, far slower than the grass. */
.st-cloud {
  fill: var(--sky-cloud);
  opacity: calc(0.1 + 0.4 * var(--sky-clouds));
}
.st-clouds {
  animation: cloud-drift 90s ease-in-out infinite alternate;
}
.st-cloud.c1 {
  opacity: calc(0.07 + 0.3 * var(--sky-clouds));
}
@keyframes cloud-drift {
  from {
    transform: translateX(-16px);
  }
  to {
    transform: translateX(16px);
  }
}
.st-mist {
  fill: color-mix(in srgb, var(--sky-low) 55%, #e6efe8);
  opacity: 0.1;
  animation: mist-drift 58s ease-in-out infinite alternate;
}
.st-mist.near {
  opacity: 0.08;
  animation-duration: 44s;
  animation-direction: alternate-reverse;
}
@keyframes mist-drift {
  from {
    transform: translateX(-22px);
  }
  to {
    transform: translateX(22px);
  }
}

/* Water shimmers: glints on the river and the landmark's water. */
.st-shine,
.st-landmark .p-shine {
  animation: shimmer-soft 4.2s ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * -0.9s);
}
.st-shine {
  fill: none;
  stroke: color-mix(in srgb, var(--water) 40%, #fff);
  stroke-width: 0.9;
  stroke-linecap: round;
  opacity: 0.4;
}
.st-landmark .p-shine:nth-of-type(2n) {
  animation-duration: 5.4s;
  animation-delay: -2.1s;
}
@keyframes shimmer-soft {
  0%,
  100% {
    opacity: 0.15;
    transform: translateX(-1.5px);
  }
  50% {
    opacity: 0.7;
    transform: translateX(1.5px);
  }
}

/* Grass sways from its roots: four interleaved rows, each at its own pace;
   the foreground tufts sway the most. */
.st-sway {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: grass-sway 6.2s ease-in-out infinite alternate;
}
.st-sway.r1 {
  animation-duration: 7.4s;
  animation-delay: -2.6s;
}
.st-sway.r2 {
  animation-duration: 5.4s;
  animation-delay: -4.1s;
}
.st-sway.r3 {
  animation-duration: 8.3s;
  animation-delay: -1.2s;
}
@keyframes grass-sway {
  from {
    transform: skewX(-5deg);
  }
  to {
    transform: skewX(4deg);
  }
}
.st-sway.front {
  animation-name: tuft-sway;
  animation-duration: 6.8s;
}
.st-sway.front.f1 {
  animation-duration: 8.1s;
  animation-delay: -3s;
}
.st-sway.front.f2 {
  animation-duration: 7.3s;
  animation-delay: -5.2s;
}
@keyframes tuft-sway {
  from {
    transform: skewX(-7deg);
  }
  to {
    transform: skewX(5deg);
  }
}
.st-tuft {
  fill: none;
  stroke: color-mix(in srgb, var(--near) 45%, var(--sil));
  stroke-width: 1.8;
  stroke-linecap: round;
}

/* The landmark lives: its lights breathe, reeds and fronds sway, willow and
   wisteria strands stir, the mill wheel turns, smoke curls up, water glints. */
.st-landmark .p-glow {
  animation: glow-breathe 4.4s ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * -1.1s);
}
/* Big washes of light (glasshouse, moon gate, weir, comet) barely move. */
.st-landmark
  .p-glow:is(.soft, .moon, .sheet, .comet, .ray) {
  animation-name: glow-breathe-faint;
  animation-duration: 6.5s;
}
@keyframes glow-breathe {
  50% {
    fill-opacity: 0.74;
  }
}
@keyframes glow-breathe-faint {
  50% {
    fill-opacity: 0.86;
  }
}
.st-landmark .p-glow.jet {
  animation-name: jet-breathe;
  animation-duration: 3.4s;
}
@keyframes jet-breathe {
  50% {
    stroke-opacity: 0.55;
  }
}
.st-landmark .p-glow.spark {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: spark-float 6.4s ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * -1.7s);
}
@keyframes spark-float {
  0%,
  100% {
    transform: translate(0, 0);
    fill-opacity: 1;
  }
  33% {
    transform: translate(2.5px, -2px);
    fill-opacity: 0.45;
  }
  66% {
    transform: translate(-1.5px, -3.5px);
    fill-opacity: 0.9;
  }
}
.st-landmark .p-glow.far {
  animation-name: glow-twinkle;
  animation-duration: 3.8s;
}
@keyframes glow-twinkle {
  50% {
    fill-opacity: 0.35;
  }
}
.st-landmark :is(.p-reed, .p-frond) {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: reed-sway 5.6s ease-in-out infinite alternate;
}
.st-landmark :is(.p-reed, .p-frond):nth-of-type(3n + 1) {
  animation-duration: 6.9s;
  animation-delay: -2.2s;
}
.st-landmark :is(.p-reed, .p-frond):nth-of-type(3n + 2) {
  animation-duration: 4.9s;
  animation-delay: -3.7s;
}
@keyframes reed-sway {
  from {
    transform: rotate(-2.5deg);
  }
  to {
    transform: rotate(2deg);
  }
}
.st-landmark :is(.p-strand, .p-wisteria) {
  transform-box: fill-box;
  transform-origin: 50% 0%;
  animation: strand-stir 6.6s ease-in-out infinite alternate;
}
.st-landmark :is(.p-strand, .p-wisteria):nth-of-type(2n) {
  animation-duration: 8s;
  animation-delay: -3s;
}
@keyframes strand-stir {
  from {
    transform: rotate(3deg);
  }
  to {
    transform: rotate(-3deg);
  }
}
#story-stage .st-landmark .p-wheel,
.story-art .st-landmark .p-wheel {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: turn 36s linear infinite;
}
.st-landmark .p-smoke {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: smoke-curl 7s ease-in-out infinite;
}
@keyframes smoke-curl {
  0%,
  100% {
    opacity: 0.5;
    transform: none;
  }
  50% {
    opacity: 0.25;
    transform: translate(1.5px, -2px) skewX(-6deg);
  }
}
.st-landmark .p-bird {
  animation: bird-glide 11s ease-in-out infinite alternate;
}
.st-landmark .p-bird:nth-of-type(2n) {
  animation-duration: 13s;
  animation-delay: -5s;
}
@keyframes bird-glide {
  from {
    transform: translate(-3px, 1px);
  }
  to {
    transform: translate(3px, -1.5px);
  }
}
.st-landmark .p-foam {
  animation: foam-breathe 3.6s ease-in-out infinite;
}
@keyframes foam-breathe {
  50% {
    fill-opacity: 0.6;
  }
}
.st-far-light {
  animation: glow-twinkle 4.8s ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * -1.3s);
}

/* The region's drifting life: fireflies blink as they wander, petals fall,
   embers and spores rise. Fainter while the place is still asleep. */
.st-ambient {
  opacity: calc(0.45 + 0.55 * var(--heal));
}
.st-mote {
  fill: var(--glow);
}
/* By day: sun motes rather than fireflies (petals keep falling). */
.stage-scene[data-light="day"] .st-drift:not(.fall) .st-mote {
  fill: #fff8e4;
}
.stage-scene[data-light="day"] .st-drift:not(.fall) {
  scale: 0.8;
}
.stage-scene:is([data-life="petals"], [data-life="roses"]) .st-mote {
  fill: var(--bloom1);
}
.stage-scene:is([data-life="meadow"], [data-life="glass"]) .st-mote.b1 {
  fill: var(--bloom1);
}
.stage-scene[data-life="meadow"] .st-mote.b2 {
  fill: var(--bloom2);
}
.st-drift {
  opacity: 0;
  animation: mote-wander 9s ease-in-out infinite;
  animation-delay: calc(var(--i) * -2.3s);
}
.st-drift {
  animation-duration: calc(8.5s + var(--i) * 0.7s);
}
@keyframes mote-wander {
  0%,
  100% {
    opacity: 0;
    transform: translate(0, 0);
  }
  25% {
    opacity: 0.9;
    transform: translate(5px, -3px);
  }
  50% {
    opacity: 0.25;
    transform: translate(9px, 1px);
  }
  75% {
    opacity: 0.8;
    transform: translate(4px, 4px);
  }
}
.st-drift.fall {
  animation-name: mote-fall;
  animation-duration: calc(13s + var(--i) * 0.9s);
  animation-delay: calc(var(--i) * -3.1s);
}
@keyframes mote-fall {
  0% {
    opacity: 0;
    transform: translate(0, 0) rotate(0deg);
  }
  15% {
    opacity: 0.85;
  }
  50% {
    transform: translate(14px, 22px) rotate(120deg);
  }
  85% {
    opacity: 0.7;
  }
  100% {
    opacity: 0;
    transform: translate(20px, 48px) rotate(250deg);
  }
}
.st-drift.rise {
  animation-name: mote-rise-slow;
  animation-duration: calc(11s + var(--i) * 0.8s);
  animation-delay: calc(var(--i) * -2.9s);
}
@keyframes mote-rise-slow {
  0% {
    opacity: 0;
    transform: translate(0, 0);
  }
  20% {
    opacity: 0.8;
  }
  60% {
    transform: translate(4px, -18px);
  }
  100% {
    opacity: 0;
    transform: translate(-2px, -34px);
  }
}

/* The cast breathe (a 2% lift over five seconds) and Parsnip's brush sways. */
.stage-life .actor > .figure {
  animation: actor-breathe 5.2s ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * -1.7s);
}
@keyframes actor-breathe {
  50% {
    transform: scaleY(1.022);
  }
}
.stage-life .fox-tail {
  transform-box: fill-box;
  transform-origin: 100% 70%;
  animation: tail-sway 3.9s ease-in-out infinite alternate;
  animation-delay: calc(var(--i, 0) * -1.3s);
}
@keyframes tail-sway {
  from {
    transform: rotate(-6deg);
  }
  to {
    transform: rotate(5deg);
  }
}