/* ==========================================================================
   Perfect Game — Stats Leaderboard (Stats/Leaderboard.aspx).
   Only the leaderboard page. Shared pieces live in Stats.Shared.css.
   ========================================================================== */

.lb {
    font-family: var(--lb-body);
    color: var(--lb-dark);
    background: var(--lb-bg);
}    .lb *,
    .lb *::before,
    .lb *::after {
        box-sizing: border-box;
    }    .lb a {
        color: var(--lb-green);
        text-decoration: none;
    }        .lb a:hover {
            color: var(--lb-green-dk);
            text-decoration: underline;
        }    .lb ::-webkit-scrollbar {
        height: 10px;
        width: 10px;
    }    .lb ::-webkit-scrollbar-thumb {
        background: var(--lb-input);
        border-radius: 6px;
    }@keyframes lbFade {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}/* --------------------------------------------------------------------------
   Masthead
   -------------------------------------------------------------------------- */

.lb-masthead {
    background: var(--lb-dark);
    background-image: radial-gradient(ellipse at 12% 0%, rgba(64, 168, 76, 0.20) 0%, transparent 58%), radial-gradient(ellipse at 88% 120%, rgba(64, 168, 76, 0.10) 0%, transparent 60%);
    border-bottom: 4px solid var(--lb-green);
}.lb-masthead-inner {
    max-width: 1440px;
    margin: 0 auto;
    padding: 30px 22px 26px;
    display: flex;
    flex-wrap: wrap;
    gap: 26px;
    align-items: flex-end;
    justify-content: space-between;
}.lb-title {
    font-family: var(--lb-head);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: #fff;
    font-size: 40px;
    font-weight: 700;
    line-height: 1.04;
    margin: 0;
    min-width: 280px;
}.lb-masthead-controls {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}.lb-sport-group {
    display: flex;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    padding: 3px;
    gap: 3px;
}.lb-sport-btn {
    font-family: var(--lb-head);
    font-size: 13px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 9px 18px;
    min-height: 38px;
    border: 0;
    border-radius: 6px;
    cursor: pointer;
    transition: all .18s;
    background: transparent;
    color: rgba(255, 255, 255, 0.7);
}    .lb-sport-btn.is-on {
        background: var(--lb-green);
        color: #fff;
    }.lb-dark-select {
    font-family: var(--lb-body);
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 8px;
    padding: 10px 12px;
    min-height: 44px;
}    .lb-dark-select option {
        color: var(--lb-dark);
    }.lb-info-dot {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.28);
    color: rgba(255, 255, 255, 0.6);
    font-size: 12px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: help;
}/* --------------------------------------------------------------------------
   Shell
   -------------------------------------------------------------------------- */

.lb-shell {
    display: flex;
    gap: 0;
    align-items: stretch;
}.lb-board {
    flex: 1 1 0;
    min-width: 0;
    padding: 18px 22px 80px;
    background: var(--lb-bg);
}.lb-scrim {
    position: fixed;
    inset: 0;
    background: rgba(56, 56, 56, 0.42);
    z-index: 90;
    display: none;
}/* --------------------------------------------------------------------------
   Rail
   -------------------------------------------------------------------------- */

.lb-rail {
    flex: 0 0 25%;
    width: 25%;
    min-width: 270px;
    max-width: 420px;
    position: sticky;
    top: var(--pg-stats-head-h);
    z-index: 20;
    height: calc(100vh - var(--pg-stats-head-h));
    background: #fff;
    border-right: 1px solid var(--lb-line);
    display: flex;
    flex-direction: column;
}.lb-rail-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    background: var(--lb-dark);
    border-left: 4px solid var(--lb-green);
}    .lb-rail-head h2 {
        font-family: var(--lb-head);
        font-size: 14px;
        font-weight: 700;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: #fff;
        margin: 0;
    }    .lb-rail-head .lb-spacer {
        flex: 1;
    }.lb-rail-close {
    width: 34px;
    height: 34px;
    border-radius: var(--lb-r);
    border: 1px solid rgba(255, 255, 255, 0.22);
    background: transparent;
    color: #fff;
    font-size: 17px;
    line-height: 1;
    cursor: pointer;
    display: none;
}.lb-rail-body {
    flex: 1;
    overflow-y: auto;
    padding: 14px;
}.lb-rail-apply {
    display: none;
    padding: 11px 16px;
    background: var(--lb-bg);
    border-bottom: 1px solid var(--lb-line);
    justify-content: flex-end;
}/* --------------------------------------------------------------------------
   Tab chrome — 3px underline, green rail on the active tab
   -------------------------------------------------------------------------- */

.lb-tabs {
    display: flex;
    gap: 0;
    border-bottom: 3px solid var(--lb-line);
    align-items: flex-end;
}.lb-tab {
    font-family: var(--lb-head);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    cursor: pointer;
    border: 1px solid var(--lb-line);
    border-bottom: 3px solid transparent;
    border-radius: var(--lb-r) var(--lb-r) 0 0;
    margin-bottom: -3px;
    margin-left: -1px;
    background: var(--lb-bg);
    color: var(--lb-mute);
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 44px;
}    .lb-tab.is-on {
        background: var(--lb-dark);
        color: #fff;
        border-bottom-color: var(--lb-green);
    }.lb-tabs-rail .lb-tab {
    font-size: 11.5px;
    padding: 11px 13px;
}.lb-tabs-board .lb-tab {
    font-size: 13px;
    letter-spacing: 0.06em;
    padding: 12px 18px;
}.lb-tab-badge {
    font-size: 9.5px;
    letter-spacing: 0.08em;
    color: var(--lb-mute);
}.lb-tab.is-on .lb-tab-badge {
    color: rgba(255, 255, 255, 0.85);
}.lb-pane {
    display: none;
    margin-top: 14px;
}    .lb-pane.is-on {
        display: block;
    }/* --------------------------------------------------------------------------
   Qualifier
   -------------------------------------------------------------------------- */

.lb-qual {
    background: var(--lb-bg);
    border: 1px solid var(--lb-line);
    border-radius: var(--lb-r);
    padding: 12px;
}.lb-qual-label,
.lb-field label {
    display: block;
    font-family: var(--lb-head);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--lb-mute);
}.lb-qual-read {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-top: 6px;
}.lb-qual-value {
    font-family: var(--lb-head);
    font-size: 26px;
    font-weight: 700;
    line-height: 1;
    color: var(--lb-dark);
    font-variant-numeric: tabular-nums;
}.lb-qual-unit {
    font-size: 11.5px;
    color: var(--lb-quiet);
}.lb-qual-max {
    font-size: 11px;
    color: var(--lb-faint);
}.lb-qual input[type=range] {
    width: 100%;
    margin: 10px 0 0;
    height: 28px;
    accent-color: var(--lb-green);
    cursor: pointer;
}.lb-qual-ticks {
    display: flex;
    justify-content: space-between;
    font-size: 10.5px;
    color: var(--lb-faint);
}.lb-qual-help {
    font-size: 12px;
    color: var(--lb-quiet);
    line-height: 1.45;
    margin-top: 6px;
}/* --------------------------------------------------------------------------
   Filter fields
   -------------------------------------------------------------------------- */

.lb-fields {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 14px;
}.lb-field label {
    letter-spacing: 0.1em;
    margin-bottom: 6px;
}.lb-field select,
.lb-field input[type=text] {
    width: 100%;
    font-family: var(--lb-body);
    font-size: 14px;
    padding: 11px 12px;
    min-height: 44px;
    border-radius: var(--lb-r);
    cursor: pointer;
    border: 1px solid var(--lb-input);
    background: #fff;
    color: var(--lb-dark);
}    .lb-field select.is-set {
        border-color: var(--lb-green);
        background: rgba(64, 168, 76, 0.10);
        color: var(--lb-green-dk);
    }.lb-field .lb-hint {
    font-size: 11.5px;
    color: var(--lb-faint);
    margin-top: 5px;
}/* --------------------------------------------------------------------------
   Saved and Popular cards
   -------------------------------------------------------------------------- */

.lb-view-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 12px;
}.lb-view-card {
    border: 1px solid var(--lb-line);
    border-radius: var(--lb-r);
    background: #fff;
    padding: 12px 13px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}    .lb-view-card:hover {
        border-color: var(--lb-green);
        background: #fbfcfb;
    }.lb-view-title {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--lb-dark);
    line-height: 1.25;
}.lb-view-desc {
    font-size: 11.5px;
    color: var(--lb-quiet);
    margin-top: 3px;
    line-height: 1.4;
}.lb-view-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 9px;
    padding-top: 8px;
    border-top: 1px solid #e2e2e2;
}.lb-chip-sm {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.03em;
    color: var(--lb-mute);
    background: var(--lb-panel);
    border: 1px solid #e2e2e2;
    border-radius: 12px;
    padding: 3px 8px;
    white-space: nowrap;
}
/* Decorative. It covers the lower half of the card, and the like button lives there -
   wanting a view you cannot open yet is the signal worth collecting. */
.lb-view-lock {
    pointer-events: none;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 7px;
    background: rgba(255, 255, 255, 0.88);
    font-family: var(--lb-head);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--lb-dark);
}.lb-view-card.is-locked {
    border-color: #e2e2e2;
}    .lb-view-card.is-locked .lb-view-title,
    .lb-view-card.is-locked .lb-view-desc,
    .lb-view-card.is-locked .lb-view-tags {
        filter: blur(4px);
    }/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.lb-btn {
    font-family: var(--lb-head);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 12px 18px;
    min-height: 44px;
    border-radius: var(--lb-r);
    cursor: pointer;
    border: 1px solid var(--lb-input);
    background: #fff;
    color: var(--lb-dark);
}    .lb-btn:hover {
        border-color: var(--lb-green);
        color: var(--lb-green-dk);
    }.lb-btn-primary {
    border: 0;
    background: var(--lb-green);
    color: #fff;
}    .lb-btn-primary:hover {
        background: var(--lb-green-dk);
        color: #fff;
    }.lb-btn-dark {
    border: 0;
    background: var(--lb-dark);
    color: #fff;
}.lb-btn-sm {
    font-size: 11px;
    padding: 10px 13px;
    min-height: 40px;
}.lb-btn-link {
    border: 0;
    background: none;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    color: var(--lb-mute);
    text-decoration: underline;
    padding: 6px;
}    .lb-btn-link.on-dark {
        color: rgba(255, 255, 255, 0.75);
        font-size: 12.5px;
    }.lb-btn-quiet {
    border: 0;
    background: none;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    color: var(--lb-mute);
    padding: 6px 2px;
}    .lb-btn-quiet:hover {
        color: var(--lb-green-dk);
    }/* --------------------------------------------------------------------------
   Section heading — #f0f0f0 bar with a green left rule
   -------------------------------------------------------------------------- */

.lb-section {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin-top: 22px;
    background: var(--lb-panel);
    border-left: 3px solid var(--lb-green);
    padding: 8px 12px;
}    .lb-section h2 {
        font-family: var(--lb-head);
        text-transform: uppercase;
        letter-spacing: 0.03em;
        font-size: 15px;
        font-weight: 700;
        color: var(--lb-dark);
        margin: 0;
    }.lb-section-note {
    font-size: 13px;
    color: var(--lb-quiet);
}/* --------------------------------------------------------------------------
   Leader cards
   -------------------------------------------------------------------------- */

.lb-leaders {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(244px, 1fr));
    gap: 14px;
    margin-top: 12px;
}.lb-leader {
    background: #fff;
    border: 1px solid var(--lb-line);
    border-radius: var(--lb-r);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.07);
    position: relative;
    overflow: hidden;
    animation: lbFade .4s ease both;
    transition: box-shadow .18s, transform .18s;
}    .lb-leader:hover {
        box-shadow: 0 10px 26px rgba(0, 0, 0, 0.16);
        transform: translateY(-3px);
    }.lb-leader-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    background: var(--lb-dark);
    border-left: 4px solid var(--lb-green);
    padding: 9px 12px;
}    .lb-leader-head .lb-leader-cat {
        font-family: var(--lb-head);
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: #fff;
    }.lb-leader-tag {
    font-family: var(--lb-head);
    font-size: 9.5px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 2px 7px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.14);
    color: rgba(255, 255, 255, 0.82);
}.lb-leader-main {
    padding: 16px 14px 14px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
}.lb-leader-value {
    font-family: var(--lb-head);
    font-size: 46px;
    font-weight: 700;
    line-height: 0.9;
    letter-spacing: -0.02em;
    color: var(--lb-green);
    font-variant-numeric: tabular-nums;
}.lb-leader-who {
    flex: 1;
    min-width: 0;
    padding-top: 3px;
}.lb-leader-eyebrow {
    display: block;
    font-family: var(--lb-head);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--lb-faint);
}.lb-leader-name {
    display: block;
    font-size: 15.5px;
    font-weight: 700;
    color: var(--lb-dark);
    line-height: 1.15;
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}.lb-leader-meta {
    padding: 0 14px 12px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: baseline;
    font-size: 11.5px;
    color: var(--lb-quiet);
}.lb-leader-qual {
    font-size: 11px;
    font-weight: 600;
    color: var(--lb-mute);
    background: var(--lb-panel);
    border-radius: 10px;
    padding: 2px 7px;
}.lb-leader-runners {
    background: var(--lb-bg);
    border-top: 1px solid #e2e2e2;
    padding: 8px 14px 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}.lb-runner {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    color: var(--lb-mute);
}.lb-runner-pos {
    font-family: var(--lb-head);
    color: var(--lb-faint);
    width: 14px;
}.lb-runner-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}.lb-runner-val {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    color: var(--lb-dark);
}.lb-leader-min {
    font-size: 10px;
    color: var(--lb-faint);
    margin-top: 2px;
}/* --------------------------------------------------------------------------
   Toolbar
   -------------------------------------------------------------------------- */

.lb-toolbar-wrap {
    position: sticky;
    top: var(--pg-stats-head-h);
    z-index: 30;
    background: var(--lb-bg);
    padding: 16px 0 10px;
    margin-top: 22px;
}.lb-toolbar {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.07);
    border-radius: var(--lb-r);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}.lb-toolbar-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    padding: 12px 14px;
}    .lb-toolbar-row.is-top {
        border-bottom: 1px solid #e2e2e2;
    }.lb-toolbar-sep {
    width: 1px;
    height: 26px;
    background: var(--lb-line);
}.lb-spacer {
    flex: 1;
}.lb-aud-group {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
}.lb-aud {
    font-family: var(--lb-body);
    font-size: 13px;
    font-weight: 600;
    padding: 9px 13px;
    min-height: 44px;
    border-radius: 40px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: 1px solid var(--lb-input);
    background: var(--lb-bg);
    color: var(--lb-mute);
}    .lb-aud.is-on {
        background: var(--lb-dark);
        border-color: var(--lb-dark);
        color: #fff;
    }.lb-aud-count {
    font-family: var(--lb-head);
    font-size: 11px;
    padding: 1px 6px;
    border-radius: 20px;
    background: var(--lb-line-soft);
    color: var(--lb-mute);
}.lb-aud.is-on .lb-aud-count {
    background: rgba(255, 255, 255, 0.22);
    color: #fff;
}.lb-search {
    font-family: var(--lb-body);
    font-size: 14px;
    padding: 11px 14px;
    min-height: 44px;
    width: 220px;
    border: 1px solid var(--lb-input);
    border-radius: 8px;
    background: var(--lb-bg);
    color: var(--lb-dark);
}    .lb-search:focus {
        border-color: var(--lb-green);
        outline: none;
    }.lb-sort-select {
    font-family: var(--lb-body);
    font-size: 13.5px;
    font-weight: 600;
    padding: 10px 12px;
    min-height: 44px;
    border-radius: 8px;
    cursor: pointer;
    border: 1px solid var(--lb-input);
    background: #fff;
    color: var(--lb-dark);
    display: none;
}.lb-rail-toggle {
    font-family: var(--lb-body);
    font-size: 13.5px;
    font-weight: 600;
    padding: 10px 15px;
    min-height: 44px;
    border-radius: var(--lb-r);
    cursor: pointer;
    display: none;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--lb-input);
    background: #fff;
    color: var(--lb-dark);
}.lb-rail-toggle-count {
    font-family: var(--lb-head);
    font-size: 11px;
    padding: 1px 7px;
    border-radius: 20px;
    background: var(--lb-panel);
    color: var(--lb-mute);
}    .lb-rail-toggle-count.is-set {
        background: var(--lb-green);
        color: #fff;
    }.lb-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 8px 8px 12px;
    min-height: 38px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    border: 1px solid rgba(64, 168, 76, 0.35);
    background: rgba(64, 168, 76, 0.10);
    color: var(--lb-green-dk);
}    .lb-chip button {
        border: 0;
        background: none;
        cursor: pointer;
        color: var(--lb-green-dk);
        font-size: 15px;
        line-height: 1;
        padding: 0 2px;
    }/* --------------------------------------------------------------------------
   Upgrade panel
   -------------------------------------------------------------------------- */

.lb-upgrade {
    background: var(--lb-dark);
    border-radius: var(--lb-r);
    padding: 22px 24px;
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}.lb-upgrade-head {
    font-family: var(--lb-head);
    font-size: 19px;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #fff;
}.lb-upgrade-body {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.6);
    margin-top: 5px;
    max-width: 620px;
    line-height: 1.55;
}.lb-cta {
    font-family: var(--lb-head);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    background: var(--lb-green);
    color: #fff;
    padding: 13px 26px;
    border-radius: 7px;
}    .lb-cta:hover {
        background: var(--lb-green-dk);
        color: #fff;
        text-decoration: none;
    }/*  .lb a sets the link colour for the whole page, and a descendant selector outranks a single
    class, so the button has to say it again with the element in the selector. Without this the
    CTA renders green text on a green fill.  */
.lb a.lb-cta,
.lb a.lb-cta:hover,
.lb a.lb-cta:visited {
    color: #fff;
}.lb-cta-sm {
    font-size: 12px;
    letter-spacing: 0.07em;
    padding: 11px 17px;
}/* --------------------------------------------------------------------------
   Compare
   -------------------------------------------------------------------------- */

.lb-compare {
    background: #fff;
    border: 1px solid rgba(64, 168, 76, 0.35);
    border-radius: var(--lb-r);
    padding: 10px 12px 12px;
    margin-bottom: 12px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}.lb-compare-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}.lb-compare-count {
    font-family: var(--lb-head);
    font-size: 12px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--lb-green-dk);
}.lb-compare-hint {
    font-size: 12.5px;
    color: var(--lb-mute);
}.lb-h2h {
    max-width: 470px;
    margin: 10px auto 0;
    border: 1px solid var(--lb-line);
    border-radius: var(--lb-r);
    overflow: hidden;
}.lb-h2h-head {
    display: flex;
    align-items: stretch;
}.lb-h2h-side {
    flex: 1 1 0;
    min-width: 0;
    padding: 9px 8px 8px;
    text-align: center;
}.lb-h2h-vs {
    flex: 0 0 74px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--lb-bg);
    border-left: 1px solid var(--lb-line-soft);
    border-right: 1px solid var(--lb-line-soft);
    padding: 6px;
    font-family: var(--lb-head);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--lb-faint);
}.lb-avatar {
    display: block;
    width: 40px;
    height: 40px;
    margin: 0 auto;
    border-radius: 50%;
    background: var(--lb-line-soft) center/cover no-repeat;
    border: 1px solid var(--lb-line);
}.lb-avatar-sm {
    width: 34px;
    height: 34px;
}.lb-h2h-name {
    display: block;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--lb-dark);
    margin-top: 5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}.lb-h2h-meta {
    display: block;
    font-size: 10.5px;
    color: var(--lb-quiet);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}.lb-h2h-wins {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    color: var(--lb-green-dk);
    margin-top: 2px;
}.lb-h2h-row {
    display: flex;
    align-items: stretch;
    border-top: 1px solid var(--lb-line-soft);
}.lb-h2h-cell {
    flex: 1 1 0;
    text-align: center;
    padding: 4px 8px;
    font-size: 13.5px;
    font-variant-numeric: tabular-nums;
    color: var(--lb-dark);
    font-weight: 500;
}    .lb-h2h-cell.is-win {
        font-weight: 700;
        background: rgba(64, 168, 76, 0.22);
    }.lb-h2h-key {
    flex: 0 0 74px;
    text-align: center;
    padding: 4px 2px;
    font-family: var(--lb-head);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--lb-mute);
    background: var(--lb-bg);
}.lb-cmp-grid-wrap {
    overflow-x: auto;
    margin-top: 12px;
    border: 1px solid var(--lb-line);
    border-radius: var(--lb-r);
}.lb-cmp-grid {
    display: flex;
    min-width: 520px;
}.lb-cmp-labels {
    flex: 0 0 86px;
    display: flex;
    flex-direction: column;
    background: var(--lb-bg);
}    .lb-cmp-labels .lb-cmp-spacer {
        height: 92px;
        border-bottom: 1px solid #e2e2e2;
    }.lb-cmp-label {
    font-family: var(--lb-head);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--lb-mute);
    padding: 6px 8px;
    border-bottom: 1px solid var(--lb-line-soft);
}.lb-cmp-col {
    flex: 1 1 0;
    min-width: 128px;
    border-left: 1px solid #e2e2e2;
}.lb-cmp-col-head {
    height: 92px;
    border-bottom: 1px solid #e2e2e2;
    padding: 8px;
    text-align: center;
}.lb-cmp-cell {
    padding: 6px 8px;
    border-bottom: 1px solid var(--lb-line-soft);
    font-size: 13.5px;
    font-variant-numeric: tabular-nums;
    text-align: center;
    color: var(--lb-dark);
    font-weight: 500;
}    .lb-cmp-cell.is-win {
        font-weight: 700;
        background: rgba(64, 168, 76, 0.22);
    }/* --------------------------------------------------------------------------
   Table
   -------------------------------------------------------------------------- */

.lb-table-wrap {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.07);
    border-radius: var(--lb-r);
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
}.lb-table-scroll {
    overflow: auto;
    max-height: 72vh;
}.lb-thead {
    display: flex;
    align-items: stretch;
    background: var(--lb-dark);
    position: sticky;
    top: 0;
    z-index: 4;
}.lb-frozen {
    position: sticky;
    left: 0;
    z-index: 3;
    width: 452px;
    flex: 0 0 452px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 14px;
    border-right: 1px solid var(--lb-line-soft);
    background: #fff;
}.lb-thead .lb-frozen {
    background: var(--lb-dark);
    padding: 0 14px;
    border-right-color: rgba(255, 255, 255, 0.08);
}.lb-th-mini {
    font-family: var(--lb-head);
    font-size: 10.5px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
}.lb-th {
    flex: 0 0 auto;
    border: 0;
    cursor: pointer;
    padding: 13px 8px;
    text-align: right;
    font-family: var(--lb-head);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    white-space: nowrap;
    background: transparent;
    color: rgba(255, 255, 255, 0.72);
}    .lb-th.is-sorted {
        background: rgba(64, 168, 76, 0.22);
        color: #fff;
    }.lb-sticky-sort {
    font-family: var(--lb-head);
    font-size: 10px;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    padding: 5px 8px;
    border-radius: 5px;
    cursor: pointer;
    white-space: nowrap;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.78);
}    .lb-sticky-sort.is-locked {
        color: rgba(255, 255, 255, 0.40);
        cursor: not-allowed;
    }    .lb-sticky-sort.is-sorted {
        background: var(--lb-green);
        border-color: var(--lb-green);
        color: #fff;
    }.lb-row {
    border-bottom: 1px solid var(--lb-line-soft);
    background: #fff;
    border-left: 3px solid transparent;
    transition: background .12s ease;
}.lb-row-main {
    display: flex;
    align-items: stretch;
    cursor: pointer;
}.lb-row:hover {
    border-left-color: var(--lb-green);
    background: #f4f9f5;
    box-shadow: inset 0 0 0 1px rgba(64, 168, 76, 0.18);
}    .lb-row:hover .lb-frozen {
        background: #f4f9f5;
    }.lb-row.is-open {
    border-left-color: var(--lb-green);
    background: rgba(64, 168, 76, 0.06);
}    .lb-row.is-open .lb-frozen {
        background: #eef6ef;
    }.lb-cell {
    flex: 0 0 auto;
    padding: 11px 8px;
    text-align: right;
    font-size: 14.5px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    color: var(--lb-dark);
    font-weight: 500;
}    .lb-cell.is-best {
        color: var(--lb-green);
        font-weight: 700;
    }    .lb-cell.t-90 {
        background: rgba(64, 168, 76, 0.20);
    }    .lb-cell.t-75 {
        background: rgba(64, 168, 76, 0.12);
    }    .lb-cell.t-60 {
        background: rgba(64, 168, 76, 0.06);
    }    .lb-cell.t-lo {
        background: rgba(0, 0, 0, 0.05);
    }.lb-check {
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    border-radius: 5px;
    border: 1.5px solid var(--lb-input);
    background: #fff;
    color: transparent;
    font-size: 13px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}    .lb-check.is-on {
        border-color: var(--lb-green);
        background: var(--lb-green);
        color: #fff;
    }.lb-rank {
    font-family: var(--lb-head);
    font-size: 14px;
    font-weight: 700;
    width: 32px;
    height: 30px;
    flex: 0 0 32px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--lb-panel);
    color: var(--lb-mute);
}    .lb-rank.is-top {
        background: var(--lb-line-soft);
        color: var(--lb-dark);
    }    .lb-rank.is-first {
        background: var(--lb-dark);
        color: #fff;
    }.lb-star {
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid var(--lb-input);
    background: #fff;
    color: var(--lb-faint);
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}    .lb-star.is-on {
        border-color: var(--lb-green);
        background: rgba(64, 168, 76, 0.12);
        color: var(--lb-green);
    }.lb-who {
    min-width: 0;
    flex: 1;
}.lb-who-top {
    display: flex;
    align-items: center;
    gap: 6px;
}.lb-name {
    font-size: 15px;
    font-weight: 700;
    color: var(--lb-dark);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}.lb-badge {
    font-family: var(--lb-head);
    font-size: 9.5px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 2px 6px;
    border-radius: var(--lb-r);
    white-space: nowrap;
    background: rgba(64, 168, 76, 0.12);
    color: var(--lb-green-dk);
}    .lb-badge.is-uncommitted {
        background: #f0f2f0;
        color: var(--lb-mute);
    }.lb-who-sub {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 3px;
    min-width: 0;
}.lb-pill {
    font-family: var(--lb-head);
    font-size: 10px;
    letter-spacing: 0.06em;
    padding: 2px 6px;
    border-radius: var(--lb-r);
    white-space: nowrap;
    background: rgba(64, 168, 76, 0.10);
    color: var(--lb-green-dk);
}    .lb-pill.is-locked {
        background: var(--lb-panel);
        color: var(--lb-faint);
    }.lb-meta {
    font-size: 12px;
    color: var(--lb-mute);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}/*  No blur here on purpose. A locked cell now arrives empty, because the server never sends the
    number, so there is nothing to obscure. Blurring a value the browser already holds is a
    decoration that two clicks in dev tools removes.  */
.lb-table-wrap.is-locked .lb-cell {
    user-select: none;
}/* --------------------------------------------------------------------------
   Expanded row
   -------------------------------------------------------------------------- */

.lb-expand {
    background: var(--lb-bg);
    border-top: 1px solid #e2e2e2;
    padding: 18px 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    align-items: flex-start;
}.lb-expand-actions {
    display: flex;
    gap: 8px;
    margin-top: 14px;
}/* --------------------------------------------------------------------------
   Mobile cards
   -------------------------------------------------------------------------- */

.lb-cards {
    display: none;
    flex-direction: column;
    gap: 10px;
}.lb-card {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.07);
    border-left: 3px solid var(--lb-line);
    border-radius: var(--lb-r);
    overflow: hidden;
}    .lb-card.is-top {
        border-left-color: var(--lb-green);
    }.lb-card-head {
    width: 100%;
    text-align: left;
    border: 0;
    background: none;
    cursor: pointer;
    padding: 13px 14px;
    display: flex;
    gap: 12px;
    align-items: flex-start;
}.lb-card-rank {
    font-family: var(--lb-head);
    font-size: 17px;
    font-weight: 700;
    min-width: 34px;
    height: 34px;
    border-radius: 7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--lb-panel);
    color: var(--lb-mute);
}    .lb-card-rank.is-top {
        background: var(--lb-line-soft);
        color: var(--lb-dark);
    }    .lb-card-rank.is-first {
        background: var(--lb-dark);
        color: #fff;
    }.lb-card-who {
    flex: 1;
    min-width: 0;
}.lb-card-name {
    display: block;
    font-size: 16px;
    font-weight: 700;
    color: var(--lb-dark);
}.lb-card-primary {
    text-align: right;
}.lb-card-primary-val {
    display: block;
    font-family: var(--lb-head);
    font-size: 22px;
    font-weight: 700;
    color: var(--lb-dark);
    font-variant-numeric: tabular-nums;
}.lb-card-primary-key {
    display: block;
    font-family: var(--lb-head);
    font-size: 10.5px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--lb-quiet);
}.lb-card-strip {
    display: flex;
    gap: 0;
    border-top: 1px solid #e2e2e2;
    overflow-x: auto;
}.lb-card-stat {
    flex: 0 0 auto;
    min-width: 68px;
    padding: 9px 6px;
    text-align: center;
    border-right: 1px solid var(--lb-bg);
}.lb-card-stat-key {
    font-family: var(--lb-head);
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--lb-quiet);
}.lb-card-stat-val {
    font-size: 14.5px;
    font-weight: 600;
    color: var(--lb-dark);
    font-variant-numeric: tabular-nums;
    margin-top: 2px;
}/* --------------------------------------------------------------------------
   Footer, empty state, paging
   -------------------------------------------------------------------------- */

.lb-more {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    justify-content: center;
    margin-top: 12px;
}.lb-total {
    font-size: 12.5px;
    color: var(--lb-quiet);
}.lb-empty {
    background: #fff;
    border: 1px dashed var(--lb-input);
    border-radius: var(--lb-r);
    padding: 54px 24px;
    text-align: center;
}.lb-empty-head {
    font-family: var(--lb-head);
    font-size: 19px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--lb-dark);
}.lb-empty-body {
    font-size: 14px;
    color: var(--lb-mute);
    margin: 8px auto 0;
    max-width: 560px;
    line-height: 1.55;
}.lb-foot {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px;
    padding: 16px 18px;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: var(--lb-r);
}.lb-foot-text {
    font-size: 13px;
    color: var(--lb-mute);
    line-height: 1.6;
    max-width: 720px;
}.lb-foot-label {
    display: block;
    font-family: var(--lb-head);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--lb-dark);
    margin-bottom: 5px;
}.lb-foot-links {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}.lb-foot-link {
    font-family: var(--lb-head);
    font-size: 12px;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    border: 1px solid var(--lb-input);
    color: var(--lb-dark);
    padding: 11px 16px;
    border-radius: 7px;
}    .lb-foot-link:hover {
        border-color: var(--lb-green);
        color: var(--lb-green);
        text-decoration: none;
    }.lb-busy {
    opacity: .45;
    pointer-events: none;
}/* --------------------------------------------------------------------------
   Narrow — rail becomes an overlay, table becomes cards
   -------------------------------------------------------------------------- */

@media (max-width: 859px) {
    .lb-title {
        font-size: 28px;
    }

    .lb-rail {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        height: 100vh;
        flex: 0 0 auto;
        width: 360px;
        max-width: 92vw;
        min-width: 0;
        z-index: 91;
        box-shadow: 8px 0 32px rgba(0, 0, 0, 0.22);
        transform: translateX(-100%);
        transition: transform .2s ease;
    }

    .lb-shell.rail-open .lb-rail {
        transform: none;
    }

    .lb-shell.rail-open .lb-scrim {
        display: block;
    }

    .lb-rail-close,
    .lb-rail-apply {
        display: flex;
    }

    .lb-board {
        padding: 14px 12px 80px;
    }

    .lb-table-wrap {
        display: none;
    }

    .lb-cards {
        display: flex;
    }

    .lb-sort-select,
    .lb-rail-toggle {
        display: inline-flex;
    }

    .lb-search {
        width: 100%;
    }
}.lb-leader.is-loading {
    opacity: .45;
}/* The three view tabs do not fit a phone on one line, and wrapping breaks the tab strip
   because they sit on a shared bottom border. Scroll them instead. */
@media (max-width: 859px) {
    .lb-tabs-board {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
    }

        .lb-tabs-board::-webkit-scrollbar {
            display: none;
        }

        .lb-tabs-board .lb-tab {
            flex: 0 0 auto;
            white-space: nowrap;
            padding: 12px 14px;
        }
}/* --------------------------------------------------------------------------
   Locked view

   The bars stand in for values the response never carried. They are not a cover
   over real numbers - removing them in dev tools reveals an empty cell.
   -------------------------------------------------------------------------- */

.lb .lb-bar {
    display: inline-block;
    height: 10px;
    border-radius: 3px;
    background: linear-gradient(90deg, #c8ced6, #dfe4e9);
    vertical-align: middle;
}.lb-cell.is-hidden {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 10px;
}.lb .is-hidden {
    color: transparent;
}.lb-rank.is-hidden,
.lb-card-rank.is-hidden {
    background: transparent;
    box-shadow: none;
}.lb-star.is-off {
    opacity: 0.35;
    cursor: default;
}.lb-leader.is-locked .lb-leader-locked {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 22px 18px 20px;
}.lb-leader-need {
    font-family: var(--lb-head);
    font-size: 11.5px;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--lb-quiet);
}.lb-subscribe {
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
    background: var(--lb-dark);
    color: #fff;
    border-left: 5px solid var(--lb-green);
    border-radius: var(--lb-r);
    padding: 22px 26px;
    margin: 18px 0 8px;
}.lb-subscribe-copy {
    flex: 1 1 320px;
}.lb-subscribe h3 {
    margin: 0 0 6px;
    font-family: var(--lb-head);
    font-size: 16px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}.lb-subscribe p {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.5;
    opacity: 0.88;
    max-width: 640px;
}.lb a.lb-subscribe-cta,
.lb .lb-subscribe .lb-cta {
    color: #fff;
    white-space: nowrap;
}.lb .lb-lock {
    font-size: 0.85em;
    margin-right: 3px;
    opacity: 0.75;
}/* Owned, but not a sort key. Reads as a header rather than a control you cannot use. */
.lb-sticky-sort.is-static {
    cursor: default;
    background: transparent;
    border-color: transparent;
    color: rgba(255, 255, 255, 0.62);
    padding-left: 0;
    padding-right: 0;
}