/* Рейтинг игроков (public/leaderboard.php, elements/leaderboard/*, js/pages/leaderboard.js) */

.lb {
    --lb-card: var(--card-bg, #141419);
    --lb-border: var(--border-color, #22222b);
    --lb-soft: var(--hover-bg-color, #1c1c24);
    --lb-text: var(--text-color, #fff);
    --lb-muted: var(--text-muted, #8b8b98);
    --lb-accent: var(--primary-color, #6a5aff);
    --lb-accent-soft: color-mix(in srgb, var(--lb-accent) 14%, transparent);
    --lb-gold: #e8a317;
    --lb-silver: #9aa3b2;
    --lb-bronze: #c27a45;

    max-width: var(--page-max);
    margin: 0 auto;
    padding: 26px var(--page-pad) 44px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    color: var(--lb-text);
}
.lb h1 { font-weight: normal; margin: 0; font-size: 30px; }
.lb :is(a, button, input):focus-visible { outline: 2px solid var(--lb-accent); outline-offset: 2px; }
.lb-head p { margin: 4px 0 0; font-size: 13px; color: var(--lb-muted); }
.lb-muted { margin: 0; font-size: 13px; color: var(--lb-muted); }
.lb-muted a { color: var(--lb-accent); }
.lb-lbl { font-size: 12px; color: var(--lb-muted); }
.lb-ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Категории */
.lb-cats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.lb-cat { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--lb-border); background: var(--lb-card); color: var(--lb-text); text-decoration: none; min-width: 0; }
.lb-cat:hover { border-color: color-mix(in srgb, var(--lb-accent) 45%, var(--lb-border)); }
.lb-cat > i { width: 38px; height: 38px; flex: none; display: grid; place-items: center; border-radius: 11px; background: var(--lb-soft); color: var(--lb-muted); font-size: 16px; }
.lb-cat span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lb-cat b { font-weight: normal; font-size: 15px; }
.lb-cat small { font-size: 12px; color: var(--lb-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-cat.is-on { border-color: var(--lb-accent); background: var(--lb-accent-soft); }
.lb-cat.is-on > i { background: var(--lb-accent); color: #fff; }

/* Панель: период, круг, поиск */
.lb-bar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.lb-seg { display: flex; padding: 3px; border-radius: 11px; border: 1px solid var(--lb-border); background: var(--lb-card); }
.lb-seg a { padding: 6px 13px; border-radius: 8px; font-size: 13px; color: var(--lb-muted); text-decoration: none; white-space: nowrap; }
.lb-seg a:hover { color: var(--lb-text); }
.lb-seg a.is-on { background: var(--lb-accent); color: #fff; }
.lb-search { flex: 1; min-width: 220px; display: flex; align-items: center; gap: 10px; margin: 0; padding: 0 14px; border-radius: 12px; border: 1px solid var(--lb-border); background: var(--lb-card); color: var(--lb-muted); }
.lb-search:focus-within { border-color: var(--lb-accent); }
.lb-search input { flex: 1; min-width: 0; padding: 10px 0; border: 0; outline: 0; background: none; color: var(--lb-text); font: inherit; font-size: 14px; }
.lb-search input::placeholder { color: var(--lb-muted); }

/* Раскладка */
.lb-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 14px; align-items: start; }
.lb-main { display: flex; flex-direction: column; gap: 10px; min-width: 0; transition: opacity 0.15s ease; }
.lb-main.is-loading { opacity: 0.55; }
.lb-side { display: flex; flex-direction: column; gap: 10px; position: sticky; top: 16px; }
.lb-card { padding: 16px; border-radius: 16px; border: 1px solid var(--lb-border); background: var(--lb-card); }

/* Подиум */
.lb-podium { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; gap: 10px; }
.lb-pd { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; text-align: center; }
.lb-pd-who { display: flex; flex-direction: column; align-items: center; gap: 8px; max-width: 100%; color: var(--lb-text); text-decoration: none; }
.lb-pd-who:hover .lb-pd-name { color: var(--lb-accent); }
.lb-pd-ava { position: relative; }
.lb-pd-ava img { width: 64px; height: 64px; border-radius: 16px; display: block; object-fit: cover; image-rendering: pixelated; background: var(--lb-soft); border: 2px solid var(--lb-c); }
.lb-pd.is-1 .lb-pd-ava img { width: 80px; height: 80px; border-radius: 20px; }
.lb-pd-place { position: absolute; right: -8px; bottom: -8px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--lb-c); color: #fff; font-size: 13px; border: 3px solid var(--lb-card); }
.lb-pd-name { max-width: 100%; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-pd-name small { font-size: 11px; color: var(--lb-muted); }
.lb-pd-value { font-size: 13px; color: var(--lb-muted); }
.lb-pd-step { width: 100%; height: 56px; margin-top: 4px; border-radius: 14px 14px 6px 6px; border: 1px solid color-mix(in srgb, var(--lb-c) 35%, var(--lb-border)); background: linear-gradient(to bottom, color-mix(in srgb, var(--lb-c) 22%, transparent), color-mix(in srgb, var(--lb-c) 4%, transparent)); display: grid; place-items: center; color: var(--lb-c); font-size: 20px; }
.lb-pd.is-1 { --lb-c: var(--lb-gold); }
.lb-pd.is-1 .lb-pd-step { height: 92px; }
.lb-pd.is-2 { --lb-c: var(--lb-silver); }
.lb-pd.is-2 .lb-pd-step { height: 70px; }
.lb-pd.is-3 { --lb-c: var(--lb-bronze); }
.lb-pd.is-me .lb-pd-step { box-shadow: inset 0 0 0 2px var(--lb-accent); }

/* Список */
.lb-found { margin: 0; font-size: 13px; color: var(--lb-muted); }
.lb-list { list-style: none; margin: 0; padding: 4px; border-radius: 16px; border: 1px solid var(--lb-border); background: var(--lb-card); display: flex; flex-direction: column; }
.lb-row { display: grid; grid-template-columns: 40px minmax(0, 1fr) minmax(60px, 180px) auto; align-items: center; gap: 12px; padding: 8px 12px; border-radius: 12px; }
.lb-row + .lb-row { border-top: 1px solid color-mix(in srgb, var(--lb-border) 60%, transparent); }
.lb-row:hover { background: var(--lb-soft); }
.lb-row.is-me { background: var(--lb-accent-soft); border-top-color: transparent; }
.lb-row.is-me + .lb-row { border-top-color: transparent; }
.lb-place { font-size: 15px; color: var(--lb-muted); text-align: center; font-variant-numeric: tabular-nums; }
.lb-row.is-top-1 .lb-place { color: var(--lb-gold); }
.lb-row.is-top-2 .lb-place { color: var(--lb-silver); }
.lb-row.is-top-3 .lb-place { color: var(--lb-bronze); }
.lb-who { display: flex; align-items: center; gap: 10px; min-width: 0; color: var(--lb-text); text-decoration: none; }
.lb-who:hover .lb-name { color: var(--lb-accent); }
.lb-ava { width: 34px; height: 34px; flex: none; border-radius: 9px; object-fit: cover; image-rendering: pixelated; background: var(--lb-soft); }
.lb-name { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-you { flex: none; padding: 1px 7px; border-radius: 6px; font-size: 11px; background: var(--lb-accent); color: #fff; }
.lb-track { height: 6px; border-radius: 3px; background: var(--lb-soft); overflow: hidden; }
.lb-track span { display: block; height: 100%; border-radius: 3px; background: color-mix(in srgb, var(--lb-accent) 70%, transparent); }
.lb-value { font-size: 14px; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.lb-list-me { border-color: var(--lb-accent); }
.lb-list-me::before { content: '···'; display: block; margin: -2px 0 2px; text-align: center; color: var(--lb-muted); letter-spacing: 3px; }

.lb-more { align-self: center; padding: 10px 18px; border-radius: 10px; border: 1px solid var(--lb-border); background: var(--lb-soft); color: var(--lb-text); font-size: 14px; text-decoration: none; }
.lb-more.is-loading { opacity: 0.6; pointer-events: none; }
.lb-empty { padding: 50px 20px; border-radius: 16px; border: 1px dashed var(--lb-border); display: flex; flex-direction: column; align-items: center; gap: 12px; color: var(--lb-muted); text-align: center; }
.lb-empty i { font-size: 30px; opacity: 0.6; }
.lb-empty p { margin: 0; }

/* Моё место и сводка */
.lb-mine { display: flex; flex-direction: column; gap: 8px; }
.lb-mine-row { display: flex; align-items: baseline; gap: 8px; }
.lb-mine-place { font-weight: normal; font-size: 40px; line-height: 1; color: var(--lb-accent); font-variant-numeric: tabular-nums; }
.lb-mine-of { font-size: 14px; color: var(--lb-muted); }
.lb-mine-val { font-size: 14px; }
.lb-mine-val b { font-weight: normal; }
.lb-mine-next { margin: 0; padding: 9px 11px; border-radius: 10px; background: var(--lb-soft); font-size: 13px; line-height: 1.45; overflow-wrap: anywhere; }
.lb-mine-next b { font-weight: normal; color: var(--lb-accent); }
.lb-mine-next.is-lead { background: color-mix(in srgb, var(--lb-gold) 14%, transparent); color: var(--lb-gold); }
.lb-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.lb-stats div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.lb-stats b { font-weight: normal; font-size: 16px; }

@media (max-width: 1100px) {
    .lb-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .lb-layout { grid-template-columns: minmax(0, 1fr); }
    .lb-side { position: static; order: -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
    .lb { padding: 16px var(--page-pad) 30px; gap: 12px; }
    .lb h1 { font-size: 24px; }
    .lb-cat { padding: 10px; gap: 10px; }
    .lb-cat > i { width: 32px; height: 32px; font-size: 14px; }
    .lb-cat small { display: none; }
    .lb-seg { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
    .lb-search { min-width: 0; flex-basis: 100%; }
    .lb-side { grid-template-columns: minmax(0, 1fr); }
    .lb-pd-ava img { width: 52px; height: 52px; }
    .lb-pd.is-1 .lb-pd-ava img { width: 64px; height: 64px; }
    .lb-pd-name { font-size: 13px; }
    .lb-pd-value { font-size: 12px; }
    .lb-row { grid-template-columns: 30px minmax(0, 1fr) auto; gap: 8px; padding: 8px; }
    .lb-track { display: none; }
}