/* leaderboard.css — рейтинговая таблица (табло) */

:root {
    --lb-yellow: #ffc546;
    --lb-bg: #0e0e0e;
    --lb-row-border: #3a3a3a;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--lb-bg, #0e0e0e);
    color: #fff;
    font-family: 'Commissioner', Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}

.lb {
    max-width: 1920px;
    margin: 0 auto;
    padding: 50px 60px 70px;
}

.lb__title {
    font-family: 'Wadik', Arial, sans-serif;
    font-weight: 400;
    font-size: 72px;
    line-height: 1;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--lb-yellow, #ffc546);
    margin: 0 0 40px;
}

/* Две колонки */
.lb__cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
}
.lb__col {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Шапка колонки */
.lb__head {
    display: grid;
    grid-template-columns: 90px 1fr 260px;
    align-items: center;
    padding: 16px 26px;
    border: 1px solid var(--lb-row-border, #3a3a3a);
    border-radius: 12px;
    color: #cfcfcf;
    font-size: 20px;
}
.lb__head-num { color: #cfcfcf; }

/* Строки */
.lb__rows { display: flex; flex-direction: column; gap: 14px; }

.lb__row {
    display: grid;
    grid-template-columns: 90px 1fr 260px;
    align-items: center;
    padding: 14px 26px;
    border: 1px solid var(--lb-row-border, #3a3a3a);
    border-radius: 14px;
    background: #111;
    transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}
/* Подсветка строки, чей счёт только что изменился */
.lb__row.is-bumped {
    border-color: var(--lb-yellow, #ffc546);
    box-shadow: 0 0 0 1px var(--lb-yellow, #ffc546) inset;
}

.lb__num {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--lb-yellow, #ffc546);
    color: #0e0e0e;
    font-family: 'Wadik', Arial, sans-serif;
    font-size: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.lb__name {
    font-size: 26px;
    color: #fff;
    padding-right: 20px;
    /* Длинное ФИО переносится на вторую строку, а не обрезается */
    white-space: normal;
    overflow-wrap: break-word;
    word-break: break-word;
    line-height: 1.2;
}
.lb__votes {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 24px;
    color: #fff;
    white-space: nowrap;
}
.lb__heart { color: var(--lb-yellow, #ffc546); font-size: 22px; }
.lb__count { font-variant-numeric: tabular-nums; }

/* Число «прыгает» при изменении */
.lb__count.bump { animation: lbBump 0.4s ease; }
@keyframes lbBump {
    0% { transform: scale(1); }
    40% { transform: scale(1.3); color: var(--lb-yellow, #ffc546); }
    100% { transform: scale(1); }
}

.lb__empty {
    text-align: center;
    color: #888;
    font-size: 22px;
    padding: 60px 0;
}

/* ── Адаптив ── */
@media (max-width: 1400px) {
    .lb__title { font-size: 56px; }
    .lb__head, .lb__row { grid-template-columns: 78px 1fr 220px; }
    .lb__name, .lb__votes { font-size: 22px; }
}
@media (max-width: 1000px) {
    .lb { padding: 30px 20px 50px; }
    .lb__cols { grid-template-columns: 1fr; gap: 14px; }
    .lb__title { font-size: 40px; margin-bottom: 24px; }
    /* На узком экране вторую колонку-шапку прячем, строки идут одним списком */
    .lb__col + .lb__col .lb__head { display: none; }
}
@media (max-width: 560px) {
    .lb__head, .lb__row { grid-template-columns: 54px 1fr 130px; padding: 12px 14px; }
    .lb__num { width: 40px; height: 40px; font-size: 18px; }
    .lb__name { font-size: 17px; }
    .lb__votes { font-size: 15px; gap: 6px; }
    .lb__head { font-size: 14px; }
    .lb__title { font-size: 30px; }
}