/* ==========================================================================
   FASOOLLKA — «Адские рекорды» / «Райские рекорды»: статистика и рекорды на Twitch (stats.php, с 9.10.2026)
   1. Шапка, оглавление (с 5.11.2026) и главные цифры  2. Блоки и графики  3. Таблицы
   4. Рекорды (три места + «Ещё N»)  5. Категории, серии  6. Телефон
   Графики (assets/js/stats.js) — SVG одного цвета: столбики не толще 24 px со скруглением 4 px сверху,
   линия 2 px с заливкой 10–14 %, сетка — тонкие сплошные линии. Цвета — --ch-* в base.css.
   ========================================================================== */
.statp {
    position: relative;
    z-index: 10;
    width: min(1320px, 100%);
    margin: 0 auto;
    padding: clamp(10px, 2vh, 20px) clamp(16px, 3vw, 40px) 60px;
}
.statp .panel { opacity: 1; animation: none; }          /* без «въезда» панелей — их много */

/* ---------- 1. Шапка и главные цифры ---------- */
.statp__hero { text-align: center; margin-bottom: clamp(18px, 3vh, 28px); }
.statp__kicker { font-size: 13px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--accent-hot); }
:root[data-theme="heaven"] .statp__kicker { color: #8a5f12; text-shadow: 0 0 8px #fff, 0 0 18px #fff; }
:root[data-theme="hell"] .statp__kicker { text-shadow: 0 1px 2px #000, 0 0 12px #000; }
.statp__title {
    margin: 4px 0 10px;
    font-family: var(--serif);
    font-weight: 700;
    font-style: italic;
    font-size: clamp(44px, 7vw, 92px);
    line-height: .95;
}
:root[data-theme="hell"] .statp__title { color: #ffe6da; text-shadow: 0 0 6px #ff3a1a, 0 0 22px rgba(255, 30, 0, .9), 0 3px 0 #3a0006; }
:root[data-theme="heaven"] .statp__title { color: #6a4a0a; text-shadow: 0 0 10px #fff, 0 0 24px #fff6d0, 0 1px 0 #fff; }
.statp__lead { max-width: 62ch; margin: 0 auto; font-size: clamp(15px, 1.4vw, 17px); color: var(--text-soft); }
.statp__lead b { color: var(--text); }
:root[data-theme="hell"] .statp__lead { text-shadow: 0 1px 2px #000, 0 0 14px #000; }
:root[data-theme="heaven"] .statp__lead { text-shadow: 0 0 10px #fff; }

/* оглавление (с 5.11.2026): липкая строка разделов под шапкой; открытый раздел — .is-on (stats.js).
   Не помещается — листается вбок без полосы прокрутки. Вид — как ряд разделов в шапке сайта (.subnav). */
.sttoc {
    position: sticky;
    top: 10px;
    z-index: 30;
    display: flex;
    margin: 0 0 clamp(16px, 2.6vh, 24px);
    pointer-events: none;                           /* ловят нажатия только сами ссылки, не пустое место строки */
}
.sttoc__list {
    display: flex;
    gap: 4px;
    max-width: 100%;
    margin: 0;
    padding: 4px;
    list-style: none;
    overflow-x: auto;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
    border-radius: 18px;
    border: 1px solid var(--ghost-border);
    background: var(--panel-bg);
    -webkit-backdrop-filter: blur(12px);
            backdrop-filter: blur(12px);
    box-shadow: 0 .8rem 2rem -1.4rem rgba(120, 40, 70, .5);
    pointer-events: auto;
}
.sttoc__list::-webkit-scrollbar { display: none; }
.sttoc__list > li { flex-shrink: 0; }
.sttoc__link {
    display: inline-flex;
    align-items: center;
    height: 36px;
    padding: 0 14px;
    border-radius: 13px;
    font-size: 14px;
    font-weight: 700;
    color: var(--text-soft);
    white-space: nowrap;
    transition: background .2s ease, color .2s ease;
}
.sttoc__link:hover { color: var(--text); background: color-mix(in srgb, var(--text) 9%, transparent); }
.sttoc__link:focus-visible { outline: 2px solid var(--accent-hot); outline-offset: -2px; }
:root[data-theme="heaven"] .sttoc__link.is-on { background: #2b1d2a; color: #fff; }
:root[data-theme="hell"] .sttoc__link.is-on { background: var(--btn-bg); color: #fff; box-shadow: var(--btn-glow); }
.is-lite .sttoc__list { -webkit-backdrop-filter: none; backdrop-filter: none; }
/* разделы, к которым ведёт оглавление: заголовок не прячется под липкой строкой */
.stsec { scroll-margin-top: 66px; }

.sttiles {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(10px, 1.2vw, 16px);
    margin-bottom: clamp(16px, 2.6vh, 24px);
}
.sttile {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: clamp(14px, 2vh, 18px) 16px;
    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);
    min-width: 0;
}
.sttile::after { content: ""; position: absolute; left: 14px; right: 14px; top: -1px; height: var(--ledge-h); background: var(--ledge); box-shadow: var(--ledge-glow); }
.sttile__l { font-size: 13px; color: var(--text-faint); }
/* большое число — тем же шрифтом, что и текст (не узорным), цифры обычной ширины */
.sttile__v { font-family: var(--ui); font-weight: 600; font-size: clamp(26px, 2.6vw, 36px); line-height: 1.1; color: var(--text); }
.sttile__n { font-size: 12.5px; color: var(--text-soft); overflow: hidden; text-overflow: ellipsis; }

/* ---------- 2. Блоки и графики ---------- */
.stbox { margin-bottom: clamp(16px, 2.6vh, 24px); padding: clamp(16px, 2.2vh, 22px) clamp(14px, 2vw, 24px); }
.stbox__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 16px; margin-bottom: 12px; }
.stbox__title { font-family: var(--serif); font-weight: 700; font-size: clamp(24px, 2.4vw, 32px); line-height: 1.1; }
.stbox__hint { flex: 1 1 280px; font-size: 13px; color: var(--text-faint); }
.stbox__head .stbox__hint { text-align: right; }
.stbox__head .chips { gap: 6px; }
.stbox__head .chip { height: 34px; padding: 0 13px; font-size: 13px; }

.chart { position: relative; width: 100%; outline: none; }
.chart:focus-visible { outline: 2px solid var(--accent-hot); outline-offset: 4px; border-radius: 6px; }
.chart svg { display: block; width: 100%; overflow: visible; user-select: none; }
.chart--line { height: 300px; }
.chart--months { height: 260px; }
.chart--small { height: 220px; }
.chart__scroll { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; }
.chart__scroll .chart { min-width: 640px; }
/* метки осей и сетка */
.ch-grid { stroke: var(--ch-grid); stroke-width: 1; shape-rendering: crispEdges; }
.ch-base { stroke: var(--line); stroke-width: 1; shape-rendering: crispEdges; }
.ch-tick { fill: var(--text-faint); font: 11px var(--ui); font-variant-numeric: tabular-nums; }
.ch-label { fill: var(--text-soft); font: 600 12px var(--ui); font-variant-numeric: tabular-nums; }
/* данные: один цвет; наведённый — светлее (в аду) / темнее (в раю) */
.ch-bar { fill: var(--ch-mark); transition: fill .15s ease; }
.ch-bar.is-hot { fill: var(--ch-hot); }
.ch-bar.is-soft { opacity: .55; }
.ch-line { fill: none; stroke: var(--ch-mark); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.ch-area { fill: var(--ch-wash); }
.ch-dot { fill: var(--ch-mark); stroke: var(--surface); stroke-width: 2; }
.ch-cross { stroke: var(--text-faint); stroke-width: 1; shape-rendering: crispEdges; }
.ch-hit { fill: transparent; }
/* подсказка над графиком */
.chart__tip {
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
    padding: 7px 10px;
    border-radius: 10px;
    border: 1px solid var(--panel-border);
    background: var(--surface);
    box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .6);
    color: var(--text-soft);
    font-size: 12.5px;
    line-height: 1.35;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity .12s ease;
}
.chart__tip.is-on { opacity: 1; }
.chart__tip b { display: block; color: var(--text); font-size: 13.5px; }

/* отметки подписчиков */
.miles { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; padding: 0; list-style: none; }
.miles li { display: inline-flex; align-items: baseline; gap: 8px; padding: 6px 12px; border-radius: 999px; background: var(--chip-bg); font-size: 13px; color: var(--text-soft); }
.miles b { color: var(--text); font-variant-numeric: tabular-nums; }

/* ---------- 3. Таблицы ---------- */
.sttable { margin-top: 12px; }
.sttable summary { cursor: pointer; font-size: 13.5px; font-weight: 600; color: var(--link); width: max-content; }
.sttable[open] summary { margin-bottom: 10px; }
.sttable__wrap { overflow-x: auto; }
.sttable .sttable__wrap { max-height: 420px; overflow-y: auto; }
.sttable__t { width: 100%; border-collapse: collapse; font-size: 14px; }
.sttable__t th { position: sticky; top: 0; z-index: 1; padding: 8px 10px; font-size: 12px; font-weight: 600; color: var(--text-faint); text-align: left; border-bottom: 1px solid var(--line); background: var(--surface); white-space: nowrap; }
.sttable__t td { padding: 8px 10px; border-bottom: 1px solid color-mix(in srgb, var(--line) 50%, transparent); white-space: nowrap; }
.sttable__t td:first-child { text-transform: capitalize; }
.sttable__t .num { text-align: right; font-variant-numeric: tabular-nums; }
.sttable__t small { display: block; font-size: 11.5px; color: var(--text-faint); }
.sttable__t tbody tr:hover { background: var(--chip-bg); }

/* ---------- 4. Рекорды: четыре топ-10 ---------- */
.strec { margin-bottom: clamp(16px, 2.6vh, 24px); }
.strec__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; margin-bottom: 12px; }
.strec__hint { flex: 1 1 280px; font-size: 13.5px; color: var(--text-soft); text-align: right; }
:root[data-theme="hell"] .strec__hint { text-shadow: 0 1px 2px #000, 0 0 10px #000; }
:root[data-theme="heaven"] .strec__hint { text-shadow: 0 0 8px #fff; }
/* сначала три места, остальные — по кнопке «Ещё N» (класс ставит stats.js — без скриптов видно все 10) */
.top10__list.is-short .is-more { display: none; }
.top10__more {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    height: 38px;
    margin-top: 8px;
    border-radius: 12px;
    border: 1px solid var(--ghost-border);
    background: var(--ghost-bg);
    color: var(--text-soft);
    font: 700 13.5px var(--ui);
    cursor: pointer;
    transition: color .2s ease, border-color .2s ease;
}
.top10__more[hidden] { display: none; }
.top10__more:hover, .top10__more:focus-visible { color: var(--text); border-color: var(--accent-hot); }
.top10__arrow { display: inline-block; transition: transform .25s ease; }
.top10__more[aria-expanded="true"] .top10__arrow { transform: rotate(180deg); }
:root[data-theme="hell"] .strec__title { text-shadow: 0 1px 2px #000, 0 0 14px #000; }
:root[data-theme="heaven"] .strec__title { text-shadow: 0 0 10px #fff; }
.strec__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 20px); }
.strec__grid .stbox { margin-bottom: 0; }
.top10__title { font-family: var(--serif); font-weight: 700; font-size: 24px; line-height: 1.1; }
.top10 .stbox__hint { margin: 2px 0 10px; }
.top10__list { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; list-style: none; }
.top10__i {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 7px 8px;
    border-radius: 10px;
    transition: background .2s ease;
}
.top10__i:hover { background: var(--chip-bg); }
.top10__n {
    display: 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);
}
.top10__n--1, .top10__n--2, .top10__n--3 { color: #2a1400; }
.top10__n--1 { background: var(--medal-1); }
.top10__n--2 { background: var(--medal-2); }
.top10__n--3 { background: var(--medal-3); }
.top10__body { min-width: 0; }
.top10__v { font-size: 13px; color: var(--text-faint); }
.top10__v b { font-size: 17px; color: var(--text); font-variant-numeric: tabular-nums; }
.top10__t { font-size: 14px; font-weight: 500; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.top10__t a:hover { color: var(--accent-hot); text-decoration: underline; text-underline-offset: 3px; }
.top10__m { font-size: 12px; color: var(--text-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.top10__go {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid var(--ghost-border);
    background: var(--ghost-bg);
    color: var(--text);
    font-size: 13px;
    transition: border-color .2s ease, transform .3s var(--ease-out), box-shadow .3s ease;
}
.top10__go:hover, .top10__go:focus-visible { border-color: var(--accent-hot); transform: scale(1.08); box-shadow: 0 0 18px -4px var(--accent); }

/* ---------- 5. Две колонки, категории, серии ---------- */
.stcols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 20px); }
.stcols .stbox__head { flex-direction: column; align-items: stretch; }
.stcols .stbox__head .stbox__hint { text-align: left; flex: none; }
.cats { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
.cats__i { display: grid; grid-template-columns: minmax(0, 13em) minmax(0, 1fr) 3.2em; align-items: center; gap: 10px; font-size: 13.5px; }
.cats__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-soft); }
.cats__bar { height: 12px; }
.cats__bar i { display: block; height: 100%; min-width: 2px; border-radius: 0 4px 4px 0; background: var(--ch-mark); }
.cats__n { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.runs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; }
.runs > div { display: flex; flex-direction: column; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--ghost-bg); }
.runs dt { order: 1; font-size: 12.5px; color: var(--text-faint); }
.runs dd { order: 0; font-family: var(--ui); font-weight: 600; font-size: 28px; line-height: 1.15; }
.runs dd small { font-size: 14px; font-weight: 500; color: var(--text-soft); }
.runs span { order: 2; margin-top: 4px; font-size: 12.5px; color: var(--text-soft); }

.statp__foot { margin-top: 30px; text-align: center; font-size: 13px; line-height: 1.6; color: var(--text-faint); }
.statp__foot a { color: var(--link); }
:root[data-theme="hell"] .statp__foot { text-shadow: 0 1px 2px #000, 0 0 10px #000; }
:root[data-theme="heaven"] .statp__foot { text-shadow: 0 0 8px #fff; }

/* ---------- 6. Средние экраны и телефон ---------- */
@media (max-width: 1000px) {
    .sttiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .strec__grid, .stcols { grid-template-columns: 1fr; }
    .stbox__head .stbox__hint, .strec__hint { text-align: left; }
}
@media (max-width: 760px) {
    .sttoc { top: 6px; margin-inline: -4px; }
    .sttoc__list { width: 100%; }
    .sttoc__link { height: 38px; padding: 0 12px; font-size: 13.5px; }
}
@media (max-width: 560px) {
    .sttile__v { font-size: 24px; }
    .chart--line { height: 240px; }
    .chart--small { height: 190px; }
    .cats__i { grid-template-columns: minmax(0, 9em) minmax(0, 1fr) 2.8em; }
    .runs { grid-template-columns: 1fr; }
    .top10__i { gap: 10px; padding: 7px 4px; }
}