.imex-pet { position: fixed; left: 20px; bottom: 20px; width: 140px; height: 140px; z-index: 790; }
.pet-body { display: block; position: relative; width: 100%; height: 100%; padding: 0; border: 0; background: none; touch-action: none; user-select: none; cursor: grab; }
.pet-body:active { cursor: grabbing; }
.pet-facing { display: block; width: 100%; height: 100%; pointer-events: none; }
.pet-body .pet-portrait { width: 100%; height: 100%; object-fit: contain; pointer-events: none; filter: drop-shadow(0 9px 7px #17234520); animation: pet-breathe 4s ease-in-out infinite; transform-origin: 50% 95%; }
.pet-body::after { content: '♥'; position: absolute; top: 18px; right: 10px; color: #eb7897; font-size: 26px; opacity: 0; pointer-events: none; }
.pet-body.pet-happy .pet-portrait { animation: pet-hop .65s ease-in-out 2; }
.pet-body.pet-happy::after { animation: pet-heart 1.3s ease-out; }
.pet-body.pet-dance .pet-portrait { animation: pet-dance .55s ease-in-out 6; }
.imex-pet.pet-dragging .pet-portrait { animation: none; transform: rotate(-8deg); }
.pet-body:focus-visible { outline: 3px solid #427ccc; outline-offset: 3px; border-radius: 50%; }
.pet-walking .pet-body .pet-portrait { animation: pet-step .48s linear infinite; }
.pet-sprite { display: none; position: absolute; inset: 0; pointer-events: none; background-image: url('assets/images/mascot-walk-alpha.png?v=3'); background-size: 400% 200%; background-repeat: no-repeat; background-position: 0 var(--pet-row, 0%); filter: drop-shadow(0 6px 5px #17234520); }
.pet-sprite-ready.pet-walking .pet-facing { visibility: hidden; }
.pet-sprite-ready.pet-walking .pet-body .pet-portrait { animation: none; }
.pet-sprite-ready.pet-walking .pet-sprite { display: block; animation: pet-walk-frames .64s steps(1, end) infinite; }
.pet-sprite-ready.pet-turning .pet-sprite { display: none; animation: none; }
.pet-turning .pet-facing { visibility: hidden; }
.pet-turning .pet-body .pet-portrait { animation-play-state: paused; }
.pet-turn-sprite { display: none; position: absolute; inset: 0; pointer-events: none; background: url('assets/images/mascot-turn-neutral-smooth.png?v=4') no-repeat; background-size: 500% 200%; background-position: 0 var(--pet-row, 0%); filter: drop-shadow(0 6px 5px #17234520); }
.pet-turning .pet-turn-sprite { display: block; }
@keyframes pet-walk-frames { 0% { background-position-x: 0%; } 25% { background-position-x: 33.333333%; } 50% { background-position-x: 66.666667%; } 75%, 100% { background-position-x: 100%; } }
.pet-falling .pet-body .pet-portrait { animation: none; transform: scale(.96, 1.04); }
.pet-body.pet-land .pet-portrait { animation: pet-land .38s ease-out; }
@keyframes pet-land { 0% { transform: scale(1.12,.86); } 55% { transform: scale(.97,1.03); } 100% { transform: scale(1); } }
@keyframes pet-step { 0%, 100% { transform: translateY(0) rotate(-4deg); } 25% { transform: translateY(-6px) rotate(0); } 50% { transform: translateY(0) rotate(4deg); } 75% { transform: translateY(-6px) rotate(0); } }
@keyframes pet-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.02, 0.98); } }
@keyframes pet-hop { 35% { transform: translateY(-18px) rotate(-6deg); } 70% { transform: scale(1.05,.95); } }
@keyframes pet-dance { 25% { transform: rotate(-13deg) translateY(-8px); } 75% { transform: rotate(13deg) translateY(-8px); } }
@keyframes pet-heart { 20% { opacity: 1; } 100% { opacity: 0; transform: translateY(-45px) scale(1.4); } }
@media (max-width: 600px) { .imex-pet { left: 12px; bottom: 12px; width: 105px; height: 105px; } }
@media (prefers-reduced-motion: reduce) { .imex-pet *, .imex-pet *::after { animation: none !important; transition: none !important; } }

.pet-portrait { display: block; position: relative; }
.pet-portrait > img { display: block; width: 100%; height: 100%; }
.pet-eyelid { position: absolute; opacity: 0; border-radius: 50%; pointer-events: none; background: linear-gradient(125deg, #eee5d9, #d4c5b3); transform-origin: center top; }
.pet-eye-left { left: 35.2%; top: 37.4%; width: 11.4%; height: 12.3%; }
.pet-eye-right { left: 58.7%; top: 37.2%; width: 11.3%; height: 12.4%; }
.pet-eyelid::after { content: ''; position: absolute; left: 10%; right: 10%; top: 37%; height: 18%; border-bottom: 2px solid #493327; border-radius: 50%; }
.pet-blinking .pet-eyelid { animation: pet-blink .28s ease-in-out var(--pet-blink-count, 1); }
.pet-walking .pet-eyelid, .pet-turning .pet-eyelid, .pet-falling .pet-eyelid, .pet-dragging .pet-eyelid { display: none; }
@keyframes pet-blink { 0%, 100% { opacity: 0; clip-path: inset(0 0 100% 0); } 32%, 60% { opacity: 1; clip-path: inset(0); } }
@media (prefers-reduced-motion: reduce) { .pet-eyelid { display: none; } }
/* Companion states: one body pose at a time, with small decorative effects. */
.pet-sleep-mark { display: none; position: absolute; top: 8%; right: 0; color: #7770a9; font: 600 15px/1.3 Georgia, serif; letter-spacing: 4px; pointer-events: none; }
.imex-pet[data-state="sleeping"] .pet-sleep-mark { display: block; animation: pet-snooze 2.8s ease-in-out infinite; }
.imex-pet[data-state="sleeping"] .pet-portrait { animation: pet-sleep-breathe 3s ease-in-out infinite; }
.imex-pet[data-state="drowsy"] .pet-portrait { animation: pet-nod 2.5s ease-in-out; }
.imex-pet[data-state="petting"] .pet-portrait { animation: pet-content .9s ease-in-out infinite; }
.imex-pet[data-state="sleeping"] .pet-eyelid,
.imex-pet[data-state="petting"] .pet-eyelid { display: block; opacity: 1; clip-path: inset(0); animation: none; }
.imex-pet[data-state="drowsy"] .pet-eyelid { opacity: 1; clip-path: inset(0 0 35% 0); animation: none; }
.imex-pet[data-state="petting"] .pet-body::after { animation: pet-heart 1s ease-out infinite; }
.imex-pet[data-state="held"] .pet-portrait { animation: pet-wriggle .7s ease-in-out infinite; }
@keyframes pet-content { 50% { transform: rotate(-4deg) scale(1.02,.98); } }
@keyframes pet-nod { 35% { transform: translateY(4px) rotate(5deg); } 65% { transform: translateY(0) rotate(-2deg); } 100% { transform: translateY(6px) scale(1.04,.94); } }
@keyframes pet-sleep-breathe { 0%,100% { transform: translateY(6px) scale(1.04,.94); } 50% { transform: translateY(5px) scale(1.05,.96); } }
@keyframes pet-snooze { 0%,100% { opacity: .35; transform: translateY(0); } 60% { opacity: .9; transform: translateY(-7px); } }
@keyframes pet-wriggle { 25% { transform: rotate(-7deg); } 75% { transform: rotate(7deg); } }
.pet-ball { position: fixed; width: 44px; height: 44px; border: 0; padding: 0; background: none; z-index: 789; cursor: grab; touch-action: none; }
.pet-ball::before { content: ''; display: block; width: 28px; height: 28px; margin: 8px; border-radius: 50%; background: radial-gradient(circle at 30% 25%, #ffffffa0, transparent 40%), conic-gradient(#8c80d4 0deg 120deg, #5fbdde 120deg 240deg, #ffe0a2 240deg); border: 1px solid #7163a344; box-shadow: 0 3px 5px #27324625; transform: rotate(var(--ball-angle, 0deg)); pointer-events: none; }
.pet-ball:active { cursor: grabbing; }
.pet-sleep-sprite { display: none; position: absolute; inset: 0; background: url('assets/images/mascot-sleep-alpha.png') center / contain no-repeat; pointer-events: none; transform-origin: 50% 95%; filter: drop-shadow(0 4px 4px #17234518); }
.pet-sleep-ready[data-state="sleeping"] .pet-facing { visibility: hidden; }
.pet-sleep-ready[data-state="sleeping"] .pet-sleep-sprite { display: block; animation: pet-blanket-breathe 3.6s ease-in-out infinite; }
.pet-sleep-ready[data-state="sleeping"] .pet-sleep-mark { top: 23%; right: 3%; z-index: 1; }
@keyframes pet-blanket-breathe { 0%,100% { transform: scale(1); } 50% { transform: scale(1.012,1.025); } }
.pet-kick-sprite { display: none; position: absolute; inset: 0; pointer-events: none; background: url('assets/images/mascot-kick-alpha.png') no-repeat; background-size: 400% 200%; background-position: 0 var(--pet-row, 0%); filter: drop-shadow(0 6px 5px #17234520); }
.pet-kick-ready[data-state="kicking"] .pet-facing { visibility: hidden; }
.pet-kick-ready[data-state="kicking"] .pet-kick-sprite { display: block; animation: pet-kick-frames .76s steps(1,end) both; }
@keyframes pet-kick-frames { 0% { background-position-x: 0%; } 25% { background-position-x: 33.333333%; } 50% { background-position-x: 66.666667%; } 75%,100% { background-position-x: 100%; } }
.pet-air-sprite { display: none; position: absolute; inset: 0; pointer-events: none; background: url('assets/images/mascot-air-alpha.png') no-repeat; background-size: 200% 100%; background-position: 0 0; filter: drop-shadow(0 6px 5px #17234520); transform-origin: 50% 30%; }
.pet-air-ready.pet-lifted .pet-facing, .pet-air-ready.pet-falling .pet-facing { visibility: hidden; }
.pet-air-ready.pet-lifted .pet-air-sprite { display: block; animation: pet-air-sway .8s ease-in-out infinite; }
.pet-air-ready.pet-falling .pet-air-sprite { display: block; background-position-x: 100%; transform: scale(.97,1.03); }
@keyframes pet-air-sway { 0%,100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }
.pet-ball:focus-visible { outline: 2px solid #427ccc; outline-offset: 2px; border-radius: 50%; }
@media (prefers-reduced-motion: reduce) { .imex-pet *, .imex-pet *::after { animation: none !important; } }
.pet-sprite-ready[data-state="waiting-ball"] .pet-facing { visibility: hidden; }
.pet-sprite-ready[data-state="waiting-ball"] .pet-sprite { display: block; animation: none; background-position-x: 33.333333%; }
.pet-care-toggle { position: absolute; right: -9px; top: 4px; width: 34px; height: 34px; border: 1px solid #dcd5ef; border-radius: 50%; background: #fffcfff2; color: #7060a3; font-size: 22px; line-height: 1; cursor: pointer; box-shadow: 0 3px 12px #2e284b12; }
.pet-care-panel { position: fixed; left: 12px; bottom: 175px; width: min(320px, calc(100vw - 24px)); max-height: calc(100dvh - 195px); overflow-y: auto; padding: 18px; box-sizing: border-box; z-index: 791; background: #fffdfb; color: #353344; border: 1px solid #e9e1ed; border-radius: 22px; box-shadow: 0 12px 40px #302b4526; font-family: inherit; font-size: 13px; }
.pet-care-panel[hidden] { display: none !important; }
.pet-care-heading { display: flex; align-items: center; justify-content: space-between; font-size: 16px; margin-bottom: 12px; }
.pet-care-panel button, .pet-care-panel input { font: inherit; }
.pet-care-close { border: 0; background: transparent; width: 32px; height: 32px; font-size: 23px !important; cursor: pointer; }
.pet-name-form label { display: block; font-size: 11px; color: #787183; margin-bottom: 5px; }
.pet-name-form > div { display: flex; gap: 6px; }
.pet-name-form input { min-width: 0; width: 100%; border: 1px solid #dfd8e8; background: white; border-radius: 9px; padding: 8px; }
.pet-name-form button { white-space: nowrap; border: 0; border-radius: 9px; background: #efe8fa; color: #615081; padding: 8px; cursor: pointer; }
.pet-care-mood { margin: 12px 0; font-size: 12px; color: #70637e; }
.pet-care-meter { display: grid; grid-template-columns: 78px 1fr 25px; align-items: center; gap: 9px; margin: 8px 0; font-size: 12px; }
.pet-care-meter meter { width: 100%; height: 15px; accent-color: #a18bc8; }
.pet-care-meter meter::-webkit-meter-bar { background: #f0ebf4; border: 0; border-radius: 12px; }
.pet-care-meter meter::-webkit-meter-optimum-value { background: #a18bc8; border-radius: 12px; }
.pet-care-meter output { text-align: right; font-variant-numeric: tabular-nums; }
.pet-care-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin-top: 15px; }
.pet-care-actions button { border: 1px solid #e9e0ed; background: #f8f3fb; border-radius: 12px; padding: 8px 3px; font-size: 19px; cursor: pointer; transition: transform .15s ease, background .15s ease; }
.pet-care-actions button:hover { background: #f2e8f8; transform: translateY(-1px); }
.pet-care-actions button:active { transform: translateY(1px); }
.pet-care-actions span { display: block; font-size: 11px; margin-top: 3px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pet-care-actions [data-care="food"], .pet-care-actions [data-care="snack"] { touch-action: none; cursor: grab; }
.pet-care-hint { font-size: 11px; color: #7f7586; line-height: 1.6; margin: 12px 0 6px; }
.pet-care-status { font-size: 12px; color: #685582; min-height: 18px; margin: 5px 0; }
.pet-care-storage { font-size: 10px; color: #928794; line-height: 1.5; display: block; }
.pet-care-panel button:focus-visible, .pet-care-toggle:focus-visible { outline: 2px solid #6f64bd; outline-offset: 2px; }
.pet-food-ghost { position: fixed; font-size: 32px; transform: translate(-50%,-50%); pointer-events: none; z-index: 1100; }
.imex-pet[data-state="feeding"] .pet-portrait { animation: pet-munch .28s ease-in-out 5; }
.imex-pet[data-state="feeding"] .pet-body::after { content: '🍎'; opacity: 1; top: 46%; right: 27%; font-size: 17px; animation: pet-food-bite 1.6s ease-in forwards; }
.imex-pet[data-state="feeding"][data-feed-kind="snack"] .pet-body::after { content: '🍰'; }
.imex-pet[data-state="feeding"][data-feed-kind="medicine"] .pet-body::after { content: '💊'; }
.imex-pet[data-state="refusing"] .pet-portrait { animation: pet-no .65s ease-in-out; }
@keyframes pet-munch { 50% { transform: scale(1.025,.985); } }
.pet-eat-sprite { display: none; position: absolute; inset: 0; pointer-events: none; background: url('assets/images/mascot-eat-alpha.png') no-repeat; background-size: 400% 200%; background-position: 0 var(--pet-row, 0%); filter: drop-shadow(0 6px 5px #17234520); }
.pet-eat-ready[data-state="feeding"] .pet-facing { visibility: hidden; }
.pet-eat-ready[data-state="feeding"] .pet-body::after { display: none; }
.pet-eat-ready[data-state="feeding"] .pet-eat-sprite { display: block; animation: pet-eat-frames 1.6s steps(1,end) both; }
.pet-snack-sprite { display: none; position: absolute; inset: 0; pointer-events: none; background: url('assets/images/mascot-eat-cake.png?v=fixed2') center bottom / contain no-repeat; filter: drop-shadow(0 6px 7px #17234520); }
.pet-snack-ready[data-state="feeding"][data-feed-kind="snack"] .pet-facing { visibility: hidden !important; }
.pet-snack-ready[data-state="feeding"][data-feed-kind="snack"] .pet-eat-sprite { display: none !important; }
.pet-snack-ready[data-state="feeding"][data-feed-kind="snack"] .pet-settle-sprite { display: none !important; }
.pet-snack-ready[data-state="feeding"][data-feed-kind="snack"] .pet-snack-sprite { display: block !important; animation: pet-cake-munch 1.6s ease-in-out both; }
.pet-snack-ready[data-state="feeding"][data-feed-kind="snack"] .pet-body::after { content: '✨'; display: block !important; opacity: 1; top: -10px; right: -5px; font-size: 22px; animation: pet-cake-sparkle 1.6s ease-out forwards !important; }
@keyframes pet-cake-munch {
    0% { transform: scale(0.9) translateY(4px); }
    15% { transform: scale(1.05, 0.95) translateY(-2px); }
    30% { transform: scale(0.98, 1.02) rotate(-3deg); }
    45% { transform: scale(1.04, 0.96) rotate(3deg); }
    60% { transform: scale(0.98, 1.02) rotate(-2deg); }
    75% { transform: scale(1.04, 0.96) translateY(-4px); }
    90% { transform: scale(1) translateY(0); }
    100% { transform: scale(1); }
}
@keyframes pet-cake-sparkle {
    0% { transform: translateY(10px) scale(0.6); opacity: 0; }
    25% { transform: translateY(0) scale(1.2); opacity: 1; }
    50% { transform: translateY(-8px) scale(1.3) rotate(12deg); opacity: 1; }
    75% { transform: translateY(-16px) scale(1.1) rotate(-8deg); opacity: 0.8; }
    100% { transform: translateY(-24px) scale(0.9); opacity: 0; }
}
@keyframes pet-eat-frames { 0% { background-position-x: 0%; } 22% { background-position-x: 33.333333%; } 45% { background-position-x: 66.666667%; } 76%,100% { background-position-x: 100%; } }
@keyframes pet-food-bite { 0% { transform: scale(1); } 70% { opacity: 1; transform: scale(.65); } 100% { opacity: 0; transform: scale(0); } }
@keyframes pet-no { 25%,75% { transform: rotate(-5deg); } 50% { transform: rotate(5deg); } }
.pet-sick-badge { display: none; position: absolute; top: -6px; left: 16px; font-size: 24px; pointer-events: none; z-index: 10; animation: pet-sick-float 1.8s ease-in-out infinite; }
.pet-is-sick .pet-sick-badge { display: block; }
.pet-is-sick .pet-portrait { filter: drop-shadow(0 9px 7px #17234520) hue-rotate(35deg) saturate(0.85); animation: pet-shiver .25s ease-in-out infinite !important; }
@keyframes pet-sick-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes pet-shiver { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-1.5px); } 75% { transform: translateX(1.5px); } }
.pet-poop { position: fixed; bottom: 20px; width: 44px; height: 44px; border: 0; background: none; padding: 0; cursor: pointer; z-index: 788; transform-origin: center bottom; animation: pet-poop-pop .4s cubic-bezier(0.175, 0.885, 0.32, 1.275); touch-action: manipulation; }
.pet-poop:hover { transform: scale(1.18); }
.pet-poop:active { transform: scale(0.95); }
.pet-poop:focus-visible { outline: 2px solid #a18bc8; outline-offset: 2px; border-radius: 50%; }
.pet-poop-graphic { display: block; font-size: 30px; line-height: 1; filter: drop-shadow(0 3px 4px #1b263b25); }
.pet-poop-stink { position: absolute; top: -8px; left: 50%; font-size: 14px; font-weight: bold; color: #82a857; opacity: 0.8; pointer-events: none; animation: pet-stink 1.6s ease-in-out infinite; }
@keyframes pet-poop-pop { 0% { transform: scale(0); } 70% { transform: scale(1.25); } 100% { transform: scale(1); } }
@keyframes pet-stink { 0%, 100% { transform: translate(-50%, 0) scale(0.9); opacity: 0.3; } 50% { transform: translate(-40%, -6px) scale(1.15); opacity: 0.9; } }
.pet-clean-splash { position: fixed; font-size: 32px; pointer-events: none; z-index: 1105; transform: translate(-50%, -50%); animation: pet-splash-burst 0.75s ease-out forwards; }
@keyframes pet-splash-burst { 0% { transform: translate(-50%, -50%) scale(0.5); opacity: 1; } 50% { transform: translate(-50%, -80%) scale(1.3); opacity: 0.9; } 100% { transform: translate(-50%, -110%) scale(1.6); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .imex-pet[data-state="feeding"] .pet-portrait, .imex-pet[data-state="refusing"] .pet-portrait, .imex-pet[data-state="feeding"] .pet-body::after, .pet-sick-badge, .pet-poop, .pet-is-sick .pet-portrait, .pet-snack-sprite { animation: none !important; } }
.pet-collection { border-top: 1px solid #eee5ef; margin-top: 12px; padding-top: 8px; }
.pet-collection progress { width: 100%; height: 9px; accent-color: #a18bc8; }
.pet-collection h4 { margin: 12px 0 6px; }
.pet-collection label { display: flex; justify-content: space-between; align-items: center; margin: 8px 0; gap: 10px; }
.pet-collection select { max-width: 65%; padding: 7px; border: 1px solid #dfd8e8; border-radius: 8px; background: white; color: #615081; font: inherit; }
.pet-bond-toast { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); max-width: calc(100vw - 40px); padding: 9px 15px; border-radius: 16px; background: #fff9f2; box-shadow: 0 3px 18px #302b4526; color: #615081; z-index: 792; pointer-events: none; font-size: 13px; }
.pet-bond-toast[hidden] { display: none; }
.pet-ball[data-color="mint"]::before { background: radial-gradient(circle at 30% 25%,#ffffffa0,transparent 40%),conic-gradient(#7acdb6 0deg 120deg,#dbf4c8 120deg 240deg,#fff1c9 240deg); }
.pet-ball[data-color="sunset"]::before { background: radial-gradient(circle at 30% 25%,#ffffffa0,transparent 40%),conic-gradient(#efac9c 0deg 120deg,#ffd38e 120deg 240deg,#c3ace7 240deg); }
.imex-pet[data-blanket="mint"] .pet-sleep-sprite { background-image: url('assets/images/mascot-sleep-mint.png'); }
.imex-pet[data-blanket="rose"] .pet-sleep-sprite { background-image: url('assets/images/mascot-sleep-rose.png'); }
.pet-accessory-bow { display: none; position: absolute; left: 58%; top: 10%; width: 18%; height: 12%; background: #c496dc; clip-path: polygon(0 0,50% 35%,100% 0,100% 100%,50% 65%,0 100%); filter: drop-shadow(0 1px 1px #725580); }
.pet-has-bow .pet-accessory-bow { display: block; }
.pet-settle-sprite { display: none; position: absolute; inset: 0; background-size: 1100% 200%; background-repeat: no-repeat; pointer-events: none; filter: drop-shadow(0 6px 5px #17234520); }
.imex-pet.pet-settling .pet-facing { visibility: hidden; }
.imex-pet.pet-settling .pet-eat-sprite, .imex-pet.pet-settling .pet-kick-sprite { display: none; }
.imex-pet.pet-settling .pet-settle-sprite { display: block; }
.imex-pet.pet-settling .pet-body { animation: none; }
.pet-care-panel { z-index: 1101; }
.pet-bond-toast { z-index: 1102; }
.pet-food-ghost { z-index: 1103; }