/* The habitat is static artwork; the independent creature is the performer. */
.habitat{isolation:isolate}
.habitat .habitat-photo{z-index:0;pointer-events:none}
.pet-actor{position:absolute;left:10%;bottom:4%;width:80%;height:89%;z-index:2;pointer-events:none}
.pet-arrival,.pet-idle,.pet-sprite{width:100%;height:100%;display:block;transform-origin:50% 84%}
.habitat .pet-sprite>.creature-portrait{width:100%;height:100%;aspect-ratio:auto;mix-blend-mode:normal;overflow:hidden}
.habitat-tag{z-index:5}
.habitat-message{z-index:6;max-width:calc(100% - 22px);text-align:center;white-space:normal;line-height:1.4;font-size:12px;min-height:31px;display:flex;align-items:center;justify-content:center;will-change:transform}
.motion-toggle{position:absolute;right:10px;top:10px;width:29px;height:29px;background:#ffffffbf;border:1px solid #ffffff8c;border-radius:9px;display:grid;place-items:center;color:#62846a;z-index:7;box-shadow:0 2px 8px #2f604d07}
.motion-toggle .icon{width:13px;height:13px}
.motion-toggle:hover{background:#fff;color:#345f44}
.scene-effects{position:absolute;inset:0;z-index:4;pointer-events:none;overflow:hidden;contain:layout paint}
.scene-token{position:absolute;display:block;line-height:1;pointer-events:none;user-select:none;white-space:nowrap;filter:drop-shadow(0 3px 2px #39574412)}
.scene-token>.item-art,.scene-token>.icon{display:block;width:1em;height:1em;object-fit:contain}
.token-heart>.icon,.scene-moon>.icon{fill:currentColor}
.habitat{--mouth-y:51%}
.habitat[data-species="bloom"]{--mouth-y:54%}
.habitat[data-species="cloud"]{--mouth-y:48%}
.habitat[data-species="sprout"]{--mouth-y:48%}
.habitat[data-species="luna"]{--mouth-y:50%}
.habitat[data-species="sunny"]{--mouth-y:50%}
.scene-snack{left:48%;top:calc(var(--mouth-y) - 20px);font-size:43px;transform-origin:center}
.scene-ball{left:48%;top:75%;font-size:34px}
.token-peach{color:#e7a767;font-family:'Outfit',sans-serif;font-weight:600}
.token-gold{color:#e5b95c;font-family:'Outfit',sans-serif}
.token-blue{color:#68aaba;font-family:'Outfit',sans-serif}
.token-heart{color:#dc91a2;font-family:'DM Sans',sans-serif;filter:drop-shadow(0 2px 6px #fff8)}
.token-sleep{font-family:'Outfit',sans-serif;font-weight:600;color:#8593bd;text-shadow:0 2px 6px #fff}
.scene-moon{top:17%;right:17%;font:40px 'Outfit',sans-serif;color:#e7e3ff;text-shadow:0 0 12px #8b90c286;opacity:0}
.scene-dusk,.scene-wash-tint{position:absolute;inset:0;opacity:0;pointer-events:none}
.scene-dusk{background:linear-gradient(180deg,#555d9140,#7e89b025)}
.scene-wash-tint{background:linear-gradient(0deg,#c6edf33b,#e4f5ff08)}
.scene-reward{position:absolute;top:19%;left:50%;transform:translate(-50%,0);display:flex;align-items:center;justify-content:center;gap:6px;padding:8px 12px;border:1px solid #e4efd9;border-radius:11px;background:#fffffff2;color:#6b8856;box-shadow:0 5px 15px #294d2f0d;font-size:12px;white-space:nowrap;opacity:0}
.scene-reward .icon{width:15px;height:15px}.scene-reward b{font-weight:600}.scene-reward>span{color:#bdc7ad}
.care-action.is-performing:disabled{opacity:1;box-shadow:0 0 0 2px #fff,0 0 0 3px #e5bf9b;filter:saturate(1.2)}
.care-action.is-performing>.icon{animation:working-icon .65s ease-in-out infinite alternate}
.care-action.is-performing .action-wait{display:none}
.care-action[aria-busy="true"]{cursor:progress}
.care-footer-actions{display:flex;align-items:center;gap:14px;flex-shrink:0}
.care-footer .replay-moment{display:inline-flex!important;font-size:11px;white-space:nowrap;color:#6f9277;gap:4px}
.care-footer .replay-moment .icon{width:13px;height:13px}
.care-footer .replay-moment:disabled{opacity:.5}
.need-label b,.xp-row,.coins{font-variant-numeric:tabular-nums}
.need-label b{display:inline-block;transform-origin:right center}
.progress-fill{transition:width .85s cubic-bezier(.22,.68,.34,1)}
.coins{transform-origin:center}
.task-check{transition:background .25s,border-color .25s,transform .3s}
.task.done .task-check .icon{stroke-dasharray:24;stroke-dashoffset:0;animation:check-draw .45s ease-out both}

/* Small gestures for direct interaction; sponsor placements stay still. */
.button,.care-action,.filter-chip,.favorite-button,.icon-button,.motion-toggle,.nav-link,.mini-pet-link,.text-link{transition:background .2s,color .2s,box-shadow .2s,border-color .2s,transform .24s cubic-bezier(.22,1.25,.36,1)}
.button:not(:disabled):active,.care-action:not(:disabled):active{transform:translateY(2px) scale(.96)}
.filter-chip:not(:disabled):active,.favorite-button:not(:disabled):active,.icon-button:not(:disabled):active{transform:scale(.9)}
.button:not(:disabled):hover{box-shadow:0 5px 12px #cc77471c}
/* Icon and label move together; hover never changes their relative spacing. */
.button>.icon,.text-link>.icon{display:block;flex-shrink:0}
.mini-pet-link>.creature-portrait{transition:transform .28s cubic-bezier(.22,1.4,.36,1)}
.mini-pet-link:hover>.creature-portrait{transform:rotate(-6deg) scale(1.1)}
.creature-card{transition:transform .3s cubic-bezier(.22,1.2,.36,1),box-shadow .25s,border-color .25s}
.creature-card:hover{transform:translateY(-5px);border-color:#d9e6dc}
.creature-card:hover .card-art .creature-portrait{transform:translateY(-3px) scale(1.035) rotate(-2deg)}
.card-art .creature-portrait{transition:transform .45s cubic-bezier(.22,1.35,.36,1)}
.species-option{transition:border-color .2s,background .2s,transform .25s}
.species-option:hover{transform:translateY(-3px)}
.species-option:has(input:checked) .creature-portrait{animation:pick-a-friend .18s ease-out}
.greeting-sun{transform-origin:center;animation:hello-sun 1.15s ease-out 1}
.page-heading:hover .greeting-sun{transform:rotate(25deg);transition:transform .5s}
.star-button{transition:color .17s,transform .2s}.star-button:hover{transform:translateY(-3px) rotate(-7deg)}
.favorite-button.is-favorite:hover>.icon{transform:scale(1.14)}
.favorite-button>.icon{transition:transform .23s cubic-bezier(.22,1.3,.36,1)}
.form-field input,.form-field textarea,.select-control,.searchbox{transition:box-shadow .2s,border-color .2s,background .2s}
.form-field:focus-within input,.form-field:focus-within textarea,.searchbox:focus-within{border-color:#a6c6af;background:#fff;box-shadow:0 0 0 4px #9fc5a514}
.ad-slot .button,.ad-slot .button:hover,.ad-slot .button:active,.ad-slot .button:hover>.icon{transform:none;box-shadow:none;animation:none}

html[data-motion="on"] .pet-idle{animation:little-breath 4.6s ease-in-out infinite}
html[data-motion="on"] .habitat[data-reaction] .pet-idle{animation:none}
@keyframes little-breath{0%,100%{transform:translateY(0) rotate(-.45deg) scale(1)}45%{transform:translateY(-3px) rotate(.5deg) scale(1.012,1.018)}75%{transform:translateY(-1px) rotate(0) scale(1.006)}}
@keyframes working-icon{from{transform:translateY(0) rotate(-5deg)}to{transform:translateY(-3px) rotate(5deg)}}
@keyframes pick-a-friend{0%{transform:scale(.93) rotate(-3deg)}65%{transform:scale(1.04) rotate(2deg)}100%{transform:scale(1) rotate(0)}}
@keyframes hello-sun{0%{transform:rotate(-35deg) scale(.8);opacity:0}60%{transform:rotate(12deg) scale(1.1);opacity:1}100%{transform:rotate(0) scale(1);opacity:1}}
@keyframes check-draw{from{stroke-dashoffset:24}to{stroke-dashoffset:0}}
@media(max-width:1080px){.pet-actor{height:94%;bottom:1%}.care-footer-actions{gap:8px}.care-footer .replay-moment{font-size:10px}}
@media(max-width:650px){.pet-actor{left:4%;width:92%;height:86%;bottom:8%}.habitat-message{font-size:10px;max-width:calc(100% - 14px);padding:6px 8px;bottom:11px}.scene-snack{font-size:33px}.scene-ball{font-size:27px}.scene-reward{font-size:10px;gap:4px;padding:6px 8px;top:24%}.scene-reward .icon{width:12px;height:12px}.motion-toggle{right:7px;top:8px;width:25px;height:25px}.care-footer{align-items:center}.care-footer>span{max-width:60%;font-size:10px}.care-footer .replay-moment{font-size:10px}.care-action.is-performing>span:not(.action-wait){font-size:10px}}
@media(max-width:380px){.pet-actor{height:93%;bottom:1%;left:10%;width:80%}.habitat-message{font-size:12px}.scene-reward{top:17%;font-size:12px}.scene-snack{font-size:40px}}
html[data-motion="off"] #app *,html[data-motion="off"] #modal *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
html[data-motion="off"] :is(.button,.care-action,.filter-chip,.favorite-button,.icon-button,.nav-link,.mini-pet-link,.creature-card,.species-option,.star-button):hover,html[data-motion="off"] :is(.button,.care-action,.filter-chip,.favorite-button,.icon-button):active,html[data-motion="off"] .creature-card:hover .card-art .creature-portrait,html[data-motion="off"] .page-heading:hover .greeting-sun{transform:none!important}
html[data-motion="off"] :is(.button,.care-action,.filter-chip,.nav-link,.mini-pet-link,.text-link):hover>.icon,html[data-motion="off"] .mini-pet-link:hover>.creature-portrait{transform:none!important}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

.scene-kite{left:51%;top:34%;font-size:68px;transform-origin:center bottom}
.scene-wand{left:62%;top:44%;font-size:64px;transform-origin:center bottom}
.scene-brush{left:59%;top:43%;font-size:54px;transform-origin:center}
.scene-pillow{left:48%;top:65%;font-size:77px;transform-origin:center}
.scene-cuddle-toy{left:59%;top:54%}
@media(max-width:650px){.scene-kite{font-size:55px}.scene-wand{font-size:49px}.scene-brush{font-size:44px}.scene-pillow{font-size:61px}}