/* ============================================================
   ranking.css — iSCRIM Player Rankings
   All styles extracted from ranking.php <style> block +
   full class-based ruleset for the refactored HTML.
   ============================================================ */

/* ── Reset / base ─────────────────────────────────────────── */
body { margin: 0; background: #16181c; color: #e8eaed; font-family: Manrope, sans-serif; }
button, input { font-family: inherit; }
input::placeholder { color: #6f747c; }

/* ── Animations ───────────────────────────────────────────── */
@keyframes lbFadeUp {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
}
@keyframes lbRowIn {
    from { opacity: 0; transform: translateY(5px); }
    to   { opacity: 1; transform: none; }
}
.lb-section      { animation: lbFadeUp .5s cubic-bezier(.22,1,.36,1) both .05s; }
.lb-podium-wrap  { animation: lbFadeUp .5s cubic-bezier(.22,1,.36,1) both .15s; }
.lb-table-box    { animation: lbFadeUp .5s cubic-bezier(.22,1,.36,1) both .25s; }
.lb-pag          { animation: lbFadeUp .4s cubic-bezier(.22,1,.36,1) both .34s; }
.lb-sidebar-r    { animation: lbFadeUp .5s cubic-bezier(.22,1,.36,1) both .2s; }
.lb-row          { opacity: 0; }
.lb-row.in       { animation: lbRowIn .35s cubic-bezier(.22,1,.36,1) both; }
@media (prefers-reduced-motion: reduce) {
    .lb-section, .lb-podium-wrap, .lb-table-box, .lb-pag, .lb-sidebar-r { animation: none !important; }
    .lb-row { opacity: 1; }
}

/* ── Skeleton loader ──────────────────────────────────────── */
@keyframes lbShimmer {
    0%   { background-position: -100% 0; }
    100% { background-position: 200% 0; }
}
.lb-skeleton-row {
    display: grid;
    grid-template-columns: var(--grid-cols);
    min-height: 52px;
    align-items: center;
    padding: 0 4px;
    border-bottom: 1px solid #1e2228;
}
.lb-sk-cell,
.lb-sk-avatar,
.lb-sk-name {
    background: linear-gradient(90deg, #1a1c20 0%, #1a1c20 30%, #22262c 50%, #1a1c20 70%, #1a1c20 100%);
    background-size: 300% 100%;
    animation: lbShimmer 2.4s linear infinite;
}
.lb-sk-cell {
    height: 11px;
    border-radius: 3px;
    margin: 0 8px;
}
.lb-sk-player {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 6px;
    min-width: 0;
}
.lb-sk-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    flex-shrink: 0;
}
.lb-sk-name {
    height: 11px;
    border-radius: 3px;
    width: 45%;
    max-width: 120px;
    min-width: 60px;
}
.lb-skeleton-row:nth-child(even) .lb-sk-cell,
.lb-skeleton-row:nth-child(even) .lb-sk-avatar,
.lb-skeleton-row:nth-child(even) .lb-sk-name { opacity: .7; }

/* ── Avatar frame inside lb-av-wrap ──────────────────────── */
.lb-av-wrap .avatar-frame {
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    height: 148%;
    pointer-events: none;
    z-index: 2;
}

/* ── Page wrapper ─────────────────────────────────────────── */
.lb-page {
    min-height: 100vh;
    margin-top:64px;
    background: #16181c;
    background-image: radial-gradient(rgba(255,255,255,0.025) 1px, transparent 1px);
    background-size: 4px 4px;
}
.lb-page a               { color: var(--cloudy-white); text-decoration: none; }
.lb-page a:hover         { color: #5fe08e; }

/* ── Divider ──────────────────────────────────────────────── */
.lb-divider { border-top: 1px solid #2a2d33; }

/* ── Hero section ─────────────────────────────────────────── */
.lb-section {
    max-width: 1600px;
    margin: 0 auto;
    padding: 56px 40px 32px;
    display: flex;
    flex-wrap: wrap;
    gap: 32px;
    justify-content: space-between;
    align-items: flex-end;
}
.lb-hero__left  { min-width: 0; max-width: 720px; }
.lb-hero__eyebrow {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    letter-spacing: 3px;
    color: #2fd46b;
    font-weight: 700;
}
.lb-hero__title {
    margin: 14px 0 18px;
    font-family: 'Archivo Black', sans-serif;
    font-size: clamp(44px, 6vw, 80px);
    line-height: 0.95;
    font-weight: 400;
    letter-spacing: -1px;
}
.lb-hero__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: baseline;
    font-size: 14px;
    color: #9ba0a8;
}
.lb-hero__fmt-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    letter-spacing: 2px;
    color: #e8eaed;
    font-weight: 700;
}
.lb-hero__right {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: flex-end;
}

/* ── Tabs ─────────────────────────────────────────────────── */
.lb-tabs {
    display: flex;
    border: 1px solid #2a2d33;
    background: #141619;
}
.lb-tab {
    border: 0;
    cursor: default;
    padding: 9px 14px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    letter-spacing: 1.5px;
    font-weight: 700;
    background: transparent;
    color: #9ba0a8;
}
.lb-tab--active { background: #22b455; color: #fff; }

/* ── Search ───────────────────────────────────────────────── */
.lb-search {
    width: 260px;
    max-width: 100%;
    box-sizing: border-box;
    padding: 10px 14px;
    background: #141619;
    border: 1px solid #2a2d33;
    color: #e8eaed;
    font-size: 13px;
    outline: none;
    border-radius: 2px;
}

/* ── Main layout ──────────────────────────────────────────── */
.lb-main {
    max-width: 1600px;
    margin: 0 auto;
    padding: 32px 40px 120px;
    display: flex;
    flex-wrap: wrap;
    gap: 28px;
    align-items: flex-start;
}
.lb-empty {
    flex: 1 1 100%;
    padding: 80px 0;
    text-align: center;
    color: #4a5158;
    font-size: 18px;
    font-weight: 700;
}

/* ── Podium top section ───────────────────────────────────── */
.lb-top {
    flex: 1 1 100%;
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.lb-top__head {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: baseline;
    justify-content: space-between;
}
.lb-top__title-row {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}
.lb-top__title {
    font-family: 'Archivo Black', sans-serif;
    font-size: 28px;
}
.lb-top__badge {
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px;
    letter-spacing: 2px;
    padding: 4px 10px;
    background: #1e2228;
    border: 1px solid #2fd46b;
    color: #2fd46b;
}
.lb-top__counts {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    letter-spacing: 1.5px;
    color: #7d828a;
}

/* ── Podium grid ──────────────────────────────────────────── */
.lb-podium-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 14px;
    align-items: end;
}

/* ── Podium card ──────────────────────────────────────────── */
.lb-card {
    position: relative;
    overflow: hidden;
    cursor: pointer;
    padding: 22px 20px 18px;
    background-color: #1a1c20;
    background-image: radial-gradient(120% 70% at 50% 0%, var(--glow, transparent), transparent 70%);
    border: 1px solid var(--card-border, #262a30);
    border-top: 3px solid var(--medal, #ccc);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    transition: transform .15s;
    color: #e8eaed;
}
.lb-card:hover { transform: translateY(-3px); }
.lb-card--first { padding: 30px 22px 22px; }

/* Watermark rank number */
.lb-card__rank-bg {
    position: absolute;
    left: 16px;
    top: 6px;
    font-family: 'Archivo Black', sans-serif;
    font-size: 120px;
    line-height: 1;
    color: var(--medal, #ccc);
    opacity: 0.1;
    pointer-events: none;
}
.lb-card--first .lb-card__rank-bg { font-size: 150px; }

.lb-card__title-row {
    align-self: stretch;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.lb-card__title {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    letter-spacing: 2.5px;
    font-weight: 700;
    color: var(--medal, #ccc);
}

/* Avatar */
.lb-av-wrap {
    position: relative;
    flex: none;
}
.lb-av {
    display: flex;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    color: #fff;
    background: var(--av-bg, #2a3038);
    overflow: hidden;
    text-decoration: none;
    width: var(--av-sz, 30px);
    height: var(--av-sz, 30px);
    font-size: calc(var(--av-sz, 30px) * 0.33);
}
.lb-av img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.lb-av--sm {
    --av-sz: 30px;
}
.lb-av--md {
    --av-sz: 52px;
}
.lb-av--md img { border-radius: 50%; }

/* Podium avatar sizes */
.lb-card .lb-av-wrap { width: 70px; height: 70px; }
.lb-card .lb-av      { --av-sz: 70px; box-shadow: 0 0 0 3px #1a1c20, 0 0 0 5px var(--medal, #ccc); }
.lb-card--first .lb-av-wrap { width: 92px; height: 92px; }
.lb-card--first .lb-av      { --av-sz: 92px; }

.lb-av__badge {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 26px;
    height: 26px;
    z-index: 2;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    font-weight: 700;
    color: #141619;
    background: var(--medal, #ccc);
    box-shadow: 0 0 0 3px #1a1c20;
}

/* Name + score block */
.lb-card__name-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    max-width: 100%;
}
.lb-card__name {
    font-weight: 800;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--name-col, #e8eaed);
    text-decoration: none;
    font-size: 18px;
}
.lb-card--first .lb-card__name { font-size: 22px; }

.lb-card__score {
    font-family: 'Archivo Black', sans-serif;
    line-height: 1;
    color: #fff;
    font-size: 30px;
}
.lb-card--first .lb-card__score { color: #f5c518; font-size: 40px; }
.lb-card__pts-lbl {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    letter-spacing: 1.5px;
    color: #7d828a;
}

/* Stats row inside card */
.lb-card__stats {
    align-self: stretch;
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    border-top: 1px solid #2a2d33;
    border-bottom: 1px solid #2a2d33;
}
.lb-card__stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 10px 4px;
}
.lb-card__stat--mid {
    border-left: 1px solid #2a2d33;
    border-right: 1px solid #2a2d33;
}
.lb-card__stat-val {
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    font-weight: 700;
}
.lb-card__winrate { color: #2fd46b; }
.lb-card__stat-lbl {
    font-family: 'JetBrains Mono', monospace;
    font-size: 8px;
    letter-spacing: 1.5px;
    color: #7d828a;
}
.lb-card__gap-val {
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    font-weight: 700;
    color: var(--gap-col, #ff6b6b);
}

/* ── Left sidebar ─────────────────────────────────────────── */
.lb-sidebar-l {
    flex: 1 1 200px;
    max-width: 240px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.lb-sidebar-l__label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px;
    letter-spacing: 2px;
    color: #6f747c;
    padding: 0 0 10px 14px;
}
.lb-fmt-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 14px;
    border-left: 3px solid transparent;
    color: #9ba0a8;
    margin-bottom: 2px;
    text-decoration: none;
}
.lb-fmt-link--active {
    border-left-color: #2fd46b;
    background: #20242a;
    color: #fff;
}
.lb-fmt-link__info {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.lb-fmt-link__name {
    font-weight: 800;
    font-size: 14px;
}
.lb-fmt-link__code {
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px;
    letter-spacing: 1.5px;
    color: #4a4f57;
}
.lb-fmt-link--active .lb-fmt-link__code { color: #2fd46b; }
.lb-fmt-link__cnt {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: #6f747c;
}

/* ── Center column ────────────────────────────────────────── */
.lb-center {
    flex: 999 1 600px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* ── Table box ────────────────────────────────────────────── */
.lb-table-box {
    background: #1a1c20;
    border: 1px solid #23262b;
    min-width: 0;
}
.lb-table-inner { min-width: 1000px; }

/* ── Filter bar ───────────────────────────────────────────── */
.lb-filter-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 16px;
    background: #141619;
    border-bottom: 1px solid #23262b;
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px;
    letter-spacing: 2px;
}
.lb-filter-bar__dot  { color: #2fd46b; }
.lb-filter-bar__pre  { color: #9ba0a8; }
.lb-filter-bar__val  { color: #e8eaed; font-weight: 700; }
.lb-filter-bar__sep  { color: #3a3f47; }
.lb-filter-bar__cnt  { color: #9ba0a8; }
.lb-filter-bar__clear {
    margin-left: auto;
    color: #ff6b6b;
    text-decoration: none;
    font-size: 9px;
    letter-spacing: 1.5px;
}

/* ── Table header ─────────────────────────────────────────── */
.lb-thead {
    display: grid;
    grid-template-columns: var(--grid-cols);
    align-items: center;
    height: 38px;
    padding: 0 16px;
    background: #0f1113;
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px;
    letter-spacing: 2px;
    color: #7d828a;
}
.lb-thead__r            { padding-left: 12px; }
.lb-thead__r--right     { text-align: right; }
.lb-thead__r--right     { text-align: center; }


/* ── No results ───────────────────────────────────────────── */
.lb-no-results {
    display: none;
    padding: 48px;
    text-align: center;
    color: #7d828a;
    font-size: 14px;
}

/* ── Rows ─────────────────────────────────────────────────── */
.lb-row {
    display: grid;
    grid-template-columns: var(--grid-cols);
    align-items: center;
    height: 52px;
    padding: 0 16px;
    cursor: pointer;
    background: var(--row-bg, #1a1c20);
    border-left: 3px solid var(--edge, transparent);
    border-bottom: 1px solid #202328;
}
.lb-row__rank {
    padding-left: 9px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    color: var(--rnk-col, #5d626a);
}
.lb-row__chg {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    font-weight: 700;
    color: var(--chg-col, #555a62);
}
.lb-row__player {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}
.lb-row__player-info {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}
.lb-row__mini {
    display: none;
    gap: 10px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    font-weight: 500;
    color: #7d828a;
    letter-spacing: 0;
}
.lb-row__mini b { color: #9ba0a8; font-weight: 700; }
.lb-row__name {
    font-weight: 700;
    font-size: 15px;
    overflow: hidden;
    text-overflow: ellipsis;
    width:fit-content;
    white-space: nowrap;
    color: #fff;
    text-decoration: none;
}
.lb-row__name--prem { color: #f5c518; }

/* Numeric cells */
.lb-row__val {
    text-align: right;
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    color: #8b9098;
}
.lb-row__rtg {
    text-align: center;
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    font-weight: 700;
    color: var(--rtg-col, #e8eaed);
}
.lb-row__rate {
    text-align: center;
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    font-weight: 700;
    color: #2fd46b;
}
.lb-row__muted {
    text-align: center;
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    color: #8b9098;
}
.lb-row__wins {
    text-align: center;
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    color: #f5c518;
}
.lb-row__kpr {
    text-align: center;
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    color: #f59e0b;
}
.lb-row__best {
    text-align: center;
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    color: #e8eaed;
}

/* ── Bar ──────────────────────────────────────────────────── */
.lb-bar-wrap {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}
.lb-bar-track {
    width: 56px;
    height: 2px;
    background: #2a2d33;
}
/* .lb-bar keeps direct style="width:X%;background:COLOR" — JS animates it */
.lb-bar { height: 2px; }

.lb-pts-val {
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    font-weight: 700;
    min-width: 40px;
    text-align: right;
}

/* ── Dots ─────────────────────────────────────────────────── */
.lb-dots {
    display: flex;
    gap: 3px;
    justify-content: center;
    align-items: center;
}
.lb-dot {
    width: 12px;
    height: 20px;
    display: inline-block;
    background: #2a2d33;
}
.lb-dot--played { background: #2fd46b; }

/* Format dot tooltip */
#lb-tip {
    position: fixed;
    display: none;
    background: #1a1c20;
    border: 1px solid #2a2d33;
    color: #e8eaed;
    font-size: 11px;
    white-space: nowrap;
    padding: 5px 9px;
    border-radius: 5px;
    pointer-events: none;
    z-index: 9999;
    font-family: 'JetBrains Mono', monospace;
    font-weight: 500;
    letter-spacing: 0.4px;
    box-shadow: 0 4px 16px rgba(0,0,0,.5);
}
#lb-tip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #2a2d33;
}

/* ── Pagination ───────────────────────────────────────────── */
.lb-pag { display: flex; gap: 6px; flex-wrap: wrap; }
.lb-pag__btn {
    width: 44px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    font-weight: 700;
    color: #b5b9c0;
    text-decoration: none;
    background: #1e2126;
    border: 1px solid #2e3238;
    border-radius: 6px;
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
    padding: 0;
    line-height: 1;
}
.lb-pag__btn:hover:not(.lb-pag__btn--active) {
    background: #262b31;
    border-color: #3d4249;
    color: #e8eaed;
}
.lb-pag__btn--active {
    background: #22b455;
    border-color: #22b455;
    color: #fff;
    cursor: default;
}
.lb-pag__ellipsis {
    width: 44px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #3a3f47;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
}

/* ── Right sidebar ────────────────────────────────────────── */
.lb-sidebar-r {
    flex: 1 1 300px;
    max-width: 360px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.lb-card-panel {
    background: #1a1c20;
    border: 1px solid #23262b;
    padding: 20px;
}
.lb-sb-top {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 18px;
}
.lb-sb-top > a { flex: none; }
.lb-sb-info {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
    overflow: hidden;
}
.lb-sb-name {
    font-weight: 800;
    font-size: 20px;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #e8eaed;
}
.lb-sb-rank {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    letter-spacing: 1.5px;
    color: #2fd46b;
}
.lb-sb-sect-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px;
    letter-spacing: 2px;
    color: #7d828a;
    margin-bottom: 6px;
}
.lb-sb-stat-row {
    display: grid;
    grid-template-columns: 1fr 44px 96px;
    gap: 8px;
    align-items: center;
    padding: 9px 8px;
    border-bottom: 1px solid #23262b;
}
.lb-sb-stat-row--last { border-bottom: none; }
.lb-sb-stat-label { font-weight: 700; font-size: 13px; }
.lb-sb-stat-rank  { font-family: 'JetBrains Mono', monospace; font-size: 11px; text-align: right; color: #f5c518; }
.lb-sb-stat-val   { font-family: 'JetBrains Mono', monospace; font-size: 11px; text-align: right; color: #8b9098; }
.lb-sb-stat-hl    { font-family: 'JetBrains Mono', monospace; font-size: 11px; text-align: right; color: #b5b9c0; }
.lb-sb-stat-played { font-family: 'JetBrains Mono', monospace; font-size: 11px; text-align: right; color: #8b9098; }

/* ── Scoring / rating box ─────────────────────────────────── */
.lb-score-box {
    background: #1a1c20;
    border: 1px solid #23262b;
    padding: 18px;
    font-family: 'JetBrains Mono', monospace;
}
.lb-score-box__label {
    font-size: 9px;
    letter-spacing: 2px;
    color: #7d828a;
    margin-bottom: 14px;
}
.lb-score-box__items { display: flex; flex-direction: column; gap: 10px; }
.lb-score-item {
    padding: 10px 12px;
    background: #0f1113;
    border-left: 3px solid var(--item-col, #4a4f57);
}
.lb-score-item__label {
    font-size: 9px;
    letter-spacing: 1.5px;
    color: var(--item-col, #4a4f57);
    margin-bottom: 4px;
}
.lb-score-item__desc {
    font-family: Manrope, sans-serif;
    font-size: 11px;
    color: #9ba0a8;
    line-height: 1.5;
}
.lb-score-footer {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #23262b;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.lb-score-footer__item { display: flex; flex-direction: column; gap: 2px; }
.lb-score-footer__lbl  { font-size: 9px; letter-spacing: 1px; color: #4a4f57; }
.lb-score-footer__val  { font-size: 15px; font-weight: 700; color: #e8eaed; }

/* ── Placement scoring bars ───────────────────────────────── */
.lb-sc-row {
    display: grid;
    grid-template-columns: 78px 1fr 48px;
    align-items: center;
    gap: 10px;
    height: 21px;
}
.lb-sc-place {
    font-size: 11px;
    color: #8b9098;
    text-align: right;
}
.lb-sc-track {
    height: 2px;
    background: #262a30;
}
/* .lb-sc-bar keeps direct style="width:X%;background:COLOR" — JS animates it */
.lb-sc-bar  { height: 2px; }
.lb-sc-val  { font-size: 11px; font-weight: 700; text-align: right; }
.lb-sc-note {
    margin-top: 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.lb-sc-note span {
    font-family: Manrope, sans-serif;
    font-size: 12px;
    line-height: 1.5;
    color: #9ba0a8;
}

/* ── Records box ──────────────────────────────────────────── */
.lb-records-box {
    background: #1a1c20;
    border: 1px solid #23262b;
    padding: 18px;
}
.lb-records-box__label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px;
    letter-spacing: 2px;
    color: #7d828a;
    margin-bottom: 8px;
}
.lb-record-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid #23262b;
}
.lb-record-row--last { border-bottom: none; }
.lb-record-info     { display: flex; flex-direction: column; gap: 3px; }
.lb-record-sub      { font-size: 11px; color: #8b9098; }
.lb-record-name     { font-weight: 800; font-size: 14px; }
.lb-record-val {
    font-family: 'JetBrains Mono', monospace;
    font-size: 15px;
    font-weight: 700;
    color: #e8eaed;
}
.lb-record-val--gold { color: #f5c518; }
.lb-record-val--blue { color: #7fd3ff; }

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE — format tabs, overlay, drawer/sheet + breakpoints
   ═══════════════════════════════════════════════════════════════ */

/* ── Format tab pills (hidden on desktop) ─────────────────────── */
.lb-fmttabs {
    display: none;
    position: sticky;
    top: 64px;
    z-index: 5;
    background: #141619;
    border-top: 1px solid #2a2d33;
    border-bottom: 1px solid #2a2d33;
}
.lb-fmttabs__inner {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding: 10px 16px;
    scrollbar-width: none;
}
.lb-fmttabs__inner::-webkit-scrollbar { display: none; }
.lb-fmttab {
    flex: none;
    display: flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 16px;
    cursor: pointer;
    white-space: nowrap;
    font-weight: 800;
    font-size: 14px;
    border-radius: 20px;
    background: #1a1c20;
    border: 1px solid #2a2d33;
    color: #9ba0a8;
    transition: background .15s, border-color .15s, color .15s;
}
.lb-fmttab--active {
    background: #1d2a21;
    border-color: #2fd46b;
    color: #fff;
}
.lb-fmttab__cnt {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    font-weight: 500;
    color: #6f747c;
}
.lb-fmttab--active .lb-fmttab__cnt { color: #2fd46b; }

/* ── Overlay backdrop ─────────────────────────────────────────── */
.lb-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 40;
    background: rgba(0,0,0,0.55);
}
.lb-overlay--show { display: block; }

/* ── Drawer / sheet controls (hidden on desktop) ──────────────── */
.lb-sidebar-r__handle {
    display: none;
    justify-content: center;
    padding: 10px 0 0;
    flex-shrink: 0;
}
.lb-sidebar-r__drag {
    width: 40px;
    height: 4px;
    border-radius: 2px;
    background: #3a3e45;
}
.lb-sidebar-r__close {
    display: none;
    width: 44px;
    height: 44px;
    border: 0;
    background: #23262b;
    color: #e8eaed;
    font-size: 16px;
    cursor: pointer;
    border-radius: 50%;
    flex: none;
    align-items: center;
    justify-content: center;
}
.lb-sidebar-r__close:hover { background: #2e3238; }

/* ─────────────────────────────────────────────────────────────────
   TABLET  768 – 1279 px
   ─────────────────────────────────────────────────────────────── */
@media (max-width: 1279px) {

    /* Show format pill tabs */
    .lb-fmttabs { display: block; }

    /* Podium — force 3 cols so narrow tablet doesn't collapse to 2 */
    .lb-podium-grid { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; }

    /* Kill left sidebar */
    .lb-sidebar-l { display: none !important; }

    /* Main container — full width, single column */
    .lb-main { padding: 24px 24px 80px; gap: 20px; }

    /* Right sidebar → side drawer (slides from right) */
    .lb-sidebar-r {
        position: fixed !important;
        top: 0; right: 0; bottom: 0;
        z-index: 41;
        width: 380px;
        max-width: 90vw;
        flex: none !important;
        overflow-y: auto;
        background: #1a1c20;
        border-left: 1px solid #2f3339;
        border-radius: 0;
        padding: 20px;
        box-sizing: border-box;
        box-shadow: -20px 0 50px rgba(0,0,0,0.5);
        display: flex !important;
        flex-direction: column;
        gap: 18px;
        transform: translateX(110%);
        transition: transform .3s cubic-bezier(.22,1,.36,1);
        animation: none !important;
    }
    .lb-sidebar-r--open { transform: translateX(0) !important; }

    /* Close button visible, sb-top stretches */
    .lb-sidebar-r__close { display: flex; }
    .lb-sb-top { align-items: center; }
    .lb-sb-info { flex: 1; min-width: 0; overflow: hidden; }

    /* Simplified table — 6 columns, no horizontal scroll */
    .lb-table-inner {
        min-width: unset !important;
        --grid-cols: 40px 40px minmax(0,2fr) 100px repeat(2, minmax(56px,80px)) !important;
    }
    /* Hide header cells and row cells beyond the 6th */
    .lb-thead > *:nth-child(n+7),
    .lb-row   > *:nth-child(n+7) { display: none !important; }

    /* Row height — slightly taller for touch targets */
    .lb-row { height: auto; min-height: 56px; }
}

/* ─────────────────────────────────────────────────────────────────
   MOBILE  < 768 px
   ─────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {

    /* Format tabs — slightly smaller pills, below 52px mobile navbar */
    .lb-fmttabs { top: 52px; }
    .lb-fmttab { height: 36px; font-size: 13px; padding: 0 14px; border-radius: 18px; }

    /* Hero section */
    .lb-section {
        padding: 24px 16px 16px;
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
    }
    .lb-hero__left { max-width: 100%; }
    .lb-hero__title { font-size: 40px; margin: 10px 0 14px; }
    .lb-hero__right { align-items: stretch; flex-direction: column; }
    .lb-tabs { width: 100%; }
    .lb-search { width: 100%; box-sizing: border-box; }

    /* Main layout — flush edges */
    .lb-main { padding: 10px 10px 80px; gap: 0; }

    /* Right sidebar → bottom sheet */
    .lb-sidebar-r {
        position: fixed !important;
        left: 0; right: 0; bottom: 0;
        top: auto !important;
        z-index: 41;
        width: 100% !important;
        max-width: 100% !important;
        max-height: 78vh;
        overflow-y: auto;
        background: #1a1c20;
        border-left: 0 !important;
        border-top: 1px solid #2f3339;
        border-radius: 16px 16px 0 0;
        padding: 0 16px 32px !important;
        box-sizing: border-box;
        box-shadow: 0 -20px 50px rgba(0,0,0,0.5);
        display: flex !important;
        flex-direction: column;
        gap: 14px;
        transform: translateY(110%) !important;
        transition: transform .3s cubic-bezier(.22,1,.36,1);
        animation: none !important;
        flex: none !important;
    }
    .lb-sidebar-r--open { transform: translateY(0) !important; }
    .lb-sidebar-r__handle { display: flex; }
    .lb-card-panel { padding: 14px; }

    /* Podium — 3 compact cards at 390px */
    .lb-top { padding: 0; }
    .lb-top__head { padding: 14px 16px 10px; }
    .lb-top__title { font-size: 18px; }
    .lb-top__counts { font-size: 9px; }

    /* 3-column grid with padding */
    .lb-podium-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
        padding: 0 16px;
    }

    /* Card: compact per design mPad */
    .lb-card { padding: 14px 6px 12px; gap: 8px; }
    .lb-card--first { padding: 20px 6px 14px; }

    /* Rank watermark: 60px for all */
    .lb-card__rank-bg { font-size: 60px; left: 6px; }
    .lb-card--first .lb-card__rank-bg { font-size: 60px; }

    /* Avatar sizes: 46px (others) / 60px (first) */
    .lb-card .lb-av-wrap { width: 46px; height: 46px; }
    .lb-card .lb-av { --av-sz: 46px; box-shadow: 0 0 0 2px #1a1c20, 0 0 0 4px var(--medal, #ccc); }
    .lb-card--first .lb-av-wrap { width: 60px; height: 60px; }
    .lb-card--first .lb-av { --av-sz: 60px; }

    /* Rank badge: 20px */
    .lb-card .lb-av__badge { width: 20px; height: 20px; font-size: 10px; bottom: -5px; right: -5px; box-shadow: 0 0 0 2px #1a1c20; }

    /* Hide title row (CHAMPION / RUNNER-UP) */
    .lb-card__title-row { display: none !important; }

    /* Name: 13px */
    .lb-card__name { font-size: 13px; }
    .lb-card--first .lb-card__name { font-size: 13px; }

    /* Score: mVal = 19px / 24px */
    .lb-card__score { font-size: 19px; }
    .lb-card--first .lb-card__score { font-size: 24px; }

    /* pts label */
    .lb-card__pts-lbl { font-size: 7px; }

    /* Stats: hide wins+winrate, keep only gap row */
    .lb-card__stats { grid-template-columns: 1fr; border-top: 0; border-bottom: 0; }
    .lb-card__stat:nth-child(1),
    .lb-card__stat:nth-child(2) { display: none !important; }
    .lb-card__stat:last-child { padding: 0 2px 4px; }
    .lb-card__stat-lbl { display: none; }
    .lb-card__gap-val { font-size: 9px; }

    /* Table box — flush to edges */
    .lb-table-box { border-left: 0; border-right: 0; border-radius: 0; margin-top: 14px; }

    /* 4-col grid: rank(34px) | avatar(36px) | player-info(1fr) | primary(auto) */
    .lb-table-inner {
        min-width: unset !important;
        --grid-cols: 34px 36px minmax(0,1fr) auto !important;
    }

    /* Hide header row */
    .lb-thead { display: none !important; }

    /* Row layout: 64px min-height per design */
    .lb-row {
        height: auto;
        min-height: 64px;
        padding: 8px 16px 8px 13px;
    }
    /* Expand lb-row__player so av-wrap and player-info become direct grid children */
    .lb-row__player { display: contents; }

    /* Avatar: 36px circle */
    .lb-row .lb-av-wrap { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; }
    .lb-row .lb-av--sm { --av-sz: 36px; }

    /* Player info: name + mini stats stacked */
    .lb-row__player-info { flex-direction: column; justify-content: center; margin-left:5px}

    /* Mini stats visible on mobile */
    .lb-row__mini { display: flex; }

    /* Hide chg and all other stat cells */
    .lb-row > *:not(.lb-row__rank):not(.lb-row__player):not(.lb-row__primary) {
        display: none !important;
    }

    /* Primary stat — right-aligned mono */
    .lb-row__primary {
        display: block !important;
        text-align: right;
        font-family: 'JetBrains Mono', monospace;
        font-size: 15px;
        font-weight: 700;
    }
    /* pts bar-wrap: hide the bar, keep the number */
    .lb-bar-wrap.lb-row__primary {
        display: flex !important;
        flex-direction: column;
        align-items: flex-end;
        gap: 0;
    }
    .lb-bar-wrap.lb-row__primary .lb-bar-track { display: none !important; }
    .lb-bar-wrap.lb-row__primary .lb-pts-val { font-size: 15px; min-width: unset; }

    /* Pagination */
    .lb-pag { padding: 14px 16px; justify-content: center; flex-wrap: wrap; }
    .lb-pag__btn { width: 40px; height: 40px; }

    /* Filter bar */
    .lb-filter-bar { padding: 8px 14px; font-size: 8px; gap: 6px; }
    .lb-filter-bar__clear { font-size: 8px; }
}