.garden-scene-overlay[hidden] { display: none; }
.garden-scene-overlay {
    position: fixed;
    inset: 0;
    z-index: 60;
    overflow: auto;
    overscroll-behavior: contain;
    background: radial-gradient(ellipse at top, #30352d, #151c1f 48%, #101518);
    color: #f6e9c7;
    padding: max(10px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
}
.garden-scene-page { width: min(1500px, 100%); min-height: 100%; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.garden-scene-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.garden-scene-header h1 { margin: 0; color: #ffe2a0; font: 700 clamp(18px, 3vw, 28px)/1.15 'Bungee', cursive; }
.garden-scene-header p { margin: 3px 0 0; color: #cad0c2; font-size: 13px; }
.garden-scene-back, .garden-scene-action, .garden-scene-spot { touch-action: manipulation; }
.garden-scene-back { min-height: 44px; padding: 9px 13px; border: 1px solid #7b735c; border-radius: 9px; color: #fcd994; background: #202923; font-weight: 700; }
.garden-scene-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(275px, 350px); gap: 14px; align-items: start; }
.garden-scene-visual { min-width: 0; overflow: hidden; align-self: start; border: 3px solid #8d6c51; border-radius: 14px; background: #111618; box-shadow: 0 14px 40px #0007; }
.garden-scene-world { position: relative; isolation: isolate; overflow: hidden; background: #302c3e; }
.garden-scene-plot { position: absolute; inset: 0; pointer-events: none; }
.garden-scene-plot > .garden-scene-spot { pointer-events: auto; }
.garden-scene-locked-bed { position: absolute; inset: 0; z-index: 9; background: #10151866; pointer-events: none; }
.garden-scene-world-wrap { position: relative; }
.garden-scene-bg { display: block; width: 100%; height: auto; }
.garden-scene-actor { position: absolute; display: block; height: auto; max-width: none; pointer-events: none; user-select: none; transform: translateX(-50%); image-rendering: pixelated; }
.garden-scene-pot { left: calc(var(--slot-x) + var(--pot-x)); width: var(--pot-size); bottom: calc(30.8% + var(--pot-y)); z-index: 4; }
.garden-scene-plant { left: calc(var(--slot-x) + var(--plant-x)); width: var(--plant-size); bottom: calc(56% + var(--plant-y)); z-index: 5; transform: translate(-50%, 9.375%); }
.garden-scene-lamp { left: calc(var(--slot-x) + var(--lamp-x)); width: var(--lamp-size); top: calc(19% + var(--lamp-y)); z-index: 7; }
.garden-scene-glow { position: absolute; left: var(--slot-x); top: 32%; width: 25%; height: 42%; transform: translateX(-50%); background: radial-gradient(ellipse at 50% 10%, var(--lamp-glow, #ffdb8b88), transparent 70%); mix-blend-mode: screen; pointer-events: none; z-index: 2; }
.garden-scene-stand { position: absolute; left: calc(var(--slot-x) - 1.27%); top: 7%; width: 14%; height: auto; image-rendering: pixelated; pointer-events: none; z-index: 3; }
.garden-scene-wire { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 6; pointer-events: none; }
.garden-scene-spot { position: absolute; top: 72.5%; z-index: 10; transform: translateX(-50%); min-width: 54px; min-height: 32px; padding: 4px 8px; border: 1px solid #cdad6f; border-radius: 7px; background: #13201ddc; color: #ffe2a0; font-weight: 700; }
.garden-scene-spot[aria-pressed="true"] { border: 2px solid #a4ea95; background: #3d7546; color: white; }
.garden-scene-spot:disabled { opacity: .8; cursor: not-allowed; }
.garden-scene-empty-plant { display: none; position: absolute; left: var(--slot-x); bottom: 27%; z-index: 5; transform: translateX(-50%); font-size: clamp(30px, 7vw, 68px); }
.garden-scene-fallback .garden-scene-bg, .garden-scene-fallback .garden-scene-plant, .garden-scene-fallback .garden-scene-lamp, .garden-scene-fallback .garden-scene-stand, .garden-scene-fallback .garden-scene-wire, .garden-scene-fallback .garden-scene-pot { display: none; }
.garden-scene-fallback .garden-scene-empty-plant { display: block; }
.garden-scene-world-wrap.garden-scene-fallback::after { content: "🪴 🌿 💡"; position: absolute; left: 32.2%; top: 37%; z-index: 8; transform: translateX(-50%); font-size: clamp(34px, 8vw, 70px); white-space: nowrap; }
.garden-scene-caption { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; padding: 10px 12px; background: #181f20; color: #c7cdb9; font-size: 12px; }
.garden-scene-panel { min-width: 0; max-height: calc(100dvh - 100px); overflow: auto; overscroll-behavior: contain; padding: 15px; border: 1px solid #596045; border-radius: 14px; background: #1b2425; }
.garden-scene-panel h2 { margin: 0 0 10px; color: #ffe3a0; font: 700 18px 'Bungee', cursive; }
.garden-scene-panel p { margin: 8px 0; color: #c3c8b6; font-size: 14px; line-height: 1.45; }
.garden-scene-actions { display: grid; gap: 9px; margin-top: 12px; }
.garden-scene-actions-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.garden-scene-upgrades { display: grid; gap: 8px; margin-top: 12px; }
.garden-scene-upgrade { min-width: 0; padding: 10px; border: 1px solid #596045; border-radius: 10px; background: #151d1e; }
.garden-scene-upgrade-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; flex-wrap: wrap; color: #ffe3a0; }
.garden-scene-upgrade-heading span, .garden-scene-upgrade small { color: #c3c8b6; font-size: 12px; }
.garden-scene-upgrade p { margin: 5px 0; font-size: 12px; }
.garden-scene-upgrade-max { color: #a4ea95 !important; }
.garden-scene-upgrade-button { width: 100%; min-height: 42px; margin-top: 5px; }
.garden-scene-actions label { color: #dedac2; font-weight: 650; }
.garden-scene-actions select { width: 100%; min-height: 44px; padding: 8px; border: 1px solid #697760; border-radius: 8px; background: #293433; color: #fff; font: inherit; }
.garden-scene-action { min-height: 46px; padding: 10px 12px; border: 1px solid #81ad6e; border-radius: 9px; background: #37563b; color: white; font: 700 13px 'Bungee', cursive; }
.garden-scene-action:disabled { border-color: #414a45; background: #29302d; color: #89918b; }
.garden-scene-progress { height: 11px; overflow: hidden; border-radius: 99px; background: #303a35; }
.garden-scene-progress > span { display: block; height: 100%; background: #22c55e; }
.garden-scene-status { min-height: 18px; color: #ffcf75 !important; }
.garden-scene-layout.garden-scene-no-assets .garden-scene-visual { display: grid; place-items: center; min-height: 160px; }
.garden-scene-layout.garden-scene-no-assets .garden-scene-world { display: none; }
.garden-scene-simple-fallback { display: none; padding: 25px; text-align: center; font-size: 56px; }
.garden-scene-no-assets .garden-scene-simple-fallback { display: block; }
.garden-scene-overlay button:focus-visible, .garden-scene-overlay select:focus-visible { outline: 3px solid #fff5a3; outline-offset: 2px; }
@media (max-width: 760px) {
    .garden-scene-layout { grid-template-columns: minmax(0, 1fr); gap: 10px; }
    .garden-scene-panel { max-height: none; }
    .garden-scene-visual { border-width: 2px; }
    .garden-scene-page { gap: 8px; }
    .garden-scene-header p { display: none; }
}
@media (max-width: 760px) and (orientation: landscape) {
    .garden-scene-layout { grid-template-columns: minmax(0, 1fr) minmax(220px, 34%); align-items: start; }
    .garden-scene-panel { max-height: calc(100dvh - 90px); }
}
@media (max-width: 360px) {
    .garden-scene-spot { min-width: 38px; padding: 3px 4px; font-size: 9px; }
    .garden-scene-actions-row { grid-template-columns: minmax(0, 1fr); }
}