/* ============================================================
   God's Church — Leaderboard (v3 / Crusader · XP)
   ============================================================
   Hero stats, filter bar, dramatic podium with crown halo,
   ranking table (responsive table↔card), tier legend.
   ============================================================ */

/* ============================================================
   HERO
   ============================================================ */

.lb-hero {
    position: relative;
    padding: clamp(var(--s-16), 10vw, var(--s-24)) 0 clamp(var(--s-10), 8vw, var(--s-12));
    overflow: hidden;
    text-align: center;
}

/* Light shafts (same treatment as landing hero, more subtle) */
.lb-hero::before {
    content: '';
    position: absolute;
    top: -5%;
    left: 50%;
    transform: translateX(-50%);
    width: 140%;
    height: 70%;
    background:
        conic-gradient(
            from 80deg at 50% 0%,
            transparent 0deg,
            rgba(212, 169, 70, 0.07) 14deg,
            transparent 28deg,
            rgba(212, 169, 70, 0.05) 42deg,
            transparent 56deg,
            rgba(212, 169, 70, 0.06) 70deg,
            transparent 84deg
        );
    pointer-events: none;
    animation: lb-hero-shafts 18s ease-in-out infinite alternate;
    z-index: 0;
}

@keyframes lb-hero-shafts {
    0%   { transform: translateX(-50%) rotate(-2deg); opacity: 0.6; }
    100% { transform: translateX(-50%) rotate(2deg); opacity: 0.9; }
}

.lb-hero::after {
    content: '';
    position: absolute;
    top: 30%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(900px, 110vw);
    height: 500px;
    background: radial-gradient(ellipse at center, rgba(212, 169, 70, 0.18), transparent 65%);
    pointer-events: none;
    z-index: 0;
    animation: lb-halo-pulse 12s ease-in-out infinite;
}

@keyframes lb-halo-pulse {
    0%, 100% { opacity: 0.6; }
    50%      { opacity: 0.9; }
}

.lb-hero > .container {
    position: relative;
    z-index: 1;
}

.lb-hero-eyebrow {
    background: linear-gradient(180deg, rgba(212, 169, 70, 0.18), rgba(212, 169, 70, 0.08));
    border-color: var(--border-strong);
    color: var(--gold-bright);
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    letter-spacing: 0.15em;
    font-size: var(--fs-xs);
    margin-bottom: var(--s-6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow:
        inset 0 1px 0 rgba(240, 200, 105, 0.2),
        0 4px 12px rgba(0, 0, 0, 0.2);
    animation: hero-enter 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.lb-hero-eyebrow > span:first-child {
    font-size: 1.1em;
    filter: drop-shadow(0 0 6px var(--gold-glow));
}

.lb-hero h1 {
    margin: 0 0 var(--s-5);
    text-shadow:
        0 2px 0 rgba(0, 0, 0, 0.4),
        0 4px 60px rgba(0, 0, 0, 0.6);
    animation: hero-enter 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.15s both;
}

.lb-hero h1 .text-gold {
    background: linear-gradient(180deg, #f5d180 0%, #f0c869 25%, #d4a946 55%, #a8862e 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter:
        drop-shadow(0 2px 0 rgba(107, 82, 28, 0.4))
        drop-shadow(0 0 30px rgba(212, 169, 70, 0.4));
}

.lb-hero-lede {
    max-width: 580px;
    margin: 0 auto var(--s-8);
    font-size: clamp(var(--fs-base), 2vw, var(--fs-lg));
    line-height: 1.6;
    color: var(--text);
    animation: hero-enter 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.3s both;
}

.lb-hero-stats {
    margin-top: var(--s-6);
    gap: clamp(var(--s-5), 4vw, var(--s-10));
    animation: hero-enter 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.5s both;
}

.lb-stat {
    text-align: center;
    position: relative;
    padding: 0 var(--s-2);
}

.lb-stat:not(:last-child)::after {
    content: '';
    position: absolute;
    right: calc(var(--s-5) * -1);
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 36px;
    background: linear-gradient(180deg, transparent, var(--divider), transparent);
}

.lb-stat-value {
    font-family: var(--font-sans);
    font-size: clamp(var(--fs-xl), 4vw, var(--fs-3xl));
    font-weight: var(--fw-black);
    color: var(--gold);
    line-height: 1;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
    text-shadow: 0 2px 12px rgba(212, 169, 70, 0.25);
}

.lb-stat-label {
    margin-top: var(--s-2);
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--text-muted);
    font-weight: var(--fw-bold);
}

@media (max-width: 480px) {
    .lb-stat:not(:last-child)::after { height: 24px; right: calc(var(--s-3) * -1); }
}

/* ============================================================
   STICKY FILTER BAR
   ============================================================ */

.lb-controls {
    padding: var(--s-3) 0;
    position: sticky;
    top: calc(var(--safe-top) + 56px);   /* below the nav */
    z-index: var(--z-sticky);
    background: linear-gradient(180deg, rgba(10, 15, 36, 0.95), rgba(10, 15, 36, 0.7));
    backdrop-filter: blur(24px) saturate(140%);
    -webkit-backdrop-filter: blur(24px) saturate(140%);
    border-top: 1px solid var(--divider);
    border-bottom: 1px solid var(--divider);
    transition: box-shadow var(--t-base);
}

.lb-controls.is-stuck {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
    border-bottom-color: var(--border);
}

.lb-filter-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-3);
    flex-wrap: wrap;
}

.lb-filter-tabs {
    display: flex;
    gap: 4px;
    padding: 4px;
    background: var(--bg-elevated);
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-inset-dark);
    position: relative;
}

.lb-filter-tab {
    padding: var(--s-2) clamp(var(--s-3), 3vw, var(--s-5));
    min-height: 40px;
    font-size: var(--fs-sm);
    font-weight: var(--fw-bold);
    color: var(--text-muted);
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    transition: color var(--t-fast), background var(--t-fast), transform var(--t-instant);
    cursor: pointer;
    position: relative;
    z-index: 1;
}

.lb-filter-tab:active { transform: scale(0.96); }

@media (hover: hover) {
    .lb-filter-tab:hover:not(.active) {
        color: var(--cream);
    }
}

.lb-filter-tab.active {
    background: linear-gradient(180deg, var(--bg-card), var(--bg-elevated));
    color: var(--gold);
    box-shadow:
        inset 0 1px 0 rgba(212, 169, 70, 0.25),
        var(--shadow-sm);
}

.lb-filter-actions {
    display: flex;
    gap: var(--s-2);
    align-items: center;
}

.lb-filter-actions .btn {
    min-height: 40px;
    min-width: 40px;
}

.lb-filter-actions .btn.hidden { display: none; }

@media (max-width: 480px) {
    .lb-filter-bar { gap: var(--s-2); }
    .lb-filter-tab { padding: var(--s-2) var(--s-3); font-size: var(--fs-xs); }
}

/* ============================================================
   PODIUM
   The dramatic centerpiece. Top 3 with crown halo on #1.
   Desktop: 2-1-3 staggered heights. Mobile: stacked horizontal cards.
   ============================================================ */

.lb-podium-section {
    padding: var(--s-12) 0 var(--s-8);
    position: relative;
}

.podium {
    display: grid;
    grid-template-columns: 1fr 1.25fr 1fr;
    gap: clamp(var(--s-3), 2vw, var(--s-5));
    align-items: end;
    max-width: 880px;
    margin: 0 auto;
}

.podium-loading,
.podium-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: var(--s-12) var(--s-6);
}

.podium-empty {
    background: var(--bg-card);
    border: 1px dashed var(--border);
    border-radius: var(--radius-lg);
}

.podium-card {
    position: relative;
    padding: var(--s-8) var(--s-4) var(--s-6);
    background: var(--bg-card);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-lg);
    text-align: center;
    transition: transform var(--t-base), box-shadow var(--t-base);
    overflow: visible;          /* let crown spill out */
    min-height: 230px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: var(--s-2);
    animation: podium-rise 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes podium-rise {
    from { opacity: 0; transform: translateY(40px); }
    to   { opacity: 1; transform: translateY(0); }
}

.podium-card.podium-second { animation-delay: 0.1s; }
.podium-card.podium-third  { animation-delay: 0.2s; }
.podium-card.podium-first  {
    animation-delay: 0.35s;     /* arrives last for drama */
    transform: translateY(-16px);
}

/* The "carved" inner glow on every podium card */
.podium-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(180deg,
        rgba(212, 169, 70, 0.08) 0%,
        transparent 30%,
        transparent 70%,
        rgba(0, 0, 0, 0.15) 100%
    );
    pointer-events: none;
}

/* ----- FIRST PLACE (king) ----- */
.podium-card.podium-first {
    background:
        radial-gradient(ellipse at top, rgba(212, 169, 70, 0.2), transparent 60%),
        linear-gradient(180deg, rgba(212, 169, 70, 0.15), var(--bg-card));
    border-color: var(--gold);
    min-height: 290px;
    padding-top: var(--s-12);
    box-shadow:
        0 0 0 1px var(--gold) inset,
        0 0 60px var(--gold-glow-strong),
        var(--shadow-lg);
}

/* Animated halo behind first place */
.podium-card.podium-first::after {
    content: '';
    position: absolute;
    top: -40px;
    left: 50%;
    width: 200%;
    height: 200%;
    transform: translateX(-50%);
    background: radial-gradient(
        ellipse at center top,
        rgba(212, 169, 70, 0.4) 0%,
        rgba(212, 169, 70, 0.1) 25%,
        transparent 55%
    );
    pointer-events: none;
    z-index: -1;
    animation: first-halo 8s ease-in-out infinite;
}

@keyframes first-halo {
    0%, 100% { opacity: 0.6; transform: translateX(-50%) scale(1); }
    50%      { opacity: 1; transform: translateX(-50%) scale(1.08); }
}

.podium-card.podium-second {
    border-color: rgba(159, 180, 212, 0.5);
    min-height: 260px;
    background: linear-gradient(180deg, rgba(159, 180, 212, 0.05), var(--bg-card));
}

.podium-card.podium-third {
    border-color: rgba(196, 118, 138, 0.5);
    background: linear-gradient(180deg, rgba(196, 118, 138, 0.05), var(--bg-card));
}

.podium-card.is-me {
    box-shadow:
        0 0 0 2px var(--gold) inset,
        var(--shadow-lg),
        0 0 50px var(--gold-glow);
}

.podium-card.is-me::after {
    content: 'you';
    position: absolute;
    top: -10px;
    right: -8px;
    padding: 4px var(--s-2);
    background: linear-gradient(180deg, var(--gold-bright), var(--gold));
    color: var(--ink);
    font-size: var(--fs-xs);
    font-weight: var(--fw-black);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-md);
    z-index: 2;
    animation: none;
}

/* Crown / medal — floats above the podium card */
.podium-crown {
    position: absolute;
    top: -28px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 2.5rem;
    line-height: 1;
    text-align: center;
    filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.4));
    z-index: 1;
}

.podium-first .podium-crown {
    font-size: 3.2rem;
    top: -40px;
    filter:
        drop-shadow(0 4px 12px rgba(0, 0, 0, 0.4))
        drop-shadow(0 0 20px rgba(212, 169, 70, 0.7));
    animation: crown-float 5s ease-in-out infinite;
}

@keyframes crown-float {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50%      { transform: translateX(-50%) translateY(-6px); }
}

.podium-second .podium-crown,
.podium-third .podium-crown {
    font-size: 2.2rem;
}

.podium-avatar {
    width: 72px;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, var(--bg-elevated), var(--bg));
    border: 2px solid var(--border-strong);
    border-radius: var(--radius-full);
    font-size: 2.2rem;
    line-height: 1;
    box-shadow:
        inset 0 2px 4px rgba(0, 0, 0, 0.3),
        0 4px 12px rgba(0, 0, 0, 0.3);
}

.podium-first .podium-avatar {
    width: 86px;
    height: 86px;
    border-color: var(--gold);
    font-size: 2.6rem;
    box-shadow:
        inset 0 2px 4px rgba(0, 0, 0, 0.3),
        0 4px 16px rgba(0, 0, 0, 0.3),
        0 0 24px var(--gold-glow);
}

.podium-name {
    font-size: var(--fs-base);
    font-weight: var(--fw-bold);
    color: var(--cream);
    margin: var(--s-1) 0 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.podium-first .podium-name {
    font-size: var(--fs-lg);
    color: var(--gold-bright);
    text-shadow: 0 0 16px rgba(212, 169, 70, 0.3);
}

.podium-tier {
    margin-top: var(--s-1);
    margin-bottom: var(--s-1);
}

/* RENAMED v3: .podium-elo → .podium-xp */
.podium-xp {
    font-family: var(--font-sans);
    font-size: var(--fs-xl);
    font-weight: var(--fw-black);
    color: var(--cream);
    font-variant-numeric: tabular-nums;
    line-height: 1;
    letter-spacing: -0.01em;
}

.podium-first .podium-xp {
    color: var(--gold-bright);
    font-size: var(--fs-2xl);
    text-shadow: 0 2px 12px rgba(212, 169, 70, 0.4);
}

.podium-xp span.text-muted {
    font-size: 0.6em;
    margin-left: 2px;
}

.podium-record {
    margin-top: var(--s-1);
    font-size: var(--fs-xs);
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.05em;
}

/* ---- Podium mobile transformation ----
   Each card becomes a horizontal row. The fix vs v2: we use a clean
   2-column grid (avatar | content), with content stacked vertically
   inside, plus the crown placed in a left-absolute slot. The xp lives
   on the right.
*/
@media (max-width: 640px) {
    .lb-podium-section { padding: var(--s-10) 0 var(--s-6); }

    .podium {
        grid-template-columns: 1fr;
        gap: var(--s-3);
        max-width: 480px;
    }

    .podium-card.podium-first  { order: 1; transform: none; min-height: auto; }
    .podium-card.podium-second { order: 2; min-height: auto; }
    .podium-card.podium-third  { order: 3; min-height: auto; }

    /* Mobile podium card: avatar | name+tier | xp, with crown floating top-left */
    .podium-card {
        padding: var(--s-4) var(--s-4) var(--s-4) var(--s-12);
        display: grid;
        grid-template-columns: 56px 1fr auto;
        align-items: center;
        gap: var(--s-3);
        text-align: left;
        min-height: 72px;
        position: relative;
    }

    .podium-card.podium-first { padding-top: var(--s-4); }

    .podium-card.podium-first::after {
        opacity: 0.35;
        height: 100%;
        top: 0;
        animation: none;
    }

    /* Crown sits in the left padding gutter */
    .podium-crown {
        position: absolute;
        top: 50%;
        left: var(--s-3);
        transform: translateY(-50%);
        font-size: 1.4rem;
    }

    .podium-first .podium-crown {
        font-size: 1.6rem;
        animation: none;
        top: 50%;
    }

    .podium-second .podium-crown,
    .podium-third .podium-crown {
        font-size: 1.4rem;
    }

    .podium-avatar {
        width: 52px;
        height: 52px;
        font-size: 1.6rem;
        flex-shrink: 0;
        margin: 0;
    }
    .podium-first .podium-avatar {
        width: 56px;
        height: 56px;
        font-size: 1.7rem;
    }

    /* Stack name + tier vertically in the content column */
    .podium-name {
        margin: 0;
        font-size: var(--fs-base);
        line-height: 1.2;
        max-width: 100%;
        order: 1;
    }
    .podium-first .podium-name { font-size: var(--fs-base); }

    .podium-tier {
        margin: 4px 0 0;
        line-height: 1;
        order: 2;
    }

    .podium-xp {
        font-size: var(--fs-lg);
        text-align: right;
        line-height: 1.1;
        align-self: center;
    }
    .podium-first .podium-xp { font-size: var(--fs-lg); }

    .podium-record { display: none; }

    /* "You" badge re-positions cleanly in the mobile row */
    .podium-card.is-me::after {
        right: var(--s-3);
        top: -8px;
    }
}

/* ============================================================
   RANKING TABLE
   ============================================================ */

.lb-table-wrapper {
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--border);
    box-shadow: var(--shadow-md);
}

.lb-table-head,
.lb-row {
    display: grid;
    grid-template-columns:
        64px       /* rank */
        1fr        /* player */
        118px      /* tier */
        88px       /* xp */
        88px       /* W/L */
        80px;      /* streak */
    align-items: center;
    gap: var(--s-3);
    padding: var(--s-3) var(--s-5);
}

.lb-table-head {
    background: linear-gradient(180deg, var(--bg-elevated), var(--bg-card));
    border-bottom: 1px solid var(--border-strong);
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-muted);
}

.lb-table-body { min-height: 200px; }

.lb-row {
    border-bottom: 1px solid var(--divider);
    min-height: 60px;
    color: var(--text);
    transition: background var(--t-fast), transform var(--t-fast);
    cursor: default;
    position: relative;
    animation: row-in 0.4s ease both;
}

@keyframes row-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.lb-row:last-child { border-bottom: none; }

@media (hover: hover) {
    .lb-row:hover {
        background: rgba(212, 169, 70, 0.04);
    }
    .lb-row:hover .lb-rank-num {
        color: var(--gold);
    }
}

.lb-row.is-me {
    background: linear-gradient(90deg, rgba(212, 169, 70, 0.1), rgba(212, 169, 70, 0.04));
    border-left: 3px solid var(--gold);
    padding-left: calc(var(--s-5) - 3px);
    box-shadow: inset 0 0 0 1px rgba(212, 169, 70, 0.15);
}

.lb-row.is-me .lb-rank-num,
.lb-row.is-me .lb-row-name {
    color: var(--gold-bright);
}

.lb-row.flash {
    animation: lb-flash 1.2s ease-in-out 2;
}

@keyframes lb-flash {
    0%, 100% { background: linear-gradient(90deg, rgba(212, 169, 70, 0.1), rgba(212, 169, 70, 0.04)); }
    50%      { background: linear-gradient(90deg, rgba(212, 169, 70, 0.35), rgba(212, 169, 70, 0.15)); }
}

.lb-col { min-width: 0; }

.lb-col-rank {
    font-variant-numeric: tabular-nums;
}

.lb-rank-num {
    font-weight: var(--fw-bold);
    color: var(--text-muted);
    font-size: var(--fs-base);
    transition: color var(--t-fast);
}

.lb-col-player {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    min-width: 0;
}

.lb-row-avatar {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, var(--bg-elevated), var(--bg));
    border: 1px solid var(--border);
    border-radius: var(--radius-full);
    font-size: 1.2rem;
    line-height: 1;
    flex-shrink: 0;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.lb-row-name {
    font-weight: var(--fw-semibold);
    color: var(--cream);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.lb-rating-num {
    font-variant-numeric: tabular-nums;
    font-weight: var(--fw-black);
    color: var(--cream);
    font-size: var(--fs-base);
}

.lb-col-record,
.lb-col-streak {
    font-variant-numeric: tabular-nums;
    font-size: var(--fs-sm);
}

.lb-loading,
.lb-empty {
    padding: var(--s-12) var(--s-6);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--s-4);
    text-align: center;
}

.lb-load-more {
    padding: var(--s-4);
    border-top: 1px solid var(--divider);
}

.lb-load-more.hidden { display: none; }

/* ---- Tablet: drop streak ---- */
@media (max-width: 880px) {
    .lb-table-head,
    .lb-row {
        grid-template-columns: 54px 1fr 100px 80px 76px;
        gap: var(--s-2);
        padding: var(--s-3) var(--s-4);
    }
    .lb-col-streak { display: none; }
}

/* ============================================================
   MOBILE CARD LAYOUT (≤ 600px)
   ============================================================
   THE BUG (v2): grid-template-areas crammed both the player name
   and the tier badge into row 1 of the same cell using grid-area,
   then forced separation with padding/margin hacks. On long
   usernames, the name + tier collided.

   THE FIX: clean 3-column × 2-row grid. Each cell has one job.
     ┌──────┬─────────────┬─────────┐
     │ rank │ avatar+name │ XP num  │   row 1
     │      ├─────────────┤         │
     │      │    tier     │ W / L   │   row 2
     └──────┴─────────────┴─────────┘
   Name truncates with ellipsis. Tier badge sits in its own row
   beneath the name with proper spacing. No overlap.
*/
@media (max-width: 600px) {
    .lb-table-wrapper {
        background: transparent;
        border: none;
        box-shadow: none;
        padding: 0;
    }
    .lb-table-head { display: none; }

    .lb-row {
        display: grid;
        grid-template-columns: 44px minmax(0, 1fr) auto;
        grid-template-rows: auto auto;
        grid-template-areas:
            "rank player rating"
            "rank tier   record";
        gap: 4px var(--s-3);
        padding: var(--s-4);
        margin-bottom: var(--s-2);
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: var(--radius-md);
        min-height: 68px;
        align-items: center;
        box-shadow: var(--shadow-sm);
    }

    .lb-row.is-me {
        border-color: var(--gold);
        background: linear-gradient(135deg, rgba(212, 169, 70, 0.12), rgba(212, 169, 70, 0.04));
        border-left-width: 1px;
        padding-left: var(--s-4);
        box-shadow: 0 0 24px rgba(212, 169, 70, 0.2);
    }

    /* ---- Rank column (left) ---- */
    .lb-col-rank {
        grid-area: rank;
        font-size: var(--fs-xl);
        align-self: center;
        text-align: center;
    }
    .lb-rank-num { color: var(--gold); }

    /* ---- Player (avatar + name) — row 1 of middle column ---- */
    .lb-col-player {
        grid-area: player;
        align-self: end;
        line-height: 1.2;
        gap: var(--s-2);
        min-width: 0;
        max-width: 100%;
        overflow: hidden;
    }
    .lb-row-avatar {
        width: 30px;
        height: 30px;
        font-size: 0.95rem;
        flex-shrink: 0;
    }
    .lb-row-name {
        font-size: var(--fs-sm);
        min-width: 0;
        flex: 1;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* ---- Tier badge — row 2 of middle column ---- */
    .lb-col-tier {
        grid-area: tier;
        align-self: start;
        line-height: 1;
        padding-left: calc(30px + var(--s-2));   /* align under the name, past the avatar */
        margin-top: 2px;
        min-width: 0;
        overflow: hidden;
    }

    /* Tier badge: prevent it from getting too wide on narrow phones */
    .lb-col-tier .tier {
        max-width: 100%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* ---- XP — row 1 of right column ---- */
    .lb-col-rating {
        grid-area: rating;
        text-align: right;
        align-self: end;
        line-height: 1;
    }
    .lb-rating-num {
        font-size: var(--fs-xl);
        color: var(--gold-bright);
    }

    /* ---- W/L — row 2 of right column ---- */
    .lb-col-record {
        grid-area: record;
        text-align: right;
        align-self: start;
        font-size: var(--fs-xs);
        line-height: 1;
        color: var(--text-muted);
        margin-top: 2px;
        white-space: nowrap;
    }

    .lb-col-streak { display: none; }
}

/* Very narrow phones — keep things sane at 360px */
@media (max-width: 380px) {
    .lb-row {
        padding: var(--s-3);
        gap: 4px var(--s-2);
        grid-template-columns: 36px minmax(0, 1fr) auto;
    }
    .lb-col-rank {
        font-size: var(--fs-lg);
    }
    .lb-col-tier {
        padding-left: calc(30px + var(--s-1));
    }
    .lb-col-tier .tier {
        font-size: 10px;
        padding: 3px var(--s-2);
        letter-spacing: 0.08em;
    }
    .lb-rating-num {
        font-size: var(--fs-lg);
    }
}

/* ============================================================
   TIER LEGEND
   ============================================================ */

.lb-tier-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--s-3);
}

.lb-tier-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-3);
    padding: var(--s-3) var(--s-4);
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    min-height: 56px;
    transition: all var(--t-base);
    position: relative;
    overflow: hidden;
}

.lb-tier-card::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: currentColor;
    opacity: 0;
    transition: opacity var(--t-base);
}

@media (hover: hover) {
    .lb-tier-card:hover {
        border-color: var(--border-strong);
        background: var(--bg-card-hover);
        transform: translateX(2px);
    }
}

/* Per-tier accent color on the left bar (via the .tier inside) */
.lb-tier-card:has(.tier-seeker)::before   { background: var(--tier-seeker); opacity: 0.5; }
.lb-tier-card:has(.tier-disciple)::before { background: var(--tier-disciple); opacity: 0.5; }
.lb-tier-card:has(.tier-believer)::before { background: var(--tier-believer); opacity: 0.5; }
.lb-tier-card:has(.tier-apostle)::before  { background: var(--tier-apostle); opacity: 0.5; }
.lb-tier-card:has(.tier-saint)::before    { background: var(--tier-saint); opacity: 0.5; }
.lb-tier-card:has(.tier-prophet)::before  { background: var(--tier-prophet); opacity: 0.5; }

@media (max-width: 640px) {
    .lb-tier-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--s-2);
    }
}

@media (max-width: 380px) {
    .lb-tier-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   ANONYMOUS CTA
   ============================================================ */

#lb-cta-anon .card.card-glow {
    position: relative;
    background:
        radial-gradient(ellipse at top, rgba(212, 169, 70, 0.08), transparent 60%),
        var(--bg-card);
    border-color: var(--border-strong);
    box-shadow: var(--shadow-lg), 0 0 80px rgba(212, 169, 70, 0.2);
    overflow: hidden;
}

#lb-cta-anon .card.card-glow::before {
    content: '';
    position: absolute;
    top: -50%;
    left: 50%;
    transform: translateX(-50%);
    width: 150%;
    height: 100%;
    background: radial-gradient(ellipse at center, rgba(212, 169, 70, 0.15), transparent 60%);
    pointer-events: none;
    animation: cta-pulse 6s ease-in-out infinite;
}

@keyframes cta-pulse {
    0%, 100% { opacity: 0.5; transform: translateX(-50%) scale(1); }
    50%      { opacity: 0.9; transform: translateX(-50%) scale(1.1); }
}

#lb-cta-anon .card.card-glow > * {
    position: relative;
    z-index: 1;
}

/* ============================================================
   FOOTER (same as landing — page-local)
   ============================================================ */

.footer {
    background: var(--ink);
    border-top: 1px solid var(--border);
    padding: var(--s-12) 0 calc(var(--s-6) + var(--safe-bottom));
    margin-top: var(--s-12);
    position: relative;
}

.footer::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
    opacity: 0.5;
}

.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: var(--s-10);
    margin-bottom: var(--s-10);
}

@media (max-width: 640px) {
    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--s-6);
    }
    .footer-grid > div:first-child {
        grid-column: 1 / -1;
    }
}

.footer-heading {
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--text-muted);
    margin-bottom: var(--s-3);
}

.footer-links {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
    padding: 0;
    margin: 0;
}

.footer-links a {
    color: var(--text);
    font-size: var(--fs-sm);
    text-decoration: none;
    transition: color var(--t-fast);
    padding: 4px 0;
    min-height: 32px;
    display: inline-flex;
    align-items: center;
}

@media (hover: hover) {
    .footer-links a:hover { color: var(--gold); }
}

.footer-bottom {
    border-top: 1px solid var(--divider);
    padding-top: var(--s-6);
    text-align: center;
}

/* ============================================================
   ANIMATIONS borrowed from landing
   ============================================================ */
@keyframes hero-enter {
    from { opacity: 0; transform: translateY(20px); filter: blur(6px); }
    to   { opacity: 1; transform: translateY(0); filter: blur(0); }
}