/* G8RAGE leaderboards — scoped to .g8-lb (markup is built by script.js) */
.g8-lb .is-mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.g8-lb .is-muted{color:var(--muted);font-size:.9em}
.g8-lb .is-best{color:#c084fc}
.g8-lb__state{color:var(--muted);padding:16px 20px}

.g8-lb__filters{display:grid;gap:14px;margin-bottom:20px}
@media (min-width:1080px){.g8-lb__filters{grid-template-columns:1fr auto auto;align-items:start;gap:24px}}
.g8-lb__filter{display:flex;flex-wrap:wrap;gap:8px}
@media (max-width:1079px){.g8-lb__filter{flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px;scrollbar-width:none}}
.g8-lb__chip{display:inline-flex;align-items:center;min-height:36px;padding:0 14px;font:inherit;font-size:.85rem;color:var(--text-2);background:transparent;border:1px solid var(--line);border-radius:999px;cursor:pointer;transition:.2s;white-space:nowrap}
.g8-lb__chip:hover{border-color:var(--text-2);color:var(--text)}
.g8-lb__chip.is-active{background:var(--text);border-color:var(--text);color:#0b0b0b}

.g8-lb__results{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);overflow:hidden}
.g8-lb__row{display:grid;gap:6px;color:var(--text);transition:background .2s;border-bottom:1px solid var(--line)}
.g8-lb__row:last-child{border-bottom:0}
.g8-lb__row:not(.g8-lb__row--head){cursor:pointer}
.g8-lb__row--head{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.g8-lb__row .position{grid-area:position;font-family:var(--font-mono);font-size:.82em;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:clip}
.g8-lb__row .driver{min-width:0;overflow-wrap:anywhere}
.g8-lb__row .driver{grid-area:driver;font-weight:500}
.g8-lb__row .car{grid-area:car;color:var(--text-2)}
.g8-lb__row .split1{grid-area:split1}
.g8-lb__row .split2{grid-area:split2}
.g8-lb__row .split3{grid-area:split3}
.g8-lb__row .to-first-percentage{grid-area:pct}
.g8-lb__row .to-first-diff{grid-area:diff}
.g8-lb__row .bestLap{grid-area:best;text-align:right}

.g8-lb__more{margin:16px 20px;min-height:40px;padding:0 18px;font:inherit;font-size:.85rem;background:transparent;color:var(--text);border:1px solid var(--line);border-radius:999px;cursor:pointer}
.g8-lb__more:hover{border-color:var(--text-2)}

.g8-lb__modal{padding:28px 32px;width:min(800px,calc(100vw - 32px));background:var(--surface);color:var(--text);border:1px solid var(--line);border-radius:var(--radius);font-family:var(--font-body)}
.g8-lb__modal::backdrop{background:#000c;backdrop-filter:blur(6px)}
.g8-lb__modal h4{margin:0 0 8px;font-weight:500;font-size:1.4rem}
.g8-lb__modal p{margin:6px 0;font-size:.92rem;color:var(--text-2)}
.g8-lb__modal form{display:flex;justify-content:flex-end;margin-top:16px}
.g8-lb__close{min-height:40px;padding:0 18px;background:var(--accent);color:#0b0b0b;font:inherit;font-weight:600;border:0;border-radius:999px;cursor:pointer}

@media (min-width:1080px){
    .g8-lb__results{max-height:680px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#3a3a40 transparent}
    .g8-lb__row{padding:14px 20px;grid-template-columns:56px auto 20% 8% 8% 8% 8% 10% 10%;grid-template-areas:"position driver car split1 split2 split3 pct diff best";align-items:center}
    .g8-lb__row--peace{grid-template-columns:56px auto 20% 8% 10% 10%;grid-template-areas:"position driver car pct diff best"}
    .g8-lb__row--race{grid-template-columns:56px auto 30% 15%;grid-template-areas:"position driver car best"}
    .g8-lb__row--head{position:sticky;top:0;z-index:1;background:var(--surface)}
    .g8-lb__row:not(.g8-lb__row--head):hover,.g8-lb__row:not(.g8-lb__row--head):focus-visible{background:var(--surface-2);outline:none}
}
@media (max-width:1079px){
    .g8-lb .is-desktop,.g8-lb .split1,.g8-lb .split2,.g8-lb .split3,.g8-lb .to-first-percentage{display:none}
    .g8-lb__row{padding:12px 14px;font-size:.9em;grid-template-columns:48px 40px auto 55px 80px;grid-template-areas:"position driver driver driver best" ". car car car diff"}
    .g8-lb__row--head{grid-template-areas:"position driver driver best best"}
    .g8-lb__row--head .car,.g8-lb__row--head .to-first-diff{display:none}
    .g8-lb__row .to-first-diff{text-align:right}
}

/* loading: spinner + skeleton rows */
.g8-lb__loading{display:grid;gap:10px;padding:28px 20px}
.g8-lb__loading-head{display:flex;align-items:center;justify-content:center;gap:12px;padding-bottom:8px;color:var(--muted);font-size:.9rem}
.g8-lb__spinner{flex-shrink:0;width:22px;height:22px;border:2.5px solid var(--line);border-top-color:var(--accent);border-radius:50%;animation:g8-lb-spin .75s linear infinite}
.g8-lb__skeleton{height:44px;border-radius:12px;background:linear-gradient(90deg,var(--surface-2) 0%,#232327 40%,var(--surface-2) 80%);background-size:200% 100%;animation:g8-lb-shimmer 1.4s ease-in-out infinite}
.g8-lb__skeleton:nth-child(odd){opacity:.7}
.g8-lb__modal .g8-lb__loading{padding:16px 0}
.g8-lb__modal .g8-lb__loading-head{justify-content:flex-start}
@keyframes g8-lb-spin{to{transform:rotate(360deg)}}
@keyframes g8-lb-shimmer{0%{background-position:100% 0}100%{background-position:-100% 0}}
@media (prefers-reduced-motion:reduce){.g8-lb__spinner{animation-duration:2s}.g8-lb__skeleton{animation:none}}