/*
 * Public ranking page styles.
 *
 * Mobile-first 390px obligatoire (cohérent profile.css pattern). Large
 * screens render the rank list as a 4-col grid (rank | avatar | name |
 * value). Mobile collapses to a 3-col layout where the rank badge
 * stacks above the name + value pair.
 *
 * Design tokens come from server-rendered :root inline style in
 * leaderboardRender.buildPaletteStyle (9-template inheritance).
 */

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--pe-lb-bg, #0a0a0a);
    color: var(--pe-lb-fg, #f4f4f4);
    font-family: var(--pe-platform-font-body, -apple-system, BlinkMacSystemFont,
        "Segoe UI", Roboto, Helvetica, Arial, sans-serif);
    font-size: 14px;
    line-height: 1.5;
    min-height: 100vh;
}

.lb-boot {
    text-align: center;
    padding: 64px 16px;
    color: var(--pe-lb-muted, #888);
    font-size: 14px;
}

.lb-page {
    /* Standalone route keeps 720px. Platform pages set --pe-lb-max-width
       to relax this cap and let the page content width own the layout. */
    max-width: var(--pe-lb-max-width, 720px);
    margin: 0 auto;
    padding: 32px 16px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.lb-subnav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 16px;
}

.lb-subnav__tab {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    padding: 7px 12px;
    border: 1px solid var(--lobby-card-border, var(--pe-lb-border, rgba(255, 255, 255, 0.1)));
    border-radius: 6px;
    color: var(--lobby-card-title, var(--pe-lb-fg, #f4f4f4));
    background: var(--lobby-card-bg, var(--pe-lb-card-bg, rgba(255, 255, 255, 0.04)));
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
}

.lb-subnav__tab:hover {
    background: var(--pe-lb-row-hover, rgba(255, 255, 255, 0.06));
}

.lb-subnav__tab.is-active {
    color: #0a0a0a;
    background: var(--pe-lb-accent, #d4af37);
    border-color: var(--pe-lb-accent, #d4af37);
}

.lb-subnav--empty {
    color: var(--pe-lb-muted, #888);
}

/* Mobile category selector — JS derives a compact native <select> from the
   tab stack (.lb-subnav__tab). Desktop keeps the tab stack; below 768px the
   stack is hidden and the select shown. The two are mutually exclusive and
   only swap once JS has flagged the nav (.lb-subnav--enhanced), so a JS-off
   page keeps the working tab stack. */
.lb-subnav-select {
    display: none;
    position: relative;
    margin: 0 0 16px;
}

.lb-subnav-select__control {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 100%;
    min-height: 44px;
    padding: 10px 44px 10px 14px;
    border: 1px solid var(--lobby-card-border, var(--pe-lb-border, rgba(255, 255, 255, 0.1)));
    border-radius: 10px;
    color: var(--lobby-card-title, var(--pe-lb-fg, #f4f4f4));
    background: var(--lobby-card-bg, var(--pe-lb-card-bg, rgba(255, 255, 255, 0.04)));
    font-family: inherit;
    font-weight: 600;
    font-size: 15px;
    line-height: 1.2;
    text-overflow: ellipsis;
    cursor: pointer;
}

.lb-subnav-select__control:focus-visible {
    outline: 2px solid var(--pe-lb-accent, #d4af37);
    outline-offset: 2px;
}

.lb-subnav-select__chevron {
    position: absolute;
    top: 50%;
    right: 14px;
    transform: translateY(-50%);
    display: flex;
    pointer-events: none;
    color: var(--pe-lb-muted, #888);
}

@media (max-width: 767px) {
    .lb-subnav--enhanced {
        display: none;
    }
    .lb-subnav-select {
        display: block;
    }
}

.lb-header {
    text-align: center;
    border-bottom: 1px solid var(--pe-lb-border, rgba(255, 255, 255, 0.1));
    padding-bottom: 16px;
}

.lb-title {
    margin: 0 0 6px;
    font-family: var(--pe-platform-font-heading, var(--pe-platform-font-body,
        -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial,
        sans-serif));
    font-size: clamp(20px, 4vw, 28px);
    font-weight: 700;
    color: var(--lobby-hero-title, var(--pe-lb-fg, #f4f4f4));
}

.lb-subline {
    margin: 0;
    color: var(--pe-lb-muted, #888);
    font-size: 13px;
}

.lb-dot {
    margin: 0 6px;
    color: var(--pe-lb-muted, #888);
}

.lb-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.lb-row {
    display: grid;
    grid-template-columns: 56px 36px 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 10px 14px;
    background: var(--lobby-card-bg, var(--pe-lb-card-bg, rgba(255, 255, 255, 0.04)));
    border: 1px solid var(--lobby-card-border, var(--pe-lb-border, rgba(255, 255, 255, 0.1)));
    border-radius: 8px;
    transition: background 0.15s ease;
}

.lb-row:hover {
    background: var(--pe-lb-row-hover, rgba(255, 255, 255, 0.06));
}

.lb-rank {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    text-align: center;
    padding: 4px 8px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.04);
    color: var(--pe-lb-fg, #f4f4f4);
    font-size: 14px;
}

.lb-rank--gold {
    background: var(--pe-lb-medal-gold, #f5c842);
    color: #0a0a0a;
}

.lb-rank--silver {
    background: var(--pe-lb-medal-silver, #c0c0c0);
    color: #0a0a0a;
}

.lb-rank--bronze {
    background: var(--pe-lb-medal-bronze, #cd7f32);
    color: #fff;
}

.lb-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--pe-lb-accent, #d4af37);
    color: #0a0a0a;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 16px;
}

img.lb-avatar {
    object-fit: cover;
}

.lb-name {
    font-size: 15px;
    color: var(--lobby-card-title, var(--pe-lb-fg, #f4f4f4));
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lb-name--link:hover {
    text-decoration: underline;
}

.lb-name--anon {
    color: var(--pe-lb-muted, #888);
    font-style: italic;
}

.lb-value {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: var(--lobby-card-stat-value, var(--pe-lb-accent, #d4af37));
    font-size: 15px;
    text-align: right;
}

.lb-empty {
    text-align: center;
    padding: 32px 16px;
    color: var(--pe-lb-muted, #888);
    background: var(--pe-lb-card-bg, rgba(255, 255, 255, 0.04));
    border: 1px dashed var(--pe-lb-border, rgba(255, 255, 255, 0.1));
    border-radius: 8px;
}

.lb-rewards {
    text-align: center;
    color: var(--pe-lb-muted, #888);
    font-size: 12px;
    border-top: 1px solid var(--pe-lb-border, rgba(255, 255, 255, 0.1));
    padding-top: 16px;
}

.lb-rewards-label {
    font-weight: 600;
    color: var(--pe-lb-fg, #f4f4f4);
}

.lb-error {
    text-align: center;
    padding: 32px 16px;
    color: #ff8b8b;
    background: rgba(255, 80, 80, 0.08);
    border: 1px solid rgba(255, 80, 80, 0.25);
    border-radius: 8px;
    margin: 24px auto;
    max-width: 480px;
}

@media (max-width: 480px) {
    .lb-page {
        padding: 16px 10px;
        gap: 16px;
    }
    .lb-row {
        grid-template-columns: 44px 32px 1fr auto;
        gap: 8px;
        padding: 8px 10px;
    }
    .lb-avatar {
        width: 32px;
        height: 32px;
        font-size: 14px;
    }
    .lb-name {
        font-size: 14px;
    }
    .lb-value {
        font-size: 14px;
    }
    .lb-rank {
        padding: 3px 6px;
        font-size: 13px;
    }
}