/* ==========================================================================
   FASOOLLKA — рейтинг зрителей («Котёл ада» / «Райский чат»)
   ========================================================================== */

.rating {
    position: relative;
    z-index: 10;
    width: min(1320px, 100%);
    margin: 0 auto;
    padding: clamp(10px, 2vh, 20px) clamp(16px, 3vw, 40px) 60px;
}

.rating__hero { text-align: center; margin-bottom: clamp(18px, 3vh, 30px); }
.rating__title {
    font-family: var(--serif);
    font-weight: 700;
    font-style: italic;
    font-size: clamp(48px, 8vw, 104px);
    padding-bottom: .06em;
}
.rating__lead { max-width: 56ch; margin: 6px auto 0; color: var(--text-soft); }
:root[data-theme="hell"] .rating__lead { text-shadow: 0 1px 2px #000, 0 0 14px #000, 0 0 24px rgba(0, 0, 0, .8); }
:root[data-theme="heaven"] .rating__lead { text-shadow: 0 0 10px #fff; }
.rating__status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    padding: 6px 14px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--ghost-bg);
    -webkit-backdrop-filter: blur(8px);
            backdrop-filter: blur(8px);
    font-size: 13px;
    color: var(--text-soft);
}
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-faint); }
.rating__status.is-on .status-dot { background: #2ecc71; box-shadow: 0 0 0 0 #2ecc71; animation: livePulse 1.8s ease-out infinite; }
.rating__status.is-live .status-dot { background: #ff2e4d; box-shadow: 0 0 0 0 #ff2e4d; }
.rating__status.is-off .status-dot { background: #e0a030; }

/* ---------- Плитки со статистикой ---------- */
.tiles {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(10px, 1.4vw, 18px);
    margin-bottom: clamp(18px, 3vh, 28px);
}
.tile {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: clamp(14px, 2.4vh, 22px) 12px;
    border-radius: var(--panel-radius);
    border: 1px solid var(--panel-border);
    background: var(--panel-bg);
    -webkit-backdrop-filter: blur(10px);
            backdrop-filter: blur(10px);
    box-shadow: var(--panel-shadow);
    text-align: center;
    overflow: hidden;
}
.tile::after {
    content: "";
    position: absolute;
    left: 14px; right: 14px; top: -1px;
    height: var(--ledge-h);
    background: var(--ledge);
    box-shadow: var(--ledge-glow);
}
.tile__n {
    font-family: var(--serif);
    font-weight: 700;
    font-size: clamp(30px, 3.6vw, 46px);
    line-height: 1;
    font-variant-numeric: tabular-nums lining-nums;
}
:root[data-theme="hell"] .tile__n { color: var(--accent-pale); text-shadow: 0 0 18px rgba(255, 60, 10, .7); }
:root[data-theme="heaven"] .tile__n { color: var(--accent-deep); text-shadow: 0 0 14px rgba(255, 230, 150, .9); }
.tile__l { font-size: 13px; color: var(--text-faint); }

/* ---------- Сетка: таблица + боковая колонка ---------- */
.rating__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
    gap: clamp(16px, 2vw, 28px);
    align-items: start;
}

.board {
    position: relative;
    padding: clamp(16px, 2.4vh, 26px) clamp(14px, 2vw, 26px);
    border-radius: var(--panel-radius);
    border: 1px solid var(--panel-border);
    background: var(--panel-bg);
    -webkit-backdrop-filter: blur(12px);
            backdrop-filter: blur(12px);
    box-shadow: var(--panel-shadow);
}
.board__head { display: grid; gap: 10px; margin-bottom: 16px; }
.board__title { font-family: var(--serif); font-weight: 700; font-size: clamp(26px, 3vw, 34px); line-height: 1.05; }
.board__sub { font-size: 13.5px; color: var(--text-faint); margin-top: -6px; }

/* --- Пьедестал для тройки лидеров --- */
.podium {
    display: grid;
    grid-template-columns: 1fr 1.15fr 1fr;
    align-items: end;
    gap: clamp(8px, 1.4vw, 18px);
    margin: 8px 0 20px;
}
.podium:empty { display: none; }
.podium__place {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 18px 10px 14px;
    border-radius: calc(var(--panel-radius) * 1.2) calc(var(--panel-radius) * 1.2) 6px 6px;
    text-align: center;
    min-width: 0;
}
.podium__place--1 { order: 2; padding-top: 30px; }
.podium__place--2 { order: 1; }
.podium__place--3 { order: 3; }
:root[data-theme="hell"] .podium__place {
    background: linear-gradient(180deg, rgba(255, 70, 20, .2), rgba(30, 4, 6, .6));
    box-shadow: inset 0 0 0 1px rgba(255, 110, 60, .3);
}
:root[data-theme="hell"] .podium__place--1 { background: linear-gradient(180deg, rgba(255, 40, 60, .4), rgba(60, 4, 10, .7)); box-shadow: inset 0 0 0 1px rgba(255, 160, 170, .6), 0 0 40px -8px rgba(255, 0, 40, .8); }
:root[data-theme="heaven"] .podium__place {
    background: linear-gradient(180deg, rgba(255, 255, 255, .95), rgba(250, 240, 210, .7));
    box-shadow: inset 0 0 0 1px rgba(214, 170, 74, .45);
}
:root[data-theme="heaven"] .podium__place--1 { box-shadow: inset 0 0 0 1.5px rgba(214, 170, 74, .9), 0 0 40px rgba(255, 236, 170, .95); }
.podium__crown { font-size: 26px; line-height: 1; }
:root[data-theme="hell"] .podium__crown { color: #ffb347; filter: drop-shadow(0 0 6px #ff3b00); }
:root[data-theme="heaven"] .podium__crown { color: #e2b54c; filter: drop-shadow(0 0 6px #fff3c6); }
/* аватарка Twitch (с 15.10.2026), место — значком на её краю; нажать — карточка зрителя, как по нику */
.podium__face {
    position: relative;
    display: block;
    margin: 2px 0 4px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    cursor: pointer;
}
.podium__ava { --ava: 60px; font-family: var(--serif); transition: transform .3s var(--ease-out); }
.podium__place--1 .podium__ava { --ava: 74px; }
:root[data-theme="hell"] .podium__ava { box-shadow: 0 0 0 2px rgba(255, 110, 70, .75), 0 0 18px -2px rgba(255, 40, 20, .75); }
:root[data-theme="heaven"] .podium__ava { box-shadow: 0 0 0 2px rgba(214, 170, 74, .85), 0 0 16px rgba(255, 230, 160, .95); }
.podium__face:hover .podium__ava { transform: scale(1.05); }
.podium__medal { position: absolute; right: -6px; bottom: -4px; width: 28px; height: 28px; font-size: 13px; }
.podium__place--1 .podium__medal { width: 32px; height: 32px; font-size: 15px; }
.podium__name { max-width: 100%; font-weight: 700; font-size: clamp(14px, 1.3vw, 17px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.podium__xp { font-family: var(--serif); font-weight: 700; font-size: clamp(22px, 2.2vw, 30px); line-height: 1; font-variant-numeric: tabular-nums; }
.podium__xp small { font-family: var(--ui); font-size: 12px; color: var(--text-faint); }
.podium__meta { font-size: 12px; color: var(--text-faint); }

.medal {
    display: inline-grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-soft);
    background: var(--chip-bg);
}
.medal--1, .medal--2, .medal--3 { color: #2a1400; box-shadow: 0 0 12px -2px rgba(255, 200, 100, .7); }
.medal--1 { background: var(--medal-1); }
.medal--2 { background: var(--medal-2); }
.medal--3 { background: var(--medal-3); }

/* --- Таблица --- */
.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.table th {
    padding: 8px 10px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-faint);
    text-align: left;
    border-bottom: 1px solid var(--line);
}
.table td { padding: 9px 10px; border-bottom: 1px solid color-mix(in srgb, var(--line) 50%, transparent); }
.table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.table tbody tr { transition: background .2s ease; }
.table tbody tr:hover { background: var(--chip-bg); }
.table tbody tr.is-me { background: var(--row-today); }
/* колонка зрителя забирает всё свободное место, длинный ник — с многоточием (иначе на телефоне таблица шире экрана) */
.table td.who-td { width: 100%; max-width: 0; }
.table .who { display: flex; align-items: center; gap: 10px; min-width: 0; }
.table .who .ava { --ava: 30px; }
.who__txt { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.table .who b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 34ch; }
.xpbar { display: block; height: 3px; margin-top: 5px; border-radius: 3px; background: var(--chip-bg); overflow: hidden; }
.xpbar i { display: block; height: 100%; width: var(--w); border-radius: inherit; background: var(--ledge); background-size: 200% 100%; }
.table td.xp { font-weight: 700; }
.table tr.flash-up td { animation: rowFlash 1.2s ease; }
@keyframes rowFlash { 0% { background: color-mix(in srgb, var(--accent) 35%, transparent); } 100% { background: transparent; } }

/* ---------- Боковая колонка ---------- */
.side { display: flex; flex-direction: column; gap: 16px; }
.side__box { opacity: 1; animation: none; }
.side__title { font-family: var(--serif); font-weight: 700; font-size: 23px; line-height: 1.1; margin-bottom: 12px; }
.me { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.me .field input { height: 42px; }
.me .btn { height: 42px; }
.me__result { margin-top: 12px; font-size: 14px; }
.me__card { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.me__card dl { margin: 0; display: flex; flex-direction: column-reverse; padding: 8px 10px; border-radius: 10px; background: var(--ghost-bg); border: 1px solid var(--line); }
.me__card dt { font-size: 12px; color: var(--text-faint); }
.me__card dd { font-weight: 700; font-variant-numeric: tabular-nums; }
.me__name { grid-column: 1 / -1; font-weight: 700; font-size: 16px; }

.archive { display: flex; flex-direction: column; gap: 8px; padding: 0; margin: 0; list-style: none; }
.archive__month {
    width: 100%;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid var(--line);
    background: var(--ghost-bg);
    text-align: left;
    cursor: pointer;
    transition: border-color .2s ease, transform .3s var(--ease-out);
}
.archive__month:hover, .archive__month.is-on { border-color: var(--accent-hot); transform: translateX(3px); }
.archive__name { display: flex; justify-content: space-between; gap: 8px; font-weight: 700; margin-bottom: 4px; }
.archive__name small { font-weight: 500; color: var(--text-faint); font-size: 12px; }
.archive__top { display: flex; flex-direction: column; gap: 2px; font-size: 13px; color: var(--text-soft); }
.archive__top > span { display: flex; align-items: center; gap: 6px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.archive__top .medal { width: 18px; height: 18px; font-size: 10px; flex-shrink: 0; }
.archive__top .ava { --ava: 20px; }
.archive__who { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

.rules { display: flex; flex-direction: column; gap: 8px; padding-left: 18px; margin: 0; font-size: 14px; color: var(--text-soft); }
.rules li::marker { color: var(--accent-hot); }

/* ---------- Личная карточка зрителя (с 9.10.2026) ---------- */
/* ник в таблице и на пьедестале — кнопка: открывает карточку */
.who__btn {
    display: block;
    max-width: 34ch;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    font-weight: 600;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
}
.who__btn:hover, .who__btn:focus-visible { color: var(--accent-hot); text-decoration: underline; text-underline-offset: 3px; }
.podium__name.who__btn { max-width: 100%; font-weight: 700; font-size: clamp(14px, 1.3vw, 17px); text-align: center; }
.me__hint { margin-top: 10px; font-size: 12.5px; line-height: 1.45; color: var(--text-faint); }
.me__mine .ico { margin-right: 6px; }

.modal--me .modal__dialog { width: min(820px, 100%); }
.mecard__head { display: flex; align-items: center; gap: 16px; margin-bottom: 14px; padding-right: 44px; }
/* аватарка Twitch зрителя (с 15.10.2026; .ava в base.css), без неё — буква ника */
.mecard__sigil {
    --ava: 64px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    font-family: var(--serif);
    font-weight: 700;
    font-size: 34px;
    color: var(--btn-text);
    background: var(--btn-bg);
    box-shadow: var(--btn-glow);
}
.mecard__who { min-width: 0; }
.mecard__rank { font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-hot); }
:root[data-theme="heaven"] .mecard__rank { color: var(--accent-deep); }
.mecard__name { margin: 2px 0 2px; padding-right: 0; overflow-wrap: anywhere; }
.mecard__sub { font-size: 13px; color: var(--text-faint); }
.mecard__note { margin-bottom: 10px; font-size: 13px; color: var(--text-soft); }
.mecard__rankbar { display: grid; gap: 6px; margin-bottom: 16px; font-size: 13px; color: var(--text-soft); }
.mecard__nums { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin: 0; }
.mecard__nums > div { display: flex; flex-direction: column-reverse; justify-content: flex-end; padding: 10px 12px; border-radius: 10px; background: var(--ghost-bg); border: 1px solid var(--line); }
.mecard__nums dt { font-size: 12px; line-height: 1.25; color: var(--text-faint); }
.mecard__nums dd { font-size: 20px; font-weight: 700; line-height: 1.2; }
.mecard__nums small { font-size: 12px; font-weight: 500; color: var(--text-faint); }

/* график XP по месяцам: один цвет, столбики не толще 24 px, скругление сверху, у основания — прямо;
   этот месяц ещё идёт — бледнее; цифры месяца — строкой над графиком (и таблицей под ним) */
.mebars__read { min-height: 1.5em; margin-bottom: 8px; font-size: 13.5px; color: var(--text-soft); }
.mebars__read b { color: var(--text); font-weight: 600; }
.mebars { display: flex; gap: 2px; height: 160px; margin-bottom: 14px; }
.mebars__col {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: none;
    color: inherit;
    font: inherit;
    cursor: pointer;
}
.mebars__track { flex: 1; width: 100%; display: flex; align-items: flex-end; justify-content: center; border-bottom: 1px solid var(--ch-grid); }
.mebars__bar { display: block; width: min(24px, 72%); border-radius: 4px 4px 0 0; background: var(--ch-mark); transition: background .2s ease; }
.mebars__col.is-now .mebars__bar { opacity: .55; }
.mebars__col:hover .mebars__bar, .mebars__col:focus-visible .mebars__bar { background: var(--ch-hot); }
.mebars__col:focus-visible { outline: 2px solid var(--accent-hot); outline-offset: 2px; }
/* подпись месяца — одной высоты у всех (у января ещё и год), иначе основания столбиков разъезжаются */
.mebars__m { height: 2.3em; font-size: 11px; line-height: 1.15; color: var(--text-faint); white-space: nowrap; text-align: center; font-variant-numeric: tabular-nums; }
.mebars__m small { display: block; font-size: 10px; }
.mecard__months { max-height: 300px; overflow: auto; }
.mecard__months .table { font-size: 13.5px; }
.mecard__months .table th { position: sticky; top: 0; background: var(--surface); }
.mecard__months .medal { width: 22px; height: 22px; font-size: 11px; }

/* значки: уровень и полоска до следующего; не полученные — бледные */
.badges { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 1fr)); gap: 10px; padding: 0; margin: 0; list-style: none; }
.badge {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    align-items: start;
    gap: 12px;
    padding: 12px;
    border-radius: 12px;
    border: 1px solid var(--line);
    background: var(--ghost-bg);
}
.badge__ico {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    font-size: 22px;
    color: var(--text-faint);
    background: var(--chip-bg);
    --me-cut: var(--surface);
}
.badge.is-on .badge__ico { color: var(--btn-text); background: var(--btn-bg); box-shadow: var(--btn-glow); --me-cut: #fff6; }
.badge.is-gold .badge__ico { background: var(--medal-1); color: #2a1400; }
.badge__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.badge__t { font-size: 12px; color: var(--text-faint); }
.badge__v { font-size: 15px; font-weight: 700; line-height: 1.25; }
.badge:not(.is-on) .badge__v { color: var(--text-faint); font-weight: 600; }
.badge__v small { font-weight: 500; color: var(--text-faint); }
.badge__bar { display: block; height: 4px; border-radius: 4px; background: var(--chip-bg); overflow: hidden; }
.badge__bar i { display: block; height: 100%; border-radius: inherit; background: var(--ch-mark); }
.badge__next { font-size: 12px; color: var(--text-faint); }
.mecard__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: clamp(18px, 3vh, 26px); padding-top: 14px; border-top: 1px solid var(--line); }
.mecard__since { margin-left: auto; font-size: 12.5px; color: var(--text-faint); }

/* Итоги зрителя (с 15.10.2026): кнопки периодов в карточке и сами итоги — «плакат» с крупными числами;
   «Сохранить картинкой» рисует то же на холсте (rating.js, recapCanvas) */
.recap-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(170px, 100%), 1fr)); gap: 8px; }
.recap-pick__b {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid var(--line);
    background: var(--ghost-bg);
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color .2s ease, transform .3s var(--ease-out);
}
.recap-pick__b:hover, .recap-pick__b:focus-visible { border-color: var(--accent-hot); transform: translateY(-1px); outline: none; }
.recap-pick__b .ico { flex-shrink: 0; font-size: 22px; color: var(--ch-mark); }
.recap-pick__b span { display: flex; flex-direction: column; min-width: 0; }
.recap-pick__b b { font-weight: 700; font-size: 14.5px; }
.recap-pick__b small { font-size: 12px; color: var(--text-faint); }

.recap__loading { padding: 40px 0; text-align: center; color: var(--text-faint); }
.recap__back { margin-bottom: 14px; }
.recap__back .ico { margin-right: 4px; }
.recap__card {
    position: relative;
    padding: clamp(20px, 3.4vw, 34px) clamp(16px, 3vw, 32px);
    border-radius: 18px;
    border: 1px solid var(--line);
    background: radial-gradient(120% 70% at 50% 0%, var(--chip-bg), transparent 70%), var(--ghost-bg);
    text-align: center;
}
.recap__kick { font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-faint); }
.recap__title { margin: 6px 0 4px; font-family: var(--serif); font-weight: 700; font-size: clamp(34px, 5.4vw, 52px); line-height: 1.05; }
.recap__who { font-weight: 700; color: var(--accent-hot); }
:root[data-theme="heaven"] .recap__who { color: var(--accent-deep); }
.recap__who > span:not(.ava) { font-weight: 500; color: var(--text-faint); }
.recap__ava { --ava: 30px; margin-right: 4px; vertical-align: -9px; }
.recap__big { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 20px 0 16px; }
.recap__big > div { display: flex; flex-direction: column-reverse; justify-content: flex-end; padding: 14px 10px; border-radius: 14px; border: 1px solid var(--line); background: var(--ghost-bg); }
.recap__big dd { font-size: clamp(26px, 4vw, 38px); font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.recap__big dt { margin-top: 4px; font-size: 12.5px; line-height: 1.3; color: var(--text-soft); }
.recap__lines { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; text-align: left; }
.recap__lines li { position: relative; padding-left: 18px; font-size: 14.5px; line-height: 1.45; }
.recap__lines li::before { content: ""; position: absolute; left: 3px; top: .55em; width: 7px; height: 7px; border-radius: 50%; background: var(--ch-mark); }
.recap__streams { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); text-align: left; }
.recap__h { font-family: var(--serif); font-weight: 700; font-size: 24px; line-height: 1.15; }
.recap__sub2 { margin: 2px 0 10px; font-size: 12.5px; color: var(--text-faint); }
.recap__streams .recap__lines { margin-top: 12px; }
.recap__note { margin-top: 14px; font-size: 12.5px; line-height: 1.45; color: var(--text-faint); text-align: left; }
.recap__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.recap__actions .ico { margin-right: 6px; }
/* полоски «во что играли»: один цвет, как графики «Рекордов» */
.rcats { display: flex; flex-direction: column; gap: 7px; margin: 0; padding: 0; list-style: none; }
.rcats__i { display: grid; grid-template-columns: minmax(0, 13em) minmax(0, 1fr) 4.2em; align-items: center; gap: 10px; font-size: 13.5px; }
.rcats__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-soft); }
.rcats__bar { height: 12px; }
.rcats__bar i { display: block; height: 100%; min-width: 2px; border-radius: 0 4px 4px 0; background: var(--ch-mark); }
.rcats__n { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }

/* «Найти себя» кнопкой на телефоне (с 15.10.2026): видна, пока сам блок «Найти себя» за экраном (rating.js) */
.me-fab { display: none; }

@media (max-width: 1000px) {
    .rating__grid { grid-template-columns: minmax(0, 1fr); }
    .tiles { grid-template-columns: repeat(2, 1fr); }
    /* «Найти себя» — над таблицей (с 15.10.2026): была под таблицей из 100 строк, на седьмом экране */
    .side { display: contents; }
    .side > .side__box:first-child { order: -1; }
}
@media (max-width: 760px) {
    .rows-more { display: flex; justify-content: center; margin-top: 12px; }
    .rows-more[hidden] { display: none; }
    .me-fab {
        position: fixed;
        right: 12px;
        bottom: calc(74px + env(safe-area-inset-bottom));      /* над нижней панелью */
        z-index: 44;
        display: inline-flex;
        align-items: center;
        gap: 7px;
        height: 44px;
        padding: 0 16px 0 13px;
        border: 0;
        border-radius: 999px;
        background: var(--btn-bg);
        color: var(--btn-text);
        box-shadow: var(--btn-glow), 0 10px 24px -8px rgba(0, 0, 0, .6);
        font: 700 14px/1 var(--ui);
        cursor: pointer;
        transition: opacity .25s ease, transform .3s var(--ease-out);
    }
    .me-fab .ico { font-size: 17px; }
    .me-fab[hidden] { display: inline-flex; opacity: 0; transform: translateY(16px); pointer-events: none; visibility: hidden; }
}
@media (max-width: 760px) {
    .mecard__nums { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .mecard__nums > div:last-child { grid-column: 1 / -1; }
    .mebars__m small { display: none; }
    .mebars__m { height: 1.2em; }
}
@media (max-width: 560px) {
    .table th:nth-child(4), .table td:nth-child(4) { display: none; }
    /* пьедестал — тремя столбиками, как на компьютере, но плотнее (с 15.10.2026; был столбиком из трёх — 590 px) */
    .podium { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) minmax(0, 1fr); gap: 6px; }
    .podium__place { padding: 12px 4px 10px; gap: 3px; }
    .podium__place--1 { padding-top: 20px; }
    .podium__crown { font-size: 20px; }
    .podium__ava { --ava: 48px; }
    .podium__place--1 .podium__ava { --ava: 58px; }
    .podium__medal { width: 22px; height: 22px; font-size: 12px; right: -5px; }
    .podium__place--1 .podium__medal { width: 25px; height: 25px; font-size: 13px; }
    .podium__name, .podium__name.who__btn { font-size: 13.5px; }
    .podium__xp { font-size: 19px; }
    .podium__meta { display: none; }
    .mecard__head { gap: 12px; }
    .mecard__sigil { width: 48px; height: 48px; font-size: 26px; }
    .mebars { height: 120px; }
    .mebars__m { font-size: 10px; }
    .mebars__col:nth-last-child(even) .mebars__m { visibility: hidden; }      /* подписи через одну — иначе слипаются */
    .mecard__since { margin-left: 0; }
    .recap__big { gap: 6px; }
    .recap__big > div { padding: 10px 6px; }
    .rcats__i { grid-template-columns: minmax(0, 8em) minmax(0, 1fr) 3.8em; }
}