/* ==========================================================================
   Fan Leaderboard — the modern skin (Oct 2026)
   --------------------------------------------------------------------------
   Linked by user/leaderboard.php (inside the page) and by its hero
   (includes/leaderboard_page_ui.php leaderboardHeroHtml(), inside
   #hero-container). Every selector starts at .lb-modern, a class only these
   carry:
     - the page: .benfica-layout.lb-modern.lb-page (its sidebar: #lbAside);
     - the hero: .hero-header.hero-pv2.hero-pv2--lb.lbh.lb-modern.
   The same design language as the predictions page (predictions-modern.css):
   the row component (rank badge | 32px avatar | name + You over one stats
   line | points column), the podium, the "You" tint + accent bar, the
   segmented switch. Its own classes (.lb-*), so neither stylesheet depends on
   the other. Shared .bn-* / style.css rules are never redefined outside the
   scope.

   Layers: A. tokens  B. hero  C. Your Progress  D. switch + boards + rows +
   podium  E. sidebar  F. phones  G. reduced motion.
   Colours are theme tokens (literals only as var() fallbacks, the
   forum-standard 1px ring and neutral black shadows). Spacing: the site's
   normal rhythm (sections keep style.css's gaps). No button shadows.
   ========================================================================== */

/* ==========================================================================
   A. Tokens
   ========================================================================== */
.lb-modern {
    --lb-card-bg: var(--theme-surface, var(--bs-body-bg));
    --lb-soft: var(--theme-surface-2, var(--bs-tertiary-bg));
    --lb-soft-2: var(--theme-surface-3, var(--bs-secondary-bg));
    --lb-line: var(--theme-border, var(--bs-border-color));
    --lb-ring: rgba(0, 0, 0, .07);
    --lb-shadow: var(--theme-shadow, 0 10px 30px rgba(0, 0, 0, .06));
    --lb-radius: var(--theme-radius-lg, 1.1rem);
    --lb-radius-sm: .7rem;
    --lb-ink: var(--theme-ink, var(--bs-body-color));
    --lb-muted: var(--theme-ink-muted, var(--bs-secondary-color));
    --lb-primary: var(--theme-primary, var(--bs-primary));
    --lb-primary-rgb: var(--theme-primary-rgb, 200, 16, 46);
    --lb-primary-ink: color-mix(in oklab, var(--lb-primary) 80%, var(--lb-ink));
    --lb-accent: var(--theme-accent, var(--bs-warning));
    --lb-accent-rgb: var(--theme-accent-rgb, 244, 178, 35);
    --lb-accent-ink: color-mix(in oklab, var(--lb-accent) 62%, var(--lb-ink));
    --lb-ok: var(--theme-success, var(--bs-success));
    --lb-ok-rgb: var(--theme-success-rgb, 25, 135, 84);
    --lb-on: var(--theme-on-primary, #fff);
    --lb-gold: var(--lb-accent);
    --lb-silver: color-mix(in oklab, var(--lb-muted) 55%, var(--lb-card-bg));
    --lb-bronze: color-mix(in oklab, var(--lb-accent) 55%, var(--theme-secondary, var(--lb-primary)));
    --lb-ease: var(--ease-out, cubic-bezier(.2, .8, .2, 1));
    --lb-xp-col: 4.4rem;
}
[data-bs-theme="dark"] .lb-modern {
    --lb-card-bg: var(--bs-tertiary-bg, var(--theme-surface-2));
    --lb-soft: color-mix(in oklab, var(--theme-ink, #fff) 6%, var(--lb-card-bg));
    --lb-soft-2: color-mix(in oklab, var(--theme-ink, #fff) 11%, var(--lb-card-bg));
    --lb-line: color-mix(in oklab, var(--theme-ink, #fff) 12%, transparent);
    --lb-ring: rgba(255, 255, 255, .08);
    --lb-shadow: var(--theme-shadow, 0 10px 30px rgba(0, 0, 0, .3));
    --lb-primary-ink: var(--theme-link, var(--lb-ink));
    --lb-accent-ink: var(--lb-accent);
    --lb-silver: color-mix(in oklab, var(--lb-ink) 62%, var(--lb-card-bg));
}

/* ==========================================================================
   B. The hero (themes/default/components/hero.php 'xpleaderboard' branch ->
      leaderboardHeroHtml()). The shared .hero-pv2 layout (style.css):
      badge card | eyebrow, title, subtitle | the stats panel. Nothing else
      (the owner's rule: no chips, tabs or filters in a page hero).
   ========================================================================== */
.lb-modern.lbh.hero-pv2--lb .pv2 { grid-template-columns: auto minmax(0, 1fr) minmax(0, 30rem); gap: .8rem 1.4rem; }
.lb-modern.lbh.hero-pv2--lb .lbh-badge {
    width: 6.2rem; height: 6.2rem;
    place-items: center;
    border-radius: 1.4rem;
}
.lb-modern.lbh.hero-pv2--lb .lbh-badge > i { font-size: 3.1rem; opacity: 1; color: var(--theme-accent-on-primary, var(--lb-accent)); filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .25)); }
.lb-modern.lbh.hero-pv2--lb .pv2-name { margin: .3rem 0 .15rem; font-size: clamp(1.4rem, 1.05rem + 1.3vw, 2.1rem); }
.lb-modern.lbh.hero-pv2--lb .lbh-sub { margin: 0; max-width: 40rem; color: color-mix(in oklab, var(--theme-on-primary, #fff) 82%, transparent); font-size: .84rem; line-height: 1.35; }
.lb-modern.lbh.hero-pv2--lb .lbh-side .pv2-stats-head { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb-modern.lbh.hero-pv2--lb .lbh-side .pv2-stats-head b { color: var(--theme-accent-on-primary, var(--lb-accent)); font-weight: 900; }
.lb-modern.lbh.hero-pv2--lb .lbh-side .pv2-stat { flex: 1 1 0; }
.lb-modern.lbh.hero-pv2--lb .lbh-side .pv2-stat-label { white-space: normal; overflow-wrap: normal; word-break: normal; hyphens: none; line-height: 1.1; }
@media (max-width: 1199.98px) {
    .lb-modern.lbh.hero-pv2--lb .pv2 { grid-template-columns: auto minmax(0, 1fr); }
    .lb-modern.lbh.hero-pv2--lb .lbh-side { grid-column: 1 / -1; }
}
@media (max-width: 767.98px) {
    /* Phones: badge + eyebrow + title on top, the stats panel at full width under them. */
    .lb-modern.lbh.hero-pv2--lb .pv2 { grid-template-columns: auto minmax(0, 1fr); row-gap: .55rem; }
    .lb-modern.lbh.hero-pv2--lb .pv2-body { display: contents; }
    .lb-modern.lbh.hero-pv2--lb .lbh-badge { grid-column: 1; grid-row: 1 / span 2; width: 3.6rem; height: 3.6rem; min-height: 0; border-radius: .9rem; align-self: center; }
    .lb-modern.lbh.hero-pv2--lb .lbh-badge > i { font-size: 1.8rem; }
    .lb-modern.lbh.hero-pv2--lb .pv2-position { grid-column: 2; grid-row: 1; justify-self: start; align-self: end; }
    .lb-modern.lbh.hero-pv2--lb .pv2-name { grid-column: 2; grid-row: 2; margin: 0; align-self: start; }
    .lb-modern.lbh.hero-pv2--lb .lbh-sub { display: none; }
    .lb-modern.lbh.hero-pv2--lb .lbh-side { grid-column: 1 / -1; }
}
@media (max-width: 420px) {
    .lb-modern.lbh.hero-pv2--lb .lbh-side .pv2-stat-label { font-size: .52rem; letter-spacing: .02em; }
    .lb-modern.lbh.hero-pv2--lb .lbh-side .pv2-stat-num { font-size: 1.05rem; }
}

/* ==========================================================================
   C. Your Progress: level meter, next rank, where the XP came from
   ========================================================================== */
/* Without the hero only: level, rank title, XP and position as chips. */
.lb-modern .lb-chips { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: .6rem; }
.lb-modern .lb-chip {
    display: inline-flex; align-items: center; gap: .3rem;
    padding: .22rem .65rem; border-radius: 999px;
    background: var(--lb-soft); color: var(--lb-ink);
    font-size: .76rem; font-weight: 700; line-height: 1.2;
}
.lb-modern .lb-chip b { font-weight: 900; font-variant-numeric: tabular-nums; }
.lb-modern .lb-chip.badge { font-size: .72rem; }
.lb-modern .lb-chip--lv { background: var(--lb-primary); color: var(--lb-on); }

.lb-modern .lb-meter { display: flex; align-items: center; gap: .55rem; padding: .15rem .1rem 0; }
.lb-modern .lb-meter-end {
    flex: 0 0 auto;
    padding: .1rem .5rem; border-radius: 999px;
    background: rgba(var(--lb-primary-rgb), .1); color: var(--lb-primary-ink);
    font-size: .7rem; font-weight: 900; font-variant-numeric: tabular-nums;
}
.lb-modern .lb-meter-next { background: var(--lb-soft); color: var(--lb-muted); }
.lb-modern .lb-meter-track { position: relative; flex: 1 1 auto; height: .55rem; border-radius: 999px; overflow: hidden; background: var(--lb-soft-2); }
.lb-modern .lb-meter-fill {
    position: absolute; inset: 0 auto 0 0; border-radius: inherit;
    background: linear-gradient(90deg, var(--lb-primary), color-mix(in oklab, var(--lb-primary) 55%, var(--lb-accent)));
    transition: width .9s var(--lb-ease);
}
.lb-modern .lb-meter-meta {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .25rem .75rem;
    margin: .35rem .1rem 0;
    color: var(--lb-muted); font-size: .74rem; font-weight: 600;
}

/* Breakdown: label + share bar | count × weight | XP (fixed columns). */
.lb-modern .lb-bd { margin-top: .75rem; border-top: 1px solid color-mix(in oklab, var(--lb-line) 60%, transparent); }
.lb-modern .lb-bd-row {
    display: grid; grid-template-columns: minmax(0, 1fr) 5.2rem var(--lb-xp-col);
    align-items: center; column-gap: .6rem;
    padding: .38rem .1rem;
    border-bottom: 1px solid color-mix(in oklab, var(--lb-line) 45%, transparent);
    font-size: .8rem;
}
.lb-modern .lb-bd-rows > .lb-bd-row:last-child { border-bottom: 0; }
.lb-modern .lb-bd-head { padding-top: .45rem; padding-bottom: .25rem; color: var(--lb-muted); font-size: .62rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.lb-modern .lb-bd-label { display: flex; flex-direction: column; gap: .22rem; min-width: 0; }
.lb-modern .lb-bd-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.lb-modern .lb-bd-track { position: relative; display: block; width: 100%; max-width: 16rem; height: .26rem; border-radius: 999px; overflow: hidden; background: var(--lb-soft-2); }
.lb-modern .lb-bd-fill { position: absolute; inset: 0 auto 0 0; border-radius: inherit; background: var(--lb-accent); transition: width .9s var(--lb-ease); }
.lb-modern .lb-bd-count { text-align: right; color: var(--lb-muted); font-size: .74rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.lb-modern .lb-bd-xp { text-align: right; font-weight: 900; font-variant-numeric: tabular-nums; }
.lb-modern .lb-bd-head .lb-bd-count, .lb-modern .lb-bd-head .lb-bd-xp { font-size: .62rem; font-weight: 800; color: var(--lb-muted); }

/* ==========================================================================
   D. Segmented switch, boards, rows, podium
   ========================================================================== */
/* Everyone / Friends: two links on the right of the "Top Fans" heading. They are
   not .btn, so the head-actions menuizer (footer.php) leaves them whole. */
.benfica-layout.lb-modern .bn-section-head .lb-seg {
    display: inline-flex; gap: .15rem;
    padding: .15rem;
    border-radius: 999px;
    background: var(--lb-soft);
    border: 1px solid color-mix(in oklab, var(--lb-line) 70%, transparent);
}
.benfica-layout.lb-modern .bn-section-head .lb-seg-btn {
    display: inline-flex; align-items: center;
    padding: .2rem .7rem;
    border-radius: 999px;
    color: var(--lb-muted); text-decoration: none;
    font-size: .74rem; font-weight: 800; line-height: 1.3; white-space: nowrap;
    transition: background-color .2s var(--lb-ease), color .2s ease;
}
.benfica-layout.lb-modern .bn-section-head .lb-seg-btn:hover { color: var(--lb-ink); }
.benfica-layout.lb-modern .bn-section-head .lb-seg-btn.is-on { background: var(--lb-primary); color: var(--lb-on); }
.benfica-layout.lb-modern .bn-section-head .lb-seg-btn:focus-visible { outline: 2px solid var(--lb-primary); outline-offset: 1px; }

@media (max-width: 767.98px) {
    /* Phones: the title keeps its words (beats style.css's body:has(.hero-pv2) …
       :has(.bn-head-actions) > h2 ellipsis, which is !important); the switch sits right. */
    body .benfica-layout.lb-modern.lb-page .bn-section-head:has(.lb-seg) > h2 { flex: 1 1 auto !important; min-width: min-content !important; white-space: normal !important; overflow: visible !important; text-overflow: clip !important; line-height: 1.15; }
    .benfica-layout.lb-modern .bn-section-head:has(.lb-seg)::after { display: none; }
    .benfica-layout.lb-modern .bn-section-head:has(.lb-seg) .bn-head-actions { margin-left: auto; }
}
.lb-modern .lb-panel[hidden] { display: none; }
/* The board card: the forum-standard frame (the section is 'bare', so no card in a card). */
.lb-modern .lb-board-card,
.lb-modern .lb-empty {
    border: 1px solid var(--lb-ring);
    border-radius: var(--lb-radius);
    background: var(--lb-card-bg);
    box-shadow: var(--lb-shadow);
}
.lb-modern .lb-board-card { padding: .2rem .65rem; overflow: hidden; }
.lb-modern .lb-empty { display: block; padding: .65rem .9rem; color: var(--lb-muted); font-size: .82rem; line-height: 1.4; }
.lb-modern .lb-empty a { font-weight: 800; }

/* The row. */
.lb-modern .lb-row {
    position: relative;
    display: grid;
    grid-template-columns: 1.6rem 2rem minmax(0, 1fr) var(--lb-xp-col);
    align-items: center;
    column-gap: .6rem;
    padding: .45rem .1rem;
    border-bottom: 1px solid color-mix(in oklab, var(--lb-line) 60%, transparent);
    color: var(--lb-ink); text-decoration: none;
    font-size: .78rem;
    transition: background-color .15s ease;
}
.lb-modern .lb-rows > .lb-row:last-child { border-bottom: 0; }
.lb-modern a.lb-row:hover { background: var(--lb-soft); color: var(--lb-ink); }
.lb-modern a.lb-row:focus-visible { outline: 2px solid var(--lb-primary); outline-offset: -2px; border-radius: .35rem; }
.lb-modern .lb-rank {
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.6rem; height: 1.6rem;
    border-radius: .45rem;
    background: var(--lb-soft-2);
    color: var(--lb-ink);
    font-size: .7rem; font-weight: 900; font-variant-numeric: tabular-nums;
}
.lb-modern .lb-medal-1 > .lb-rank { background: var(--lb-gold); color: var(--theme-on-accent, var(--lb-ink)); }
.lb-modern .lb-medal-2 > .lb-rank { background: var(--lb-silver); color: var(--lb-ink); }
.lb-modern .lb-medal-3 > .lb-rank { background: var(--lb-bronze); color: var(--lb-on); }
.lb-modern .lb-av {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2rem; height: 2rem;
    border-radius: 50%;
    object-fit: cover; object-position: center 25%;
    background: color-mix(in oklab, var(--lb-primary) 16%, var(--lb-card-bg));
    color: var(--lb-primary-ink);
    font-size: .8rem; font-weight: 900;
    box-shadow: inset 0 0 0 1px var(--lb-ring);
}
.lb-modern .lb-medal-1 > .lb-av { box-shadow: 0 0 0 2px var(--lb-gold); }
.lb-modern .lb-medal-2 > .lb-av { box-shadow: 0 0 0 2px var(--lb-silver); }
.lb-modern .lb-medal-3 > .lb-av { box-shadow: 0 0 0 2px var(--lb-bronze); }
.lb-modern .lb-row-main { display: block; min-width: 0; }
.lb-modern .lb-row-name { display: flex; align-items: center; gap: .35rem; min-width: 0; font-size: .84rem; font-weight: 800; line-height: 1.25; }
.lb-modern .lb-uname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.lb-modern .lb-row-stats {
    display: flex; align-items: center; gap: .35rem;
    margin-top: .14rem; min-width: 0;
    overflow: hidden; white-space: nowrap;
    font-size: .66rem;
}
.lb-modern .lb-you {
    display: inline-flex; align-items: center; flex: 0 0 auto;
    padding: .02rem .4rem; border-radius: 999px;
    background: var(--lb-primary); color: var(--lb-on);
    font-size: .54rem; font-weight: 900; letter-spacing: .05em; text-transform: uppercase;
}
/* Level chip: "Lv 7" + a mini meter to the next level. */
.lb-modern .lb-lv { display: inline-flex; align-items: center; gap: .3rem; flex: 0 0 auto; }
.lb-modern .lb-lv b { font-weight: 900; color: var(--lb-primary-ink); font-variant-numeric: tabular-nums; }
.lb-modern .lb-lv-track { position: relative; width: 2.4rem; height: .28rem; border-radius: 999px; overflow: hidden; background: var(--lb-soft-2); }
.lb-modern .lb-lv-fill { position: absolute; inset: 0 auto 0 0; border-radius: inherit; background: var(--lb-primary); transition: width .8s var(--lb-ease); }
/* Rank title: the catalog's own badge colours, as a slim pill. */
.lb-modern .lb-tier.badge {
    flex: 0 1 auto; min-width: 0;
    overflow: hidden; text-overflow: ellipsis;
    padding: .1rem .42rem; border-radius: 999px;
    font-size: .6rem; font-weight: 800; line-height: 1.2;
}
/* Points: a fixed right-hand column, number over "XP". */
.lb-modern .lb-xp { display: flex; flex-direction: column; align-items: flex-end; justify-self: stretch; line-height: 1.05; text-align: right; }
.lb-modern .lb-xp b { font-size: .92rem; font-weight: 900; color: var(--lb-primary-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.lb-modern .lb-xp small { color: var(--lb-muted); font-size: .56rem; font-weight: 800; letter-spacing: .06em; }

/* You: a subtle tint and a left accent bar, not a box. The row keeps its own left padding
   room, so the rank badge never touches the bar. */
.lb-modern .lb-row.is-me {
    background: linear-gradient(90deg, rgba(var(--lb-primary-rgb), .09), rgba(var(--lb-primary-rgb), .02));
    box-shadow: inset 3px 0 0 var(--lb-primary);
    border-radius: .35rem;
    padding-left: .6rem;
}
[data-bs-theme="dark"] .lb-modern .lb-row.is-me { background: linear-gradient(90deg, rgba(var(--lb-primary-rgb), .2), rgba(var(--lb-primary-rgb), .05)); }
.lb-modern .lb-pinned { margin: .35rem 0 .3rem; padding-top: .35rem; border-top: 1px dashed var(--lb-line); }
.lb-modern .lb-pinned-cap {
    display: flex; align-items: center; gap: .35rem;
    margin: 0 .1rem .25rem;
    color: var(--lb-muted); font-size: .6rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
}
.lb-modern .lb-pinned-cap i { color: var(--lb-primary-ink); }

/* Podium (three or more rows only). Rows 1-3 stay in the list for screen readers. */
.lb-modern .lb-podium {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end;
    gap: .5rem;
    margin: .2rem 0 .3rem; padding: .7rem .2rem 0;
    border-bottom: 1px solid color-mix(in oklab, var(--lb-line) 60%, transparent);
}
.lb-modern .lb-step {
    display: flex; flex-direction: column; align-items: center; gap: .12rem;
    min-width: 0; text-align: center;
    color: var(--lb-ink); text-decoration: none;
}
.lb-modern .lb-step:hover .lb-step-name { color: var(--lb-primary-ink); }
.lb-modern .lb-step-av { position: relative; display: inline-flex; margin-bottom: .15rem; }
.lb-modern .lb-step-av .lb-av { width: 2.8rem; height: 2.8rem; font-size: 1.05rem; }
.lb-modern .lb-step-1 .lb-step-av .lb-av { width: 3.4rem; height: 3.4rem; font-size: 1.25rem; box-shadow: 0 0 0 3px var(--lb-gold); }
.lb-modern .lb-step-2 .lb-step-av .lb-av { box-shadow: 0 0 0 3px var(--lb-silver); }
.lb-modern .lb-step-3 .lb-step-av .lb-av { box-shadow: 0 0 0 3px var(--lb-bronze); }
.lb-modern .lb-step-medal {
    position: absolute; right: -.25rem; bottom: -.2rem;
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.2rem; height: 1.2rem; border-radius: 50%;
    border: 2px solid var(--lb-card-bg);
    font-size: .6rem; font-weight: 900;
}
.lb-modern .lb-step-1 .lb-step-medal { background: var(--lb-gold); color: var(--theme-on-accent, var(--lb-ink)); }
.lb-modern .lb-step-2 .lb-step-medal { background: var(--lb-silver); color: var(--lb-ink); }
.lb-modern .lb-step-3 .lb-step-medal { background: var(--lb-bronze); color: var(--lb-on); }
.lb-modern .lb-step-name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .8rem; font-weight: 800; transition: color .15s ease; }
.lb-modern .lb-step.is-me .lb-step-name { color: var(--lb-primary-ink); }
.lb-modern .lb-step-xp { font-size: .74rem; font-weight: 700; color: var(--lb-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.lb-modern .lb-step-xp b { color: var(--lb-primary-ink); font-weight: 900; }
.lb-modern .lb-step-lv { padding: 0 .4rem; border-radius: 999px; background: var(--lb-soft); color: var(--lb-muted); font-size: .6rem; font-weight: 800; }
.lb-modern .lb-step-block { display: block; width: 100%; margin-top: .25rem; border-radius: .45rem .45rem 0 0; }
.lb-modern .lb-step-1 .lb-step-block { height: 1.7rem; background: linear-gradient(180deg, rgba(var(--lb-accent-rgb), .45), rgba(var(--lb-accent-rgb), .12)); }
.lb-modern .lb-step-2 .lb-step-block { height: 1.1rem; background: linear-gradient(180deg, color-mix(in oklab, var(--lb-silver) 70%, transparent), transparent); }
.lb-modern .lb-step-3 .lb-step-block { height: .75rem; background: linear-gradient(180deg, color-mix(in oklab, var(--lb-bronze) 55%, transparent), transparent); }
.lb-modern .lb-on-podium {
    position: absolute !important; width: 1px !important; height: 1px !important;
    padding: 0 !important; margin: -1px !important; overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important;
}

/* ==========================================================================
   E. This page's sidebar: Rank Ladder, Recent Badges, How XP Works, Explore
   ========================================================================== */
.benfica-layout.lb-modern #lbAside .lb-side { padding-bottom: .7rem; }
.benfica-layout.lb-modern #lbAside .lb-side .lb-tier.badge { font-size: .62rem; padding: .12rem .5rem; }

/* Rank Ladder: top rank first; done ranks ticked, the current one tinted with a left
   accent bar (its own left padding keeps the icon off the bar). */
.benfica-layout.lb-modern #lbAside .lb-ladder { list-style: none; margin: 0; padding: 0; display: grid; gap: .15rem; }
.benfica-layout.lb-modern #lbAside .lb-ladder-row {
    display: grid; grid-template-columns: 1.35rem minmax(0, 1fr) auto; align-items: center; column-gap: .5rem;
    padding: .3rem .35rem; border-radius: .45rem;
    font-size: .74rem;
}
.benfica-layout.lb-modern #lbAside .lb-ladder-row .lb-tier.badge { justify-self: start; }
.benfica-layout.lb-modern #lbAside .lb-ladder-ico {
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.35rem; height: 1.35rem; border-radius: 50%;
    background: var(--lb-soft); color: var(--lb-muted); font-size: .58rem;
}
.benfica-layout.lb-modern #lbAside .lb-ladder-row.is-done .lb-ladder-ico { background: rgba(var(--lb-ok-rgb), .14); color: var(--theme-success-strong, var(--lb-ok)); }
.benfica-layout.lb-modern #lbAside .lb-ladder-row.is-current {
    background: linear-gradient(90deg, rgba(var(--lb-primary-rgb), .09), rgba(var(--lb-primary-rgb), .02));
    box-shadow: inset 3px 0 0 var(--lb-primary);
    padding-left: .6rem;
}
[data-bs-theme="dark"] .benfica-layout.lb-modern #lbAside .lb-ladder-row.is-current { background: linear-gradient(90deg, rgba(var(--lb-primary-rgb), .2), rgba(var(--lb-primary-rgb), .05)); }
.benfica-layout.lb-modern #lbAside .lb-ladder-row.is-current .lb-ladder-ico { background: var(--lb-primary); color: var(--lb-on); }
.benfica-layout.lb-modern #lbAside .lb-ladder-xp { color: var(--lb-muted); font-size: .7rem; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.benfica-layout.lb-modern #lbAside .lb-ladder-row.is-current .lb-ladder-xp { color: var(--lb-ink); }
.benfica-layout.lb-modern #lbAside .lb-ladder-next { display: grid; gap: .3rem; margin-top: .5rem; padding-top: .5rem; border-top: 1px dashed var(--lb-line); }
.benfica-layout.lb-modern #lbAside .lb-ladder-next.is-top { display: flex; align-items: center; gap: .4rem; font-size: .76rem; font-weight: 800; }
.benfica-layout.lb-modern #lbAside .lb-ladder-next.is-top i { color: var(--lb-accent-ink); }
.benfica-layout.lb-modern #lbAside .lb-ladder-track { position: relative; display: block; height: .4rem; border-radius: 999px; overflow: hidden; background: var(--lb-soft-2); }
.benfica-layout.lb-modern #lbAside .lb-ladder-fill { position: absolute; inset: 0 auto 0 0; border-radius: inherit; background: linear-gradient(90deg, var(--lb-primary), color-mix(in oklab, var(--lb-primary) 55%, var(--lb-accent))); transition: width .9s var(--lb-ease); }
.benfica-layout.lb-modern #lbAside .lb-ladder-left { font-size: .74rem; font-weight: 700; color: var(--lb-ink); }

/* Recent Badges: avatar | member over badge | when. */
.benfica-layout.lb-modern #lbAside .lb-feed { display: grid; }
.benfica-layout.lb-modern #lbAside .lb-feed-row {
    display: grid; grid-template-columns: 1.8rem minmax(0, 1fr) auto; align-items: center; column-gap: .5rem;
    padding: .38rem .15rem;
    border-bottom: 1px solid color-mix(in oklab, var(--lb-line) 55%, transparent);
    color: var(--lb-ink); text-decoration: none;
    transition: background-color .15s ease;
}
.benfica-layout.lb-modern #lbAside .lb-feed-row:last-child { border-bottom: 0; }
.benfica-layout.lb-modern #lbAside .lb-feed-row:hover { background: var(--lb-soft); border-radius: .4rem; }
.benfica-layout.lb-modern #lbAside .lb-feed-row:focus-visible { outline: 2px solid var(--lb-primary); outline-offset: -2px; border-radius: .4rem; }
.benfica-layout.lb-modern #lbAside .lb-feed-row .lb-av { width: 1.8rem; height: 1.8rem; font-size: .72rem; }
.benfica-layout.lb-modern #lbAside .lb-feed-main { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.benfica-layout.lb-modern #lbAside .lb-feed-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .78rem; font-weight: 800; }
.benfica-layout.lb-modern #lbAside .lb-feed-badge { display: flex; align-items: center; gap: .3rem; min-width: 0; color: var(--lb-muted); font-size: .7rem; font-weight: 600; }
.benfica-layout.lb-modern #lbAside .lb-feed-badge i { flex: 0 0 auto; color: var(--lb-accent-ink); font-size: .68rem; }
.benfica-layout.lb-modern #lbAside .lb-feed-badge span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.benfica-layout.lb-modern #lbAside .lb-feed-when { color: var(--lb-muted); font-size: .62rem; font-weight: 700; white-space: nowrap; }

/* How XP Works: a compact two-column table (source | "+N XP" pill), then short notes. */
.benfica-layout.lb-modern #lbAside .lb-rules-table { list-style: none; margin: 0; padding: 0 !important; display: grid; }
.benfica-layout.lb-modern #lbAside .lb-rules-table li {
    display: flex; align-items: center; justify-content: space-between; gap: .5rem;
    padding: .24rem 0;
    border-bottom: 1px dashed color-mix(in oklab, var(--lb-line) 70%, transparent);
    font-size: .74rem;
}
.benfica-layout.lb-modern #lbAside .lb-rules-table li:last-child { border-bottom: 0; }
.benfica-layout.lb-modern #lbAside .lb-rules-table li span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.benfica-layout.lb-modern #lbAside .lb-rules-table li strong {
    flex: 0 0 auto; padding: .05rem .45rem; border-radius: 999px;
    background: rgba(var(--lb-primary-rgb), .1); color: var(--lb-primary-ink);
    font-size: .68rem; font-weight: 900; font-variant-numeric: tabular-nums;
}
.benfica-layout.lb-modern #lbAside .lb-rules-notes { list-style: none; margin: .45rem 0 0; padding: 0 !important; display: grid; gap: .3rem; }
.benfica-layout.lb-modern #lbAside .lb-rules-notes li { display: flex; align-items: flex-start; gap: .4rem; color: var(--lb-muted); font-size: .72rem; line-height: 1.35; }
.benfica-layout.lb-modern #lbAside .lb-rules-notes li i { flex: 0 0 auto; margin-top: .15rem; color: var(--lb-accent-ink); font-size: .68rem; }
.benfica-layout.lb-modern #lbAside .lb-rules-notes strong { color: var(--lb-ink); }
/* Explore: links as compact pills, two per row (same as the predictions page's sidebar). */
.benfica-layout.lb-modern #lbAside .bn-cta .bn-cta-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .3rem; }
.benfica-layout.lb-modern #lbAside .bn-cta .bn-cta-links a {
    margin: 0; padding: .3rem .55rem; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-size: .72rem;
}

/* ==========================================================================
   F. Phones
   ========================================================================== */
@media (max-width: 575.98px) {
    .lb-modern { --lb-xp-col: 3.6rem; }
    .lb-modern .lb-bd-row { grid-template-columns: minmax(0, 1fr) auto var(--lb-xp-col); }
}
@media (max-width: 420px) {
    .lb-modern .lb-board-card { padding: .15rem .45rem; }
    .lb-modern .lb-row { grid-template-columns: 1.45rem 1.8rem minmax(0, 1fr) var(--lb-xp-col); column-gap: .45rem; }
    .lb-modern .lb-row.is-me { padding-left: .5rem; }
    .lb-modern .lb-av { width: 1.8rem; height: 1.8rem; font-size: .72rem; }
    .lb-modern .lb-rank { width: 1.45rem; height: 1.45rem; font-size: .64rem; }
    .lb-modern .lb-xp b { font-size: .84rem; }
    .lb-modern .lb-lv-track { width: 1.8rem; }
    .lb-modern .lb-step-av .lb-av { width: 2.4rem; height: 2.4rem; }
    .lb-modern .lb-step-1 .lb-step-av .lb-av { width: 2.9rem; height: 2.9rem; }
    .lb-modern .lb-step-name { font-size: .72rem; }
    .benfica-layout.lb-modern .bn-section-head .lb-seg-btn { padding: .2rem .55rem; font-size: .7rem; }
    .lb-modern .lb-meter-meta { font-size: .7rem; }
}
@media (max-width: 360px) {
    .benfica-layout.lb-modern .bn-section-head:has(.lb-seg) { column-gap: .45rem; }
    /* Room for a two-word title ("Melhores Adeptos") beside the switch: drop the lead-in dash. */
    .benfica-layout.lb-modern .bn-section-head:has(.lb-seg)::before { display: none; }
    .benfica-layout.lb-modern .bn-section-head .lb-seg-btn { padding: .18rem .45rem; font-size: .66rem; }
}
@media (max-width: 340px) {
    .lb-modern .lb-tier.badge { display: none; }
}

/* ==========================================================================
   G. Reduced motion: nothing moves (bn-motion.js already skips its count-ups,
      fills and rise-ins).
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    .lb-modern :is(.lb-row, .lb-seg-btn, .lb-meter-fill, .lb-bd-fill, .lb-lv-fill, .lb-step-name, .lb-ladder-fill, .lb-feed-row) { transition: none !important; }
}


/* The games link bar (luTopBar, #lu-top): sticky under the site header like the XI Builder and
   Predictions, level with the sidebar's first card, 1rem above the first section. */
.benfica-layout.lb-modern .bn-main > #lu-top {
    position: sticky; top: var(--pl-sticky-top, calc(var(--navbar-height, 50px) + 8px)); z-index: 1020;
    margin-top: 0 !important; margin-bottom: 1rem; transition: top .2s ease;
}
.benfica-layout.lb-modern #lu-top.is-stuck .lu-topbar {
    background: var(--theme-surface, var(--bs-body-bg));
    box-shadow: var(--elev-2, 0 4px 12px rgba(0,0,0,.08)), 0 8px 24px rgba(0,0,0,.06);
}