#garden-game[open]{position:fixed;inset:0;transform:none;margin:0;width:100vw;height:100dvh;max-width:none;max-height:none;padding:0;border:0;border-radius:0;background:#152b24;color:#fff1cf;overflow:auto}
.garden-layout{height:100%;min-height:340px;display:flex;flex-direction:column;gap:4px;padding:8px;box-sizing:border-box}
#garden-game .garden-header{height:auto;padding:0;border:0;display:flex;gap:12px;align-items:flex-start;flex-shrink:0}
#garden-game button{min-height:44px;font-size:15px;padding:6px 12px;background:#213e32;color:#fff0cc;border:1px solid #b9a372;border-radius:8px}
#garden-game button.primary{background:#d5b779;color:#263426;font-weight:bold}
#garden-game button[aria-pressed=true]{outline:2px solid #ffe3a2;outline-offset:1px}
#garden-game .garden-note{margin:auto;text-align:center;padding:8px 26px;max-width:820px;flex:1}
#garden-game h2{font:700 25px Georgia;margin:1px 0 4px;color:#3b2b1b}
#garden-game #garden-request{font-size:20px;line-height:1.3;margin:0;color:#3b2b1b}
#garden-game #garden-progress{color:#685034;font-weight:bold}
.garden-space{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;container-type:size}
#garden-board{position:relative;width:min(100cqw,177.777cqh);aspect-ratio:16/9;background:url('assets/garden-v1.png') center/100% 100%;overflow:hidden;border-radius:10px;touch-action:manipulation}
#garden-hero{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;background:none}
#garden-game .garden-plot{position:absolute;transform:translate(-50%,-50%);width:7.5%;height:8%;padding:0;border:3px solid #80603c;border-radius:30%;background:repeating-linear-gradient(5deg,#473021 0px,#5b3d26 4px,#62482c 7px);box-shadow:0 4px 2px #2c251a88;min-height:30px;min-width:30px}
#garden-game .garden-plot:hover:not(:disabled){outline:2px solid #ffe6a1}
#garden-game .garden-plot .produce{position:absolute;width:95%;height:160%;bottom:5%;left:2.5%;pointer-events:none}
.garden-hole{color:#c7a272;font-size:22px}
.garden-depot{position:absolute;left:7%;top:40%;width:17%;text-align:center}
.garden-depot>.produce{width:80px;height:80px;display:block;margin:auto}
.garden-depot>div{display:flex;flex-direction:column;gap:5px}
#garden-game .garden-depot button{display:flex;align-items:center;justify-content:center;padding:3px;font-size:14px;min-height:40px;background:#243c2bed}
.garden-depot button .produce{width:35px;height:35px}
#garden-carry{position:absolute;transform:translateX(-50%);padding:3px 7px;border-radius:6px;background:#20372de8;font-size:13px;color:#fff0c9;white-space:nowrap;pointer-events:none}
#garden-game .garden-footer{display:block;padding:0;text-align:center;flex-shrink:0;background:none}
#garden-feedback{font-size:15px;min-height:22px}
.garden-actions{display:flex;justify-content:center;align-items:center;gap:7px;flex-wrap:wrap}
.garden-pad{display:flex;gap:3px;touch-action:none}
#garden-game .garden-pad button{width:44px;padding:0;touch-action:none}
.garden-keys{display:block;font-size:12px;color:#c8d2c2;margin:3px}
#garden-game [hidden]{display:none!important}
#garden-game button:focus-visible{outline:3px solid #fff5a7;outline-offset:2px}
@media(max-height:550px){.garden-layout{padding:3px;gap:2px}#garden-game .garden-note{padding:3px 10px}#garden-game h2{font-size:17px;margin:0}#garden-game #garden-request{font-size:14px}#garden-game #garden-progress{font-size:10px}#garden-game button{font-size:11px;padding:3px 7px;min-height:36px}.garden-actions{gap:4px}#garden-game .garden-pad button{width:32px;min-height:36px}.garden-keys{display:none}#garden-feedback{font-size:12px;min-height:16px}.garden-depot>.produce{width:40px;height:40px}#garden-game .garden-depot button{font-size:10px;min-height:32px}.garden-depot button .produce{width:22px;height:22px}#garden-carry{font-size:10px;padding:1px 4px}.garden-hole{font-size:16px}}

/* Illustrated soil and depth ordering keep the garden part of the world. */
#garden-game .garden-plot { border:0; background:transparent url('assets/garden-soil-v1.png') center/125% auto no-repeat; box-shadow:none; }
#garden-game .garden-plot .produce { width:80%; height:120%; left:10%; }
#garden-hero { z-index:1; }.garden-depot { z-index:3; }#garden-carry { z-index:4; }
#garden-game #garden-feedback { color:#f5e6c4; }
/* On short landscape screens, crop scenery above the garden rather than shrink the controls. */
@media(max-height:550px) { .garden-space { align-items:flex-end; overflow:hidden; }#garden-board { width:min(100cqw,275cqh); flex-shrink:0; } }