/* Базовый класс для любого вылетающего облачка */
.popoe-bubble {
    position: absolute;
    font-family: 'Arial Black', sans-serif;
    font-weight: bold;
    font-size: 24px;
    pointer-events: none; /* Чтобы облачко не мешало кликать сквозь него */
    animation: floatUpAndFade 0.8s ease-out forwards;
    z-index: 100;
}

/* Разные стили под типы редкости */
.popoe-bubble.common {
    color: #ffffff;
    text-shadow: 2px 2px 0px #000000;
}

.popoe-bubble.rare {
    color: #00e5ff;
    text-shadow: 2px 2px 0px #002244;
    font-size: 28px;
}

.popoe-bubble.legendary {
    color: #ffea00;
    text-shadow: 0 0 8px #ff6f00, 2px 2px 0px #000;
    font-size: 34px;
    animation: floatUpAndFade 1.1s cubic-bezier(0.18, 0.89, 0.32, 1.28) forwards;
}

/* Анимация: летит вверх, слегка отклоняется вбок и плавно исчезает */
@keyframes floatUpAndFade {
    0% {
        transform: translate(-50%, 0) scale(0.5);
        opacity: 0;
    }
    15% {
        transform: translate(-50%, -30px) scale(1.2);
        opacity: 1;
    }
    100% {
        transform: translate(calc(-50% + var(--random-x)), -150px) scale(0.8);
        opacity: 0;
    }
}