.garden-location-screen { align-self: center; width: min(1280px, calc(100vw - 32px)); padding-inline: 0; }
.garden-location-content { padding: 14px 0 32px; }
.garden-lab { width: min(1280px, 100%); max-width: none; margin: 0 auto; }
.garden-scene { position: relative; width: 100%; min-height: 0; box-sizing: border-box; aspect-ratio: 3 / 2; overflow: hidden; border: 1px solid #c9a64b; border-radius: 18px; background: #06150e; box-shadow: 0 0 0 1px rgba(255, 231, 147, .24), 0 12px 30px rgba(0, 0, 0, .42), inset 0 0 22px rgba(3, 15, 9, .5); isolation: isolate; }
.garden-scene::after { content: ''; position: absolute; z-index: 30; inset: 5px; border: 1px solid rgba(247, 218, 126, .38); border-radius: 13px; box-shadow: inset 0 0 13px rgba(0, 0, 0, .34); pointer-events: none; }
.garden-background, .garden-heatmap-source { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: fill; pointer-events: none; }
.garden-background { z-index: 0; opacity: 1; filter: none; }
.garden-heatmap-source { z-index: -1; opacity: 0; visibility: hidden; }
.garden-plot-overlay { position: absolute; inset: 0; z-index: 1; display: block; width: 100%; height: 100%; pointer-events: none; }
.garden-reservoirs { position: absolute; z-index: 9; inset: 0; pointer-events: none; }
/* Layered Essence Container artwork; coordinates are editable in Garden Debug. */
.garden-reservoirs .garden-reservoir {
  display: block; width: auto; height: 31%; min-height: 0; aspect-ratio: 434 / 1648;
  right: auto; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none;
}
.garden-reservoir-art { display: block; width: 100%; height: 100%; pointer-events: none; }
.garden-reservoirs .garden-reservoir-fill-button {
  position: absolute; z-index: 2; inset: 0; width: 100%; height: 100%; min-height: 0;
  padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none;
  clip-path: circle(0); color: transparent; cursor: pointer; touch-action: manipulation;
}
.garden-reservoirs .garden-reservoir-fill-button:hover,
.garden-reservoirs .garden-reservoir-fill-button:focus-visible { box-shadow: none; filter: none; }
.garden-reservoirs .garden-reservoir-fill-button:disabled { opacity: 1; cursor: default; }
/* The canvas draws the Essence icon at x=115..325, y=69..279 in a 434x1648 image. */
.garden-reservoir-info-button { position:absolute; z-index:3; left:26.5%; top:4.2%; width:48.4%; height:12.75%; box-sizing:border-box; padding:0; border:1px solid rgba(232,205,121,.36); border-radius:50%; background:radial-gradient(circle, transparent 56%, rgba(232,205,121,.12) 100%); box-shadow:0 0 9px rgba(232,205,121,.12); cursor:pointer; touch-action:manipulation; transition:border-color .18s ease, box-shadow .18s ease, background .18s ease; }
.garden-reservoir-info-button:hover,.garden-reservoir-info-button:focus-visible { border-color:rgba(248,226,148,.85); background:radial-gradient(circle, transparent 48%, rgba(244,216,130,.24) 100%); box-shadow:0 0 14px rgba(239,207,112,.38), inset 0 0 8px rgba(239,207,112,.16); outline:0; }
.garden-reservoir { position: absolute; box-sizing: border-box; pointer-events: auto; cursor: default; }
.garden-reservoir[data-reservoir-color="green"] { left: 2.4%; --reservoir-accent: #62df8c; }
.garden-reservoir[data-reservoir-color="red"] { left: 2.4%; top: 57%; --reservoir-accent: #ec796d; }
.garden-reservoir[data-reservoir-color="blue"] { right: 2.4%; --reservoir-accent: #68c6ff; }
.garden-reservoir[data-reservoir-color="violet"] { right: 2.4%; top: 57%; --reservoir-accent: #cb86ff; }
.garden-reservoir.is-locked { filter: grayscale(.9) brightness(.58); }
.garden-reservoir-popover-action { width:100%; min-height:32px; margin-top:8px; border:1px solid #d8b65b; border-radius:999px; color:#f8e6a6; background:linear-gradient(180deg,#285d3b,#102c1c); cursor:pointer; font:800 .6rem/1 "Segoe UI",sans-serif; letter-spacing:.07em; text-transform:uppercase; }
.garden-reservoir-popover-action:disabled { opacity:.4; cursor:not-allowed; filter:grayscale(.8); }
.garden-world, .garden-grid-plane, .garden-ground-layer, .garden-plants-layer { position: absolute; inset: 0; }
.garden-world { z-index: 2; }
.garden-world, .garden-grid-plane { transform-origin: top left; }
.garden-ground-layer { z-index: 1; }
.garden-plants-layer { z-index: 4; pointer-events: none; }
.garden-plants-layer[hidden] { display: none; }
.garden-lab-tile, .garden-lab-plant { position: absolute; box-sizing: border-box; }
.garden-lab-tile { border: 0; margin: 0; padding: 0; background: transparent; cursor: pointer; }
.garden-tile-visual { position: absolute; inset: 0; display: block; width: 100%; height: 100%; transform-origin: center; }
.garden-plant-visual { position: relative; display: block; width: 100%; height: auto; transform-origin: center bottom; }
.garden-plant-sway { position: relative; display: block; width: 100%; height: auto; transform: none; transform-origin: var(--garden-plant-sway-origin-x, 50%) var(--garden-plant-sway-origin-y, 80%); }
.garden-lab-tile.is-flip-preview .garden-tile-visual, .garden-lab-plant.is-flip-preview .garden-plant-visual { transform: scaleX(-1); }
.garden-lab-plant img { display: block; width: 100%; height: 100%; object-fit: fill; pointer-events: none; transition: filter .16s ease; }
.garden-lock-icon { position: absolute; z-index: 4; left: 50%; top: 50%; display: block; width: 22px; height: auto; object-fit: contain; opacity: .5; transform: translate(-50%, -50%); transform-origin: center; filter: drop-shadow(0 2px 3px #000); pointer-events: none; }
.garden-lab-tile.is-unlocked .garden-lock-icon { display: none; }
.garden-lab-tile:focus-visible { outline: 0; }
.garden-plants-layer.is-hidden { display: none; }
.garden-anchor { position: absolute; width: 9px; height: 9px; border: 2px solid #fff2a8; border-radius: 50%; background: #d39c20; box-shadow: 0 0 6px #000; transform: translate(-50%, -50%); opacity: 0; }
.garden-tile-anchor { left: 0; top: 0; }
.garden-plant-anchor { left: 50%; top: 100%; }
.garden-ground-layer.is-showing-anchors .garden-tile-anchor, .garden-plants-layer.is-showing-anchors .garden-plant-anchor { opacity: 1; }
.garden-ground-layer.is-showing-bounds .garden-lab-tile { outline: 1px dashed rgba(255, 232, 141, .9); }
.garden-tile-coordinates { position: absolute; top: 4px; left: 4px; padding: 2px 4px; color: #fff5c9; font: 700 10px/1 monospace; text-shadow: 0 1px 2px #000; background: rgba(0, 0, 0, .45); opacity: 0; pointer-events: none; }
.garden-ground-layer.is-showing-coordinates .garden-tile-coordinates { opacity: 1; }
.garden-lab-plant { height: auto; }
.garden-lab-plant img { height: auto; object-fit: contain; }

.garden-xp-panel { position: absolute; top: 12px; left: 12px; z-index: 10; display: flex; align-items: center; gap: 11px; min-width: 205px; padding: 8px 12px 8px 8px; border: 1px solid rgba(216, 179, 84, .6); border-radius: 10px; color: #f0ddb0; background: linear-gradient(110deg, rgba(8, 27, 17, .96), rgba(17, 48, 29, .9)); box-shadow: 0 8px 20px rgba(0, 0, 0, .34), inset 0 0 18px rgba(43, 147, 91, .08); }
.garden-xp-ring { display: grid; place-items: center; width: 49px; height: 49px; border-radius: 50%; background: conic-gradient(#d9b24e var(--garden-xp-progress, 0%), rgba(73, 108, 80, .42) 0); box-shadow: 0 0 12px rgba(54, 190, 117, .18); }
.garden-xp-ring::before { content: ''; grid-area: 1 / 1; width: 38px; height: 38px; border: 1px solid rgba(223, 192, 105, .35); border-radius: 50%; background: #0b2115; }
.garden-xp-ring::after { content: ''; grid-area: 1 / 1; width: 45px; height: 45px; border: 1px dashed rgba(118, 225, 159, .48); border-radius: 50%; animation: garden-xp-orbit 14s linear infinite; }
.garden-xp-ring strong { z-index: 1; grid-area: 1 / 1; color: #f4dfa0; font: 700 1.15rem var(--font-heading, serif); }
.garden-xp-copy { display: grid; flex: 1; gap: 3px; text-transform: uppercase; }
.garden-xp-copy > span { color: #d9bb67; font: 700 .67rem var(--font-heading, serif); letter-spacing: .11em; }
.garden-xp-copy > strong { font: 700 .65rem var(--font-body, sans-serif); letter-spacing: .04em; }
.garden-xp-track { height: 4px; overflow: hidden; border-radius: 999px; background: rgba(0, 0, 0, .46); }
.garden-xp-track i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #3fc47e, #d9b24e); }
.garden-identity { position: absolute; z-index: 10; top: 12px; left: 50%; display: grid; min-width: 220px; padding: 8px 20px 9px; border: 1px solid rgba(216, 179, 84, .58); border-radius: 9px; color: #f1dfac; text-align: center; text-transform: uppercase; transform: translateX(-50%); background: linear-gradient(180deg, rgba(13, 42, 26, .96), rgba(7, 24, 15, .94)); box-shadow: 0 8px 22px rgba(0, 0, 0, .34), inset 0 0 18px rgba(62, 185, 108, .09); pointer-events: none; }
.garden-identity span { color: #e6ca79; font: 700 .62rem var(--font-heading, serif); letter-spacing: .18em; }
.garden-identity strong { margin-top: 2px; color: #8be1aa; font: 700 .94rem var(--font-heading, serif); letter-spacing: .11em; text-shadow: 0 0 9px rgba(67, 216, 126, .22); }
.garden-identity small { margin-top: 2px; color: rgba(229, 223, 190, .62); font: 700 .55rem var(--font-body, sans-serif); letter-spacing: .09em; }
.garden-greenhouse { position: absolute; top: 12px; right: 12px; z-index: 10; display: flex; align-items: center; gap: 7px; min-height: 48px; padding: 0 15px; border: 1px solid rgba(216, 179, 84, .52); border-radius: 10px; color: rgba(237, 218, 163, .72); background: linear-gradient(120deg, rgba(11, 30, 19, .96), rgba(20, 43, 28, .92)); cursor: help; font: 700 .72rem var(--font-heading, serif); letter-spacing: .11em; text-transform: uppercase; }
.garden-greenhouse-lock { filter: grayscale(1); }
.garden-greenhouse:hover, .garden-greenhouse:focus-visible { border-color: #dbbb66; color: #f4dda0; }
.garden-greenhouse .tier-popover { left: auto; right: 0; width: 245px; text-align: left; white-space: normal; transform: translateY(4px); }

.garden-plot-context { position: absolute; top: 86px; right: 18px; z-index: 20; width: min(270px, calc(100% - 36px)); box-sizing: border-box; padding: 15px; border: 1px solid rgba(224, 186, 88, .78); border-radius: 10px; color: #e9dfc0; background: linear-gradient(145deg, rgba(8, 25, 16, .98), rgba(16, 43, 27, .97)); box-shadow: 0 14px 32px rgba(0, 0, 0, .58), inset 0 0 22px rgba(41, 137, 81, .08); }
.garden-plot-context[hidden] { display: none; }
.garden-context-close { position: absolute; top: 7px; right: 8px; border: 0; color: rgba(238, 218, 164, .72); background: transparent; cursor: pointer; font-size: 20px; }
.garden-context-kicker { display: block; margin-bottom: 4px; color: #72c995; font-size: .58rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.garden-plot-context > strong { display: block; padding-right: 20px; color: #f2dc9c; font: 700 .9rem var(--font-heading, serif); letter-spacing: .06em; text-transform: uppercase; }
.garden-plot-context p { margin: 8px 0 11px; color: rgba(229, 235, 220, .78); font-size: .72rem; line-height: 1.45; }
.garden-context-cost { display: flex; align-items: center; gap: 7px; color: #9ce5b5; font-size: .72rem; }
.garden-context-cost img, .garden-infuse-button img, .garden-cost-line img { width: 17px; height: 17px; object-fit: contain; }
.garden-infuse-button { display: flex; align-items: center; justify-content: center; gap: 7px; width: 100%; min-height: 34px; margin-top: 12px; border: 1px solid #d7ae4c; border-radius: 6px; color: #132116; background: linear-gradient(#f0d77c, #bc8e2f); cursor: pointer; font-size: .68rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.garden-infuse-button:hover:not(:disabled), .garden-infuse-button:focus-visible:not(:disabled) { filter: brightness(1.1); }
.garden-infuse-button:disabled { border-color: rgba(152, 148, 119, .54); color: rgba(218, 218, 202, .58); background: #465047; cursor: not-allowed; }

.garden-scene-tools { position: absolute; right: 12px; bottom: 10px; z-index: 12; display: flex; align-items: center; gap: 8px; }
.garden-hover-readout { padding: 7px 10px; border: 1px solid rgba(233, 196, 105, .55); border-radius: 6px; color: #f6e4ad; background: rgba(8, 20, 13, .72); font: 700 12px/1.2 monospace; }
.garden-debug-panel-toggle { padding: 7px 10px; border: 1px solid rgba(233, 196, 105, .34); border-radius: 6px; color: rgba(246, 228, 173, .62); background: rgba(8, 20, 13, .62); cursor: pointer; font: 700 11px/1.2 "Segoe UI", sans-serif; }
.garden-debug-panel-toggle:hover, .garden-debug-panel-toggle:focus-visible { border-color: #f1d98e; color: #f6e4ad; background: rgba(38, 58, 32, .92); }
.garden-debug-controls { margin-top: 16px; padding: 16px; border: 1px solid rgba(210, 174, 90, .5); border-radius: 10px; color: #ead9a7; background: rgba(17, 31, 22, .88); font-family: "Segoe UI", sans-serif; }
.garden-debug-controls[hidden] { display: none; }
.garden-debug-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
.garden-debug-heading h2 { margin: 0; font-size: 1rem; letter-spacing: .08em; text-transform: uppercase; }
.garden-debug-heading p { margin: 0; color: rgba(234, 217, 167, .72); font-size: .83rem; }
.garden-debug-actions { display: flex; align-items: center; gap: 10px; }
.garden-debug-actions button { padding: 6px 9px; border: 1px solid rgba(227, 193, 108, .52); border-radius: 5px; color: #f7e7ae; background: linear-gradient(180deg, rgba(48, 84, 49, .92), rgba(13, 38, 22, .95)); cursor: pointer; font: 700 .68rem/1 "Segoe UI", sans-serif; letter-spacing: .05em; text-transform: uppercase; }
.garden-debug-actions button:hover, .garden-debug-actions button:focus-visible { border-color: #f2d77d; box-shadow: 0 0 10px rgba(227, 193, 108, .2); outline: 0; }
.garden-debug-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.garden-debug-group { min-width: 0; margin: 0; padding: 10px; border: 1px solid rgba(227, 193, 108, .25); }
.garden-debug-group legend { padding: 0 5px; color: #f1d98e; font-size: .82rem; font-weight: 700; }
.garden-debug-group-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.garden-debug-field, .garden-debug-toggle { display: grid; gap: 3px; color: rgba(241, 228, 187, .84); font-size: .73rem; }
.garden-debug-field input { width: 100%; box-sizing: border-box; padding: 5px; border: 1px solid rgba(227, 193, 108, .4); border-radius: 4px; color: #fff1be; background: #0e1d14; }
.garden-debug-field input[type="color"] { min-height: 31px; padding: 3px; cursor: pointer; }
.garden-debug-color-value { color: rgba(241, 228, 187, .68); font: 700 .67rem/1 monospace; text-transform: uppercase; }
.garden-debug-toggle { grid-template-columns: 16px 1fr; align-items: center; min-height: 28px; }
.garden-debug-toggle input { accent-color: #d7a92f; }

.garden-feature-sections { display: grid; gap: 16px; margin-top: 20px; }
.garden-feature-sections .workshop-section { width: 100%; margin: 0; }
.garden-feature-inner { --section-content-pad-x: 14px; --section-content-pad-y: 14px; align-items: stretch; width: 100%; box-sizing: border-box; padding: var(--section-content-pad-y) var(--section-content-pad-x); }
.garden-feature-section.is-collapsed .garden-feature-inner { padding: 0; }
.garden-upgrades-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 290px); align-items: stretch; gap: 18px; width: 100%; min-width: 0; box-sizing: border-box; }
.garden-upgrades-panel, .garden-wisdom-panel { min-width: 0; box-sizing: border-box; border: 1px solid rgba(220, 187, 102, .22); border-radius: 8px; background: rgba(7, 23, 14, .52); }
.garden-upgrades-panel { padding: 16px; background: linear-gradient(145deg, rgba(13, 44, 29, .42), rgba(4, 20, 12, .62)); }
.garden-section-copy { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; color: rgba(230, 221, 190, .58); font-size: .62rem; letter-spacing: .08em; text-transform: uppercase; }
.garden-section-copy strong { color: #e8ce82; font-size: .72rem; }
.garden-upgrade-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: stretch; gap: 14px; min-width: 0; }
.garden-upgrade-card-wrap { position: relative; min-width: 0; min-height: 362px; isolation: isolate; }
.garden-upgrade-card { position: relative; display: grid; width: 100%; height: 362px; min-width: 0; min-height: 362px; box-sizing: border-box; overflow: hidden; border: 1px solid rgba(216, 179, 84, .55); border-radius: 12px; color: #e9e1c8; background: radial-gradient(circle at 50% 34%, rgba(36, 117, 75, .2), transparent 42%), linear-gradient(160deg, rgba(8, 35, 22, .7), rgba(3, 17, 10, .8)), url('../assets/ui/medium-frame-bg.webp') center / cover no-repeat; box-shadow: inset 0 0 18px rgba(89, 194, 123, .08), 0 8px 18px rgba(0, 0, 0, .22); isolation: isolate; transition: filter .18s ease, transform .18s ease; }
.garden-upgrade-card-content { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: 36px 144px 17px 48px minmax(0, 1fr); min-width: 0; min-height: 0; box-sizing: border-box; align-items: start; justify-items: center; padding: 21px 16px 15px; text-align: center; }
.garden-upgrade-name, .garden-upgrade-level, .garden-upgrade-action > span { margin: 0; color: #efd68d; background: linear-gradient(to top, #a87126 0%, #e2b955 38%, #fff4c8 76%, #fffbe3 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 2px 1px rgba(0, 0, 0, .9)); font-weight: 800; }
.garden-upgrade-name { width: 100%; max-width: 100%; min-width: 0; min-height: 0; overflow: hidden; font-family: "Gentium Book Plus", serif; font-size: 1rem; letter-spacing: .075em; line-height: 1.1; font-weight: 700; text-transform: uppercase; }
.garden-upgrade-icon { display: block; width: 144px; max-width: 100%; height: 144px; margin: 0; object-fit: contain; filter: drop-shadow(0 5px 8px rgba(0, 0, 0, .72)) drop-shadow(0 0 9px rgba(64, 243, 137, .2)); }
.garden-upgrade-level { font-family: var(--font-heading); font-size: .83rem; letter-spacing: .055em; line-height: 1.15; font-weight: 700; }
.garden-upgrade-description { width: 100%; height: 48px; min-height: 0; margin: 0; overflow: hidden; color: rgba(227, 235, 217, .75); font-family: "Segoe UI", sans-serif; font-size: .68rem; line-height: 1.45; }
.garden-upgrade-footer { display: grid; align-self: end; width: 70%; min-width: 0; gap: 8px; margin: 0; padding-top: 11px; }
.garden-upgrade-action { position: relative; display: grid; min-height: 36px; height: 36px; place-items: center; overflow: hidden; border: 1px solid rgba(215, 174, 76, .85); border-radius: 999px; color: #f5e5aa; background: linear-gradient(180deg, rgba(31, 85, 52, .9), rgba(10, 42, 25, .96)), url('../assets/ui/medium-frame-bg.webp') center / cover no-repeat; box-shadow: inset 0 0 10px rgba(112, 219, 144, .11), 0 2px 5px rgba(0, 0, 0, .35); cursor: pointer; transition: filter .18s ease, transform .18s ease, box-shadow .18s ease; }
.garden-upgrade-action > span { display: inline-flex; align-items: center; justify-content: center; gap: 7px; max-width: 100%; min-width: 0; padding-inline: 8px; color: #f5e5aa; background: none; -webkit-text-fill-color: currentColor; filter: none; font-family: var(--font-heading); font-size: .67rem; font-weight: 700; letter-spacing: .075em; line-height: 1.15; text-align: center; text-shadow: 0 1px 2px #000; }
.garden-upgrade-cost { display: inline-flex; align-items: center; justify-content: center; gap: 3px; max-width: 100%; color: #f5dc8c; font-family: var(--font-heading); font-size: .67rem; letter-spacing: .02em; }
.garden-upgrade-cost-part { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 3px; white-space: nowrap; }
.garden-upgrade-cost-separator { flex: 0 0 auto; color: rgba(245, 220, 140, .62); font-family: "Segoe UI", sans-serif; font-size: .61rem; }
.garden-upgrade-cost img { display: block; width: 16px; height: 16px; object-fit: contain; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .65)); }
.garden-upgrade-card.is-unavailable { filter: saturate(.55); }
.garden-upgrade-card.is-unavailable .garden-upgrade-icon, .garden-upgrade-card.is-unavailable .garden-upgrade-name, .garden-upgrade-card.is-unavailable .garden-upgrade-level, .garden-upgrade-card.is-unavailable .garden-upgrade-description { opacity: .64; }
.garden-upgrade-card.is-unavailable .garden-upgrade-action, .garden-upgrade-card.is-max .garden-upgrade-action { cursor: help; filter: grayscale(.72) brightness(.72); }
.garden-upgrade-card-wrap:hover, .garden-upgrade-card-wrap:focus-within { z-index: 120; }
.garden-upgrade-card.is-affordable:hover, .garden-upgrade-card.is-affordable:focus-within { z-index: 2; filter: brightness(1.1); transform: translateY(-3px); }
.garden-upgrade-card.is-affordable .garden-upgrade-action { border-color: #f3d46f; color: #fff0af; background: linear-gradient(180deg, rgba(118, 91, 29, .96), rgba(48, 50, 20, .98)), url('../assets/ui/medium-frame-bg.webp') center / cover no-repeat; box-shadow: inset 0 0 17px rgba(255, 226, 111, .24), 0 0 14px rgba(241, 202, 77, .32); }
.garden-upgrade-card.is-affordable .garden-upgrade-action:hover, .garden-upgrade-card.is-affordable .garden-upgrade-action:focus-visible { filter: brightness(1.2) drop-shadow(0 0 8px rgba(238, 199, 78, .45)); box-shadow: inset 0 0 22px rgba(255, 229, 126, .35), 0 0 19px rgba(241, 202, 77, .5); transform: translateY(-1px); }
.garden-upgrade-card-wrap > .tier-popover { width: min(270px, calc(100vw - 28px)); white-space: normal; }
.garden-upgrade-card-wrap > .garden-upgrade-tooltip { z-index: 1300; pointer-events: none !important; }
@media (hover: hover) and (pointer: fine) {
  .garden-upgrade-card-wrap:hover > .garden-upgrade-tooltip,
  .garden-upgrade-card-wrap:focus-within > .garden-upgrade-tooltip { pointer-events: auto !important; }
}
.garden-wisdom-panel { position: relative; display: flex; align-self: stretch; min-height: 362px; flex-direction: column; justify-content: center; padding: 17px; border-color: rgba(210, 174, 90, .48); background: radial-gradient(circle at 50% 20%, rgba(69, 143, 89, .2), transparent 55%), rgba(9, 28, 17, .8); }
.garden-wisdom-kicker { color: #6ec18f; font-size: .6rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.garden-wisdom-panel h3 { margin: 6px 0; color: #efd891; font: 700 1rem var(--font-heading, serif); letter-spacing: .07em; text-transform: uppercase; }
.garden-wisdom-panel p { margin: 0 0 12px; color: rgba(225, 231, 218, .7); font-size: .68rem; line-height: 1.45; }
.garden-wisdom-meta { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 11px; color: #d8bd72; font-size: .67rem; font-weight: 800; text-transform: uppercase; }
.garden-wisdom-visible-cost { display: flex; flex-wrap: wrap; gap: 4px 12px; min-height: 25px; margin: -3px 0 9px; }
.garden-wisdom-upgrade { min-height: 34px; border: 1px solid #cda848; border-radius: 6px; color: #f3dfa6; background: linear-gradient(#244d31, #163320); cursor: pointer; font-size: .65rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.garden-wisdom-upgrade:disabled { border-color: rgba(135, 137, 116, .42); color: rgba(225, 225, 204, .48); background: #26352b; cursor: help; }
.garden-wisdom-panel .tier-popover { width: 230px; white-space: normal; }
.garden-cost-line { display: flex; align-items: center; gap: 5px; margin-top: 4px; color: #dabb65; }
@keyframes garden-xp-orbit { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .garden-xp-ring::after, .garden-plant-firefly, .garden-lab-plant.is-plant-sway-enabled .garden-plant-sway { animation: none; } }

@media (hover: hover) and (pointer: fine) {
  .garden-greenhouse:hover .tier-popover, .garden-greenhouse:focus-visible .tier-popover { opacity: 1; transform: translateY(0); }
  .garden-upgrade-card-wrap:hover > .tier-popover, .garden-upgrade-card-wrap:focus-within > .tier-popover, .garden-wisdom-panel:has(.garden-wisdom-upgrade:hover) .tier-popover, .garden-wisdom-panel:has(.garden-wisdom-upgrade:focus-visible) .tier-popover { opacity: 1; transform: translateX(-50%) translateY(0); }
}
@media (max-width: 1120px) { .garden-upgrades-layout { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 880px) { .garden-upgrade-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 780px) { .garden-location-screen { width: 100%; padding-inline: 10px; } .garden-location-content { padding-inline: 0; } .garden-scene { min-height: 0; } .garden-xp-panel { top: 8px; left: 8px; min-width: 174px; transform: scale(.86); transform-origin: top left; } .garden-identity { top: 70px; min-width: 190px; transform: translateX(-50%) scale(.86); transform-origin: top center; } .garden-greenhouse { top: 8px; right: 8px; min-height: 40px; padding-inline: 10px; font-size: .61rem; } .garden-plot-context { top: 72px; right: 10px; } .garden-scene-tools { right: 8px; bottom: 8px; } .garden-hover-readout, .garden-debug-panel-toggle { padding: 6px 8px; font-size: 10px; } .garden-debug-fields { grid-template-columns: 1fr; } .garden-debug-heading { align-items: flex-start; flex-direction: column; gap: 4px; } }
@media (max-width: 780px) { .garden-reservoir { width:54px; min-height:145px; } .garden-reservoir[data-reservoir-color="green"],.garden-reservoir[data-reservoir-color="red"]{ left:1.2%; }.garden-reservoir[data-reservoir-color="blue"],.garden-reservoir[data-reservoir-color="violet"]{ right:1.2%; } }
@media (max-width: 560px) { .garden-upgrade-cards { grid-template-columns: 1fr; } .garden-upgrade-card { min-height: 215px; } .garden-greenhouse > span:last-of-type { display: none; } }

/* --- Plant lifecycle: DOM timers + Canvas-rendered plot effects ----------- */
.garden-ground-layer.is-hiding-locks .garden-lock-icon { display: none !important; }
.garden-ground-layer.is-showing-all-locks .garden-lab-tile .garden-lock-icon { display: block; }
.garden-ground-layer.is-hiding-progress .garden-tile-status { display: none !important; }
.garden-plants-layer.is-showing-all .garden-lab-plant { display: block !important; opacity: .72; }
.garden-lab-plant.is-mature img { filter: none; }
.garden-lab-plant.is-mature.is-plot-hovered img { filter: drop-shadow(0 0 2px rgba(126, 255, 139, .96)) drop-shadow(0 0 6px rgba(62, 222, 112, .64)); }
.garden-lab-plant.is-plant-sway-enabled .garden-plant-sway { animation: garden-plant-sway var(--garden-plant-sway-duration, 5s) cubic-bezier(.42, 0, .28, 1) var(--garden-plant-sway-delay, 0s) infinite both; will-change: transform; }
.garden-plant-firefly { position: absolute; z-index: 2; display: none; width: clamp(2px, 3%, 4px); aspect-ratio: 1; border-radius: 50%; background: #91ef77; box-shadow: 0 0 4px rgba(126, 242, 110, .62); pointer-events: none; }
.garden-lab-plant.is-mature .garden-plant-firefly { display: block; }
.garden-plant-firefly--one { animation: garden-firefly-one 5.6s ease-in-out infinite; }
.garden-plant-firefly--two { animation: garden-firefly-two 6.8s ease-in-out .9s infinite; }
.garden-plant-firefly--three { animation: garden-firefly-three 4.9s ease-in-out 1.7s infinite; }
@keyframes garden-firefly-one { 0%, 100% { left: 61%; top: 58%; opacity: 0; transform: scale(.45); } 20% { opacity: .7; } 45% { left: 27%; top: 36%; opacity: .95; transform: scale(1); } 70% { left: 50%; top: 12%; opacity: .55; transform: scale(.7); } }
@keyframes garden-firefly-two { 0%, 100% { left: 38%; top: 20%; opacity: .1; transform: scale(.5); } 25% { left: 72%; top: 39%; opacity: .82; transform: scale(1); } 55% { left: 57%; top: 71%; opacity: .55; transform: scale(.72); } 78% { left: 24%; top: 55%; opacity: .9; transform: scale(.88); } }
@keyframes garden-firefly-three { 0%, 100% { left: 52%; top: 68%; opacity: 0; transform: scale(.4); } 30% { left: 20%; top: 48%; opacity: .78; transform: scale(.86); } 58% { left: 42%; top: 9%; opacity: .62; transform: scale(.72); } 80% { left: 76%; top: 29%; opacity: .9; transform: scale(1); } }
@keyframes garden-plant-sway {
  0%, 100% { transform: rotate(0deg) skewX(0deg) scaleY(1); }
  21% { transform: rotate(var(--garden-plant-sway-rotate-positive)) skewX(var(--garden-plant-sway-skew-positive)) scaleY(var(--garden-plant-sway-scale-positive)); }
  49% { transform: rotate(var(--garden-plant-sway-rotate-negative)) skewX(var(--garden-plant-sway-skew-negative)) scaleY(var(--garden-plant-sway-scale-negative)); }
  73% { transform: rotate(var(--garden-plant-sway-rotate-positive)) skewX(var(--garden-plant-sway-skew-positive)) scaleY(var(--garden-plant-sway-scale-positive)); }
  88% { transform: rotate(var(--garden-plant-sway-rotate-negative)) skewX(var(--garden-plant-sway-skew-negative)) scaleY(var(--garden-plant-sway-scale-negative)); }
}

.garden-tile-status { position: absolute; left: 50%; top: 9px; z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 48px; padding: 3px 6px 4px; border: 1px solid rgba(9, 20, 14, .62); border-radius: 5px; color: #eaf6ff; background: rgba(5, 15, 11, .8); font: 700 11px/1 monospace; text-shadow: 0 1px 2px #000; transform: translateX(-50%); pointer-events: none; }
.garden-tile-status:empty { display: none; }
.garden-tile-status::before { content: ''; display: block; width: 100%; height: 3px; border-radius: 999px; background: rgba(255, 255, 255, .16); }
.garden-tile-status::after { content: ''; display: block; width: 100%; height: 3px; margin-top: -3px; border-radius: 999px; background: linear-gradient(90deg, #57d6ff, #9bf0ff); transform: scaleX(var(--garden-timer-progress, 0)); transform-origin: left; }
.garden-tile-status[data-mode="growing"]::after { background: linear-gradient(90deg, #7be28a, #e6f28a); }

/* --- Watering Can + feedback ---------------------------------------------- */
.garden-watering-toggle { display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px; border: 1px solid rgba(120, 190, 255, .5); border-radius: 7px; color: #dff2ff; background: rgba(8, 24, 20, .72); cursor: pointer; font: 700 11px/1.2 "Segoe UI", sans-serif; text-transform: uppercase; letter-spacing: .05em; }
.garden-watering-toggle img { width: 20px; height: 20px; object-fit: contain; filter: drop-shadow(0 1px 2px #000); }
.garden-watering-toggle:hover, .garden-watering-toggle:focus-visible { border-color: #9fd7ff; color: #fff; }
.garden-watering-toggle.is-watering-mode { border-color: #5fb7ff; color: #fff; background: rgba(20, 64, 92, .9); box-shadow: 0 0 12px rgba(90, 180, 255, .55); }
.garden-feedback { position: absolute; left: 50%; bottom: 74px; z-index: 30; max-width: 80%; padding: 8px 16px; border: 1px solid rgba(232, 205, 120, .6); border-radius: 8px; color: #ffeeb0; background: rgba(10, 22, 15, .92); font: 700 .74rem var(--font-body, sans-serif); letter-spacing: .03em; text-align: center; opacity: 0; transform: translate(-50%, 8px); transition: opacity .2s ease, transform .2s ease; pointer-events: none; }
.garden-feedback.is-visible { opacity: 1; transform: translate(-50%, 0); }

/* --- Repeated planting: selected Inventory Sapling stack ------------------ */
.inventory-slot.is-garden-seed-held--desktop > img,
.inventory-slot.is-garden-seed-held--desktop > .slot-count { opacity: 0; }
.inventory-slot.is-garden-seed-held--desktop { border-color: rgba(95, 211, 126, .34); background: rgba(4, 18, 10, .46); box-shadow: inset 0 0 12px rgba(44, 159, 82, .08); }
.inventory-slot.is-garden-seed-held--touch { border-color: #78e197; background: radial-gradient(circle, rgba(57, 176, 94, .2), rgba(2, 14, 7, .5)); box-shadow: inset 0 0 12px rgba(102, 229, 139, .2), 0 0 0 2px rgba(119, 225, 151, .22), 0 0 14px rgba(72, 211, 113, .38); }
.inventory-slot.is-garden-seed-held--touch > img { filter: brightness(1.12) drop-shadow(0 0 7px rgba(105, 240, 143, .75)); transform: scale(1.06); }
.garden-held-seed-hand { position: fixed; z-index: 1225; display: grid; width: 58px; height: 58px; place-items: center; padding: 6px; border: 1px solid rgba(124, 226, 153, .82); border-radius: 50%; background: radial-gradient(circle, rgba(24, 83, 43, .96), rgba(5, 23, 13, .96)); box-shadow: 0 8px 20px rgba(0, 0, 0, .52), inset 0 0 13px rgba(94, 226, 132, .2), 0 0 13px rgba(73, 213, 116, .32); pointer-events: none; transform: translate(-18%, -112%); }
.garden-held-seed-hand[hidden] { display: none; }
.garden-held-seed-hand img { display: block; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .72)); }
.garden-held-seed-hand span { position: absolute; right: -4px; bottom: -3px; min-width: 22px; padding: 3px 5px; border: 1px solid rgba(230, 204, 116, .78); border-radius: 999px; color: #fff0ad; background: #0b2114; font: 800 11px/1 "Segoe UI", sans-serif; text-align: center; box-shadow: 0 2px 6px rgba(0, 0, 0, .55); }

/* --- Sapling Station ------------------------------------------------------- */
.garden-sapling-cards { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; width: 100%; min-width: 0; }
.garden-sapling-card { --main: var(--c-green); position: relative; display: flex; min-width: 0; min-height: 316px; flex-direction: column; align-items: center; gap: 5px; box-sizing: border-box; padding: 15px 13px 13px; border: 1px solid color-mix(in srgb, var(--main) 36%, rgba(198, 220, 191, .24)); border-radius: 15px; color: #e9e1c8; text-align: center; background: radial-gradient(circle at 50% 26%, color-mix(in srgb, var(--main) 16%, transparent), transparent 45%), linear-gradient(155deg, rgba(10, 28, 21, .98), rgba(9, 23, 17, .96)), url('../assets/ui/medium-frame-bg.webp') center / cover no-repeat; box-shadow: inset 0 0 0 1px rgba(224, 238, 218, .035), inset 0 0 32px color-mix(in srgb, var(--main) 5%, transparent), 0 10px 25px rgba(0, 0, 0, .25); transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease, filter .18s ease; }
.garden-sapling-card::before { content: ''; position: absolute; inset: 5px; border: 1px solid rgba(217, 194, 122, .1); border-radius: 11px; pointer-events: none; }
.garden-sapling-card--red { --main: var(--c-red); }.garden-sapling-card--blue { --main: var(--c-blue); }.garden-sapling-card--violet { --main: var(--c-violet); }.garden-sapling-card--golden { --main: var(--gold); }
.garden-sapling-card:hover, .garden-sapling-card:focus-within { z-index: 100; border-color: color-mix(in srgb, var(--main) 64%, var(--gold)); box-shadow: inset 0 0 0 1px rgba(224, 238, 218, .07), inset 0 0 38px color-mix(in srgb, var(--main) 12%, transparent), 0 12px 28px rgba(0, 0, 0, .32), 0 0 15px color-mix(in srgb, var(--main) 20%, transparent); transform: translateY(-2px); }
.garden-sapling-card.is-locked { filter: saturate(.4) brightness(.82); }
.garden-sapling-card.is-locked.is-affordable { filter: saturate(.82) brightness(.96); }
.garden-sapling-lock { position: absolute; z-index: 2; top: 10px; left: 12px; font-size: 1.15rem; filter: drop-shadow(0 1px 2px #000); }
.garden-sapling-icon-frame { position: relative; z-index: 1; display: grid; place-items: center; width: 104px; height: 104px; flex: 0 0 104px; padding: 7px; border: 1px solid color-mix(in srgb, var(--main) 54%, var(--gold)); border-radius: 12px; background: radial-gradient(circle at 50% 36%, color-mix(in srgb, var(--main) 16%, transparent), transparent 62%), rgba(2, 11, 7, .72); cursor: help; overflow: hidden; }
.garden-sapling-icon-frame::after { content: ''; position: absolute; z-index: 2; inset: 0; border-radius: inherit; background: conic-gradient(from -90deg, transparent calc(var(--sapling-progress, 0) * 1%), rgba(0, 0, 0, .78) 0); opacity: 0; pointer-events: none; transition: opacity .15s ease; }
.garden-sapling-card.is-crafting .garden-sapling-icon-frame::after { opacity: 1; }
.garden-sapling-card.is-output-ready { border-color: color-mix(in srgb, var(--main) 70%, var(--gold)); box-shadow: inset 0 0 34px color-mix(in srgb, var(--main) 11%, transparent), 0 0 18px color-mix(in srgb, var(--main) 20%, transparent), 0 10px 25px rgba(0, 0, 0, .25); }
.garden-sapling-card.is-output-ready .garden-sapling-icon-frame { cursor: grab; animation: gardenSaplingReadyPulse 1.65s ease-in-out infinite; }
.garden-sapling-card.is-output-ready .garden-sapling-icon-frame:active { cursor: grabbing; }
.garden-sapling-card.is-output-ready .garden-sapling-icon { filter: drop-shadow(0 5px 8px rgba(0, 0, 0, .72)) drop-shadow(0 0 12px color-mix(in srgb, var(--main) 58%, transparent)); }
.garden-sapling-craft-status.is-ready, .garden-sapling-craft-status.is-ready b { color: #f3d978; }
.garden-sapling-action.is-collect { border-color: #d9bd62; color: #fff1b7; background: linear-gradient(180deg, color-mix(in srgb, var(--main) 32%, #735719), #172719); box-shadow: 0 0 13px color-mix(in srgb, var(--main) 22%, rgba(217, 189, 98, .22)), inset 0 1px 0 rgba(255, 240, 178, .18); }
@keyframes gardenSaplingReadyPulse { 50% { transform: scale(1.035); filter: brightness(1.14); box-shadow: 0 0 21px color-mix(in srgb, var(--main) 42%, transparent), inset 0 0 18px color-mix(in srgb, var(--main) 15%, transparent); } }
.garden-sapling-icon { position: relative; z-index: 1; display: block; width: 86px; height: 86px; object-fit: contain; filter: drop-shadow(0 5px 8px rgba(0, 0, 0, .72)) drop-shadow(0 0 9px color-mix(in srgb, var(--main) 28%, transparent)); }
.garden-sapling-name { position: relative; z-index: 1; margin: 2px 0 0; min-height: 2.36em; color: #f0e6c6; font: 700 .95rem/1.18 var(--font-heading); letter-spacing: .045em; text-shadow: 0 2px 4px #000; text-transform: uppercase; }
.garden-sapling-tier { position: relative; z-index: 1; color: color-mix(in srgb, var(--main) 66%, #e5d69a); font: 800 .64rem/1 var(--font-heading); letter-spacing: .13em; text-transform: uppercase; }
.garden-sapling-craft-status { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 5px; min-height: 18px; color: rgba(211, 224, 207, .58); font: 800 .53rem/1.1 'Trebuchet MS', sans-serif; letter-spacing: .09em; }
.garden-sapling-craft-status b { color: color-mix(in srgb, var(--main) 70%, #e5d69a); font-size: .62rem; font-variant-numeric: tabular-nums; }
.garden-sapling-cost { position: relative; z-index: 1; display: flex; min-height: 31px; flex-direction: column; align-items: center; justify-content: center; gap: 1px; margin-top: auto; color: #d8d2ad; font: 700 .57rem/1.2 'Trebuchet MS', sans-serif; }
.garden-sapling-cost .garden-cost-line { margin-top: 0; }
.garden-sapling-action { position: relative; z-index: 1; width: min(100%, 152px); min-height: 34px; padding: 7px 12px; border: 1px solid rgba(217, 194, 122, .48); border-radius: 999px; background: linear-gradient(160deg, rgba(25, 48, 34, .96), rgba(6, 18, 11, .98)); color: #e4eadf; cursor: pointer; font: 700 .62rem/1.15 'Trebuchet MS', sans-serif; letter-spacing: .08em; text-transform: uppercase; transition: border-color .16s ease, background .16s ease, box-shadow .16s ease, transform .08s ease; }
.garden-sapling-action:hover:not(:disabled), .garden-sapling-action:focus-visible:not(:disabled) { border-color: var(--gold); outline: 0; box-shadow: 0 0 12px rgba(217, 194, 122, .14); transform: translateY(-1px); }
.garden-sapling-card.is-affordable .garden-sapling-action { border-color: #f2d16a; color: #ffeaa2; background: linear-gradient(180deg, rgba(116, 88, 27, .96), rgba(43, 48, 18, .98)); box-shadow: inset 0 0 15px rgba(255, 224, 101, .18), 0 0 14px rgba(239, 199, 72, .28); }
.garden-sapling-card.is-affordable .garden-sapling-action:hover, .garden-sapling-card.is-affordable .garden-sapling-action:focus-visible { border-color: #ffe58b; box-shadow: inset 0 0 18px rgba(255, 231, 135, .27), 0 0 18px rgba(247, 208, 82, .44); }
.garden-sapling-action:disabled { opacity: .38; cursor: help; }
.garden-sapling-card > .tier-popover { width: min(270px, calc(100vw - 28px)); white-space: normal; }
.garden-sapling-module-area { position: relative; z-index: 2; display: grid; width: 100%; grid-template-columns: 1fr; gap: 4px; padding-top: 7px; border-top: 1px solid rgba(217, 194, 122, .15); }
.garden-sapling-module-area > span { color: rgba(218, 209, 166, .58); font: 800 .48rem/1 "Segoe UI", sans-serif; letter-spacing: .13em; text-transform: uppercase; }
.garden-sapling-module-slots { margin-top: 0; }
.garden-sapling-module-slot, .garden-tool-module-slot { box-sizing: border-box; }
.garden-sapling-module-tooltip, .garden-tool-module-tooltip { z-index: 1500; width: min(290px, calc(100vw - 28px)); max-width: calc(100vw - 28px); pointer-events: none; }
.garden-sapling-requirement--mastery { color: #f4cf62; font-weight: 800; text-shadow: 0 0 7px rgba(244, 207, 98, .24); }

/* --- Plant Market ---------------------------------------------------------- */
.garden-plant-market { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 360px); gap: 20px; width: 100%; }
.garden-plant-market-board { min-width: 0; padding: 14px; border: 1px solid rgba(220, 187, 102, .22); border-radius: 8px; background: rgba(7, 23, 14, .52); }
.garden-plant-market-board .price-board-heading { color: #e8ce82; font: 700 .74rem var(--font-heading, serif); letter-spacing: .12em; text-transform: uppercase; margin-bottom: 10px; }
.garden-plant-sell-panel { align-self: start; }

@media (max-width: 1120px) { .garden-sapling-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } .garden-plant-market { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .garden-sapling-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .garden-sapling-cards { grid-template-columns: 1fr; } }

/* --- Garden command bar and planting loop refinements -------------------- */
.garden-command-bar { position: absolute; z-index: 16; top: 14px; right: 14px; left: 14px; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: start; gap: 10px; margin: 0; pointer-events: none; }
.garden-command-bar .garden-xp-panel { position: static; display: flex; min-width: 205px; justify-self: start; opacity: .88; transform: none; backdrop-filter: blur(3px); }
.garden-command-bar .garden-identity { position: static; display: grid; min-width: 220px; justify-self: center; opacity: .88; transform: none; pointer-events: none; backdrop-filter: blur(3px); }
.garden-command-bar .garden-greenhouse { position: relative; top: auto; right: auto; display: flex; min-height: 66px; justify-self: end; padding: 0 18px; opacity: .88; pointer-events: auto; backdrop-filter: blur(3px); }
.garden-command-bar .garden-greenhouse:hover, .garden-command-bar .garden-greenhouse:focus-visible { opacity: 1; }
.garden-command-bar .garden-watering-toggle { display: inline-flex; align-items: center; gap: 12px; min-width: 220px; padding: 7px 17px 7px 10px; border: 1px solid rgba(120, 190, 255, .64); border-radius: 10px; color: #dff2ff; background: radial-gradient(circle at 22% 50%, rgba(79, 177, 255, .18), transparent 43%), linear-gradient(120deg, rgba(8, 29, 39, .96), rgba(14, 49, 62, .9)); box-shadow: 0 8px 20px rgba(0, 0, 0, .34), inset 0 0 18px rgba(76, 179, 255, .1); cursor: pointer; text-align: left; }
.garden-command-bar .garden-watering-icon { display: grid; width: 58px; height: 58px; flex: 0 0 58px; place-items: center; overflow: hidden; border: 1px solid rgba(159, 225, 255, .7); border-radius: 50%; background: radial-gradient(circle at 38% 30%, rgba(157, 230, 255, .26), rgba(28, 93, 132, .28) 56%, rgba(4, 22, 41, .86) 100%); box-shadow: 0 0 0 3px rgba(4, 28, 43, .72), inset 0 0 12px rgba(139, 222, 255, .24), 0 2px 6px rgba(0, 0, 0, .44); }
.garden-command-bar .garden-watering-toggle img { width: 52px; height: 52px; object-fit: contain; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .76)) drop-shadow(0 0 8px rgba(107, 207, 255, .25)); }
.garden-command-bar .garden-watering-toggle > span { display: grid; gap: 4px; }
.garden-command-bar .garden-watering-toggle small { color: rgba(190, 228, 248, .62); font: 800 .56rem/1 "Segoe UI", sans-serif; letter-spacing: .14em; text-transform: uppercase; }
.garden-command-bar .garden-watering-toggle strong { color: #e8f7ff; font: 700 .82rem/1.1 var(--font-heading, serif); letter-spacing: .1em; text-transform: uppercase; }
.garden-command-bar .garden-watering-toggle.is-watering-mode { border-color: #a1e3ff; color: #fff; background: radial-gradient(circle at 22% 50%, rgba(118, 215, 255, .35), transparent 43%), linear-gradient(120deg, rgba(18, 76, 111, .96), rgba(18, 54, 83, .94)); box-shadow: 0 0 17px rgba(90, 180, 255, .55), inset 0 0 19px rgba(159, 224, 255, .18); }
.garden-command-bar .garden-watering-toggle.is-watering-mode .garden-watering-icon { border-color: #e1f8ff; box-shadow: 0 0 0 3px rgba(48, 140, 191, .7), 0 0 15px rgba(128, 224, 255, .72), inset 0 0 16px rgba(199, 247, 255, .35); }

/* The timer is intentionally a compact in-tile strip, never a rectangular
   card that can cover the watering effect or escape the plot silhouette. */
.garden-tile-status { left: 50%; top: 57%; z-index: 5; display: block; width: 54%; min-width: 0; max-width: none; padding: 0; border: 0; border-radius: 0; color: #effbff; background: transparent; box-shadow: none; font: 800 10px/1 "Segoe UI", sans-serif; letter-spacing: .04em; text-align: center; text-shadow: 0 1px 2px #00101e; transform: translate(-50%, -50%); }
.garden-tile-status::before, .garden-tile-status::after { content: none; }
.garden-tile-status-label { display: block; margin-bottom: 4px; color: #e6f8ff; font-variant-numeric: tabular-nums; }
.garden-tile-status-track { display: block; height: 6px; overflow: hidden; border: 1px solid rgba(191, 238, 255, .68); border-radius: 999px; background: rgba(0, 8, 19, .68); box-shadow: inset 0 1px 3px rgba(0, 0, 0, .65), 0 0 7px rgba(85, 187, 255, .28); }
.garden-tile-status-track i { display: block; width: 100%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #3d9de2, #8deaff 52%, #d9f7ff); box-shadow: 0 0 8px rgba(108, 224, 255, .8); transform: scaleX(var(--garden-timer-progress, 0)); transform-origin: left; }
.garden-tile-status[data-mode="growing"] .garden-tile-status-track i { background: linear-gradient(90deg, #58b77b, #c9ed92); box-shadow: 0 0 8px rgba(147, 235, 142, .65); }
.garden-tile-status[data-mode="growing"] { left: calc(50% + var(--garden-growth-progress-offset-x)); top: auto; bottom: var(--garden-growth-progress-bottom-offset); display: block; width: var(--garden-growth-progress-width); min-width: 0; max-width: none; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; transform: translateX(-50%); }
.garden-tile-status[data-mode="growing"] .garden-tile-status-track { height: var(--garden-growth-progress-height); border-color: var(--garden-growth-progress-border-color); background: var(--garden-growth-progress-track-color); box-shadow: 0 1px 4px rgba(0, 0, 0, .72); }
.garden-tile-status[data-mode="growing"] .garden-tile-status-track i { background: linear-gradient(90deg, color-mix(in srgb, var(--garden-growth-progress-fill-color), #24775a 45%), var(--garden-growth-progress-fill-color)); box-shadow: 0 0 6px color-mix(in srgb, var(--garden-growth-progress-fill-color), transparent 45%); opacity: var(--garden-growth-progress-fill-opacity); }

/* Plant motion is handled by the shared pivoted Plant Sway above. */

@media (max-width: 780px) {
  .garden-command-bar { gap: 8px; }
  .garden-command-bar .garden-xp-panel, .garden-command-bar .garden-identity { min-width: 174px; transform: none; }
  .garden-command-bar .garden-greenhouse { min-height: 56px; }
  .garden-command-bar .garden-watering-toggle { min-width: 194px; }
}

/* --- Garden Tools -------------------------------------------------------- */
.garden-command-bar .garden-greenhouse { margin-left: 0; }
.garden-tools-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; width: min(100%, 860px); margin: 14px auto 22px; padding: 0 4px; }
.garden-tool-card { position: relative; display: grid; min-width: 0; min-height: 112px; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(70px, auto) auto auto auto; align-content: start; gap: 6px; padding: 7px; border: 1px solid rgba(217, 194, 122, .46); border-radius: 11px; background: radial-gradient(circle at 20% 35%, rgba(68, 161, 126, .14), transparent 43%), linear-gradient(135deg, rgba(9, 28, 20, .96), rgba(5, 17, 11, .98)), url('../assets/ui/medium-frame-bg.webp') center / cover no-repeat; box-shadow: inset 0 0 0 1px rgba(229, 210, 144, .06), 0 7px 17px rgba(0, 0, 0, .28); }
.garden-tool-card--watering { border-color: rgba(132, 210, 255, .52); background: radial-gradient(circle at 20% 35%, rgba(65, 169, 231, .17), transparent 43%), linear-gradient(135deg, rgba(8, 30, 39, .97), rgba(6, 19, 14, .99)), url('../assets/ui/medium-frame-bg.webp') center / cover no-repeat; }
.garden-tool-card--harvester { background: radial-gradient(circle at 20% 35%, rgba(125, 207, 129, .14), transparent 43%), linear-gradient(135deg, rgba(11, 31, 18, .97), rgba(5, 17, 11, .99)), url('../assets/ui/medium-frame-bg.webp') center / cover no-repeat; }
.garden-tool-card--planter { filter: saturate(.6); }
.garden-tool-card--planter.is-unlocked { filter: none; }
.garden-tool-card:has(.garden-tool-popover.is-open) { z-index: 1102; }
.garden-tool-main { display: grid; width: 100%; min-width: 0; grid-template-columns: 62px minmax(0, 1fr); align-items: center; gap: 11px; padding: 4px 31px 4px 4px; border: 0; border-radius: 8px; color: #e7f0e5; background: transparent; cursor: pointer; text-align: left; }
.garden-tool-main:hover, .garden-tool-main:focus-visible { outline: 0; background: rgba(220, 240, 220, .055); box-shadow: inset 0 0 0 1px rgba(224, 207, 142, .16); }
.garden-tool-emblem { display: grid; width: 58px; height: 58px; place-items: center; overflow: hidden; border: 1px solid rgba(217, 194, 122, .72); border-radius: 50%; background: radial-gradient(circle at 38% 30%, rgba(238, 214, 130, .24), rgba(33, 88, 58, .32) 58%, rgba(4, 20, 12, .9) 100%); box-shadow: 0 0 0 3px rgba(5, 29, 18, .76), inset 0 0 12px rgba(225, 208, 137, .19), 0 2px 6px rgba(0, 0, 0, .5); }
.garden-tool-card--watering .garden-tool-emblem { border-color: rgba(159, 225, 255, .76); background: radial-gradient(circle at 38% 30%, rgba(157, 230, 255, .28), rgba(28, 93, 132, .28) 56%, rgba(4, 22, 41, .88) 100%); }
.garden-tool-emblem img { display: block; width: 52px; height: 52px; object-fit: contain; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .76)) drop-shadow(0 0 8px rgba(107, 207, 255, .22)); }
.garden-tool-card--harvester .garden-tool-emblem img { width: 56px; height: 56px; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .72)); }
.garden-tool-emblem--placeholder { color: rgba(236, 213, 142, .7); font: 400 2.35rem/1 var(--font-heading, serif); }
.garden-tool-main > span:last-child { display: grid; min-width: 0; gap: 4px; }
.garden-tool-main small { color: rgba(207, 224, 210, .58); font: 800 .53rem/1 "Segoe UI", sans-serif; letter-spacing: .14em; text-transform: uppercase; }
.garden-tool-main strong { color: #f1e5bc; font: 700 .78rem/1.1 var(--font-heading, serif); letter-spacing: .08em; text-transform: uppercase; text-shadow: 0 1px 3px #000; }
.garden-tool-main em { display: flex; align-items: center; gap: 6px; min-width: 0; color: rgba(211, 229, 216, .68); font: 600 .61rem/1.15 "Segoe UI", sans-serif; font-style: normal; white-space: nowrap; }
.garden-tool-manual-cost > span { display: inline-flex; align-items: center; gap: 3px; color: #bceaff; font-weight: 800; }
.garden-tool-manual-cost img { width: 13px; height: 13px; object-fit: contain; }
.garden-tool-upgrade-arrow { position: absolute; top: 9px; right: 9px; display: grid; width: 27px; height: 27px; place-items: center; padding: 0; border: 1px solid rgba(217, 194, 122, .72); border-radius: 7px; color: var(--gold); background: linear-gradient(145deg, rgba(62, 73, 33, .94), rgba(17, 30, 15, .96)); box-shadow: inset 0 0 0 1px rgba(217, 194, 122, .1), 0 2px 5px rgba(0, 0, 0, .34); cursor: pointer; }
.garden-tool-upgrade-arrow svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; }
.garden-tool-upgrade-arrow:hover, .garden-tool-upgrade-arrow:focus-visible { border-color: #f5d773; outline: 0; box-shadow: 0 0 10px rgba(224, 190, 103, .28); }
.garden-tool-batch { display: flex; min-width: 0; min-height: 37px; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 10px; border: 1px solid rgba(217, 194, 122, .58); border-radius: 7px; color: #f7e8ad; cursor: pointer; font: 900 .68rem/1 var(--font-heading, serif); letter-spacing: .075em; text-shadow: 0 1px 3px rgba(0, 0, 0, .9); text-transform: uppercase; transition: border-color .16s ease, box-shadow .16s ease, filter .16s ease, transform .16s ease; }
.garden-tool-batch span { display: inline-flex; min-width: 0; align-items: center; gap: 4px; color: #edf7e6; font: 800 .58rem/1 "Segoe UI", sans-serif; letter-spacing: 0; text-shadow: 0 1px 2px #000; text-transform: none; white-space: nowrap; }
.garden-tool-batch .garden-tool-batch-total { justify-content: flex-end; gap: 5px; }
.garden-tool-batch-total > small { color: rgba(228, 241, 224, .62); font: 800 .46rem/1 "Segoe UI", sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.garden-tool-batch img { width: 16px; height: 16px; object-fit: contain; filter: drop-shadow(0 0 4px currentColor); }
.garden-tool-batch--water { border-color: rgba(99, 210, 255, .88); background: linear-gradient(110deg, rgba(16, 92, 132, .98), rgba(12, 56, 87, .98) 52%, rgba(8, 34, 59, .99)); box-shadow: inset 0 0 15px rgba(124, 226, 255, .16), 0 0 0 1px rgba(72, 175, 231, .14); }
.garden-tool-batch--water span { color: #d8f6ff; }
.garden-tool-batch--water:hover, .garden-tool-batch--water:focus-visible { border-color: #bcefff; outline: 0; box-shadow: inset 0 0 18px rgba(150, 235, 255, .24), 0 0 15px rgba(64, 187, 255, .58), 0 0 3px #bdefff; filter: brightness(1.12); transform: translateY(-1px); }
.garden-tool-batch--harvest { border-color: rgba(114, 218, 138, .82); background: linear-gradient(110deg, rgba(27, 103, 62, .98), rgba(13, 61, 36, .98) 52%, rgba(7, 36, 22, .99)); box-shadow: inset 0 0 15px rgba(112, 232, 151, .14), 0 0 0 1px rgba(79, 181, 110, .12); }
.garden-tool-batch--harvest span { color: #dff6d2; }
.garden-tool-batch--harvest:hover, .garden-tool-batch--harvest:focus-visible { border-color: #b7f3a7; outline: 0; box-shadow: inset 0 0 18px rgba(136, 241, 162, .21), 0 0 15px rgba(73, 213, 111, .48), 0 0 3px #c2f2a9; filter: brightness(1.12); transform: translateY(-1px); }
.garden-tool-batch--plant { justify-content: center; border-color: rgba(226, 194, 97, .82); background: linear-gradient(110deg, rgba(84, 91, 30, .98), rgba(36, 71, 31, .98) 52%, rgba(14, 43, 24, .99)); box-shadow: inset 0 0 15px rgba(226, 213, 112, .14), 0 0 0 1px rgba(187, 158, 69, .12); }
.garden-tool-batch--plant:hover, .garden-tool-batch--plant:focus-visible { border-color: #f4d772; outline: 0; box-shadow: inset 0 0 18px rgba(228, 213, 117, .2), 0 0 15px rgba(177, 205, 73, .4); filter: brightness(1.12); transform: translateY(-1px); }
.garden-tool-batch.is-unavailable { color: rgba(232, 238, 218, .58); cursor: help; filter: saturate(.42) brightness(.72); box-shadow: inset 0 0 10px rgba(0, 0, 0, .18); }
.garden-tool-batch.is-unavailable:hover, .garden-tool-batch.is-unavailable:focus-visible { filter: saturate(.52) brightness(.8); transform: none; box-shadow: inset 0 0 10px rgba(0, 0, 0, .18); }
.garden-tool-status { align-self: center; color: rgba(221, 202, 133, .64); font: 800 .5rem/1 "Segoe UI", sans-serif; letter-spacing: .1em; text-align: center; text-transform: uppercase; }
.garden-tool-status.is-unlocked { color: #9ee3ba; }
.garden-tool-module-area { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 7px; padding: 6px 4px 1px; border-top: 1px solid rgba(217, 194, 122, .15); }
.garden-tool-module-area > span { color: rgba(218, 209, 166, .58); font: 800 .48rem/1 "Segoe UI", sans-serif; letter-spacing: .13em; text-transform: uppercase; }
.garden-tool-module-slots { display: flex; align-items: center; gap: 6px; }
.garden-tool-popover { top: calc(100% + 10px); bottom: auto; z-index: 1300; width: min(300px, calc(100vw - 28px)); max-width: calc(100vw - 28px); padding: 10px 12px 11px; white-space: normal; opacity: 1; pointer-events: auto !important; transform: translateX(-50%) translateY(0); }
.garden-tool-popover::after { top: auto; bottom: 100%; border-top-color: transparent; border-bottom-color: var(--gold); }
.garden-tool-popover .vh-tooltip__heading { grid-template-columns: minmax(0, 1fr); padding-right: 17px; }
.garden-tool-popover .tier-popover-name { white-space: nowrap; overflow-wrap: normal; word-break: normal; }
.garden-tool-popover-close { position: absolute; top: 5px; right: 7px; width: 19px; height: 19px; padding: 0; border: 0; color: rgba(244, 229, 177, .8); background: transparent; cursor: pointer; font: 700 1rem/1 "Segoe UI", sans-serif; }
.garden-tool-popover-close:hover, .garden-tool-popover-close:focus-visible { color: #fff0b8; outline: 0; }
.garden-tool-popover-action { width: 100%; min-height: 30px; margin-top: 9px; border: 1px solid rgba(217, 194, 122, .68); border-radius: 6px; color: #f5e5aa; background: linear-gradient(120deg, rgba(33, 83, 51, .96), rgba(14, 38, 24, .98)); cursor: pointer; font: 800 .58rem/1.15 var(--font-heading, serif); letter-spacing: .055em; text-transform: uppercase; }
.garden-tool-popover-action:hover, .garden-tool-popover-action:focus-visible { border-color: #f4d772; outline: 0; box-shadow: 0 0 11px rgba(224, 190, 103, .2); }
.garden-tool-popover-action.is-unavailable { border-color: rgba(145, 154, 143, .35); color: rgba(228, 229, 208, .52); background: rgba(21, 37, 27, .8); cursor: help; }
.garden-tool-card--watering.is-active { border-color: #a1e3ff; box-shadow: 0 0 17px rgba(90, 180, 255, .4), inset 0 0 19px rgba(159, 224, 255, .13); }
.garden-tool-card--watering.is-active .garden-tool-emblem { border-color: #e1f8ff; box-shadow: 0 0 0 3px rgba(48, 140, 191, .7), 0 0 15px rgba(128, 224, 255, .72), inset 0 0 16px rgba(199, 247, 255, .35); }

@media (max-width: 780px) { .garden-command-bar .garden-greenhouse { margin-left: 0; } .garden-tools-row { grid-template-columns: 1fr; width: min(100%, 430px); } .garden-tool-card { min-height: 101px; } .garden-tool-popover { left: 50%; } }

/* Touch Garden viewport: a separately framed canvas that can pan horizontally
   and accepts the pinch / +/- zoom managed by Garden.js. The internal Garden
   geometry stays untouched; only this presentation viewport is scaled. */
.garden-scene-viewport { position: relative; width: 100%; }
.garden-scene-stage { position: relative; width: 100%; }
.garden-mobile-view-controls { display: none; }

@media (hover: none) and (pointer: coarse) {
  .garden-scene-viewport {
    --garden-mobile-zoom: .8;
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-behavior: smooth;
    scrollbar-width: thin;
    scrollbar-color: rgba(217, 194, 122, .45) rgba(4, 16, 10, .82);
    touch-action: pan-x pan-y;
    border-top: 10px solid rgba(3, 13, 8, .76);
    border-bottom: 10px solid rgba(3, 13, 8, .8);
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(2, 12, 7, .92), rgba(10, 33, 21, .36) 8%, rgba(10, 33, 21, .36) 92%, rgba(2, 12, 7, .92));
    box-shadow: inset 0 1px 0 rgba(217, 194, 122, .16), inset 0 -1px 0 rgba(217, 194, 122, .13), 0 7px 20px rgba(0, 0, 0, .22);
  }
  .garden-scene-viewport::-webkit-scrollbar { height: 5px; }
  .garden-scene-viewport::-webkit-scrollbar-track { background: rgba(3, 13, 8, .76); }
  .garden-scene-viewport::-webkit-scrollbar-thumb { border-radius: 999px; background: rgba(217, 194, 122, .42); }
  .garden-scene-stage { width: 1229px; height: 819px; }
  .garden-scene-stage > .garden-scene {
    width: 1536px;
    min-width: 1536px;
    min-height: 1024px;
    margin: 0;
    transform: scale(var(--garden-mobile-zoom));
    transform-origin: top left;
  }
  .garden-mobile-view-controls {
    position: sticky;
    right: 10px;
    bottom: 10px;
    z-index: 40;
    display: flex;
    width: max-content;
    align-items: center;
    gap: 2px;
    margin: -39px 10px 8px auto;
    padding: 3px;
    border: 1px solid rgba(217, 194, 122, .58);
    border-radius: 8px;
    background: rgba(5, 20, 13, .88);
    box-shadow: 0 3px 11px rgba(0, 0, 0, .5);
  }
  .garden-mobile-view-controls button { width: 28px; height: 27px; padding: 0; border: 0; border-radius: 5px; color: #f4dfa0; background: rgba(55, 94, 58, .72); cursor: pointer; font: 700 1.05rem/1 "Segoe UI", sans-serif; }
  .garden-mobile-view-controls button:hover, .garden-mobile-view-controls button:focus-visible { color: #fff4c8; background: rgba(89, 129, 76, .9); outline: 1px solid #e2c775; }
  .garden-mobile-view-controls output { min-width: 40px; color: #d9e7d6; font: 800 .56rem/1 "Segoe UI", sans-serif; letter-spacing: .04em; text-align: center; }
}