/* Span que contém apenas o emoji */
.trophy-emoji {
    position: relative;
    display: inline-block;
}

/* Brilhos - posicionados em relação ao span do emoji */
.trophy-emoji::before,
.trophy-emoji::after,
.trophy-emoji .corner1,
.trophy-emoji .corner2,
.trophy-emoji .mid1,
.trophy-emoji .mid2 {
    position: absolute;
    width: 18px;
    height: 18px;
    background: url('/templates/mutreta/img/sparkle.png') center/contain no-repeat;
    pointer-events: none;
    opacity: 0;
    z-index: 10;
}

/* Canto superior esquerdo - 5px para dentro */
.trophy-emoji::before {
    top: 5px;
    left: 5px;
    transform: translate(-30%, -30%);
    animation: spark 5.6s ease-in-out 0s infinite;
}

/* Canto superior direito - 5px para dentro */
.trophy-emoji::after {
    top: 5px;
    right: 5px;
    transform: translate(30%, -30%);
    animation: spark 5.6s ease-in-out 0.9s infinite;
}

/* Canto inferior esquerdo - 5px para dentro */
.trophy-emoji .corner1 {
    bottom: 5px;
    left: 5px;
    transform: translate(-30%, 30%);
    animation: spark 5.6s ease-in-out 1.8s infinite;
}

/* Canto inferior direito - 5px para dentro */
.trophy-emoji .corner2 {
    bottom: 5px;
    right: 5px;
    transform: translate(30%, 30%);
    animation: spark 5.6s ease-in-out 2.7s infinite;
}

/* Meio superior - 5px para baixo */
.trophy-emoji .mid1 {
    top: 1px;
    left: 50%;
    transform: translateX(-50%);
    width: 16px;
    height: 16px;
    animation: spark 6s ease-in-out 1.2s infinite;
}

/* Meio inferior - 5px para cima */
.trophy-emoji .mid2 {
    bottom: 1px;
    left: 50%;
    transform: translateX(-50%);
    width: 16px;
    height: 16px;
    animation: spark 6s ease-in-out 2.4s infinite;
}

@keyframes spark {
    0% {
        opacity: 0;
        transform: scale(0.4);
    }
    12% {
        opacity: 1;
        transform: scale(1);
    }
    24% {
        opacity: 0.5;
        transform: scale(0.7);
    }
    36% {
        opacity: 0;
        transform: scale(0.3);
    }
    100% {
        opacity: 0;
    }
}