.garden-scene{position:relative;isolation:isolate}
#garden-friends{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .25s}
#garden-friends.friends-ready{opacity:1}
#garden-friends[hidden]{display:none}
.friend-track{position:absolute;width:20%;left:37%;top:59%;transform:translate(-50%,-76%);animation:kaede-stroll 24s ease-in-out infinite;will-change:left,top}
.friend-cat{left:58%;top:48%;width:18%;animation-name:momiji-stroll;animation-duration:29s}
.garden-friend{position:relative;display:block;width:100%;aspect-ratio:1;border:0;background:transparent;padding:0;pointer-events:auto;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;border-radius:45%;color:#244f49}
.garden-friend:focus-visible{outline:3px solid #236e65;outline-offset:4px;background:#fff9e73d}
.friend-body{position:relative;display:block;width:100%;height:100%;transform-origin:50% 86%;animation:friend-step 1.1s ease-in-out infinite}
.friend-cat .friend-body{animation-delay:-.4s;animation-duration:1.35s}
.friend-pose{display:block;width:100%;height:100%;overflow:hidden}
.pose-happy{display:none}
.friend-shadow{position:absolute;bottom:9%;left:18%;width:65%;height:12%;border-radius:50%;background:#456c4326;filter:blur(2px)}
.friend-name{display:block;position:absolute;top:93%;left:50%;transform:translateX(-50%);white-space:nowrap;font-size:clamp(9px,1.1vw,12px);line-height:1.6;font-weight:700;padding:1px 9px;border-radius:99px;background:#fff9edeb;box-shadow:0 2px 6px #425c4212}
.friend-track:has(.garden-friend:is(:hover,:focus-visible,.is-happy)){animation-play-state:paused}
.garden-friend.is-happy .pose-walk{display:none}
.garden-friend.is-happy .pose-happy{display:block}
.garden-friend.is-happy .friend-body{animation:friend-delight .5s ease-in-out 4}
.friend-hearts{position:absolute;inset:0;pointer-events:none;display:none;color:#d34c43;font-style:normal}
.is-happy .friend-hearts{display:block}
.friend-hearts i{position:absolute;left:12%;top:18%;font-style:normal;font-size:clamp(16px,2.4vw,26px);opacity:0;animation:pet-heart 1.7s ease-out forwards}
.friend-hearts i:nth-child(2){left:72%;top:3%;animation-delay:.3s;color:#cb756d}
.friend-hearts i:nth-child(3){left:48%;top:0;animation-delay:.7s;font-size:16px}
#garden-friends[data-paused=true] .friend-track,#garden-friends[data-paused=true] .friend-body{animation-play-state:paused}
.garden-together{margin-top:17px;padding:19px 20px 16px;border:1px solid #dce4d3;border-radius:17px;background:#f0f4e9}
.garden-together-heading{display:flex;justify-content:space-between;gap:14px;align-items:center}
.garden-together h3{font-size:15px;margin:0;color:var(--teal)}
#garden-motion{font:inherit;font-size:10px;color:var(--teal);background:transparent;border:1px solid #c7d5c1;border-radius:99px;padding:8px 12px;min-height:36px;cursor:pointer;white-space:nowrap}
#garden-motion:disabled{opacity:.65;cursor:default}
.garden-pet-actions{display:flex;gap:10px;margin:14px 0 10px}
.garden-pet-actions button{flex:1;min-height:46px;border:1px solid #dfcbbb;border-radius:12px;background:#fff9f0;font:inherit;font-size:12px;font-weight:700;color:#914c37;cursor:pointer;padding:9px 10px}
.garden-pet-actions button:last-child{color:#a34458;border-color:#e3cbd0;background:#fff6f5}
.garden-pet-actions button:hover:not(:disabled){background:#ffefe3;transform:translateY(-1px)}
.garden-pet-actions button:focus-visible,#garden-motion:focus-visible{outline:3px solid var(--teal);outline-offset:3px}
.garden-pet-actions button:disabled{opacity:.5;cursor:default}
#garden-friend-status{font-size:12px;color:var(--teal);min-height:2.8em;line-height:1.7;margin:10px 0 5px}
.garden-pet-note{font-size:10px;line-height:1.7;color:var(--muted);margin:0}
@keyframes kaede-stroll{0%,14%,100%{left:37%;top:60%}40%,54%{left:42%;top:64%}75%,84%{left:31%;top:63%}}
@keyframes momiji-stroll{0%,20%,100%{left:58%;top:46%}43%,58%{left:54%;top:49%}77%,88%{left:62%;top:48%}}
@keyframes friend-step{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-2px) rotate(1deg)}}
@keyframes friend-delight{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-7px) rotate(3deg)}}
@keyframes pet-heart{0%{opacity:0;transform:translateY(4px) scale(.5)}20%{opacity:1}100%{opacity:0;transform:translateY(-33px) scale(1.15)}}
@media(max-width:700px){.garden-scene #garden-view{padding-top:0}.garden-scene{margin-top:25px}.garden-together{padding:15px 12px}.garden-together h3{font-size:13px}.garden-pet-actions{gap:7px}.garden-pet-actions button{font-size:11px;padding:9px 6px}#garden-friend-status{font-size:11px;min-height:3.4em}.garden-pet-note{font-size:9px}.friend-track{width:24%}.friend-cat{width:22%}.friend-name{padding:0 5px;font-size:8px}}
@media(prefers-reduced-motion:reduce){#garden-friends,.garden-pet-actions button{transition:none}.friend-track,.friend-body,.garden-friend.is-happy .friend-body,.friend-hearts i{animation:none!important}.is-happy .friend-hearts i{opacity:1}.garden-pet-actions button:hover:not(:disabled){transform:none}}