#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;overflow:auto;color:#fff0cf}
.garden-layout{height:100%;min-height:270px;display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:12px;padding:12px;box-sizing:border-box}
#garden-game .garden-header{height:auto;padding:0;border:0;display:grid;grid-template-columns:145px minmax(0,820px) 145px;justify-content:center;align-items:start;gap:12px}
#garden-game .garden-note{margin:0;width:100%}
.garden-space{display:grid;grid-template-columns:minmax(130px,210px) minmax(0,760px);align-items:center;justify-content:center;gap:clamp(16px,4vw,60px);min-height:0}
#garden-game .garden-palette{padding:18px 12px;max-height:100%;overflow:auto}
.garden-palette h3{font:500 21px/1.2 Georgia,serif;margin:0 0 14px}
#garden-seeds{display:flex;justify-content:center;flex-wrap:wrap;gap:12px}
#garden-game .garden-seed{display:flex;flex-direction:column;align-items:center;gap:5px;min-width:70px;min-height:44px;padding:8px;border:1px solid #ad8a52;border-radius:9px;background:#ffefce88;color:#3d2c1b;font:600 15px Manrope,sans-serif;touch-action:none;cursor:grab;box-shadow:inset 0 0 0 3px #fff4d077}
#garden-game .garden-seed[aria-pressed=true]{outline:3px solid #3c6b47;outline-offset:2px;background:#fff7dc}
.garden-seed .produce{width:100px;height:100px;pointer-events:none}
#garden-game #garden-help{font-size:12px;line-height:1.5;margin:14px 0 0}
#garden-board{width:100%;height:min(100%,420px);min-height:0;padding:16px;border:5px solid #5c4028;border-radius:18px;background:linear-gradient(#25402bc9,#193823ce);box-shadow:0 0 0 1px #d2ae71,inset 0 0 25px #0b1a0e88,0 15px 30px #0004;display:grid}
#garden-plots{display:grid;grid-template-columns:repeat(var(--cols),minmax(44px,1fr));grid-template-rows:repeat(var(--rows),minmax(44px,1fr));gap:clamp(5px,1.5vh,20px) 8px;min-height:0}
#garden-game .garden-plot{position:relative;width:100%;height:100%;min-width:44px;min-height:44px;padding:0;border:1px solid #b38d4d55;border-radius:14px;background:#533a2677 url('assets/steder/gullakergarden/garden-soil-v1.webp') center/contain no-repeat;box-shadow:inset 0 0 12px #26180b55;touch-action:manipulation}
/* Align the plant's root (72% down its square sprite) with the soil centre. */
#garden-game .garden-plot{container-type:size}
#garden-game .garden-plot .produce{position:absolute;width:clamp(32px,min(92cqw,76cqh),120px);height:clamp(32px,min(92cqw,76cqh),120px);left:50%;top:55%;transform:translate(-50%,-72%);pointer-events:none}
#garden-plots.garden-grouped{grid-template-columns:minmax(0,1fr);gap:8px}
.garden-row-group{display:grid;grid-template-columns:64px minmax(0,1fr);gap:8px;min-height:0;padding:4px;border:1px solid #d7b878;border-radius:12px;background:#ecd6a526}
.garden-row-sign{align-self:center;display:flex;align-items:center;justify-content:center;gap:2px;padding:4px 2px;border:2px solid #99713d;border-radius:7px;background:linear-gradient(#ffefc8,#d3b17a);color:#392818;box-shadow:0 2px 3px #24190c55}
.garden-row-sign strong{font:700 24px/1 Georgia,serif}
.garden-row-sign .produce{width:32px;height:32px}
.garden-row-plots{display:grid;grid-template-columns:repeat(var(--cols),minmax(44px,1fr));gap:8px;min-height:0}
@media(max-height:550px){#garden-plots.garden-grouped{gap:4px}.garden-row-group{grid-template-columns:46px minmax(0,1fr);gap:4px;padding:2px}.garden-row-sign{padding:2px 0}.garden-row-sign strong{font-size:19px}.garden-row-sign .produce{width:23px;height:23px}.garden-row-plots{gap:4px}}
.garden-hole{font:25px Georgia;color:#ffedb7;text-shadow:0 2px 3px #29180d}
#garden-game .garden-plot.drop-ready{outline:4px solid #ffe4a0;outline-offset:-3px;background-color:#a4824788}
#garden-game .garden-drag-ghost{position:fixed;z-index:100;width:82px;height:82px;transform:translate(-50%,-65%);pointer-events:none;filter:drop-shadow(0 8px 5px #0008)}
#garden-game .garden-footer{position:relative;display:block;padding:0;border:0;background:none;text-align:center}
#garden-feedback{margin:0 auto 6px;width:fit-content;max-width:calc(100% - 100px);padding:4px 12px;border-radius:6px;background:#17372ee8;color:#fff1cc;font-size:14px}
#garden-feedback:empty{display:none}
.garden-actions{display:flex;justify-content:center;align-items:center;gap:10px;flex-wrap:wrap}
#garden-game #garden-hint-panel{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);width:min(570px,90vw);padding-right:48px;z-index:10}
#garden-hint-copy{margin:0;max-height:30vh;overflow:auto}
#garden-hint-close{position:absolute;right:2px;top:2px;width:44px;height:44px;padding:0;color:#372819;background:transparent;border:0;font-size:25px}
#garden-game [hidden]{display:none!important}
#garden-game button:focus-visible{outline:3px solid #fff2a9;outline-offset:3px}
@media(max-height:550px){.garden-layout{padding:6px;gap:6px}#garden-game .garden-header{grid-template-columns:104px minmax(0,1fr) 104px;gap:6px}.garden-space{grid-template-columns:150px minmax(0,650px);gap:12px}#garden-game .garden-palette{padding:7px}.garden-palette h3{font-size:15px;margin:0 0 6px}#garden-seeds{gap:8px}.garden-seed .produce{width:49px;height:49px}#garden-game .garden-seed{min-width:54px;padding:3px;font-size:12px}#garden-game #garden-help{font-size:10px;line-height:1.3;margin:6px 0 0}#garden-board{padding:6px;border-width:3px;border-radius:12px}#garden-plots{gap:4px}.garden-hole{font-size:19px}#garden-game #garden-feedback{font-size:11px;margin-bottom:3px;padding:2px 8px}}
@media(max-width:500px){.garden-space{grid-template-columns:1fr;overflow:auto}.garden-palette h3,#garden-game #garden-help{display:none}#garden-game .garden-header{grid-template-columns:80px minmax(0,1fr)}#garden-board{min-height:180px}.garden-layout{min-height:540px}#garden-game .garden-actions{max-width:100%;margin-right:50px}}

#garden-game .garden-footer{margin:0}
@media(max-height:330px){
 .garden-layout{gap:3px;padding:4px}
 #garden-game .garden-palette{padding:4px}
 .garden-palette h3{font-size:14px;line-height:1.2;margin-bottom:4px}
 #garden-game #garden-help{line-height:1.2;margin-top:4px}
}