/* A quiet warm stage. Multiply blends the white atlas paper into the stage. */
.companion-art { display:block; position:relative; width:100%; height:100%; overflow:hidden; background:#f2efdf; border-radius:20px; }
.pet-illustration-motion { position:relative; mix-blend-mode:multiply; display:block; width:100%; height:100%; transform-origin:50% 82%; }
.pet-illustration-frame { position:absolute; inset:0; display:block; width:100%; height:100%; background-repeat:no-repeat; background-size:400% 200%; }
.pet-art-status { position:absolute; inset:40% 8% auto; font-size:12px; line-height:1.6; text-align:center; color:#6d8064; }
.pet-art-retry { position:absolute; bottom:20%; left:20%; width:60%; font-size:12px; }
html[data-view=pet] .cozy:has(.companion-2d-stage) { max-width:1160px; grid-template-columns:minmax(230px,.85fr) minmax(0,1.4fr); gap:12px 26px; padding:18px 28px; }
html[data-view=pet] .companion-2d-stage { width:100%; min-width:0; padding:44px 12px 8px; font-size:16px; line-height:1; align-self:center; background:#f2efdf; border:1px solid #e1e7d7; border-radius:24px; }
html[data-view=pet] .companion-2d-stage .pet-avatar-button { display:block; width:auto; height:clamp(230px,37dvh,360px); aspect-ratio:3/4; max-width:100%; margin:0 auto; padding:0; border:0; border-radius:18px; background:#f2efdf; box-shadow:none; overflow:hidden; touch-action:pan-y; }
html[data-view=pet] .companion-2d-stage .pet-avatar-button:is(:hover,:active) { transform:none; background:#f2efdf; }
.companion-2d-stage .pet-speech { width:calc(100% - 20px); max-width:none; top:8px; padding:6px 9px; border:0; background:#f1f5e9; border-radius:12px; font-size:12px; line-height:1.6; }
.companion-2d-stage .pet-turn-hint { display:block; text-align:center; margin:2px 0 6px; font-size:10px; }
html[data-view=pet] .companion-2d-stage .companion-badge { position:absolute; right:12px; bottom:64px; font-size:25px; }
.pet-play-actions { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:5px; }
.pet-play-actions button { min-width:0; min-height:36px; padding:6px 3px; font-size:11px; border-radius:10px; background:#f4f6eb; white-space:nowrap; }
.pet-play-actions button:hover { transform:none; background:#e5eed9; }
.companion-2d-stage .pet-snack { display:none!important; }
.companion-2d-stage .pet-particles { z-index:3; }
.pet-portrait > .companion-art { width:120px; height:160px; margin:auto; }
.task-buddy > .companion-art { width:min(100%,180px); height:auto; aspect-ratio:3/4; margin:auto; border-radius:20px; }
.companion-art[data-state=ready][data-action=idle] .pet-illustration-motion { animation:pet2d-idle var(--idle-period,5s) ease-in-out infinite; }
.companion-art[data-motion=touch] .pet-illustration-motion { animation:pet2d-nuzzle 2.3s cubic-bezier(.45,0,.25,1); }
.companion-art[data-motion=feed] .pet-illustration-motion { animation:pet2d-nibble .6s ease-in-out 3; }
.companion-art[data-motion=greet] .pet-illustration-motion { animation:pet2d-greet 1.5s ease-in-out; }
.companion-art[data-companion=fox][data-motion=signature] .pet-illustration-motion { animation:pet2d-fox 3.8s cubic-bezier(.45,0,.25,1); }
.companion-art[data-companion=panda][data-motion=signature] .pet-illustration-motion { animation:pet2d-panda 3.9s cubic-bezier(.45,0,.25,1); }
.companion-art[data-companion=rabbit][data-motion=signature] .pet-illustration-motion { animation:pet2d-rabbit 2.75s cubic-bezier(.45,0,.25,1); }
.companion-art[data-companion=dragon][data-motion=signature] .pet-illustration-motion { animation:pet2d-dragon 4.7s cubic-bezier(.45,0,.25,1); }
@keyframes pet2d-idle { 50% { transform:translateY(-1.5px); } }
@keyframes pet2d-nuzzle { 35% { transform:rotate(-1.5deg) translateY(1px); } 70% { transform:rotate(1deg); } }
@keyframes pet2d-nibble { 50% { transform:translateY(1.5px); } }
@keyframes pet2d-greet { 30% { transform:rotate(-1deg); } 65% { transform:rotate(1deg) translateY(-2px); } }
@keyframes pet2d-fox { 25% { transform:translateX(3px) rotate(1deg); } 65% { transform:translateX(-2px) rotate(-1deg); } }
@keyframes pet2d-panda { 30% { transform:rotate(-1.7deg); } 65% { transform:rotate(1.7deg); } }
@keyframes pet2d-rabbit { 20% { transform:translateY(2px); } 50% { transform:translateY(-5px); } 80% { transform:translateY(0); } }
@keyframes pet2d-dragon { 30% { transform:translateY(-2px) rotate(-.8deg); } 65% { transform:translateY(-3px) rotate(.8deg); } }
html[data-client=tablet][data-view=pet] .cozy:has(.companion-2d-stage) { grid-template-columns:minmax(210px,.8fr) minmax(0,1.3fr); gap:10px 18px; padding:14px 18px; }
html[data-client=tablet][data-view=pet] .companion-2d-stage .pet-avatar-button { height:clamp(190px,34dvh,330px); }
html[data-client=phone][data-view=pet] .cozy:has(.companion-2d-stage) { display:flex; gap:6px; padding:10px 12px; }
html[data-client=phone][data-view=pet] .companion-2d-stage { padding:30px 8px 5px; border-radius:16px; }
html[data-client=phone][data-view=pet] .companion-2d-stage .pet-avatar-button { height:clamp(125px,24dvh,220px); width:auto; }
html[data-client=phone][data-view=pet] .companion-2d-stage .pet-speech { font-size:10px; top:5px; padding:3px 7px; }
html[data-client=phone][data-view=pet] .pet-play-actions button { min-height:32px; font-size:10px; }
html[data-client=phone][data-view=pet] .companion-2d-stage .companion-badge { font-size:22px; bottom:52px; right:10%; }
html[data-client=phone][data-view=pet] .cozy:has(.companion-2d-stage) > p { margin:0; font-size:10px; }
html[data-client=phone][data-view=pet] .cozy:has(.companion-2d-stage) h1 { font-size:18px; margin:0; }
@media (prefers-reduced-motion:reduce) { .companion-art .pet-illustration-motion { animation:none!important; } }
@media(max-height:680px) { html[data-client=phone][data-view=pet] .companion-2d-stage .pet-avatar-button { height:110px; } }



/* Task companions blend directly into the sidebar, without a separate tile. */
html[data-view=task] :is(.pet-portrait,.task-buddy) > .companion-art { background:transparent; border-radius:0; mix-blend-mode:multiply; }
html[data-view=task] :is(.pet-portrait,.task-buddy) .pet-illustration-motion { mix-blend-mode:normal; }
html[data-client=phone][data-view=task] .task-buddy > .companion-art { width:32px; height:42px; aspect-ratio:3/4; flex:none; }

.task-buddy-note { display:none; }
html[data-client=phone][data-view=task] .task-title .task-buddy-note:not([hidden]) { display:block; margin:4px 0 0; padding:5px 8px; border-radius:10px; background:#edf2e4; color:#426044; font-size:11px; line-height:1.5; }
/* During questions only the blink frames change; body motion is for completion. */
html[data-view=task] .companion-art:not([data-action=celebrate]) .pet-illustration-motion{animation:none!important;transform:none!important}
/* Eyelid animation is local; the original full-body frame stays unchanged. */
.pet-eye-lids{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
/* Continuous poses settle at the original transform before the next action. */
.companion-art[data-motion=chat] .pet-illustration-motion{animation:pet2d-greet 1.9s ease-in-out}
.companion-art[data-motion=curious] .pet-illustration-motion{animation:pet2d-curious 2.2s ease-in-out}
.companion-art[data-motion=happy] .pet-illustration-motion,.companion-art[data-motion=gift] .pet-illustration-motion{animation:pet2d-happy 1.8s ease-in-out}
@keyframes pet2d-curious{0%,100%{transform:none}25%{transform:rotate(-2deg) translateY(-1px)}55%,70%{transform:rotate(2deg) translateY(-2px)}}
@keyframes pet2d-happy{0%,100%{transform:none}25%{transform:translateY(2px) scale(1.01,.99)}50%{transform:translateY(-3px)}75%{transform:translateY(1px)}}
@keyframes pet2d-nuzzle{0%,100%{transform:none}25%{transform:rotate(-2deg) translateY(1px)}55%,70%{transform:rotate(1.5deg) translateY(2px)}}
@keyframes pet2d-rabbit{0%,100%{transform:none}12%{transform:translateY(2px) scale(1.02,.98)}28%{transform:translateY(-9px) scale(.99,1.01)}42%{transform:translateY(1px) scale(1.015,.985)}55%{transform:none}67%{transform:translateY(-5px)}80%{transform:translateY(1px)}90%{transform:none}}
@keyframes pet2d-dragon{0%,100%{transform:none}15%{transform:translateY(2px)}35%{transform:translateY(-5px) rotate(-1deg)}60%{transform:translateY(-7px) rotate(1deg)}85%{transform:translateY(-2px)}}
.pet-food-prop{position:absolute;left:60%;top:44%;font-size:28px;line-height:1;color:#bd6558;text-shadow:1px 2px #914f3c;pointer-events:none;animation:pet-food-offer 3.05s ease-in-out both}
.companion-art[data-companion=rabbit] .pet-food-prop{left:44%;top:57%}
@keyframes pet-food-offer{0%{opacity:0;transform:translate(20px,40px) scale(.6)}25%{opacity:1;transform:translate(0,0) scale(1)}55%{opacity:1;transform:translate(-2px,-2px) scale(.9)}75%{opacity:0;transform:translate(-3px,-3px) scale(.3)}100%{opacity:0}}
@media(prefers-reduced-motion:reduce){.pet-food-prop{animation:none;display:none}}

.pet-rig-canvas{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none}