.jiaoyue-pet {
    position: fixed;
    right: max(12px, env(safe-area-inset-right));
    bottom: max(10px, env(safe-area-inset-bottom));
    z-index: 55;
    width: 148px;
    height: 156px;
    pointer-events: none;
}

.jiaoyue-pet.is-entering {
    animation: jiaoyue-arrive 1.65s cubic-bezier(0.25, 0.7, 0.25, 1) both;
}

.jiaoyue-pet button { font: inherit; }

.jiaoyue-pet__character {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    border: 0;
    background: transparent;
    cursor: pointer;
    pointer-events: auto;
    padding: 0;
    touch-action: none;
    user-select: none;
}

.jiaoyue-pet__character svg {
    display: block;
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 5px 7px rgba(26, 22, 43, .28));
    transform-origin: 50% 100%;
    animation: jiaoyue-breathe 3.7s ease-in-out infinite;
}

.jiaoyue-pet__character svg.is-greeting {
    animation-name: jiaoyue-breathe, jiaoyue-hop;
    animation-duration: 3.7s, 1.1s;
    animation-timing-function: ease-in-out, linear;
    animation-iteration-count: infinite, 1;
}

.jiaoyue-pet.is-entering .jiaoyue-pet__character svg {
    animation: jiaoyue-running 0.28s ease-in-out infinite;
}

.jiaoyue-pet__character #jiaoyue-pet-art {
    display: block;
    width: 100%;
    height: 100%;
}

.jiaoyue-pet__character:hover {
    transform: scale(1.06);
    animation-play-state: paused;
}

.jiaoyue-pet.is-dragging .jiaoyue-pet__character { cursor: grabbing; }

.jiaoyue-pet__character:focus-visible {
    outline: 3px solid #58a6ff;
    outline-offset: 3px;
    border-radius: 12px;
}

@keyframes jiaoyue-breathe {
    0%, 100% { scale: 1; }
    50% { scale: 0.994 1.012; }
}

@keyframes jiaoyue-hop {
    0%, 50%, 100% { translate: 0 0; }
    25%, 75% { translate: 0 -5.5px; }
}

@keyframes jiaoyue-arrive {
    from { translate: calc(100% + 20px) 0; }
    to { translate: 0 0; }
}

@keyframes jiaoyue-running {
    0%, 100% { translate: 0 0; rotate: -4deg; }
    50% { translate: 0 -5px; rotate: 4deg; }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .jiaoyue-pet { display: none; }
}

@media (max-width: 767px) {
    .jiaoyue-pet { display: none; }

    .mobile-pet-slot {
        display: flex;
        justify-content: center;
        margin: -16px 0 16px;
    }

    .mobile-pet-slot .jiaoyue-pet {
        display: block;
        position: relative;
        right: auto;
        bottom: auto;
        width: 108px;
        height: 114px;
        animation: none;
    }

    .mobile-pet-slot .jiaoyue-pet__character { touch-action: manipulation; }
}

@media (prefers-reduced-motion: reduce) {
    .jiaoyue-pet.is-entering { animation: none; }
    .jiaoyue-pet__character svg { animation: none; }
    .jiaoyue-pet.is-entering .jiaoyue-pet__character svg { animation: none; }
}