.participants-banner {
    background: url('../assets/background.png');
    padding: var(--extra-large) var(--extra-large);
    color: var(--c-text-light);
    box-shadow: var(--shadow-soft);
    h1, h2 { 
    font-size: var(--extra-large); 
    font-weight: 700;
    margin: var(--small) var(--small); 
    }
}

.participants-tag {
    background: var(--c-accent);
    color: var(--c-dark-teal);
    padding: var(--small) var(--medium);
    font-weight: 600;
    border-radius: var(--small);
    display: inline-block;
}

.participants-stats {
    display: flex;
    gap: var(--extra-large);
    margin-top: var(--medium);
}

.participants-stats div p:first-child { 
    font-size: var(--large); 
    font-weight: 800; 
    color: var(--c-accent);
}

.participants-top, .participants-global{
    padding: var(--large) var(--extra-large);
}

.participants-badge {
    background: var(--c-red);
    color: var(--c-text-light);
    padding: var(--medium) var(--medium);
    border-radius: var(--medium);
    display: inline-block;
    margin-bottom: var(--large);
    box-shadow: var(--shadow-soft);
}

.participants-podium {
    display: flex;
    gap: var(--large);
    justify-content: center;
}

.participants-card {
    border-radius: var(--small);
    padding: var(--medium);
    width: 320px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--small);
    text-align: center;
    img { 
    width: var(--huge); 
    height: var(--huge); 
    border-radius: 50%; 
    object-fit: cover; 
    }
    p { 
    color: var(--c-dark-teal); 
    font-weight: 700; 
    }
}

.participants-rank-number { 
    font-size: var(--extra-large);
    font-weight: 900; 
}

.participants-card-0 {
    order: 2; 
    background: linear-gradient(to top, var(--c-var-gold), var(--c-gold));
    box-shadow: var(--shadow-soft);
}

.participants-card-1 { 
    order: 1;
    background: linear-gradient(to top, var(--c-var-silver), var(--c-silver));
    align-self: flex-start; 
    box-shadow: var(--shadow-soft);
}

.participants-card-2 { 
    order: 3; 
    background: linear-gradient(to top, var(--c-var-bronze), var(--c-bronze));
    box-shadow: var(--shadow-soft);
}

.participants-filters {
    display: flex;
    gap: var(--small);
    margin-bottom: var(--medium);
    align-items: center;
    input {
    flex: 1;
    padding: var(--small) var(--medium);
    border: 3px solid var(--c-dark-teal);
    border-radius: var(--small);
    }
    button {
    background: var(--c-dark-teal);
    color: var(--c-text-light);
    border: none;
    border-radius: var(--small);
    padding: var(--medium) var(--extra-large);
    font-size: var(--medium);
    cursor: pointer;
    }
}

.participants-list {
    display: flex;
    flex-direction: column;
    gap: var(--small);
    background: var(--c-pinky);
    border: none;
    border-radius: var(--small);
    padding: var(--small);
    box-shadow: var(--shadow-soft);
}

.participants-row {
    display: flex;
    align-items: center;
    gap: var(--medium);
    padding: var(--small) var(--medium);
    border: 1px solid rgba(4, 38, 42, 0.15);
    border-radius: var(--small);
    background: var(--c-bg);
    img {
    width: var(--extra-large);
    height: var(--extra-large);
    border-radius: 50%;
    object-fit: cover;
    }
    p { 
    margin: 0; 
    }
}

.participants-row:hover { 
    background: rgba(4, 38, 42, 0.04); 
}

.row-rank {
    color: var(--c-primary);
    font-weight: 700;
    min-width: var(--large);
}

.row-name {
    flex: 1;
    font-weight: 600;
}

.row-points {
    color: var(--c-primary-light);
    font-weight: 700;
}

.participants-pagination {
    display: flex;
    gap: var(--small);
    justify-content: center;
    margin-top: var(--large);
    a {
    background: var(--c-bg);
    border: 1px solid rgba(4, 38, 42, 0.15);
    color: var(--c-text-dark);
    padding: 6px var(--medium);
    border-radius: var(--small);
    text-decoration: none;
    }
}

.participants-pagination a:hover,.participants-pagination a.active {
    background: var(--c-dark-teal);
    color: var(--c-text-light);
    border-color: var(--c-dark-teal);
}

@media (max-width: 1000px) {
    .participants-podium { 
    justify-content: center; 
    flex-direction: column; 
    }
    .participants-card { 
    width: 100%;
    }
}