@layer components {
    .community-leaderboard {
        --leaderboard-medal-gold: rgb(174 137 80);
        --leaderboard-medal-gold-text: rgb(20 14 4);
        --leaderboard-medal-silver: rgb(192 196 204);
        --leaderboard-medal-bronze: rgb(181 107 57);

        grid-column: 1 / -1;
        display: grid;
        gap: var(--space-24);
        padding-inline: var(--space-16);
        margin-block-end: var(--space-40);
    }

    .community-leaderboard__hero {
        display: grid;
        gap: var(--space-10);
        max-width: 48rem;
    }

    .community-leaderboard__eyebrow {
        width: fit-content;
        padding: var(--space-6) var(--space-10);
        border-radius: var(--radius-round);
        background: color-mix(in oklch, var(--color-brand-primary) 16%, transparent);
        color: var(--color-brand-primary);
        font-size: var(--font-size-meta);
        font-weight: var(--font-weight-extrabold);
        line-height: var(--leading-none);
        text-transform: uppercase;
    }

    .community-leaderboard__hero h1 {
        margin: 0;
        color: var(--color-text-strong);
        font-size: clamp(var(--text-2xl), 3vw, var(--text-4xl));
        font-weight: var(--font-weight-bold);
        line-height: var(--line-height-title);
    }

    .community-leaderboard__hero p,
    .community-leaderboard__empty {
        margin: 0;
        color: var(--color-text-muted);
        font-size: var(--text-base);
        line-height: var(--leading-relaxed);
    }

    .community-leaderboard__tabs {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-8);
        padding-bottom: var(--space-16);
        border-bottom: 1px solid var(--color-border);
    }

    .community-leaderboard__tab {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: var(--space-40);
        padding: 0 var(--space-14);
        border: 1px solid var(--color-card-border);
        border-radius: var(--radius-round);
        background: var(--color-card-bg);
        color: var(--color-text);
        font-size: var(--text-sm);
        font-weight: var(--font-weight-extrabold);
        line-height: var(--leading-none);
        text-decoration: none;
        transition: border-color .18s ease, background-color .18s ease, color .18s ease;
    }

    .community-leaderboard__tab:hover,
    .community-leaderboard__tab:focus-visible {
        border-color: color-mix(in oklch, var(--color-brand-primary) 54%, var(--color-card-border));
        background: var(--color-card-bg-hover);
        color: var(--color-text-strong);
        outline: none;
    }

    .community-leaderboard__tab--active {
        border-color: color-mix(in oklch, var(--color-brand-primary) 64%, var(--color-card-border));
        background: color-mix(in oklch, var(--color-brand-primary) 18%, var(--color-card-bg));
        color: var(--color-text-strong);
    }

    .community-leaderboard__list {
        display: grid;
        gap: var(--space-10);
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .community-leaderboard__item {
        min-width: 0;
    }

    .community-leaderboard__link {
        display: grid;
        grid-template-columns: 3rem minmax(0, 1fr) auto;
        align-items: center;
        gap: var(--space-14);
        min-width: 0;
        min-height: 5.75rem;
        padding: var(--space-14);
        border: 1px solid var(--color-card-border);
        border-radius: var(--radius-corner);
        background: var(--color-card-bg);
        color: var(--color-text);
        text-decoration: none;
        box-shadow: 0 var(--space-8) var(--space-24) var(--color-shadow-soft);
        transition: border-color .18s ease, background-color .18s ease, box-shadow .18s ease, transform .18s ease;
    }

    .community-leaderboard__link:hover,
    .community-leaderboard__link:focus-visible {
        border-color: color-mix(in oklch, var(--color-brand-primary) 58%, var(--color-card-border));
        background: var(--color-card-bg-hover);
        color: var(--color-text-strong);
        outline: none;
        box-shadow: 0 var(--space-12) var(--space-32) var(--color-shadow-medium);
        transform: translateY(calc(var(--space-2) * -1));
    }

    .community-leaderboard__position {
        display: inline-grid;
        place-items: center;
        width: 3rem;
        height: 3rem;
        border-radius: var(--radius-round);
        background: var(--color-bg-surface-soft);
        color: var(--color-text-strong);
        font-size: var(--text-lg);
        font-weight: var(--font-weight-extrabold);
        line-height: var(--leading-none);
    }

    .community-leaderboard__item--rank-1 .community-leaderboard__position {
        background: var(--leaderboard-medal-gold);
        color: var(--leaderboard-medal-gold-text);
    }

    .community-leaderboard__item--rank-2 .community-leaderboard__position {
        background: var(--leaderboard-medal-silver);
        color: var(--color-text-strong);
    }

    .community-leaderboard__item--rank-3 .community-leaderboard__position {
        background: var(--leaderboard-medal-bronze);
        color: var(--color-white);
    }

    .community-leaderboard__identity {
        display: grid;
        grid-template-columns: 4rem minmax(0, 1fr);
        align-items: center;
        gap: var(--space-12);
        min-width: 0;
    }

    .community-leaderboard__avatar {
        display: grid;
        place-items: center;
        width: 4rem;
        height: 4rem;
        overflow: hidden;
        border: var(--space-2) solid var(--color-brand-primary);
        border-radius: var(--radius-round);
        background: var(--color-brand-primary);
    }

    .community-leaderboard__avatar-image {
        width: 100%;
        height: 100%;
        border-radius: inherit;
        object-fit: cover;
    }

    .community-leaderboard__user,
    .community-leaderboard__name-row {
        min-width: 0;
    }

    .community-leaderboard__user {
        display: grid;
        gap: var(--space-4);
    }

    .community-leaderboard__name-row {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: var(--space-8);
    }

    .community-leaderboard__name {
        overflow-wrap: anywhere;
        color: var(--color-text-strong);
        font-size: var(--text-lg);
        line-height: var(--line-height-title);
    }

    .community-leaderboard__rank {
        overflow-wrap: anywhere;
        color: var(--color-text-muted);
        font-size: var(--text-sm);
        font-weight: var(--font-weight-semibold);
        line-height: var(--leading-normal);
    }

    .community-leaderboard__score {
        display: grid;
        justify-items: end;
        gap: var(--space-2);
        min-width: 6.5rem;
        color: var(--color-text-strong);
    }

    .community-leaderboard__score-value {
        font-size: var(--text-xl);
        font-weight: var(--font-weight-extrabold);
        line-height: var(--leading-none);
    }

    .community-leaderboard__score-label {
        color: var(--color-text-muted);
        font-size: var(--font-size-meta);
        font-weight: var(--font-weight-semibold);
        line-height: var(--leading-none);
        text-transform: uppercase;
    }

    .community-leaderboard__stats {
        grid-column: 2 / -1;
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-8);
    }

    .community-leaderboard__stat {
        display: inline-flex;
        align-items: center;
        gap: var(--space-6);
        min-height: 1.875rem;
        padding: 0 var(--space-10);
        border: 1px solid var(--color-card-border);
        border-radius: var(--radius-round);
        background: var(--color-bg-surface-soft);
        color: var(--color-text-muted);
        font-size: var(--text-sm);
        font-weight: var(--font-weight-bold);
        line-height: var(--leading-none);
    }

    .community-leaderboard__stat-icon {
        position: static;
        display: block;
        width: var(--space-14);
        height: var(--space-14);
        fill: currentColor;
    }

    @media (max-width: 760px) {
        .community-leaderboard__link {
            grid-template-columns: 2.5rem minmax(0, 1fr);
            gap: var(--space-12);
            padding: var(--space-12);
        }

        .community-leaderboard__position {
            width: 2.5rem;
            height: 2.5rem;
            font-size: var(--text-base);
        }

        .community-leaderboard__identity {
            grid-template-columns: 3.5rem minmax(0, 1fr);
        }

        .community-leaderboard__avatar {
            width: 3.5rem;
            height: 3.5rem;
        }

        .community-leaderboard__score {
            grid-column: 2;
            justify-items: start;
            min-width: 0;
        }

        .community-leaderboard__stats {
            grid-column: 1 / -1;
        }
    }
}