.coco-home-heading{margin:32px 0}.coco-garden{position:relative;isolation:isolate;min-height:400px;border:3px solid #c1dfce;border-radius:30px;overflow:hidden;background:linear-gradient(#d9f3ff 0 42%,#b9dfad 42% 65%,#e8dca7 65%);padding:210px 20px 24px}.garden-sun{position:absolute;top:20px;left:8%;font-size:65px;color:#dca126}.garden-tree{position:absolute;right:8%;top:40px;font-size:110px}.garden-coco{position:absolute;top:55px;left:calc(50% - 70px);width:140px}.garden-coco .buddy-portrait{width:140px}.garden-spots{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.garden-spot{min-width:0;min-height:130px;border:2px dashed #62875d;border-radius:50%;background:#ffffff70;color:#31563e;cursor:pointer}.garden-spot>span{display:block;font-size:52px}.garden-spot small{display:block;font:700 13px Nunito,sans-serif}.garden-spot.has-decoration{border-style:solid;background:#fff8dbaa}.garden-message{padding:18px;background:#edf5f1;border-radius:16px;font-weight:700}.home-items{display:flex;flex-wrap:wrap;gap:12px;margin:16px 0 24px}.home-items button{gap:10px}.home-items button>span{font-size:30px}.home-items [aria-pressed=true]{outline:3px solid #087f75;outline-offset:3px}.home-gifts{padding:24px;background:#fff2cf;border-radius:22px;margin:24px 0}.garden-butterfly{position:absolute;top:55px;left:23%;font-size:38px}.garden-playing .garden-coco{animation:garden-hop 1s ease-in-out}.garden-playing .has-decoration{animation:garden-wiggle 1s ease-in-out}@keyframes garden-hop{35%{transform:translateY(-18px) rotate(-8deg)}70%{transform:translateY(-8px) rotate(8deg)}}@keyframes garden-wiggle{30%{transform:rotate(-5deg)}65%{transform:rotate(5deg)}}@media(max-width:600px){.garden-spots{grid-template-columns:repeat(2,minmax(0,1fr))}.garden-spot{min-height:115px}.garden-tree{font-size:85px;right:2%}.coco-garden{padding:210px 12px 16px}}@media(prefers-reduced-motion:reduce){.garden-playing .garden-coco,.garden-playing .has-decoration{animation:none}}

/* The collection controls stay below the scene; only arranging reveals targets. */
.coco-garden{height:560px;min-height:0;padding:0;border:0;background:#a8e0e5;box-shadow:0 12px 35px #28665015}.garden-landscape{position:absolute;inset:0;width:100%;height:100%}.garden-sun{top:4%;left:9%;font-size:65px}.garden-tree .ui-art{width:1.2em}.garden-tree{right:11%;top:25%;font-size:125px;transform-origin:50% 90%;animation:palm-breeze 4s ease-in-out 3}.garden-hut{position:absolute;left:15%;top:29%;font-size:100px}.garden-cloud{position:absolute;color:#fffaf0;font-size:85px;line-height:1;opacity:.85;animation:cloud-drift 5s ease-in-out 2 alternate}.cloud-one{left:31%;top:9%}.cloud-two{right:7%;top:15%;font-size:60px}.garden-coco{top:37%;left:calc(50% - 70px);z-index:3}.garden-spots{display:block;position:absolute;inset:0}.garden-spot,.garden-spot.has-decoration{position:absolute;width:21%;height:25%;min-height:0;background:none;border:0;border-radius:18px;padding:0;transform:translate(-50%,-50%);z-index:4;display:grid;place-items:center}.spot-0{left:29%;top:69%}.spot-1{left:68%;top:68%}.spot-2{left:79%;top:46%}.spot-3{left:46%;top:84%}.garden-spot small{position:absolute;bottom:-10px;padding:4px 8px;border-radius:12px;background:#fffbed;color:#31563e;white-space:nowrap;font-size:12px}.is-arranging .garden-spot{outline:2px dashed #fff9dc;background:#ffffff25}.place-marker{color:#285e4a;background:#fff9decc;border-radius:50%;width:44px;height:44px;font-size:30px!important;line-height:44px}.scene-object{font-size:76px!important;filter:drop-shadow(0 7px 2px #325c4830);transform-origin:bottom}.object-palm{font-size:105px!important}.object-lantern{filter:drop-shadow(0 0 12px #ffe090)}.garden-butterfly{top:32%;left:33%;z-index:5;font-size:32px;animation:butterfly-visit 3s ease-in-out 3}.garden-playing .has-decoration{animation:none}.garden-playing .scene-object{animation:flower-dance 1.2s ease-in-out}@keyframes palm-breeze{50%{rotate:4deg}}@keyframes cloud-drift{to{translate:20px 0}}@keyframes butterfly-visit{50%{translate:20px -15px;rotate:15deg}}@keyframes flower-dance{35%{rotate:-10deg;scale:1.12}70%{rotate:10deg}}@media(max-width:600px){.coco-garden{height:470px;padding:0}.garden-tree{font-size:86px;right:7%;top:30%}.garden-hut{font-size:73px;left:9%;top:33%}.garden-coco{width:115px;left:calc(50% - 57px);top:39%}.garden-coco .buddy-portrait{width:115px}.garden-spot{width:25%;height:23%}.scene-object{font-size:55px!important}.object-palm{font-size:75px!important}.garden-cloud{font-size:62px}.garden-sun{font-size:55px}.spot-2{left:81%;top:48%}}@media(prefers-reduced-motion:reduce){.coco-garden *{animation:none!important}}

/* Keep the four decoration spots, Coco, the hut and the scenery palm apart at every width */
.garden-tree{right:7%;top:19%}.spot-0{left:23%;top:68%}.spot-1{left:69%;top:70%}.spot-2{left:74%;top:44%}.spot-3{left:50%;top:84%}
@media(max-width:600px){.garden-tree{right:1%;top:20%;font-size:66px}.spot-0{left:17%;top:63%}.spot-1{left:71%;top:69%}.spot-2{left:72%;top:45%}.spot-3{left:45%;top:82%}}
@media(min-width:601px) and (max-width:900px){.garden-tree{right:3%;top:22%;font-size:105px}.spot-2{left:70%;top:46%}}

@media(min-width:901px){.spot-2{top:47%}}

/* Coco's house (drawn, with upgrades) */
.garden-hut{border:0;background:none;padding:0;width:150px;font-size:0;line-height:0;z-index:2}
button.garden-hut{cursor:pointer;border-radius:16px}
button.garden-hut:focus-visible{outline:3px solid #087f75;outline-offset:4px}
.house-art{display:block;width:100%;height:auto;filter:drop-shadow(0 6px 3px #3d5b4430)}
.house-choice{display:inline-block;width:38px;vertical-align:middle}
.house-choice .house-art{filter:none}
.house-level{color:var(--muted);margin-top:-6px}
.garden-playing .house-art,.house-upgraded .house-art{animation:house-bounce 1s ease-in-out}
.house-smoke circle{animation:smoke-rise 3s ease-in-out infinite}
.house-smoke circle+circle{animation-delay:1.2s}
@keyframes house-bounce{35%{transform:translateY(-8px) scale(1.04)}70%{transform:translateY(0) scale(.98)}}
@keyframes smoke-rise{0%{opacity:.9;transform:translateY(4px)}100%{opacity:0;transform:translateY(-12px)}}
@media(max-width:900px){.garden-hut{width:120px}}
@media(max-width:600px){.garden-hut{width:92px}}
@media(prefers-reduced-motion:reduce){.house-art,.house-smoke circle{animation:none!important}}

/* Bigger house, so each upgrade's detail can be seen on a phone */
@media(max-width:900px){.garden-hut{width:140px}}
@media(max-width:600px){.garden-hut{width:110px}}
.house-choice{width:56px}
.home-items .button .house-choice{margin-right:4px}

/* House upgrade: the new house springs up and a ring points at what is new */
.garden-hut.house-spring .house-art{transform-origin:50% 100%;animation:house-spring .9s cubic-bezier(.2,.9,.3,1.3) both}
@keyframes house-spring{0%{transform:scale(.85)}55%{transform:scale(1.15)}80%{transform:scale(.97)}100%{transform:scale(1)}}
.house-detail-ring{position:absolute;width:34%;aspect-ratio:1;border:3px solid #f2c14e;border-radius:50%;transform:translate(-50%,-50%);pointer-events:none;animation:detail-ring 1s ease-out .5s 2 both}
@keyframes detail-ring{0%{opacity:1;transform:translate(-50%,-50%) scale(.8)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.3)}}
.garden-toast{position:absolute;left:50%;top:7%;z-index:7;transform:translateX(-50%);background:#fff;color:#2f5a44;font-weight:800;font-size:16px;padding:10px 18px;border-radius:16px;box-shadow:0 6px 16px #2d5a4430;white-space:nowrap;animation:toast-life 3.4s ease both}
@keyframes toast-life{0%{opacity:0;transform:translate(-50%,8px) scale(.8)}10%{opacity:1;transform:translate(-50%,0) scale(1)}85%{opacity:1}100%{opacity:0}}

/* Playing: only the tapped thing dances */
.garden-playing .garden-spot:not(.is-playing),.garden-playing .garden-spot:not(.is-playing) *,.garden-playing .garden-hut:not(.is-playing) .house-art{animation:none!important}
.garden-hut.is-playing .house-art{transform-origin:50% 100%;animation:house-bounce 1s ease-in-out}
.garden-hut.is-playing .house-smoke circle{animation-duration:1s}

/* Arrange mode: clear, gently glowing places to tap */
.is-arranging .garden-spot{outline:3px dashed #087f75;background:#ffffffaa;animation:spot-pulse 1.2s ease-in-out infinite}
.is-arranging .garden-spot small{font-size:14px}

@keyframes spot-pulse{50%{transform:translate(-50%,-50%) scale(1.04)}}
@media(max-width:600px){.spot-1{left:73%;top:73%}.spot-2{left:71%;top:43%}}

/* A decoration lands with a little bump */
.garden-spot.just-placed>*:not(.new-badge){animation:decoration-thud .8s cubic-bezier(.2,.9,.3,1.3) both}
@keyframes decoration-thud{0%{opacity:0;transform:translateY(-30px) scale(.4)}60%{opacity:1;transform:translateY(0) scale(1.15);filter:drop-shadow(0 22px 6px #32583e40)}100%{transform:none}}

/* "New!" marker (also the only cue when motion is reduced) */
@media(prefers-reduced-motion:reduce){.garden-spot.is-new,.garden-hut.is-new{outline:4px solid #f2c14e;outline-offset:2px;border-radius:16px}}
.garden-spot .new-badge,.garden-hut .new-badge{top:-10px;right:-6px}
.garden-hut{position:absolute}

@media(prefers-reduced-motion:reduce){.is-arranging .garden-spot,.garden-toast,.house-detail-ring,.garden-hut .house-art{animation:none!important}.garden-toast{opacity:1}}
/* Painted decorations (artwork/home-and-controls): one design in the garden, the picker and the placement preview. */
.scene-object .decoration-art{width:1.5em}.object-palm .decoration-art{width:1.35em}
.home-items button>span .decoration-art{width:46px;margin:-8px 0}
.place-marker .decoration-art{width:56px;margin:-6px}.place-plus{display:block}

/* Glim visits from the Secret Cove after chapter 3, under the welcome lights the child chose */
.garden-hut .garden-lights{position:absolute;left:13%;top:30%;width:74%;z-index:3;pointer-events:none}
.garden-lights img{display:block;width:100%;height:auto}
.garden-glim{position:absolute;left:62%;top:44%;width:76px;z-index:6;border:0;background:none;padding:0;cursor:pointer;border-radius:50%;filter:drop-shadow(0 0 10px #ffe68099)}
.garden-glim .cove-glim{position:relative;display:block;aspect-ratio:1}
.garden-glim .glim-pose{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity .25s}
.garden-glim .cove-glim[data-pose=idle] .idle,.garden-glim .cove-glim[data-pose=greeting] .greeting,.garden-glim .cove-glim[data-pose=delighted] .delighted{opacity:1}
.garden-glim:focus-visible{outline:3px solid #ec9a28;outline-offset:2px}
@media(max-width:600px){.garden-glim{left:2%;top:50%;width:58px}}
@media(prefers-reduced-motion:no-preference){
 .garden-glim{animation:glim-bob 3.2s ease-in-out infinite alternate}
 .garden-glim.is-playing{animation:glim-hello .9s ease-in-out}
 @keyframes glim-bob{from{transform:translateY(0)}to{transform:translateY(-5px)}}
 @keyframes glim-hello{0%,100%{transform:none;filter:drop-shadow(0 0 10px #ffe68099)}40%{transform:translateY(-14px) rotate(-6deg);filter:drop-shadow(0 0 22px #ffe680)}70%{transform:translateY(0) rotate(4deg)}}
}
@media(prefers-reduced-motion:reduce){.garden-glim .glim-pose{transition:none}}
@media(min-width:901px){.garden-glim{width:92px}}
/* Glim’s little mystery: a glowing “?” bubble on Glim and a card under the garden (dist/light-view.js glimOffer). */
.garden-glim .glim-bubble{position:absolute;right:-14%;top:-18%;display:grid;place-items:center;width:42%;aspect-ratio:1;border-radius:50%;background:#fff6c9;border:3px solid #e0a21c;color:#8a5a00;font-weight:900;font-size:clamp(16px,2.2vw,24px);line-height:1;box-shadow:0 0 14px #ffd95acc}
@media(prefers-reduced-motion:no-preference){.garden-glim .glim-bubble{animation:glim-bubble 1.6s ease-in-out infinite alternate}}
@keyframes glim-bubble{from{transform:translateY(0) scale(1)}to{transform:translateY(-4px) scale(1.08)}}
.glim-offer{display:flex;flex-wrap:wrap;align-items:center;gap:18px;margin:16px 0 22px;padding:18px 22px;border-radius:22px;background:#fff8e6;border:2px solid #ecd9a8}
.glim-offer.is-mystery{background:linear-gradient(135deg,#fff6d6,#fdf0c4);border-color:#e0b64a;box-shadow:0 8px 24px #e0a21c33}
.glim-offer h2{margin:2px 0 4px}.glim-offer p{margin:0 0 12px;font-size:17px}
.glim-offer-art{position:relative;width:120px;flex:none}.glim-offer-art .light-glim{width:100px;height:auto;display:block}
.glim-offer-art .light-pebble{position:absolute;right:0;bottom:4px;width:40px}.glim-offer-art .light-pebble ellipse{fill:#ffe27a;stroke:#d9a520;stroke-width:4;filter:drop-shadow(0 0 6px #ffd95a)}.glim-offer-art .light-pebble .pebble-shine{fill:#fff8d8;stroke:none}
@media(max-width:600px){.glim-offer{padding:16px}.glim-offer-art{width:90px}.glim-offer-art .light-glim{width:76px}}