.badges {
    justify-content: center;
    flex-wrap: wrap;
}

.badge {
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 14px;
    width: 20px;
    letter-spacing: 0.5px;
    transition: transform 0.2s;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.badge:hover {
    transform: translateY(-2px);
}

.badge-icon {
    font-size: 18px;
}

/* Top 10 - Dark Violet */
.badge-top10 {
    color: #fff;
    box-shadow: 0 4px 20px rgba(109,40,217,0.4), 0 0 40px rgba(109,40,217,0.2);
}

/* Top 100 - Medium Violet */
.badge-top100 {
    color: #fff;
    box-shadow: 0 4px 16px rgba(139,92,246,0.3), 0 0 30px rgba(139,92,246,0.15);
}

/* Top 1000 - Light Violet */
.badge-top1000 {
    color: #fff;
    box-shadow: 0 4px 12px rgba(168,85,247,0.25), 0 0 20px rgba(168,85,247,0.1);
}

/* Top 10000 - Pale Violet */
.badge-top10000 {
    color: #fff;
    box-shadow: 0 4px 8px rgba(192,132,252,0.2);
}

/* Alternative minimal style */
.badges-minimal {
    margin-top: 80px;
}

.badge-minimal {
    border: 2px solid;
    padding: 4px 18px;
    width: 120px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.5px;
    transition: all 0.2s;
    cursor: pointer;
    text-align: center;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.badge-minimal:hover {
    transform: translateY(-2px);
    filter: brightness(1.2);
}

.badge-10 {
    border: 2px solid #6D28D9;
    color: #6D28D9;
    box-shadow: 0 0 20px rgba(109,40,217,0.4);
}

.badge-50 {
    border: 2px solid #7C3AED;
    color: #7C3AED;
    box-shadow: 0 0 18px rgba(124,58,237,0.35);
}

.badge-100 {
    border: 2px solid #8B5CF6;
    color: #8B5CF6;
    box-shadow: 0 0 16px rgba(139,92,246,0.3);
}

.badge-500 {
    border: 2px solid #A855F7;
    color: #A855F7;
    box-shadow: 0 0 14px rgba(168,85,247,0.25);
}

.badge-1000 {
    border: 2px solid #C084FC;
    color: #C084FC;
    box-shadow: 0 0 12px rgba(192,132,252,0.2);
}

.badge-2000 {
    border: 2px solid #D8B4FE;
    color: #D8B4FE;
    box-shadow: 0 0 10px rgba(216,180,254,0.15);
}

.badge-5000 {
    border: 2px solid #E9D5FF;
    color: #E9D5FF;
    box-shadow: 0 0 8px rgba(233,213,255,0.12);
}

.badge-10000 {
    border: 2px solid #F3E8FF;
    color: #F3E8FF;
    box-shadow: 0 0 6px rgba(243,232,255,0.1);
}

.badge-20000 {
    border: 2px solid #FAF5FF;
    color: #FAF5FF;
    box-shadow: 0 0 4px rgba(250,245,255,0.08);
}

.badge-50000 {
    border: 2px solid #FDFAFF;
    color: #FDFAFF;
    box-shadow: 0 0 3px rgba(253,250,255,0.06);
}

.badge-100000 {
    border: 2px solid #F9FAFB;
    color: #F9FAFB;
    box-shadow: 0 0 2px rgba(249,250,251,0.04);
}

.badge-100000-plus {
    border: 2px solid #F3F4F6;
    color: #F3F4F6;
}