/* My gardener uses the same drawn parts everywhere, with no extra learning controls. */
.gardener-figure{position:relative;flex:0 0 auto;width:160px;max-width:100%;text-align:center}
.gardener-drawing{display:block;width:100%;line-height:0}.gardener-drawing>.gardener{display:block;width:100%;height:auto;aspect-ratio:5/7}
.gardener-react{display:block;width:100%;padding:0;background:transparent;border:0;border-radius:24px;min-height:56px;touch-action:manipulation}
.gardener-react:focus-visible{outline:4px solid #2B6E39;outline-offset:6px}
.gardener-bubble{position:absolute;z-index:2;bottom:88%;left:50%;transform:translateX(-50%);width:max-content;max-width:min(270px,85vw);padding:10px 14px;border:2px solid #CFE0DD;border-radius:18px;background:#fff;color:#23312A;font-size:18px;line-height:1.3;box-shadow:0 3px 0 #23312a0a;pointer-events:none}
.gardener-bubble[hidden]{display:none}
.gardener-bed-row{display:flex;gap:16px;align-items:end;justify-content:center;min-width:0}.gardener-bed-row>.today-bed{flex:1;min-width:0}
.gardener-today{width:200px;max-width:32%}.gardener-garden{width:200px}.gardener-growth{width:160px}.gardener-celebration,.gardener-game-finish{width:210px;margin:0 auto}
.gardener-garden-heading{display:flex;align-items:center;justify-content:center;gap:18px}.gardener-garden-heading>div:last-child{min-width:0}.gardener-garden-heading .garden-sign{max-width:100%}.gardener-change{display:flex;align-items:center;gap:9px;margin:12px auto 0;font-size:18px;min-height:56px}.gardener-change>svg{width:24px;height:24px;flex:none}
.done-garden-pair{display:flex;justify-content:center;align-items:end;gap:12px}.done-garden-pair>.gardener-done{margin:0}.done-garden-pair>.done-plant{margin:0}
.gardener-feedback{width:170px;margin:0 auto}.gardener-feedback-look{width:120px;margin:0 auto}.gardener-done,.gardener-rest{width:160px;margin:0 auto}
.gardener-builder{width:min(820px,100%);margin:0 auto;color:#23312A;padding:8px 8px 28px;font-size:18px}
.gardener-builder button{font-size:18px;min-height:56px;touch-action:manipulation}
.gardener-builder-heading h1{font-size:clamp(30px,5vw,44px);letter-spacing:-.6px;line-height:1.15}.gardener-builder-heading p{font-size:22px;text-align:left}
.gardener-builder-heading .instruction-line{justify-content:flex-start}
.gardener-builder-stage{position:relative;isolation:isolate;height:336px;margin:18px 0 12px;border-radius:28px;background:linear-gradient(#f4fafa 0 66%,#B9D88A 66%);overflow:hidden}
.gardener-stage-sun{position:absolute;width:52px;height:52px;border-radius:50%;background:#F5B83D;left:62%;top:24px}
.gardener-stage-sign{position:absolute;left:24px;top:55%;max-width:40%;background:#C98E5A;border-bottom:5px solid #A87244;border-radius:10px;color:#fff;font-size:20px;font-weight:700;line-height:1.25;padding:10px 14px;overflow-wrap:anywhere;text-align:center;transform:rotate(-3deg)}
.gardener-stage-sign:after{content:'';position:absolute;z-index:-1;background:#A87244;height:36px;width:9px;top:100%;left:50%}
.gardener-builder-person{position:absolute;width:214px;max-width:none;left:50%;bottom:10px;transform:translateX(-50%)}
.gardener-builder-person .gardener-bubble{bottom:68%;max-width:240px;left:70%;transform:none}
.gardener-surprise{position:absolute;right:18px;top:18px;display:flex;align-items:center;gap:8px;min-height:56px;background:#fff!important;border:2px solid #CFE0DD!important;border-radius:18px;padding:10px 14px!important;font-size:18px!important}
.gardener-surprise>svg{width:24px;height:24px;flex:none}
.gardener-tabs{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;margin:8px 0 14px;padding:4px;overflow-x:auto;scrollbar-width:thin}
.gardener-tab{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;min-width:56px;min-height:80px!important;padding:8px 3px;border:3px solid transparent;border-radius:20px;background:transparent;font-size:18px;font-weight:700;white-space:nowrap}
.gardener-tab>svg{width:30px;height:30px;flex:none}.gardener-tab[aria-pressed=true]{border-color:#2B6E39;background:#fff}
.gardener-tab-new{position:absolute;width:11px;height:11px;background:#F5B83D;border:2px solid #fff;border-radius:50%;top:6px;right:8px}
.gardener-choices{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;padding:5px;margin:-5px;min-width:0}
.gardener-choice{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-width:0;min-height:112px!important;padding:10px 6px;border:2px solid #CFE0DD;border-radius:22px;background:#fff;line-height:1.2;font-weight:700}
.gardener-choice[aria-pressed=true]{box-shadow:0 0 0 3px #2B6E39;border-color:#2B6E39}.gardener-choice-picture{display:grid;place-items:center;width:90px;height:64px;overflow:hidden;pointer-events:none}.gardener-choice-picture>.gardener{display:block;width:100%;height:100%;overflow:hidden!important}
.gardener-selected{position:absolute;right:6px;top:6px;display:grid;place-items:center;border-radius:50%;background:#2B6E39;color:#fff;width:22px;height:22px}.gardener-selected>svg{width:17px;height:17px}
.gardener-new{position:absolute;left:6px;top:6px;background:#F5B83D;color:#23312A;border-radius:7px;padding:2px 6px;font-size:18px}
.gardener-buddy-preview{display:block;max-width:85px;max-height:64px}.gardener-no-buddy{color:#4f5e55}.gardener-no-buddy>svg{width:42px;height:42px}
.gardener-colours{margin-top:18px}.gardener-colours h2{font-size:19px;line-height:1.3;letter-spacing:0;margin:0 0 10px}.gardener-swatch-row{display:flex;flex-wrap:wrap;gap:8px}
.gardener-swatch{position:relative;display:grid;place-items:center;width:60px;height:60px;min-width:60px;min-height:60px!important;padding:5px!important;border-radius:50%;background:none}
.gardener-swatch>span:first-child{width:50px;height:50px;display:grid;place-items:center;border:3px solid #fff;border-radius:50%;box-shadow:0 0 0 1px #9DB8B4}
.gardener-swatch[aria-pressed=true]>span:first-child{box-shadow:0 0 0 5px #2B6E39}
.gardener-swatch svg{width:22px;height:22px;background:#fff;color:#23312A;border-radius:50%;padding:3px}
.gardener-swatch-new{position:absolute;right:0;top:0;width:12px;height:12px;border:2px solid #fff;border-radius:50%;background:#F5B83D}
.gardener-more{font-size:18px!important;color:#4F5E55;text-align:left!important;margin:16px 0 0!important}
.gardener-builder-actions{display:flex;flex-direction:column;gap:8px;margin-top:20px}.gardener-builder-actions>.primary{min-height:72px;font-size:28px;border-radius:22px;border-bottom:5px solid #1f5229}
.gardener-builder-actions>.text-link{align-self:center;font-size:18px;min-height:56px}
.gardener-welcome-dots{display:flex;align-items:center;justify-content:center;gap:10px;margin:4px 0 18px}.gardener-welcome-dots>span{width:12px;height:12px;border:2px solid #2B6E39;border-radius:50%;background:#fff}.gardener-welcome-dots>.done,.gardener-welcome-dots>.current,.gardener-welcome-dots>.is-current{background:#2B6E39}.gardener-welcome-dots>.current,.gardener-welcome-dots>.is-current{outline:2px solid #2B6E39;outline-offset:3px}
.gardener-reward{display:flex;align-items:center;justify-content:center;gap:18px;padding:18px;border:2px solid #E8CB76;border-radius:22px;background:#FFF8DE;margin:18px auto;max-width:600px;text-align:left}
.gardener-reward-picture{display:block;flex:0 0 100px;width:100px;height:100px;overflow:hidden}.gardener-reward-picture>.gardener{width:100%;height:100%;overflow:hidden!important}.gardener-reward h2{font-size:24px;line-height:1.2;letter-spacing:0}.gardener-reward p{font-size:20px;margin:5px 0 12px}.gardener-reward .btn{min-height:56px;font-size:20px}
@media(hover:hover){.gardener-tab:hover,.gardener-choice:hover{background:#F4FAFA}.gardener-swatch:hover{background:#fff9}}
@media(max-width:600px){
 .gardener-today,.gardener-garden{width:140px}.gardener-today{max-width:34%}.gardener-growth{width:86px;max-width:25%}.gardener-celebration,.gardener-game-finish{width:160px}.gardener-feedback{width:150px}.gardener-feedback-look{width:100px}.gardener-done,.gardener-rest{width:120px}
 .gardener-bed-row{gap:4px}.gardener-garden-heading{gap:8px}.gardener-garden-heading .garden-sign{font-size:18px}.gardener-change{font-size:18px;padding:8px;max-width:190px;line-height:1.25}.gardener-change>svg{width:22px;height:22px}
 .gardener-builder{padding:0 0 20px}.gardener-builder-heading h1{font-size:32px}.gardener-builder-heading p{font-size:20px}
 .gardener-builder-stage{height:276px;border-radius:22px;margin-top:12px}.gardener-builder-person{width:172px;bottom:6px;left:59%}.gardener-stage-sun{width:38px;height:38px;left:76%;top:18px}.gardener-stage-sign{left:12px;top:16px;max-width:46%;font-size:18px;padding:8px 10px}
 .gardener-surprise{left:10px;right:auto;bottom:12px;top:auto;padding:8px 10px!important;gap:6px;font-size:18px!important;min-height:56px}.gardener-surprise>svg{width:22px;height:22px}
 .gardener-builder-person .gardener-bubble{left:0;transform:translateX(-20%);bottom:73%;max-width:215px}
 .gardener-tabs{grid-template-columns:repeat(6,minmax(60px,1fr));gap:3px;margin:6px -4px 12px;padding:4px;scroll-snap-type:x proximity}.gardener-tab{min-height:72px!important;border-radius:16px;font-size:18px;scroll-snap-align:start}.gardener-tab>svg{width:26px;height:26px}
 .gardener-choices{display:flex;overflow-x:auto;scroll-snap-type:x proximity;gap:12px;margin:-5px;padding:5px 5px 12px;scrollbar-width:thin}.gardener-choice{flex:0 0 112px;min-height:112px!important;scroll-snap-align:start;font-size:18px}.gardener-choice-picture{height:64px}
 .gardener-colours{margin-top:12px}.gardener-swatch-row{gap:6px}.gardener-more{margin-top:10px!important}.gardener-builder-actions{margin-top:16px}.gardener-builder-actions>.primary{font-size:26px;min-height:64px}
 .gardener-reward{padding:14px;gap:12px}.gardener-reward-picture{flex-basis:75px;width:75px;height:90px}.gardener-reward h2{font-size:21px}.gardener-reward p{font-size:18px}.gardener-reward .btn{font-size:18px;padding:10px 14px}
}
@media(max-width:360px){.gardener-feedback-look{display:none}.gardener-builder-stage{height:262px}.gardener-builder-person{width:164px;left:62%}.gardener-stage-sign{max-width:44%;padding:6px 8px}.gardener-surprise{max-width:136px;gap:4px;line-height:1.1}.gardener-surprise>svg{width:20px;height:20px}.gardener-builder-heading h1{font-size:30px}.gardener-swatch-row{gap:4px}.gardener-swatch{width:58px;min-width:58px;height:58px;min-height:58px!important}.gardener-reward-picture{flex-basis:62px;width:62px}}
/* Keep the existing sprout and the cheer side by side, leaving the spelling
   and next action in view rather than adding a second tall illustration. */
.gardener-feedback-scene{display:flex;align-items:end;justify-content:center;gap:8px;max-width:100%;margin:0 auto 10px}
.gardener-feedback-scene>.gardener-figure{margin:0;flex:0 1 170px}
.gardener-feedback-scene>.wg-success{margin:0;flex:0 1 160px}
@media(max-width:600px){.gardener-feedback-scene>.gardener-figure{flex-basis:150px}}
@media(max-width:360px){.gardener-feedback,.gardener-feedback-look{display:none}.gardener-feedback-scene{margin-bottom:8px}}
/* On shorter screens, leave the room above Next for spelling and correction.
   Fix it keeps the same layout when its curious pose changes to a cheer. */
@media(max-height:900px){.gardener-feedback-look,.gardener-fix{display:none}}
@media(orientation:landscape){.gardener-garden-heading>.gardener-garden{width:120px}}

/* Keep the way out in one place. Only the choice panel scrolls between tabs. */
body:has(.gardener-builder) #main{margin:0 auto;max-width:860px;min-height:0;height:100dvh;padding:10px 20px max(10px,env(safe-area-inset-bottom))}
.gardener-builder{display:flex;flex-direction:column;gap:8px;height:100%;min-height:0;padding:0;overflow:hidden}
.gardener-builder-heading{flex:none}.gardener-builder-heading h1{margin:0;font-size:clamp(28px,4vw,40px)}
.gardener-builder-heading .instruction-line{margin:8px 0 0}.gardener-builder-heading p{margin:8px 0 0}
.gardener-builder>.gardener-welcome-dots{flex:none;height:14px;margin:0}
.gardener-builder-stage{flex:none;height:clamp(180px,25dvh,300px);margin:0}
.gardener-builder-person{width:min(210px,calc(25dvh / 1.4));bottom:4px;left:70%}
.gardener-stage-sign{left:18px;top:18px;max-width:42%;font-size:20px;transform:none}
.gardener-surprise{left:18px;right:auto;top:auto;bottom:14px}
.gardener-tabs{flex:none;overflow:visible;grid-template-columns:repeat(6,minmax(0,1fr));margin:0;padding:4px;gap:4px}
.gardener-tab{min-width:0;min-height:64px!important;padding:4px 2px;gap:2px}
.gardener-choice-panel{flex:1 1 0;min-height:0;overflow:auto;overscroll-behavior:contain;padding:6px;scrollbar-width:thin;border-radius:14px;scroll-padding:6px}
.gardener-choice-panel:focus-visible{outline:3px solid #815b00;outline-offset:-3px}
.gardener-choices{margin:0;padding:5px;gap:10px}
.gardener-builder-actions{flex:none;display:grid;grid-template-columns:minmax(0,1fr);gap:8px;margin:0;padding:4px 0 0;background:var(--bg,#e3f1f2)}
.gardener-builder.is-welcome .gardener-builder-actions{grid-template-columns:1fr 1fr}
.kid-view .gardener-builder-actions>.btn{min-height:64px;font-size:22px;padding:10px 14px;line-height:1.2}
.gardener-builder-actions>.text-link{align-self:stretch}
.gardener-today{width:224px;max-width:37%}
.gardener-today .gardener-bubble{left:65%;bottom:90%;max-width:230px}
.growth-recap>.gardener-reward{width:100%;max-width:none}
@media(max-width:600px){
 body:has(.gardener-builder) #main{padding:8px 12px max(8px,env(safe-area-inset-bottom))}
 .gardener-builder{gap:6px}
 .gardener-builder-heading{display:grid;grid-template-columns:minmax(0,1fr) 56px;align-items:center;gap:8px}
 .kid-view .gardener-builder-heading h1{font-size:28px;line-height:1.1}
 .gardener-builder-heading .instruction-line{margin:0}.gardener-builder-heading .instruction-line>span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
 .gardener-builder-heading .instruction-sound{width:56px;height:56px}
 .gardener-builder-stage{height:clamp(136px,23dvh,200px);border-radius:20px}
 .gardener-builder-person{width:clamp(92px,calc(23dvh / 1.4),140px);left:79%;bottom:3px}
 .gardener-stage-sign{left:8px;top:8px;max-width:54%;font-size:18px;line-height:1.1;padding:6px 8px;border-bottom-width:4px;max-height:calc(100% - 76px);overflow:auto}
 .gardener-stage-sign:after{display:none}.gardener-stage-sun{left:81%;top:10px;width:26px;height:26px}
 .gardener-surprise{left:8px;right:auto;top:auto;bottom:8px;max-width:none;min-height:56px;padding:8px 10px!important;gap:6px;line-height:1.1}
 .gardener-surprise>svg{width:20px;height:20px}
 .gardener-builder-person .gardener-bubble{left:auto;right:5%;transform:none;bottom:65%;max-width:205px}
 .gardener-tabs{grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;margin:0;padding:4px}
 .gardener-tab{flex-direction:row;min-height:56px!important;gap:4px;font-size:18px;padding:3px 1px;white-space:nowrap}
 .gardener-tab>svg{width:20px;height:20px}
 .gardener-choice-panel{padding:4px}.gardener-choices{padding:5px;margin:0;gap:10px}.gardener-choice{flex-basis:104px;min-height:104px!important}
 .gardener-choice-picture{width:80px;height:56px}.gardener-colours{margin-top:10px}.gardener-more{margin-top:8px!important}
 .kid-view .gardener-builder-actions>.btn{font-size:20px;min-height:64px;padding:8px 10px}
 .gardener-today{width:158px;max-width:42%}.gardener-today .gardener-bubble{left:78%;bottom:92%;max-width:200px;padding:7px 10px;font-size:18px}
}
@media(max-height:600px) and (min-width:601px){
 .gardener-builder-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}.gardener-builder-heading h1{font-size:28px}.gardener-builder-heading .instruction-line{margin:0;font-size:18px}
 .gardener-builder-stage{height:136px}.gardener-builder-person{width:94px;left:68%}.gardener-stage-sign{top:8px;max-width:40%;font-size:18px;padding:6px 10px}.gardener-surprise{left:auto;right:12px;bottom:12px}
 .gardener-tab{min-height:56px!important;flex-direction:row;font-size:18px}.gardener-tab>svg{width:22px;height:22px}.gardener-builder-actions>.btn{min-height:56px!important}
}
/* A landscape phone cannot fit the preview and choices together at child-size
   targets. Let the builder scroll while its finish controls stay reachable. */
@media(max-height:480px) and (orientation:landscape){
 body:has(.gardener-builder) #main{overflow-y:auto;overscroll-behavior:contain;scroll-padding-bottom:90px}
 .gardener-builder{height:auto;min-height:100%;overflow:visible;padding-bottom:88px}
 .gardener-choice-panel{flex:none;min-height:180px;max-height:260px;overflow:auto}
 .gardener-builder-actions{position:fixed;z-index:5;left:50%;bottom:max(8px,env(safe-area-inset-bottom));transform:translateX(-50%);width:min(780px,calc(100vw - 24px));padding:8px;border-radius:18px;background:var(--bg,#e3f1f2);box-shadow:0 -4px 12px #23312a14}
}