/* Finder standings — compact, attainable competition for the map community. */

.cl-standings-page {
    width: 100%;
    max-width: 880px;
    min-width: 0;
    margin: 0 auto;
    padding-bottom: var(--cl-space-8);
}

.cl-standings-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--cl-space-5);
    margin-bottom: var(--cl-space-5);
}

.cl-standings-header h2 {
    margin: var(--cl-space-1) 0;
}

.cl-standings-header p,
.cl-standings-board-heading p {
    margin: 0;
    color: var(--cl-steel);
    font-size: var(--cl-text-sm);
}

.cl-standings-tabs {
    display: inline-flex;
    flex: 0 0 auto;
    padding: var(--cl-space-1);
    background: var(--cl-concrete-light);
    border-radius: var(--cl-radius-md);
}

.cl-standings-tab {
    padding: var(--cl-space-2) var(--cl-space-4);
    color: var(--cl-steel);
    font-family: var(--cl-font-heading);
    font-size: var(--cl-text-sm);
    font-weight: 700;
    text-decoration: none;
    border-radius: var(--cl-radius);
}

.cl-standings-tab:hover {
    color: var(--cl-charcoal);
}

.cl-standings-tab.is-active {
    color: var(--cl-charcoal);
    background: var(--cl-white);
    box-shadow: var(--cl-shadow-sm);
}

.cl-rivalry-card {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--cl-space-4);
    min-width: 0;
    padding: var(--cl-space-5);
    overflow: hidden;
    color: var(--cl-white);
    background: linear-gradient(115deg, var(--cl-charcoal), #3b342f);
    border-radius: var(--cl-radius-lg);
    box-shadow: var(--cl-shadow-lg);
}

.cl-rivalry-card::after {
    position: absolute;
    top: -70px;
    right: 70px;
    width: 180px;
    height: 180px;
    content: "";
    border: 26px solid rgba(243, 122, 31, 0.09);
    border-radius: 50%;
    pointer-events: none;
}

.cl-rivalry-icon {
    display: grid;
    width: 54px;
    height: 54px;
    place-items: center;
    color: var(--cl-charcoal);
    background: var(--cl-stihl-orange);
    border-radius: 50%;
}

.cl-rivalry-icon svg {
    width: 28px;
    height: 28px;
}

.cl-rivalry-copy {
    min-width: 0;
}

.cl-rivalry-copy .label {
    color: rgba(255, 255, 255, 0.62);
}

.cl-rivalry-copy > strong {
    display: block;
    margin: 2px 0;
    color: var(--cl-white);
    font-family: var(--cl-font-heading);
    font-size: var(--cl-text-3xl);
    line-height: 1.1;
}

.cl-rivalry-copy > strong small {
    margin-left: var(--cl-space-2);
    color: var(--cl-stihl-orange);
    font-size: var(--cl-text-base);
}

.cl-rivalry-copy p {
    margin: 0;
    color: rgba(255, 255, 255, 0.72);
    font-size: var(--cl-text-sm);
}

.cl-rivalry-card > .cl-btn {
    position: relative;
    z-index: 1;
}

.cl-standings-meta {
    display: flex;
    justify-content: space-between;
    gap: var(--cl-space-3);
    margin: var(--cl-space-3) var(--cl-space-1) var(--cl-space-5);
    color: var(--cl-steel);
    font-size: var(--cl-text-xs);
}

.cl-standings-board {
    padding: 0;
    overflow: hidden;
}

.cl-standings-board-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: var(--cl-space-4);
    padding: var(--cl-space-5);
    border-bottom: var(--cl-border);
}

.cl-standings-board-heading h3 {
    margin-bottom: var(--cl-space-1);
}

.cl-standings-xp-label {
    color: var(--cl-steel);
    font-size: var(--cl-text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.cl-standings-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.cl-standing-row {
    display: grid;
    grid-template-columns: 58px 42px minmax(0, 1fr) 54px 84px;
    align-items: center;
    gap: var(--cl-space-3);
    min-width: 0;
    min-height: 72px;
    padding: var(--cl-space-3) var(--cl-space-5);
    border-bottom: var(--cl-border);
}

.cl-standing-row:last-child {
    border-bottom: 0;
}

.cl-standing-row.is-you {
    background: var(--cl-orange-light);
    box-shadow: inset 3px 0 var(--cl-stihl-orange);
}

.cl-standing-position {
    display: flex;
    align-items: center;
    gap: var(--cl-space-1);
    color: var(--cl-steel);
    font-family: var(--cl-font-heading);
    font-weight: 800;
}

.cl-standing-position.is-first { color: #a87500; }
.cl-standing-position.is-second { color: #65717b; }
.cl-standing-position.is-third { color: #a45f32; }

.cl-standing-medal {
    font-size: var(--cl-text-base);
}

.cl-standing-avatar {
    display: grid;
    width: 42px;
    height: 42px;
    overflow: hidden;
    place-items: center;
    color: var(--cl-white);
    font-family: var(--cl-font-heading);
    font-weight: 800;
    background: var(--cl-charcoal);
    border-radius: 50%;
}

.cl-standing-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cl-standing-person {
    min-width: 0;
}

.cl-standing-person strong,
.cl-standing-person small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cl-standing-person strong {
    color: var(--cl-charcoal);
}

.cl-standing-person strong span {
    display: inline-block;
    margin-left: var(--cl-space-1);
    padding: 1px 6px;
    color: var(--cl-orange-dark);
    font-size: var(--cl-text-xs);
    background: rgba(255, 255, 255, 0.65);
    border-radius: 999px;
}

.cl-standing-person small {
    color: var(--cl-steel);
    font-size: var(--cl-text-xs);
}

.cl-standing-movement {
    color: var(--cl-ash);
    font-size: var(--cl-text-xs);
    font-weight: 700;
    text-align: center;
}

.cl-standing-movement.is-up { color: var(--cl-success); }
.cl-standing-movement.is-down { color: var(--cl-danger); }
.cl-standing-movement.is-new { color: var(--cl-orange-dark); }

.cl-standing-score {
    color: var(--cl-charcoal);
    font-family: var(--cl-font-heading);
    font-size: var(--cl-text-xl);
    font-weight: 800;
    text-align: right;
}

.cl-standing-score span {
    color: var(--cl-stihl-orange);
    font-size: var(--cl-text-xs);
}

.cl-standing-divider {
    position: relative;
    padding: var(--cl-space-3) var(--cl-space-5);
    color: var(--cl-steel);
    font-size: var(--cl-text-xs);
    font-weight: 700;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    background: var(--cl-concrete-light);
}

.cl-standings-empty {
    padding: var(--cl-space-10) var(--cl-space-5);
    text-align: center;
}

.cl-standings-empty-mark {
    display: grid;
    width: 54px;
    height: 54px;
    margin: 0 auto var(--cl-space-3);
    place-items: center;
    color: var(--cl-white);
    font-family: var(--cl-font-heading);
    font-size: var(--cl-text-2xl);
    font-weight: 800;
    background: var(--cl-stihl-orange);
    border: 5px solid var(--cl-orange-light);
    border-radius: 50%;
}

.cl-standings-empty p {
    margin: 0 0 var(--cl-space-4);
    color: var(--cl-steel);
}

.cl-standings-fairness {
    max-width: 660px;
    margin: var(--cl-space-4) auto 0;
    color: var(--cl-steel);
    font-size: var(--cl-text-xs);
    text-align: center;
}

.cl-standings-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--cl-space-3);
    min-height: 180px;
    color: var(--cl-steel);
}

.cl-account-rivalry-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--cl-space-4);
    margin-top: var(--cl-space-4);
    padding: var(--cl-space-3) var(--cl-space-4);
    color: var(--cl-white);
    text-decoration: none;
    background: var(--cl-charcoal);
    border-radius: var(--cl-radius-md);
}

.cl-account-rivalry-link:hover {
    background: var(--cl-charcoal-light);
}

.cl-account-rivalry-link strong,
.cl-account-rivalry-link span {
    display: block;
}

.cl-account-rivalry-link strong {
    font-family: var(--cl-font-heading);
    font-size: var(--cl-text-lg);
}

.cl-account-rivalry-link span {
    color: rgba(255, 255, 255, 0.7);
    font-size: var(--cl-text-xs);
}

.cl-account-rivalry-link > b {
    flex: 0 0 auto;
    color: var(--cl-stihl-orange);
    font-size: var(--cl-text-xl);
}

@media (max-width: 640px) {
    .cl-standings-header {
        align-items: stretch;
        flex-direction: column;
        gap: var(--cl-space-4);
    }

    .cl-standings-tabs {
        align-self: stretch;
    }

    .cl-standings-tab {
        flex: 1;
        text-align: center;
    }

    .cl-rivalry-card {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .cl-rivalry-card > .cl-btn {
        grid-column: 1 / -1;
        width: 100%;
    }

    .cl-standing-row {
        grid-template-columns: 42px 38px minmax(0, 1fr) 68px;
        gap: var(--cl-space-2);
        padding: var(--cl-space-3);
    }

    .cl-standing-medal {
        display: none;
    }

    .cl-standing-avatar {
        width: 38px;
        height: 38px;
    }

    .cl-standing-movement {
        display: none;
    }

    .cl-standing-score {
        font-size: var(--cl-text-lg);
    }

    .cl-standings-xp-label,
    .cl-standing-person small {
        display: none;
    }

    .cl-account-rivalry-link {
        align-items: flex-start;
    }
}