.pet{--pet-w:180px;position:fixed;right:10px;bottom:calc(var(--player-h,96px) + 10px);width:var(--pet-w);z-index:18;isolation:isolate;user-select:none}
.pet[hidden]{display:none}.pet-stage{height:170px;position:relative;overflow:visible;pointer-events:none}
.pet canvas,.pet-fallback{width:100%;height:170px;display:block;pointer-events:auto;cursor:pointer;filter:drop-shadow(0 4px 4px #133c351c)}
.pet-fallback{object-fit:contain;animation:pet-breathe 3.2s ease-in-out infinite;transform-origin:50% 92%}
.pet-caption{font-size:11px;text-align:center;color:#58726a;pointer-events:none}
.pet-bar{display:flex;gap:3px;justify-content:center;flex-wrap:wrap}
.pet-bar button{font-size:11px;padding:3px 6px;min-height:28px;background:#fffefae8;border-radius:7px}
.pet-menu{background:#fffefa;border:1px solid var(--line);border-radius:12px;padding:8px;box-shadow:0 8px 30px #173d371f;margin-bottom:5px}
.pet-menu select{font-size:12px;padding:6px}.pet-menu p{font-size:11px;line-height:1.4;margin:6px 0;color:var(--muted)}
.pet-prop{position:absolute;pointer-events:none;display:none}
.pet-prop.butterfly{width:26px;left:28px;top:16px}
.pet-prop.ball{width:34px;left:25px;bottom:8px}
.pet[data-action=butterfly] .pet-prop.butterfly{display:block;animation:pet-fly 2.2s ease-in-out infinite}
.pet[data-action=yarn] .pet-prop.ball{display:block;animation:pet-roll 2.8s ease-in-out infinite}
.pet.paused *{animation-play-state:paused!important}
.pet[data-action=walk] .pet-fallback{animation:pet-stroll 3s ease-in-out infinite}
.pet[data-action=jump] .pet-fallback{animation:pet-hop 2.4s ease-in-out infinite}
.pet[data-action=groom] .pet-fallback{animation:pet-groom 1s ease-in-out infinite}
@keyframes pet-breathe{50%{transform:scale(1.012,1.027)}}
@keyframes pet-stroll{0%,100%{transform:translateX(-12px) rotate(-1deg)}50%{transform:translateX(12px) translateY(-2px) rotate(1deg)}}
@keyframes pet-hop{0%,70%,100%{transform:translateY(0)}30%{transform:translateY(-25px) rotate(-3deg)}55%{transform:translateY(0) scaleY(.96)}}
@keyframes pet-groom{50%{transform:rotate(1.6deg) scaleY(.985)}}
@keyframes pet-fly{0%,100%{transform:translate(0,0) rotate(-10deg) scaleX(1)}25%{transform:translate(20px,-10px) rotate(20deg) scaleX(.4)}50%{transform:translate(38px,5px) rotate(-10deg) scaleX(.9)}75%{transform:translate(16px,9px) rotate(25deg) scaleX(.4)}}
@keyframes pet-roll{0%,100%{transform:translateX(0) rotate(0)}50%{transform:translateX(35px) rotate(130deg)}}
@media(min-width:1440px){.pet{right:max(12px,calc((100vw - 1420px)/2));--pet-w:160px}}
@media(max-width:1100px){.pet{--pet-w:125px;right:8px}.pet-stage,.pet canvas,.pet-fallback{height:125px}.pet-caption{font-size:10px}.pet-bar button{padding:2px 5px}}
@media(max-width:600px){.pet{--pet-w:100px;right:4px;bottom:calc(var(--player-h,180px) + 5px)}.pet-stage,.pet canvas,.pet-fallback{height:98px}.pet-caption{display:none}.pet-bar button{font-size:10px;min-height:26px}.pet-bar button[data-pet=settings]{display:none}.pet-prop.butterfly{width:18px;left:12px;top:5px}.pet-prop.ball{width:22px;left:12px;bottom:5px}.pet-menu{position:absolute;right:0;bottom:130px;width:190px}}