/* Living Garden v2 — intentionally isolated from the retired #garden surface. */
.garden-sanctuary-v2 {
  --garden-ink: #f1eee4;
  --garden-muted: rgba(241, 238, 228, .7);
  --garden-glass: rgba(12, 22, 18, .66);
  position: absolute;
  inset: 0;
  z-index: 170;
  overflow: hidden;
  isolation: isolate;
  color: var(--garden-ink);
  background: #14291f;
  font-family: var(--font-brand, "Hanken Grotesk", system-ui, sans-serif);
  /* Base opacity must stay 1. `animation-fill-mode: both` kept the garden stuck
     invisible when the arrive animation was delayed, interrupted, or reduced. */
  opacity: 1;
  animation: garden-v2-arrive .7s cubic-bezier(.2, .72, .24, 1);
}

body.garden-v2-open {
  overflow: hidden;
}

.garden-v2-visual,
.garden-v2-scene-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* the visual is a gesture surface now (a walk can start on the sky) */
.garden-v2-visual {
  touch-action: none;
}

.garden-v2-scene-svg {
  display: block;
  pointer-events: none;
}

.garden-v2-topbar {
  position: absolute;
  z-index: 12;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: max(18px, env(safe-area-inset-top)) 18px 0;
  pointer-events: none;
}

.garden-v2-topbar > div {
  min-width: 0;
  padding: 9px 12px 10px;
  border: 1px solid rgba(241, 238, 228, .11);
  border-radius: 14px;
  /* solid-enough fill instead of backdrop blur: every blur surface over the
     panning scene re-filters per frame on mobile GPUs */
  background: rgba(8, 17, 15, .66);
  box-shadow: inset 0 1px rgba(255, 255, 255, .05), 0 10px 36px rgba(4, 10, 8, .11);
}

.garden-v2-topbar p,
.garden-v2-topbar span,
.garden-v2-nursery p,
.garden-v2-nursery h2,
.garden-v2-place span {
  margin: 0;
}

.garden-v2-topbar p {
  color: rgba(255, 252, 242, .92);
  font-family: var(--font-brand, "Hanken Grotesk", system-ui, sans-serif);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: .025em;
  line-height: 1.05;
}

.garden-v2-topbar span {
  display: block;
  margin-top: 4px;
  color: rgba(246, 242, 229, .62);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.garden-v2-close,
.garden-v2-nursery header button {
  border: 1px solid rgba(244, 240, 227, .17);
  border-radius: 999px;
  color: rgba(255, 252, 242, .78);
  background: rgba(9, 18, 15, .44);
  font: inherit;
  font-size: 10px;
  font-weight: 650;
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
}

.garden-v2-close {
  min-width: 70px;
  min-height: 40px;
  padding: 0 15px;
  pointer-events: auto;
}

.garden-v2-shared-presence {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid rgba(232, 213, 154, 0.25);
  background: rgba(14, 24, 18, 0.72);
  backdrop-filter: blur(12px);
  color: rgba(237, 231, 214, 0.9);
  font: inherit;
  font-size: 10px;
  font-weight: 550;
  cursor: pointer;
  pointer-events: auto;
  transition: all 0.22s var(--sv2-ease, ease);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}

.garden-v2-shared-presence:hover {
  border-color: rgba(232, 213, 154, 0.6);
  background: rgba(232, 213, 154, 0.16);
  transform: translateY(-1px);
}

.presence-pulse-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #a2d6a0;
  box-shadow: 0 0 8px #a2d6a0;
  animation: presence-glow 2.4s ease-in-out infinite alternate;
}

@keyframes presence-glow {
  0% { opacity: 0.5; transform: scale(0.85); box-shadow: 0 0 4px #a2d6a0; }
  100% { opacity: 1; transform: scale(1.25); box-shadow: 0 0 12px #a2d6a0; }
}

.garden-v2-whisper {
  position: absolute;
  z-index: 8;
  top: clamp(102px, 15vh, 138px);
  left: 50%;
  width: min(78%, 310px);
  margin: 0;
  transform: translateX(-50%);
  color: rgba(255, 250, 235, .78);
  font-family: var(--font-brand, "Hanken Grotesk", system-ui, sans-serif);
  font-size: clamp(15px, 4vw, 18px);
  font-style: italic;
  font-weight: 400;
  line-height: 1.35;
  text-align: center;
  text-shadow: 0 1px 14px rgba(4, 12, 8, .42);
  pointer-events: none;
  transition: opacity .4s ease;
}

.garden-v2-status {
  position: absolute;
  z-index: 15;
  left: 50%;
  /* was 212px, clearing the HUD. the ground is whole, so it sits just
     above the place name instead. */
  bottom: 62px;
  width: min(82%, 330px);
  min-height: 16px;
  transform: translateX(-50%);
  color: rgba(255, 251, 239, .78);
  font-size: 11px;
  line-height: 1.4;
  text-align: center;
  text-shadow: 0 1px 9px rgba(5, 13, 10, .68);
  pointer-events: none;
}

.garden-v2-soil {
  position: absolute;
  z-index: 2;
  top: 44%;
  right: 0;
  /* was 126px, to clear a HUD that no longer exists. that gap is what made
     the sand bed unreachable and swallowed the front half of the ground. */
  bottom: 0;
  left: 0;
  width: 100%;
  border: 0;
  padding: 0;
  color: transparent;
  background: transparent;
  cursor: crosshair;
  /* the watering hold: the browser must never steal the long press */
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

.garden-v2-plant-hits {
  position: absolute;
  z-index: 3;
  inset: 0;
  pointer-events: none;
}

.garden-v2-plant-hit {
  position: absolute;
  width: 48px;
  height: 58px;
  padding: 0;
  transform: translate(-50%, -88%);
  border: 0;
  border-radius: 50% 50% 40% 40%;
  background: transparent;
  cursor: pointer;
  pointer-events: auto;
  overflow: visible;
  /* a walk can start on any hit: without this the browser may claim the
     drag for scrolling and pointercancel the pan a few pixels in */
  touch-action: none;
}

.garden-v2-plant-hit:focus-visible {
  outline: 2px solid rgba(224, 246, 224, .92);
  outline-offset: 3px;
  background: rgba(219, 243, 218, .08);
}

/* The soil is a full-width gesture target. Outlining its entire rectangle
   looked like a broken horizon across the scene; keep keyboard focus visible
   as a small landing ring where a seed can actually be placed. */
.garden-v2-soil:focus-visible {
  outline: 0;
  background: radial-gradient(circle at 50% 64%, rgba(219, 243, 218, .13) 0 28px, transparent 30px);
}
.garden-v2-soil:focus-visible::after {
  position: absolute;
  left: 50%;
  top: 36%;
  width: 52px;
  height: 52px;
  content: "";
  transform: translate(-50%, -50%);
  border: 2px solid rgba(224, 246, 224, .86);
  border-radius: 50%;
  box-shadow: 0 0 0 7px rgba(219, 243, 218, .07);
}

.garden-v2-topbar button:focus-visible,
.garden-v2-nursery button:focus-visible {
  outline: 2px solid #e1f1d8;
  outline-offset: 3px;
}

.garden-sanctuary-v2.is-placing .garden-v2-soil {
  background:
    radial-gradient(circle at 50% 62%, rgba(215, 239, 202, .08), transparent 42%),
    linear-gradient(to top, rgba(211, 234, 198, .04), transparent 62%);
  animation: garden-v2-soil-breathe 2.4s ease-in-out infinite;
}

/* the HUD is deleted. it was a 178px slab at z-index 14 sitting over
   world y 641 to 820, which is 46% of the plantable band: the sand bed had
   zero reachable pixels at every viewport tested, the doorstep sit could
   not be touched, and any plant in the front half could not answer a tap.
   its three doors are world objects now (see .garden-v2-furniture) and its
   four numerals are gone with it. */

/* the place name, out of the ground and out of the way */
.garden-v2-place {
  position: absolute;
  z-index: 12;
  right: 0;
  bottom: max(14px, env(safe-area-inset-bottom));
  left: 0;
  display: flex;
  justify-content: center;
  pointer-events: none;
}

.garden-v2-place span {
  padding: 5px 14px;
  border-radius: 999px;
  background: rgba(10, 20, 16, .42);
  color: rgba(255, 252, 240, .8);
  font-family: var(--font-brand, "Hanken Grotesk", system-ui, sans-serif);
  font-size: 12.5px;
  letter-spacing: .02em;
}

/* the furniture standing in the world: a seed tray, a shelf, a glass jar */
.garden-v2-furn-hit {
  width: 64px;
  height: 64px;
  margin: -32px 0 0 -32px;
  overflow: visible;
}

.garden-v2-world-cue {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 2px);
  transform: translateX(-50%);
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(10, 17, 13, .7);
  color: rgba(241, 238, 228, .86);
  font-size: 9px;
  letter-spacing: .04em;
  line-height: 1.2;
  white-space: nowrap;
  pointer-events: none;
  text-shadow: 0 1px 8px rgba(4, 10, 8, .7);
}

.garden-v2-jar-hit {
  width: 46px;
  height: 58px;
  margin: -40px 0 0 -23px;
}

.gv-jar-drop {
  animation: gv-jar-drop 2.6s ease-in-out infinite;
}

@keyframes gv-jar-drop {
  0%, 100% { opacity: .55; transform: translateY(0); }
  50% { opacity: 1; transform: translateY(2px); }
}

.garden-v2-nursery {
  position: absolute;
  z-index: 31;
  right: 0;
  bottom: 0;
  left: 0;
  max-height: min(78%, 620px);
  padding: 12px 18px max(20px, env(safe-area-inset-bottom));
  overflow-y: auto;
  border-top: 1px solid rgba(243, 240, 225, .16);
  border-radius: 25px 25px 0 0;
  background:
    linear-gradient(180deg, rgba(20, 34, 27, .98), rgba(9, 18, 14, .99)),
    #0e1b15;
  box-shadow: 0 -24px 70px rgba(2, 9, 6, .6), inset 0 1px rgba(255, 255, 255, .05);
  overscroll-behavior: contain;
  animation: garden-v2-sheet-up .46s cubic-bezier(.2, .76, .28, 1) both;
}

@media (min-width: 680px) {
  .garden-v2-nursery {
    top: 50%;
    bottom: auto;
    left: 50%;
    right: auto;
    width: min(580px, calc(100% - 48px));
    max-height: min(82%, 600px);
    transform: translate(-50%, -50%);
    border: 1px solid rgba(243, 240, 225, .18);
    border-radius: 24px;
    box-shadow: 0 24px 70px rgba(0, 0, 0, .65), 0 0 0 1px rgba(255, 255, 255, .04);
    animation: garden-v2-modal-pop .38s cubic-bezier(.2, .76, .28, 1) both;
  }
}

@keyframes garden-v2-modal-pop {
  from { opacity: 0; transform: translate(-50%, -46%) scale(.96); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

.garden-v2-nursery[hidden] {
  display: none;
}

.garden-sanctuary-v2.is-nursery-open::after,
.garden-sanctuary-v2.is-placing::after {
  position: absolute;
  z-index: 29;
  inset: 0;
  content: "";
  background: rgba(3, 10, 7, .65);
  pointer-events: none;
}

.garden-sanctuary-v2.is-nursery-open .garden-v2-furn-hit,
.garden-sanctuary-v2.is-nursery-open .garden-v2-world-cue,
.garden-sanctuary-v2.is-nursery-open .garden-v2-loop,
.garden-sanctuary-v2.is-placing .garden-v2-furn-hit,
.garden-sanctuary-v2.is-placing .garden-v2-world-cue,
.garden-sanctuary-v2.is-placing .garden-v2-loop {
  display: none !important;
}

.garden-v2-sheet-handle {
  width: 35px;
  height: 3px;
  margin: 2px auto 13px;
  border-radius: 999px;
  background: rgba(236, 240, 225, .2);
}

.garden-v2-nursery header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.garden-v2-nursery header p {
  color: rgba(232, 236, 219, .5);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.garden-v2-nursery h2 {
  margin-top: 3px;
  color: rgba(255, 251, 238, .91);
  font-family: var(--font-brand, "Hanken Grotesk", system-ui, sans-serif);
  font-size: 22px;
  font-weight: 450;
  line-height: 1.05;
}

.garden-v2-nursery header button {
  min-height: 36px;
  padding: 0 13px;
}

.garden-v2-nursery-note {
  margin: 10px 0 13px !important;
  color: rgba(235, 235, 220, .54);
  font-family: var(--font-brand, "Hanken Grotesk", system-ui, sans-serif);
  font-size: 13px;
  line-height: 1.35;
}

/* the one number the nursery needs, visible while choosing. it also carries
   the gentle refusal when a seed asks for more than is held. */
.garden-v2-nursery-dew {
  margin: 6px 0 0 !important;
  color: rgba(232, 213, 154, .8);
  font-family: var(--font-brand, "Hanken Grotesk", system-ui, sans-serif);
  font-size: 13px;
  letter-spacing: .02em;
}

.garden-v2-species.is-waiting { opacity: .58; }

.garden-v2-available-head,
.garden-v2-heirloom-head,
.garden-v2-gift-head {
  margin: 14px 0 8px;
  color: rgba(232, 213, 154, .68);
  font-size: 9px;
  font-weight: 650;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.garden-v2-future {
  margin-top: 14px;
  border-top: 1px solid rgba(232, 237, 219, .09);
}

.garden-v2-future summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 48px;
  color: rgba(245, 239, 221, .72);
  cursor: pointer;
  list-style: none;
}

.garden-v2-future summary::-webkit-details-marker { display: none; }
.garden-v2-future summary::after { content: "+"; color: rgba(232, 213, 154, .7); font-size: 18px; }
.garden-v2-future[open] summary::after { content: "−"; }
.garden-v2-future summary span { font-size: 12px; }
.garden-v2-future summary small { margin-left: auto; color: rgba(235, 235, 220, .42); font-size: 9px; }
.garden-v2-future .garden-v2-species-grid { padding-bottom: 4px; }

.garden-v2-species-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.garden-v2-species {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 82px;
  padding: 10px 14px;
  overflow: hidden;
  border: 1px solid rgba(232, 237, 219, .12);
  border-radius: 16px;
  color: rgba(252, 249, 237, .9);
  background: rgba(232, 238, 215, .04);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: all .2s ease;
}

.garden-v2-species:not(:disabled):hover {
  border-color: rgba(145, 167, 122, .4);
  background: rgba(145, 167, 122, .12);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, .25);
}

.garden-v2-species > svg {
  width: 52px;
  height: 64px;
  flex-shrink: 0;
  overflow: visible;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .3));
}

.garden-v2-species > span {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

.garden-v2-species strong {
  overflow: hidden;
  font-family: var(--font-brand, "Hanken Grotesk", system-ui, sans-serif);
  font-size: 13.5px;
  font-weight: 550;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #ede7d6;
}

.garden-v2-species small {
  color: rgba(236, 236, 219, .6);
  font-size: 11px;
  letter-spacing: .02em;
}

.garden-v2-cost {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 4px;
  padding: 2px 8px;
  width: fit-content;
  border-radius: 999px;
  background: rgba(232, 213, 154, .12);
  color: #e8d59a;
  font-family: var(--font-brand, "Hanken Grotesk", system-ui, sans-serif);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .02em;
}

.garden-v2-cost svg {
  width: 10px;
  height: 11px;
  color: #e8d59a;
  flex-shrink: 0;
}

.garden-v2-cost.is-short {
  background: rgba(235, 235, 220, .06);
  color: rgba(235, 235, 220, .45);
}

.garden-v2-cost.is-short svg {
  color: rgba(235, 235, 220, .4);
}

.garden-v2-species em {
  margin-top: 3px;
  color: rgba(218, 219, 204, .45);
  font-family: var(--font-brand, "Hanken Grotesk", system-ui, sans-serif);
  font-size: 10.5px;
  font-style: italic;
  line-height: 1.2;
}

.garden-v2-species.is-locked {
  cursor: default;
  filter: saturate(.45);
  opacity: .54;
}

.garden-v2-motes {
  position: absolute;
  z-index: 1;
  inset: 28% 0 18%;
  overflow: hidden;
  pointer-events: none;
}

.garden-v2-motes i {
  position: absolute;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: rgba(232, 241, 207, .6);
  box-shadow: 0 0 7px rgba(227, 240, 197, .34);
  animation: garden-v2-mote 9s ease-in-out infinite;
}

.garden-v2-motes i:nth-child(1) { left: 12%; top: 68%; animation-delay: -1s; }
.garden-v2-motes i:nth-child(2) { left: 28%; top: 42%; animation-delay: -5.2s; }
.garden-v2-motes i:nth-child(3) { left: 46%; top: 74%; animation-delay: -3.6s; }
.garden-v2-motes i:nth-child(4) { left: 63%; top: 36%; animation-delay: -7.1s; }
.garden-v2-motes i:nth-child(5) { left: 79%; top: 59%; animation-delay: -2.4s; }
.garden-v2-motes i:nth-child(6) { left: 91%; top: 31%; animation-delay: -6.3s; }

.garden-v2-dewdrop {
  transform-box: fill-box;
  transform-origin: center;
  animation: garden-v2-dew 3.1s ease-in-out infinite;
  animation-delay: var(--dew-delay);
  /* no per-drop drop-shadow: ten animated filters cost more than the glow
     was worth; the drop's own halo circle carries the shine */
}

.garden-v2-star {
  animation: garden-v2-twinkle 4.6s ease-in-out infinite alternate;
}

/* the stream's calm is in its own fills; a group filter over the flowline
   animations re-rasterized the whole stream every frame. */

.garden-v2-burst {
  position: absolute;
  z-index: 34;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

.garden-v2-burst i {
  --distance: 52px;
  position: absolute;
  width: 4px;
  height: 4px;
  margin: -2px;
  transform: rotate(var(--angle)) translateY(0) scale(.5);
  border-radius: 60% 40% 60% 40%;
  background: #d7ead0;
  box-shadow: 0 0 8px rgba(208, 236, 200, .44);
  animation: garden-v2-burst-out .95s cubic-bezier(.15, .7, .2, 1) both;
  animation-delay: calc(var(--i) * 12ms);
}

.garden-v2-burst--big i {
  --distance: 76px;
}

/* the night's restraint is baked into the night palettes now: a filter on
   the whole scene svg forced a full re-filter every animation frame,
   exactly when the most animation runs. */

@keyframes garden-v2-arrive {
  from { opacity: 0; transform: scale(1.018); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes garden-v2-sheet-up {
  from { transform: translateY(102%); }
  to { transform: translateY(0); }
}

@keyframes garden-v2-sway {
  from { transform: rotate(-.7deg) translateX(-.2px); }
  to { transform: rotate(.85deg) translateX(.3px); }
}

@keyframes garden-v2-dew {
  0%, 100% { opacity: .58; transform: translateY(1px) scale(.9); }
  50% { opacity: 1; transform: translateY(-2px) scale(1.06); }
}

@keyframes garden-v2-drop-ready {
  0%, 100% { box-shadow: inset 2px 2px 3px rgba(255, 255, 255, .25), 0 0 12px rgba(162, 222, 207, .09); }
  50% { box-shadow: inset 2px 2px 3px rgba(255, 255, 255, .38), 0 0 21px rgba(162, 222, 207, .24); }
}

@keyframes garden-v2-twinkle {
  from { opacity: .25; }
  to { opacity: 1; }
}

@keyframes garden-v2-mote {
  0%, 100% { opacity: .08; transform: translate(0, 8px); }
  35% { opacity: .62; transform: translate(10px, -5px); }
  70% { opacity: .2; transform: translate(-5px, -15px); }
}

@keyframes garden-v2-soil-breathe {
  0%, 100% { opacity: .62; }
  50% { opacity: 1; }
}

/* 0.1Hz HRV ambient landscape breathing */
#gv4-far {
  animation: gv4-landscape-breathe 10s ease-in-out infinite alternate;
}
@keyframes gv4-landscape-breathe {
  0%, 100% { opacity: .82; }
  50% { opacity: 1; }
}

@keyframes garden-v2-burst-out {
  0% { opacity: 0; transform: rotate(var(--angle)) translateY(0) scale(.4); }
  18% { opacity: 1; }
  100% { opacity: 0; transform: rotate(var(--angle)) translateY(calc(var(--distance) * -1)) rotate(90deg) scale(1); }
}

@media (max-height: 640px) {
  .garden-v2-whisper {
    top: 82px;
    font-size: 14px;
  }

  .garden-v2-status {
    bottom: 54px;
  }

  .garden-v2-nursery {
    max-height: 84%;
  }
}

@media (min-width: 720px) {
  .garden-v2-topbar {
    padding: 24px 24px 0;
  }

  .garden-v2-status {
    bottom: 222px;
  }

}

/* ==========================================================================
   v3 · the living world layers
   ========================================================================== */

/* sway groups · four shared timing tracks so the compositor never carries
   forty oscillators. amplitudes stay small; this is weather, not theater.
   fill-box pins the pivot to the plant's own base (50% 96% of its bounding
   box) the way every other animated svg element here does; without it the
   origin resolved against the shared viewBox and tall plants swung from a
   point off in space, which read as a swimming glitch rather than a sway. */
.gv2-sway-1, .gv2-sway-2, .gv2-sway-3, .gv2-sway-4 {
  transform-box: fill-box;
  transform-origin: 50% 96%;
  animation: gv2-sway 7s ease-in-out infinite;
}
.gv2-sway-2 { animation-duration: 8.4s; animation-delay: -2.1s; }
.gv2-sway-3 { animation-duration: 6.2s; animation-delay: -3.8s; }
.gv2-sway-4 { animation-duration: 9.1s; animation-delay: -1.2s; }
@keyframes gv2-sway {
  0% { transform: rotate(-1.1deg); }
  46% { transform: rotate(1.2deg); }
  100% { transform: rotate(-1.1deg); }
}
/* a breeze day quickens every sway; the sitting practice's breeze pass
   borrows the same hurry for its moment */
.garden-sanctuary-v2.is-weather-breeze .gv2-sway-1,
.garden-sanctuary-v2.is-weather-breeze .gv2-sway-2,
.garden-sanctuary-v2.is-weather-breeze .gv2-sway-3,
.garden-sanctuary-v2.is-weather-breeze .gv2-sway-4,
.garden-sanctuary-v2.is-breeze .gv2-sway-1,
.garden-sanctuary-v2.is-breeze .gv2-sway-2,
.garden-sanctuary-v2.is-breeze .gv2-sway-3,
.garden-sanctuary-v2.is-breeze .gv2-sway-4 { animation-duration: 4.6s; }

/* water drift · two lanes at desynced breaths */
.garden-v2-drift-a { animation: gv2-drift 22s ease-in-out infinite; }
.garden-v2-drift-b { animation: gv2-drift 31s ease-in-out infinite reverse; }
@keyframes gv2-drift {
  0% { transform: translateX(-5px); }
  50% { transform: translateX(5px); }
  100% { transform: translateX(-5px); }
}

/* clouds · long slow crossings. the noon cloud shadow is the daylight event. */
.garden-v2-cloud { animation: gv2-cloud-drift 96s linear infinite; }
.garden-v2-cloud-1 { animation-duration: 128s; animation-delay: -40s; }
@keyframes gv2-cloud-drift {
  from { transform: translateX(-80px); }
  to { transform: translateX(460px); }
}
.garden-v2-cloudshadow { animation: gv2-cloudshadow 75s linear infinite; }
@keyframes gv2-cloudshadow {
  from { transform: translateX(0); }
  to { transform: translateX(1150px); }
}

/* rain · streaks fall on their own clocks; one hash correlates each drop's
   length, weight, opacity, speed and travel, so near rain falls hard and
   far rain drifts — the correlation is what reads as depth */
.garden-v2-raindrop { animation: gv2-rain var(--rs, 1.8s) linear infinite; animation-delay: var(--rd, 0s); }
@keyframes gv2-rain {
  0% { transform: translateY(-30px); opacity: 0; }
  12% { opacity: 1; }
  86% { opacity: .8; }
  100% { transform: translateY(calc(260px + var(--rl, 60px))); opacity: 0; }
}

/* mist · three banks on slow counter-drifts. transform only, and the
   reduced-motion clamp below catches the shared class. */
.garden-v2-mist { animation: gv2-mist 46s ease-in-out infinite alternate; }
.garden-v2-mist-b { animation-duration: 58s; animation-direction: alternate-reverse; }
.garden-v2-mist-c { animation-duration: 71s; animation-delay: -20s; }
@keyframes gv2-mist {
  0% { transform: translateX(-14px); }
  100% { transform: translateX(18px); }
}

/* the glade breathes with the water · opacity only, slow */
.garden-v2-glade { animation: gv2-glade 12s ease-in-out infinite alternate; }
@keyframes gv2-glade {
  0% { opacity: .82; }
  100% { opacity: 1; }
}

/* fireflies · each on its own loop, clipped low in the frame */
.garden-v2-firefly { animation: gv2-firefly 9s ease-in-out infinite; }
.garden-v2-firefly-1 { animation-duration: 7.4s; animation-delay: -2s; }
.garden-v2-firefly-2 { animation-duration: 10.6s; animation-delay: -5s; }
.garden-v2-firefly-3 { animation-duration: 8.2s; animation-delay: -3.4s; }
.garden-v2-firefly-4 { animation-duration: 11s; animation-delay: -7s; }
@keyframes gv2-firefly {
  0% { opacity: 0; transform: translate(0, 0); }
  18% { opacity: .9; }
  42% { opacity: .15; transform: translate(14px, -10px); }
  64% { opacity: .8; transform: translate(-6px, -18px); }
  100% { opacity: 0; transform: translate(4px, -4px); }
}

/* moths orbit the lantern glow in small irregular loops */
.garden-v2-moth { animation: gv2-moth 6.5s ease-in-out infinite; }
.garden-v2-moth-1 { animation-duration: 5.2s; animation-delay: -1.8s; }
.garden-v2-moth-2 { animation-duration: 7.8s; animation-delay: -3.2s; }
@keyframes gv2-moth {
  0% { transform: translate(-7px, 2px); }
  30% { transform: translate(5px, -6px); }
  60% { transform: translate(8px, 4px); }
  100% { transform: translate(-7px, 2px); }
}

/* wildlife · presence, not spectacle. the wren hops; the deer drifts the
   ridge; the heron mostly practices stillness. */
.garden-v2-wren { animation: gv2-wren-hop 20s ease-in-out infinite; }
@keyframes gv2-wren-hop {
  0%, 30% { transform: translate(240px, 560px); }
  33%, 60% { transform: translate(247px, 557px); }
  63%, 90% { transform: translate(243px, 561px); }
  100% { transform: translate(240px, 560px); }
}
.garden-v2-rabbit { animation: gv2-rabbit 26s ease-in-out infinite; }
@keyframes gv2-rabbit {
  0%, 40% { transform: translate(330px, 470px); }
  46%, 82% { transform: translate(312px, 468px); }
  100% { transform: translate(330px, 470px); }
}
.garden-v2-deer > g { animation: gv2-deer 50s linear infinite; }
@keyframes gv2-deer {
  0% { transform: translate(392px, 244px); }
  46% { transform: translate(196px, 246px); }
  62% { transform: translate(196px, 246px); }
  100% { transform: translate(-40px, 244px); }
}
.garden-v2-meteor { animation: gv2-meteor 0.7s ease-out 1 forwards; }
@keyframes gv2-meteor {
  0% { opacity: 0; transform: translate(0, 0); }
  25% { opacity: .9; }
  100% { opacity: 0; transform: translate(40px, 34px); }
}

/* the watering practice · a thin ring swells for four seconds, holds, and
   the water falls for six. the pour rate is fixed. */
.garden-v2-practice {
  position: absolute;
  width: 0; height: 0;
  z-index: 40;
  pointer-events: none;
}
.garden-v2-breath-ring {
  position: absolute;
  left: -14px; top: -14px;
  width: 28px; height: 28px;
  border: 1.6px solid rgba(237, 231, 214, 0.75);
  border-radius: 50%;
  transform: scale(0.4);
  opacity: .9;
}
.garden-v2-practice[data-phase="inhale"] .garden-v2-breath-ring {
  animation: gv2-ring-in 4s ease-in-out 1 forwards;
}
.garden-v2-practice[data-phase="hold"] .garden-v2-breath-ring { transform: scale(1.6); }
.garden-v2-practice[data-phase="exhale"] .garden-v2-breath-ring {
  animation: gv2-ring-out 6s ease-in-out 1 forwards;
}
@keyframes gv2-ring-in { from { transform: scale(0.4); } to { transform: scale(1.6); } }
@keyframes gv2-ring-out { from { transform: scale(1.6); } to { transform: scale(0.5); } }
.garden-v2-can {
  position: absolute;
  left: 16px; top: -44px;
  width: 30px; height: 22px;
  background: #b6502e;
  border-radius: 4px 10px 6px 6px;
  opacity: .92;
  transform-origin: 10% 90%;
  transition: transform 3.4s ease-in-out;
}
.garden-v2-can::before {
  content: "";
  position: absolute;
  left: -9px; top: 7px;
  width: 12px; height: 3px;
  background: #b6502e;
  border-radius: 2px;
  transform: rotate(-24deg);
}
.garden-v2-practice[data-phase="hold"] .garden-v2-can,
.garden-v2-practice[data-phase="exhale"] .garden-v2-can { transform: rotate(-26deg); }
.garden-v2-practice-drops { position: absolute; left: 2px; top: -22px; }
.garden-v2-practice-drops i {
  position: absolute;
  width: 2px; height: 7px;
  border-radius: 2px;
  background: rgba(217, 245, 237, 0.8);
  animation: gv2-pour 1.1s linear infinite;
}
.garden-v2-practice-drops i:nth-child(2) { left: 5px; animation-delay: -.2s; }
.garden-v2-practice-drops i:nth-child(3) { left: 9px; animation-delay: -.5s; }
.garden-v2-practice-drops i:nth-child(4) { left: 13px; animation-delay: -.7s; }
.garden-v2-practice-drops i:nth-child(5) { left: 3px; animation-delay: -.9s; }
.garden-v2-practice-drops i:nth-child(6) { left: 11px; animation-delay: -.35s; }
@keyframes gv2-pour {
  0% { transform: translateY(0); opacity: 0; }
  18% { opacity: .9; }
  100% { transform: translateY(30px); opacity: 0; }
}

/* sitting · the chrome fades to nothing and the scene continues.
   visibility follows the fade out, so the blurred surfaces stop
   compositing instead of filtering an invisible pane forever. */
.garden-sanctuary-v2.is-sitting .garden-v2-place,
.garden-sanctuary-v2.is-sitting .garden-v2-topbar,
.garden-sanctuary-v2.is-sitting .garden-v2-whisper,
.garden-sanctuary-v2.is-sitting .garden-v2-status {
  opacity: 0;
  visibility: hidden;
  transition: opacity 2s ease, visibility 0s 2s;
  pointer-events: none;
}

/* the hud used to step aside while carrying something, and the soil used to
   grow to bottom:0 to reach under where it had been. with the hud gone the
   soil simply reaches the ground at all times, so both hacks are retired.
   the place name is the only chrome left down there and it never takes a
   pointer. */
.garden-sanctuary-v2.is-placing .garden-v2-place,
.garden-sanctuary-v2.is-moving .garden-v2-place,
.garden-sanctuary-v2.is-placing-ornament .garden-v2-place {
  opacity: 0;
  transition: opacity .3s ease;
}

/* while you were away · one quiet card, everything on it true */
.garden-v2-away {
  position: absolute;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  /* solid-enough dim, no backdrop blur over the always-animating scene */
  background: rgba(10, 15, 11, 0.68);
}
.garden-v2-away-card {
  max-width: 270px;
  padding: 22px 24px;
  border-radius: 18px;
  background: rgba(18, 22, 15, 0.94);
  border: 1px solid rgba(237, 231, 214, 0.14);
  text-align: left;
}
.garden-v2-away-card small {
  display: block;
  font-size: 11px;
  letter-spacing: .14em;
  opacity: .6;
  margin-bottom: 10px;
}
.garden-v2-away-card p {
  margin: 0 0 8px;
  font-size: 14.5px;
  line-height: 1.5;
  color: #ede7d6;
}
.garden-v2-away-card button {
  margin-top: 8px;
  padding: 9px 18px;
  border: 1px solid rgba(237, 231, 214, 0.25);
  border-radius: 999px;
  background: none;
  color: #ede7d6;
  font: inherit;
  font-size: 13.5px;
  cursor: pointer;
}

/* the plant card · museum-grade botanical folio */
.garden-v2-plant-card {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(88%, 340px);
  padding: 20px 22px;
  border-radius: 20px;
  background: rgba(14, 20, 16, 0.94);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(232, 213, 154, 0.28);
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.65), 0 0 32px rgba(232, 213, 154, 0.08);
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: 10px;
  animation: folio-arrive 0.28s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes folio-arrive {
  from { opacity: 0; transform: translate(-50%, -46%) scale(0.96); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

.garden-folio-kicker-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.garden-folio-badge {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(232, 213, 154, 0.85);
}

.garden-folio-x {
  background: none;
  border: 1px solid rgba(237, 231, 214, 0.2);
  border-radius: 50%;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(237, 231, 214, 0.7);
  font-size: 11px;
  cursor: pointer;
  transition: all 0.18s ease;
}

.garden-folio-x:hover {
  border-color: rgba(237, 231, 214, 0.6);
  color: #fff;
  background: rgba(237, 231, 214, 0.1);
}

.garden-folio-main {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.garden-folio-title {
  margin: 0;
  font-family: var(--font-brand, "Hanken Grotesk", system-ui, sans-serif);
  font-size: 20px;
  font-weight: 480;
  color: #f7f5ed;
  line-height: 1.15;
}

.garden-folio-latin {
  font-size: 11px;
  font-style: italic;
  color: rgba(232, 213, 154, 0.75);
  font-family: var(--font-brand, "Hanken Grotesk", system-ui, sans-serif);
}

.garden-folio-desc {
  margin: 4px 0 0;
  font-size: 12.5px;
  color: rgba(237, 231, 214, 0.88);
  line-height: 1.4;
}

.garden-folio-lore {
  margin: 0;
  font-size: 11.5px;
  color: rgba(237, 231, 214, 0.6);
  line-height: 1.4;
}

.garden-folio-time {
  margin-top: 4px;
  font-size: 10.5px;
  color: rgba(237, 231, 214, 0.45);
}

.garden-folio-note-box {
  margin-top: 6px;
  padding: 8px 12px;
  border-radius: 10px;
  background: rgba(232, 213, 154, 0.08);
  border: 1px dashed rgba(232, 213, 154, 0.3);
}

.garden-folio-note-box small {
  display: block;
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(232, 213, 154, 0.7);
  margin-bottom: 2px;
}

.garden-folio-note-box p {
  margin: 0;
  font-size: 12px;
  font-style: italic;
  color: #ede7d6;
}

.garden-folio-note-btn {
  margin-top: 6px;
  background: none;
  border: 1px dashed rgba(237, 231, 214, 0.3);
  border-radius: 8px;
  padding: 6px 10px;
  font: inherit;
  font-size: 11px;
  color: #b9c4a8;
  cursor: pointer;
  text-align: left;
  transition: all 0.18s ease;
}

.garden-folio-note-btn:hover {
  border-color: rgba(232, 213, 154, 0.6);
  color: #ede7d6;
}

.garden-folio-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding-top: 6px;
  border-top: 1px solid rgba(237, 231, 214, 0.1);
}

.garden-folio-act-btn {
  flex: 1 1 calc(50% - 4px);
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(237, 231, 214, 0.2);
  background: rgba(237, 231, 214, 0.06);
  color: #ede7d6;
  font: inherit;
  font-size: 11.5px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.18s ease;
  text-align: center;
}

.garden-folio-act-btn:hover {
  border-color: rgba(232, 213, 154, 0.6);
  background: rgba(232, 213, 154, 0.16);
}

.garden-v2-card-cutting-line {
  font-size: 10.5px;
  color: rgba(232, 213, 154, 0.7);
  width: 100%;
  text-align: center;
  margin-top: 4px;
}

/* moving · the lifted plant floats a breath above its shadow. the sway
   animation also writes transform, and a running animation outranks this
   static rule, so a near (animated) plant showed no lift at all when picked
   up. stilling the sway while lifted lets the float read on every plant. */
.garden-v2-plant-art.is-lifted {
  animation: none;
  transform: translateY(-7px) scale(1.06);
  transform-box: fill-box;
  transform-origin: 50% 96%;
  transition: transform .35s ease;
  filter: drop-shadow(0 8px 6px rgba(5, 9, 6, 0.5));
}

/* the shelf · what the days brought. never a store. */
.garden-v2-shelf {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 58;
  background: rgba(15, 19, 13, 0.97);
  border-radius: 20px 20px 0 0;
  border-top: 1px solid rgba(237, 231, 214, 0.12);
  padding: 18px 20px 26px;
  max-height: 62%;
  overflow-y: auto;
}
.garden-v2-shelf header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.garden-v2-shelf h3 { margin: 0; font-size: 14px; letter-spacing: .06em; color: #ede7d6; }
.garden-v2-shelf header button {
  background: none; border: none; color: #b9c4a8;
  font: inherit; font-size: 12.5px; cursor: pointer;
}
.garden-v2-shelf-rows { display: flex; flex-direction: column; gap: 8px; }
.garden-v2-shelf-item {
  text-align: left;
  background: rgba(237, 231, 214, 0.05);
  border: 1px solid rgba(237, 231, 214, 0.1);
  border-radius: 12px;
  padding: 11px 14px;
  color: #ede7d6;
  font: inherit;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.garden-v2-shelf-item strong { font-size: 13.5px; }
.garden-v2-shelf-item small { font-size: 12px; opacity: .62; line-height: 1.4; }
.garden-v2-shelf-empty { font-size: 13px; opacity: .65; line-height: 1.5; margin: 4px 0; }
.garden-v2-shelf-truth { font-size: 11.5px; opacity: .5; margin: 14px 0 0; line-height: 1.45; }
.garden-v2-shelf-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(237, 231, 214, 0.06);
  border: 1px solid rgba(237, 231, 214, 0.14);
  border-radius: 14px;
  color: #ede7d6;
  font: inherit;
  padding: 9px 13px;
  cursor: pointer;
}
.garden-v2-shelf-button strong { font-size: 12.5px; display: block; }
.garden-v2-shelf-button small { font-size: 10.5px; opacity: .6; display: block; }

/* anchor + ornament hit targets · invisible, generous */
.garden-v2-anchor-hit,
.garden-v2-orn-hit {
  position: absolute;
  width: 44px; height: 44px;
  transform: translate(-50%, -70%);
  background: none;
  border: none;
  cursor: pointer;
  pointer-events: auto;
  touch-action: none;
  overflow: visible;
}
.garden-sanctuary-v2.is-placing-ornament .garden-v2-anchor-hit {
  border: 1.4px dashed rgba(237, 231, 214, 0.4);
  border-radius: 50%;
  animation: gv2-anchor-breathe 2.6s ease-in-out infinite;
}
@keyframes gv2-anchor-breathe {
  0%, 100% { transform: translate(-50%, -70%) scale(0.92); opacity: .55; }
  50% { transform: translate(-50%, -70%) scale(1.04); opacity: .95; }
}

/* reduced motion · durations clamp and amplitudes soften. never animation:none:
   anything that ends on a fill frame must still reach it. */
@media (prefers-reduced-motion: reduce) {
  /* the clamp slows fast loops only. slower-than-the-clamp animations (the
     cloud shadow's crossing, the deer's walk) must not be sped UP by it:
     they are stilled below instead. */
  .gv2-sway-1, .gv2-sway-2, .gv2-sway-3, .gv2-sway-4,
  .garden-v2-dewdrop,
  .garden-v2-star,
  .garden-v2-motes i,
  .garden-v2-drop-icon,
  .garden-v2-drift-a, .garden-v2-drift-b,
  .garden-v2-firefly, .garden-v2-moth,
  .garden-v2-wren, .garden-v2-rabbit,
  .garden-sanctuary-v2.is-placing .garden-v2-soil,
  .garden-v2-burst i {
    animation-duration: 24s !important;
    animation-iteration-count: infinite;
  }
  .garden-v2-cloud, .garden-v2-cloudshadow, .garden-v2-deer > g { animation: none !important; }
  /* mist banks drift slower than the clamp; stilling them leaves the
     authored banks in place, which is their own static fallback */
  .garden-v2-mist { animation: none !important; }
  .garden-v2-glade { animation-duration: 24s !important; }
  .garden-v2-practice-drops i { animation: none !important; opacity: .6; }
  .garden-v2-nursery { animation-duration: .01ms !important; }
  .garden-v2-anchor-hit { animation: none !important; opacity: .85; transform: translate(-50%, -70%); }
  .garden-v2-raindrop { animation-duration: 8s !important; }
  .garden-v2-burst i { animation-iteration-count: 1; animation-duration: .01ms !important; }
  .garden-v2-meteor { animation-duration: .01ms !important; }
  .gv2-sway-1, .gv2-sway-2, .gv2-sway-3, .gv2-sway-4 { animation-name: gv2-sway-still; }
  @keyframes gv2-sway-still {
    0%, 100% { transform: rotate(-0.4deg); }
    50% { transform: rotate(0.4deg); }
  }
  .garden-sanctuary-v2 {
    opacity: 1 !important;
    transform: none !important;
  }
  .garden-v2-practice[data-phase="inhale"] .garden-v2-breath-ring,
  .garden-v2-practice[data-phase="exhale"] .garden-v2-breath-ring {
    animation-name: gv2-ring-fade;
  }
  @keyframes gv2-ring-fade {
    from { opacity: .35; }
    to { opacity: .95; }
  }
  .garden-v2-actions button {
    transition: none;
  }
}

/* ==========================================================================
   v4 · the open ground
   ========================================================================== */

/* the hits layer sits in screen space: targets are placed in px by the same
   slice-fit math the scene is drawn with, and the camera slides the whole
   layer in px. children may stand past the right edge mid-world; the visual
   clips them. */
.garden-v2-plant-hits {
  will-change: transform;
}

/* the walk · edge chevrons that breathe, never shout */
.garden-v2-pan {
  position: absolute;
  z-index: 11;
  top: 50%;
  width: 44px;
  height: 84px;
  padding: 0;
  border: 0;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(241, 238, 228, .62);
  font-size: 26px;
  font-family: inherit;
  line-height: 1;
  background: transparent;
  cursor: pointer;
}

.garden-v2-pan span {
  display: block;
  padding: 10px 6px;
  border-radius: 12px;
  background: rgba(8, 17, 15, .6);
  border: 1px solid rgba(241, 238, 228, .12);
  animation: gv4-pan-breathe 4.5s ease-in-out infinite;
}

.garden-v2-pan-east { right: 6px; }
.garden-v2-pan-west { left: 6px; }

/* display:flex above would defeat the hidden attribute without this */
.garden-v2-pan[hidden] { display: none; }

@keyframes gv4-pan-breathe {
  0%, 100% { opacity: .6; transform: translateX(0); }
  50% { opacity: .95; transform: translateX(2px); }
}

.garden-v2-pan-west span { animation-name: gv4-pan-breathe-w; }

@keyframes gv4-pan-breathe-w {
  0%, 100% { opacity: .6; transform: translateX(0); }
  50% { opacity: .95; transform: translateX(-2px); }
}

/* the status line becomes a quiet chip · it must never collide with the
   place title again */
.garden-v2-status:not(:empty) {
  padding: 7px 14px;
  border-radius: 12px;
  background: rgba(8, 17, 15, .78);
  border: 1px solid rgba(241, 238, 228, .1);
  width: auto;
  max-width: min(84%, 340px);
}

/* the garden's name · the title is a door, tap it and it opens */
.garden-v2-name-btn {
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: rgba(248, 246, 238, .94);
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .01em;
  text-align: left;
  cursor: pointer;
  pointer-events: auto;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.garden-v2-name-entry {
  display: flex;
  gap: 6px;
  align-items: center;
  pointer-events: auto;
}

.garden-v2-name-entry input {
  width: 138px;
  padding: 4px 8px;
  border-radius: 9px;
  border: 1px solid rgba(241, 238, 228, .22);
  background: rgba(8, 17, 15, .5);
  color: rgba(248, 246, 238, .94);
  font-family: inherit;
  font-size: 13px;
}

.garden-v2-name-entry button {
  padding: 4px 10px;
  border-radius: 9px;
  border: 1px solid rgba(241, 238, 228, .18);
  background: rgba(126, 145, 105, .28);
  color: rgba(248, 246, 238, .92);
  font-family: inherit;
  font-size: 11px;
  cursor: pointer;
}

/* seeds from walks · the gift shelf at the nursery's head */
.garden-v2-gift-head {
  margin: 12px 0 6px;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(216, 226, 202, .62);
}

.garden-v2-species.garden-v2-gift {
  border-color: rgba(182, 80, 46, .34);
  background: linear-gradient(160deg, rgba(182, 80, 46, .1), rgba(8, 17, 15, .32));
}

/* raking · while the hand draws, the world holds still */
.garden-sanctuary-v2.is-raking .garden-v2-soil {
  cursor: grabbing;
}

@media (prefers-reduced-motion: reduce) {
  .garden-v2-pan span { animation: none; }
}

/* ==========================================================================
   v5 · the heirloom · a one-of-one cultivar, grown only here
   ========================================================================== */
.garden-v2-heirloom-head {
  margin: 4px 0 6px;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(214, 168, 124, .82);
}
.garden-v2-species.garden-v2-heirloom {
  border-color: rgba(214, 168, 124, .38);
  background: linear-gradient(160deg, rgba(214, 168, 124, .12), rgba(8, 17, 15, .34));
  box-shadow: inset 0 0 22px rgba(214, 168, 124, .06);
}
.garden-v2-species.garden-v2-heirloom em {
  color: rgba(224, 190, 150, .78);
}
.garden-v2-plant-card--heirloom {
  border-color: rgba(214, 168, 124, .42);
  box-shadow: inset 0 1px rgba(255, 255, 255, .06), 0 18px 55px rgba(3, 9, 7, .28), inset 0 0 30px rgba(214, 168, 124, .07);
}
.garden-v2-plant-card--heirloom em {
  color: rgba(224, 190, 150, .82);
}

/* seasonal drift · one slow element per season, reduced-motion safe */
.garden-v2-petal { animation: gv2-petal-fall 9s linear infinite; transform-origin: center; }
.garden-v2-flake { animation: gv2-flake-fall 11s linear infinite; }
@keyframes gv2-petal-fall {
  0% { transform: translateY(-8px) rotate(0deg); opacity: 0; }
  15% { opacity: .7; }
  100% { transform: translateY(260px) rotate(220deg); opacity: 0; }
}
@keyframes gv2-flake-fall {
  0% { transform: translateY(-6px) translateX(0); opacity: 0; }
  15% { opacity: .8; }
  100% { transform: translateY(300px) translateX(14px); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .garden-v2-petal, .garden-v2-flake { animation: none; opacity: .6; }
}

/* ================= garden v6 · wonder layer =================
   elders, sky events, butterflies, touch magic, sitting timeline.
   every motion is transform/opacity only; reduced-motion below
   stills each one without removing the thing itself. */

/* ---- touch magic · dom layers stamped where the hand lands ---- */
.garden-v2-ripple,
.garden-v2-streak,
.garden-v2-pollen,
.garden-v2-petalfall {
  position: absolute;
  z-index: 40;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

.garden-v2-ripple i {
  position: absolute;
  width: 10px;
  height: 10px;
  margin: -5px;
  border: 1.5px solid rgba(217, 245, 237, .75);
  box-shadow: 0 0 8px rgba(180, 235, 220, 0.4);
  border-radius: 50%;
  opacity: 0;
  animation: gv2-ripple-out 2.2s cubic-bezier(0.1, 0.6, 0.3, 1) both;
}
.garden-v2-ripple i:nth-child(2) { animation-delay: .22s; border-color: rgba(237, 248, 242, .65); }
.garden-v2-ripple i:nth-child(3) { animation-delay: .48s; border-color: rgba(200, 240, 230, .5); }
.garden-v2-ripple i:nth-child(4) { animation-delay: .74s; border-color: rgba(180, 230, 220, .35); }
@keyframes gv2-ripple-out {
  0% { transform: scale(.25); opacity: .9; }
  100% { transform: scale(8.5); opacity: 0; }
}

.garden-v2-streak i {
  position: absolute;
  width: 52px;
  height: 1.8px;
  margin: -1px 0 0 -26px;
  background: linear-gradient(90deg, #f0f4fa, rgba(232, 240, 250, 0.4), transparent);
  box-shadow: 0 0 6px rgba(230, 240, 255, 0.6);
  border-radius: 2px;
  opacity: 0;
  transform: rotate(38deg);
  animation: gv2-streak 1.4s ease-out both;
}
@keyframes gv2-streak {
  0% { transform: rotate(38deg) translate(0, 0); opacity: 0; }
  18% { opacity: .95; }
  100% { transform: rotate(38deg) translate(85px, 70px); opacity: 0; }
}

.garden-v2-pollen i {
  position: absolute;
  width: 3.2px;
  height: 3.2px;
  margin: -1.6px;
  border-radius: 50%;
  background: #f0dea5;
  box-shadow: 0 0 8px rgba(240, 222, 165, .6);
  opacity: 0;
  animation: gv2-pollen-drift 2.2s ease-out both;
}
.garden-v2-pollen i:nth-child(1) { --px: -14px; --py: 36px; animation-delay: 0s; }
.garden-v2-pollen i:nth-child(2) { --px: 20px; --py: 48px; animation-delay: .10s; }
.garden-v2-pollen i:nth-child(3) { --px: -28px; --py: 62px; animation-delay: .20s; }
.garden-v2-pollen i:nth-child(4) { --px: 34px; --py: 44px; animation-delay: .30s; }
.garden-v2-pollen i:nth-child(5) { --px: 10px; --py: 72px; animation-delay: .40s; }
.garden-v2-pollen i:nth-child(6) { --px: -40px; --py: 34px; animation-delay: .50s; }
.garden-v2-pollen i:nth-child(7) { --px: 24px; --py: 78px; animation-delay: .60s; }
.garden-v2-pollen i:nth-child(8) { --px: -18px; --py: 84px; animation-delay: .70s; }
@keyframes gv2-pollen-drift {
  0% { transform: translate(0, 0); opacity: 0; }
  20% { opacity: .95; }
  100% { transform: translate(var(--px, 16px), var(--py, 44px)); opacity: 0; }
}

.garden-v2-petalfall i {
  position: absolute;
  width: 5.5px;
  height: 5.5px;
  margin: -2.7px;
  border-radius: 50% 0 50% 50%;
  background: #edd2db;
  opacity: 0;
  animation: gv2-petal-touch 1.9s cubic-bezier(0.2, 0.7, 0.3, 1) both;
}
.garden-v2-petalfall i:nth-child(2n) { background: #d9d3a7; }
.garden-v2-petalfall i:nth-child(3n) { background: #cce8dd; border-radius: 50%; width: 4px; height: 4px; box-shadow: 0 0 6px rgba(200, 240, 225, 0.6); } /* dewdrop */
.garden-v2-petalfall i:nth-child(1) { --px: -16px; animation-delay: 0s; }
.garden-v2-petalfall i:nth-child(2) { --px: 14px; animation-delay: .12s; }
.garden-v2-petalfall i:nth-child(3) { --px: -6px; animation-delay: .24s; }
.garden-v2-petalfall i:nth-child(4) { --px: 22px; animation-delay: .36s; }
.garden-v2-petalfall i:nth-child(5) { --px: -24px; animation-delay: .48s; }
.garden-v2-petalfall i:nth-child(6) { --px: 18px; animation-delay: .60s; }
@keyframes gv2-petal-touch {
  0% { transform: translate(0, -6px) rotate(0deg); opacity: 0; }
  18% { opacity: .9; }
  100% { transform: translate(var(--px, 10px), 48px) rotate(180deg); opacity: 0; }
}

/* ---- plant bow · a touched plant answers with organic spring recoil ---- */
.gv2-bow {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: gv2-bow-kf 1.4s cubic-bezier(0.25, 1, 0.5, 1) 1;
}
@keyframes gv2-bow-kf {
  0% { transform: rotate(0deg); }
  22% { transform: rotate(-5deg); }
  48% { transform: rotate(3.5deg); }
  72% { transform: rotate(-1.5deg); }
  100% { transform: rotate(0deg); }
}

/* ---- atmospheric shafts / god-rays ---- */
.gv4-shafts {
  animation: gv4-shaft-shimmer 12s ease-in-out infinite alternate;
}
@keyframes gv4-shaft-shimmer {
  0% { opacity: .75; transform: scaleX(0.96); }
  50% { opacity: 1; transform: scaleX(1.04); }
  100% { opacity: .8; transform: scaleX(0.98); }
}

/* ---- sky events · aurora and meteor showers, seeded per day ---- */
.garden-v2-aurora {
  animation: gv2-aurora-sway 34s ease-in-out infinite alternate;
}
.garden-v2-aurora-1 {
  animation-duration: 47s;
  animation-direction: alternate-reverse;
}
@keyframes gv2-aurora-sway {
  0% { transform: translateX(-18px); opacity: .55; }
  50% { opacity: .9; }
  100% { transform: translateX(18px); opacity: .55; }
}

.garden-v2-shower-meteor {
  opacity: 0;
  animation: gv2-shower-fall 26s linear infinite;
  animation-delay: var(--sm-d, 0s);
}
@keyframes gv2-shower-fall {
  0% { transform: translate(0, 0); opacity: 0; }
  4% { opacity: .85; }
  9% { transform: translate(var(--sm-x, 80px), calc(var(--sm-x, 80px) * .75)); opacity: 0; }
  100% { transform: translate(var(--sm-x, 80px), calc(var(--sm-x, 80px) * .75)); opacity: 0; }
}

/* ---- elder plants · a quiet ring and two rising motes ---- */
.garden-v2-elder-ring {
  animation: gv2-elder-ring 6s ease-in-out infinite;
}
@keyframes gv2-elder-ring {
  0%, 100% { opacity: .35; }
  50% { opacity: .8; }
}
.garden-v2-elder-mote-a { animation: gv2-elder-mote 5s ease-in-out infinite; }
.garden-v2-elder-mote-b { animation: gv2-elder-mote 7s ease-in-out infinite 1.4s; }
/* past the halo budget an elder's ring stands still: the honor is kept,
   the compositor is not asked to breathe for forty of them at once */
.garden-v2-elder.is-resting .garden-v2-elder-ring { animation: none; opacity: .4; }
.garden-v2-elder.is-resting .garden-v2-elder-mote { animation: none; opacity: .35; }
@keyframes gv2-elder-mote {
  0%, 100% { transform: translateY(0); opacity: .25; }
  50% { transform: translateY(-10px); opacity: .9; }
}

/* ---- butterflies · morning and day visitors ---- */
.garden-v2-butterfly-0 { animation: gv2-butterfly-a 18s ease-in-out infinite alternate; }
.garden-v2-butterfly-1 { animation: gv2-butterfly-b 23s ease-in-out infinite alternate; }
@keyframes gv2-butterfly-a {
  0% { transform: translate(0, 0); }
  33% { transform: translate(34px, -22px); }
  66% { transform: translate(-18px, -38px); }
  100% { transform: translate(22px, -8px); }
}
@keyframes gv2-butterfly-b {
  0% { transform: translate(0, 0); }
  40% { transform: translate(-40px, -18px); }
  70% { transform: translate(16px, -44px); }
  100% { transform: translate(-12px, -10px); }
}
.garden-v2-bwing {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: gv2-bwing-flap .5s ease-in-out infinite;
}
.garden-v2-bwing-r { animation-delay: .05s; }
@keyframes gv2-bwing-flap {
  0%, 100% { transform: scaleY(1); }
  50% { transform: scaleY(.35); }
}

/* ---- sitting timeline · the garden gathers, then breathes with you ---- */
.garden-v2-sitfly-0 { animation-delay: 0s; }
.garden-v2-sitfly-1 { animation-delay: -1.6s; }
.garden-v2-sitfly-2 { animation-delay: -3.1s; }
.garden-v2-sitfly-3 { animation-delay: -4.4s; }
.garden-v2-sitfly-4 { animation-delay: -6s; }
.garden-v2-sitfly-5 { animation-delay: -7.5s; }

.garden-v2-sitpetal-0 { animation-delay: 0s; }
.garden-v2-sitpetal-1 { animation-delay: -2.2s; }
.garden-v2-sitpetal-2 { animation-delay: -4.1s; }
.garden-v2-sitpetal-3 { animation-delay: -5.8s; }
.garden-v2-sitpetal-4 { animation-delay: -7.4s; }

.is-sit-breathing [data-garden-svg] {
  transform-origin: 50% 100%;
  animation: gv2-sit-breathe 11s ease-in-out infinite alternate;
}
@keyframes gv2-sit-breathe {
  0% { transform: scale(1); }
  100% { transform: scale(1.015); }
}

/* ---- reduced motion · everything stays, nothing moves ---- */
@media (prefers-reduced-motion: reduce) {
  .garden-v2-ripple,
  .garden-v2-streak,
  .garden-v2-pollen,
  .garden-v2-petalfall { display: none; }
  .gv2-bow,
  .garden-v2-shower-meteor,
  .garden-v2-bwing { animation: none !important; }
  .garden-v2-shower-meteor { opacity: 0; }
  .garden-v2-aurora { animation: none !important; opacity: .6; }
  .garden-v2-elder-ring { animation: none !important; opacity: .55; }
  .garden-v2-elder-mote { animation: none !important; opacity: .6; }
  .garden-v2-butterfly { animation: none !important; }
  .is-sit-breathing [data-garden-svg] { animation: none !important; }
}

/* ---- the resident owl · v7 ---- */
.garden-v2-owl {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: gv2-owl-breathe 7s ease-in-out infinite;
  cursor: pointer;
}
@keyframes gv2-owl-breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.018); }
}
.garden-v2-owl.is-awake .garden-v2-owl-eye {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: gv2-owl-blink 4.6s ease-in-out infinite;
}
@keyframes gv2-owl-blink {
  0%, 92%, 100% { transform: scaleY(1); }
  95% { transform: scaleY(0.08); }
}
@media (prefers-reduced-motion: reduce) {
  .garden-v2-owl, .garden-v2-owl.is-awake .garden-v2-owl-eye { animation: none !important; }
}

/* ---- the homecoming · day two arrives like it matters ---- */
.garden-v2-away-card {
  position: relative;
  overflow: hidden;
  animation: gv2-away-in 0.9s cubic-bezier(.2, .7, .2, 1) both;
}
@keyframes gv2-away-in {
  0% { opacity: 0; transform: translateY(14px) scale(.98); }
  100% { opacity: 1; transform: none; }
}
.garden-v2-away-card small {
  animation: gv2-away-line 0.9s ease-out 0.15s both;
}
.garden-v2-away-card p {
  animation: gv2-away-line 0.9s ease-out both;
}
.garden-v2-away-card button {
  animation: gv2-away-line 0.9s ease-out 0.9s both;
}
@keyframes gv2-away-line {
  0% { opacity: 0; transform: translateY(6px); }
  100% { opacity: 1; transform: none; }
}
.garden-v2-away-glow {
  position: absolute;
  left: 50%;
  top: 38%;
  width: 190px;
  height: 190px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(232, 213, 154, .14), rgba(232, 213, 154, 0) 70%);
  pointer-events: none;
  animation: gv2-away-glow 5s ease-in-out infinite;
}
@keyframes gv2-away-glow {
  0%, 100% { opacity: .6; transform: translate(-50%, -50%) scale(1); }
  50% { opacity: 1; transform: translate(-50%, -50%) scale(1.12); }
}

/* where the waiting dew went: one quiet pulse on the collect button.
   a scaling ring on a pseudo-element, so the pulse rides the compositor
   instead of repainting a shadow every frame. */
.garden-v2-harvest-pulse {
  position: relative;
}
.garden-v2-harvest-pulse::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: inherit;
  border: 1px solid rgba(232, 213, 154, .55);
  opacity: 0;
  pointer-events: none;
  animation: gv2-harvest-pulse 1.4s ease-out 1;
}
@keyframes gv2-harvest-pulse {
  0% { opacity: 0; transform: scale(.96); }
  35% { opacity: 1; transform: scale(1.05); }
  100% { opacity: 0; transform: scale(1.16); }
}

@media (prefers-reduced-motion: reduce) {
  .garden-v2-away-card,
  .garden-v2-away-card small,
  .garden-v2-away-card p,
  .garden-v2-away-card button,
  .garden-v2-away-glow,
  .garden-v2-harvest-pulse::after { animation: none !important; }
}

/* ---- v7 texture pack · flow, sky, chime, path lights ---- */
/* the flow lines drift as transforms, not dash offsets: a dash-offset tick
   is a per-frame paint; a translate is carried by the compositor. */
.garden-v2-flowline-a { animation: gv2-streamflow 3.8s ease-in-out infinite alternate; }
.garden-v2-flowline-b { animation: gv2-streamflow 5.2s ease-in-out infinite alternate -1.4s; }
@keyframes gv2-streamflow {
  0% { transform: translate(0, 0); opacity: .5; }
  100% { transform: translate(-7px, 5px); opacity: .85; }
}

.garden-v2-cloud-0 { animation: gv2-cloud-drift 96s linear infinite; }
.garden-v2-cloud-1 { animation: gv2-cloud-drift 128s linear infinite -40s; }
.garden-v2-cloud-2 { animation: gv2-cloud-drift 84s linear infinite -66s; }

.garden-v2-chime {
  transform-box: fill-box;
  transform-origin: 50% 0%;
  animation: gv2-chime-sway 5.5s ease-in-out infinite alternate;
}
.garden-v2-chime-1 { animation-duration: 6.4s; animation-delay: -1.2s; }
.garden-v2-chime-2 { animation-duration: 4.9s; animation-delay: -2.6s; }
@keyframes gv2-chime-sway {
  0% { transform: rotate(-4deg); }
  100% { transform: rotate(4deg); }
}
.garden-v2-chime-clapper {
  transform-box: fill-box;
  transform-origin: 50% 0%;
  animation: gv2-chime-sway 5.5s ease-in-out infinite alternate;
}

.garden-v2-pathlight { animation: gv2-pathlight 6s ease-in-out infinite; }
.garden-v2-pathlight-1 { animation-delay: -2s; }
.garden-v2-pathlight-2 { animation-delay: -4s; }
@keyframes gv2-pathlight {
  0%, 100% { opacity: .55; }
  50% { opacity: 1; }
}
.garden-v2-phase-day .garden-v2-pathlight,
.garden-v2-phase-morning .garden-v2-pathlight { opacity: .3; animation: none; }

@media (prefers-reduced-motion: reduce) {
  .garden-v2-flowline-a, .garden-v2-flowline-b,
  .garden-v2-cloud-0, .garden-v2-cloud-1, .garden-v2-cloud-2,
  .garden-v2-chime, .garden-v2-chime-clapper,
  .garden-v2-pathlight { animation: none !important; }
}

/* price as a level, not a number. the solid fill is what the jar holds, the
   dashed line is where planting this would leave it. a plant beyond reach
   draws no line, which is the same information without a figure attached. */
.garden-v2-cost {
  display: block;
  margin-top: 3px;
  color: rgba(190, 224, 200, .9);
}

.garden-v2-cost svg {
  /* was 11px: at that width the fill/ghost-line detail inside the jar is
     imperceptible and it just reads as an empty box. */
  width: 15px;
  height: auto;
  display: block;
}

.garden-v2-species.is-waiting .garden-v2-cost {
  color: rgba(226, 200, 170, .75);
}

/* the leaving · small enough to be found rather than presented */
.garden-v2-leaving-hit {
  width: 52px;
  height: 52px;
  margin: -30px 0 0 -26px;
}

.garden-v2-leaving {
  opacity: 0;
  animation: gv-leaving-in 1.5s ease-out .5s forwards;
}

@keyframes gv-leaving-in {
  to { opacity: .92; }
}

@media (prefers-reduced-motion: reduce) {
  .garden-v2-leaving { animation-duration: .2s; animation-delay: 0s; }
}
.garden-v2-today{position:absolute;z-index:12;left:50%;top:174px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;width:min(520px,calc(100% - 36px));overflow:hidden;transform:translateX(-50%);border:1px solid rgba(237,231,214,.15);border-radius:16px;background:rgba(8,17,14,.58);box-shadow:0 16px 34px rgba(5,11,8,.16)}
.garden-v2-today>div,.garden-v2-today>button{min-width:0;padding:9px 11px;text-align:left;border:0;border-right:1px solid rgba(237,231,214,.1);color:#ede7d6;background:transparent;font:inherit}.garden-v2-today>*:last-child{border-right:0}.garden-v2-today span,.garden-v2-today strong{display:block}.garden-v2-today span{margin-bottom:3px;color:rgba(220,204,169,.62);font-size:8px;letter-spacing:.11em;text-transform:uppercase}.garden-v2-today strong{overflow:hidden;font-size:10px;font-weight:500;line-height:1.3;text-overflow:ellipsis;white-space:nowrap}.garden-v2-today>button{cursor:pointer}.garden-v2-today>button:hover,.garden-v2-today>button:focus-visible{background:rgba(237,231,214,.08);outline:none}
.garden-v2-guidance{position:absolute;z-index:12;left:50%;bottom:max(54px,calc(38px + env(safe-area-inset-bottom)));display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;width:min(560px,calc(100% - 28px));transform:translateX(-50%)}
.garden-v2-guidance button{min-width:0;min-height:66px;padding:10px 12px;text-align:left;border:1px solid rgba(237,231,214,.24);border-radius:15px;color:#ede7d6;background:linear-gradient(150deg,rgba(29,44,34,.84),rgba(13,26,20,.76));box-shadow:0 12px 28px rgba(9,14,10,.18);backdrop-filter:blur(8px)}
.garden-v2-status{bottom:138px}
.garden-v2-first-tending{position:absolute;z-index:13;left:50%;top:56%;width:min(430px,calc(100% - 32px));padding:18px;transform:translate(-50%,-50%);border:1px solid rgba(237,231,214,.22);border-radius:22px;color:#ede7d6;background:linear-gradient(155deg,rgba(29,44,34,.9),rgba(11,25,18,.86));box-shadow:0 20px 54px rgba(4,10,7,.24);backdrop-filter:blur(10px);text-align:center}.garden-v2-first-tending>span{color:rgba(220,204,169,.72);font-size:8px;letter-spacing:.14em;text-transform:uppercase}.garden-v2-first-tending h2{margin:5px 0 6px;font-family:var(--font-brand,"Hanken Grotesk",system-ui,sans-serif);font-size:clamp(20px,5vw,27px);font-weight:450;line-height:1.1}.garden-v2-first-tending p{max-width:36ch;margin:0 auto;color:rgba(239,235,221,.68);font-size:11px;line-height:1.45}.garden-v2-first-tending>div{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:14px}.garden-v2-first-tending button{min-height:44px;padding:9px 11px;border:1px solid rgba(237,231,214,.2);border-radius:13px;color:#f2ead7;background:rgba(236,226,198,.09);font:inherit;font-size:10px;cursor:pointer}.garden-v2-first-tending button:first-child{border-color:rgba(232,213,154,.45);background:rgba(104,91,52,.28)}.garden-v2-first-tending button:focus-visible{outline:2px solid #e1f1d8;outline-offset:3px}.garden-sanctuary-v2.is-sitting .garden-v2-first-tending{opacity:0;pointer-events:none;transition:opacity .35s ease}
.garden-v2-guidance span,.garden-v2-guidance strong{display:block}.garden-v2-guidance span{margin-bottom:4px;color:rgba(220,204,169,.72);font-size:8px;letter-spacing:.11em;text-transform:uppercase}.garden-v2-guidance strong{font-size:10px;font-weight:500;line-height:1.32}.garden-v2-kept-line strong{font-weight:450;line-height:1.4}.garden-v2-kept-line small{color:rgba(220,204,169,.72)}
.garden-v2-need-filter{display:flex;gap:6px;margin:0 0 12px;overflow-x:auto;scrollbar-width:none}.garden-v2-need-filter::-webkit-scrollbar{display:none}.garden-v2-need-filter button{flex:0 0 auto;min-height:34px;padding:7px 11px;border:1px solid rgba(232,237,219,.13);border-radius:999px;color:rgba(236,236,219,.58);background:rgba(8,17,14,.28);font:inherit;font-size:9px}.garden-v2-need-filter button.on{border-color:rgba(232,213,154,.48);color:#f1e7d2;background:rgba(82,72,43,.28)}.garden-v2-species[hidden]{display:none}
.garden-sanctuary-v2.is-sitting .garden-v2-today,.garden-sanctuary-v2.is-sitting .garden-v2-guidance{opacity:0;pointer-events:none;transition:opacity .35s ease}
@media(max-width:600px){.garden-v2-today{top:170px;width:calc(100% - 24px)}.garden-v2-today>div,.garden-v2-today>button{padding:8px}.garden-v2-today strong{font-size:9px;white-space:normal}.garden-v2-guidance{bottom:max(48px,calc(36px + env(safe-area-inset-bottom)));gap:6px;width:calc(100% - 20px)}.garden-v2-guidance button{min-height:62px;padding:9px}.garden-v2-guidance strong{font-size:9.5px}}
@media(max-height:700px){.garden-v2-today{top:138px}.garden-v2-guidance{bottom:46px}.garden-v2-guidance button{min-height:56px;padding:8px 9px}.garden-v2-status{bottom:118px}}

/* v9 · the environment is the interface. One immediate action stays visible;
   the complete loop is available on request instead of covering the plants. */
.garden-v2-loop{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;pointer-events:none}
.garden-v2-loop-title{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.garden-v2-loop-actions{display:grid;grid-template-columns:minmax(0,1fr) 76px 76px 52px;gap:6px}
.garden-v2-loop-actions button{appearance:none;min-width:0;min-height:64px;padding:9px;border:1px solid rgba(237,231,214,.12);border-radius:14px;color:inherit;background:rgba(237,231,214,.045);font:inherit;text-align:left;cursor:pointer}
.garden-v2-loop-actions button:hover,.garden-v2-loop-actions button:focus-visible{outline:2px solid rgba(224,238,207,.76);outline-offset:2px;background:rgba(237,231,214,.09)}
.garden-v2-loop-primary{display:grid;grid-template-columns:auto minmax(0,1fr);align-content:center;column-gap:9px;border-color:rgba(203,189,141,.38)!important;background:linear-gradient(140deg,rgba(104,91,52,.27),rgba(54,76,55,.2))!important}
.garden-v2-loop-primary span{grid-row:1/3;align-self:center;padding:5px 7px;border-radius:999px;background:rgba(203,189,141,.13);color:#d9c991;font-size:8px;letter-spacing:.1em;text-transform:uppercase}
.garden-v2-loop-primary strong,.garden-v2-loop-primary small,.garden-v2-loop-short strong,.garden-v2-loop-short small,.garden-v2-loop-more span,.garden-v2-loop-more small{display:block;min-width:0}
.garden-v2-loop-primary strong{overflow:hidden;font-size:11px;font-weight:560;line-height:1.25;text-overflow:ellipsis;white-space:nowrap}.garden-v2-loop-primary small{overflow:hidden;color:rgba(237,231,214,.58);font-size:8.5px;line-height:1.3;text-overflow:ellipsis;white-space:nowrap}
.garden-v2-loop-short,.garden-v2-loop-more{display:flex;flex-direction:column;justify-content:center;gap:3px}.garden-v2-loop-short strong{font-size:10px;font-weight:560}.garden-v2-loop-short small,.garden-v2-loop-more small{color:rgba(237,231,214,.52);font-size:8px;line-height:1.2}.garden-v2-loop-more span{color:#cbbd8d;font-size:9px;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.garden-v2-loop-details{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-top:8px;padding-top:8px;border-top:1px solid rgba(237,231,214,.1)}.garden-v2-loop-details[hidden]{display:none}.garden-v2-loop-details>div{display:grid;gap:3px;min-width:0;padding:9px;border:1px solid rgba(237,231,214,.1);border-radius:13px;background:rgba(237,231,214,.035)}.garden-v2-loop-details span{color:#cbbd8d;font-size:8px;letter-spacing:.1em;text-transform:uppercase}.garden-v2-loop-details strong{font-size:10px;font-weight:540;line-height:1.3}.garden-v2-loop-details small{color:rgba(237,231,214,.57);font-size:8.5px;line-height:1.35}
.garden-sanctuary-v2.is-sitting .garden-v2-loop{opacity:0;pointer-events:none;transition:opacity .35s ease}

/* The opening copy and conditions now annotate the diorama instead of boxing
   it in. These are still readable and reachable, but the garden owns the eye. */
.garden-v2-whisper{top:clamp(126px,15vh,142px);width:min(70%,360px);font-size:clamp(14px,3.6vw,17px);line-height:1.28}
.garden-v2-today{top:174px;width:min(500px,calc(100% - 30px));background:rgba(8,17,14,.48);box-shadow:0 10px 26px rgba(5,11,8,.1)}
.garden-v2-today>div,.garden-v2-today>button{padding:7px 9px}.garden-v2-today strong{font-size:9px}

/* A narrow device keeps only the motion that communicates state: three dew
   drops, the selected plant, and direct feedback. Everything else stays rich
   but still, and the expensive nursery preview shadows are removed. */
@media(max-width:620px){
  .garden-v2-loop-actions{grid-template-columns:minmax(0,1fr) 54px 54px 42px;gap:5px}.garden-v2-loop-actions button{min-height:56px;padding:8px}.garden-v2-loop-primary{display:flex;align-items:center}.garden-v2-loop-primary span,.garden-v2-loop-primary small,.garden-v2-loop-short small,.garden-v2-loop-more small{display:none}.garden-v2-loop-primary strong{overflow:visible;font-size:10px;line-height:1.3;white-space:normal}.garden-v2-loop-details{grid-template-columns:1fr}.garden-v2-loop-details>div{grid-template-columns:64px minmax(0,1fr);column-gap:7px;padding:7px 8px}.garden-v2-loop-details small{grid-column:2}.garden-v2-first-tending{top:47%;padding:15px}.garden-sanctuary-v2.is-empty .garden-v2-loop{display:none}
  .garden-v2-whisper{top:128px;width:72%;font-size:14px}.garden-v2-today{top:170px;width:calc(100% - 20px)}.garden-v2-today>div,.garden-v2-today>button{padding:6px 7px}.garden-v2-today span{font-size:7px}.garden-v2-today strong{font-size:8px}
  .garden-v2-dewdrop:not(.garden-v2-dewdrop-live),.garden-v2-butterfly,.garden-v2-bwing,.garden-v2-cloudshadow,.garden-v2-drift,.garden-v2-flowline,.garden-v2-motes i,.garden-v2-moth{animation:none!important}
  .garden-v2-nursery .garden-v2-species svg{filter:none!important}
}
@media(max-height:700px){.garden-v2-loop{padding:7px}.garden-v2-loop-actions button{min-height:54px}.garden-v2-loop-primary small,.garden-v2-loop-short small,.garden-v2-loop-more small{display:none}.garden-v2-today{top:132px}}

.garden-share-sheet{position:fixed;inset:0;z-index:40;display:flex;align-items:flex-end;justify-content:center;background:rgba(8,12,8,.58);padding:16px}
.garden-share-card{width:min(420px,100%);max-height:min(88vh,760px);overflow:auto;padding:18px 16px 16px;border-radius:22px;background:#12160F;color:#EDE7D6;box-shadow:0 20px 50px rgba(0,0,0,.35)}
.garden-share-card p{margin:0 0 10px;font-size:15px}
.garden-share-art{border-radius:16px;overflow:hidden;background:#0E120C}
.garden-share-art svg{display:block;width:100%;height:auto}
.garden-share-card label{display:block;margin:12px 0 8px;color:rgba(237,231,214,.7);font-size:12px;line-height:1.45}
.garden-share-card textarea{display:block;width:100%;margin-top:6px;min-height:64px;border:1px solid rgba(237,231,214,.16);border-radius:12px;padding:10px;color:#EDE7D6;background:rgba(237,231,214,.05);font:inherit}
.garden-share-acts{display:flex;gap:8px;margin-top:12px}
.garden-share-acts button{flex:1;min-height:44px;border:1px solid rgba(237,231,214,.2);border-radius:999px;color:#EDE7D6;background:rgba(237,231,214,.08);font:inherit;cursor:pointer}
.garden-share-acts [data-garden-share-save]{border-color:rgba(203,189,141,.45);background:rgba(104,91,52,.28)}

/* the hand's own legend, under the world rather than another dashboard */
.garden-v2-hand-cue {
  position: absolute;
  z-index: 9;
  left: 50%;
  bottom: max(36px, calc(env(safe-area-inset-bottom) + 28px));
  width: min(78%, 280px);
  margin: 0;
  transform: translateX(-50%);
  color: rgba(241, 238, 228, .52);
  font-size: 10.5px;
  letter-spacing: .04em;
  line-height: 1.4;
  text-align: center;
  text-shadow: 0 1px 10px rgba(4, 10, 8, .7);
  pointer-events: none;
}
.garden-sanctuary-v2.is-sitting .garden-v2-hand-cue,
.garden-sanctuary-v2.is-placing .garden-v2-hand-cue {
  opacity: 0;
}

/* phones and modest GPUs: keep the picture, park the oscillators.
   the class is already stamped by living-garden; these rules are the
   missing half of that contract. */
.garden-sanctuary-v2.is-low-paint .garden-v2-motes,
.garden-sanctuary-v2.is-low-paint .gv4-crepuscular {
  display: none;
}
.garden-sanctuary-v2.is-low-paint .gv2-sway-1,
.garden-sanctuary-v2.is-low-paint .gv2-sway-2,
.garden-sanctuary-v2.is-low-paint .gv2-sway-3,
.garden-sanctuary-v2.is-low-paint .gv2-sway-4,
.garden-sanctuary-v2.is-low-paint .garden-v2-cloud,
.garden-sanctuary-v2.is-low-paint .garden-v2-cloudshadow,
.garden-sanctuary-v2.is-low-paint .garden-v2-mist,
.garden-sanctuary-v2.is-low-paint .garden-v2-firefly,
.garden-sanctuary-v2.is-low-paint .garden-v2-moth,
.garden-sanctuary-v2.is-low-paint .garden-v2-wren,
.garden-sanctuary-v2.is-low-paint .garden-v2-rabbit,
.garden-sanctuary-v2.is-low-paint .garden-v2-deer > g,
.garden-sanctuary-v2.is-low-paint .garden-v2-flowline-a,
.garden-sanctuary-v2.is-low-paint .garden-v2-flowline-b,
.garden-sanctuary-v2.is-low-paint .garden-v2-drift-a,
.garden-sanctuary-v2.is-low-paint .garden-v2-drift-b,
.garden-sanctuary-v2.is-low-paint .garden-v2-elder-mote,
.garden-sanctuary-v2.is-low-paint .garden-v2-butterfly,
.garden-sanctuary-v2.is-low-paint .garden-v2-bwing,
.garden-sanctuary-v2.is-low-paint .gv-jar-drop,
.garden-sanctuary-v2.is-low-paint .garden-v2-pan span {
  animation: none !important;
}
.garden-sanctuary-v2.is-low-paint .garden-v2-plant-art {
  filter: none;
}
.garden-sanctuary-v2.is-low-paint .garden-v2-today,
.garden-sanctuary-v2.is-low-paint .garden-v2-loop,
.garden-sanctuary-v2.is-low-paint .garden-v2-first-tending {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* wet ground after rain or a recent watering: darker soil, specular puddles.
   the hour wash rides each plant from the sun's side. */
.garden-sanctuary-v2[data-ground="wet"] .garden-v2-texture path:first-child,
.garden-sanctuary-v2[data-ground="wet"] .garden-v2-soiltex > path:first-child {
  opacity: .32;
}
.garden-sanctuary-v2[data-ground="damp"] .garden-v2-texture path:first-child,
.garden-sanctuary-v2[data-ground="damp"] .garden-v2-soiltex > path:first-child {
  opacity: .24;
}
.gv4-puddle {
  mix-blend-mode: multiply;
}
.gv4-specular {
  mix-blend-mode: screen;
}
.gv4-hour-light {
  mix-blend-mode: soft-light;
  pointer-events: none;
  transform-box: fill-box;
}
.garden-sanctuary-v2.is-low-paint .gv4-specular {
  display: none;
}
.garden-sanctuary-v2.is-low-paint .gv4-hour-light {
  mix-blend-mode: normal;
}

/* the sky/ground/turning sheet is now a screen-reader loop; the world
   itself names weather, soil, and today's plant. */
.garden-sanctuary-v2 .garden-v2-today {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  pointer-events: none;
}
.garden-v2-plant-hit.is-turning .garden-v2-world-cue {
  color: rgba(232, 213, 154, .92);
}