/* Estilização Premium para os Selos (WebP) - Brilho Puro e Transparência Real */
.badge-container {
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    overflow: visible;
    z-index: 10;
}

.badge-container img, .badge-container svg {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: all 0.3s ease;
    z-index: 2;
}

.badge-container:hover {
    transform: translateY(-15px) scale(1.4);
    z-index: 50;
}

.badge-container:hover img, .badge-container:hover svg {
    filter: brightness(1.1);
}

/* Tamanhos Customizados - Maximizados */
.badge-size-profile { width: 8rem; height: 8rem; } 
.badge-size-dashboard { width: 7rem; height: 7rem; }
.badge-size-comment { width: 4rem; height: 4rem; }

/* Backgrounds e Auras por Categoria */
.badge-bronze { background: linear-gradient(135deg, rgba(205, 127, 50, 0.1), rgba(205, 127, 50, 0.05)) !important; border: 1px solid rgba(205, 127, 50, 0.2) !important; }
.badge-bronze img, .badge-bronze svg { filter: drop-shadow(0 0 10px rgba(205, 127, 50, 0.5)); }

.badge-silver { background: linear-gradient(135deg, rgba(148, 163, 184, 0.1), rgba(148, 163, 184, 0.05)) !important; border: 1px solid rgba(148, 163, 184, 0.2) !important; }
.badge-silver img, .badge-silver svg { filter: drop-shadow(0 0 10px rgba(148, 163, 184, 0.5)); }

.badge-gold { background: linear-gradient(135deg, rgba(255, 215, 0, 0.1), rgba(255, 215, 0, 0.05)) !important; border: 1px solid rgba(255, 215, 0, 0.2) !important; }
.badge-gold img, .badge-gold svg { filter: drop-shadow(0 0 15px rgba(255, 215, 0, 0.6)); }

.badge-epic { background: linear-gradient(135deg, rgba(168, 85, 247, 0.1), rgba(168, 85, 247, 0.05)) !important; border: 1px solid rgba(168, 85, 247, 0.2) !important; }
.badge-epic img, .badge-epic svg { filter: drop-shadow(0 0 20px rgba(168, 85, 247, 0.7)); }

.badge-legendary { background: linear-gradient(135deg, rgba(56, 189, 248, 0.1), rgba(56, 189, 248, 0.05)) !important; border: 1px solid rgba(56, 189, 248, 0.2) !important; }
.badge-legendary img, .badge-legendary svg { filter: drop-shadow(0 0 25px rgba(56, 189, 248, 0.7)); }

.badge-supreme { background: linear-gradient(135deg, rgba(236, 72, 153, 0.15), rgba(236, 72, 153, 0.05)) !important; border: 1px solid rgba(236, 72, 153, 0.3) !important; }
.badge-supreme img, .badge-supreme svg { filter: drop-shadow(0 0 30px rgba(236, 72, 153, 0.8)); }

.badge-exotic { background: linear-gradient(135deg, rgba(20, 184, 166, 0.1), rgba(20, 184, 166, 0.05)) !important; border: 1px solid rgba(20, 184, 166, 0.2) !important; }
.badge-exotic img, .badge-exotic svg { filter: drop-shadow(0 0 12px rgba(20, 184, 166, 0.6)); }

/* Auras Intensificadas no Hover */
.badge-bronze:hover img, .badge-bronze:hover svg { filter: drop-shadow(0 15px 30px rgba(205, 127, 50, 0.8)) brightness(1.1); }
.badge-silver:hover img, .badge-silver:hover svg { filter: drop-shadow(0 15px 30px rgba(148, 163, 184, 0.8)) brightness(1.1); }
.badge-gold:hover img, .badge-gold:hover svg { filter: drop-shadow(0 20px 40px rgba(255, 215, 0, 0.9)) brightness(1.1); }
.badge-epic:hover img, .badge-epic:hover svg { filter: drop-shadow(0 25px 50px rgba(168, 85, 247, 0.9)) brightness(1.1); }
.badge-legendary:hover img, .badge-legendary:hover svg { filter: drop-shadow(0 30px 60px rgba(56, 189, 248, 0.9)) brightness(1.1); }
.badge-supreme:hover img, .badge-supreme:hover svg { filter: drop-shadow(0 35px 70px rgba(236, 72, 153, 1)) brightness(1.1); }
.badge-exotic:hover img, .badge-exotic:hover svg { filter: drop-shadow(0 15px 30px rgba(20, 184, 166, 0.8)) brightness(1.1); }

.badge-galactic { 
    animation: galactic-float 3s infinite ease-in-out;
}
.badge-galactic img {
    filter: drop-shadow(0 0 45px rgba(219, 39, 119, 1)) drop-shadow(0 0 10px rgba(255, 255, 255, 0.5));
}

@keyframes galactic-float {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-15px) rotate(2deg); }
}

/* Tooltip Premium */
.badge-tooltip {
    position: absolute;
    bottom: 115%;
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    background: #0f172a;
    color: white;
    padding: 8px 16px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 900;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.1);
    z-index: 100;
    box-shadow: 0 15px 30px rgba(0,0,0,0.8);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.group:hover .badge-tooltip {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}