<script>
const PET_CONFIG = {
    fieldId: 'fld3',
    // Списки стадий для разных типов
        types: {
        // Мифические
        'dragon':  { 0: '🥚', 5: '🐥', 15: '🐉' },
        'unicorn': { 0: '🥚', 5: '🎠', 15: '🦄' },
        'alien':   { 0: '🥚', 5: '👾', 15: '🛸' },
        'ghost':   { 0: '🥚', 5: '💀', 15: '👻' },

        // Обычные
        'cat':     { 0: '🥚', 5: '🐱', 15: '🦁' },
        'dog':     { 0: '🥚', 5: '🐶', 15: '🐺' },
        'panda':   { 0: '🥚', 5: '🧸', 15: '🐼' },
        'bear':    { 0: '🥚', 5: '🧸', 15: '🐻' },
        'bird':    { 0: '🥚', 5: '🐣', 15: '🦅' },
        'bee':     { 0: '🌻', 5: '🐛', 15: '🐝' },
        'butterfly': { 0: '🌿', 5: '🐛', 15: '🦋' },
        'whale':    { 0: '🫧', 5: '🐟', 15: '🐋' },
        'dolphin':   { 0: '🫧', 5: '🐟', 15: '🦈' },
    },
    defaultType: 'dragon'
};

$(document).ready(function() {
    $('.post-author').each(function() {
        const $author = $(this);
        const $fld3 = $author.find('.pa-fld3');
        
        if ($fld3.length) {
            const petsData = $fld3.text().split(',');
            let petsHtml = '<div class="pets-wrapper">';

            petsData.forEach(data => {
                const parts = data.split('|').map(s => s.trim());
                if (parts.length < 2) return;

                // Формат: тип|уровень|имя
                const type = PET_CONFIG.types[parts[0]] ? parts[0] : PET_CONFIG.defaultType;
                const level = parseInt(parts[1].replace(/\D/g, '')) || 0;
                const petName = parts[2] || 'Питомец';
                
                const stages = PET_CONFIG.types[type];
                let currentImg = stages[0];
                for (let l in stages) {
                    if (level >= parseInt(l)) currentImg = stages[l];
                }

                petsHtml += `
                    <div class="pet-container">
                        <div class="pet-icon">${currentImg}</div>
                        <div class="pet-tooltip">
                            <span class="pet-t-name">${petName}</span>, 
                            <span class="pet-t-info">ур. ${level}</span>
                        </div>
                    </div>`;
            });

            petsHtml += '</div>';
            $fld3.hide();
            $author.append(petsHtml);
        }
    });
});
</script>

<style>
.pets-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
    margin: 8px 0;
}

.pet-container {
    position: relative;
    cursor: help;
}

@keyframes petSwing {
    0%, 100% { transform: rotate(-3deg); }
    50% { transform: rotate(3deg); }
}

.pet-icon { 
    font-size: 22px; 
    animation: petSwing 3s ease-in-out infinite;
    transition: transform 0.2s;
    filter: drop-shadow(0 2px 2px rgba(0,0,0,0.1));
}

.pet-container:hover .pet-icon { transform: scale(1.2); }

.pet-tooltip {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    bottom: 120%;
    left: 50%;
    transform: translateX(-50%) translateY(5px);
    background: #fff;
    padding: 3px 10px;
    border-radius: 8px;
    white-space: nowrap;
    z-index: 100;
    transition: all 0.2s ease-out;
    box-shadow: 0 3px 10px rgba(0,0,0,0.15);
    border: 1px solid #ddd;
    font-size: 11px;
    pointer-events: none;
}

.pet-tooltip::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border: 5px solid transparent;
    border-top-color: #fff;
}

.pet-container:hover .pet-tooltip {
    visibility: visible;
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.pet-t-name { font-weight: bold; color: #333; }
.pet-t-info { color: #777; }
</style>