/* ==========================================================================
   Спортивный портал — дизайн-система

   Направление: «табло». В спорте содержание — это числа: счёт, минута,
   коэффициент, место в таблице. Поэтому табличные моноширинные цифры здесь
   не украшение, а носитель смысла, а сигнатурный элемент интерфейса —
   строка табло, повторяющаяся во всех лентах и на всех страницах.

   Палитра — вечерний стадион под прожекторами: глубокий сине-зелёный фон,
   янтарный акцент света, холодный синий для данных.
   ========================================================================== */

/* --------------------------------------------------------------- шрифты */

@font-face {
    font-family: 'Inter';
    src: url('/assets/fonts/InterVariable.woff2') format('woff2-variations');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

/* Archivo — дисплейный гротеск с осью ширины. Широкие плотные буквы
   того же рода, какими подписывают стадионные баннеры и табло; ось
   ширины позволяет растягивать крупные заголовки, не утолщая штрих. */
@font-face {
    font-family: 'Archivo';
    src: url('/assets/fonts/Archivo-Variable.woff2') format('woff2-variations');
    font-weight: 400 800;
    font-stretch: 62% 125%;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'JetBrains Mono';
    src: url('/assets/fonts/JetBrainsMono-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'JetBrains Mono';
    src: url('/assets/fonts/JetBrainsMono-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* ----------------------------------------------------------------- токены */

:root {
    /* Подсветка при наведении.
       На светлом фоне строка темнеет, на тёмном — светлеет. Одна и та
       же «утопленная» подложка годится только для светлой темы: на
       тёмной она уводит строку почти в чёрный, и разницы не видно —
       читатель не понимает, на какой строке курсор. */
    --hover-bg: var(--bg-sunken);

    /* Золото трофеев. Тёмный оттенок читается на светлом, светлый —
       на тёмном; жёсткое значение годилось бы только для одной темы. */
    --gold: #B8860B;
    --gold-subtle: #FFF6E0;

    /* Светлая тема. Фон не чисто белый: длинные ленты новостей на белом
       утомляют, а лёгкий холодный оттенок держит внимание на карточках. */
    --bg: #F5F7FA;
    --bg-elevated: #FFFFFF;
    --bg-sunken: #EAEEF3;
    --bg-inset: #DFE5EC;

    --text: #0B1220;
    --text-muted: #4E5C74;
    --text-faint: #8592A6;
    --text-inverse: #FFFFFF;

    --border: #DCE3EB;
    --border-strong: #B9C4D2;

    /* Ползунок полосы прокрутки. Отдельные переменные, а не рамка:
       на тёмной теме он светлее фона, на светлой темнее, и вывести
       одно из другого нельзя. */
    --scroll-thumb: #C3CCD8;
    --scroll-thumb-hover: #9AA7B8;

    /* Янтарный — свет прожекторов. Используется только для действия
       и текущего состояния, поэтому не теряет силу от повторения. */
    --accent: #B8730A;
    /* Фирменный красный логотипа. В обеих темах один и тот же:
       на тёмном фоне читается не хуже, чем на светлом. */
    --brand-red: #EF0017;
    /* Цвета сторон матча: хозяева и гости.
       
       Не выводятся из гербов: у половины клубов герба нет вовсе, а у
       остальных он бывает почти чёрным или почти белым, и пара цветов
       выходила бы то неразличимой, то кричащей. Два постоянных цвета
       читаются одинаково на всех матчах — и запоминаются: слева всегда
       один, справа всегда другой. */
    --stat-home: #7C3AED;
    --stat-away: #C08A0B;

    /* Шкала календаря: от серого к зелёному.
       Пустой день нейтрально-серый, дальше насыщенность растёт вместе
       с числом матчей. Ступени разведены по светлоте заметно, а не
       на волосок: соседние оттенки одного тона на скверном экране
       сливаются, и сетка перестаёт что-либо сообщать. */
    --calendar-l0: #E6EAEE;
    --calendar-l1: #C3E4C0;
    --calendar-l2: #8CCB87;
    --calendar-l3: #4EA455;
    --calendar-l4: #26702F;

    --tooltip-bg: #1B2027;
    --tooltip-fg: #F2F4F7;
    --accent-hover: #A66400;
    --accent-contrast: #FFFFFF;
    --accent-subtle: #FFF3DF;

    /* Синий — цвет данных: ссылки, значения, коэффициенты. */
    --data: #0E5FD8;
    --data-subtle: #E5EEFC;

    /* Состояния матча. Живой матч обязан быть заметен мгновенно. */
    --live: #D62E2E;
    --live-subtle: #FDEAEA;
    --win: #1B7F4B;
    --win-subtle: #E4F4EB;
    --draw: #7A6A00;
    --loss: #B02A2A;

    /* Ширины и отступы */
    --page-max: 1280px;
    --content-max: 720px;

    --space-3xs: 0.25rem;
    --space-2xs: 0.5rem;
    --space-xs: 0.75rem;
    --space-s: 1rem;
    --space-m: 1.5rem;
    --space-l: 2rem;
    --space-xl: 3rem;
    --space-2xl: 4rem;

    --radius-s: 4px;
    --radius-m: 8px;
    --radius-l: 14px;

    /* Тени сдержанные: интерфейс держится на границах и плотности,
       а не на объёме. */
    --shadow-s: 0 1px 2px rgba(14, 22, 32, 0.06);
    --shadow-m: 0 2px 8px rgba(14, 22, 32, 0.08);
    --shadow-l: 0 8px 24px rgba(14, 22, 32, 0.12);

    /* Шрифты */
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-display: 'Archivo', 'Inter', -apple-system, sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

    /* Шкала кегля. Шаг около 1.25 — достаточно, чтобы иерархия читалась,
       и недостаточно, чтобы заголовки кричали. */
    --text-2xs: 0.6875rem;
    --text-xs: 0.75rem;
    --text-s: 0.875rem;
    --text-m: 1rem;
    --text-l: 1.125rem;
    --text-xl: 1.375rem;
    --text-2xl: 1.75rem;
    --text-3xl: 2.25rem;
    --text-4xl: 3rem;

    --leading-tight: 1.15;
    --leading-snug: 1.35;
    --leading-normal: 1.6;

    color-scheme: light;
}

/* Тёмная тема по системной настройке — но только если пользователь
   не выбрал светлую явно. Вложенность не используется намеренно:
   обычный синтаксис работает во всех браузерах без оговорок. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme='light']) {
        --bg: #080D18;
        --bg-elevated: #111827;
        --bg-sunken: #050911;
        --bg-inset: #1A2334;

        --text: #E9EEF7;
        --text-muted: #98A5BC;
        --text-faint: #6B7893;
        --text-inverse: #080D18;

        --border: #1F2A3D;
        --border-strong: #33425C;

        --scroll-thumb: #2C3A50;
        --scroll-thumb-hover: #44577A;

        --accent: #F5A524;

    --calendar-l0: #262D36;
    --calendar-l1: #1E4A29;
    --calendar-l2: #2E7A3E;
    --calendar-l3: #48A85A;
    --calendar-l4: #74D585;

    --tooltip-bg: #0E1116;
    --tooltip-fg: #E8EDF2;

        --calendar-l0: #262D36;
        --calendar-l1: #1E4A29;
        --calendar-l2: #2E7A3E;
        --calendar-l3: #48A85A;
        --calendar-l4: #74D585;

        --tooltip-bg: #0E1116;
        --tooltip-fg: #E8EDF2;
        --accent-hover: #FFB84D;
        --accent-contrast: #0A1218;
        --accent-subtle: #2A1F0A;

        --data: #58A6FF;
        --data-subtle: #10243D;

        --live: #FF5A5A;
        --live-subtle: #2D1113;
        --win: #3FBF7F;
        --win-subtle: #0E2419;
        --draw: #C9B037;
        --loss: #E86B6B;

        --hover-bg: #1C2740;

        --gold: #E3B341;
        --gold-subtle: #2A2109;

        --shadow-s: 0 1px 2px rgba(0, 0, 0, 0.4);
        --shadow-m: 0 2px 8px rgba(0, 0, 0, 0.45);
        --shadow-l: 0 8px 24px rgba(0, 0, 0, 0.55);

        color-scheme: dark;
    }
}

/* Явный выбор тёмной темы перекрывает системную настройку. */
:root[data-theme='dark'] {
    --bg: #080D18;
    --bg-elevated: #111827;
    --bg-sunken: #050911;
    --bg-inset: #1A2334;

    --text: #E8EDF2;
    --text-muted: #96A3B2;
    --text-faint: #6A7787;
    --text-inverse: #0A1218;

    --border: #223140;
    --border-strong: #33465A;

    --scroll-thumb: #2E4055;
    --scroll-thumb-hover: #46607E;

    --accent: #F5A524;
    --accent-hover: #FFB84D;
    --accent-contrast: #0A1218;
    --accent-subtle: #2A1F0A;

    --data: #58A6FF;
    --data-subtle: #10243D;

    --live: #FF5A5A;
    --live-subtle: #2D1113;
    --win: #3FBF7F;
    --win-subtle: #0E2419;
    --draw: #C9B037;
    --loss: #E86B6B;

    --shadow-s: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-m: 0 2px 8px rgba(0, 0, 0, 0.45);
    --shadow-l: 0 8px 24px rgba(0, 0, 0, 0.55);

    /* Календарь и подсказка объявлены и здесь: при выборе тёмной темы
       вручную системный блок не срабатывает, и клетки календаря
       оставались светлыми — белая сетка посреди тёмной страницы. */
    --calendar-l0: #262D36;
    --calendar-l1: #1E4A29;
    --calendar-l2: #2E7A3E;
    --calendar-l3: #48A85A;
    --calendar-l4: #74D585;

    --tooltip-bg: #0E1116;
    --tooltip-fg: #E8EDF2;

    color-scheme: dark;
    --hover-bg: #1C2740;

    --gold: #E3B341;
    --gold-subtle: #2A2109;

}

/* ------------------------------------------------------------------ база */

*,
*::before,
*::after {
    box-sizing: border-box;
}

/* Полосы прокрутки — свои, на всех страницах и во всех блоках.

   Системная полоса в блоке приходит из другой темы: на тёмной странице
   она остаётся светлой, а её ширина в шестнадцать точек съедает край
   таблицы. Своя — тоньше, красится вместе с темой и не спорит с
   содержимым, пока на неё не навели мышь. */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--scroll-thumb) transparent;
}

::-webkit-scrollbar {
    inline-size: 10px;
    block-size: 10px;
}

::-webkit-scrollbar-track { background: transparent; }

::-webkit-scrollbar-thumb {
    background: var(--scroll-thumb);
    border-radius: 999px;
    /* Прозрачная рамка с обрезкой по краю: ползунок становится тоньше
       дорожки и не касается содержимого. */
    border: 2px solid transparent;
    background-clip: padding-box;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--scroll-thumb-hover);
    background-clip: padding-box;
}

::-webkit-scrollbar-corner { background: transparent; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-body);
    font-size: var(--text-m);
    line-height: var(--leading-normal);
    /* Табличные цифры по умолчанию: числа в таблицах и лентах должны
       выстраиваться по колонкам, а не «плясать» при обновлении. */
    font-variant-numeric: tabular-nums;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

/* Заголовки набираются дисплейным шрифтом с расширенным начертанием:
   так они читаются как надпись на табло, а не как крупный текст. */
h1, h2, h3, h4 {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 700;
    font-stretch: 108%;
    line-height: var(--leading-tight);
    letter-spacing: -0.015em;
}

h1 { font-stretch: 112%; letter-spacing: -0.025em; }

h1 { font-size: var(--text-3xl); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl); }
h4 { font-size: var(--text-l); }

p { margin: 0 0 var(--space-s); }

a {
    color: var(--data);
    text-decoration-color: color-mix(in srgb, var(--data) 35%, transparent);
    text-underline-offset: 0.15em;
}

a:hover {
    text-decoration-color: currentColor;
}

/* Фокус виден всегда: сайт должен быть проходим с клавиатуры. */
:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: var(--radius-s);
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

table {
    border-collapse: collapse;
    width: 100%;
}

/* Ссылка для клавиатурной навигации: видна только при фокусе. */
.skip-link {
    position: absolute;
    inset-inline-start: -9999px;
    top: var(--space-2xs);
    z-index: 100;
    padding: var(--space-2xs) var(--space-s);
    background: var(--accent);
    color: #fff;
    border-radius: var(--radius-s);
    font-weight: 600;
}

.skip-link:focus {
    inset-inline-start: var(--space-2xs);
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* --------------------------------------------------------------- раскладка */

.page {
    max-width: var(--page-max);
    margin-inline: auto;
    padding-inline: var(--space-s);
}

@media (min-width: 768px) {
    .page {
        padding-inline: var(--space-m);
    }
}

.layout {
    display: grid;
    /* minmax(0, 1fr), а не 1fr.

       У колонки грида наименьшая ширина по умолчанию равна наименьшей
       ширине содержимого, и широкая таблица состава раздувала
       единственную колонку до 560 точек при экране в 390: страница
       уезжала вбок целиком, вместе с заголовком и текстом досье.
       Ноль в нижней границе разрешает колонке быть уже содержимого —
       и тогда вбок прокручивается сама таблица, а не страница. */
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-l);
    align-items: start;
}

@media (min-width: 1024px) {
    .layout--with-aside {
        grid-template-columns: minmax(0, 1fr) 340px;
    }
}

/* У страницы матча колонка шире: в ней турнирная таблица о семи
   столбцах. В 340 точках названия команд обрезались на середине
   («Атлетико Паран…»), а числа стояли вплотную друг к другу. */
@media (min-width: 1024px) {
    .layout--with-aside:has(> .mside) {
        grid-template-columns: minmax(0, 1fr) clamp(340px, 34%, 430px);
    }
}

.stack > * + * {
    margin-block-start: var(--space-s);
}

.stack-l > * + * {
    margin-block-start: var(--space-l);
}

/* ----------------------------------------------------------------- шапка */

.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: color-mix(in srgb, var(--bg-elevated) 92%, transparent);
    backdrop-filter: blur(8px);
    border-block-end: 1px solid var(--border);
}

.site-header__bar {
    display: flex;
    align-items: center;
    gap: var(--space-m);
    min-height: 56px;
    /* Перенос разрешён всегда, а не с 767 точек.
       Ровно на 768 — ширине планшета в книжной ориентации — правило
       переноса ещё не действовало, а строка шапки уже не помещалась:
       поиск с переключателем языка вылезали на девять точек за край, и
       вся страница получала горизонтальную прокрутку. На широком экране
       переносить нечего, и правило ничего не меняет. */
    flex-wrap: wrap;
    row-gap: 4px;
}

.logo {
    display: inline-flex;
    align-items: center;
    gap: 0.42em;
    color: var(--text);
    text-decoration: none;
    white-space: nowrap;
}

/* Знак — фоном, а не тегом img: тогда тёмная тема подменяет файл сама.
   Внутри картинки CSS не работает, а тёмно-синяя дуга на тёмном фоне
   пропадает целиком — нужен второй файл, где она светлая. */
.logo__mark {
    inline-size: 1.65em;
    block-size: 1.65em;
    flex: none;
    background: url("/assets/img/logo-mark.svg") center / contain no-repeat;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme='light']) .logo__mark {
        background-image: url("/assets/img/logo-mark-dark.svg");
    }
}

:root[data-theme='dark'] .logo__mark {
    background-image: url("/assets/img/logo-mark-dark.svg");
}

/* Надпись повторяет логотип: тяжёлое начертание, тесные буквы, наклон.
   Наклон задан преобразованием, а не курсивом: курсивного файла у Inter
   здесь нет, и браузер рисовал бы его сам — вкривь. */
.logo__word {
    font-weight: 900;
    font-size: var(--text-l);
    letter-spacing: -0.045em;
    transform: skewX(-8deg);
    transform-origin: left center;
}

/* «.com» — фирменным красным, а не общим цветом акцента: акцент у нас
   золотой, и в логотипе он читался бы как чужая марка. Цвет взят из
   самого логотипа, тот же, что у знака рядом. */
.logo__word b {
    font-weight: inherit;
    color: var(--brand-red);
}

.nav {
    display: none;
    gap: var(--space-s);
    margin-inline-end: auto;
}

@media (min-width: 768px) {
    .nav {
        display: flex;
    }
}

.nav__link {
    color: var(--text-muted);
    text-decoration: none;
    font-size: var(--text-s);
    font-weight: 600;
    padding: var(--space-2xs) 0;
    border-block-end: 2px solid transparent;
    white-space: nowrap;
}

.nav__link:hover {
    color: var(--text);
}

.nav__link[aria-current='page'] {
    color: var(--text);
    border-block-end-color: var(--accent);
}

.header-tools {
    display: flex;
    align-items: center;
    gap: var(--space-2xs);
    margin-inline-start: auto;
}

/* --------------------------------------------------- строка живых матчей */

/* Полоса под шапкой: то, что идёт прямо сейчас. Горизонтальная прокрутка
   вместо переноса — она не ломает высоту шапки на узких экранах. */
/* ------------------------------------------------------------ табло

   Сигнатурный элемент. Название сайта — «Табло», и полоса вверху
   страницы это буквально оно: счёт крупными моноширинными цифрами,
   команды мелко под ними, тлеющая точка у идущих матчей.

   Единственное место в интерфейсе, где допущено свечение. Дальше по
   странице всё держится на плотности и границах — иначе свечение
   перестаёт что-либо значить. */

.livebar {
    background: var(--bg-sunken);
    border-block-end: 1px solid var(--border);
}

/* Табло выровнено по сетке страницы и делит её ширину поровну.

   Раньше это была прокручиваемая лента: она уходила за правый край
   экрана, обрываясь на полуслове, тогда как всё остальное на странице
   заканчивалось по общей границе. Полоса, которая одна нарушает
   выравнивание, читается как недоделанная.

   Матчей показывается столько, сколько помещается в ряд; остальные —
   по ссылке в конце. */
.livebar__track {
    display: grid;
    grid-template-columns: auto repeat(var(--live-count, 6), minmax(0, 1fr)) auto;
    align-items: stretch;
    gap: 0;
    min-height: 52px;
}

.livebar__label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding-inline: var(--space-xs) var(--space-s);
    font-family: var(--font-display);
    font-size: var(--text-2xs);
    font-weight: 700;
    font-stretch: 115%;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--live);
    white-space: nowrap;
    flex: none;
}

/* Карточка табло — сетка из трёх колонок: значок, команды, счёт.

   Прежде это был flex с расталкиванием по краям, и колонка счёта у
   каждой карточки вставала на своё место: у футбола «1», у крикета
   «206/7». Полоса читалась как несколько съехавших панелей вместо
   одного табло. */
.livebar__item {
    display: grid;
    /* Четвёртая колонка — минута идущего матча: без неё она уезжала
       на вторую строку и разрывала полосу. */
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    align-items: center;
    gap: var(--space-2xs);
    padding: var(--space-2xs) var(--space-s);
    text-decoration: none;
    color: var(--text);
    min-width: 0;
    border-inline-end: 1px solid var(--border);
    transition: background 0.12s ease;
}

.livebar__item:first-of-type { border-inline-start: 1px solid var(--border); }

.livebar__item:hover { background: var(--hover-bg); }

.livebar__teams {
    display: grid;
    gap: 1px;
    font-size: var(--text-xs);
    line-height: 1.3;
}

.livebar__teams { min-width: 0; }

/* Вид спорта — значком, а не подписью поперёк строки.

   Слово, повёрнутое на бок, занимало место в высоту, ломало ритм
   полосы — у каждого вида своя длина, — и читалось хуже значка. */
.livebar__icon {
    inline-size: 15px;
    block-size: 15px;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
    color: var(--text-faint);
}

.livebar__team {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Счёт — то, ради чего полоса существует. Цифры моноширинные и
   выровнены в колонку: при обновлении счёта строка не дёргается. */
.livebar__score {
    display: grid;
    gap: 1px;
    /* Своя ширина у колонки счёта: без неё карточки с однозначным
       счётом и с крикетным «503/9d» ставили команды на разную
       глубину, и полоса выглядела набором съехавших панелей. */
    min-inline-size: 2.2rem;
    font-family: var(--font-mono);
    font-size: var(--text-s);
    font-weight: 700;
    line-height: 1.3;
    text-align: end;
    font-variant-numeric: tabular-nums;
    color: var(--accent);
}

/* Крикетный счёт вчетверо длиннее футбольного. Уменьшается он один:
   соседние карточки остаются в своём размере. */
.livebar__score--s { font-size: var(--text-xs); }
.livebar__score--xs { font-size: 10px; letter-spacing: -0.01em; }

.livebar__more {
    display: inline-flex;
    align-items: center;
    padding-inline: var(--space-s);
    font-size: var(--text-xs);
    color: var(--text-muted);
    text-decoration: none;
    white-space: nowrap;
    flex: none;
}

.livebar__more:hover { color: var(--accent); }

/* Узкий экран: полоса прокручивается вбок вместо деления ширины.

   Шесть равных колонок на телефоне сжимаются до нескольких пикселей —
   названия команд обрезаются полностью, и на месте табло остаётся
   столбик цифр без смысла. Лучше показать два матча целиком и дать
   доступ к остальным прокруткой. */
@media (max-width: 900px) {
    .livebar__track {
        display: flex;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .livebar__track::-webkit-scrollbar { display: none; }

    .livebar__item {
        flex: 0 0 auto;
        min-inline-size: 180px;
    }

    /* Вертикальная подпись вида спорта на телефоне съедает четверть
       карточки ради двух букв — на узком экране её нет. */
    .livebar__sport { display: none; }

    /* Метка «идёт матч» остаётся на месте при прокрутке: без неё
       столбик счетов теряет объяснение. */
    .livebar__label {
        position: sticky;
        inset-inline-start: 0;
        background: var(--bg-sunken);
        z-index: 1;
    }

    /* «Матчи →» уезжает в конец ленты вместе с ней: закреплённая
       справа ссылка перекрывала счёт ближайшего матча. */
    .livebar__more { flex: 0 0 auto; }
}

/* Точка идущего матча тлеет, а не мигает: мигание в углу экрана
   утомляет за минуту, а мягкая пульсация читается как «живое». */
.dot-live {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--live);
    box-shadow: 0 0 0 0 var(--live);
    animation: pulse-live 2.4s ease-out infinite;
}

@keyframes pulse-live {
    0%   { box-shadow: 0 0 0 0 rgba(214, 46, 46, 0.55); }
    70%  { box-shadow: 0 0 0 7px rgba(214, 46, 46, 0); }
    100% { box-shadow: 0 0 0 0 rgba(214, 46, 46, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .dot-live { animation: none; }
}

/* ------------------------------------------------------ строка табло */

/* Сигнатурный элемент. Один компонент показывает счёт везде: в ленте,
   на странице команды, в списке матчей. Цифры моноширинные и одинаковой
   ширины, поэтому колонка счёта не дёргается при обновлении. */
.scoreline {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: var(--space-xs);
}

.scoreline__side {
    display: flex;
    align-items: center;
    gap: var(--space-2xs);
    min-width: 0;
}

.scoreline__side--away {
    flex-direction: row-reverse;
    text-align: end;
}

.scoreline__team {
    font-weight: 600;
    font-size: var(--text-s);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.scoreline__score {
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: var(--text-l);
    letter-spacing: -0.05em;
    padding-inline: var(--space-2xs);
    display: flex;
    align-items: center;
    gap: 0.35em;
    white-space: nowrap;
}

.scoreline__score--pending {
    font-size: var(--text-s);
    font-weight: 400;
    color: var(--text-muted);
    letter-spacing: 0;
}

.scoreline__sep {
    color: var(--text-faint);
    font-weight: 400;
}

/* Победитель выделяется весом, а не цветом: цветом кодируется состояние
   матча, и смешивать эти два значения нельзя. */
.scoreline__side--winner .scoreline__team {
    font-weight: 800;
}

.scoreline__side--loser .scoreline__team {
    color: var(--text-muted);
}

/* ------------------------------------------------------------- индикаторы */

.badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    padding: 0.15em 0.5em;
    border-radius: var(--radius-s);
    font-size: var(--text-2xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.badge--live {
    background: var(--live-subtle);
    color: var(--live);
}

.badge--finished {
    background: var(--bg-inset);
    color: var(--text-muted);
}

.badge--scheduled {
    background: var(--data-subtle);
    color: var(--data);
}

.badge--confirmed {
    background: var(--win-subtle);
    color: var(--win);
}

.badge--unconfirmed {
    background: var(--accent-subtle);
    color: var(--accent);
}

/* Пульсирующая точка живого матча. Единственная анимация на сайте —
   и она несёт смысл: показывает, что данные обновляются. */
.dot-live {
    inline-size: 6px;
    block-size: 6px;
    border-radius: 50%;
    background: currentColor;
    animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
}

/* ------------------------------------------------------------- карточки */

.card {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-m);
    overflow: hidden;
}

.card__body {
    padding: var(--space-s);
}

.card__title {
    font-size: var(--text-m);
    font-weight: 700;
    line-height: var(--leading-snug);
    margin: 0 0 var(--space-2xs);
}

.card__title a {
    color: var(--text);
    text-decoration: none;
}

.card__title a:hover {
    color: var(--data);
}

.card__meta {
    display: flex;
    align-items: center;
    gap: var(--space-2xs);
    flex-wrap: wrap;
    font-size: var(--text-xs);
    color: var(--text-faint);
}

.card__lead {
    font-size: var(--text-s);
    color: var(--text-muted);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Заглавная карточка ленты: единственное место, где заголовок крупный. */
.card--lead .card__title {
    font-size: var(--text-2xl);
    letter-spacing: -0.025em;
}

.card__media {
    aspect-ratio: 16 / 9;
    background: var(--bg-inset);
    object-fit: cover;
    inline-size: 100%;
}

/* ------------------------------------------------------------- заголовки */

.section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-s);
    margin-block-end: var(--space-s);
    padding-block-end: var(--space-2xs);
    border-block-end: 2px solid var(--text);
}

.section-head__title {
    font-size: var(--text-l);
    font-weight: 800;
    letter-spacing: -0.02em;
    margin: 0;
}

.section-head__link {
    font-size: var(--text-xs);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

/* Надзаголовок: тип материала или турнир. Несёт сведения, а не украшает. */
.eyebrow {
    font-size: var(--text-2xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--accent);
}

/* --------------------------------------------------------------- таблица */

.table {
    font-size: var(--text-s);
}

/* Широкая таблица прокручивается сама, а не тянет за собой страницу.

   Состав команды — номер, игрок, амплуа, возраст, матчи — в четыреста
   сорок точек шириной, и на телефоне вбок уезжала вся страница: вместе
   с заголовком, досье и подвалом. Обёртки у таблиц нет, зато сама
   таблица становится прокручиваемым блоком: строки внутри остаются
   строками таблицы и ширину считают по содержимому.

   Только на узком экране: на широком table-layout нужен как есть, а
   блок ломает распределение ширины столбцов. */
@media (max-width: 767px) {
    .table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .table > thead,
    .table > tbody,
    .table > tfoot {
        display: table;
        inline-size: 100%;
        /* Иначе строки внутри блока разъезжаются по своим ширинам и
           столбцы шапки перестают совпадать со столбцами тела. */
        table-layout: auto;
    }
}

.table th {
    text-align: start;
    font-size: var(--text-2xs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-faint);
    font-weight: 700;
    padding: var(--space-2xs) var(--space-3xs);
    border-block-end: 1px solid var(--border);
}

.table td {
    padding: var(--space-2xs) var(--space-3xs);
    border-block-end: 1px solid var(--border);
}

.table tbody tr:last-child td {
    border-block-end: none;
}

.table__num {
    font-family: var(--font-mono);
    text-align: end;
    font-size: var(--text-xs);
}

.table__pos {
    font-family: var(--font-mono);
    color: var(--text-faint);
    inline-size: 2ch;
}

.table__team {
    font-weight: 600;
}

/* Ссылки в таблицах — тем же цветом, что и текст.

   На странице арены матчи в списке стояли синими подчёркнутыми
   строками — единственные такие на сайте. */
.table__team a,
.table td a {
    color: inherit;
    text-decoration: none;
}

.table td a:hover { color: var(--brand-red); }

.table__team a:hover {
    color: var(--data);
}

.table tbody tr:hover {
    background: var(--hover-bg);
}

/* Форма команды: пять последних результатов как цепочка. Плотная запись
   заменяет пять слов одной строкой и читается мгновенно. */
.form-run {
    display: inline-flex;
    gap: 2px;
}

.form-run__item {
    inline-size: 16px;
    block-size: 16px;
    border-radius: 3px;
    font-size: 10px;
    font-weight: 700;
    display: grid;
    place-items: center;
    color: var(--text-inverse);
}

.form-run__item--w { background: var(--win); }
.form-run__item--d { background: var(--draw); }
.form-run__item--l { background: var(--loss); }

/* -------------------------------------------------------------- материал */

.article-header {
    margin-block-end: var(--space-m);
}

.article-title {
    font-size: var(--text-3xl);
    letter-spacing: -0.03em;
    margin-block-end: var(--space-s);
}

@media (min-width: 768px) {
    .article-title {
        font-size: var(--text-4xl);
    }
}

.article-lead {
    font-size: var(--text-l);
    color: var(--text-muted);
    line-height: var(--leading-snug);
}

.article-meta {
    display: flex;
    align-items: center;
    gap: var(--space-s);
    flex-wrap: wrap;
    font-size: var(--text-xs);
    color: var(--text-faint);
    padding-block: var(--space-xs);
    border-block: 1px solid var(--border);
}

.prose {
    max-width: var(--content-max);
    font-size: var(--text-l);
    line-height: var(--leading-normal);
}

.prose p {
    margin-block-end: var(--space-s);
}

.prose h2 {
    font-size: var(--text-xl);
    margin-block: var(--space-l) var(--space-s);
}

.prose ul, .prose ol {
    padding-inline-start: var(--space-m);
    margin-block-end: var(--space-s);
}

/* Ссылка на сущность внутри текста: подчёркивание точками отличает
   внутреннюю перелинковку от обычной ссылки, не отвлекая от чтения. */
.entity-link {
    color: inherit;
    text-decoration: underline dotted;
    text-decoration-color: var(--accent);
    text-underline-offset: 0.2em;
    font-weight: 600;
}

.entity-link:hover {
    color: var(--data);
    text-decoration-style: solid;
}

/* Первоисточники — обязательный блок под каждым материалом. */
.sources {
    margin-block-start: var(--space-l);
    padding: var(--space-s);
    background: var(--bg-sunken);
    border-radius: var(--radius-m);
    font-size: var(--text-s);
}

.sources__title {
    font-size: var(--text-2xs);
    color: var(--text-faint);
    font-weight: 700;
    margin-block-end: var(--space-2xs);
}

.sources__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.sources__list li + li {
    margin-block-start: var(--space-3xs);
}

.disclosure {
    margin-block-start: var(--space-s);
    font-size: var(--text-xs);
    color: var(--text-faint);
    font-style: italic;
}

/* --------------------------------------------------------------- боковая */

.aside-block + .aside-block {
    margin-block-start: var(--space-l);
}

.mini-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.mini-list li {
    padding-block: var(--space-2xs);
    border-block-end: 1px solid var(--border);
}

.mini-list li:last-child {
    border-block-end: none;
}

.mini-list a {
    color: var(--text);
    text-decoration: none;
    font-size: var(--text-s);
    font-weight: 600;
    line-height: var(--leading-snug);
    display: block;
}

.mini-list a:hover {
    color: var(--data);
}

.mini-list__meta {
    font-size: var(--text-2xs);
    color: var(--text-faint);
    margin-block-start: 2px;
}

/* --------------------------------------------------------------- кнопки */

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3xs);
    padding: var(--space-2xs) var(--space-s);
    border-radius: var(--radius-s);
    border: 1px solid var(--border-strong);
    background: var(--bg-elevated);
    color: var(--text);
    font: inherit;
    font-size: var(--text-s);
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
}

.button:hover {
    background: var(--hover-bg);
}

/* Главная кнопка — красная, как все активные состояния сайта.

   Прежде она была горчичной: на странице поиска кнопка «Найти» и
   активная вкладка рядом оказывались разного цвета, и какое из двух
   действий главное, интерфейс не говорил. */
.button--primary {
    background: var(--brand-red);
    border-color: var(--brand-red);
    color: #fff;
}

.button--primary:hover {
    background: var(--brand-red-dark, #c60013);
    border-color: var(--brand-red-dark, #c60013);
}

.button--ghost {
    border-color: transparent;
    background: transparent;
    color: var(--text-muted);
    padding-inline: var(--space-2xs);
}

.button--ghost:hover {
    background: var(--bg-inset);
    color: var(--text);
}

/* ------------------------------------------------------- коэффициенты */

.odds {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-2xs);
}

.odds__item {
    text-align: center;
    padding: var(--space-2xs);
    background: var(--bg-sunken);
    border: 1px solid var(--border);
    border-radius: var(--radius-s);
}

.odds__label {
    font-size: var(--text-2xs);
    color: var(--text-faint);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.odds__value {
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: var(--text-l);
    color: var(--data);
}

.odds__note {
    font-size: var(--text-2xs);
    color: var(--text-faint);
    margin-block-start: var(--space-3xs);
}

/* --------------------------------------------------------------- прогноз */

.prediction {
    border-inline-start: 3px solid var(--accent);
    padding-inline-start: var(--space-s);
}

.confidence {
    display: flex;
    align-items: center;
    gap: var(--space-2xs);
    font-size: var(--text-s);
}

.confidence__bar {
    /* Полоса и заливка — блоки.

       Обе были строчными элементами, а ширина у строчного элемента не
       действует: на карточках прогнозов полоса стояла пустой серой
       лентой при любой уверенности. */
    display: block;
    /* Высота полосы не зависит от того, куда её поставили.
     *
     * С «flex: 1» она растягивалась по главной оси родителя: в строке
     * с числом — по ширине, как и задумано, а в карточке прогноза, где
     * блоки идут сверху вниз, — по высоте. На витрине это выглядело
     * как коричневый прямоугольник в половину карточки рядом с
     * тонкими полосками у соседей. */
    flex: none;
    inline-size: 100%;
    block-size: 8px;
    background: var(--bg-inset);
    border: 1px solid var(--border);
    border-radius: 4px;
    overflow: hidden;
}

.confidence__fill {
    display: block;
    block-size: 100%;
    background: var(--win);
}

/* В строке с числом полоса занимает остаток ширины. */
.confidence .confidence__bar {
    flex: 1;
    inline-size: auto;
}

/* Цвет говорит о том же, о чём число: уверенная ставка зелёная,
   спорная — янтарная. У проверенных прогнозов цвет показывает исход. */
.confidence__fill--low { background: var(--accent); }
.pcard--hit .confidence__fill { background: var(--win); }
.pcard--miss .confidence__fill { background: var(--brand-red); }

.confidence__value {
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: var(--text-s);
}

.facts {
    list-style: none;
    margin: var(--space-s) 0 0;
    padding: 0;
    font-size: var(--text-s);
}

.facts li {
    position: relative;
    padding-inline-start: var(--space-s);
    margin-block-end: var(--space-2xs);
}

.facts li::before {
    content: '';
    position: absolute;
    inset-inline-start: 0;
    top: 0.6em;
    inline-size: 5px;
    block-size: 5px;
    border-radius: 50%;
    background: var(--accent);
}

/* ------------------------------------------------------- хлебные крошки */

.breadcrumbs {
    font-size: var(--text-xs);
    color: var(--text-faint);
    margin-block-end: var(--space-s);
    display: flex;
    gap: var(--space-3xs);
    flex-wrap: wrap;
}

.breadcrumbs a {
    color: var(--text-muted);
    text-decoration: none;
}

.breadcrumbs a:hover {
    color: var(--data);
}

/* ---------------------------------------------------------------- подвал */

.site-footer {
    margin-block-start: var(--space-2xl);
    padding-block: var(--space-l);
    border-block-start: 1px solid var(--border);
    background: var(--bg-sunken);
    font-size: var(--text-s);
    color: var(--text-muted);
}

.site-footer__grid {
    display: grid;
    gap: var(--space-m);
    grid-template-columns: 1fr;
}

@media (min-width: 768px) {
    .site-footer__grid {
        /* Пять колонок: подпись сайта, разделы, служебные страницы,
           виды спорта и языки. С четырьмя последняя срывалась на
           вторую строку и висела под подписью. */
        grid-template-columns: 1.6fr repeat(4, minmax(0, 1fr));
    }
}

.site-footer a {
    color: var(--text-muted);
    text-decoration: none;
}

.site-footer a:hover {
    color: var(--text);
}

.footer-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.footer-list li + li {
    margin-block-start: var(--space-3xs);
}

/* ---------------------------------------------------------- вспомогательное */

.muted { color: var(--text-muted); }
.faint { color: var(--text-faint); }
.mono { font-family: var(--font-mono); }
.nowrap { white-space: nowrap; }

.grid-cards {
    display: grid;
    gap: var(--space-s);
    grid-template-columns: 1fr;
}

@media (min-width: 640px) {
    .grid-cards--2 { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 900px) {
    .grid-cards--3 { grid-template-columns: repeat(3, 1fr); }
}

.empty {
    padding: var(--space-l);
    text-align: center;
    color: var(--text-faint);
    font-size: var(--text-s);
}

/* ------------------------------------------------- пометка о проверке */

/* Сведения проверяются перекрёстно по нескольким источникам, но сами
   источники не публикуются. Пометка набрана мелко и приглушённо: она
   отвечает на вопрос о происхождении текста, не отвлекая от чтения. */
.verified {
    margin-block-start: var(--space-l);
    padding-block-start: var(--space-2xs);
    border-block-start: 1px solid var(--border);
    font-size: var(--text-2xs);
    color: var(--text-faint);
    display: flex;
    align-items: center;
    gap: 0.4em;
    line-height: 1.4;
}

.verified__mark {
    color: var(--win);
    font-weight: 700;
    flex: none;
}

/* ------------------------------------------------ опознавательные знаки */

/* Герб и портрет выравниваются по базовой линии текста и не съезжают
   при переносе строки. Размер задан в разметке, поэтому место
   резервируется до загрузки и макет не прыгает. */
.emblem {
    inline-size: 24px;
    block-size: 24px;
    flex: none;
    border-radius: 3px;
}

.emblem--lg {
    inline-size: 72px;
    block-size: 72px;
    border-radius: 6px;
}

.portrait {
    inline-size: 96px;
    block-size: 96px;
    border-radius: 8px;
    flex: none;
    object-fit: cover;
}

.portrait--sm {
    inline-size: 28px;
    block-size: 28px;
    border-radius: 4px;
}

.with-emblem {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2xs);
}

.entity-head {
    display: flex;
    align-items: center;
    gap: var(--space-s);
    flex-wrap: wrap;
}

/* ============================================================ календарь
   Сетка дней по неделям: столбец — неделя, строка — день недели.
   Полтора месяца умещаются в полосу высотой в семь клеток, и по
   насыщенности сразу видно, где игровой день, а где тур.

   Столбцами, а не строками: календарь висит над расписанием, и
   вертикальная сетка на полтора месяца заняла бы весь первый экран. */

.calendar {
  margin-block-end: var(--space-l);
}

.calendar__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-s);
  margin-block-end: var(--space-2xs);
}

.calendar__title {
  font-size: var(--text-s);
  font-weight: 600;
  color: var(--text-muted);
  margin: 0;
}

.calendar__legend {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: var(--text-xs);
  color: var(--text-faint);
}

/* Клетки шкалы стоят вне сетки, их размер задаётся отдельно. */
.calendar__legend .calendar__cell {
  width: 11px;
  height: 11px;
  aspect-ratio: auto;
  border-radius: 2px;
}

/* Прокрутки нет: год укладывается в ширину страницы.
   
   Это не украшение, а необходимость. Стоит задать overflow по одной
   оси, как браузер перестаёт считать вторую видимой — и подсказка,
   выходящая за верх сетки, добавляет вертикальную полосу прокрутки
   вместо того, чтобы просто показаться. */
.calendar__scroll {
  padding-block-end: 2px;
}

.calendar__grid {
  /* Размер клетки — доля ширины блока, а не фиксированные пиксели.
     Календарь стоит в колонке, ширина которой зависит от экрана и
     соседних блоков; при жёстком размере он либо не дотягивался до
     края, либо не помещался.

     Промежуток тоже в долях, но с пределами: ниже одного пикселя
     клетки сливаются в сплошное поле, выше трёх сетка распадается. */
  --calendar-gap: clamp(1px, 0.22%, 3px);

  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    ".        months"
    "weekdays weeks";
  gap: 4px;
}

.calendar__months {
  grid-area: months;
  display: flex;
  color: var(--text-faint);
}

.calendar__months span {
  /* Доля месяца в полосе равна доле его недель в году. */
  width: calc(var(--span) / var(--weeks) * 100%);
  overflow: hidden;
  white-space: nowrap;
  text-transform: capitalize;
  font-size: clamp(9px, 0.72vw, 11px);
}

.calendar__weekdays {
  grid-area: weekdays;
  display: grid;
  grid-template-rows: repeat(7, 1fr);
  gap: var(--calendar-gap);
  color: var(--text-faint);
  padding-inline-end: 3px;
  font-size: clamp(8px, 0.62vw, 10px);
}

.calendar__weekdays span {
  display: flex;
  align-items: center;
}

.calendar__weeks {
  grid-area: weeks;
  display: grid;
  /* minmax(0, 1fr), а не 1fr: у колонки грида наименьшая ширина по
     умолчанию равна наименьшей ширине содержимого, и полсотни недель
     года переставали сжиматься, растягивая страницу вбок на планшете.
     Ноль в нижней границе снимает этот предел. */
  grid-template-columns: repeat(var(--weeks), minmax(0, 1fr));
  gap: var(--calendar-gap);
}

.calendar__week {
  display: grid;
  grid-template-rows: repeat(7, 1fr);
  gap: var(--calendar-gap);
}

.calendar__cell {
  position: relative;
  display: block;
  /* Квадрат: высота выводится из ширины, а ширину задаёт сетка. */
  aspect-ratio: 1;
  width: 100%;
  border-radius: clamp(1px, 20%, 4px);
  background: var(--calendar-l0);
  transition: transform 0.08s ease;
}

a.calendar__cell:hover,
a.calendar__cell:focus-visible {
  transform: scale(1.35);
  z-index: 3;
}

/* День без матчей ссылкой не является: идти по ней некуда, страница
   сообщила бы только, что матчей нет. Подсказка с датой при наведении
   остаётся — увеличение оставлено ей. */
.calendar__cell[aria-disabled] {
  cursor: default;
}

.calendar__cell--empty {
  background: transparent;
}

.calendar__cell--l0 { background: var(--calendar-l0); }
.calendar__cell--l1 { background: var(--calendar-l1); }
.calendar__cell--l2 { background: var(--calendar-l2); }
.calendar__cell--l3 { background: var(--calendar-l3); }
.calendar__cell--l4 { background: var(--calendar-l4); }

.calendar__cell.is-today {
  outline: 1.5px solid var(--accent);
  outline-offset: 1px;
}

.calendar__cell.is-selected {
  outline: 1.5px solid var(--text);
  outline-offset: 1px;
}

/* Подсказка на чистом CSS: показывать её скриптом означало бы грузить
   скрипт ради того, что решается одним правилом. */
/* Подсказка календаря — одна на страницу, у наведённой клетки.

   Прежде она лежала готовой разметкой в каждой клетке: шестьсот байт
   на клетку, двести килобайт на годовую сетку — больше половины веса
   страницы, — и показывала три вида спорта из девяти. Теперь клетка
   несёт только строку «football:12,hockey:5», а подсказку собирает
   скрипт. */
.ctip {
  position: absolute;
  z-index: 80;
  min-inline-size: 9.5rem;
  max-inline-size: 15rem;
  padding: var(--space-2xs) var(--space-xs);
  border-radius: var(--radius-m, 8px);
  background: var(--tooltip-bg);
  color: var(--tooltip-fg);
  box-shadow: 0 8px 24px rgb(0 0 0 / 0.3);
  font-size: var(--text-xs);
  line-height: 1.45;
  pointer-events: none;
}

.ctip[hidden] { display: none; }

.ctip__day {
  display: block;
  font-weight: 700;
  white-space: nowrap;
}

.ctip__total {
  display: block;
  color: rgb(255 255 255 / 0.62);
  font-size: var(--text-2xs);
}

.ctip__list {
  display: grid;
  gap: 2px;
  margin-block-start: 5px;
  padding-block-start: 5px;
  border-block-start: 1px solid rgb(255 255 255 / 0.16);
}

.ctip__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-s);
}

.ctip__row b { font-variant-numeric: tabular-nums; }

/* Правила «(hover: none)» здесь нет намеренно.

   Подсказку показывает наведение мыши, и на телефоне она не появится
   сама собой. Зато под это правило попадали браузеры без мыши в
   принципе — от сенсорных ноутбуков до снимающего страницы движка, — и
   подсказка не показывалась там, где нужна. */

/* Прокрутка не нужна ни на каком экране: сетка делит ширину блока
   между неделями и сжимается вместе с ним. На телефоне клетки
   становятся мелкими, но год виден целиком — а это единственное,
   ради чего календарь на странице.

   Подписи дней недели на узком экране убираем: они занимают больше
   места, чем сама сетка. */
@media (max-width: 560px) {
  .calendar__weekdays { display: none; }
  .calendar__grid { grid-template-columns: 1fr; }
  .calendar__grid { grid-template-areas: "months" "weeks"; }
}

@media (prefers-reduced-motion: reduce) {
  .calendar__cell { transition: none; }
  a.calendar__cell:hover { transform: none; }
}

/* ======================================================= разбивка страниц */

.paging {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-m);
  margin-block: var(--space-l);
}

.paging__link {
  padding: var(--space-2xs) var(--space-s);
  border: 1px solid var(--border);
  border-radius: var(--radius-s);
  font-size: var(--text-s);
  text-decoration: none;
  color: var(--text);
}

.paging__link:hover { border-color: var(--accent); color: var(--accent); }

.paging__link.is-off {
  opacity: 0.4;
  pointer-events: none;
}

.paging__state {
  font-size: var(--text-s);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

/* ========================================================== ход матча
   События по разные стороны от линии времени: слева хозяева, справа
   гости. Так по одному взгляду видно, кто вёл игру, — а сплошной
   список этого не показывает. */

/* Лента событий по сторонам линии времени убрана вместе со своими
   правилами: ход матча идёт одним столбцом (.mflow). Двусторонняя
   лента читалась зигзагом, а на узком экране её колонки схлопывались
   и порядок событий терялся вовсе. */


/* ======================================================== статистика
   Полоса сравнения строится от суммы показателей: общей шкалы у них
   нет, и доля в сумме — единственное, что можно показать честно. */

.statbars { display: grid; gap: var(--space-xs); }

.statbar {
  display: grid;
  grid-template-columns: 3.5rem 1fr 3.5rem;
  align-items: center;
  gap: var(--space-s);
}

.statbar__value {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  font-size: var(--text-s);
}

.statbar__value:last-child { text-align: end; }

.statbar__mid { display: grid; gap: 3px; }

.statbar__label {
  font-size: var(--text-xs);
  color: var(--text-muted);
  text-align: center;
}

.statbar__track {
  display: flex;
  height: 6px;
  border-radius: 3px;
  overflow: hidden;
  background: var(--border);
}

/* Те же цвета сторон, что и у плиток выше: если бы полосы красились
   иначе, читателю пришлось бы держать в голове два соответствия. */
.statbar__home { background: var(--stat-home); }
.statbar__away { background: var(--stat-away); }

/* =========================================================== составы */

/* Составы списком заменены таблицей (.mtable--squad): номер, имя и
   позиция стоят столбцами и выравниваются между двумя командами. */


/* ====================================================== полоса матча
   Когда что произошло — одним взглядом. Лента событий отвечает на
   вопрос «что было», полоса — «когда именно и с каким разрывом»:
   три гола подряд в концовке видно сразу, а в списке они читаются
   как три отдельные строки. */

.strip {
  padding-block: var(--space-s) var(--space-2xs);
}

.strip__track {
  position: relative;
  height: 6px;
  border-radius: 3px;
  background: linear-gradient(90deg,
    var(--border) 0%, var(--text-faint) 50%, var(--border) 100%);
}

.strip__half {
  position: absolute;
  top: -6px;
  bottom: -6px;
  width: 1px;
  background: var(--text-faint);
  opacity: 0.5;
}

.strip__half-label {
  position: absolute;
  top: -18px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 9px;
  color: var(--text-faint);
  white-space: nowrap;
}

.strip__mark {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  cursor: default;
}

.strip__icon {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  font-size: 9px;
  line-height: 1;
}

/* Голы крупнее прочих отметок: полоса должна читаться по ним. */
.strip__mark.is-major .strip__icon {
  width: 24px;
  height: 24px;
  font-size: 12px;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--bg);
}

/* События хозяев над полосой, гостей под ней. */
.strip__mark--home { top: -2px; }
.strip__mark--away { top: calc(100% + 2px); }

.strip__tip {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  padding: 4px 7px;
  border-radius: var(--radius-s);
  background: var(--tooltip-bg);
  color: var(--tooltip-fg);
  font-size: 10px;
  line-height: 1.35;
  white-space: nowrap;
  /* Спрятана снятием с раскладки, а не одной прозрачностью.

     Спрятанный видимостью элемент раскладку всё равно занимает: у
     отметки в конце полосы подсказка выходила за правый край окна на
     два десятка точек, и вся страница получала горизонтальную
     прокрутку. Заметить это глазом нельзя — подсказки не видно. */
  display: none;
  z-index: 5;
}

.strip__mark--away .strip__tip {
  bottom: auto;
  top: calc(100% + 6px);
}

.strip__mark:hover .strip__tip,
.strip__mark:focus-visible .strip__tip { display: block; }

.strip__scale {
  display: flex;
  justify-content: space-between;
  margin-block-start: var(--space-m);
  font-size: 9px;
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}

/* ================================================== лента комментария
   Новое сверху: читатель, открывший идущий матч, хочет знать, что
   происходит сейчас, а не с чего всё началось. */

.feedline {
  list-style: none;
  margin: 0;
  padding: 0;
}

.feedline__item {
  display: grid;
  grid-template-columns: 3rem 1fr;
  gap: var(--space-xs);
  padding-block: var(--space-2xs);
  border-block-end: 1px solid var(--border);
}

.feedline__item:last-child { border-block-end: 0; }

.feedline__minute {
  font-variant-numeric: tabular-nums;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--accent);
  padding-block-start: 2px;
}

.feedline__text {
  font-size: var(--text-s);
  line-height: 1.55;
}

/* ================================================= разделы ленты (чипы) */

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
  margin-block-end: var(--space-s);
  /* Класс живёт и на <nav>, и на <ul>. У списка браузер рисует свои
     точки и отступ слева: на странице турнира ряд сезонов выходил как
     «• 2026 • 2025» — маркеры между плашками читались как мусор. */
  list-style: none;
  padding-inline-start: 0;
}

.chips--sub {
  margin-block-start: calc(var(--space-2xs) * -1);
  padding-block-start: var(--space-2xs);
  border-block-start: 1px solid var(--border);
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-s);
  font-size: var(--text-s);
  text-decoration: none;
  color: var(--text);
  white-space: nowrap;
}

.chip:hover { border-color: var(--accent); color: var(--accent); }

/* Плашка не шире своей ячейки: класс живёт и на <nav> с прямыми
   ссылками, и на <ul>, где ссылка обёрнута в <li>. */
.chips > li {
    max-inline-size: 100%;
    min-inline-size: 0;
}

/* Плашка не длиннее строки.

   Названия турниров бывают в полсотни знаков — «Государственная лига
   Южной Австралии 1», — и на телефоне такая плашка вылезала за край
   экрана, растягивая всю страницу вбок: у сайта горизонтальной
   прокрутки нет, и содержимое просто становилось недостижимым. */
.chip {
    max-inline-size: 100%;
    /* Отступы внутрь ширины: без этого плашка с длинным названием
       выходит за край ровно на свои двадцать точек padding — и тянет
       за собой всю страницу. */
    box-sizing: border-box;
    min-inline-size: 0;
    /* И обрезаем сам текст: плашка в ширину вписалась, а строка внутри
       неё — нет, потому что переносы у неё запрещены. «Игры
       Центральной Америки и Карибского бассейна» на телефоне длиннее
       экрана в любом случае. */
    overflow: hidden;
    text-overflow: ellipsis;
}

.chip > span,
.chip__note {
    overflow: hidden;
    text-overflow: ellipsis;
}

.chip.is-active {
  /* Красная, а не янтарная: в разборах активный выбор всегда красный —
     тем же цветом, что и главная кнопка. */
  background: var(--brand-red);
  border-color: var(--brand-red);
  /* Текст на плашке всегда контрастен её заливке, а не фону
     страницы: плашка цветная в обеих темах. */
  color: var(--accent-contrast);
}

.chip--sm { font-size: var(--text-xs); padding: 3px 8px; }

.chip__count {
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
  opacity: 0.65;
}

.chip.is-active .chip__count { opacity: 0.85; }

.section-head__note {
  font-size: var(--text-s);
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}

/* ==================================================== боковая колонка */

.aside {
  display: grid;
  gap: var(--space-l);
  align-content: start;
}

.aside__block {
  padding: var(--space-s);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-m);
}

.aside__title {
  font-size: var(--text-s);
  font-weight: 600;
  color: var(--text-muted);
  margin: 0 0 var(--space-xs);
}

/* Календарь в колонке уже, чем на странице матчей: подписи месяцев там
   не нужны, а промежуток между клетками мельче. */
.aside__block .calendar { margin-block-end: 0; }
.aside__block .calendar__months { display: none; }
.aside__block .calendar__grid { --calendar-gap: clamp(1px, 1.4%, 3px); }

.toplist {
  list-style: none;
  margin: 0;
  padding: 0;
}

.toplist__item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-xs);
  padding-block: 5px;
  border-block-end: 1px solid var(--border);
  font-size: var(--text-s);
}

.toplist__item:last-child { border-block-end: 0; }

.toplist__count {
  font-size: var(--text-xs);
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}

/* ==================================================== первый экран главной

   Одна главная новость и три следующие рядом. Раньше главный материал
   занимал экран целиком, и читатель видел ровно одну новость — на
   портале, где их сотня в день.

   Пропорция 3:2 намеренная: боковой список должен читаться как список
   новостей, а не как подпись к главной фотографии. */

.lead {
    display: grid;
    grid-template-columns: 3fr 2fr;
    gap: var(--space-l);
    margin-block-end: var(--space-xl);
    align-items: start;
}

.lead__main {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.lead__media {
    display: block;
    overflow: hidden;
    border-radius: var(--radius-m);
    background: var(--bg-sunken);
}

/* Высота фотографии ограничена: при полной ширине колонки кадр 16:9
   вырастает настолько, что заголовок уходит за пределы первого экрана,
   и читатель видит картинку без единого слова. */
.lead__media img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    max-height: 46vh;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.lead__main:hover .lead__media img { transform: scale(1.02); }

.lead__body { padding-block-start: var(--space-s); }

/* Заголовок главной новости — самый крупный текст на странице.
   Дисплейный шрифт в расширенном начертании: он должен читаться
   с расстояния, как заголовок на первой полосе. */
.lead__title {
    font-family: var(--font-display);
    font-size: clamp(1.6rem, 2.6vw, 2.4rem);
    font-weight: 800;
    font-stretch: 112%;
    line-height: 1.08;
    letter-spacing: -0.03em;
    margin-block-end: var(--space-2xs);
}

.lead__title a { color: inherit; text-decoration: none; }
.lead__title a:hover { color: var(--accent); }

.lead__text {
    font-size: var(--text-m);
    line-height: var(--leading-normal);
    color: var(--text-muted);
    margin-block-end: var(--space-2xs);
}

.lead__side {
    display: grid;
    align-content: start;
    gap: var(--space-s);
}

/* Строка бокового списка: миниатюра и текст выровнены по верхней
   линии. Прежде они центрировались по высоте, и у заголовков разной
   длины подпись съезжала — колонка теряла общую линию, по которой
   взгляд идёт вниз. */
.lead__item {
    display: grid;
    grid-template-columns: 92px 1fr;
    gap: var(--space-xs);
    align-items: start;
    padding-block-end: var(--space-s);
    border-block-end: 1px solid var(--border);
}

.lead__item:last-child { border-block-end: 0; padding-block-end: 0; }

/* Миниатюра — прямоугольник постоянных пропорций. Высоту задаёт
   контейнер, изображение его заполняет: при height: auto у картинки
   с иными пропорциями снизу оставалась полоса фона, и ряд карточек
   переставал держать линию. */
.lead__thumb {
    display: block;
    overflow: hidden;
    border-radius: var(--radius-s);
    background: var(--bg-sunken);
    aspect-ratio: 16 / 9;
}

.lead__thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.lead__item-body { min-width: 0; }

/* Рубрика и дата — одной строкой над заголовком: раньше дата висела
   под ним, отрывая себя от материала, к которому относится. */
.lead__item-top {
    display: flex;
    align-items: baseline;
    gap: 5px;
    margin-block-end: 3px;
}

.lead__sep { color: var(--border-strong); font-size: var(--text-xs); }

.lead__item-title {
    font-family: var(--font-display);
    font-size: var(--text-m);
    font-weight: 700;
    font-stretch: 105%;
    line-height: 1.25;
    letter-spacing: -0.015em;
    margin: 0;
}

.lead__item-title a { color: inherit; text-decoration: none; }
.lead__item-title a:hover { color: var(--accent); }

.lead__time {
    font-size: var(--text-xs);
    color: var(--text-faint);
}

@media (max-width: 900px) {
    .lead { grid-template-columns: 1fr; gap: var(--space-m); }
}

@media (max-width: 480px) {
    .lead__item { grid-template-columns: 76px 1fr; }
}

/* Заголовок боковой колонки: строка с действием справа. */
.aside__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-xs);
    margin-block-end: var(--space-xs);
}

.aside__head .aside__title { margin-block-end: 0; }

@media (prefers-reduced-motion: reduce) {
    .lead__media img { transition: none; }
    .lead__main:hover .lead__media img { transform: none; }
}

/* ================================================== знак достоверности

   Материал, подтверждённый несколькими независимыми источниками, —
   это факт о его надёжности, и он должен быть виден. Но фразой в
   полстроки он перетягивал внимание с заголовка: галочка с коротким
   словом сообщает то же самое и занимает вчетверо меньше места.
   Полная формулировка осталась в подсказке. */

.trust {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    flex: none;
    font-size: var(--text-2xs);
    line-height: 1;
    color: var(--win);
    white-space: nowrap;
    cursor: help;
}

/* Значок обязан занимать ровно свою величину: без явного размера
   он растягивается по высоте строки и разрывает её надвое. */
.trust svg {
    display: block;
    flex: none;
    width: 11px;
    height: 11px;
}

/* Рубрика на карточке — ссылка, а не подпись: по ней читатель уходит
   к похожим материалам, и это самый частый переход после заголовка. */
.eyebrow a {
    color: inherit;
    text-decoration: none;
}

.eyebrow a:hover {
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Заголовок над первым экраном: он объясняет, чем верх страницы
   отличается от ленты ниже — там главное, здесь хронология. */
.section-head--lead {
    margin-block-end: var(--space-s);
}


/* ============================================ строка сведений о материале

   Дата, знак достоверности и переход — в одну строку, без переносов.

   Прежняя строка собиралась на flex с переносом, и знак достоверности
   сваливался на вторую строку при полном достатке места. Здесь перенос
   запрещён явно, а приоритет сжатия отдан дате: если строка не влезает,
   первой уступает она, а не действие.

   Ссылка прижата к правому краю: заголовок тоже ведёт на материал, но
   явное приглашение читатель находит быстрее, чем догадывается нажать
   на заголовок. */

.meta {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 6px;
    font-size: var(--text-xs);
    color: var(--text-faint);
    line-height: 1.4;
}

.meta__date {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.meta__dot {
    flex: none;
    color: var(--border-strong);
}

/* Действие отодвинуто к краю: между ним и датой должно читаться
   расстояние, иначе строка выглядит перечислением. */
.meta__more {
    flex: none;
    margin-inline-start: auto;
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--accent);
    text-decoration: none;
    white-space: nowrap;
}

.meta__more:hover { text-decoration: underline; text-underline-offset: 3px; }

/* В первом экране строка крупнее: там она стоит под большим текстом
   и в мелком кегле теряется. */
.lead__body .meta { font-size: var(--text-s); padding-block-start: var(--space-2xs); }
.lead__body .meta__more { font-size: var(--text-s); }

/* ============================================================ врезка

   Разбивает сплошную сетку карточек. Сорок материалов подряд читаются
   как один длинный список, в котором не за что зацепиться взглядом;
   врезка с матчами дня даёт паузу и заодно ведёт в расписание. */

.inset {
    margin-block: var(--space-l);
    padding: var(--space-s) var(--space-m);
    background: var(--bg-sunken);
    border-radius: var(--radius-m);
    border: 1px solid var(--border);
}

.inset__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-s);
    margin-block-end: var(--space-2xs);
}

.inset__title {
    font-family: var(--font-display);
    font-size: var(--text-s);
    font-weight: 700;
    font-stretch: 112%;
    color: var(--text-muted);
}

.inset__link {
    font-size: var(--text-xs);
    color: var(--accent);
    text-decoration: none;
    white-space: nowrap;
}

.inset__link:hover { text-decoration: underline; }

/* Во врезке строки матчей идут в две колонки: список в один столбец
   на всю ширину растягивает счёт от края до края. */
.mini-list--inset {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--space-l);
}

@media (max-width: 720px) {
    .mini-list--inset { grid-template-columns: 1fr; }
}

/* ===================================================== разборы матчей

   То, чего нет у агрегаторов счёта: они показывают цифры, здесь к
   цифрам прилагается объяснение. Отдельным блоком, а не в ленте —
   это не новость, а справка по сыгранной игре. */

.reviews { margin-block-start: var(--space-xl); }

.reviews__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--space-s);
}

.review {
    display: block;
    padding: var(--space-s);
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-m);
    text-decoration: none;
    color: inherit;
    transition: border-color 0.12s ease;
}

.review:hover { border-color: var(--accent); }

/* Счёт — опора карточки: по нему читатель понимает, о чём разбор,
   ещё до заголовка. */
.review__match {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: var(--space-2xs);
    padding-block-end: var(--space-2xs);
    margin-block-end: var(--space-2xs);
    border-block-end: 1px solid var(--border);
    font-size: var(--text-xs);
}

.review__team {
    display: flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.review__team--away { flex-direction: row-reverse; text-align: end; }

.review__score {
    font-family: var(--font-mono);
    font-size: var(--text-s);
    font-weight: 700;
    color: var(--accent);
    font-variant-numeric: tabular-nums;
}

.review__title {
    font-family: var(--font-display);
    font-size: var(--text-m);
    font-weight: 700;
    font-stretch: 105%;
    line-height: 1.25;
    margin-block-end: var(--space-3xs);
}

.review__text {
    font-size: var(--text-s);
    line-height: var(--leading-snug);
    color: var(--text-muted);
    margin-block-end: var(--space-2xs);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.review__meta {
    display: flex;
    gap: var(--space-xs);
    font-size: var(--text-xs);
    color: var(--text-faint);
}

/* Боковая колонка липнет к верху: лента длиннее её вчетверо, и без
   этого две трети прокрутки читатель видит пустое место справа. */
@media (min-width: 1024px) {
    .layout--with-aside > aside,
    .layout--with-aside > .aside {
        position: sticky;
        top: var(--space-s);
        align-self: start;
    }
}

/* ================================================ рубрики в ленте главной

   Сплошная лента отвечает на вопрос «что нового», разбивка по рубрикам —
   «что нового по интересующей теме». Второй вопрос читатель задаёт чаще:
   болельщика занимают трансферы или травмы его клуба, а не всё подряд.

   Заголовок раздела — ссылка в ленту рубрики: дальше читателю нужна
   не общая лента, а именно она. */

.group { margin-block-start: var(--space-l); }

.group__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-s);
    margin-block-end: var(--space-xs);
    padding-block-end: var(--space-3xs);
    border-block-end: 2px solid var(--text);
}

.group__title {
    font-family: var(--font-display);
    font-size: var(--text-l);
    font-weight: 700;
    font-stretch: 108%;
    letter-spacing: -0.01em;
}

.group__title a { color: inherit; text-decoration: none; }
.group__title a:hover { color: var(--accent); }

.group__link {
    font-size: var(--text-xs);
    color: var(--text-muted);
    text-decoration: none;
    white-space: nowrap;
}

.group__link:hover { color: var(--accent); }

/* Разбор без заголовка: место отдано самому тексту, а команды и счёт
   стоят строкой выше. */
.review__text--full {
    -webkit-line-clamp: 5;
}

/* Карточки внутри рубрики: подпись рубрики не повторяется — она стоит
   заголовком раздела строкой выше. Освободившееся место отдано дате,
   которая в трёх колонках обрезалась до «11 авгус…». */
.group .grid-cards--3 .eyebrow { display: none; }

.group .grid-cards--3 .meta {
    gap: 5px;
    font-size: var(--text-2xs);
}

.group .grid-cards--3 .meta__date {
    flex: 0 0 auto;
    overflow: visible;
}

/* «Подробнее» в трёхколоночной карточке не помещается: строка со
   всеми тремя элементами обрезается по краю. Ссылку убираем —
   заголовок и так ведёт на материал, а дата со знаком достоверности
   несут сведения, которых больше взять негде. */
.group .grid-cards--3 .meta__more { display: none; }

/* ================================================== турнирная таблица

   Полоса слева от места — единственное, что отличает таблицу от
   списка чисел: по ней видно, кто идёт в еврокубки, а кто вылетает.
   Цветом кодируется только это; всё остальное — цифры. */

/* Таблица — главное на странице, и читают её строку за строкой.

   Прежние пять точек отступа давали строку в двадцать восемь: на
   странице помещалось больше, но глаз сбивался со строки на соседнюю,
   а названия команд читались как сплошной столбец. Сорок точек — та
   высота, на которой строка читается отдельной. */
.table--standings { font-size: var(--text-s); }

.table--standings td,
.table--standings th { padding-block: 9px; }

.table--standings th { font-size: var(--text-2xs); }

/* Очки весомее прочих чисел: за ними и приходят в таблицу. */
.table--standings td.table__num strong { font-size: var(--text-s); }

.table--standings .table__pos {
    position: relative;
    padding-inline-start: 10px;
    color: var(--text-faint);
    font-variant-numeric: tabular-nums;
}

.zone .table__pos::before {
    content: "";
    position: absolute;
    inset-block: 2px;
    inset-inline-start: 0;
    width: 3px;
    border-radius: 2px;
}

.zone--champion .table__pos::before { background: var(--accent); }
.zone--europe .table__pos::before { background: var(--data); }
.zone--relegation .table__pos::before { background: var(--live); }

.table--standings .table__num {
    font-variant-numeric: tabular-nums;
    text-align: end;
    padding-inline-start: 4px;
}

.table--standings .table__num.is-positive { color: var(--win); }

.table--standings .table__team a {
    display: flex;
    align-items: center;
    gap: 6px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* В узкой колонке победы, ничьи, поражения и мячи уступают место
   разнице и очкам: по ним положение читается быстрее.
   
   Порог опущен с 1200 до 860: на экране ноутбука таблица занимает
   семьсот с лишним точек и вмещает все восемь столбцов, а прятались они
   по ширине окна, а не по ширине таблицы. */
@media (max-width: 860px) {
    .table__hide-sm { display: none; }
}

/* ========================================================== прогнозы

   Ставка, коэффициент и уверенность — три числа, ради которых
   читатель и открывает прогноз. Заголовок и разбор остаются на
   странице самого прогноза. */

.picks { list-style: none; margin: 0; padding: 0; }

.pick {
    border-block-end: 1px solid var(--border);
}

.pick:last-child { border-block-end: 0; }

.pick a {
    display: block;
    padding-block: var(--space-2xs);
    text-decoration: none;
    color: inherit;
}

.pick a:hover .pick__selection { color: var(--accent); }

.pick__teams {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
    font-size: var(--text-xs);
    font-weight: 600;
    min-width: 0;
}

/* Турнир над парой: без него «Победа хозяев» висит в воздухе — по
   названиям двух команд лига читается не всегда. */
.pick__comp {
    font-size: var(--text-2xs);
    color: var(--text-faint);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pick__vs { color: var(--text-faint); font-weight: 400; }

.pick__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-2xs);
    margin-block-start: 3px;
}

.pick__selection {
    font-size: var(--text-s);
    font-weight: 600;
}

.pick__odds {
    font-family: var(--font-mono);
    font-size: var(--text-s);
    font-weight: 700;
    color: var(--accent);
    font-variant-numeric: tabular-nums;
}

.pick__confidence {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-block-start: 4px;
}

.pick__bar {
    flex: 1;
    height: 3px;
    border-radius: 3px;
    background: var(--bg-inset);
    overflow: hidden;
}

.pick__bar span {
    display: block;
    height: 100%;
    background: var(--accent);
    border-radius: 3px;
}

.pick__value,
.pick__time {
    font-size: var(--text-2xs);
    color: var(--text-faint);
    font-variant-numeric: tabular-nums;
}

.pick__time { display: block; margin-block-start: 3px; }

/* ============================================== витрина вида спорта

   Новости, матчи дня, под ними прогнозы и разборы двумя колонками.
   Болельщик приходит за своим видом спорта целиком, а не за лентой
   всего подряд: ему нужно и что пишут, и кто с кем играет, и что было
   в прошлом туре.

   Блок обведён рамкой и отбит воздухом: без границы он сливается с
   лентой выше, и разделение теряет смысл. */

.sport {
    margin-block-start: var(--space-xl);
    padding: var(--space-m);
    border: 1px solid var(--border);
    border-radius: var(--radius-l);
    background: var(--bg-elevated);
}

.sport__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-s);
    flex-wrap: wrap;
    margin-block-end: var(--space-s);
    padding-block-end: var(--space-2xs);
    border-block-end: 2px solid var(--text);
}

.sport__title {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: 800;
    font-stretch: 110%;
    letter-spacing: -0.02em;
}

.sport__title a { color: inherit; text-decoration: none; }
.sport__title a:hover { color: var(--accent); }

.sport__nav {
    display: flex;
    gap: var(--space-s);
    font-size: var(--text-s);
}

.sport__nav a { color: var(--text-muted); text-decoration: none; }
.sport__nav a:hover { color: var(--accent); }

.sport__news { margin-block-end: var(--space-m); }

/* Подпись блока со ссылкой справа: читателю, которого зацепил список,
   дальше нужен весь раздел, и переход должен стоять там же, где он
   закончил читать заголовок. */
.sport__label {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-s);
    font-family: var(--font-display);
    font-size: var(--text-2xs);
    font-weight: 700;
    font-stretch: 112%;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-faint);
    margin-block-end: var(--space-2xs);
    padding-block-end: 4px;
    border-block-end: 1px solid var(--border);
}

.sport__label a {
    font-size: var(--text-2xs);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: none;
    color: var(--accent);
    text-decoration: none;
    white-space: nowrap;
}

.sport__label a:hover { text-decoration: underline; }

.sport__matches { margin-block-end: var(--space-m); }

.sport__split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-l);
}

@media (max-width: 760px) {
    .sport { padding: var(--space-s); }
    .sport__split { grid-template-columns: 1fr; gap: var(--space-m); }
}

/* Список разборов: команды, счёт, дата. Ссылка ведёт на страницу
   матча, где разбор и лежит целиком. */
.reviewlist { list-style: none; margin: 0; padding: 0; }

.reviewlist li {
    padding-block: 6px;
    border-block-end: 1px solid var(--border);
}

.reviewlist li:last-child { border-block-end: 0; }

.reviewlist a {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-2xs);
    text-decoration: none;
    color: inherit;
}

.reviewlist a:hover .reviewlist__teams { color: var(--accent); }

.reviewlist__teams {
    font-size: var(--text-s);
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.reviewlist__score {
    font-family: var(--font-mono);
    font-size: var(--text-s);
    font-weight: 700;
    color: var(--accent);
    font-variant-numeric: tabular-nums;
    flex: none;
}

.reviewlist__date {
    display: block;
    font-size: var(--text-2xs);
    color: var(--text-faint);
    margin-block-start: 2px;
}

/* Полоса уверенности заметнее: это число, ради которого читатель
   и смотрит на прогноз, и трёхпиксельная нитка его не передаёт. */
.pick__bar {
    height: 6px;
    background: var(--bg-inset);
    border: 1px solid var(--border);
}

.pick__bar span {
    background: linear-gradient(90deg, var(--accent), var(--accent-hover));
}

.pick__value {
    font-size: var(--text-xs);
    font-weight: 700;
    color: var(--text-muted);
    min-width: 3.2ch;
    text-align: end;
}


/* У вида спорта с одной-двумя новостями сетка из трёх колонок
   оставляет справа пустоту: карточки занимают доступную ширину, а не
   держат жёсткий строй. */
.sport__news {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--space-s);
}

/* Лента без боковой колонки идёт в четыре колонки: на всю ширину
   страницы две колонки дают карточки размером с афишу. */
.grid-cards--4 {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.latest { margin-block-end: var(--space-xl); }

.sport__split--bottom { margin-block-start: var(--space-m); }

/* Внутри витрины таблица занимает половину ширины: в узкой колонке
   она теряла столбцы, а на всю ширину растягивалась в простыню. */
.sport__col .table--standings { width: 100%; }

/* ================================================ переключатель таблиц

   Турниров бывает четыре и больше, и полосой вкладок они не помещаются
   в колонку: перенос съедает высоту, из-за которой блок перестаёт
   совпадать с соседним.

   Поэтому список раскрывается вниз, а открытый турнир стоит первым и
   служит подписью. Переключение по-прежнему на радиокнопках: без
   скрипта список остаётся рабочим, скрипт лишь добавляет ротацию. */

.tabs { position: relative; }

.tabs__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-s);
    margin-block-end: var(--space-2xs);
    padding-block-end: 4px;
    border-block-end: 1px solid var(--border);
}

/* Список раскрывается поверх содержимого.
   
   Полоса держит высоту одного пункта, а сами пункты лежат в слое,
   вынутом из потока: раскрытие накрывает таблицу, а не сдвигает её
   вниз. Сдвиг здесь особенно неприятен — блок стоит рядом с другим,
   и любое изменение высоты рассогласовывает их. */

.tabs__strip {
    position: relative;
    min-width: 0;
    flex: 1;
    /* Высота одного пункта: кегль, межстрочный, отступы и рамка. */
    height: 2.15rem;
}

/* Список шириной по самому длинному названию, а не во всю полосу:
   раскрытый, он занимал её целиком и накрывал ссылку «полная
   таблица». */
.tabs__menu {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    inline-size: max-content;
    min-inline-size: 0;
    max-inline-size: 240px;
    display: grid;
    gap: 1px;
    border-radius: var(--radius-s);
    padding: 2px;
    margin: -2px;
}

.tabs__input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.tabs__label {
    display: flex;
    align-items: center;
    padding: 4px 24px 4px 9px;
    border-radius: var(--radius-s);
    font-family: var(--font-display);
    font-size: var(--text-2xs);
    font-weight: 700;
    font-stretch: 112%;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-faint);
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    /* В закрытом виде неактивные пункты не занимают места вовсе. */
    display: none;
}

/* Активный виден всегда: он и есть подпись списка.
   
   В раскрытом виде он поднимается наверх: читатель открыл список,
   стоя на нём, и первым должен видеть то, где находится, — иначе
   приходится искать глазами, что сейчас выбрано. */
/* Выбранный пункт — поле выбора: рамка, свой фон и стрелка.

   Прежде он отличался от соседних заголовков только жирностью, и
   догадаться, что по нему открывается список видов спорта, было
   неоткуда — читатель принимал его за подпись блока. */
.tabs__input:checked + .tabs__label {
    display: flex;
    position: relative;
    order: -1;
    padding-inline: 10px 26px;
    border: 1px solid var(--border);
    border-radius: var(--radius-s);
    background: var(--bg-sunken);
    color: var(--text);
    font-weight: 800;
    transition: border-color 0.12s ease, background 0.12s ease;
}

.tabs__input:checked + .tabs__label:hover {
    border-color: var(--accent);
    background: var(--bg-elevated);
}

/* Стрелка сообщает, что список раскрывается. */
.tabs__input:checked + .tabs__label::after {
    content: "";
    position: absolute;
    right: 9px;
    top: 50%;
    width: 6px;
    height: 6px;
    border-right: 1.6px solid currentColor;
    border-bottom: 1.6px solid currentColor;
    transform: translateY(-70%) rotate(45deg);
    opacity: 0.75;
}

/* Раскрытие: слой поднимается над таблицей и получает фон, чтобы она
   не просвечивала сквозь пункты. */
.tabs__strip:hover .tabs__menu,
.tabs__strip:focus-within .tabs__menu {
    z-index: 30;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-l);
}

.tabs__strip:hover .tabs__label,
.tabs__strip:focus-within .tabs__label {
    display: flex;
}

.tabs__strip:hover .tabs__label:hover,
.tabs__strip:focus-within .tabs__input:focus-visible + .tabs__label {
    background: var(--accent);
    color: var(--accent-contrast);
}

/* У раскрытого списка стрелка не нужна: он и так открыт. */
.tabs__strip:hover .tabs__input:checked + .tabs__label::after,
.tabs__strip:focus-within .tabs__input:checked + .tabs__label::after {
    opacity: 0;
}

.tabs__all {
    flex: none;
    margin-inline-end: var(--space-2xs);
    font-size: var(--text-2xs);
    font-weight: 600;
    color: var(--accent);
    text-decoration: none;
    white-space: nowrap;
}

.tabs__all:hover { text-decoration: underline; }

.tabs__panels > .tabs__panel { display: none; }

/* Пар «кнопка — панель» столько, сколько бывает вкладок.
 *
 * Правил было четыре, а вкладок на главной восемь: «Все», футбол,
 * гандбол и хоккей открывались, а крикет, баскетбол, волейбол и регби
 * не показывали ничего — панель у них есть и матчи в ней есть, но её
 * никто не включал. Двенадцать пар с запасом: видов спорта девять, и
 * добавление нового не должно тихо ломать переключение. */
.tabs__head:has(.tabs__menu .tabs__input:nth-of-type(1):checked) + .tabs__panels > .tabs__panel:nth-child(1),
.tabs__head:has(.tabs__menu .tabs__input:nth-of-type(2):checked) + .tabs__panels > .tabs__panel:nth-child(2),
.tabs__head:has(.tabs__menu .tabs__input:nth-of-type(3):checked) + .tabs__panels > .tabs__panel:nth-child(3),
.tabs__head:has(.tabs__menu .tabs__input:nth-of-type(4):checked) + .tabs__panels > .tabs__panel:nth-child(4),
.tabs__head:has(.tabs__menu .tabs__input:nth-of-type(5):checked) + .tabs__panels > .tabs__panel:nth-child(5),
.tabs__head:has(.tabs__menu .tabs__input:nth-of-type(6):checked) + .tabs__panels > .tabs__panel:nth-child(6),
.tabs__head:has(.tabs__menu .tabs__input:nth-of-type(7):checked) + .tabs__panels > .tabs__panel:nth-child(7),
.tabs__head:has(.tabs__menu .tabs__input:nth-of-type(8):checked) + .tabs__panels > .tabs__panel:nth-child(8),
.tabs__head:has(.tabs__menu .tabs__input:nth-of-type(9):checked) + .tabs__panels > .tabs__panel:nth-child(9),
.tabs__head:has(.tabs__menu .tabs__input:nth-of-type(10):checked) + .tabs__panels > .tabs__panel:nth-child(10),
.tabs__head:has(.tabs__menu .tabs__input:nth-of-type(11):checked) + .tabs__panels > .tabs__panel:nth-child(11),
.tabs__head:has(.tabs__menu .tabs__input:nth-of-type(12):checked) + .tabs__panels > .tabs__panel:nth-child(12) {
    display: block;
}

/* ============================================== компактные матчи дня

   Время слева, команды столбиком, счёт справа. Полная строка события
   занимает вдвое больше места и уводит блок ниже соседней таблицы —
   а два блока рядом должны заканчиваться на одной линии. */

.fixtures { list-style: none; margin: 0; padding: 0; }

.fixture { border-block-end: 1px solid var(--border); }
.fixture:last-child { border-block-end: 0; }

.fixture a {
    display: grid;
    grid-template-columns: 3.4rem minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-2xs);
    padding-block: 5px;
    text-decoration: none;
    color: inherit;
}

.fixture a:hover .fixture__teams { color: var(--accent); }

.fixture__time {
    font-family: var(--font-mono);
    font-size: var(--text-2xs);
    color: var(--text-faint);
    font-variant-numeric: tabular-nums;
}

.fixture__live {
    color: var(--live);
    font-weight: 700;
    font-size: 9px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.fixture__teams {
    display: grid;
    gap: 1px;
    font-size: var(--text-xs);
    line-height: 1.35;
    min-width: 0;
}

.fixture__team {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    align-items: center;
    gap: var(--space-2xs);
    min-width: 0;
}

.fixture__name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fixture__emblem {
    inline-size: 18px;
    block-size: 18px;
    object-fit: contain;
}

/* Пустое место вместо недостающего герба.

   Без него названия клубов в одном списке стоят на разных отступах —
   у кого герб есть, у кого нет, — и столбец рассыпается. */
/* Подпись списка под таблицей: у неё сверху свой отступ, потому что
   над ней кончается таблица, а не начинается колонка. */
/* Подпись блока — заголовок второго уровня.

   Была элементом без смысла: на витрине вида спорта не оказалось ни
   одного заголовка второго уровня вовсе, и страница уходила в выдачу
   без внутренней структуры — при том, что блоков на ней восемь.
   Внешне ничего не меняется: размер и насыщенность те же. */
.sport__label-title {
    margin: 0;
    font: inherit;
    font-weight: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    color: inherit;
    display: flex;
    align-items: center;
    gap: var(--space-2xs);
}

.sport__label--under {
    margin-block-start: var(--space-m);
}

/* Победитель в списке сыгранного. Строка без выделения заставляет
   сверять два числа справа, чтобы понять, кто выиграл. */
.fixtures--done .fixture__team.is-won .fixture__name {
    font-weight: 600;
    color: var(--text-1);
}

.fixtures--done .fixture__team:not(.is-won) .fixture__name {
    color: var(--text-3);
}

.fixture__emblem--none {
    display: block;
    border-radius: 50%;
    background: var(--surface-3, rgba(128, 128, 128, 0.14));
}

/* Прочерки у не начавшегося матча приглушены: они держат колонку,
   но не спорят за внимание с настоящим счётом соседних строк. */
.fixture__score.is-empty { color: var(--text-faint); font-weight: 400; }

.fixture__score {
    display: grid;
    gap: 1px;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 700;
    line-height: 1.35;
    text-align: end;
    font-variant-numeric: tabular-nums;
    color: var(--accent);
}

/* Два блока рядом заканчиваются на одной линии. */
.sport__split { align-items: start; }

/* Команда, на которую сделан прогноз: читатель видит выбор сразу,
   не сверяя название со строкой ниже. */
.pick__teams .is-pick {
    color: var(--text);
    font-weight: 700;
    text-decoration: underline;
    text-decoration-color: var(--accent);
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}

/* Состояние матча в ленте разборов: рядом стоят итоги и ещё идущие
   игры, и читателю нужно видеть, что перед ним, до того как он
   откроет страницу. */
.reviewlist__meta {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-block-start: 2px;
}

.state {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 3px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
}

.state--finished {
    background: var(--bg-inset);
    color: var(--text-muted);
}

.state--live {
    background: var(--live-subtle);
    color: var(--live);
}

.state--scheduled {
    background: var(--data-subtle);
    color: var(--data);
}

/* ======================================== переключатель видов спорта

   Разделы матчей, таблиц и команд живут под видом спорта. Полоса
   переключает именно раздел: читатель, стоящий на таблицах футбола,
   при выборе хоккея ждёт таблицы хоккея, а не главную.

   Показывается, только когда видов больше одного: при единственном
   она отнимает место и ничего не сообщает. */

.sportsnav {
    background: var(--bg-elevated);
    border-block-end: 1px solid var(--border);
    overflow-x: auto;
    scrollbar-width: none;
}

.sportsnav::-webkit-scrollbar { display: none; }

.sportsnav__track {
    display: flex;
    gap: var(--space-s);
    align-items: center;
    min-height: 38px;
}

.sportsnav__item {
    font-size: var(--text-s);
    color: var(--text-muted);
    text-decoration: none;
    white-space: nowrap;
    padding-block: 4px;
    border-block-end: 2px solid transparent;
}

.sportsnav__item:hover { color: var(--text); }

.sportsnav__item.is-active {
    color: var(--text);
    font-weight: 600;
    border-block-end-color: var(--accent);
}

/* Разделитель в подписи карточки: вид спорта и рубрика — разные
   уровни, и между ними нужна пауза. */
.eyebrow__sep {
    color: var(--border-strong);
    margin-inline: 2px;
}

/* ================================== выравнивание карточек в ряду

   Строка сведений прижата к низу карточки. Без этого она встаёт сразу
   за текстом, а тексты разной длины — и подписи в ряду идут лесенкой,
   ломая горизонталь, по которой взгляд читает ряд.

   Карточка растягивается на высоту ячейки сетки, тело карточки —
   колонка, и строка сведений отодвинута автоматическим отступом. */
.grid-cards > .card,
.sport__news > .card {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.card__body {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.card__body .meta {
    margin-block-start: auto;
    padding-block-start: var(--space-2xs);
}

/* Заголовок и лид не растягиваются: место между ними и подписью
   отдаётся пустоте, а не строкам текста. */
.card__lead { flex: none; }


/* ================================================ меню с выпадающими списками

   Читатель приходит за своим видом спорта, а не за разделом вообще.
   Пункт ведёт в раздел целиком, список под ним — сразу в нужный вид.

   Список раскрывается по наведению и по фокусу с клавиатуры; на
   сенсорном экране первое касание открывает его, второе переходит
   по ссылке — это поведение браузера по умолчанию для :hover, и
   переопределять его скриптом не нужно. */

.nav { display: flex; gap: var(--space-s); }

/* Узкий экран: меню переезжает во вторую строку шапки и прокручивается
   вбок.

   Прежде оно оставалось в одной строке с логотипом и просто уходило за
   край: «Прогнозы» и переключатель языка были не видны и недостижимы —
   горизонтальной прокрутки у страницы нет. Выпадающие списки на
   телефоне тоже не работают: наведения там не существует, а первое
   касание должно вести в раздел, а не открывать список. */
@media (max-width: 767px) {
    .site-header__bar { flex-wrap: wrap; row-gap: 4px; }

    .nav {
        order: 3;
        inline-size: 100%;
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        padding-block-start: 4px;
        margin-inline-end: 0;
    }

    .nav::-webkit-scrollbar { display: none; }
    .nav__drop { display: none; }
}

.nav__item { position: relative; }

.nav__drop {
    position: absolute;
    inset-block-start: 100%;
    inset-inline-start: 50%;
    transform: translateX(-50%) translateY(4px);
    min-width: 180px;
    padding: 4px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-m);
    box-shadow: var(--shadow-l);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.12s ease, transform 0.12s ease;
    z-index: 60;
}

/* Мостик между пунктом и списком: без него указатель, проходя зазор,
   теряет наведение и список схлопывается на полпути. */
.nav__drop::before {
    content: "";
    position: absolute;
    inset-block-end: 100%;
    inset-inline: 0;
    height: 8px;
}

.nav__item:hover .nav__drop,
.nav__item:focus-within .nav__drop {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.nav__drop-item {
    display: block;
    padding: 5px 10px;
    border-radius: var(--radius-s);
    font-size: var(--text-s);
    color: var(--text);
    text-decoration: none;
    white-space: nowrap;
}

.nav__drop-item:hover { background: var(--hover-bg); color: var(--accent); }

.nav__drop-item.is-active {
    background: var(--accent);
    color: var(--accent-contrast);
}

/* «Все новости» отделены чертой: это не вид спорта, а весь раздел. */
.nav__drop-item--all {
    font-weight: 600;
    margin-block-end: 3px;
    padding-block-end: 6px;
    border-block-end: 1px solid var(--border);
    border-radius: 0;
}

.nav__link.is-active { color: var(--accent); }

@media (prefers-reduced-motion: reduce) {
    .nav__drop { transition: none; }
}


/* ------------------------------------------- форма и очные встречи */

/* До первого свистка страница матча состоит из даты и составов, которых
   ещё нет. Форма команд и история встреч — единственное, что можно
   сказать о матче по фактам, и потому они стоят выше новостей. */

.forms {
    display: grid;
    gap: var(--space-m);
    grid-template-columns: 1fr;
}

@media (min-width: 700px) {
    .forms { grid-template-columns: 1fr 1fr; }
}

.form-col__team {
    margin: 0 0 var(--space-2xs);
    font-size: var(--text-s);
    font-weight: 700;
}

.form-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 1px;
    background: var(--border);
    border: 1px solid var(--border);
    border-radius: var(--radius-s);
    overflow: hidden;
}

.form-row a {
    display: grid;
    grid-template-columns: 4px 1fr auto auto;
    align-items: center;
    gap: var(--space-2xs);
    padding: var(--space-2xs) var(--space-xs);
    background: var(--bg-elevated);
    text-decoration: none;
    color: inherit;
    font-size: var(--text-xs);
}

.form-row a:hover { background: var(--hover-bg); }

/* Полоска слева — результат матча. Цвет здесь несёт смысл, а не
   украшает: пять полосок читаются быстрее пяти слов. */
.form-row__mark {
    inline-size: 4px;
    block-size: 18px;
    border-radius: 2px;
    background: var(--text-faint);
}

.form-row--win .form-row__mark { background: var(--win); }
.form-row--loss .form-row__mark { background: var(--live); }
.form-row--draw .form-row__mark { background: var(--text-faint); }

.form-row__opp {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-muted);
}

.form-row__score { font-weight: 700; }

.form-row__date {
    color: var(--text-faint);
    font-size: var(--text-2xs);
    white-space: nowrap;
}

.h2h {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--space-2xs);
}

.h2h a {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: var(--space-xs);
    align-items: baseline;
    text-decoration: none;
    color: inherit;
    font-size: var(--text-s);
}

.h2h a:hover .h2h__teams { color: var(--accent); }

.h2h__date {
    color: var(--text-faint);
    font-size: var(--text-xs);
    white-space: nowrap;
}

.h2h__score { font-weight: 700; }

.h2h__comp {
    font-size: var(--text-2xs);
    color: var(--text-faint);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}


/* Подпись группы внутри турнирной таблицы.

   У кубков сборных таблица состоит из нескольких групп, и без подписи
   её строки читаются как сбитая нумерация: после четвёртого места идёт
   первое. Подпись — единственное, что отличает одно от другого. */
.table__group td {
    background: var(--bg-sunken);
    font-size: var(--text-2xs);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    padding-block: 6px;
}


/* Список матчей в одноколоночной раскладке не растягивается на всю
   ширину экрана: между названием команды и счётом появлялась ладонь
   пустоты, и строка переставала читаться как одна запись. */
.layout:not(.layout--with-aside) .fixture-list,
.layout:not(.layout--with-aside) .aside-block {
    max-inline-size: 760px;
}


/* ------------------------------------------------------------- поиск */

/* Поле в шапке узкое и незаметное: поиск нужен меньшинству читателей,
   но нужен им сразу. Полноразмерная строка на его месте отбирала бы
   внимание у меню, которым пользуются все. */
.searchbox { display: flex; gap: var(--space-2xs); }

.searchbox input {
    font: inherit;
    font-size: var(--text-s);
    padding: 5px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-s);
    background: var(--bg-elevated);
    color: var(--text);
    inline-size: 100%;
}

.searchbox input:focus {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}

.searchbox--head { inline-size: 180px; margin-inline-start: var(--space-s); }

@media (max-width: 900px) {
    .searchbox--head { display: none; }
}

.searchbox--page {
    max-inline-size: 620px;
    margin-block-end: var(--space-l);
}

.results { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-m); }

.result a { text-decoration: none; color: inherit; display: block; }
.result a:hover .result__title { color: var(--accent); }

.result__kind {
    display: inline-block;
    font-size: var(--text-2xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--accent);
    margin-inline-end: var(--space-2xs);
}

.result__title { font-weight: 700; font-size: var(--text-m); }

.result__lead {
    margin: var(--space-3xs) 0 0;
    color: var(--text-muted);
    font-size: var(--text-s);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.result__date { font-size: var(--text-xs); color: var(--text-faint); }


/* Строка матча в расписании не растягивается на всю ширину экрана.

   На широком мониторе между названием команды и счётом получалась
   ладонь пустоты, и строка переставала читаться как одна запись:
   глаз терял связь между командой и её голами. Ограничение стоит на
   самой строке, а не на карточке: карточка держит фон и границы во всю
   ширину, как остальные блоки страницы. */
.mini-list .scoreline {
    max-inline-size: 900px;
    margin-inline: auto;
}

/* Подпись под обложкой: автор, лицензия, ссылка на оригинал.
   Свободная лицензия требует её показать, но читателю она мешать не
   должна — отсюда мелкий кегль и приглушённый цвет. */
.credit {
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin-top: var(--space-3xs);
  line-height: 1.5;
}
.credit a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.credit a:hover { color: var(--accent); }

/* Теги материала. Ставятся под текстом: до чтения они отвлекают от
   заголовка, а после — ведут к остальному про того же игрока. */
.tags {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--space-2xs); margin: var(--space-l) 0 0;
}
.tags__label {
  font-size: var(--text-xs); color: var(--text-faint);
  text-transform: uppercase; letter-spacing: .05em; margin-right: var(--space-3xs);
}
.tag {
  display: inline-block; padding: 4px 10px; border-radius: var(--radius-s);
  border: 1px solid var(--border); background: var(--bg-elevated);
  font-size: var(--text-xs); color: var(--text-muted); text-decoration: none;
}
.tag:hover { border-color: var(--accent); color: var(--accent); }

/* Прямая речь. Выделяется полосой слева — читатель должен видеть, где
   кончаются наши слова и начинаются чужие. Для переводной цитаты под
   ней стоит пометка о языке оригинала: скрывать перевод нечестно. */
.prose blockquote.quote {
  margin: var(--space-m) 0;
  padding: 0 0 0 var(--space-s);
  border-left: 3px solid var(--accent);
  color: var(--text);
}
.prose blockquote.quote p { margin: 0; }
.prose blockquote.quote[data-translated="true"]::after {
  content: attr(data-note);
  display: block;
  margin-top: var(--space-3xs);
  font-size: var(--text-xs);
  color: var(--text-faint);
}

/* Подпись над переводной цитатой: мелкая, приглушённая — она нужна
   для честности, а не для внимания. */
.qnote {
  font-size: 8px;
  line-height: 1.4;
  letter-spacing: .02em;
  color: var(--text-faint);
  text-transform: uppercase;
  margin: var(--space-m) 0 calc(-1 * var(--space-2xs));
}
.qnote__btn {
  font: inherit;
  color: var(--text-muted);
  background: none;
  border: none;
  border-bottom: 1px dotted var(--border);
  padding: 0 0 1px;
  cursor: help;
}
.qnote__btn:hover, .qnote__btn:focus { color: var(--accent); border-bottom-color: var(--accent); }

/* Подсказка с подлинными словами. */
.qtip {
  position: absolute;
  z-index: 50;
  max-width: min(460px, calc(100vw - 24px));
  padding: var(--space-2xs) var(--space-xs);
  border-radius: var(--radius-s);
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  color: var(--text);
  font-size: var(--text-s);
  line-height: 1.55;
  box-shadow: 0 8px 24px rgb(0 0 0 / .12);
}

/* Описание команды, игрока, раздела. Ставится над лентой: читатель,
   пришедший из поиска, должен сразу понять, куда попал. */
/* Описание — в карточке, как соседние блоки.
 *
 * Оно шло голым текстом на белом поле страницы, а «Последние
 * результаты», «О команде» и «Форма» рядом стояли в карточках с
 * рамкой: описание читалось как подпись под шапкой, а не как раздел. */
.profile {
    margin-bottom: var(--space-l);
    padding: var(--space-m);
    border: 1px solid var(--border);
    border-radius: var(--radius-l);
    background: var(--bg-elevated);
}
/* Сжатый текст — мельче статейного.
 *
 * Он стоит в карточках справок: описание клуба, вида спорта, разбор
 * прогноза. Набранный кеглем статьи, он перебивал числа и списки, ради
 * которых карточка и открыта. */
.prose--compact {
    font-size: var(--text-s);
    line-height: 1.55;
}

.prose--compact p { margin: 0 0 var(--space-2xs); }
.prose--compact p:last-child { margin-bottom: 0; }
.prose--compact h2 { font-size: var(--text-m); }
.prose--compact h3 { font-size: var(--text-s); }

/* Разбор прогноза — мельче основного текста.
 *
 * Он идёт после карточки со ставкой, обоснования и ключевых факторов:
 * это пояснение к уже названным числам, а не главный текст страницы.
 * В размере статьи он забивал собой всё, ради чего читатель пришёл. */
.prcomment .prose {
    font-size: var(--text-s);
    max-width: none;
}

.prcomment .prose h2 {
    font-size: var(--text-m);
    margin-block: var(--space-s) var(--space-2xs);
}

.prcomment .prose p { margin-block-end: var(--space-2xs); }

/* Источники сведений — под спойлером: назвать их обязаны, выставлять
   напоказ незачем. */
.sources { margin-top: var(--space-s); }
.sources__toggle {
  display: inline-flex; align-items: center; gap: var(--space-3xs);
  font-size: var(--text-xs); color: var(--text-faint);
  cursor: pointer; list-style: none; user-select: none;
}
.sources__toggle::-webkit-details-marker { display: none; }
.sources__toggle::before { content: "›"; display: inline-block; transition: transform .15s; }
.sources[open] .sources__toggle::before { transform: rotate(90deg); }
.sources__toggle:hover { color: var(--text-muted); }
.sources__count {
  padding: 1px 6px; border-radius: 999px;
  background: var(--bg-sunken); color: var(--text-faint); font-size: 10px;
}
.sources__list {
  list-style: none; margin: var(--space-2xs) 0 0; padding: 0;
  display: flex; flex-direction: column; gap: 4px;
}
.sources__list li { font-size: var(--text-xs); line-height: 1.5; }
.sources__list a { color: var(--text-muted); text-decoration: none; }
.sources__list a:hover { color: var(--accent); text-decoration: underline; }
.sources__host { color: var(--text-faint); margin-left: var(--space-3xs); }

/* Описание раздела под лентой: отделено чертой, набрано мельче —
   это справка, а не содержание страницы. */
.section-note {
  margin-top: var(--space-xl);
  padding-top: var(--space-m);
  border-top: 1px solid var(--border);
  font-size: var(--text-s);
  color: var(--text-muted);
}
.section-note .prose p { margin-bottom: var(--space-2xs); }

/* ================================================================ команда

   Страница клуба собрана из блоков разного назначения, и каждый требует
   своей подачи. Числа — таблицами с колонками одной ширины: заголовок,
   съехавший относительно ячейки, читается как ошибка вёрстки, даже если
   данные верны. Матчи — карточками: за ними приходят чаще всего.
   Календарь — таблицей же, потому что дата, соперник и счёт должны
   стоять столбцами, а не набегать друг на друга.                      */

/* Шапка: герб, название, прозвище и полоска формы в одной строке. */
.team-head {
    margin-block-end: var(--space-l);
    padding-block-end: var(--space-m);
    border-block-end: 1px solid var(--border);
}
.team-head .entity-head {
    display: flex;
    align-items: center;
    gap: var(--space-m);
    flex-wrap: wrap;
}
.team-head__names { flex: 1; min-width: 200px; }
.team-head__nick {
    font-size: var(--text-s);
    color: var(--text-muted);
    margin-block-start: 2px;
}

/* Форма: пять-шесть букв подряд, цветом. Полоска читается взглядом —
   ради этого она и стоит в шапке, а не в таблице ниже. */
.form-strip { display: flex; gap: 4px; }
.form-mark {
    inline-size: 24px;
    block-size: 24px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-2xs);
    font-weight: 800;
    color: #fff;
    letter-spacing: 0;
}
.form-mark--win { background: var(--win); }
.form-mark--draw { background: var(--text-faint); }
.form-mark--loss { background: var(--loss); }

/* Пара карточек: слева прошлый матч, справа следующий. */
.match-pair {
    display: grid;
    gap: var(--space-m);
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    margin-block-end: var(--space-l);
}
.match-card {
    border: 1px solid var(--border);
    border-radius: var(--radius-l, 12px);
    padding: var(--space-m);
    background: var(--bg-elevated);
}
/* Ближайший матч выделен слева янтарной чертой — это единственное
   «сейчас» на всей странице, остальное уже случилось. */
.match-card--next { border-inline-start: 3px solid var(--accent); }
.match-card__label {
    font-size: var(--text-2xs);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-faint);
    font-weight: 700;
    margin-block-end: var(--space-2xs);
}
.match-card__body {
    display: flex;
    align-items: center;
    gap: var(--space-s);
}
.match-card__main { flex: 1; min-inline-size: 0; }
.match-card__rival {
    font-size: var(--text-m);
    font-weight: 600;
    overflow-wrap: anywhere;
}
.match-card__rival a { color: inherit; text-decoration: none; }
.match-card__rival a:hover { color: var(--accent); }
.match-card__meta {
    font-size: var(--text-xs);
    color: var(--text-muted);
    margin-block-start: 3px;
    display: flex;
    align-items: center;
    gap: var(--space-3xs);
    flex-wrap: wrap;
}
.match-card__score {
    font-size: var(--text-2xl);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}
.match-card__score--win { color: var(--win); }
.match-card__score--loss { color: var(--loss); }
.match-card__kickoff {
    font-size: var(--text-xl);
    font-weight: 700;
    color: var(--accent);
    line-height: 1;
}

/* Дома или в гостях — одна буква в рамке. Слово занимает полстроки,
   а различать нужно в каждой строке календаря. */
.side-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-inline-size: 16px;
    block-size: 16px;
    padding: 0 3px;
    border-radius: 4px;
    background: var(--bg-sunken);
    color: var(--text-faint);
    font-size: 10px;
    font-weight: 700;
}

/* Цифры: две полоски и таблица «дома — в гостях». Полоски отвечают на
   вопрос «как идут дела» быстрее, чем шесть чисел в сетке. */
.numbers {
    display: flex;
    flex-direction: column;
    gap: var(--space-m);
    margin-block-end: var(--space-m);
}
.numbers__row { display: flex; flex-direction: column; gap: var(--space-2xs); }
.bar {
    display: flex;
    block-size: 10px;
    border-radius: 999px;
    overflow: hidden;
    background: var(--bg-sunken);
}
.bar__part { display: block; block-size: 100%; }
.bar__part--win { background: var(--win); }
.bar__part--draw { background: var(--text-faint); }
.bar__part--loss { background: var(--loss); }
.bar__part--attack { background: var(--data); }
.bar--goals { background: var(--loss); }
.bar-legend {
    display: flex;
    gap: var(--space-m);
    flex-wrap: wrap;
    font-size: var(--text-xs);
    color: var(--text-muted);
}
.bar-legend b { color: var(--text); font-size: var(--text-s); }

/* Таблицы с колонками одной ширины. */
.table--fixed { inline-size: 100%; table-layout: auto; border-collapse: collapse; }
.table--fixed th, .table--fixed td { padding: var(--space-2xs) var(--space-xs); }
.table--fixed tbody tr:hover td { background: var(--hover-bg); }
.col-num { text-align: end; font-variant-numeric: tabular-nums; white-space: nowrap; }
th.col-num { text-align: end; }
.col-pos { inline-size: 30%; }
.col-years { inline-size: 45%; font-size: var(--text-xs); }
.table--squad td { vertical-align: middle; }
.section-head__note {
    font-size: var(--text-xs);
    color: var(--text-faint);
}

/* Календарь в боковой колонке: дата столбиком, соперник, счёт. */
.table--fixture { inline-size: 100%; border-collapse: collapse; font-size: var(--text-s); }
.table--fixture td {
    padding: var(--space-2xs) 0;
    border-block-end: 1px solid var(--border);
    vertical-align: middle;
}
.table--fixture tr:last-child td { border-block-end: none; }
.fx-date {
    inline-size: 34px;
    text-align: center;
    line-height: 1.05;
}
.fx-day { display: block; font-size: var(--text-m); font-weight: 700; }
.fx-month {
    display: block;
    font-size: 10px;
    text-transform: uppercase;
    color: var(--text-faint);
    letter-spacing: 0.03em;
}
/* Соперник: герб с меткой поля слева, название рядом. Метка стояла
   после названия и при переносе длинного имени на две строки съезжала
   вниз, повисая под словом. */
/* Ячейка остаётся ячейкой: display:flex на <td> выключает табличную
   раскладку, и высота этой ячейки перестаёт согласовываться с
   соседними — нижняя граница у соперника съезжала относительно
   границы у даты и счёта. Флексом становится обёртка внутри. */
.fx-rival { padding-inline-start: var(--space-2xs) !important; }
.fx-inner {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3xs);
}
.fx-mark {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    flex: none;
    padding-block-start: 1px;
}
.fx-name { min-inline-size: 0; overflow-wrap: anywhere; line-height: 1.3; }
.fx-rival a { color: inherit; text-decoration: none; }
.fx-rival a:hover { color: var(--accent); }
.emblem--xs { inline-size: 20px; block-size: 20px; flex: none; }
.fx-time { inline-size: 44px; text-align: end; color: var(--text-muted); }
.fx-score {
    inline-size: 44px;
    text-align: end;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.fx-score--win { color: var(--win); }
.fx-score--loss { color: var(--loss); }

/* Пустой блок говорит словами, а не пустотой. */
.empty-note {
    padding: var(--space-l);
    border: 1px dashed var(--border);
    border-radius: var(--radius-l, 12px);
    font-size: var(--text-s);
    text-align: center;
}

/* Боковая колонка клуба и игрока липнет к верху.

   Страница клуба вчетверо выше колонки: состав из двадцати шести
   игроков, статистика, трофеи. Читатель, дошедший до состава, терял из
   виду календарь и результаты — то, ради чего чаще всего и заходил.

   Прокрутка внутри колонки была снята — своя полоса читается поломкой и
   перехватывает колесо мыши. Но у игрока колонка выше окна (карточка,
   клуб, одноклубники, турниры — тысяча шестьсот точек при девятистах), и
   без прокрутки её низ недостижим вовсе: липкий блок уезжает под нижний
   край и ложится поверх подвала, а прокрутка страницы его не догоняет,
   потому что колонка едет вместе с ней.

   Из двух зол прокрутка меньшее, и overscroll-behavior её смягчает:
   докрутив список до конца, читатель остаётся в нём, а не улетает вниз
   страницы. */
@media (min-width: 1024px) and (min-height: 780px) {
    .layout--team > aside,
    .layout--team > .aside {
        position: sticky;
        top: var(--space-s);
        align-self: start;
    }
}

/* Вид спорта над названием клуба: страница обязана отвечать на первый
   вопрос читателя — футбол это, крикет или баскетбол. В адресе ответ
   есть, но адрес не читают. */
.team-head__sport {
    font-size: var(--text-2xs);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    font-weight: 700;
    margin-block-end: 2px;
}
.team-head__sport a { color: var(--accent); text-decoration: none; }
.team-head__sport a:hover { text-decoration: underline; }

/* Полоска формы с подписью: ряд букв без объяснения — узор. */
.form-block { display: flex; flex-direction: column; gap: 4px; }
.form-block__label {
    font-size: var(--text-2xs);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-faint);
    font-weight: 700;
}
.form-mark { cursor: help; }

/* Строка-итог в таблице статистики выделена: остальные строки — её
   подробности. */
.table--stats .row-accent td { font-weight: 700; background: var(--bg-sunken); }

/* Кнопки фильтра над таблицей. */
.filter-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3xs);
    margin-block-end: var(--space-s);
}
/* Кнопки фильтра берут готовый компонент .chip; здесь только
   поведение выбранной кнопки, которого у него нет. */
.filter-row .chip { cursor: pointer; font-family: inherit; background: transparent; }
.filter-row .chip--on {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--accent-contrast, #fff);
    font-weight: 600;
}

/* Графики в рамках: полоска говорит об итоге сезона, столбики — о
   том, как он шёл. Стоя подряд без разделения, они читались как один
   сбитый блок. */
.charts {
    display: grid;
    gap: var(--space-m);
    margin-block-end: var(--space-m);
}
.chart-box {
    margin: 0;
    padding: var(--space-m);
    border: 1px solid var(--border);
    border-radius: var(--radius-l, 12px);
    background: var(--bg-elevated);
}
.chart-box__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-s);
    margin-block-end: var(--space-s);
    flex-wrap: wrap;
}
.chart-box__title {
    font-size: var(--text-2xs);
    font-weight: 700;
    color: var(--text-faint);
}
.chart-box__note { font-size: var(--text-xs); color: var(--text-faint); }

/* Полоска исходов: число стоит внутри своего сегмента, а не в общей
   строке под ней — иначе непонятно, какой кусок чей. */
.bar {
    display: flex;
    block-size: 10px;
    border-radius: 999px;
    overflow: hidden;
    background: var(--bg-sunken);
}
.bar--tall { block-size: 24px; }
.bar__part { display: block; block-size: 100%; }
/* Последний сегмент забирает остаток: доли считаются целыми
   процентами и до сотни не добирают, отчего правый край полоски
   оставался квадратным. */
.bar__part--last { flex: 1; }
.bar--tall .bar__part {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: var(--text-2xs);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    overflow: hidden;
}
.bar__part--win { background: var(--win); }
.bar__part--draw { background: var(--text-faint); }
.bar__part--loss { background: var(--loss); }

/* Сноски под графиком. */
.chart-legend {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-m);
    margin-block-start: var(--space-s);
    font-size: var(--text-xs);
    color: var(--text-muted);
}
.legend { display: inline-flex; align-items: center; gap: 6px; }
.legend::before {
    content: "";
    inline-size: 10px;
    block-size: 10px;
    border-radius: 3px;
    display: inline-block;
    flex: none;
}
.legend--win::before { background: var(--win); }
.legend--draw::before { background: var(--text-faint); }
.legend--loss::before { background: var(--loss); }
.legend--scored::before { background: var(--win); }
.legend--conceded::before { background: var(--loss); }

/* Столбики по матчам: забитые вверх от оси, пропущенные вниз.
   Средняя цифра «забивает 1.6 за матч» одинакова у ровной команды и у
   той, что чередует разгромы с сухими поражениями. */
.chart {
    display: flex;
    align-items: stretch;
    gap: 5px;
    block-size: 104px;
}
.chart__col {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-inline-size: 0;
    cursor: help;
}
.chart__up, .chart__down { flex: 1; display: flex; align-items: flex-end; }
.chart__down { align-items: flex-start; }
.chart__axis { block-size: 1px; background: var(--border-strong); }
.chart__bar { inline-size: 100%; border-radius: 4px 4px 0 0; min-block-size: 2px; }
.chart__bar--scored { background: var(--win); }
.chart__bar--conceded { background: var(--loss); border-radius: 0 0 4px 4px; }
/* Ничья и поражение приглушают столбик забитых: три мяча в победе и
   три в поражении — разные три мяча. */
.chart__col--draw .chart__bar--scored { background: color-mix(in srgb, var(--win) 55%, var(--text-faint)); }
.chart__col--loss .chart__bar--scored { background: color-mix(in srgb, var(--win) 35%, var(--text-faint)); }
.chart__col:hover .chart__bar { filter: brightness(1.15); }

/* Описание клуба набрано мельче основного текста: это справка под
   заголовком, а не статья.
   
   Предел ширины при этом снимается. Семьсот двадцать пикселей заданы
   для крупного шрифта статьи — там длинная строка утомляет глаз. Здесь
   шрифт мельче, в ту же ширину влезает в полтора раза больше знаков, и
   ограничение оставляло справа пустую полосу в четверть колонки. */
.layout--team .profile .prose {
    font-size: var(--text-s);
    max-width: none;
}
.layout--team .profile .prose p { margin-block-end: var(--space-s); }

/* Блоки страницы клуба — панели.
 *
 * Раньше секции шли встык, разделённые только воздухом, и страница
 * читалась как один длинный список. Панель отделяет один разговор от
 * другого: состав, цифры, трофеи — разные темы, а не продолжение. */
.layout--team .panel {
    border: 1px solid var(--border);
    border-radius: var(--radius-l, 12px);
    padding: var(--space-m);
    background: var(--bg-elevated);
}
.layout--team .panel .section-head {
    margin-block-end: var(--space-s);
    padding-block-end: var(--space-2xs);
    border-block-end: 1px solid var(--border);
}
/* Внутри панели у таблицы своя рамка не нужна: получалась бы рамка в
   рамке, а последняя строка липла к краю. */
.layout--team .panel .table--fixed { margin-block-end: calc(var(--space-2xs) * -1); }
.layout--team .panel .table--fixed tbody tr:last-child td { border-block-end: none; }
/* Графики внутри панели «Цифры» уже в рамках — вложенную снимаем. */
.layout--team .panel .chart-box {
    border-color: var(--border);
    background: var(--bg-sunken);
}

/* Боковая колонка теми же панелями, чтобы страница не распадалась
   надвое по стилю. */
/* Боковой блок — карточка, на какой бы странице ни стоял.
 *
 * Правило было заведено только для страниц клуба и игрока, и на
 * остальных те же блоки шли без рамки: на главной «LIVE сейчас» и
 * «Главные турниры» висели голым списком рядом с карточками матчей и
 * прогнозов, а на странице турнира — рядом с таблицей. */
aside .aside-block,
.home-top__side .aside-block {
    border: 1px solid var(--border);
    border-radius: var(--radius-l, 12px);
    padding: var(--space-m);
    background: var(--bg-elevated);
}
aside .aside-block + .aside-block { margin-block-start: var(--space-m); }

/* Правая колонка главной — сетка со своим промежутком; внешний отступ
   складывался с ним, и разрыв между «LIVE сейчас» и блоком ниже
   выходил вдвое больше остальных. */
.home-top__side .aside-block + .aside-block { margin-block-start: 0; }
.layout--team aside .section-head {
    margin-block-end: var(--space-2xs);
    padding-block-end: var(--space-2xs);
    border-block-end: 1px solid var(--border);
}

/* Карточка матча кликабельна целиком. */
.match-card__body {
    display: flex;
    align-items: center;
    gap: var(--space-s);
    text-decoration: none;
    color: inherit;
    border-radius: var(--radius-s);
    margin-inline: calc(var(--space-2xs) * -1);
    padding: var(--space-2xs);
    transition: background .15s;
}

.match-card__main { flex: 1; min-inline-size: 0; display: block; }
.match-card__rival { display: block; font-size: var(--text-m); font-weight: 600; }
.match-card__meta {
    display: flex;
    align-items: center;
    gap: var(--space-3xs);
    flex-wrap: wrap;
    font-size: var(--text-xs);
    color: var(--text-muted);
    margin-block-start: 3px;
}
/* Кнопки под карточкой: страница соперника, разбор, прогноз. */
.match-card__links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3xs);
    margin-block-start: var(--space-s);
}
.match-card__links:empty { display: none; }
/* Сбывшийся и не сбывшийся прогноз видно по кнопке: иначе читателю
   пришлось бы открывать её, чтобы узнать итог. */
.chip--won { border-color: var(--win); color: var(--win); }
.chip--lost { border-color: var(--loss); color: var(--loss); }

/* Свой тултип вместо браузерного: тот появляется через секунду, гасит
   курсор и не поддаётся оформлению. Общий для формы, полосок и
   столбиков — везде, где цифра спрятана за цветом. */
.form-mark, .has-tip { position: relative; outline: none; }
.form-mark .tip, .has-tip .tip {
    position: absolute;
    inset-block-end: calc(100% + 8px);
    inset-inline-start: 50%;
    transform: translateX(-50%) translateY(4px);
    padding: 6px 9px;
    border-radius: var(--radius-s);
    background: var(--tooltip-bg);
    color: var(--tooltip-fg);
    box-shadow: 0 6px 20px rgb(0 0 0 / 0.28);
    font-size: 11px;
    font-weight: 500;
    line-height: 1.4;
    white-space: nowrap;
    /* Та же причина, что и у подсказки полосы матча: спрятанный
       видимостью элемент занимает раскладку и растягивает страницу
       вбок. У крайней буквы формы подсказка вылезала за край. */
    display: none;
    pointer-events: none;
    z-index: 20;
}
.form-mark .tip::after, .has-tip .tip::after {
    content: "";
    position: absolute;
    inset-block-start: 100%;
    inset-inline-start: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-block-start-color: var(--tooltip-bg);
}
.form-mark:hover .tip,
.form-mark:focus-visible .tip,
.has-tip:hover .tip,
.has-tip:focus-visible .tip {
    display: block;
}

/* Столбик узкий, подсказка широкая: у крайних столбцов её прижимает к
   своему краю графика, иначе она уезжает за рамку панели. */
.chart__col:first-child .tip { inset-inline-start: 0; transform: translateY(4px); }
.chart__col:first-child:hover .tip,
.chart__col:first-child:focus-visible .tip { transform: translateY(0); }
.chart__col:last-child .tip {
    inset-inline-start: auto;
    inset-inline-end: 0;
    transform: translateY(4px);
}
.chart__col:last-child:hover .tip,
.chart__col:last-child:focus-visible .tip { transform: translateY(0); }
.chart__col:first-child .tip::after { inset-inline-start: 14px; transform: none; }
.chart__col:last-child .tip::after {
    inset-inline-start: auto;
    inset-inline-end: 14px;
    transform: none;
}

/* Подсказка столбика стоит над всей колонкой, а не над самим
   прямоугольником: наводить курсор точно на трёхпиксельную полоску
   пропущенного мяча — работа, которой от читателя ждать нельзя. */
.tip--chart { inset-block-end: calc(100% + 4px); }
.bar__part.has-tip { cursor: help; }

/* Трофеи: карточки со значком.
 *
 * Таблица под три коротких значения — какой турнир, сколько раз,
 * когда — оставляла половину строки пустой. Карточка ставит число
 * крупно справа, годы уводит в подпись под названием. */
.honours { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2xs); }
.honour {
    display: flex;
    align-items: center;
    gap: var(--space-s);
    padding: var(--space-2xs) var(--space-xs);
    border-radius: var(--radius-s);
    background: var(--bg-sunken);
}
.honour__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 34px;
    block-size: 34px;
    border-radius: 50%;
    flex: none;
    background: var(--bg-elevated);
    color: var(--text-faint);
}
/* Чемпионство — золотом, прочие места приглушены: иначе финал
   выглядит так же весомо, как титул. */
.honour--cup .honour__icon { color: var(--gold); background: var(--gold-subtle); }
.honour__body { flex: 1; min-inline-size: 0; }
.honour__title { display: block; font-weight: 600; font-size: var(--text-s); }
.honour__years {
    display: block;
    font-size: var(--text-xs);
    color: var(--text-faint);
    font-variant-numeric: tabular-nums;
    margin-block-start: 2px;
}
.honour__count {
    font-size: var(--text-xl);
    font-weight: 800;
    color: var(--text-muted);
    flex: none;
}
.honour--cup .honour__count { color: var(--gold); }

/* Личные встречи: герб, полоска исходов, запись, мячи. */
.h2h { list-style: none; margin: 0; padding: 0; }
.h2h__row {
    display: grid;
    grid-template-columns: minmax(120px, 1.4fr) minmax(80px, 1fr) auto auto;
    align-items: center;
    gap: var(--space-s);
    padding-block: var(--space-2xs);
    border-block-end: 1px solid var(--border);
}
.h2h__row:last-child { border-block-end: none; }
.h2h__team { display: flex; align-items: center; gap: var(--space-3xs); min-inline-size: 0; }
.h2h__name { overflow-wrap: anywhere; font-size: var(--text-s); }
.h2h__name a { color: inherit; text-decoration: none; }
.h2h__name a:hover { color: var(--accent); }
.h2h__bar { block-size: 8px; }
.h2h__record { font-size: var(--text-s); font-weight: 700; white-space: nowrap; }
/* Перевес виден цветом: с кем клуб выигрывает, а с кем нет. */
.h2h__record--plus { color: var(--win); }
.h2h__record--minus { color: var(--loss); }
.h2h__record--even { color: var(--text-muted); }
.h2h__goals { font-size: var(--text-xs); color: var(--text-faint); white-space: nowrap; }

@media (max-width: 560px) {
    .h2h__row { grid-template-columns: 1fr auto; }
    .h2h__bar, .h2h__goals { display: none; }
}

/* Дома или в гостях — словом и цветом.
 *
 * Буква «Д» в рамке годится для узкой колонки календаря, но в карточке
 * матча места хватает, а различие важное: где играют, читатель ищет
 * первым делом после соперника. */
.venue-tag {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: var(--text-2xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.venue-tag--home {
    background: color-mix(in srgb, var(--win) 14%, transparent);
    color: var(--win);
}
.venue-tag--away {
    background: color-mix(in srgb, var(--data) 12%, transparent);
    color: var(--data);
}

/* Карточка больше не ссылка целиком, и название соперника — не ссылка
   тоже. Подсветка при наведении обещала переход, которого нет:
   читатель ведёт курсор, ждёт руки вместо стрелки и не получает её.
   Отзывается вся карточка целиком, но только фоном. */
.match-card { transition: background .15s, border-color .15s; }
.match-card:hover {
    background: var(--hover-bg);
    border-color: var(--border-strong);
}
.match-card--next:hover { border-inline-start-color: var(--accent); }
.match-card__body { cursor: default; }

/* Фотографии арены.
 *
 * Снимки чужие, и под каждым стоит автор с лицензией — это не подпись
 * для красоты, а условие, на котором нам разрешено их показывать. */
.venue-photos {
    display: grid;
    gap: var(--space-s);
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    margin-block-end: var(--space-l);
}
.venue-photo { margin: 0; }
.venue-photo img {
    inline-size: 100%;
    block-size: 220px;
    object-fit: cover;
    border-radius: var(--radius-l, 12px);
    display: block;
}
.venue-photo figcaption {
    margin-block-start: var(--space-3xs);
    font-size: var(--text-xs);
    color: var(--text-muted);
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.venue-photo__credit { color: var(--text-faint); font-size: 11px; }
.venue-photo__credit a { color: inherit; }

/* Флаг в составе.
   Картинкой, а не знаком из шрифта: знак система рисует по-своему, и
   у части читателей вместо флага выходят две буквы в рамке. */
.col-flag { inline-size: 30px; text-align: center; }
.flag {
    inline-size: 20px;
    block-size: 15px;
    border-radius: 2px;
    object-fit: cover;
    vertical-align: middle;
    box-shadow: 0 0 0 1px rgb(0 0 0 / 0.08);
}

/* ------------------------------------------------------------- игрок */

.flag--title { vertical-align: baseline; margin-inline-end: 6px; }
.flag--xs { inline-size: 16px; block-size: 12px; margin-inline-end: 5px; }
.portrait--lg { inline-size: 96px; block-size: 96px; border-radius: 50%; object-fit: cover; }

/* Снимок игрока: под ним автор и лицензия — условие показа. */
.player-photo { margin: 0; }
.player-photo img {
    inline-size: 100%;
    /* Место под снимок отводится заранее.

       Размеры файла есть в базе не у всякого портрета — старые
       записи заведены без них, — и пока файл грузится, браузеру не за
       что зацепиться: блок сведений под фотографией прыгал вниз при её
       появлении. Соотношение сторон держит место в любом случае. */
    aspect-ratio: 4 / 5;
    max-block-size: 420px;
    object-fit: cover;
    object-position: top center;
    border-radius: var(--radius-l, 12px);
    display: block;
}
.player-photo figcaption {
    margin-block-start: var(--space-3xs);
    font-size: 11px;
    color: var(--text-faint);
}
.player-photo figcaption a { color: inherit; }

/* Клуб в боковой колонке: отсюда читатель уходит на страницу клуба. */
.club-card {
    display: flex;
    align-items: center;
    gap: var(--space-s);
    text-decoration: none;
    color: inherit;
    padding: var(--space-2xs);
    margin-inline: calc(var(--space-2xs) * -1);
    border-radius: var(--radius-s);
}
.club-card:hover { background: var(--hover-bg); }
.club-card__body { display: flex; flex-direction: column; min-inline-size: 0; }
.club-card__name { font-weight: 600; }
.club-card__meta { font-size: var(--text-xs); color: var(--text-muted); }
.club-next {
    display: flex;
    align-items: baseline;
    gap: var(--space-3xs);
    flex-wrap: wrap;
    margin-block-start: var(--space-2xs);
    padding-block-start: var(--space-2xs);
    border-block-start: 1px solid var(--border);
    font-size: var(--text-s);
}
.club-next__label {
    font-size: var(--text-2xs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-faint);
    font-weight: 700;
}
.club-next__rival { flex: 1; min-inline-size: 0; }
.club-next__date { color: var(--text-muted); }

/* Одноклубники: главный путь читателя от игрока к игроку. */
.mates { list-style: none; margin: 0; padding: 0; }
.mate + .mate { border-block-start: 1px solid var(--border); }
.mate a {
    display: flex;
    align-items: center;
    gap: var(--space-2xs);
    padding-block: var(--space-2xs);
    text-decoration: none;
    color: inherit;
}
.mate a:hover .mate__name { color: var(--accent); }
.mate__body { display: flex; flex-direction: column; min-inline-size: 0; }
.mate__name { font-size: var(--text-s); font-weight: 500; overflow-wrap: anywhere; }
.mate__meta { font-size: var(--text-xs); color: var(--text-faint); }
.stat-grid--tight { grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: var(--space-2xs); }
.stat-grid--tight .stat { padding: var(--space-2xs); }

/* ============================================ витрина вида спорта

   Страница-оглавление раздела: /ru/football/ и подобные. Своих
   компонентов у неё почти нет — списки матчей, таблицы, карточки и
   фишки те же, что на главной. Здесь только раскладка: заголовок с
   перечнем разделов и двухколоночные пары блоков. */

.hub__head {
    margin-block-end: var(--space-l);
    padding-block-end: var(--space-m);
    border-block-end: 1px solid var(--border);
}

.hub__title {
    font-size: var(--text-2xl);
    line-height: 1.15;
    margin: 0 0 var(--space-2xs);
}

.hub__intro {
    max-width: 62ch;
    margin: 0;
    color: var(--text-muted);
}

/* Перечень разделов — первое, что видит пришедший в раздел: это
   оглавление, и оно должно читаться раньше любого списка матчей.
   Число рядом с названием отвечает на вопрос «а есть ли там
   что-нибудь» до перехода. */
.hub__sections {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2xs);
    margin-block-start: var(--space-m);
}

.hub__section {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 13px;
    border: 1px solid var(--border);
    border-radius: var(--radius-m);
    background: var(--bg-elevated);
    color: inherit;
    text-decoration: none;
    transition: border-color 0.12s ease, color 0.12s ease;
}

.hub__section:hover,
.hub__section:focus-visible {
    border-color: var(--accent);
    color: var(--accent);
}

.hub__section-title { font-weight: 600; }

.hub__section-note {
    font-size: var(--text-xs);
    font-variant-numeric: tabular-nums;
    opacity: 0.6;
}

.hub__block { margin-block-end: var(--space-xl); }

/* Пары блоков рядом: сегодняшние матчи и ближайшие, результаты и
   прогнозы. На узком экране колонки складываются в одну — две
   колонки по полтораста пикселей не читаются. */
.hub__split { display: grid; gap: var(--space-l); }

@media (min-width: 900px) {
    .hub__split { grid-template-columns: 1fr 1fr; }
}

.hub__teams {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: var(--space-2xs);
    list-style: none;
    margin: 0;
    padding: 0;
}

.hub__team {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 11px;
    border: 1px solid var(--border);
    border-radius: var(--radius-m);
    background: var(--bg-elevated);
    color: inherit;
    text-decoration: none;
    min-width: 0;
    transition: border-color 0.12s ease;
}

.hub__team:hover { border-color: var(--accent); }

.hub__team span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chip__note {
    margin-inline-start: 6px;
    font-size: var(--text-xs);
    font-variant-numeric: tabular-nums;
    opacity: 0.55;
}

/* Шапка страницы турнира: герб слева, название и приписки справа. */
.comp__head {
    display: flex;
    align-items: center;
    gap: var(--space-s);
}

.comp__logo {
    flex: none;
    inline-size: 56px;
    block-size: 56px;
    object-fit: contain;
}

.comp__facts {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2xs) var(--space-s);
    margin: var(--space-3xs) 0 0;
    color: var(--text-muted);
    font-size: var(--text-s);
}

/* Приписки разделены точками, но точка ставится стилями: в разметке
   она была бы содержимым, которое читалка произнесёт вслух. */
.comp__facts span + span::before {
    content: "·";
    margin-inline-end: var(--space-s);
    opacity: 0.5;
}

/* Перечень видов спорта на главной: тот же компонент, что в шапке
   витрины, но с отступом снизу — под ним сразу идут витрины. */
.hub__sections--home {
    /* Семь видов — двумя строками по четыре и по три.
     *
     * Прежде карточки тянулись по содержимому: «Футбол 305 матчей · 10
     * LIVE» вдвое шире «Гандбол 17 матчей», и полоса ломалась как
     * придётся — три в первой строке, четыре во второй, вразнобой по
     * ширине. Сетка с четырьмя колонками ставит их ровно, а ширина у
     * всех одна. */
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-block: var(--space-m) var(--space-l);
    gap: var(--space-xs);
}

@media (max-width: 720px) {
    .hub__sections--home { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Полоса видов спорта на главной: значок, название и что сегодня.

   Прежде это были чипы «Футбол 11 027» — размер архива, а не сводка
   дня. Теперь у каждого вида две строки: сколько матчей сегодня и
   сколько идёт прямо сейчас, — и по полосе видно, куда идти. */
.hub__sections--home .hub__section {
    align-items: center;
    gap: var(--space-2xs);
    padding: 9px 12px;
    min-inline-size: 0;
}

/* Название вида и сводка не должны рвать карточку: у длинных
   («Баскетбол 29 матчей · 6 LIVE») строка обрезается многоточием. */
.hub__sections--home .hub__section-text { min-inline-size: 0; }
.hub__sections--home .hub__section-title,
.hub__sections--home .hub__section-note {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Значки видов спорта нарисованы обводкой: заливка превращала мяч в
   чёрный кружок, а линии внутри пропадали. */
.hub__section-icon {
    inline-size: 20px;
    block-size: 20px;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0.75;
}

.hub__section-text {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}

.hub__section-live {
    color: var(--live);
    font-weight: 700;
    opacity: 1;
}

/* ================================================= шапка матча

   Матч — то, ради чего открывают эту страницу, и он должен читаться с
   порога. Прежде здесь стояла белая карточка: мелкие гербы, счёт
   обычным кеглем, всё в одну строку — страница начиналась так же, как
   любая другая.

   Фон — снимок арены того вида спорта, поверх него тёмная поволока:
   без неё белый текст на светлом паркете не читается, а с ней снимок
   остаётся узнаваемым и не спорит с содержимым. */

.mhero {
    position: relative;
    /* Тень под буквами держит читаемость на светлом паркете. Две:
       ближняя даёт контур, дальняя — ореол, и вместе они работают и на
       белой разметке поля, и на прожекторе. */
    --mhero-ink: 0 1px 2px rgba(0, 0, 0, 0.9), 0 2px 12px rgba(0, 0, 0, 0.7);
    isolation: isolate;
    overflow: hidden;
    border-radius: var(--radius-l);
    margin-block-end: var(--space-l);
    background: linear-gradient(160deg, #16213A, #0A0F1C);
    color: #F2F6FF;
}

/* Снимок ставится фоном отдельного слоя, а не самому блоку: так поверх
   него ложится поволока, и её плотность настраивается независимо от
   картинки. */
.mhero[data-sport]::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    /* Кадр сдвинут вниз, а не по центру.
       
       На всех снимках вверху тёмный потолок с прожекторами, внизу
       освещённая площадка. Шапка низкая и широкая, и «cover» по центру
       вырезал ровно тёмную полосу: волейбольный зал выходил почти
       чёрным прямоугольником. Семьдесят пять процентов — там, где
       начинается паркет и лёд. */
    background: var(--mhero-image) center 75% / cover no-repeat;
}

.mhero[data-sport]::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    /* Снимок не затемняется.
       
       Прежде поверх него лежала плотная поволока: текст читался, но
       арену было не разглядеть — волейбольный зал выходил чёрным
       прямоугольником. Читаемость держится теперь тенью под буквами, а
       не темнотой под всей картинкой.
       
       Остаётся лёгкая тень по краям: у верхней кромки идёт подпись
       турнира, у нижней — строка про стадион, обе набраны мелко, и на
       прожекторе они пропадали бы даже с тенью. Середина, где стоит
       крупный счёт, не тронута вовсе. */
    background: linear-gradient(180deg,
        rgba(6, 10, 20, 0.38),
        rgba(6, 10, 20, 0) 30%,
        rgba(6, 10, 20, 0) 70%,
        rgba(6, 10, 20, 0.42));
}

.mhero[data-sport="football"]   { --mhero-image: image-set(url("/assets/img/match/football.webp") type("image/webp"), url("/assets/img/match/football.jpg") type("image/jpeg")); }
.mhero[data-sport="basketball"] { --mhero-image: image-set(url("/assets/img/match/basketball.webp") type("image/webp"), url("/assets/img/match/basketball.jpg") type("image/jpeg")); }
.mhero[data-sport="hockey"]     { --mhero-image: image-set(url("/assets/img/match/hockey.webp") type("image/webp"), url("/assets/img/match/hockey.jpg") type("image/jpeg")); }
.mhero[data-sport="handball"]   { --mhero-image: image-set(url("/assets/img/match/handball.webp") type("image/webp"), url("/assets/img/match/handball.jpg") type("image/jpeg")); }
.mhero[data-sport="cricket"]    { --mhero-image: image-set(url("/assets/img/match/cricket.webp") type("image/webp"), url("/assets/img/match/cricket.jpg") type("image/jpeg")); }
.mhero[data-sport="volleyball"] { --mhero-image: image-set(url("/assets/img/match/volleyball.webp") type("image/webp"), url("/assets/img/match/volleyball.jpg") type("image/jpeg")); }
.mhero[data-sport="rugby"]      { --mhero-image: image-set(url("/assets/img/match/rugby.webp") type("image/webp"), url("/assets/img/match/rugby.jpg") type("image/jpeg")); }
.mhero[data-sport="american_football"] { --mhero-image: image-set(url("/assets/img/match/american_football.webp") type("image/webp"), url("/assets/img/match/american_football.jpg") type("image/jpeg")); }
.mhero[data-sport="baseball"]   { --mhero-image: image-set(url("/assets/img/match/baseball.webp") type("image/webp"), url("/assets/img/match/baseball.jpg") type("image/jpeg")); }

.mhero__inner {
    /* Высота задана снизу, а не содержимым: на широком экране блок
       выходил в полтораста пикселей, и от снимка оставалась узкая
       полоска, по которой не понять, что на нём. */
    min-block-size: clamp(220px, 22vw, 320px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--space-l) var(--space-m);
}

.mhero__top {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    flex-wrap: wrap;
    gap: var(--space-2xs);
    margin-block-end: var(--space-m);
}

.mhero__comp {
    text-shadow: var(--mhero-ink);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #F4F8FF;
}

/* Три колонки: хозяева, счёт, гости. Средняя не растягивается — счёт
   должен стоять посередине блока, а не посередине оставшегося места,
   иначе длинное название команды сдвигает его вбок. */
.mhero__grid {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: start;
    gap: var(--space-s);
}

.mhero__side {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2xs);
    min-width: 0;
}

.mhero__crest {
    inline-size: clamp(48px, 9vw, 96px);
    block-size: clamp(48px, 9vw, 96px);
    object-fit: contain;
    /* Тень отделяет герб от снимка: у многих клубов он тёмный, и на
       ночной арене без тени сливается с фоном. */
    filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.55));
}

.mhero__team {
    text-shadow: var(--mhero-ink);
    font-size: clamp(var(--text-s), 2.2vw, var(--text-l));
    font-weight: 700;
    text-align: center;
    text-wrap: balance;
}

.mhero__form {
    display: flex;
    gap: 4px;
    margin-block-start: var(--space-3xs);
}

.mhero__mid {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2xs);
}

/* Бейдж состояния стоит между счётом и временем первого свистка — к
   ним он и относится. Тень отделяет его от светлого паркета: у бейджа
   свой фон, но на прожекторе его кромка терялась. */
.mhero__mid .badge {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
}

/* Половины счёта равной ширины: двоеточие стоит ровно посередине
   шапки, между гербами команд. Гибкой раскладкой оно съезжало вслед за
   длиной счёта — у крикетного матча, где одна команда ещё не отбивала,
   строка «— : 213/4» уходила вправо, и счёт вставал под гербом
   гостей. */
.mhero__score:not(.mhero__score--pending) {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
}

.mhero__score {
    text-shadow: var(--mhero-ink);
    display: flex;
    align-items: baseline;
    gap: var(--space-2xs);
    font-family: var(--font-mono);
    font-size: clamp(2rem, 7vw, 4rem);
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.mhero__colon { opacity: 0.5; }
.mhero__score > :first-child { text-align: end; }
.mhero__score > :last-child { text-align: start; }

.mhero__score--pending {
    font-size: clamp(1.5rem, 5vw, 2.5rem);
    opacity: 0.92;
}

/* Часы идущего матча: минута или период. Тёмная плашка отделяет их от
   счёта — иначе два числа рядом читаются как одно. */
.mhero__clock {
    padding: 6px 14px;
    border-radius: var(--radius-m);
    background: rgba(6, 10, 20, 0.6);
    font-family: var(--font-mono);
    font-size: var(--text-s);
    font-variant-numeric: tabular-nums;
}

/* Мелкий текст на светлом паркете не спасает даже тень: строка
   «начало в 18:00» ложится ровно на освещённую разметку поля и
   пропадает. Своя плашка — единственное, что держит её читаемой, не
   затемняя снимок целиком. */
.mhero__note,
.mhero__kick {
    margin: 0;
    padding: 4px 12px;
    border-radius: 999px;
    background: rgba(6, 10, 20, 0.55);
    backdrop-filter: blur(2px);
    font-size: var(--text-xs);
    color: #E8EEFA;
    text-align: center;
}

.mhero__facts {
    text-shadow: var(--mhero-ink);
    color: #E8EEFA;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-2xs) var(--space-m);
    margin-block-start: var(--space-m);
    padding-block-start: var(--space-s);
    border-block-start: 1px solid rgba(242, 246, 255, 0.14);
    font-size: var(--text-xs);
}

/* На узком экране гербы уменьшаются, а форма прячется: шесть кружков
   под названием команды на трёхсот пикселях превращаются в кашу. */
@media (max-width: 560px) {
    .mhero__inner { padding: var(--space-s) var(--space-2xs) var(--space-m); }
    .mhero__form { display: none; }
    .mhero__grid { gap: var(--space-2xs); }
}

/* Ссылка, не выглядящая ссылкой.
   
   В строке мелких приписок под шапкой матча — арена, посещаемость —
   подчёркивание рябит и спорит с соседними словами, которые ссылками не
   являются. Цвет под указателем говорит то же самое, но только тому,
   кто уже подвёл к ней мышь. */
.quiet-link {
    color: inherit;
    text-decoration: none;
    transition: color 0.12s ease;
}

.quiet-link:hover,
.quiet-link:focus-visible {
    color: var(--brand-red);
}

/* В шапке матча цвет ссылки светлее: фирменный красный на ночном
   снимке читается хуже, чем белый с подсветкой. */
.mhero .quiet-link:hover,
.mhero .quiet-link:focus-visible {
    color: #FFD9DC;
}

/* Подсказка формы в шапке раскрывается вниз, а не вверх: над буквами
   стоит название команды, и всплывающая подсказка накрывала бы его.
   Стрелка при этом переезжает на верхнюю кромку — иначе она указывала
   бы в пустоту. */
.mhero .form-mark .tip {
    inset-block-end: auto;
    inset-block-start: calc(100% + 8px);
    transform: translateX(-50%) translateY(-4px);
}

.mhero .form-mark:hover .tip,
.mhero .form-mark:focus-visible .tip {
    transform: translateX(-50%) translateY(0);
}

.mhero .form-mark .tip::after {
    inset-block-start: auto;
    inset-block-end: 100%;
    border-block-start-color: transparent;
    border-block-end-color: var(--tooltip-bg);
}

/* ============================== страница матча: разделы и карточки

   Страница длинная — разбор, ход игры, статистика, составы, форма,
   личные встречи, — и раньше все разделы шли сплошным потоком, отделяясь
   друг от друга только заголовком. Читатель, пришедший за составами,
   прокручивал до них вслепую. */

.mtabs {
    display: flex;
    gap: var(--space-2xs);
    overflow-x: auto;
    margin-block-end: var(--space-l);
    padding-block-end: 2px;
    border-block-end: 1px solid var(--border);
    /* Полоса прокручивается вбок на узком экране, но полоса прокрутки
       под ней — лишняя черта поперёк страницы. */
    scrollbar-width: none;
}

.mtabs::-webkit-scrollbar { display: none; }

.mtab {
    flex: none;
    padding: 12px 12px 10px;
    border-block-end: 2px solid transparent;
    color: var(--text-muted);
    text-decoration: none;
    font-size: var(--text-s);
    font-weight: 500;
    white-space: nowrap;
    transition: color 0.12s ease, border-color 0.12s ease;
}

.mtab:hover,
.mtab:focus-visible {
    color: var(--text);
    border-block-end-color: var(--border-strong, var(--border));
}

/* Полоса стоит в своей карточке — как и разделы под ней. Без неё она
   висела в воздухе над серым полем и читалась как часть шапки. */
.mtabs {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-l);
    padding-inline: var(--space-2xs);
}

/* Каждый раздел — своя карточка.
   
   Прежде разделы шли сплошным потоком по серому полю, отделяясь друг от
   друга одним заголовком: где кончается статистика и начинаются составы,
   приходилось угадывать по смыслу. Белая карточка отвечает на это до
   чтения. */
.mcard {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-l);
    padding: var(--space-m);
    /* Заголовок не должен упираться в шапку сайта при переходе по
       якорю: она перекрывает первые строки. */
    scroll-margin-block-start: var(--space-l);
}

.mcard > .section-head {
    margin-block-start: 0;
}

/* Заголовок раздела — обычным регистром, как в разборах.
   
   Прописные вразрядку читаются как служебная пометка, а в макетах это
   именно заголовок блока: «LIVE сейчас», «Главные турниры», «Ключевые
   факторы». Размер оставлен мелким — заголовок называет раздел, а не
   соперничает с содержимым за внимание. */
.mcard .section-head__title {
    font-size: var(--text-m);
    font-weight: 700;
    letter-spacing: -0.01em;
}

/* Раздел, к которому только что перешли, отмечается сам: без этого
   после перехода непонятно, куда попал, — все карточки одинаковы. */
.mcard:target {
    border-color: var(--brand-red);
}

.mcard:target .section-head__title {
    color: var(--brand-red);
}


/* Полоса матча — иллюстрация, а не раздел: заголовка у неё нет, и
   отступы карточки вокруг узкой шкалы выглядели бы пустой рамкой. */
.mcard--strip {
    padding-block: var(--space-s);
}

/* ------------------------------------------ плитки главных показателей

   Полосы сравнения ниже показывают всё и подробно, но чтобы увидеть в
   них главное, их надо прочесть: восемь строк, в каждой два числа.
   Здесь первые четыре — те, что наш порядок считает главными для вида
   спорта, — вынесены крупно и читаются взглядом. */

.mtiles {
    display: grid;
    /* Четыре в ряд заданы прямо, а не выведены из ширины: при
       auto-fit число столбцов зависит от того, насколько широкое число
       попало в плитку, и «1.22 – 0.23» в четвёртой роняло весь ряд на
       три с одинокой четвёртой под ними — это читается обрывом, а не
       рядом. Ниже 760 точек столбцов два, ниже 430 — один. */
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
}

/* Ниже 1200 точек главная колонка сужается настолько, что четыре
   крупных числа в ряд не помещаются. Два ряда по две плитки лучше
   четырёх с мелкими числами: число здесь — главное, ради него плитка и
   заведена. */
@media (max-width: 1200px) {
    .mtiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 430px) {
    .mtiles { grid-template-columns: 1fr; }
}

.mtile {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: var(--space-s) var(--space-2xs);
    min-inline-size: 0;
    /* Разделены чертой, а не отступом: плитки — один ряд показателей об
       одном матче, и промежутки читались бы как отдельные карточки. */
    border-inline-start: 1px solid var(--border);
}

.mtile:first-child {
    border-inline-start: 0;
    padding-inline-start: 0;
}

.mtile__label {
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.mtile__value {
    display: flex;
    align-items: baseline;
    gap: 6px;
    min-inline-size: 0;
    font-family: var(--font-mono);
    /* Число растёт вместе с колонкой: на широком экране оно читается с
       порога, на узком уступает место подписи. */
    font-size: clamp(1.125rem, 1.5vw, 1.5rem);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.mtile__dash { color: var(--text-faint); font-weight: 400; }
.mtile__home { color: var(--stat-home); }
.mtile__away { color: var(--stat-away); }

/* Полоса под числами повторяет их соотношение: она нужна не ради
   точности — точность в самих числах, — а чтобы перевес был виден до
   того, как числа прочитаны. */
.mtile__bar {
    display: flex;
    gap: 3px;
    block-size: 7px;
    border-radius: 999px;
    overflow: hidden;
}

.mtile__bar-home { background: var(--stat-home); border-radius: 999px; }
.mtile__bar-away { background: var(--stat-away); border-radius: 999px; }

@media (max-width: 700px) {
    .mtile {
        border-inline-start: 0;
        padding-inline: 0;
        border-block-start: 1px solid var(--border);
        padding-block: var(--space-2xs);
    }
    .mtile:first-child { border-block-start: 0; }
}

/* ================================ страница матча: блоки в две колонки

   Страница собрана как разворот: слева то, ради чего её открыли —
   разбор, ход игры, показатели, составы, — справа то, к чему по ходу
   чтения обращаются: турнирная таблица, прошлые встречи, что ещё
   играется в этом турнире. Раньше всё это шло одним столбцом, и
   таблица, за которой читатель приходит чаще всего, оказывалась в
   самом низу.

   Правая колонка появляется только вместе с содержимым: у матча
   младшей лиги нет ни таблицы, ни истории встреч. */

/* ------------------------------------------------ значки в полосе вкладок */

.mtab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.mtab__icon {
    inline-size: 17px;
    block-size: 17px;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
    color: var(--text-muted);
    /* Значок приглушённее подписи: он помогает найти вкладку взглядом,
       но не должен спорить с ней за внимание. */
    transition: color 0.12s ease;
}

.mtab:hover .mtab__icon,
.mtab:focus-visible .mtab__icon { color: var(--brand-red); }

/* --------------------------------------------- ссылка «показать всё» */

.section-head__more,
.mcard__more {
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--brand-red);
    text-decoration: none;
    white-space: nowrap;
}

.section-head__more:hover,
.mcard__more:hover { text-decoration: underline; }

/* В подвале блока ссылка стоит своей строкой и отбита от содержимого:
   приклеенная к последней строке списка, она читалась бы его частью. */
.mcard__more {
    display: inline-block;
    margin-block-start: var(--space-s);
}

/* ------------------------------------------------ карточка боковой колонки */

/* Боковая колонка не прокручивается внутри себя.

   Общее правило ленты новостей делает её липкой с собственной полосой
   прокрутки. Полоса внутри страницы перехватывает колесо мыши и
   читается поломкой, поэтому здесь её нет. */
.layout--with-aside > aside.mside {
    max-block-size: none;
    overflow: visible;
}

/* Колонка липнет к верху, если помещается в окно.

   На длинных страницах — матч-центр, страница матча — основная
   колонка вчетверо длиннее, и без этого две трети прокрутки читатель
   видит справа пустое место. Своей полосы прокрутки у колонки нет: она
   перехватывает колесо и читается поломкой. */
@media (min-width: 1024px) {
    .layout--with-aside > aside.mside {
        position: sticky;
        top: var(--space-s);
        align-self: start;
    }
}

/* Липнет та колонка, что помещается в окно.

   На странице турнира в ней два коротких блока — 640 точек при окне в
   900, — и закреплённая сверху она остаётся на виду всю прокрутку.

   А когда содержимое всё же перерастает окно — раскрыли список,
   набежали матчи, — колонка получает собственную прокрутку. Без неё низ
   липкого блока недостижим: он уезжает за нижний край экрана и ложится
   поверх подвала, а прокрутка страницы его не догоняет, потому что
   колонка едет вместе с ней. */
@media (min-width: 1024px) and (min-height: 780px) {
    .layout--with-aside > aside.mside--sticky {
        position: sticky;
        top: var(--space-s);
        align-self: start;
        /* Прокрутка колонки не пробрасывается на страницу: докрутив
           список до конца, читатель остаётся в нём, а не улетает вниз
           страницы. */
        overscroll-behavior: contain;
        scrollbar-width: thin;
    }
}

.tside > .tpick__card + .tpick__card { margin-block-start: var(--space-m); }

.mside {
    display: grid;
    gap: var(--space-l);
    align-content: start;
    /* Ячейка сетки по умолчанию не уже своего содержимого, и таблица из
       семи столбцов растягивала колонку, выпихивая её правый край за
       край страницы. */
    min-inline-size: 0;
}

.mcard--side {
    padding: var(--space-s) var(--space-m) var(--space-m);
    min-inline-size: 0;
}

.mcard--side .section-head {
    border-block-end-width: 1px;
    border-block-end-color: var(--border);
    padding-block: var(--space-2xs) var(--space-s);
    margin-block-end: 0;
}

/* Заголовок карточки отбит от содержимого чертой во всю ширину — как в
   образце: узкая черта под одним заголовком читалась бы подчёркиванием. */
.mcard > .section-head {
    border-block-end: 1px solid var(--border);
    padding-block-end: var(--space-s);
    margin-block-end: var(--space-s);
}

/* --------------------------------------------------------- узкая таблица */

.mtable {
    inline-size: 100%;
    border-collapse: collapse;
    font-size: var(--text-xs);
    font-variant-numeric: tabular-nums;
    /* Ширины назначены, а не выведены из содержимого: иначе длинное
       название команды растягивает таблицу, а числовые столбцы
       выдавливаются за край узкой колонки. */
    table-layout: fixed;
}

.mtable caption {
    text-align: start;
    font-size: var(--text-2xs);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-faint);
    padding-block: var(--space-s) var(--space-2xs);
}

.mtable thead th {
    text-align: end;
    overflow: hidden;
    text-overflow: clip;
    font-size: var(--text-2xs);
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-faint);
    padding: 5px 4px;
    border-block-end: 1px solid var(--border);
    white-space: nowrap;
}

.mtable thead th:nth-child(2) { text-align: start; }

.mtable td {
    padding: 6px 4px;
    border-block-end: 1px solid var(--border-subtle, var(--border));
    color: var(--text-muted);
}

.mtable tbody tr:last-child td { border-block-end: 0; }

.mtable__pos {
    inline-size: 1.7em;
    text-align: start;
    color: var(--text-faint);
}

/* Числовые столбцы разнесены: при ширине в два знака соседние числа
   вставали вплотную и читались одним числом — «24 15 6 3» сливалось в
   «241563». */
.mtable__num { inline-size: 2.6em; text-align: end; }

/* Столбцу забитых — своя ширина.
 *
 * В футболе там «45:20», в хоккее за полный сезон «290:231»: семь
 * знаков не влезали в две с половиной буквы и вылезали за границу
 * таблицы, наезжая на очки. */
.mtable__num--goals {
    inline-size: 5.2em;
    white-space: nowrap;
}
/* Столбцу очков — своя ширина: заголовок «Очки» длиннее любого числа
   под ним, и по числам он не помещался, обрезаясь до «Очк». */
.mtable__num--strong { inline-size: 4.3em; }
.mtable__num--strong { color: var(--text); font-weight: 700; }

.mtable__num--muted { color: var(--text-faint); }

.mtable__team a {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text);
    text-decoration: none;
    min-inline-size: 0;
}

.mtable__team a:hover { color: var(--brand-red); }

.mtable__team span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mtable__crest {
    inline-size: 20px;
    block-size: 20px;
    flex: none;
    object-fit: contain;
}

/* Строка команды, чей это матч. Подсвечены обе — и хозяева, и гости:
   матч смотрят болельщики обеих, и одной подсвеченной строкой мы
   половине читателей показывали бы чужое место. */
.mtable tr.is-here td {
    background: var(--accent-subtle);
}

.mtable tr.is-here .mtable__team a { font-weight: 700; }

/* ------------------------------------------------------- личные встречи */

.h2hsum {
    padding-block: var(--space-m) var(--space-s);
}

.h2hsum__teams {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-s);
}

.h2hsum__side {
    display: flex;
    align-items: center;
    gap: 8px;
    min-inline-size: 0;
    max-inline-size: 48%;
}

.h2hsum__side--away { justify-content: flex-end; }

.h2hsum__crest {
    inline-size: 40px;
    block-size: 40px;
    flex: none;
    object-fit: contain;
}

.h2hsum__team {
    font-size: var(--text-s);
    font-weight: 700;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.h2hsum__cap {
    margin: var(--space-s) 0 var(--space-2xs);
    text-align: center;
    font-size: var(--text-2xs);
    color: var(--text-faint);
}

/* Числа расставлены по краям — каждое под своей командой. Сдвинутые в
   середину, они читались бы счётом, а это не счёт. */
.h2hsum__counts {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: var(--space-s);
}

/* Число сверху, подпись под ним — а не «3 победы» строкой.

   Строкой это пришлось бы согласовывать с числительным на двенадцати
   языках, у каждого со своими правилами: по-русски «1 победа», но «3
   победы» и «5 побед». Подпись под числом — не фраза, а название
   столбца, и она верна при любом числе. */
.h2hsum__count {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    font-size: var(--text-2xs);
    color: var(--text-faint);
    white-space: nowrap;
}

.h2hsum__count b {
    font-size: var(--text-l);
    font-weight: 800;
    color: var(--text);
    line-height: 1;
}

.h2hlist {
    list-style: none;
    margin: 0;
    padding: 0;
}

.h2hlist__row a {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: var(--space-xs);
    padding-block: 9px;
    border-block-start: 1px solid var(--border);
    text-decoration: none;
    color: var(--text-muted);
    font-size: var(--text-xs);
}

.h2hlist__row a:hover { color: var(--brand-red); }

.h2hlist__date { color: var(--text-faint); white-space: nowrap; }

.h2hlist__home,
.h2hlist__away {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.h2hlist__home { text-align: end; }

.h2hlist__score {
    font-weight: 700;
    color: var(--text);
    white-space: nowrap;
}

/* ------------------------------------------- другие матчи турнира */

.mround {
    list-style: none;
    margin: 0;
    padding: 0;
}

.mround__row a {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: var(--space-xs);
    padding-block: 11px;
    border-block-start: 1px solid var(--border);
    text-decoration: none;
    color: var(--text);
    font-size: var(--text-xs);
}

.mround__row:first-child a { border-block-start: 0; }
.mround__row a:hover .mround__team { color: var(--brand-red); }

.mround__side {
    display: flex;
    align-items: center;
    gap: 8px;
    min-inline-size: 0;
}

.mround__side--home { justify-content: flex-end; }

.mround__team {
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mround__crest {
    inline-size: 22px;
    block-size: 22px;
    flex: none;
    object-fit: contain;
}

.mround__mid { text-align: center; white-space: nowrap; }

.mround__when {
    font-size: var(--text-2xs);
    color: var(--text-faint);
    font-variant-numeric: tabular-nums;
}

.mround__when b { color: var(--text-muted); font-weight: 600; }

.mround__score {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.mround__row.is-live .mround__score { color: var(--live); }

/* Крикетный счёт в две подачи — «363/8 & 200/6 : 357/6 & 214/4» —
   между названиями команд не помещается: в узкой колонке он сжимал их
   до «Шр…» и «Ин…». Такая строка раскладывается в две: сверху команды,
   под ними счёт во всю ширину. */
.mround__row--long a {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    row-gap: 4px;
}

.mround__row--long .mround__mid {
    grid-column: 1 / -1;
    grid-row: 2;
    white-space: normal;
    text-align: center;
}

.mround__row--long .mround__side--home { grid-column: 1; }
.mround__row--long .mround__side:not(.mround__side--home) { grid-column: 2; }
.mround__row--long .mround__score { font-size: var(--text-2xs); }

/* ----------------------------------------------------- ход матча строками

   Прежде события хозяев стояли слева от линии времени, гостей — справа.
   Читать это приходилось зигзагом, а на узком экране колонки
   схлопывались и порядок терялся вовсе. Здесь порядок один сверху вниз,
   а чьё событие — говорит герб и цвет точки на линии. */

.mflow {
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
}

/* Столбцы заданы долями, а не содержимым.

   Прежде вид события и игрок прижимались к правому краю: у строки с
   «Заменой» они начинались в одном месте, у строки с «Жёлтой карточкой»
   — в другом, и левый край столбца шёл рваным. Теперь каждая часть
   строки начинается на своей вертикали. */
.mflow__row {
    display: grid;
    grid-template-columns:
        3.4em 14px 22px 3.2em minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1.2fr);
    align-items: center;
    gap: var(--space-xs);
    padding-block: 9px;
    font-size: var(--text-s);
}

/* Строки разделены только линией времени: черта под каждой строкой
   делала из ленты решётку. */
.mflow__score {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.mflow__time {
    color: var(--text-faint);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.mflow__time--unknown { text-align: center; }

/* Линия времени рисуется точками и отрезком между ними: сплошная
   полоса во всю высоту вылезала бы за первую и последнюю строку. */
.mflow__dot {
    position: relative;
    inline-size: 8px;
    block-size: 8px;
    border-radius: 50%;
    justify-self: center;
    background: var(--stat-away);
}

.mflow__row.is-home .mflow__dot { background: var(--stat-home); }

.mflow__row:not(:last-child) .mflow__dot::after {
    content: "";
    position: absolute;
    inset-block-start: 8px;
    inset-inline-start: 50%;
    inline-size: 2px;
    block-size: calc(100% + 20px);
    background: var(--border);
    transform: translateX(-50%);
}

.mflow__crest {
    inline-size: 22px;
    block-size: 22px;
    object-fit: contain;
}

.mflow__team {
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mflow__kind {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mflow__row.is-major .mflow__kind { color: var(--win); font-weight: 700; }

.mflow__who {
    color: var(--text);
    font-weight: 600;
    min-inline-size: 0;
    /* Отделено от вида события чертой: «гол Иванов» без неё читается
       одной подписью, хотя это две разные вещи. */
    border-inline-start: 1px solid var(--border);
    padding-inline-start: var(--space-xs);
}

/* Кто кого сменил — второй строкой под именем.

   В одну строку это не помещалось: «Gabriel Knesowitsch ушёл: Lucas
   Oliveira» обрывалось на середине, и читатель терял как раз того, кого
   заменили. Своей строкой оно и стоит ровнее: имена вышедших
   выстраиваются по одной вертикали. */
.mflow__detail {
    display: block;
    color: var(--text-faint);
    font-weight: 400;
    font-size: var(--text-xs);
    line-height: 1.3;
}

/* Ниже 1100 точек строка в семь столбцов не помещается: у главной
   колонки остаётся около шестисот, и «Жёлтая карточка» обрывалась до
   «Жёлтая карт…». Тогда части строки встают друг под друга. */
@media (max-width: 1100px) {
    .mflow__row {
        grid-template-columns: 3.2em 14px 22px minmax(0, 1fr);
        row-gap: 2px;
        font-size: var(--text-xs);
    }
    .mflow__score { grid-column: 4; }
    .mflow__team { grid-column: 4; }
    .mflow__kind,
    .mflow__who {
        grid-column: 4;
        text-align: start;
        border-inline-start: 0;
        padding-inline-start: 0;
    }
}

/* ------------------------------------------------------- форма команд */

.form-col__head {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    margin-block-end: var(--space-xs);
}

.form-col__crest {
    inline-size: 34px;
    block-size: 34px;
    flex: none;
    object-fit: contain;
}

.form-col__team {
    margin: 0;
    font-size: var(--text-m);
    font-weight: 800;
    letter-spacing: -0.01em;
    min-inline-size: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.form-col__marks {
    display: flex;
    gap: 6px;
    margin-block-end: 6px;
}

.form-col__cap {
    margin: 0 0 var(--space-s);
    font-size: var(--text-2xs);
    color: var(--text-faint);
}

/* Список последних матчей идёт строками без рамки: рамка вокруг пяти
   строк внутри карточки — вторая рамка на том же месте. */
.form-list {
    background: none;
    border: 0;
    border-radius: 0;
    gap: 0;
}

.form-row a {
    /* Отметка, счёт, соперник, дата. Счёт получил свою колонку и вес:
       он отвечает на вопрос строки, а прежде стоял в её конце мелким
       шрифтом. */
    /* Колонка счёта гибкая: крикетный счёт — это «549/9d & 251/9d»,
       вчетверо длиннее футбольного «2:1», и в жёсткой колонке он
       наезжал на название соперника. */
    grid-template-columns: 10px minmax(3.4rem, auto) minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-2xs);
    padding-inline: 0;
    padding-block: 8px;
    border-block-start: 1px solid var(--border);
    font-size: var(--text-xs);
}

.form-row__score {
    font-size: var(--text-s);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    /* Длиннее девяти знаков счёт обрезается: полный остаётся
       подсказкой, а строка не разъезжается. */
    max-inline-size: 8.5rem;
    overflow: hidden;
    text-overflow: ellipsis;
}

.form-row__opp {
    min-inline-size: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.form-row:first-child a { border-block-start: 0; }
.form-row a:hover { background: none; }
.form-row a:hover .form-row__opp { color: var(--brand-red); }

.form-row__prefix {
    color: var(--text-faint);
    font-size: var(--text-2xs);
}

/* Отметка результата — квадратик, а не полоска: в строке с числами
   полоска терялась среди них, а квадратик читается знаком. */
.form-row__mark {
    inline-size: 10px;
    block-size: 10px;
    border-radius: 3px;
}

.form-row--win .form-row__score { color: var(--win); }
.form-row--loss .form-row__score { color: var(--live); }

/* --------------------------------------------------------- составы */

.msquads {
    display: grid;
    gap: var(--space-m);
    grid-template-columns: 1fr;
}

@media (min-width: 700px) {
    .msquads { grid-template-columns: 1fr 1fr; gap: var(--space-l); }
}

.msquad__head {
    display: flex;
    align-items: center;
    gap: 10px;
}

.msquad__crest {
    inline-size: 26px;
    block-size: 26px;
    flex: none;
    object-fit: contain;
}

.msquad__team {
    margin: 0;
    font-size: var(--text-s);
    font-weight: 800;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mtable--squad caption:first-of-type { padding-block-start: var(--space-s); }

/* --------------------------------------- плитка главных показателей: значок

   Значок стоит слева от подписи и числа, а не над ними: ряд из четырёх
   плиток должен читаться строкой, а колонка «значок-подпись-число»
   растягивала бы его втрое по высоте. */

.mtile {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
        "icon body"
        "bar  bar";
    align-items: center;
    gap: 8px;
    row-gap: 10px;
}

.mtile__icon {
    grid-area: icon;
    inline-size: 28px;
    block-size: 28px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.4;
    stroke-linecap: round;
    stroke-linejoin: round;
    /* Приглушённый, но различимый: значок отделяет плитки друг от
       друга взглядом, а называет показатель подпись рядом. */
    color: var(--text-muted);
}

.mtile__body {
    grid-area: body;
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-inline-size: 0;
}

/* Подпись переносится, а не обрезается: «Ожидаемые голы» превращались
   в «Ожидаем…», и плитка переставала называть свой показатель. */
.mtile__label {
    white-space: normal;
    line-height: 1.2;
}

.mtile__bar { grid-area: bar; }

/* ----------------------------------------------- отмеченная вкладка

   Полоса — ссылки на якоря, и какой раздел сейчас перед глазами,
   разметка сама не знает. Отметку ставит наблюдатель прокрутки; пока
   он не отработал или скрипт не загрузился, полоса выглядит как
   обычный ряд ссылок — ничего не ломается. */

.mtab.is-current {
    color: var(--brand-red);
    border-block-end-color: var(--brand-red);
    font-weight: 700;
}

.mtab.is-current .mtab__icon {
    color: var(--brand-red);
    background: color-mix(in srgb, var(--brand-red) 12%, transparent);
    border-radius: 7px;
    padding: 3px;
    box-sizing: content-box;
    margin: -3px;
}

/* Буквы формы — кружками, а не скруглёнными квадратами.

   Ряд из шести знаков читается быстрее, когда знаки не спорят формой с
   гербами и плашками рядом: круг ни на что на странице не похож и
   потому опознаётся сразу. */
.form-mark { border-radius: 50%; }

/* --------------------------------- составы: столбец позиции по-своему

   Числовые столбцы таблицы узкие — им хватает двух знаков. В составе на
   том же месте стоит слово: «Полузащитник» вылезал из отведённых ему
   двух знаков и наезжал на соседний столбец. */
.mtable--squad .mtable__pos { inline-size: 2.4em; }

.mtable--squad .mtable__num {
    inline-size: 8.6em;
    font-size: var(--text-2xs);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mtable--squad .mtable__team a { font-weight: 500; }

/* ========================================= витрина турнирных таблиц

   Раздел был сплошной лентой: десять полных таблиц одна под другой и
   полторы сотни ссылок следом — семнадцать тысяч точек высоты, в
   которых свою лигу можно было найти только прокруткой.

   Теперь наверху главные турниры карточками, ниже страны: у каждой её
   сильнейший турнир пятёркой лидеров и прочие свёрнутыми строками.
   Полные таблицы остались на страницах турниров, где идут вместе с
   календарём и составами. */

.hub-head {
    margin-block-end: var(--space-l);
}

.hub-head__title {
    margin: 0;
    font-size: clamp(var(--text-xl), 3vw, 2rem);
    font-weight: 800;
    letter-spacing: -0.02em;
}

.hub-head__note {
    margin: var(--space-2xs) 0 0;
    color: var(--text-muted);
    font-size: var(--text-s);
    max-inline-size: 60ch;
}

/* Витрина прогнозов начинается снимком, а не голым заголовком.
 *
 * Разделы видов спорта открываются шапкой с фоном, и переход с
 * футбола на прогнозы выглядел так, будто читатель ушёл в служебную
 * часть сайта. Фон здесь общий: у прогнозов нет своего вида спорта. */
.hub-head--cover {
    padding: var(--space-l) var(--space-m);
    border-radius: var(--radius-l);
    background:
        linear-gradient(120deg, rgba(12,20,36,0.78), rgba(12,20,36,0.44)),
        url("/assets/img/competition/default.webp") center 55% / cover no-repeat;
}

.hub-head--cover .hub-head__title { color: #fff; }

.hub-head--cover .hub-head__note {
    color: rgba(255,255,255,0.82);
}

/* Ссылка «назад» на снимке: серый по тёмному не читался. */
.hub-head--cover .hub-head__back { color: rgba(255,255,255,0.72); }
.hub-head--cover .hub-head__back:hover { color: #fff; }

/* Витрины держат один вид: матч-центр открывается так же. */
.mhead--cover {
    padding: var(--space-l) var(--space-m);
    border-radius: var(--radius-l);
    background:
        linear-gradient(120deg, rgba(12,20,36,0.78), rgba(12,20,36,0.44)),
        url("/assets/img/competition/default.webp") center 55% / cover no-repeat;
}

.mhead--cover .mhead__title { color: #fff; }
.mhead--cover .mhead__sub { color: rgba(255,255,255,0.82); }

/* ------------------------------------------------ полоса видов спорта */

.stabs {
    display: flex;
    gap: var(--space-2xs);
    overflow-x: auto;
    scrollbar-width: none;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-l);
    padding-inline: var(--space-2xs);
    margin-block-end: var(--space-l);
}

.stabs::-webkit-scrollbar { display: none; }

.stab {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 12px 14px 10px;
    border-block-end: 2px solid transparent;
    color: var(--text-muted);
    text-decoration: none;
    font-size: var(--text-s);
    font-weight: 500;
    white-space: nowrap;
    transition: color 0.12s ease, border-color 0.12s ease;
}

.stab:hover { color: var(--text); }

/* Значок вида спорта во вкладке: семь слов подряд читаются как
   список, а мяч, шайба и клюшка различаются с одного взгляда. */
.stab__ico {
    inline-size: 16px;
    block-size: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.stab.is-current {
    color: var(--brand-red);
    border-block-end-color: var(--brand-red);
    font-weight: 700;
}

/* --------------------------------------------- карточки главных турниров */

/* Главные турниры — одной строкой, а не сеткой.

   Сеткой седьмая карточка не помещалась и уходила на вторую строку
   одна: ряд из шести и одинокая под ними читается обрывом. Строка с
   прокруткой не переносит ничего: карточки ужимаются, пока помещаются,
   а на узком экране уезжают вбок — и все остаются достижимы. */
.cgrid {
    display: flex;
    gap: var(--space-2xs);
    overflow-x: auto;
    scrollbar-width: thin;
    padding-block-end: 2px;
}

.cgrid > .ccard { flex: 1 1 170px; min-inline-size: 170px; }

.ccard {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-m, 10px);
    text-decoration: none;
    color: inherit;
    min-inline-size: 0;
    transition: border-color 0.12s ease, background 0.12s ease;
}

.ccard:hover {
    border-color: var(--brand-red);
    background: var(--hover-bg);
}

/* Знак держит своё место и пустым: иначе названия турниров без герба
   уезжают влево, и ряд карточек идёт лесенкой. */
.ccard__mark {
    inline-size: 32px;
    block-size: 32px;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ccard__mark img { max-inline-size: 100%; max-block-size: 100%; object-fit: contain; }

.ccard__body {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-inline-size: 0;
}

/* Название турнира переносится, а не обрезается.

   «Кубок Южноамериканских клубов» в одну строку не помещается ни при
   какой разумной ширине карточки, и от него оставалось «Кубок
   Южноамери…» — а это и Кубок Южноамериканских клубов, и Кубок
   Южноамериканской конфедерации: по обрезку их не различить. Две
   строки места стоят дешевле неразличимых названий. */
.ccard__name {
    font-size: var(--text-s);
    font-weight: 700;
    line-height: 1.2;
    min-inline-size: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ccard__country {
    font-size: var(--text-2xs);
    color: var(--text-faint);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ----------------------------------------------------------- страны */

.cblock {
    margin-block-start: var(--space-l);
    min-inline-size: 0;
}

.cblock__head {
    display: flex;
    align-items: center;
    gap: 10px;
    min-inline-size: 0;
    margin: 0 0 var(--space-s);
    font-size: var(--text-l);
    font-weight: 800;
    letter-spacing: -0.01em;
}

.cblock__count {
    margin-inline-start: auto;
    font-size: var(--text-2xs);
    font-weight: 500;
    color: var(--text-faint);
    white-space: nowrap;
}

/* Прочие турниры страны — строками, а не таблицами: их бывает восемь
   десятков на страну, и каждая таблица здесь была бы повтором той, что
   стоит на странице турнира. */
.crest {
    list-style: none;
    margin: var(--space-2xs) 0 0;
    padding: 0;
    display: grid;
    /* Дорожка сжимаема: у ячейки сетки наименьшая ширина по умолчанию
       равна ширине содержимого, и строка с длинным названием турнира
       («Кубок женщин по крикету — Восточная Азия») распирала колонку до
       871 точки при её 688 — заезжая под боковую карточку. */
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-2xs);
}

.crow {
    display: flex;
    align-items: center;
    gap: var(--space-s);
    padding: 11px var(--space-m);
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-m, 10px);
    text-decoration: none;
    color: inherit;
    transition: border-color 0.12s ease;
}

.crow:hover { border-color: var(--brand-red); }
.crow:hover .crow__name { color: var(--brand-red); }

.crow__name {
    font-size: var(--text-s);
    font-weight: 600;
    /* И внутри строки: у элемента гибкой раскладки наименьшая ширина
       тоже равна содержимому, и одного многоточия мало — без этого он
       не сжимается, а растягивает строку. */
    min-inline-size: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.crow__note {
    margin-inline-start: auto;
    font-size: var(--text-2xs);
    color: var(--text-faint);
    white-space: nowrap;
}

.crow__go { color: var(--text-faint); font-size: var(--text-m); line-height: 1; }

/* ----------------------------------------- раскрытие оставшихся стран

   На чистом CSS: скрытые страны лежат в разметке и видны поисковику, а
   читателю показываются по нажатию. Скрипт для этого не нужен, и без
   него ничего не ломается — при выключенном CSS видно всё. */

.cblock--hidden { display: none; }
.tmain:has(.cmore__toggle:checked) .cblock--hidden { display: block; }
.tmain:has(.cmore__toggle:checked) .cmore { display: none; }

.cmore {
    display: block;
    margin-block-start: var(--space-l);
    padding: 12px;
    text-align: center;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-m, 10px);
    font-size: var(--text-s);
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
}

.cmore:hover { border-color: var(--brand-red); color: var(--brand-red); }

.cmore__all {
    margin-block-start: var(--space-l);
    font-size: var(--text-s);
}

/* ---------------------------------- витрина таблиц: три колонки и отбор */

.hub-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-m);
    flex-wrap: wrap;
}

/* Переключатель вида: таблицы или список турниров. */
.segm {
    display: inline-flex;
    flex: none;
    padding: 3px;
    background: var(--bg-sunken);
    border-radius: var(--radius-m, 10px);
}

.segm__item {
    padding: 8px 16px;
    border-radius: 8px;
    font-size: var(--text-s);
    font-weight: 600;
    color: var(--text-muted);
    text-decoration: none;
    white-space: nowrap;
}

.segm__item.is-on {
    background: var(--bg-elevated);
    color: var(--brand-red);
    box-shadow: 0 1px 3px rgb(0 0 0 / 0.08);
}

/* ------------------------------------------- полоса частей света и поиск */

.rbar {
    display: flex;
    align-items: center;
    gap: var(--space-s);
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-l);
    padding: 0 var(--space-2xs);
    margin-block-end: var(--space-l);
}

.rbar__tabs {
    display: flex;
    gap: var(--space-2xs);
    overflow-x: auto;
    scrollbar-width: none;
    min-inline-size: 0;
}

.rbar__tabs::-webkit-scrollbar { display: none; }

.rtab {
    flex: none;
    padding: 12px 12px 10px;
    border-block-end: 2px solid transparent;
    color: var(--text-muted);
    font-size: var(--text-s);
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    transition: color 0.12s ease, border-color 0.12s ease;
}

.rtab:hover { color: var(--text); }
.rtab__n { color: var(--text-faint); font-size: var(--text-2xs); }

/* Отмеченная вкладка. Переключатель стоит до полосы, поэтому связь
   идёт через «~» и адрес метки, а не через соседство. */
#reg-all:checked ~ .rbar [for="reg-all"],
#reg-EU:checked  ~ .rbar [for="reg-EU"],
#reg-SA:checked  ~ .rbar [for="reg-SA"],
#reg-NA:checked  ~ .rbar [for="reg-NA"],
#reg-AS:checked  ~ .rbar [for="reg-AS"],
#reg-AF:checked  ~ .rbar [for="reg-AF"],
#reg-OC:checked  ~ .rbar [for="reg-OC"] {
    color: var(--brand-red);
    border-block-end-color: var(--brand-red);
    font-weight: 700;
}

.rsearch {
    margin-inline-start: auto;
    flex: none;
    display: flex;
    align-items: center;
}

.rsearch__input {
    inline-size: clamp(180px, 22vw, 280px);
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--bg);
    color: inherit;
    font-size: var(--text-s);
}

.rsearch__input:focus-visible { outline: 2px solid var(--brand-red); outline-offset: 1px; }

/* Отбор по части света на чистом CSS: скрытые страны остаются в
   разметке и видны поисковику, а скрипт нужен только поиску. */
#reg-EU:checked ~ .tlayout .cblock:not([data-region="EU"]),
#reg-SA:checked ~ .tlayout .cblock:not([data-region="SA"]),
#reg-NA:checked ~ .tlayout .cblock:not([data-region="NA"]),
#reg-AS:checked ~ .tlayout .cblock:not([data-region="AS"]),
#reg-AF:checked ~ .tlayout .cblock:not([data-region="AF"]),
#reg-OC:checked ~ .tlayout .cblock:not([data-region="OC"]) { display: none; }

/* Выбран регион — свёрнутые страны этого региона показываются все:
   иначе «Океания» из трёх стран показывала бы пустоту. */
#reg-EU:checked ~ .tlayout .cblock[data-region="EU"],
#reg-SA:checked ~ .tlayout .cblock[data-region="SA"],
#reg-NA:checked ~ .tlayout .cblock[data-region="NA"],
#reg-AS:checked ~ .tlayout .cblock[data-region="AS"],
#reg-AF:checked ~ .tlayout .cblock[data-region="AF"],
#reg-OC:checked ~ .tlayout .cblock[data-region="OC"] { display: block; }

/* Панель выбора страны следует за той же полосой: показывать в ней
   страны, которых нет на экране, значило бы вести читателя в пустоту. */
#reg-EU:checked ~ .tlayout .tpick__row:not([data-region-of=""]),
#reg-SA:checked ~ .tlayout .tpick__row:not([data-region-of=""]),
#reg-NA:checked ~ .tlayout .tpick__row:not([data-region-of=""]),
#reg-AS:checked ~ .tlayout .tpick__row:not([data-region-of=""]),
#reg-AF:checked ~ .tlayout .tpick__row:not([data-region-of=""]),
#reg-OC:checked ~ .tlayout .tpick__row:not([data-region-of=""]) { }

/* И кнопка «показать ещё страны» при выбранном регионе не нужна. */
#reg-EU:checked ~ .tlayout .cmore,
#reg-SA:checked ~ .tlayout .cmore,
#reg-NA:checked ~ .tlayout .cmore,
#reg-AS:checked ~ .tlayout .cmore,
#reg-AF:checked ~ .tlayout .cmore,
#reg-OC:checked ~ .tlayout .cmore { display: none; }

/* --------------------------------------------------------- три колонки */

.tlayout {
    display: grid;
    /* minmax(0, 1fr), а не 1fr: дорожка сетки по умолчанию не уже
       своего содержимого, и на узком экране колонка растягивалась до
       минимальной ширины таблицы — страница выезжала за край на
       десяток точек, а горизонтальной прокрутки у сайта нет. */
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-l);
    align-items: start;
}

@media (min-width: 1000px) {
    .tlayout { grid-template-columns: 230px minmax(0, 1fr); }
    .tside { display: none; }
}

@media (min-width: 1280px) {
    /* Третья колонка появляется только вместе с содержимым: пустая
       дорожка отнимала бы у середины двести пятьдесят точек. */
    .tlayout:has(.tside) { grid-template-columns: 230px minmax(0, 1fr) 250px; }
    .tside { display: block; }
}

.tmain { min-inline-size: 0; }
.tmain > .cblock:first-of-type { margin-block-start: 0; }

/* Боковые колонки едут вместе с читателем.

   Страница длинная: после третьей страны выбор страны и матчи дня
   остаются далеко вверху, и чтобы перейти к Аргентине, приходится
   прокручивать всё обратно. Закреплённые колонки решают это без единой
   новой кнопки.

   Закрепление включается только там, где есть место по высоте: на
   низком экране закреплённая колонка сама становится длиннее окна, и
   низ её недостижим. */
@media (min-width: 1000px) and (min-height: 700px) {
    .tpick,
    .tside {
        position: sticky;
        /* Под шапкой и полосой матчей. */
        inset-block-start: var(--space-m);
        /* Своя прокрутка — на случай, если содержимое всё же выше
           окна: список стран у футбола длинный. */
    }
}

.tpick__card {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-l);
    padding: var(--space-s) var(--space-m) var(--space-m);
}

.tpick__title {
    margin: 0 0 var(--space-2xs);
    font-size: var(--text-s);
    font-weight: 800;
    letter-spacing: 0.03em;
}

.tpick__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.tpick__row a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 0;
    border-block-start: 1px solid var(--border);
    text-decoration: none;
    color: var(--text);
    font-size: var(--text-s);
    min-inline-size: 0;
}

.tpick__row a:hover /* Название ужимается первым: рядом с ним стоит подпись «32 матча»,
   которая не переносится, и без этого правила карточка колонки
   распиралась длинным названием турнира — на узком экране страница
   выезжала за край. */
.tpick__name {
    color: var(--brand-red);
    min-inline-size: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tpick__name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tpick__n {
    margin-inline-start: auto;
    color: var(--text-faint);
    font-size: var(--text-xs);
    font-variant-numeric: tabular-nums;
    /* «32 матча» — это одна подпись, а не две строки: разорванная
       пополам, она читается как два числа подряд. Название турнира
       ужимается первым — оно длиннее и обрезается без потери смысла. */
    white-space: nowrap;
    flex: none;
}

.tpick__logo { inline-size: 20px; block-size: 20px; object-fit: contain; flex: none; }

.tpick__row--hidden { display: none; }
.tpick__toggle:checked ~ .tpick__more { display: none; }
.tpick__card:has(.tpick__toggle:checked) .tpick__row--hidden { display: block; }

.tpick__more {
    display: block;
    margin-block-start: var(--space-s);
    padding: 9px;
    text-align: center;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--text-muted);
    text-decoration: none;
    cursor: pointer;
}

.tpick__more:hover { border-color: var(--brand-red); color: var(--brand-red); }

.crest--flat .crow { border-radius: 0; border-inline: 0; border-block-start: 0; }
.crest--flat { gap: 0; }
.crest--flat li:first-child .crow { border-block-start: 1px solid var(--border); }

.tempty {
    padding: var(--space-l);
    text-align: center;
    color: var(--text-faint);
    font-size: var(--text-s);
}

/* ============================================== страница турнира */

.khead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-m);
    flex-wrap: wrap;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-l);
    padding: var(--space-m);
    margin-block-end: var(--space-m);
}

.khead__main {
    display: flex;
    align-items: center;
    gap: var(--space-m);
    min-inline-size: 0;
}

.khead__logo {
    inline-size: 64px;
    block-size: 64px;
    flex: none;
    object-fit: contain;
}

.khead__body { min-inline-size: 0; }

.khead__title {
    margin: 0;
    font-size: clamp(var(--text-l), 2.4vw, 1.75rem);
    font-weight: 800;
    letter-spacing: -0.02em;
}

/* Строка «Лига · Шотландия · Сезон 2026»: чем турнир является, где
   играется и за какой год — три вопроса, на которые страница обязана
   ответить до прокрутки. */
.khead__facts {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px var(--space-xs);
    margin: 6px 0 0;
    color: var(--text-muted);
    font-size: var(--text-s);
}

.khead__facts > * + *::before {
    content: "·";
    color: var(--text-faint);
    margin-inline-end: var(--space-xs);
}

.khead__country { display: inline-flex; align-items: center; gap: 6px; }

/* Ближайшие матчи и последние результаты — рядом, а не друг под другом:
   это два ответа на один вопрос «что тут происходит», и читать их
   удобнее вместе. */
/* Пара колонок собирается по числу карточек, а не задаётся жёстко.

   У турнира, который уже кончился, ближайших матчей нет, и «Последние
   результаты» оставались в левой половине — 375 точек из 781, — а
   правая стояла пустой. auto-fit убирает пустую дорожку, и одинокая
   карточка занимает всю ширину. */
.ksplit {
    display: grid;
    gap: var(--space-l);
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

.kteams {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2xs);
}

.kteam {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px 7px 8px;
    border: 1px solid var(--border);
    border-radius: 999px;
    text-decoration: none;
    color: inherit;
    font-size: var(--text-s);
    transition: border-color 0.12s ease;
}

.kteam:hover { border-color: var(--brand-red); color: var(--brand-red); }

/* ------------------------------------------------- сезоны турнира

   Подпись и ряд сезонов в одной строке, как в образце: заголовок
   отдельной строкой над двумя плашками занимал втрое больше места, чем
   сообщал.

   Плашки не ссылки и не притворяются ими: отдельных страниц у прошлых
   сезонов нет, а кнопка, которая никуда не ведёт, обманывает дважды —
   нажатием и видом. Текущий сезон отмечен, прочие названы. */
.kseasons {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-xs) var(--space-m);
}

.kseasons__label {
    margin: 0;
    font-size: var(--text-s);
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.kseasons__list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2xs);
    list-style: none;
    margin: 0;
    padding: 0;
}

.kseason {
    display: inline-flex;
    align-items: center;
    padding: 7px 14px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--bg-elevated);
    font-size: var(--text-s);
    font-variant-numeric: tabular-nums;
    color: var(--text-muted);
}

.kseason--on {
    border-color: var(--brand-red);
    color: var(--brand-red);
    font-weight: 700;
}

.chip--on {
    border-color: var(--brand-red);
    color: var(--brand-red);
    font-weight: 700;
}

/* ==================================================== каталог турниров

   Отвечает на другой вопрос, чем витрина таблиц: витрина показывает
   положение команд, каталог — что вообще есть. Кубки, у которых таблицы
   не бывает, женские турниры, турниры сборных.

   Отбор — на чистом CSS: скрытые строки остаются в разметке и видны
   поисковику, а скрипт нужен только поиску по названию. */

.lblock { margin-block-start: var(--space-l); }

.lrows {
    list-style: none;
    margin: var(--space-2xs) 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-2xs);
}

.lrow > a {
    display: flex;
    align-items: center;
    gap: var(--space-s);
    padding: 10px var(--space-m);
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-m, 10px);
    text-decoration: none;
    color: inherit;
    min-inline-size: 0;
    transition: border-color 0.12s ease;
}

.lrow > a:hover { border-color: var(--brand-red); }
.lrow > a:hover .lrow__name { color: var(--brand-red); }

/* Знак держит своё место и пустым: без него названия турниров без
   герба уезжают влево, и столбец идёт лесенкой. */
.lrow__mark {
    inline-size: 28px;
    block-size: 28px;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lrow__mark img { max-inline-size: 100%; max-block-size: 100%; object-fit: contain; }

.lrow__body {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-inline-size: 0;
}

.lrow__name {
    font-size: var(--text-s);
    font-weight: 600;
    min-inline-size: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Строка «Индия · T20 · Женщины»: чем турнир отличается от соседнего с
   похожим именем. Без неё «Vitality Blast» и «Vitality Blast» —
   мужской и женский — неразличимы. */
.lrow__meta {
    font-size: var(--text-2xs);
    color: var(--text-faint);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lrow__season {
    margin-inline-start: auto;
    font-size: var(--text-2xs);
    color: var(--text-faint);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Отбор по признаку турнира. Строка, не подходящая под выбранное,
   скрывается; страна, у которой не осталось ни одной строки, — тоже,
   иначе от неё остаётся один заголовок. */
#fac-national:checked ~ .tlayout .lrow:not([data-kind="national"]),
#fac-club:checked     ~ .tlayout .lrow:not([data-kind="club"]),
#fac-women:checked    ~ .tlayout .lrow:not([data-gender="w"]),
#fac-T20:checked      ~ .tlayout .lrow:not([data-format="T20"]),
#fac-ODI:checked      ~ .tlayout .lrow:not([data-format="ODI"]),
#fac-TEST:checked     ~ .tlayout .lrow:not([data-format="TEST"]),
#fac-HUNDRED_BALL:checked ~ .tlayout .lrow:not([data-format="HUNDRED_BALL"]),
#fac-FIRST_CLASS:checked  ~ .tlayout .lrow:not([data-format="FIRST_CLASS"]),
#fac-LIST_A:checked   ~ .tlayout .lrow:not([data-format="LIST_A"]) { display: none; }

#fac-national:checked ~ .tlayout .lblock:not(:has(.lrow[data-kind="national"])),
#fac-club:checked     ~ .tlayout .lblock:not(:has(.lrow[data-kind="club"])),
#fac-women:checked    ~ .tlayout .lblock:not(:has(.lrow[data-gender="w"])),
#fac-T20:checked      ~ .tlayout .lblock:not(:has(.lrow[data-format="T20"])),
#fac-ODI:checked      ~ .tlayout .lblock:not(:has(.lrow[data-format="ODI"])),
#fac-TEST:checked     ~ .tlayout .lblock:not(:has(.lrow[data-format="TEST"])),
#fac-HUNDRED_BALL:checked ~ .tlayout .lblock:not(:has(.lrow[data-format="HUNDRED_BALL"])),
#fac-FIRST_CLASS:checked  ~ .tlayout .lblock:not(:has(.lrow[data-format="FIRST_CLASS"])),
#fac-LIST_A:checked   ~ .tlayout .lblock:not(:has(.lrow[data-format="LIST_A"])) { display: none; }

/* Выбран признак — свёрнутые страны раскрываются: иначе отбор
   показывал бы только те восемь, что и так были на виду. */
.fbar__radio:not(#fac-all):checked ~ .tlayout .cblock--hidden { display: block; }
.fbar__radio:not(#fac-all):checked ~ .tlayout .cmore { display: none; }

/* Отмеченная вкладка полосы отбора. */
#fac-all:checked ~ .rbar [for="fac-all"],
#fac-national:checked ~ .rbar [for="fac-national"],
#fac-club:checked ~ .rbar [for="fac-club"],
#fac-women:checked ~ .rbar [for="fac-women"],
#fac-T20:checked ~ .rbar [for="fac-T20"],
#fac-ODI:checked ~ .rbar [for="fac-ODI"],
#fac-TEST:checked ~ .rbar [for="fac-TEST"],
#fac-HUNDRED_BALL:checked ~ .rbar [for="fac-HUNDRED_BALL"],
#fac-FIRST_CLASS:checked ~ .rbar [for="fac-FIRST_CLASS"],
#fac-LIST_A:checked ~ .rbar [for="fac-LIST_A"] {
    color: var(--brand-red);
    border-block-end-color: var(--brand-red);
    font-weight: 700;
}

/* ============================ витрина и каталог: второй проход по виду

   Страница читалась длинным техническим справочником: шесть с половиной
   тысяч точек высоты, мелкий кегль, пустая левая колонка после первого
   экрана. Правки не переделывают её заново — сокращают списки, держат
   навигацию на виду и дают содержимому больше места. */

/* ---------------------------------------- колонки шире, зазор теснее */

.tlayout { gap: var(--space-m); }

@media (min-width: 1000px) {
    .tlayout { grid-template-columns: 220px minmax(0, 1fr); }
}

@media (min-width: 1280px) {
    /* 220 + 250 при зазорах в 24 оставляют середине около 714 точек —
       столько, сколько нужно таблице из восьми столбцов, чтобы её не
       приходилось прокручивать вбок. */
    .tlayout:has(.tside) { grid-template-columns: 220px minmax(0, 1fr) 250px; }
}

/* ------------------------------- боковые колонки остаются на экране

   После первого экрана слева оставалось пустое место, а список стран
   уезжал вверх — до навигации приходилось прокручивать обратно.

   Колонка липкая, но своей прокрутки не имеет: полоса прокрутки
   внутри блока — это второй скролл на странице, и читатель не понимает,
   какой из них двигает. Высота у колонки та, какая нужна её
   содержимому; когда оно выше окна, колонка едет вместе со страницей. */
@media (min-width: 1000px) {
    .tpick,
    .tside {
        position: sticky;
        top: var(--space-s);
        align-self: start;
    }
}

.tside__note {
    margin: -2px 0 var(--space-2xs);
    font-size: var(--text-2xs);
    color: var(--text-faint);
}

/* ------------------------------------ сворачивание турниров у страны

   У Бразилии турниров восемь десятков. Списком подряд они дают
   страницу, по которой нельзя ничего найти, кроме прокрутки. Скрытые
   остаются в разметке — их видит поисковик, — и раскрываются нажатием
   без всякого скрипта. */

/* Состояние читается через :has, а не через соседство.

   Переключатель стоит рядом с кнопкой — иначе нажатие на неё переводит
   фокус вверх, и браузер прокручивает страницу к нему. А раскрывать
   надо то, что выше: селектор соседства «~» смотрит только вперёд, и
   тут он бесполезен. */
.crest__row--hidden { display: none; }

/* Раскрытие свёрнутых строк.

   Перечислены оба блока, где стоит переключатель: у витрины таблиц это
   .cblock, у расписания — .mcard. Прежде правило знало только про
   первый, и кнопка «показать ещё N матчей» в расписании не делала
   ничего: строки оставались скрытыми, а сама кнопка — на месте. */
.cblock:has(.crest__toggle:checked) .crest__row--hidden,
.mcard:has(.crest__toggle:checked) .crest__row--hidden { display: block; }

.cblock:has(.crest__toggle:checked) .crest__more,
.mcard:has(.crest__toggle:checked) .crest__more { display: none; }

.crest__more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-block-start: var(--space-2xs);
    padding: 8px 14px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--bg-elevated);
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
}

.crest__more:hover { border-color: var(--brand-red); color: var(--brand-red); }
.crest__chev { font-size: 1.1em; line-height: 1; }

/* --------------------------------------------- кегль крупнее на шаг

   Таблицы и строки читались мелко: двенадцать точек на числах, которые
   и есть содержание страницы. */

.mtable { font-size: 13px; }
.mtable thead th { font-size: var(--text-xs); }

.crow__name,
.lrow__name { font-size: 15px; }

.lrow__meta,
.crow__note { font-size: var(--text-xs); }

/* ------------------------------------------ карточки главных турниров

   Были высотой в 54 точки — плашка с текстом. Герб турнира требует
   места, и без него карточка ничем не отличается от строки списка. */

.ccard {
    padding: 12px 14px;
    min-block-size: 78px;
    gap: 12px;
}

.ccard__mark {
    inline-size: 44px;
    block-size: 44px;
}

.ccard__name { font-size: 15px; }
.ccard__country { font-size: var(--text-xs); }

.cgrid > .ccard { flex: 1 1 190px; min-inline-size: 190px; }

/* ------------------------------------------ страна свёрнута в строку

   Восемь раскрытых стран с таблицами давали страницу в пять тысяч
   точек. Первые три открыты, прочие сложены до заголовка со стрелкой.

   Свёрнутая страна остаётся в разметке целиком: поисковик видит её
   содержимое, а читатель раскрывает нажатием — скрипт для этого не
   нужен, и без него всё видно сразу. */

.cblock--folded {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-l);
    padding: 2px var(--space-m) 0;
    margin-block-start: var(--space-2xs);
}

.cblock--folded .cblock__head {
    margin-block: 0;
    padding-block: 14px;
    font-size: var(--text-m);
}

.cblock--folded > .mcard,
.cblock--folded > .crest,
.cblock--folded > .crest__more { display: none; }

.cblock__toggle:checked ~ .mcard,
.cblock__toggle:checked ~ .crest,
.cblock__toggle:checked ~ .crest__more { display: block; }

.cblock__toggle:checked ~ .cblock__head .cblock__open span { transform: rotate(180deg); }

.cblock__open {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 28px;
    block-size: 28px;
    margin-inline-start: var(--space-2xs);
    border-radius: 8px;
    color: var(--text-faint);
    cursor: pointer;
}

.cblock__open:hover { background: var(--hover-bg); color: var(--brand-red); }
.cblock__open span { transition: transform 0.15s ease; line-height: 1; }

/* У свёрнутой страны счётчик уходит вправо, к стрелке. */
.cblock--folded .cblock__count { margin-inline-start: auto; }

/* Строка каталога плотнее: было 66 точек на две строки текста с
   отступами по десять. Имя и подпись под ним умещаются в 46 — столько,
   сколько нужно, чтобы палец попадал, а список не растягивался на
   полтора экрана. */
.lrow > a {
    padding-block: 6px;
    padding-inline: var(--space-s);
    gap: var(--space-xs);
}

.lrow__mark { inline-size: 24px; block-size: 24px; }
.lrow__name { line-height: 1.25; }
.lrow__meta { line-height: 1.2; }

/* ================================= страница турнира: главный хаб лиги

   Была набором блоков: таблица, матчи, клубы, сезоны. Не хватало
   ощущения, что читатель попал именно в центр этой лиги, — и ответов на
   вопросы, которые задают до таблицы. */

.khead__logo {
    inline-size: 76px;
    block-size: 76px;
}

/* Метки вместо строки через точки: каждая отвечает на свой вопрос —
   что за турнир, где, за какой год, идёт ли он. */
.khead__facts > * + *::before { content: none; margin: 0; }

.ktag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--bg);
    font-size: var(--text-xs);
    color: var(--text-muted);
    white-space: nowrap;
}

.ktag--live {
    border-color: color-mix(in srgb, var(--brand-red) 40%, transparent);
    color: var(--brand-red);
    font-weight: 600;
}

/* -------------------------------------------------- матчи вкладками

   Двумя карточками рядом левая стояла полупустой, когда сезон кончился,
   а правая — вдвое длиннее. Переключатель на чистом CSS: оба списка
   лежат в разметке, поисковик видит их целиком. */

.ktabs { display: inline-flex; gap: 4px; }

.ktab {
    padding: 5px 12px;
    border-radius: 999px;
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
}

.ktab:hover { color: var(--text); }

.kpane { display: none; }
#km-next:checked ~ .kpane--next,
#km-past:checked ~ .kpane--past { display: block; }

#km-next:checked ~ .section-head [for="km-next"],
#km-past:checked ~ .section-head [for="km-past"] {
    background: var(--brand-red);
    color: #fff;
}

/* ------------------------------------------------------ сезон в цифрах */

.knums {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: 0;
}

.knum {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: var(--space-2xs) var(--space-s);
    border-inline-start: 1px solid var(--border);
    min-inline-size: 0;
}

.knum:first-child { border-inline-start: 0; padding-inline-start: 0; }

.knum__value {
    font-family: var(--font-mono);
    font-size: var(--text-xl);
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.knum__label {
    font-size: var(--text-2xs);
    color: var(--text-faint);
    line-height: 1.2;
}

@media (max-width: 700px) {
    .knum { border-inline-start: 0; border-block-start: 1px solid var(--border); padding-inline: 0; }
    .knum:first-child { border-block-start: 0; }
}

/* --------------------------------------------------------- о турнире */

.kfacts { margin: 0; }

.kfact {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-s);
    padding-block: 9px;
    border-block-start: 1px solid var(--border);
    font-size: var(--text-s);
}

.kfact:first-child { border-block-start: 0; }

/* Подпись — тем же кеглем, что в справках клуба, игрока и арены.
 *
 * Одна и та же по смыслу карточка на четырёх страницах была набрана
 * тремя разными размерами: «О команде» крупно, «О турнире» средне,
 * «Кратко о матче» мелко. */
.kfact dt {
    color: var(--text-faint);
    font-size: var(--text-xs);
}
.kfact dd {
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    text-align: end;
}

.kfact--accent { color: var(--brand-red); }

/* ------------------------------------------------------------ клубы

   Сеткой, а не капсулами в строку: у лиги их два десятка, и ряд капсул
   разной длины читается рваным краем. */

.kteams {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: var(--space-2xs);
}

.kteam {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-m, 10px);
    min-inline-size: 0;
}

.kteam__logo { inline-size: 28px; block-size: 28px; flex: none; object-fit: contain; }

.kteam__name {
    font-size: var(--text-s);
    font-weight: 600;
    min-inline-size: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kteam .crow__go { margin-inline-start: auto; }

/* Шапка турнира на лёгком градиенте.

   Тематический снимок арены здесь не годится: под ним сразу идёт
   таблица, и любой фон, заметный настолько, чтобы его увидеть, начинает
   мешать её читать. Градиент даёт шапке вес, не отнимая контраста у
   строк ниже. */
.khead {
    background:
        linear-gradient(180deg,
            color-mix(in srgb, var(--brand-red) 4%, var(--bg-elevated)) 0%,
            var(--bg-elevated) 70%);
}

/* ------------------------------------------- показатель числом и подписью

   Классы .stat стояли в разметке страницы игрока, а правил под них в
   стилях не было вовсе: два строчных элемента шли подряд, и выходило
   «21Матчи», «15В старте». */

.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: var(--space-2xs);
}

.stat {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: var(--space-2xs) 0;
    min-inline-size: 0;
}

.stat__value {
    font-size: var(--text-xl);
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.stat__label {
    font-size: var(--text-2xs);
    color: var(--text-faint);
    line-height: 1.2;
}

/* ==================================================== видеообзоры

   Ролики открываются у источника, а не встроенным проигрывателем:
   встроенный тянет чужие скрипты на каждую страницу матча и сообщает
   источнику, кто её смотрит. */

.vgrid {
    display: grid;
    /* Четыре карточки в ряд: при пороге в 210 точек в основную
       колонку с боковой рядом помещалось три, и четвёртая уезжала на
       вторую строку — блок читался как случайно собранный. */
    grid-template-columns: repeat(auto-fill, minmax(165px, 1fr));
    gap: var(--space-s);
}

.vcard {
    display: flex;
    flex-direction: column;
    gap: 8px;
    text-decoration: none;
    color: inherit;
    min-inline-size: 0;
}

.vcard__shot {
    position: relative;
    display: block;
    aspect-ratio: 16 / 9;
    border-radius: var(--radius-m, 10px);
    overflow: hidden;
    background: var(--bg-sunken);
}

.vcard__shot img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    transition: transform 0.2s ease;
}

.vcard:hover .vcard__shot img { transform: scale(1.04); }

/* Знак воспроизведения — на подложке: поверх светлого кадра белый
   треугольник теряется. */
.vcard__play {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 50%;
    transform: translate(-50%, -50%);
    inline-size: 42px;
    block-size: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgb(0 0 0 / 0.55);
    color: #fff;
    font-size: 15px;
    padding-inline-start: 3px;
}

.vcard__body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-inline-size: 0;
}

.vcard__cat {
    font-size: var(--text-2xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--brand-red);
}

.vcard__title {
    font-size: var(--text-s);
    font-weight: 600;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    /* Две строки под заголовок всегда, даже когда он в одну: иначе
       карточки в ряду разной высоты и подписи под ними не выстраиваются
       по одной линии. */
    min-block-size: 2.6em;
}

.vcard__src { font-size: var(--text-2xs); color: var(--text-faint); }

/* ------------------------------------------------ карьера и переходы

   Голов и передач у нас не было ни одного: страница игрока сводилась к
   списку матчей, по которому нельзя сказать, что он умеет. */

.mtable--career { font-size: var(--text-s); }
.mtable--career .mtable__pos { inline-size: 4.5em; }

/* На узком экране турнир и минуты уступают место главному — клубу,
   матчам, голам. */
@media (max-width: 700px) {
    .mtable__hide { display: none; }
}

.career__sub {
    margin: var(--space-m) 0 var(--space-2xs);
    font-size: var(--text-2xs);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-faint);
}

.tlist { list-style: none; margin: 0; padding: 0; }

.tline {
    display: flex;
    align-items: center;
    gap: var(--space-s);
    padding-block: 10px;
    border-block-start: 1px solid var(--border);
    font-size: var(--text-s);
}

.tline:first-child { border-block-start: 0; }
.tline__season { color: var(--text-faint); flex: none; inline-size: 4.5em; }
.tline__move { min-inline-size: 0; }
.tline__arrow { color: var(--text-faint); margin-inline: 4px; }
.tline__fee { margin-inline-start: auto; font-weight: 700; white-space: nowrap; }

/* Состав со статистикой: столбцы уже, чем столбец позиции, — их
   четыре, а не один, и таблица стоит в половине ширины страницы. */
.mtable--squad-stats .mtable__num {
    inline-size: 2.8em;
    font-size: var(--text-xs);
    text-align: end;
}

.mtable--squad-stats thead th.mtable__num {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ============================================================ матч-центр

   Страница расписания — первая точка входа портала: сюда приходят с
   запросом «матчи сегодня». Прежде она начиналась с годовой сетки
   календаря высотой в треть экрана, дальше шли турниры подряд, и
   единственным способом что-то найти была прокрутка.

   Теперь первый экран отвечает на три вопроса сразу: какой день, в
   каком состоянии матчи и какой вид спорта. Годовая сетка осталась,
   но под кнопкой — за ней приходят изредка. */

.mhead { margin-block-end: var(--space-m); }

.mhead__title {
    margin: 0;
    /* Заголовок раздела был вровень с названиями турниров: страница
       читалась как один сплошной список. */
    font-size: clamp(1.75rem, 1.35rem + 1.2vw, 2rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.15;
}

.mhead__sub {
    margin: var(--space-3xs) 0 0;
    font-size: var(--text-s);
    color: var(--text-muted);
}

/* ------------------------------------------------------ панель управления */

.mbar {
    display: grid;
    /* minmax(0, 1fr), а не auto: колонка грида по умолчанию не уже
       своего содержимого, и полоса с полем отбора и переходом по дням
       раздувала её до 389 точек при экране в 390 — страница уезжала
       вбок целиком. */
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-2xs);
    margin-block-end: var(--space-s);
}

.mbar__line {
    display: flex;
    min-inline-size: 0;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2xs);
}

/* Три панели одной высоты.

   Высота каждой складывалась из своих отступов и своего размера
   шрифта: переход по дням выходил на четыре точки выше вкладок, и
   полоса читалась как три съехавшие панели, а не как одна строка
   управления. */
.mbar__line > .daynav,
.mbar__line > .stbar,
.mbar__line > .mfind {
    block-size: 2.75rem;
}

/* Поле отбора уходит к правому краю: слева стоит то, чем пользуются
   все, справа — то, чем пользуются изредка. */
.mbar__line > .mfind { margin-inline-start: auto; }

/* Переход по дням: вчера — выбранный день — завтра. */
.daynav {
    display: flex;
    align-items: stretch;
    border: 1px solid var(--border);
    border-radius: var(--radius-m, 10px);
    background: var(--bg-elevated);
    overflow: hidden;
}

.daynav__step {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0 0.75rem;
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--text-muted);
    text-decoration: none;
    white-space: nowrap;
}

.daynav__step:hover { background: var(--bg-sunken); color: var(--text); }
.daynav__arrow { font-size: 1.1em; line-height: 1; }

.daynav__day {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2xs);
    padding: 0 var(--space-s);
    border-inline: 1px solid var(--border);
    font-size: var(--text-s);
    font-weight: 700;
    white-space: nowrap;
}

.daynav__mark {
    padding: 2px 7px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--brand-red) 10%, transparent);
    color: var(--brand-red);
    font-size: var(--text-2xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Вкладки состояний — ссылки: отбор идёт на стороне базы, и ссылку
   можно передать.

   Имя класса своё: «stabs» уже носит полоса видов спорта на витрине,
   и оттуда прилетал отступ снизу в две строки — вкладки вставали выше
   соседних панелей. */
.stbar {
    display: flex;
    align-items: stretch;
    border: 1px solid var(--border);
    border-radius: var(--radius-m, 10px);
    background: var(--bg-elevated);
    overflow: hidden;
}

.stbar__tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 0.85rem;
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--text-muted);
    text-decoration: none;
    white-space: nowrap;
}

.stbar__tab + .stbar__tab { border-inline-start: 1px solid var(--border); }
.stbar__tab:hover { background: var(--bg-sunken); color: var(--text); }

.stbar__tab.is-on {
    background: color-mix(in srgb, var(--brand-red) 8%, transparent);
    color: var(--brand-red);
}

.stbar__num {
    font-size: var(--text-2xs);
    font-weight: 700;
    color: var(--text-faint);
    font-variant-numeric: tabular-nums;
}

.stbar__tab.is-on .stbar__num { color: inherit; }

.mfind { position: relative; flex: 0 1 15rem; min-inline-size: 9rem; }

.mfind__input {
    inline-size: 100%;
    block-size: 100%;
    padding: 0 var(--space-xs);
    border: 1px solid var(--border);
    border-radius: var(--radius-m, 10px);
    background: var(--bg-elevated);
    color: inherit;
    font: inherit;
    font-size: var(--text-xs);
}

.mfind__input:focus-visible {
    outline: 2px solid var(--brand-red);
    outline-offset: 1px;
}

/* ------------------------------------------------ переключатель видов */

.schip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0.42rem 0.7rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--bg-elevated);
    color: var(--text-muted);
    font-size: var(--text-xs);
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
}

.schip:hover { border-color: var(--text-faint); color: var(--text); }

.schip.is-on {
    border-color: var(--brand-red);
    background: color-mix(in srgb, var(--brand-red) 8%, transparent);
    color: var(--brand-red);
}

.schip__icon {
    inline-size: 15px;
    block-size: 15px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0.85;
}

.schip__num {
    font-size: var(--text-2xs);
    font-weight: 700;
    color: var(--text-faint);
    font-variant-numeric: tabular-nums;
}

.schip.is-on .schip__num { color: inherit; }

/* Остальные виды прячутся за кнопкой: строка чипсов в две полосы
   съедает то самое место, ради которого убирали календарь. */
.schip__rest { display: none; gap: var(--space-2xs); flex-wrap: wrap; }
.mbar__line:has(.schip__toggle:checked) .schip__rest { display: contents; }
.mbar__line:has(.schip__toggle:checked) .schip--more { display: none; }
.schip__chev { font-size: 1.05em; line-height: 1; }

/* --------------------------------------------------- полоса ближних дней */

.wcal {
    margin-block-end: var(--space-m);
    padding: var(--space-s);
    border: 1px solid var(--border);
    border-radius: var(--radius-l, 12px);
    background: var(--bg-elevated);
}

.wcal__head {
    display: flex;
    align-items: center;
    gap: var(--space-s);
    margin-block-end: var(--space-2xs);
}

.wcal__title {
    margin: 0;
    font-size: var(--text-xs);
    font-weight: 700;
    color: var(--text-muted);
}

.wcal__open {
    margin-inline-start: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0.35rem 0.7rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-m, 10px);
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
}

.wcal__open:hover { border-color: var(--brand-red); color: var(--brand-red); }

.wcal__full { display: none; margin-block-start: var(--space-s); }
.wcal:has(.wcal__toggle:checked) .wcal__full { display: block; }
.wcal:has(.wcal__toggle:checked) .wcal__open { border-color: var(--brand-red); color: var(--brand-red); }

.wcal__full .calendar {
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
}

/* Заголовок у раскрытой сетки свой, и он повторял заголовок блока
   слово в слово. */
.wcal__full .calendar__title { display: none; }
.wcal__full .calendar__head { justify-content: flex-end; }

.wdays {
    display: grid;
    grid-auto-flow: column;
    /* Нижняя граница колонки не даёт полосе сжаться на телефоне: там
       тринадцать дней втискивались в ширину экрана, и от «25 авг»
       оставалось «2…». Не поместившиеся уезжают в прокрутку. */
    grid-auto-columns: minmax(3.6rem, 1fr);
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
    /* На узком экране полоса прокручивается сама, а не тянет за собой
       страницу. */
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
}

.wdays__item { min-inline-size: 3.4rem; }

.wday {
    display: grid;
    justify-items: center;
    gap: 3px;
    padding: 0.5rem 0.25rem 0.45rem;
    border: 1px solid transparent;
    border-radius: var(--radius-m, 10px);
    text-decoration: none;
    color: inherit;
}

.wday:hover { background: var(--bg-sunken); }

.wday__wd {
    font-size: var(--text-2xs);
    font-weight: 600;
    color: var(--text-faint);
    text-transform: capitalize;
}

.wday__date {
    font-size: var(--text-xs);
    font-weight: 700;
    white-space: nowrap;
}

.wday__level {
    inline-size: 100%;
    block-size: 4px;
    border-radius: 999px;
    background: var(--border);
}

.wday__num {
    font-size: var(--text-2xs);
    color: var(--text-faint);
    font-variant-numeric: tabular-nums;
}

/* Насыщенность дня — та же шкала, что в годовой сетке: светлее —
   меньше матчей. */
.wday__level--l0 { background: var(--calendar-l0); }
.wday__level--l1 { background: var(--calendar-l1); }
.wday__level--l2 { background: var(--calendar-l2); }
.wday__level--l3 { background: var(--calendar-l3); }
.wday__level--l4 { background: var(--calendar-l4); }

.wday.is-selected {
    border-color: var(--brand-red);
    background: color-mix(in srgb, var(--brand-red) 6%, transparent);
}

.wday.is-selected .wday__date { color: var(--brand-red); }
.wday.is-today:not(.is-selected) .wday__date { text-decoration: underline; text-underline-offset: 3px; }

/* -------------------------------------------- главные турниры дня лентой */

.tops { margin-block-end: var(--space-m); }

.tops__title {
    margin: 0 0 var(--space-2xs);
    font-size: var(--text-xs);
    font-weight: 700;
    color: var(--text-muted);
}

.tops__list {
    display: flex;
    gap: var(--space-2xs);
    margin: 0;
    padding: 0 0 var(--space-3xs);
    list-style: none;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
}

/* Сжимается не карточка, а строка списка: перечень прокручивается,
   а не ужимает названия до «Товар…». */
.tops__list > li { flex: none; }

.tops__item {
    display: flex;
    align-items: center;
    gap: var(--space-2xs);
    /* Лента прокручивается, а не ужимается: сжатые карточки обрезали
       название до «Товар…», и лента переставала называть турниры. */
    flex: none;
    padding: 0.5rem 0.7rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-m, 10px);
    background: var(--bg-elevated);
    text-decoration: none;
    color: inherit;
    white-space: nowrap;
}

.tops__item:hover { border-color: var(--brand-red); }

.tops__logo {
    inline-size: 26px;
    block-size: 26px;
    object-fit: contain;
    flex: none;
}

.tops__logo--blank { border-radius: 50%; background: var(--bg-sunken); }

.tops__body { display: grid; gap: 1px; min-inline-size: 0; }

.tops__name {
    font-size: var(--text-xs);
    font-weight: 700;
    max-inline-size: 13rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tops__num { font-size: var(--text-2xs); color: var(--text-faint); }

/* ============================== расписание, разложенное по турнирам

   Матчи шли списком подряд и вперемешку: «Премьер-лига», «товарищеский
   матч до двадцати лет», «Серия А» — одна за другой. Читатель ищет свой
   турнир, а страница выходила в двенадцать тысяч точек высотой. */

.mday { margin-block-end: var(--space-l); }

.mday__title {
    margin: 0 0 var(--space-s);
    font-size: var(--text-l);
    font-weight: 800;
    letter-spacing: -0.01em;
}

.mday__today {
    margin-inline-start: 8px;
    padding: 3px 9px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--brand-red) 10%, transparent);
    color: var(--brand-red);
    font-size: var(--text-2xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    vertical-align: middle;
}

.lgblock {
    margin-block-end: var(--space-s);
    border: 1px solid var(--border);
    border-radius: var(--radius-l, 12px);
    background: var(--bg-elevated);
    overflow: hidden;
}

.lgblock__head {
    display: flex;
    align-items: center;
    gap: var(--space-2xs);
    margin: 0;
    padding: 0.6rem var(--space-s);
    border-block-end: 1px solid var(--border);
    background: var(--bg-sunken);
}

.lgblock__logo {
    inline-size: 20px;
    block-size: 20px;
    object-fit: contain;
    flex: none;
}

/* Название турнира прописными в шестнадцать точек занимало полстроки и
   спорило с заголовком страницы. Обычный регистр в том же размере
   читается быстрее — а отличает блок от блока не регистр, а полоса
   подложки. */
.lgblock__name {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    min-inline-size: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lgblock__sport {
    padding: 2px 7px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--text-faint) 12%, transparent);
    font-size: var(--text-2xs);
    font-weight: 600;
    color: var(--text-muted);
    text-transform: lowercase;
    white-space: nowrap;
}

.lgblock__count {
    font-size: var(--text-2xs);
    font-weight: 600;
    color: var(--text-faint);
    font-variant-numeric: tabular-nums;
}

.lgblock__more {
    margin-inline-start: auto;
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--text-muted);
    text-decoration: none;
    white-space: nowrap;
}

.lgblock__more:hover { color: var(--brand-red); }

.lgblock--live .lgblock__head {
    background: color-mix(in srgb, var(--brand-red) 7%, transparent);
    border-block-end-color: color-mix(in srgb, var(--brand-red) 22%, var(--border));
}

.lgblock--live .lgblock__name { color: var(--brand-red); }

/* ---------------------------------------- таблица идущих матчей */

/* Таблица, а не сетка из отдельных строк.

   В сетке колонки договариваются о ширине каждая сама с собой: у
   баскетбола счёт «92 : 106», у футбола «1 : 0», у крикета
   «206/7 : 503/9d», — и середина строки гуляла от матча к матчу. У
   таблицы ширины общие, поэтому счета стоят столбцом, а команды
   прижаты к нему с двух сторон. */
.ltab {
    inline-size: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

/* Ширины колонок идущих матчей.

   Названия команд обрезались до «Сомерсет (же…»: вид спорта, метка
   LIVE и турнир вместе съедали половину строки. Команды — главное в
   строке, поэтому вид и турнир ужаты, а лишнее уходит многоточием у
   них, а не у названий. */
.ltab__c-sport { inline-size: 6.4rem; }
.ltab__c-live { inline-size: 4rem; }
.ltab__c-comp { inline-size: 15%; }
.ltab__c-score { inline-size: 6.4rem; }

.ltab td {
    padding: 0.5rem var(--space-2xs);
    border-block-start: 1px solid var(--border);
    vertical-align: middle;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ltab tbody tr:first-child td { border-block-start: 0; }
.ltab__row { cursor: pointer; }
.ltab__row:hover { background: var(--bg-sunken); }
.ltab__sport { padding-inline-start: var(--space-s); }

.ltab__comp {
    font-size: var(--text-xs);
    color: var(--text-muted);
}

/* Название и герб — одной строкой внутри ячейки.

   Ячейка таблицы выравнивает содержимое по своей линии, и герб с
   названием вставали друг под другом. Обёртка держит их рядом и
   позволяет прижать пару к нужному краю. */
.ltab__pair {
    display: flex;
    align-items: center;
    gap: 6px;
    min-inline-size: 0;
}

/* Хозяева прижаты к счёту справа, гости — слева, гербы по краям: пара
   читается как одна запись, а не как два края строки. */
.ltab__team--home .ltab__pair { flex-direction: row-reverse; }
.ltab__team { padding-inline: var(--space-2xs); }

.ltab__name {
    font-size: var(--text-s);
    font-weight: 600;
    min-inline-size: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ltab__score {
    text-align: center;
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: var(--text-m);
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
}

.ltab__score a { color: var(--brand-red); text-decoration: none; }

/* Крикетный счёт вчетверо длиннее футбольного: «206/7 : 503/9d»
   против «1 : 0». Уменьшается он один — соседние строки остаются в
   своём размере. */
.ltab__score--s { font-size: var(--text-s); }
.ltab__score--xs { font-size: var(--text-xs); letter-spacing: -0.01em; }

.ltab__score .mrow__sep { margin-inline: 0.3em; }

/* Значок вида спорта. */
.sbadge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    max-inline-size: 100%;
    padding: 2px 7px;
    /* Закругление то же, что у метки «LIVE» рядом: два соседних
       ярлыка с разной геометрией читаются как из разных наборов. */
    border-radius: var(--radius-s);
    background: color-mix(in srgb, var(--text-faint) 12%, transparent);
    font-size: var(--text-2xs);
    font-weight: 600;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sbadge__icon {
    inline-size: 13px;
    block-size: 13px;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

@media (max-width: 899px) {
    /* На телефоне таблица разворачивается в две строки: сверху
       откуда матч, снизу — сам матч. Шесть колонок в 390 точках
       оставляли на название команды полтора сантиметра. */
    .ltab, .ltab tbody, .ltab__row, .ltab td { display: block; }
    .ltab colgroup { display: none; }

    .ltab__row {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto minmax(0, 1fr);
        grid-template-areas:
            "live comp comp comp"
            "sport home score away";
        gap: 4px var(--space-2xs);
        align-items: center;
        padding: var(--space-2xs) var(--space-xs);
        border-block-start: 1px solid var(--border);
    }

    .ltab tbody tr:first-child { border-block-start: 0; }
    .ltab td { padding: 0; border: 0; }
    .ltab__sport { grid-area: sport; padding-inline-start: 0; }
    .ltab__live { grid-area: live; }
    .ltab__comp { grid-area: comp; text-align: end; }
    .ltab__team--home { grid-area: home; }
    .ltab__score { grid-area: score; }
    .ltab__team:not(.ltab__team--home) { grid-area: away; }
    .ltab__sport .sbadge { padding-inline: 5px; font-size: 10px; }
}

/* ------------------------------------------------------- строка матча */

.mrows { margin: 0; padding: 0; list-style: none; }
.mrows > li + li .mrow { border-block-start: 1px solid var(--border); }

/* Единая сетка на всё расписание: время, хозяева, счёт, гости.

   Прежде команды стояли по краям строки, а счёт посередине — чтобы
   сопоставить пару, взгляд шёл через всю ширину страницы, и у каждого
   турнира колонки вставали по-своему, насколько позволяли длины
   названий. */
.mrow {
    display: grid;
    grid-template-columns: 3.6rem minmax(0, 1fr) auto minmax(0, 1fr);
    /* Области названы и здесь, при полной ширине: узкие раскладки
       переопределяют их вместе с колонками, и если широкой раскладке
       имён не дать, она подхватит чужие — команду хозяев прижимало в
       колонку времени шириной в три знака. */
    grid-template-areas: "when home score away";
    align-items: center;
    gap: var(--space-2xs);
    /* Строка матча в макете — полсотни точек высотой.
       Прежние три с небольшим рема давали сорок восемь, и страница
       читалась так, будто масштаб браузера убавили до трёх четвертей. */
    min-block-size: 3.25rem;
    padding: 0.6rem var(--space-s);
    text-decoration: none;
    color: inherit;
    font-size: var(--text-s);
}

.mrow:hover { background: var(--bg-sunken); }

/* В блоке идущих матчей и в общем списке прочих турниров названию
   лиги нужна своя колонка: без него непонятно, где играют, а с узкой
   колонкой от него остаётся «Премьер-див…». */
.mrow--wide {
    grid-template-columns: 3.4rem minmax(0, 11rem) minmax(0, 1fr) auto minmax(0, 1fr);
    grid-template-areas: "when comp home score away";
}

/* Строка с турниром складывается по ширине своего блока, а не экрана.

   Тот же список стоит и во всю ширину страницы, и в колонке вдвое
   уже: на широком экране в узкой колонке пять столбцов не помещались,
   и от «Реал Мадрид» оставалась одна буква. Меряем блок, а не окно. */
.mrows { container-type: inline-size; }

@container (max-width: 40rem) {
    /* Селектор нарочно тяжелее обычного: у карточек витрины есть своё
       правило на четыре колонки, и оно перебивало этот блок — строка
       складывалась в две, но колонки оставались от прежней раскладки. */
    .mrows .mrow.mrow--wide {
        /* Средняя колонка со счётом ограничена сверху намеренно.
           Название турнира стоит над двумя колонками сразу, и, будь
           середина по содержимому, оно растягивало бы её под себя:
           счёт получал сто восемьдесят точек, а команде хозяев
           оставалось сорок. */
        grid-template-columns: minmax(0, 1fr) minmax(2.5rem, 5rem) minmax(0, 1fr);
        grid-template-areas:
            "when comp comp"
            "home score away";
        row-gap: 2px;
    }

    .mrow--wide .mrow__when { grid-area: when; }
    /* Турнир занимает две колонки сразу, и без запрета на собственную
       ширину он раздувал среднюю: команде хозяев оставалась одна буква
       с точками, а гостям — вся строка. */
    .mrow--wide .mrow__comp {
        grid-area: comp;
        text-align: end;
        min-inline-size: 0;
    }
    .mrow--wide .mrow__side--home { grid-area: home; }
    .mrow--wide .mrow__score { grid-area: score; }
    .mrow--wide .mrow__side--away { grid-area: away; }
}

.mrow__when {
    font-size: var(--text-xs);
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.mrow__live {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 6px;
    border-radius: var(--radius-s, 6px);
    background: color-mix(in srgb, var(--brand-red) 12%, transparent);
    color: var(--brand-red);
    font-size: var(--text-2xs);
    font-weight: 700;
    letter-spacing: 0.02em;
}

.mrow__comp {
    font-size: var(--text-xs);
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mrow__side {
    display: flex;
    align-items: center;
    gap: var(--space-2xs);
    min-inline-size: 0;
}

/* Хозяева прижаты к счёту справа, гости — слева, гербы по краям.

   Пара читается как одна запись, а не как два края строки, и взгляд
   не идёт через всю ширину страницы, чтобы понять, кто с кем. */
.mrow__side--home { flex-direction: row-reverse; text-align: end; }

.mrow__team {
    font-size: var(--text-s);
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Победитель выделяется весом, а не цветом: цветом кодируется
   состояние матча, и смешивать эти два значения нельзя. */
.mrow__side.is-winner .mrow__team { font-weight: 800; }
.mrow__side.is-loser .mrow__team { color: var(--text-muted); }

.mrow__score {
    display: inline-flex;
    align-items: center;
    gap: 0.3em;
    min-inline-size: 3.4rem;
    justify-content: center;
    font-family: var(--font-mono);
    font-size: var(--text-m);
    font-weight: 700;
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.mrow__score--pending { font-size: var(--text-s); font-weight: 400; color: var(--text-faint); }
.mrow__sep { font-style: normal; color: var(--text-faint); font-weight: 400; }

.mrow--live .mrow__score { color: var(--brand-red); }

.emblem--s { inline-size: 20px; block-size: 20px; flex: none; }

/* Свёрнутые матчи остаются в разметке: поисковик видит расписание
   целиком, а читатель — восемь строк вместо тридцати. */
.mrows__hidden { display: none; }
.lgblock:has(.mrows__toggle:checked) .mrows__hidden { display: block; }
.lgblock:has(.mrows__toggle:checked) .mrows__more { display: none; }

.mrows__more {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0.55rem;
    border-block-start: 1px solid var(--border);
    background: var(--bg-sunken);
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
}

.mrows__more:hover { color: var(--brand-red); }
.mrows__chev { font-size: 1.1em; line-height: 1; }

/* На время отбора свёрнутые матчи раскрываются: иначе найденное
   лежало бы под кнопкой «показать ещё». */
.is-filtering .mrows__hidden { display: block; }
.is-filtering .mrows__more { display: none; }
.is-filtering .tops,
.is-filtering .wcal { display: none; }

/* Разбивка на страницы при отборе обманывает: она считает весь день,
   а на странице осталось три матча из полутора сотен. */
.is-filtering .paging { display: none; }

.mempty {
    padding: var(--space-m);
    border: 1px dashed var(--border);
    border-radius: var(--radius-l, 12px);
    text-align: center;
    color: var(--text-muted);
}

/* --------------------------------------------------- боковая колонка */

/* Блоки колонки — карточки: сводка дня, переход по видам, крупные
   турниры и выбор даты — четыре разных разговора, а не продолжение
   один другого. */
.mside .aside-block,
.prlayout__side .aside-block {
    border: 1px solid var(--border);
    border-radius: var(--radius-l, 12px);
    padding: var(--space-s) var(--space-m);
    background: var(--bg-elevated);
}

.mside .aside-block + .aside-block { margin-block-start: 0; }

.aside-block__title {
    margin: 0 0 var(--space-2xs);
    font-size: 0.9375rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.dsum__total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-2xs);
    margin: 0 0 var(--space-2xs);
    padding-block-end: var(--space-2xs);
    border-block-end: 1px solid var(--border);
}

.dsum__label { font-size: var(--text-xs); color: var(--text-muted); }

.dsum__num {
    font-family: var(--font-mono);
    font-size: var(--text-2xl);
    font-weight: 800;
    letter-spacing: -0.04em;
    font-variant-numeric: tabular-nums;
}

.dsum__list { margin: 0; padding: 0; list-style: none; }

.dsum__row {
    display: flex;
    align-items: center;
    gap: var(--space-2xs);
    padding: 0.4rem 0;
    text-decoration: none;
    color: inherit;
    font-size: var(--text-s);
}

.dsum__row:hover .dsum__name { color: var(--brand-red); }
.dsum__row.is-on .dsum__name { font-weight: 700; }

.dsum__icon {
    inline-size: 17px;
    block-size: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
    color: var(--text-faint);
    flex: none;
}

.dsum__name { min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.dsum__count {
    margin-inline-start: auto;
    font-size: var(--text-xs);
    font-weight: 700;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

.dsum__all { margin-block-start: var(--space-2xs); inline-size: 100%; justify-content: center; }

.jumps { margin: 0; padding: 0; list-style: none; }

.jumps__row {
    display: flex;
    align-items: center;
    gap: var(--space-2xs);
    padding: 0.5rem 0;
    border-block-end: 1px solid var(--border);
    text-decoration: none;
    color: inherit;
    font-size: var(--text-s);
}

.jumps li:last-child .jumps__row { border-block-end: 0; }
.jumps__row:hover .jumps__name { color: var(--brand-red); }
.jumps__row--plain { border-block-end: 0; margin-block-start: var(--space-2xs); }

.jumps__icon {
    inline-size: 17px;
    block-size: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
    color: var(--text-faint);
    flex: none;
}

.jumps__name {
    min-inline-size: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
}

.jumps__note { font-size: var(--text-2xs); color: var(--text-faint); white-space: nowrap; }

.jumps__count {
    margin-inline-start: auto;
    font-size: var(--text-xs);
    font-weight: 700;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

.jumps__chev { color: var(--text-faint); }
.jumps__count + .jumps__chev { margin-inline-start: 0; }
.jumps__name + .jumps__chev, .jumps__note + .jumps__chev { margin-inline-start: auto; }

.dpick { display: grid; gap: var(--space-2xs); }
.dpick__label { font-size: var(--text-xs); color: var(--text-muted); }

.dpick__input {
    inline-size: 100%;
    padding: 0.5rem var(--space-2xs);
    border: 1px solid var(--border);
    border-radius: var(--radius-m, 10px);
    background: var(--bg-elevated);
    color: inherit;
    font: inherit;
    font-size: var(--text-s);
}

.dpick__go { inline-size: 100%; justify-content: center; }

/* ------------------------------------------------------------ узкий экран */

@media (max-width: 899px) {
    /* Панель складывается в столбец: три группы в одну строку на
       телефоне ужимаются до нечитаемого. */
    .mbar__line { gap: var(--space-3xs); }
    .daynav, .stbar { inline-size: 100%; overflow-x: auto; scrollbar-width: none; }
    .daynav__step { padding-inline: 0.6rem; }

    /* Дата занимает середину и ужимается первой: «Завтра ›» уезжало
       за край экрана, и следующий день переставал открываться. */
    .daynav__day {
        flex: 1;
        justify-content: center;
        min-inline-size: 0;
        padding-inline: var(--space-2xs);
        font-size: var(--text-xs);
        overflow: hidden;
    }
    .stbar { overflow-x: auto; scrollbar-width: thin; }
    .stbar__tab { flex: 1 0 auto; justify-content: center; }
    .mbar__line > .mfind { margin-inline-start: 0; flex: 1 0 100%; }

    /* На телефоне название турнира съедает всю строку, и на счёт
       остаётся полтора сантиметра: колонка времени уходит под
       команды. */
    .mrow {
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
        grid-template-areas:
            "when when when"
            "home score away";
        row-gap: 2px;
        padding-inline: var(--space-xs);
    }

    .mrow--wide {
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
        grid-template-areas:
            "when comp comp"
            "home score away";
    }

    .mrow__when { grid-area: when; }
    .mrow__comp { grid-area: comp; text-align: end; }
    .mrow__side--home { grid-area: home; }
    .mrow__score { grid-area: score; }
    .mrow__side--away { grid-area: away; }
}

/* На узком экране слово «сегодня» и числа на вкладках вытесняют за
   край то, ради чего полоса и стоит: переход на завтра и вкладку
   «Завершённые». Дата и так сегодняшняя, а число матчей видно на
   выбранной вкладке. */
@media (max-width: 560px) {
    .daynav__mark { display: none; }
    .stbar__tab:not(.is-on) .stbar__num { display: none; }
    .stbar__tab { padding-inline: 0.7rem; }
}

/* ------------------------------------------------------------- поиск */

/* Находки по разделам.

   Плоским списком они были неразличимы: по запросу «реал» шесть строк
   «команда Реал» подряд, и выбрать среди них не по чему. Герб слева и
   уточнение под названием отвечают на вопрос «который из них». */
.sgroups {
    display: grid;
    gap: var(--space-l);
}

/* Разделы идут один под другим, а не в два столбца.

   Двумя столбцами выдача читалась как две несвязанные страницы: слева
   один клуб, справа восемь игроков, и порядок между ними терялся — по
   какому признаку «Ронн» важнее «Роналду», понять было нельзя. Порядок
   разделов сам по себе ответ: сначала клубы, потом игроки, дальше
   турниры и арены. Ширину держит ограничение по строке — читать
   находку в тысячу точек шириной невозможно. */
.sgroups { max-inline-size: 62rem; }

.sgroup__title {
    margin: 0 0 var(--space-2xs);
    font-size: var(--text-xs);
    font-weight: 700;
    color: var(--text-3);
    padding-block-end: var(--space-3xs);
    border-block-end: 1px solid var(--border-1);
}

.sgroup__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.sres {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-xs);
    padding-block: var(--space-2xs);
    text-decoration: none;
    color: inherit;
    border-block-end: 1px solid var(--border-1);
}

.sres:hover .sres__title {
    color: var(--accent);
}

.sres__pic {
    inline-size: 28px;
    block-size: 28px;
    object-fit: contain;
}

/* Пустое место вместо недостающего герба: без него названия встают на
   разных отступах и столбец рассыпается. */
.sres__pic--none {
    border-radius: 50%;
    background: var(--surface-3, rgba(128, 128, 128, 0.14));
}

/* Заглушка с первой буквой названия: серый кружок читался как
   незагрузившаяся картинка, а буква сразу говорит, чья это строка. */
.sres__pic--letter {
    border-radius: 50%;
    line-height: 28px;
}

.sres__body {
    display: grid;
    min-width: 0;
}

.sres__title {
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sres__note,
.sres__lead {
    font-size: var(--text-xs);
    color: var(--text-3);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sres__date {
    font-size: var(--text-xs);
    color: var(--text-faint);
    white-space: nowrap;
}

.searchbox__hint {
    margin: var(--space-2xs) 0 0;
    font-size: var(--text-s);
    color: var(--text-3);
}

.sgroup--popular {
    margin-block-start: var(--space-l);
}

/* --------------------------------------------------- каталог клубов */

/* Клуб строкой, а не карточкой.

   Карточка занимала сотню точек ради флага, названия и двух чисел, и
   каталог футбола выходил в двадцать три тысячи точек высотой. Строка
   в тридцать точек показывает то же самое, а в ряд их встаёт четыре
   вместо трёх. */
.tcat__rows {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1px var(--space-m);
}

.tcat__row a {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-2xs);
    padding-block: var(--space-3xs);
    text-decoration: none;
    color: inherit;
    font-size: var(--text-s);
}

.tcat__row a:hover .tcat__name {
    color: var(--accent);
}

.tcat__emblem {
    inline-size: 22px;
    block-size: 22px;
    object-fit: contain;
}

.tcat__emblem--none {
    display: block;
    border-radius: 50%;
    background: var(--surface-3, rgba(128, 128, 128, 0.14));
}

.tcat__name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tcat__pts {
    font-size: var(--text-xs);
    color: var(--text-faint);
    white-space: nowrap;
}

/* Свёрнутый турнир прячет строки, а не только их часть. */
.tcat.cblock--folded .tcat__rows { display: none; }
.tcat .cblock__toggle:checked ~ .tcat__rows { display: grid; }
/* На время поиска свёрнутое раскрывается: найденный клуб не должен
   оставаться под кнопкой «показать ещё». */
.tcat.cblock--seek .tcat__rows { display: grid; }

/* Полоса с одним полем поиска.

   У полосы фильтров поле стоит справа от вкладок и растягивается по
   остатку строки. Без вкладок остаток — это вся строка, и поле в
   тысячу точек шириной с подписью у правого края выглядело обломком
   вёрстки. */
.rbar--plain {
    justify-content: flex-end;
    border: 0;
    background: transparent;
    padding-inline: 0;
}

.rbar--plain .rsearch {
    flex: 0 1 320px;
}

/* ------------------------------------------- боковая колонка клуба */

.tcomps {
    list-style: none;
    margin: 0;
    padding: 0;
}

.tcomps a {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: baseline;
    gap: var(--space-2xs);
    padding-block: var(--space-2xs);
    border-block-end: 1px solid var(--border-1);
    text-decoration: none;
    color: inherit;
    font-size: var(--text-s);
}

.tcomps a:hover .tcomps__name { color: var(--accent); }

.tcomps__name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tcomps__season,
.tcomps__n {
    font-size: var(--text-xs);
    color: var(--text-faint);
}

/* Стадион карточкой. В шапке клуба он стоит строкой мелким шрифтом
   среди прочих сведений — а вместимость и город спрашивают чаще, чем
   год основания. */
.vcardlet__name {
    font-weight: 600;
    margin-block-end: var(--space-2xs);
}

.vcardlet__rows {
    margin: 0;
    display: grid;
    gap: var(--space-3xs);
    font-size: var(--text-s);
}

.vcardlet__rows > div {
    display: flex;
    justify-content: space-between;
    gap: var(--space-s);
}

.vcardlet__rows dt {
    color: var(--text-3);
}

.vcardlet__rows dd {
    margin: 0;
}

/* Вид спорта в заголовке блока общего расписания.

   «Товарищеский матч» называется одинаково у футбола, хоккея и
   гандбола: без пометки три разных турнира читаются как один. */
.lgblock__sport {
    font-size: var(--text-2xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-faint);
    padding-inline: var(--space-2xs);
    border-inline-start: 1px solid var(--border);
}

/* Блок идущих матчей наверху расписания.

   Красная точка в заголовке — тот же знак, что и в строке матча, и он
   же отличает блок от соседних заголовков турниров. */
.lgblock--live .lgblock__head {
    color: var(--live, #c62828);
}

.lgblock--live .lgblock__count {
    color: inherit;
}

/* Плеер поверх страницы.

   В самой карточке он был бы размером с обложку — двести с небольшим
   точек по ширине, — а обзор матча смотрят, а не разглядывают. */
.vmodal {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: grid;
    place-items: center;
    padding: clamp(var(--space-s), 4vw, var(--space-2xl));
    background: rgb(0 0 0 / 0.82);
    /* Затемнение проявляется, а не возникает рывком: резкая смена всего
       экрана читается как сбой, а не как открытие окна. */
    animation: vmodal-in 0.16s ease-out;
}

@keyframes vmodal-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .vmodal { animation: none; }
}

/* Окно во всю ширину, сколько позволяет высота: у видео соотношение
   сторон постоянное, и по вертикали оно упирается раньше, чем по
   горизонтали. */
.vmodal__stage {
    position: relative;
    inline-size: min(100%, 1280px, calc((100vh - 8rem) * 16 / 9));
    aspect-ratio: 16 / 9;
    background: #000;
    border-radius: var(--radius-l);
    overflow: hidden;
    box-shadow: 0 24px 64px rgb(0 0 0 / 0.5);
}

.vmodal__frame {
    inline-size: 100%;
    block-size: 100%;
    border: 0;
    display: block;
}

/* Снимок во весь экран: пропорции у фотографии свои, не 16:9. */
.vmodal__stage--photo {
    inline-size: auto;
    max-inline-size: min(100%, 1280px);
    aspect-ratio: auto;
    background: transparent;
    box-shadow: none;
}

.vmodal__photo {
    display: block;
    max-inline-size: 100%;
    max-block-size: calc(100vh - 8rem);
    inline-size: auto;
    block-size: auto;
    border-radius: var(--radius-l);
    box-shadow: 0 24px 64px rgb(0 0 0 / 0.5);
    background: #000;
}

.vmodal__credit {
    margin: var(--space-2xs) 0 0;
    color: rgba(255, 255, 255, 0.72);
    font-size: var(--text-xs);
    text-align: center;
}

/* Снимок, который можно раскрыть, показывает это курсором. */
.venue-photo img,
.player-photo img,
.phero__face,
.vphoto img {
    cursor: zoom-in;
}

/* Крестик снаружи кадра: поверх видео он закрывал бы собой картинку, а
   у YouTube там свои кнопки. */
.vmodal__close {
    position: absolute;
    inset-block-start: calc(-1 * var(--space-l));
    inset-inline-end: 0;
    inline-size: 32px;
    block-size: 32px;
    display: grid;
    place-items: center;
    background: transparent;
    border: 0;
    border-radius: var(--radius-s);
    color: #fff;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
}

.vmodal__close:hover,
.vmodal__close:focus-visible {
    background: rgb(255 255 255 / 0.16);
}

/* Пока окно открыто, страница под ним не едет. */
body.is-locked {
    overflow: hidden;
}

/* Подпись вкладки — ссылка, но выглядит подписью: цвет и начертание
   берёт у самой вкладки, подчёркивания нет. Ссылкой она сделана ради
   строки состояния, копирования адреса и открытия в новой вкладке, а не
   ради вида. */
.rtab__link {
    color: inherit;
    text-decoration: none;
}

.rtab__link:focus-visible {
    outline: 2px solid var(--accent, currentColor);
    outline-offset: 2px;
    border-radius: 2px;
}

/* ================================================ разбор крикетного матча

   Счёт подачи — «83/2 · 22.5 ов.» — стоял мелким шрифтом вровень с
   подписями столбцов, хотя это и есть ответ на вопрос, ради которого
   страницу открыли. Таблицы при этом шли встык и читались как выгрузка
   из служебной панели. */

.inn {
    margin-block-end: var(--space-m);
    border: 1px solid var(--border);
    border-radius: var(--radius-l, 12px);
    background: var(--bg-elevated);
    overflow: hidden;
}

.inn__head {
    display: flex;
    align-items: baseline;
    gap: var(--space-2xs);
    flex-wrap: wrap;
    padding: var(--space-xs) var(--space-m);
    border-block-end: 1px solid var(--border);
    background: var(--bg-sunken);
}

.inn__team {
    margin: 0;
    font-size: var(--text-m);
    font-weight: 700;
    letter-spacing: -0.01em;
}

.inn__score {
    font-family: var(--font-mono);
    font-size: var(--text-xl);
    font-weight: 800;
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
}

.inn__overs {
    font-size: var(--text-s);
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

.inn__body { padding: var(--space-2xs) var(--space-m) var(--space-s); }

/* Подпись части: «Отбивание», «Подача». Прежде это была строка того же
   размера, что и примечания под таблицей, и глаз не отличал заголовок
   от сноски. */
.inn__cap {
    margin: var(--space-s) 0 var(--space-2xs);
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
}

.inn__note {
    margin: var(--space-2xs) 0 0;
    font-size: var(--text-s);
    color: var(--text-muted);
}

.inn__note--wickets { margin-block-start: var(--space-s); }

/* Обозначения столбцов подчёркиваются точками: подсказка есть, и это
   должно быть видно до наведения. */
.scard abbr {
    text-decoration: underline dotted;
    text-underline-offset: 3px;
    cursor: help;
}

.scard thead th { font-variant-numeric: tabular-nums; }

/* ------------------------------------------------- сведения о матче */

.mabout__list { margin: 0; display: grid; gap: 0; }

.mabout__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-s);
    padding-block: 0.4rem;
    border-block-end: 1px solid var(--border);
}

.mabout__row:last-child { border-block-end: 0; }

.mabout__key {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--text-xs);
    color: var(--text-muted);
    white-space: nowrap;
}

.mabout__icon {
    inline-size: 15px;
    block-size: 15px;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
    color: var(--text-faint);
}

.mabout__val .dot-live { margin-inline-end: 5px; }

.mabout__val {
    margin: 0;
    font-size: var(--text-s);
    font-weight: 600;
    text-align: end;
    min-inline-size: 0;
}

.mabout__val a { color: inherit; text-decoration: none; }
.mabout__val a:hover { color: var(--brand-red); }

/* Четыре числа о положении в матче.

   Отставание, сыгранные оверы, калитки, пробежки — они отвечают на
   вопрос «что происходит» быстрее, чем разбор подач на сорок строк. */
.mfacts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2xs);
    margin: 0 0 var(--space-s);
    padding: 0;
    list-style: none;
}

.mfacts__item {
    display: grid;
    justify-items: center;
    gap: 2px;
    padding: var(--space-xs) var(--space-2xs);
    border: 1px solid var(--border);
    border-radius: var(--radius-m, 8px);
    text-align: center;
}

/* Значок над числом: плитки идут парами, и значок отличает «оверы» от
   «калиток» раньше, чем прочитана подпись под числом. */
.mfacts__icon {
    inline-size: 18px;
    block-size: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
    color: var(--text-faint);
}

.mfacts__sep {
    font-style: normal;
    font-weight: 400;
    color: var(--text-faint);
    margin-inline: 0.15em;
}

.mfacts__value {
    font-family: var(--font-mono);
    font-size: var(--text-l);
    font-weight: 800;
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
}

.mfacts__label {
    font-size: var(--text-2xs);
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Пометки в шапке матча: формат, день, состояние.

   «День 3» без формата не значит ничего: у однодневного матча третьего
   дня не бывает, а у теста их пять. */
.mhero__chips {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    margin-block-start: 6px;
}

.mhero__chip {
    padding: 2px 9px;
    border-radius: var(--radius-s);
    background: rgb(255 255 255 / 0.14);
    color: #fff;
    font-size: var(--text-2xs);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
}

/* Подпись колонки подвала. Прежде колонки шли без заголовков, и список
   видов спорта было не отличить от списка служебных страниц. */
.footer-cap {
    margin: 0 0 var(--space-2xs);
    font-size: var(--text-s);
    font-weight: 700;
    color: var(--text-muted);
}

/* Состояние матча в списке серии: «День 3», «Конец дня». */
.mround__state {
    display: block;
    font-size: var(--text-2xs);
    color: var(--brand-red);
    font-weight: 600;
}

/* ======================================================= витрина вида спорта

   Страница была лентой одинаковых блоков: идущие матчи, сегодняшние,
   ближайшие, таблицы, облако ярлыков с турнирами, сетка случайных
   клубов. Всё одного веса, всё в одну колонку во всю ширину — читатель
   не понимал, куда смотреть первым, а половина широкого экрана
   пустовала. */

.shub__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-m);
    margin-block-end: var(--space-m);
}

.shub__id { display: flex; align-items: center; gap: var(--space-s); min-inline-size: 0; }

.shub__icon {
    inline-size: 44px;
    block-size: 44px;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    color: var(--text);
}

.shub__title {
    margin: 0;
    font-size: clamp(1.75rem, 1.35rem + 1.2vw, 2rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.1;
}

.shub__sub {
    margin: 2px 0 0;
    font-size: var(--text-s);
    color: var(--text-muted);
    max-inline-size: 60ch;
}

/* Числа дня плиткой: «128 матчей · 7 идут · 34 турнира».

   Прежде те же числа стояли прописью во вводном абзаце — и требовали
   чтения там, где достаточно взгляда. */
.shub__day {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(5.5rem, 1fr);
    gap: 1px;
    padding: var(--space-2xs);
    border-radius: var(--radius-l, 12px);
    background: var(--bg-sunken);
    border: 1px solid var(--border);
    /* Семь дней по пять с половиной рем не помещаются в телефон:
       полоса выезжала за край экрана на тридцать точек. Ширину она
       не уменьшает — прокручивается вбок внутри своей рамки. */
    overflow-x: auto;
    max-inline-size: 100%;
}

@media (max-width: 560px) {
    /* На телефоне числа переносятся, а не прокручиваются вбок.
       Полоса прокрутки внутри шапки перехватывает жест и читается
       поломкой; в две строки помещается всё. */
    .shub__day {
        grid-auto-flow: row;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        overflow-x: visible;
    }

    .shub__daycell { padding-inline: var(--space-2xs); }
}

.shub__daycell {
    display: grid;
    justify-items: center;
    gap: 2px;
    padding: var(--space-2xs) var(--space-s);
    text-decoration: none;
    color: inherit;
    border-radius: var(--radius-m, 8px);
}

.shub__daycell:hover { background: var(--bg-elevated); }

.shub__dayvalue {
    font-family: var(--font-mono);
    font-size: var(--text-2xl);
    font-weight: 800;
    letter-spacing: -0.04em;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.shub__daycell.is-live .shub__dayvalue { color: var(--brand-red); }

.shub__daylabel {
    font-size: var(--text-2xs);
    color: var(--text-muted);
    white-space: nowrap;
}

/* Навигация раздела: где читатель сейчас и куда может пойти. */
.shub__nav {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2xs);
    margin-block-end: var(--space-l);
    padding-block-end: var(--space-2xs);
    border-block-end: 1px solid var(--border);
}

.shub__tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0.5rem 0.85rem;
    border-radius: var(--radius-m, 8px);
    font-size: var(--text-s);
    font-weight: 600;
    color: var(--text-muted);
    text-decoration: none;
}

.shub__tab:hover { background: var(--bg-sunken); color: var(--text); }

.shub__tab.is-on {
    background: var(--brand-red);
    color: #fff;
}

.shub__tabnote {
    font-size: var(--text-2xs);
    font-weight: 600;
    color: var(--text-faint);
    font-variant-numeric: tabular-nums;
}

.shub__tab.is-on .shub__tabnote { color: rgb(255 255 255 / 0.72); }

.shub__block { margin-block-end: var(--space-l); }

.shub__cap {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-s);
    margin-block-end: var(--space-2xs);
}

.shub__captitle {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    font-size: var(--text-l);
    font-weight: 700;
    letter-spacing: -0.01em;
}

.shub__more {
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--text-muted);
    text-decoration: none;
    white-space: nowrap;
}

.shub__more:hover { color: var(--brand-red); }

.shub__card {
    border: 1px solid var(--border);
    border-radius: var(--radius-l, 12px);
    background: var(--bg-elevated);
    padding: var(--space-s) 0 0;
    overflow: hidden;
}

.shub__card > .shub__cap { padding-inline: var(--space-m); }

/* ------------------------------------------------ идущие матчи карточками */

.lgrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: var(--space-2xs);
}

.lcard {
    display: grid;
    gap: 4px;
    padding: var(--space-xs) var(--space-s);
    border: 1px solid var(--border);
    border-radius: var(--radius-l, 12px);
    background: var(--bg-elevated);
    text-decoration: none;
    color: inherit;
    min-inline-size: 0;
}

.lcard:hover { border-color: var(--brand-red); }

.lcard__top {
    display: flex;
    align-items: baseline;
    gap: 6px;
    min-inline-size: 0;
}

.lcard__min {
    font-size: var(--text-2xs);
    font-weight: 700;
    color: var(--brand-red);
    white-space: nowrap;
}

.lcard__comp {
    font-size: var(--text-2xs);
    color: var(--text-faint);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lcard__row {
    display: flex;
    align-items: center;
    gap: var(--space-2xs);
    min-inline-size: 0;
}

.lcard__team {
    font-size: var(--text-s);
    font-weight: 600;
    min-inline-size: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lcard__score {
    margin-inline-start: auto;
    font-family: var(--font-mono);
    font-size: var(--text-m);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.lcard--more {
    justify-items: center;
    align-content: center;
    text-align: center;
    gap: 2px;
    border-style: dashed;
}

.lcard__moreicon {
    inline-size: 22px;
    block-size: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    color: var(--text-faint);
}

.lcard__moretext { font-size: var(--text-s); font-weight: 600; color: var(--brand-red); }
.lcard__morenote { font-size: var(--text-2xs); color: var(--text-faint); }

/* --------------------------------------------- карточки главных турниров */

/* Главные турниры — одной строкой во всю ширину, последней карточкой
   переход ко всем таблицам.

   По 140px на карточку девятая уходила на вторую строку и висела там
   одна, а под рядом оставалась пустая полоса в её высоту. */
.lgcards {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: var(--space-2xs);
}

.lgcards .lgcard { padding: var(--space-xs) 5px; gap: 5px; min-inline-size: 0; }
.lgcards .lgcard__logo { inline-size: 34px; block-size: 34px; }
.lgcards .lgcard__name { font-size: var(--text-2xs); line-height: 1.2; }
.lgcards .lgcard__country { font-size: 0.68rem; }

/* На узком экране ряд из девяти карточек нечитаем. */
@media (max-width: 900px) {
    .lgcards {
        grid-auto-flow: row;
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    }
}

.lgcard {
    display: grid;
    justify-items: center;
    align-content: start;
    gap: 6px;
    padding: var(--space-s) var(--space-2xs);
    border: 1px solid var(--border);
    border-radius: var(--radius-l, 12px);
    background: var(--bg-elevated);
    text-decoration: none;
    color: inherit;
    text-align: center;
    min-inline-size: 0;
}

.lgcard:hover { border-color: var(--brand-red); }

.lgcard__logo {
    inline-size: 48px;
    block-size: 48px;
    object-fit: contain;
}

.lgcard__logo--blank { border-radius: 50%; background: var(--bg-sunken); }

/* Название турнира переносится, а не обрезается: «Кубок
   Южноамериканских клубов» в одну строку не помещается ни при какой
   ширине карточки, и от него оставалось «Кубок Южноамерик». */
.lgcard__name {
    font-size: var(--text-s);
    font-weight: 700;
    line-height: 1.25;
    max-inline-size: 100%;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.lgcard__country { font-size: var(--text-2xs); color: var(--text-faint); }

.lgcard--more { border-style: dashed; align-content: center; }
.lgcard__arrow { font-size: var(--text-xl); color: var(--text-faint); line-height: 1; }

/* ------------------------------------------------------ три колонки витрины */

.shub__cols {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-m);
    margin-block-end: var(--space-l);
    align-items: start;
}

.shub__col { display: grid; gap: var(--space-m); align-content: start; min-inline-size: 0; }
.shub__side { display: grid; gap: var(--space-m); align-content: start; min-inline-size: 0; }

.shub__side .aside-block {
    border: 1px solid var(--border);
    border-radius: var(--radius-l, 12px);
    padding: var(--space-s) var(--space-m);
    background: var(--bg-elevated);
    margin: 0;
}

@media (min-width: 900px) {
    .shub__cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .shub__side { grid-column: 1 / -1; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
}

@media (min-width: 1200px) {
    /* Основное слева, справка справа: три колонки заполняют широкий
       экран, на котором прежде пустовала половина. */
    .shub__cols { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr) minmax(0, 0.75fr); }
    .shub__side { grid-column: auto; grid-auto-flow: row; }

    /* Колонки кончаются на одной линии: списки в них разной длины, и
       нижний край страницы шёл лесенкой. Лишнюю высоту забирает
       последний блок колонки — расти остальным нечем. */
    .shub__cols { align-items: stretch; }
    .shub__col,
    .shub__side {
        display: flex;
        flex-direction: column;
        gap: var(--space-m);
    }
    .shub__col > :last-child,
    .shub__side > :last-child { flex: 1 1 auto; }
}

.shub__split {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-m);
    margin-block-end: var(--space-l);
    /* Результаты и прогнозы стоят рядом и кончаются на одной линии:
       в списках разное число строк, и низ разъезжался. */
    align-items: stretch;
}

@media (min-width: 900px) {
    .shub__split { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.shub__split .reviewlist,
.shub__split .picks { padding-inline: var(--space-m); }
.shub__card .mrows > li:first-child .mrow { border-block-start: 1px solid var(--border); }

/* ------------------------------------------------------------ прогноз дня */

.pday {
    display: grid;
    gap: 4px;
    padding: var(--space-xs);
    border: 1px solid var(--border);
    border-radius: var(--radius-m, 8px);
    text-decoration: none;
    color: inherit;
}

.pday:hover { border-color: var(--brand-red); }
.pday__comp { font-size: var(--text-2xs); color: var(--text-faint); }
.pday__teams { font-size: var(--text-s); font-weight: 600; }
.pday__teams .is-pick { color: var(--brand-red); }
.pday__sep { color: var(--text-faint); margin-inline: 4px; }

.pday__pick {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-2xs);
    font-size: var(--text-xs);
    color: var(--text-muted);
}

.pday__odds {
    font-family: var(--font-mono);
    font-size: var(--text-s);
    color: var(--text);
}

/* Процент модели — справа в строке ставки, тем же кеглем, что
   коэффициент: карточка называет исход и сразу говорит, насколько в
   нём уверены. */
.pday__conf {
    margin-inline-start: auto;
    font-family: var(--font-mono);
    font-size: var(--text-s);
    font-weight: 700;
    color: var(--brand-red);
    white-space: nowrap;
}

/* ------------------------------------------------------- команды плитками */

.tgrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: var(--space-2xs);
}

.tcard {
    display: grid;
    justify-items: center;
    gap: 6px;
    padding: var(--space-s) var(--space-2xs);
    border: 1px solid var(--border);
    border-radius: var(--radius-l, 12px);
    background: var(--bg-elevated);
    text-decoration: none;
    color: inherit;
    text-align: center;
    min-inline-size: 0;
}

.tcard:hover { border-color: var(--brand-red); }
.tcard__crest { inline-size: 42px; block-size: 42px; object-fit: contain; }

.tcard__name {
    font-size: var(--text-xs);
    font-weight: 600;
    line-height: 1.25;
    max-inline-size: 100%;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.tcard--more { border-style: dashed; align-content: center; }

/* --------------------------------------------------- турниры по странам */

.cgroups {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: var(--space-m);
    padding: var(--space-m);
    border: 1px solid var(--border);
    border-radius: var(--radius-l, 12px);
    background: var(--bg-elevated);
}

.cgroup { min-inline-size: 0; }

.cgroup__country {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 var(--space-2xs);
    font-size: var(--text-s);
    font-weight: 700;
}

.cgroup__flag { inline-size: 20px; block-size: 14px; object-fit: cover; border-radius: 2px; }

.cgroup__list {
    display: grid;
    gap: 4px;
    margin: 0 0 var(--space-2xs);
    padding: 0;
    list-style: none;
}

.cgroup__list a {
    font-size: var(--text-xs);
    color: var(--text-muted);
    text-decoration: none;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cgroup__list a:hover { color: var(--brand-red); }

.cgroup__all {
    font-size: var(--text-2xs);
    font-weight: 600;
    color: var(--brand-red);
    text-decoration: none;
}

/* Строка матча в колонке витрины: колонка вдвое уже страницы
   расписания, и на названия команд оставалось по три буквы. */
.shub__card .mrow {
    grid-template-columns: 2.9rem minmax(0, 1fr) auto minmax(0, 1fr);
    grid-template-areas: "when home score away";
    padding-inline: var(--space-s);
    gap: 6px;
}

.shub__card .mrow__score { min-inline-size: 2.6rem; font-size: var(--text-s); }
.shub__card .mrow__when { font-size: var(--text-2xs); }

/* Переключатель таблиц внутри карточки витрины: он рисовался во всю
   ширину карточки, и ссылка «полная таблица» уходила под её край. */
.shub__card .tabs__strip,
.shub__card .tabs__panel { padding-inline: var(--space-m); }

/* Список отсчитывается от края карточки, а не от края текста: без
   этого он вылезал за поле и стоял левее заголовка над ним. */
.shub__card .tabs__menu { inset-inline-start: var(--space-m); margin-inline: 0; }
.shub__card .tabs__panel { padding-block-end: var(--space-s); }

/* ---------------------------------- страница таблиц: читаемость строк

   Таблицы были аккуратные, но мелкие: одиннадцать точек на название
   команды и строка в двадцать восемь — при том что вся страница
   существует ради чтения этих таблиц. */

.tmain .mtable { font-size: var(--text-s); }
.tmain .mtable td { padding-block: 9px; }
.tmain .mtable__team { font-weight: 600; }

/* Очки — то, ради чего смотрят в таблицу, и в ряду одинаковых чисел
   они ничем не выделялись. */
.tmain .mtable__num--strong,
.tmain .mtable td:last-child {
    font-weight: 800;
    color: var(--text);
}

.tmain .mtable thead th {
    font-size: var(--text-2xs);
    color: var(--text-faint);
}

/* Названия турниров в карточках наверху не обрезаются: «Кубок
   Южноамериканских клубов» и «Премьер-лига — женщины» превращались в
   «Кубок Южн…» и «Премьер-л…». */
.cgrid .ccard__name {
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.25;
}

.cgrid > .ccard { flex: 1 1 200px; min-inline-size: 200px; }

/* ------------------------------------------------------- выбор сезона

   Сезон — главный фильтр таблиц: прошлогоднее положение команд ищут не
   реже нынешнего. Список сезонов — обычные ссылки: каждый сезон живёт
   по своему адресу, и его можно передать. */
.spick { position: relative; }

.spick__now {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0.45rem 0.7rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-m, 8px);
    background: var(--bg-elevated);
    font-size: var(--text-xs);
    color: var(--text-muted);
    cursor: pointer;
    white-space: nowrap;
    list-style: none;
}

.spick__now::-webkit-details-marker { display: none; }
.spick__now b { color: var(--text); font-variant-numeric: tabular-nums; }
.spick__cap { color: var(--text-faint); }
.spick__chev { line-height: 1; }

.spick__list {
    position: absolute;
    z-index: 30;
    inset-inline-end: 0;
    inset-block-start: calc(100% + 4px);
    min-inline-size: 8rem;
    max-block-size: 16rem;
    overflow-y: auto;
    margin: 0;
    padding: 4px;
    list-style: none;
    border: 1px solid var(--border);
    border-radius: var(--radius-m, 8px);
    background: var(--bg-elevated);
    box-shadow: 0 10px 28px rgb(0 0 0 / 0.14);
}

.spick__item {
    display: block;
    padding: 6px 10px;
    border-radius: var(--radius-s);
    font-size: var(--text-xs);
    color: inherit;
    text-decoration: none;
    font-variant-numeric: tabular-nums;
}

.spick__item:hover { background: var(--bg-sunken); }
.spick__item.is-on { color: var(--brand-red); font-weight: 700; }

/* Число матчей дня — крупно. */
.tside__total {
    margin: 0 0 var(--space-2xs);
    font-family: var(--font-mono);
    font-size: var(--text-l);
    font-weight: 800;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}

.tpick__row a.is-on .tpick__name { color: var(--brand-red); font-weight: 700; }

/* Полоса фильтров переносится, когда в неё добавился выбор сезона:
   прежде она вытесняла последнюю вкладку, и от «Океании» оставалось
   «Ок». */
@media (max-width: 1279px) {
    .rbar { flex-wrap: wrap; padding-block: var(--space-2xs); }
    .rbar__tabs { flex: 1 1 100%; }
}

.rbar .spick { margin-inline-start: auto; }

/* Знак турнира: флаг страны или значок вида, когда своего нет — у
   крикетных турниров он не заведён почти нигде, и на их месте стоял
   серый кружок, читавшийся как несработавшая картинка. */
.lgcard__logo--flag { block-size: 36px; object-fit: contain; border-radius: 3px; }

.lgcard__logo--icon {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    color: var(--text-faint);
}

/* В узкой колонке витрины таблица теряет столбец разницы мячей: он
   уходил под край, оставляя «+7…». */
@media (max-width: 1439px) {
    .shub__col .mtable th:nth-last-child(2),
    .shub__col .mtable td:nth-last-child(2) { display: none; }
}

/* ===================================================== разборы матчей

   Страница была сеткой одинаковых карточек во всю ширину, без полосы
   видов спорта и без выхода куда бы то ни было: дочитав разбор,
   вернуться в раздел можно было только через шапку. */

.rvgrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--space-s);
}

.rvcard {
    border: 1px solid var(--border);
    border-radius: var(--radius-l, 12px);
    background: var(--bg-elevated);
    overflow: hidden;
}

.rvcard:hover { border-color: var(--brand-red); }

.rvcard > a {
    display: grid;
    gap: var(--space-2xs);
    padding: var(--space-s) var(--space-m) var(--space-xs);
    text-decoration: none;
    color: inherit;
}

/* Счёт посередине, команды по краям от него: пара читается как одна
   запись, а не как два конца строки. */
.rvcard__match {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: var(--space-2xs);
}

.rvcard__side {
    display: flex;
    align-items: center;
    gap: 6px;
    min-inline-size: 0;
}

.rvcard__side--away { flex-direction: row-reverse; text-align: end; }

.rvcard__team {
    font-size: var(--text-s);
    font-weight: 700;
    min-inline-size: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rvcard__score {
    font-family: var(--font-mono);
    font-size: var(--text-m);
    font-weight: 800;
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
    color: var(--accent);
    white-space: nowrap;
}

.rvcard__text {
    margin: 0;
    font-size: var(--text-s);
    line-height: 1.5;
    color: var(--text-muted);
    /* Четыре строки на все карточки: разборы разной длины, и сетка из
       карточек в полторы и в четыре строки читается как сбой. */
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-block-size: 6em;
}

.rvcard__meta {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-2xs);
    padding-block-start: var(--space-2xs);
    border-block-start: 1px solid var(--border);
    font-size: var(--text-2xs);
    color: var(--text-faint);
}

.rvcard__comp {
    min-inline-size: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.jumps__logo {
    inline-size: 20px;
    block-size: 20px;
    flex: none;
    object-fit: contain;
    border-radius: 3px;
}

/* Две колонки вместо трёх, когда таблиц у вида спорта нет: у регби с
   одним турниром посреди страницы зияла дыра в треть ширины. */
@media (min-width: 1200px) {
    .shub__cols:not(:has(.shub__col + .shub__col)) {
        grid-template-columns: minmax(0, 1fr) minmax(0, 0.5fr);
    }
}

/* ================================================== страница турнира

   Страница отвечала на вопрос «какая таблица», но не на вопрос «чем
   всё кончилось»: у завершённого турнира сообщалось только «сезон
   завершён», а финал стоял в списке результатов между двумя матчами
   группового этапа. */

/* Победитель и финал в шапке. */
.kwin {
    display: grid;
    justify-items: end;
    gap: 2px;
    padding-inline-start: var(--space-m);
    border-inline-start: 1px solid var(--border);
    text-align: end;
}

.kwin__cap {
    font-size: var(--text-2xs);
    color: #92a5c4;
}

.kwin__team {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2xs);
    font-size: var(--text-l);
    text-decoration: none;
    color: inherit;
}

.kwin__team:hover b { color: var(--brand-red); }
.kwin__crest { inline-size: 36px; block-size: 36px; object-fit: contain; }

.kwin__final { display: grid; justify-items: end; gap: 1px; margin-block-start: 6px; }

.kwin__finalcap {
    font-size: var(--text-2xs);
    color: var(--text-faint);
}

.kwin__pair {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: var(--text-xs);
    color: var(--text-muted);
    text-decoration: none;
}

.kwin__pair .is-win { color: var(--text); font-weight: 700; }

.kwin__score {
    font-family: var(--font-mono);
    font-size: var(--text-s);
    color: var(--text);
}

/* Переключатель групп под таблицей. */
.kgroups {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: var(--space-2xs) var(--space-m) var(--space-s);
}

.kgroup {
    padding: 0.35rem 0.7rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-m, 8px);
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--text-muted);
    text-decoration: none;
    white-space: nowrap;
}

.kgroup:hover { border-color: var(--text-faint); color: var(--text); }

.kgroup.is-on {
    border-color: var(--brand-red);
    color: var(--brand-red);
    background: color-mix(in srgb, var(--brand-red) 7%, transparent);
}

/* Сетка на вылет: стадии колонками слева направо. */
.kbracket {
    display: grid;
    grid-auto-flow: column;
    /* Колонки сжимаются до 130 точек, прежде чем уйти в прокрутку.

       При жёстких 190 четыре стадии не помещались в основную колонку,
       и финал — то единственное, ради чего сетку открывают, —
       оказывался за правым краем. Ста тридцати хватает на герб,
       сокращённое название и счёт. */
    grid-auto-columns: minmax(130px, 1fr);
    gap: var(--space-2xs);
    padding: 0 var(--space-m) var(--space-s);
    overflow-x: auto;
    overscroll-behavior-inline: contain;
}

.kstage { min-inline-size: 0; }

.kstage__name {
    margin: 0 0 var(--space-2xs);
    /* «Матч за 3-е место» длиннее колонки: перенос лучше обрезки —
       из «МАТЧ ЗА 3-Е М…» не понять, чем эта стадия отличается от
       финала. */
    overflow-wrap: anywhere;
    font-size: var(--text-2xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-faint);
}

.kstage__list { display: grid; gap: var(--space-2xs); margin: 0; padding: 0; list-style: none; }

.kpair {
    display: grid;
    gap: 2px;
    padding: var(--space-2xs);
    border: 1px solid var(--border);
    border-radius: var(--radius-m, 8px);
    background: var(--bg-elevated);
    text-decoration: none;
    color: inherit;
}

.kpair:hover { border-color: var(--brand-red); }

.kpair__side {
    display: flex;
    align-items: center;
    gap: 6px;
    min-inline-size: 0;
    font-size: var(--text-xs);
    color: var(--text-muted);
}

/* Победитель пары выделен весом: цветом кодируется состояние матча. */
.kpair__side.is-win { color: var(--text); font-weight: 700; }

.kpair__name {
    min-inline-size: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kpair__score {
    margin-inline-start: auto;
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
}

/* Числа сезона — карточками, а не строкой мелких цифр.

   Три в ряд, а не сколько поместится: шесть чисел в одну строку
   выходили узкими столбиками, а шестое сваливалось на вторую строку
   в одиночестве — ряд «пять и один» читается как сбой вёрстки. */
.knums {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-2xs);
    padding: 0 var(--space-m) var(--space-s);
}

@media (max-width: 560px) {
    .knums { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.knum {
    display: grid;
    justify-items: center;
    gap: 2px;
    padding: var(--space-s) var(--space-2xs);
    border: 1px solid var(--border);
    border-radius: var(--radius-m, 8px);
    text-align: center;
}

.knum__value {
    font-family: var(--font-mono);
    font-size: var(--text-xl);
    font-weight: 800;
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
}

.knum__label { font-size: var(--text-2xs); color: var(--text-muted); }

@media (max-width: 720px) {
    .kwin {
        justify-items: start;
        text-align: start;
        padding-inline-start: 0;
        border-inline-start: 0;
        padding-block-start: var(--space-2xs);
        border-block-start: 1px solid var(--border);
    }
    .kwin__final { justify-items: start; }
}

/* ================================================== каталог команд

   Каталог строился по турнирам: сначала полсотни сборных чемпионата
   мира, потом клубы Кубка Либертадорес и ещё полтораста турниров.
   Чтобы найти «Барселону», нужно было знать, в каком соревновании её
   искать, — а читатель приходит за командой. */

/* Поиск — главный способ навигации: команд у футбола десять тысяч. */
.tsearch {
    display: flex;
    align-items: center;
    gap: var(--space-s);
    margin-block-end: var(--space-s);
    padding: var(--space-xs) var(--space-m);
    border: 1px solid var(--border);
    border-radius: var(--radius-l, 12px);
    background: var(--bg-elevated);
}

.tsearch__icon {
    inline-size: 22px;
    block-size: 22px;
    flex: none;
    color: var(--text-faint);
}

.tsearch__body { flex: 1; min-inline-size: 0; }

.tsearch__label {
    display: block;
    font-size: var(--text-s);
    font-weight: 700;
}

.tsearch__input {
    inline-size: 100%;
    border: 0;
    padding: 2px 0 0;
    background: none;
    color: inherit;
    font: inherit;
    font-size: var(--text-s);
}

.tsearch__input::placeholder { color: var(--text-faint); }
.tsearch__input:focus { outline: none; }
.tsearch:focus-within { border-color: var(--brand-red); }

/* Переключатель типа команд. */
.tkinds {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2xs);
    margin-block-end: var(--space-l);
}

.tkind {
    padding: 0.45rem 0.9rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--bg-elevated);
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--text-muted);
    text-decoration: none;
}

.tkind:hover { border-color: var(--text-faint); color: var(--text); }

.tkind.is-on {
    border-color: var(--brand-red);
    background: var(--brand-red);
    color: #fff;
}

.tkinds__total {
    margin-inline-start: auto;
    font-size: var(--text-xs);
    color: var(--text-muted);
}

.tkinds__total b { font-variant-numeric: tabular-nums; color: var(--text); }

/* Строка команды: логотип, название, турнир и город, год и стадион.

   Прежде здесь стояли сырые числа вроде «#1 · 9» — место в таблице и
   очки, — и понять, что они значат, было нельзя. */
.tcat { margin: 0; padding: 0; list-style: none; }

.tcat__row + .tcat__row { border-block-start: 1px solid var(--border); }

.tcat__row > a {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr) auto auto 12px;
    align-items: center;
    gap: var(--space-2xs);
    padding: 0.6rem var(--space-m);
    text-decoration: none;
    color: inherit;
    min-block-size: 3.4rem;
}

.tcat__row > a:hover { background: var(--bg-sunken); }
.tcat__crest { inline-size: 30px; block-size: 30px; object-fit: contain; }
.tcat__body { display: grid; gap: 1px; min-inline-size: 0; }

.tcat__name {
    font-size: var(--text-s);
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tcat__note {
    font-size: var(--text-2xs);
    color: var(--text-faint);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tcat__year,
.tcat__venue {
    font-size: var(--text-xs);
    color: var(--text-muted);
    white-space: nowrap;
}

.tcat__venue {
    max-inline-size: 12rem;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tcat__go { color: var(--text-faint); }

.tcat__more {
    display: block;
    padding: 0.6rem var(--space-m);
    border-block-start: 1px solid var(--border);
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--brand-red);
    text-decoration: none;
}

@media (max-width: 899px) {
    /* На телефоне год основания и стадион уходят: на название команды
       оставалось полтора сантиметра. */
    .tcat__row > a { grid-template-columns: 30px minmax(0, 1fr) 12px; }
    .tcat__year, .tcat__venue { display: none; }
}

/* Полоса частей света — второй уровень отбора после типа команд. */
.tkinds--regions {
    margin-block: calc(-1 * var(--space-s)) var(--space-l);
    padding-block-start: var(--space-xs);
    border-block-start: 1px solid var(--border);
}

.tkinds--regions .tkind {
    border-color: transparent;
    background: none;
    padding-inline: 0.65rem;
}

.tkinds--regions .tkind:hover { background: var(--bg-sunken); }

.tkinds--regions .tkind.is-on {
    border-color: transparent;
    background: var(--bg-sunken);
    color: var(--text);
    text-decoration: underline;
    text-decoration-color: var(--brand-red);
    text-underline-offset: 4px;
    text-decoration-thickness: 2px;
}

/* Возврат из развёрнутой страны ко всему каталогу. */
.hub-head__back {
    display: inline-block;
    margin-block-end: 2px;
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--text-muted);
    text-decoration: none;
}

.hub-head__back:hover { color: var(--brand-red); }

.tempty {
    margin: var(--space-l) 0;
    text-align: center;
    color: var(--text-muted);
}

/* ================================================ страница команды

   Прежде страница шла одной лентой: название, полоска формы, карточка
   последнего матча, таблица, статистика, сорок игроков состава, снова
   результаты, турниры. Данные были верные — неверным было их
   количество на первом экране.

   Шапка отвечает на четыре вопроса сразу: кто это, где играет, как
   идут дела и чем кончился последний матч. */

.thero {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: var(--space-l);
    margin-block-end: var(--space-l);
    padding: var(--space-l);
    border-radius: var(--radius-l, 12px);
    /* Тёмная шапка вместо белой полосы: она отделяет «лицо команды»
       от разделов под ней, а на светлой странице сама становится
       якорем для глаза. Фотография стадиона встанет сюда фоном, когда
       появится, — под ней уже лежит градиент того же тона. */
    background:
        radial-gradient(120% 140% at 15% 0%, #1f3352 0%, transparent 60%),
        linear-gradient(135deg, #101a2c 0%, #16233b 55%, #0d1526 100%);
    color: #eaf0fa;
}

.thero__main { display: grid; align-content: start; gap: var(--space-m); }
.thero__id { display: flex; align-items: center; gap: var(--space-m); }

.thero__crest {
    inline-size: 88px;
    block-size: 88px;
    object-fit: contain;
    flex: none;
}

.thero__names { min-inline-size: 0; }

.thero__title {
    margin: 0;
    font-size: clamp(1.75rem, 3.4vw, 2.25rem);
    font-weight: 800;
    line-height: 1.1;
    color: #fff;
}

.thero__kind {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 6px 0 0;
    font-size: var(--text-s);
    color: #b9c7de;
}

.thero__flag { inline-size: 20px; block-size: 15px; object-fit: cover; border-radius: 2px; }
.thero__nick { margin: 4px 0 0; font-size: var(--text-xs); color: #8fa2c0; }

/* Числа сезона: матчи, победы, забито, разница.

   Прежде они лежали в таблице на третьем экране — там, куда доходил
   один читатель из десяти. */
.thero__nums {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-m) var(--space-l);
}

.tnum { display: grid; gap: 2px; }

.tnum__v {
    font-size: var(--text-2xl);
    font-weight: 800;
    line-height: 1;
    color: #fff;
    font-variant-numeric: tabular-nums;
}

.tnum__l {
    font-size: var(--text-2xs);
    color: #92a5c4;
}

.thero__form { display: flex; align-items: center; gap: var(--space-s); }

.thero__formlabel {
    font-size: var(--text-2xs);
    color: #92a5c4;
}

/* Последний матч крупно: за ним на страницу команды и заходят. */
.tlast {
    display: grid;
    align-content: center;
    gap: var(--space-s);
    padding: var(--space-m);
    border-radius: var(--radius-l, 12px);
    background: rgba(10, 16, 28, 0.72);
    backdrop-filter: blur(3px);
    border: 1px solid rgba(255, 255, 255, 0.14);
    text-align: center;
}

.tlast__label {
    font-size: var(--text-2xs);
    color: #92a5c4;
}

.tlast__body {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: var(--space-xs);
}

.tlast__side { display: grid; justify-items: center; gap: 6px; min-inline-size: 0; }
.tlast__crest { inline-size: 44px; block-size: 44px; object-fit: contain; }

.tlast__name {
    font-size: var(--text-2xs);
    color: #c8d5e8;
    max-inline-size: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tlast__score {
    font-size: var(--text-2xl);
    font-weight: 800;
    color: #fff;
    text-decoration: none;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.tlast__score:hover { color: #ffd9d9; }
.tlast__meta { font-size: var(--text-2xs); color: #8fa2c0; }

.tlast__all {
    display: block;
    padding: 8px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.1);
    font-size: var(--text-xs);
    font-weight: 600;
    color: #fff;
    text-decoration: none;
}

.tlast__all:hover { background: rgba(255, 255, 255, 0.18); }

@media (max-width: 899px) {
    .thero { grid-template-columns: 1fr; padding: var(--space-m); }
    .thero__crest { inline-size: 64px; block-size: 64px; }
}

/* Последние результаты таблицей: у результата пять величин, и в
   карточках они вставали лесенкой. */
.tres { inline-size: 100%; border-collapse: collapse; }

.tres__row { border-block-end: 1px solid var(--border); }
.tres__row:last-child { border-block-end: 0; }
.tres td { padding: 0.55rem var(--space-2xs); vertical-align: middle; }

.tres__date {
    inline-size: 6.5rem;
    font-size: var(--text-2xs);
    color: var(--text-faint);
    white-space: nowrap;
}

.tres__comp {
    inline-size: 30%;
    font-size: var(--text-2xs);
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tres__rival { display: flex; align-items: center; gap: 8px; min-inline-size: 0; }
.tres__crest { inline-size: 22px; block-size: 22px; object-fit: contain; flex: none; }
.tres__rival a { font-size: var(--text-s); font-weight: 600; text-decoration: none; color: inherit; }
.tres__rival a:hover { color: var(--brand-red); }

.tres__side {
    padding: 1px 5px;
    border-radius: 4px;
    background: var(--bg-sunken);
    font-size: var(--text-3xs, 0.625rem);
    color: var(--text-faint);
}

.tres__score { inline-size: 4rem; text-align: center; }

.tres__score a {
    font-size: var(--text-m);
    font-weight: 700;
    text-decoration: none;
    color: inherit;
    font-variant-numeric: tabular-nums;
}

.tres__mark { inline-size: 2rem; text-align: end; }

/* Таблица группы: своя строка выделена, иначе её ищут глазами. */
.ttable__group {
    margin: 0 0 var(--space-xs);
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--brand-red);
}

.ttable__me { background: color-mix(in srgb, var(--brand-red) 8%, transparent); }
.ttable__me td { font-weight: 700; }
.ttable__all { margin-block-start: var(--space-s); }

/* Числа сезона плитками в разделе статистики. */
.tkpi {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: var(--space-2xs);
    margin-block-end: var(--space-m);
}

.tkpi__card {
    display: grid;
    gap: 2px;
    padding: var(--space-s);
    border: 1px solid var(--border);
    border-radius: var(--radius-m, 10px);
    background: var(--bg-elevated);
    text-align: center;
}

.tkpi__v {
    font-size: var(--text-xl);
    font-weight: 800;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.tkpi__l { font-size: var(--text-2xs); color: var(--text-muted); }

/* Ведущие игроки — вместо сорока фамилий подряд. */
.tplayers {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: var(--space-2xs);
}

.tplayer {
    display: grid;
    justify-items: center;
    gap: 4px;
    padding: var(--space-s) var(--space-2xs);
    border: 1px solid var(--border);
    border-radius: var(--radius-m, 10px);
    background: var(--bg-elevated);
    text-decoration: none;
    color: inherit;
    text-align: center;
}

.tplayer:hover { border-color: var(--brand-red); }

.tplayer__face {
    inline-size: 56px;
    block-size: 56px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--bg-sunken);
}

.tplayer__name {
    font-size: var(--text-xs);
    font-weight: 700;
    line-height: 1.2;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.tplayer__pos { font-size: var(--text-2xs); color: var(--text-faint); }
.tplayer__games { font-size: var(--text-2xs); color: var(--text-muted); }

/* Календарь команды: будущее и прошлое одной сеткой колонок. */
.tmatches { margin: 0; padding: 0; list-style: none; }
.tmatches--past { margin-block-start: var(--space-s); }

.tmatch {
    display: grid;
    grid-template-columns: 6.5rem minmax(0, 1fr) auto auto;
    align-items: center;
    gap: var(--space-2xs);
    padding: 0.5rem var(--space-2xs);
    border-block-end: 1px solid var(--border);
}

.tmatch:last-child { border-block-end: 0; }
.tmatch__when { font-size: var(--text-2xs); color: var(--text-faint); }
.tmatch__when b { font-size: var(--text-s); color: var(--text); }
.tmatch__rival { display: flex; align-items: center; gap: 8px; min-inline-size: 0; }
.tmatch__rival a { font-size: var(--text-s); font-weight: 600; text-decoration: none; color: inherit; }
.tmatch__rival a:hover { color: var(--brand-red); }

.tmatch__comp {
    font-size: var(--text-2xs);
    color: var(--text-muted);
    max-inline-size: 12rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tmatch__score a {
    font-weight: 700;
    text-decoration: none;
    color: inherit;
    font-variant-numeric: tabular-nums;
}

/* Итог формы словами: ряд «В В В В П В» читается взглядом, но счёт по
   нему ведут пальцем. */
.tform__sum {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    margin: var(--space-xs) 0 0;
    font-size: var(--text-2xs);
    color: var(--text-muted);
}

.tform__part b { color: var(--text); }
.tform__part--win b { color: var(--ok, #1a7f37); }
.tform__part--loss b { color: var(--brand-red); }

.form-strip--wide { display: flex; flex-wrap: wrap; gap: 4px; }

/* Ближайший матч в колонке. */
.tnext { display: grid; gap: var(--space-xs); text-align: center; }
.tnext__when { font-size: var(--text-xs); font-weight: 600; }

.tnext__body {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: var(--space-2xs);
}

.tnext__side { display: grid; justify-items: center; gap: 4px; min-inline-size: 0; }
.tnext__side .tlast__name { color: var(--text); }
.tnext__dash { color: var(--text-faint); }
.tnext__meta { font-size: var(--text-2xs); color: var(--text-muted); }

@media (max-width: 899px) {
    .tmatch { grid-template-columns: 5rem minmax(0, 1fr) auto; }
    .tmatch__comp { display: none; }
    .tres__comp, .tres__date { display: none; }
}

/* ================================================= страница игрока

   Главный объект здесь — человек, а не команда: слева портрет, рядом
   имя, гражданство, амплуа и клуб. Прежде страница начиналась серым
   кружком и именем в один рост со строкой «Номер: 3». */

.phero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: var(--space-l);
    margin-block-end: var(--space-l);
    padding: var(--space-l);
    border-radius: var(--radius-l, 12px);
    /* Тот же приём, что на странице команды, но темнее к правому
       краю: там фон принадлежит стадиону, здесь — человеку. */
    background:
        radial-gradient(90% 120% at 10% 10%, #23324f 0%, transparent 62%),
        linear-gradient(135deg, #131d30 0%, #18263f 55%, #0c1422 100%);
    color: #eaf0fa;
}

.phero__main { display: grid; align-content: center; gap: var(--space-m); }
.phero__id { display: flex; align-items: center; gap: var(--space-m); }

.phero__face {
    inline-size: 112px;
    block-size: 112px;
    border-radius: 50%;
    object-fit: cover;
    flex: none;
    border: 3px solid rgba(255, 255, 255, 0.14);
    background: #1d2b45;
}

.phero__names { min-inline-size: 0; }

.phero__title {
    margin: 0;
    font-size: clamp(1.6rem, 3vw, 2.1rem);
    font-weight: 800;
    line-height: 1.12;
    color: #fff;
}

.phero__kind {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 6px 0 0;
    font-size: var(--text-s);
    color: #c3d0e6;
}

.phero__meta { margin: 4px 0 0; font-size: var(--text-xs); color: #8fa2c0; }

/* Клуб справа: кто это → где играет → что дальше. */
/* Карточка клуба поверх снимка.

   Прежде она была полупрозрачной: на фоне трибун под прожекторами
   карточка сливалась с ними, и «1 место, 6 очков» приходилось
   выискивать. Плотная подложка отделяет её от снимка. */
.pclub {
    display: grid;
    align-content: center;
    gap: var(--space-xs);
    padding: var(--space-m);
    border-radius: var(--radius-l, 12px);
    background: rgba(10, 16, 28, 0.72);
    backdrop-filter: blur(3px);
    border: 1px solid rgba(255, 255, 255, 0.14);
    text-align: center;
}

.pclub__id {
    display: grid;
    justify-items: center;
    gap: 6px;
    text-decoration: none;
    color: #fff;
}

.pclub__crest { inline-size: 44px; block-size: 44px; object-fit: contain; }
.pclub__name { font-size: var(--text-s); font-weight: 700; }
.pclub__stand { margin: 0; font-size: var(--text-xs); color: #c3d0e6; }
.pclub__stand b { color: #fff; }

.pclub__next {
    display: grid;
    gap: 2px;
    padding-block-start: var(--space-2xs);
    border-block-start: 1px solid rgba(255, 255, 255, 0.1);
    font-size: var(--text-xs);
}

.pclub__nextlabel {
    font-size: var(--text-3xs, 0.625rem);
    color: #8fa2c0;
}

.pclub__next a { color: #fff; text-decoration: none; font-weight: 600; }
.pclub__nextdate { font-size: var(--text-2xs); color: #8fa2c0; }

@media (max-width: 899px) {
    .phero { grid-template-columns: 1fr; padding: var(--space-m); }
    .phero__face { inline-size: 76px; block-size: 76px; }
}

/* Список матчей: счёт своей колонкой.

   Прежде колонка называлась «мячи» и содержала счёт матча — то есть
   выдавала командный счёт за голы игрока. */
.pmatches__match a { text-decoration: none; color: inherit; font-weight: 600; }
.pmatches__match a:hover { color: var(--brand-red); }

.pmatches__comp {
    display: block;
    font-size: var(--text-2xs);
    color: var(--text-faint);
}

.pmatches .col-date { inline-size: 5.5rem; font-size: var(--text-2xs); color: var(--text-faint); }

/* Путь по клубам: где играл и когда. */
.ppath { margin: 0; padding: 0 0 0 var(--space-m); list-style: none; }

.ppath__step {
    position: relative;
    display: grid;
    grid-template-columns: 8rem minmax(0, 1fr) auto;
    align-items: baseline;
    gap: var(--space-2xs);
    padding: 0.55rem 0 0.55rem var(--space-m);
    border-inline-start: 2px solid var(--border);
}

.ppath__step::before {
    content: "";
    position: absolute;
    inset-inline-start: -6px;
    inset-block-start: 1rem;
    inline-size: 10px;
    block-size: 10px;
    border-radius: 50%;
    background: var(--border-strong, var(--text-faint));
}

.ppath__step--now::before { background: var(--brand-red); }
.ppath__step--now .ppath__club { font-weight: 800; }
.ppath__years { font-size: var(--text-2xs); color: var(--text-faint); }
.ppath__club { font-size: var(--text-s); font-weight: 600; }
.ppath__games { font-size: var(--text-2xs); color: var(--text-muted); }

/* Переходы: откуда, куда и за сколько. */
.ptrans { margin: 0; padding: 0; list-style: none; }

.ptran {
    display: grid;
    grid-template-columns: 4.5rem minmax(0, 1fr) auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-2xs);
    padding: 0.5rem var(--space-2xs);
    border-block-end: 1px solid var(--border);
    font-size: var(--text-s);
}

.ptran:last-child { border-block-end: 0; }
.ptran__season { font-size: var(--text-2xs); color: var(--text-faint); }
.ptran__from { color: var(--text-muted); }
.ptran__arrow { color: var(--text-faint); }
.ptran__to { font-weight: 600; }
.ptran__fee { font-size: var(--text-xs); color: var(--text-muted); }

/* Числа сезона в боковой колонке — по два в ряд. */
.tkpi--side { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-block-end: 0; }

@media (max-width: 899px) {
    .ppath__step { grid-template-columns: 6rem minmax(0, 1fr); }
    .ppath__games { grid-column: 2; }
    .ptran { grid-template-columns: 3.5rem minmax(0, 1fr); }
    .ptran__arrow { display: none; }
}

/* Место и очки клуба — парами «число — слово». */
.pclub__stand {
    display: flex;
    justify-content: center;
    gap: var(--space-m);
    margin: 0;
}

.pclub__num { display: grid; gap: 1px; }
.pclub__num b { font-size: var(--text-l); color: #fff; font-variant-numeric: tabular-nums; }
.pclub__num span { font-size: var(--text-3xs, 0.625rem); color: #8fa2c0; }

/* Витрина с одной колонкой: боковая справка не растягивается во всю
   ширину.

   У регби нет ни ближайших матчей, ни таблиц — от трёх колонок
   остаётся одна, и карточки «Сегодня» и «Быстрый переход» вставали
   поперёк экрана на всю его ширину. */
@media (min-width: 1200px) {
    .shub__cols:not(:has(.shub__col)) {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .shub__cols:not(:has(.shub__col)) .shub__side {
        grid-column: 1 / -1;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Страница без основной колонки.

   У матча регби поставщик отдаёт один счёт: ни составов, ни
   статистики, ни хода игры. Сетка «основное — справка» оставляла
   слева пустоту во весь экран, а «Кратко о матче» жалось к правому
   краю. Здесь справка становится единственной колонкой и держится
   середины. */
.layout--aside-only {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    max-inline-size: 640px;
    margin-inline: auto;
}

.layout--aside-only > .stack-l:empty { display: none; }

/* Пустой раздел объясняет, почему он пуст.

   У регби поставщик таблиц не присылает вовсе, и страница выходила из
   заголовка, полосы видов и белого поля: читателю оставалось гадать,
   сломалось это или так задумано. */
.nodata {
    display: grid;
    justify-items: center;
    gap: var(--space-s);
    padding: var(--space-xl) var(--space-m);
    border: 1px dashed var(--border);
    border-radius: var(--radius-l, 12px);
    text-align: center;
}

.nodata__text {
    margin: 0;
    max-inline-size: 42ch;
    color: var(--text-muted);
}

/* Страница всех матчей команды. */
.tmhead { display: flex; align-items: center; gap: var(--space-s); }
.tmhead__crest { inline-size: 48px; block-size: 48px; object-fit: contain; }

.pager {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-2xs);
    margin-block: var(--space-l);
}

.pager__page {
    min-inline-size: 2.25rem;
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-m, 8px);
    background: var(--bg-elevated);
    font-size: var(--text-s);
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    color: inherit;
    font-variant-numeric: tabular-nums;
}

.pager__page:hover { border-color: var(--text-faint); }

.pager__page.is-on {
    border-color: var(--brand-red);
    background: var(--brand-red);
    color: #fff;
}

/* Полный список матчей команды: пять колонок вместо четырёх.

   На странице команды строка календаря состоит из даты, соперника,
   турнира и счёта; здесь к ним добавляется метка исхода, и без своей
   дорожки она переносилась на вторую строку. */
.tmatches--full .tmatch {
    grid-template-columns: 7.5rem minmax(0, 1fr) minmax(0, auto) 3.5rem 1.75rem;
}

.tmatches--full .tmatch__comp {
    max-inline-size: none;
    text-align: end;
}

.tmatches--full .tmatch__score { text-align: end; }
.tmatches--full .tmatch__mark { text-align: end; }

@media (max-width: 899px) {
    .tmatches--full .tmatch {
        grid-template-columns: 5.5rem minmax(0, 1fr) 3.5rem 1.75rem;
    }
    .tmatches--full .tmatch__comp { display: none; }
}

/* Фон шапки подставляется разметкой.

   Имя файла — это код вида спорта, и правило в стилях больше не нужно
   на каждый вид: достаточно положить файл в папку. Пока файла нет,
   переменная пуста, и шапка обходится градиентом. */
.thero,
.phero {
    background-image: var(--hero-image, none),
        radial-gradient(120% 140% at 15% 0%, #1f3352 0%, transparent 60%),
        linear-gradient(135deg, #101a2c 0%, #16233b 55%, #0d1526 100%);
    background-size: cover;
    background-position: center;
}

/* Содержимое шапки — поверх подложки. */
.thero > *,
.phero > * { position: relative; z-index: 1; }

/* Затемнение лёгкое, и только снизу вверх.

   Сплошная поволока в шестьдесят процентов не давала разглядеть
   снимок вовсе: от арены под прожекторами оставался чёрный
   прямоугольник. Текст держится на градиенте — плотном там, где
   буквы, и прозрачном там, где площадка. */
.thero[style*="--hero-image"],
.phero[style*="--hero-image"] {
    background-position: center 72%;
}

.thero[style*="--hero-image"]::before,
.phero[style*="--hero-image"]::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: linear-gradient(105deg,
        rgba(9, 15, 26, 0.74) 0%,
        rgba(9, 15, 26, 0.50) 40%,
        rgba(9, 15, 26, 0.14) 72%,
        rgba(9, 15, 26, 0.06) 100%);
}

/* Те же фоны — на шапке турнира и витрины вида спорта.

   Пока файла нет, переменная пуста и обе шапки выглядят как прежде:
   светлая карточка у турнира, обычный заголовок у витрины. */
.khead[style*="--hero-image"],
.shub__head[style*="--hero-image"] {
    position: relative;
    isolation: isolate;
    background-image: var(--hero-image);
    background-size: cover;
    /* Снимок смещён к низу кадра: там площадка и прожекторы, а вверху
       тёмный потолок — «по центру» вырезало ровно его. */
    background-position: center 72%;
    border-radius: var(--radius-l, 12px);
    padding: var(--space-l);
    color: #fff;
}

.khead[style*="--hero-image"]::before,
.shub__head[style*="--hero-image"]::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background: linear-gradient(105deg,
        rgba(9, 15, 26, 0.76) 0%,
        rgba(9, 15, 26, 0.52) 40%,
        rgba(9, 15, 26, 0.16) 74%,
        rgba(9, 15, 26, 0.06) 100%);
}

.khead[style*="--hero-image"] a,
.shub__head[style*="--hero-image"] a { color: #fff; }



/* На тёмном фоне светлеет весь текст шапки, а не только ссылки.

   Прежде красились ссылки, и в блоке победителя пропадала половина
   строки: «Испания 1:0» набрано обычным текстом тёмного цвета, и на
   снимке стадиона его не было видно вовсе — читатель видел одно слово
   «Аргентина» без счёта и без соперника. */
.khead[style*="--hero-image"],
.khead[style*="--hero-image"] b,
.khead[style*="--hero-image"] span,
.khead[style*="--hero-image"] p,
.shub__head[style*="--hero-image"],
.shub__head[style*="--hero-image"] b,
.shub__head[style*="--hero-image"] span,
.shub__head[style*="--hero-image"] p { color: #F2F6FF; }

/* Плашки на тёмном: своя подложка вместо светлой. */
.khead[style*="--hero-image"] .ktag,
.shub__head[style*="--hero-image"] .ktag {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.24);
}

/* Приглушённые подписи остаются приглушёнными, но по-светлому. */
.khead[style*="--hero-image"] .kwin__cap,
.khead[style*="--hero-image"] .kwin__finalcap,
.shub__head[style*="--hero-image"] .shub__daylabel,
.shub__head[style*="--hero-image"] .shub__sub,
.shub__head[style*="--hero-image"] .faint {
    color: rgba(242, 246, 255, 0.72);
}

/* Состояние турнира остаётся красным: это метка, а не подпись. */
.khead[style*="--hero-image"] .ktag--live {
    background: var(--brand-red);
    border-color: var(--brand-red);
    color: #fff;
}

/* Плитка чисел дня на тёмной шапке.

   Её подложка светлая, и по ней шёл теперь светлый текст: числа дня
   пропадали целиком. На снимке стадиона подложка должна быть тёмной. */
.shub__head[style*="--hero-image"] .shub__day {
    background: rgba(9, 15, 26, 0.55);
    border-color: rgba(255, 255, 255, 0.16);
}

.shub__head[style*="--hero-image"] .shub__daycell:hover {
    background: rgba(255, 255, 255, 0.08);
}

/* Значок вида спорта — светлым по тёмному. */
.shub__head[style*="--hero-image"] .shub__icon {
    color: rgba(242, 246, 255, 0.9);
}

/* Подложка шапки, пока нет фотографии.

   Фон подставляется файлом, но до его появления шапка оставалась
   плоской заливкой. Рисунок здесь не изображает стадион — он даёт
   глубину: два световых конуса сверху, как от прожекторов, и мягкая
   виньетка по краям. Когда файл появится, снимок ляжет поверх и
   рисунок скроется. */
.thero:not([style*="--hero-image"]),
.phero:not([style*="--hero-image"]) {
    background-image:
        radial-gradient(60% 90% at 22% -10%, rgba(120, 170, 255, 0.16) 0%, transparent 55%),
        radial-gradient(50% 80% at 78% -10%, rgba(120, 170, 255, 0.12) 0%, transparent 55%),
        linear-gradient(180deg, transparent 55%, rgba(0, 0, 0, 0.35) 100%),
        radial-gradient(120% 140% at 15% 0%, #1f3352 0%, transparent 60%),
        linear-gradient(135deg, #101a2c 0%, #16233b 55%, #0d1526 100%);
}

/* Тонкая сетка поля понизу — намёк на разметку, а не её изображение. */
.thero:not([style*="--hero-image"])::after,
.phero:not([style*="--hero-image"])::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    inset-block-end: 0;
    block-size: 45%;
    background-image:
        repeating-linear-gradient(90deg,
            rgba(255, 255, 255, 0.04) 0 1px, transparent 1px 96px),
        repeating-linear-gradient(0deg,
            rgba(255, 255, 255, 0.03) 0 1px, transparent 1px 64px);
    mask-image: linear-gradient(180deg, transparent 0%, #000 100%);
    pointer-events: none;
}

.thero,
.phero { position: relative; overflow: hidden; }

/* Флаг страны у турнира, если своего знака нет.

   В расписании заголовок блока называет страну — «Кубок вызова,
   Англия»: одинаковых «Премьер-лиг» у нас десяток, и без страны они
   неразличимы. Знак турнира важнее флага, поэтому флаг встаёт только
   там, где знака нет. */
.lgblock__flag {
    inline-size: 22px;
    block-size: 16px;
    object-fit: cover;
    border-radius: 2px;
    flex: none;
}

/* Переход по дням под расписанием.

   Дочитав список до конца, читатель хочет соседний день, а не подъём
   наверх за стрелками. */
.daynav--bottom {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-m);
    margin-block: var(--space-l);
    padding: var(--space-s) var(--space-m);
    border: 1px solid var(--border);
    border-radius: var(--radius-l, 12px);
    background: var(--bg-elevated);
}

.daynav--bottom .daynav__step {
    font-size: var(--text-s);
    font-weight: 600;
    color: var(--text-muted);
    text-decoration: none;
    white-space: nowrap;
}

.daynav--bottom .daynav__step:hover { color: var(--brand-red); }
.daynav--bottom .daynav__today { font-size: var(--text-s); font-weight: 700; }

.daynav__mark {
    margin-inline-start: 6px;
    padding: 1px 6px;
    border-radius: 999px;
    background: var(--brand-red);
    color: #fff;
    font-size: var(--text-3xs, 0.625rem);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Текст под расписанием: объяснение и ссылки вглубь.

   Голая таблица матчей ничего не рассказывает о странице ни читателю,
   ни поисковику. */
.mseo {
    margin-block: var(--space-l);
    padding: var(--space-m);
    border: 1px solid var(--border);
    border-radius: var(--radius-l, 12px);
    background: var(--bg-elevated);
}

.mseo__head { margin: 0 0 var(--space-2xs); font-size: var(--text-m); }

.mseo__text {
    margin: 0;
    max-inline-size: 78ch;
    font-size: var(--text-s);
    color: var(--text-muted);
    line-height: 1.6;
}

.mseo__links { margin: var(--space-s) 0 0; font-size: var(--text-s); }
.mseo__label { color: var(--text-faint); }
.mseo__links a { color: var(--brand-red); text-decoration: none; }
.mseo__links a:hover { text-decoration: underline; }

/* Ссылка «смотреть все» под вкладкой дня.

   В шапке карточки она стояла бы над переключателем и вела бы в общее
   расписание, а не в день, который читатель выбрал. Под списком она
   продолжает его: дочитал семь матчей — вот остальные. */
.shub__more--under {
    display: inline-block;
    margin-block-start: var(--space-xs);
}

/* Вкладки в строку — для коротких подписей.

   Обычные вкладки свёрнуты в раскрывающийся список: названий турниров
   бывает восемь, и в строку они не помещаются. У дней подписи
   короткие — «Сегодня», «Завтра», «28 авг», — и прятать их незачем:
   свёрнутый список скрывал от читателя сам факт, что завтрашний день
   на странице есть. */
.tabs--row .tabs__strip { height: auto; }

.tabs--row .tabs__menu {
    position: static;
    display: flex;
    flex-wrap: wrap;
    max-width: none;
    gap: 4px;
    padding: 0;
    margin: 0;
}

.tabs--row .tabs__label {
    display: flex;
    padding: 4px 10px;
    border: 1px solid var(--border);
    color: var(--text-muted);
}

/* Выбранный день — красным, как все активные состояния на сайте:
   кнопка раздела, вкладка матч-центра, метка LIVE. */
.tabs--row .tabs__input:checked + .tabs__label {
    order: 0;
    background: var(--brand-red);
    border-color: var(--brand-red);
    color: #fff;
}

.tabs--row .tabs__input:checked + .tabs__label::after { content: none; }

.tabs--row .tabs__strip:hover .tabs__menu,
.tabs--row .tabs__strip:focus-within .tabs__menu {
    background: none;
    border: 0;
    box-shadow: none;
}

.tabs--row .tabs__strip:hover .tabs__label:hover {
    background: var(--bg-subtle);
    color: var(--text);
}

.tabs--row .tabs__strip:hover .tabs__input:checked + .tabs__label:hover {
    background: var(--brand-red);
    color: #fff;
}

/* Подписи к цветным полосам турнирной таблицы. */
.zlegend {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2xs) var(--space-s);
    margin: var(--space-2xs) 0 0;
    padding-block-start: var(--space-2xs);
    border-block-start: 1px solid var(--border);
    font-size: var(--text-2xs);
    color: var(--text-faint);
}

.zlegend__item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.zlegend__item::before {
    content: "";
    inline-size: 3px;
    block-size: 12px;
    border-radius: 2px;
    background: var(--border-strong, var(--border));
}

.zlegend .zone--champion::before { background: var(--accent); }
.zlegend .zone--europe::before { background: var(--data); }
.zlegend .zone--relegation::before { background: var(--live); }

/* Полосы зон в укороченной таблице страны — те же, что в полной. */
.zone .mtable__pos {
    position: relative;
    padding-inline-start: 10px;
}

.zone .mtable__pos::before {
    content: "";
    position: absolute;
    inset-block: 3px;
    inset-inline-start: 0;
    width: 3px;
    border-radius: 2px;
    background: var(--border);
}

.zone--champion .mtable__pos::before { background: var(--accent); }
.zone--europe .mtable__pos::before { background: var(--data); }
.zone--relegation .mtable__pos::before { background: var(--live); }

/* Алфавитный указатель каталога команд. */
.alpha {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-block-end: var(--space-m);
}

.alpha__b {
    display: inline-block;
    min-inline-size: 1.75rem;
    padding: 4px 8px;
    border-radius: var(--radius-s, 6px);
    color: var(--text-muted);
    font-family: inherit;
    font-size: var(--text-xs);
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}

.alpha__b:hover { color: var(--text); border-color: var(--border-strong, var(--text-faint)); }

.alpha__b.is-on {
    background: var(--brand-red);
    border-color: var(--brand-red);
    color: #fff;
}

/* Состав: шестнадцать на виду, остальные под кнопкой.

   У сборной в списке под полсотни игроков — все, кто выходил на поле
   за год, — и таблица занимала три экрана. Скрытые строки остаются в
   разметке: их видит поисковик, и отбор по позиции работает по всем. */
.squad__row--extra { display: none; }

.panel:has(.squad__toggle:checked) .squad__row--extra { display: table-row; }
.panel:has(.squad__toggle:checked) .squad__more { display: none; }

.squad__more {
    display: block;
    margin: var(--space-2xs) var(--space-m) var(--space-m);
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-m, 8px);
    background: var(--bg-elevated);
    color: var(--brand-red);
    font-size: var(--text-s);
    font-weight: 600;
    text-align: center;
    cursor: pointer;
}

.squad__more:hover { border-color: var(--brand-red); }

/* ------------------------------------------------------------ прогнозы
 *
 * Страница шла одним потоком из сорока одинаковых карточек: после
 * пятой глаз переставал различать события. Сводка наверху, отбор
 * вкладками, ожидающие и проверенные порознь, карточка с разделёнными
 * вероятностью и коэффициентом. */
.pacc {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-l);
    align-items: center;
    justify-content: space-between;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-l);
    padding: var(--space-m) var(--space-l);
    margin-block-end: var(--space-m);
}

.pacc__cap {
    margin: 0;
    font-size: var(--text-2xs);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-faint);
}

.pacc__value {
    margin: 2px 0 0;
    font-family: var(--font-mono);
    font-size: clamp(2.4rem, 5vw, 3.4rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.04em;
    color: var(--accent);
}

/* Процент никогда не стоит отдельно от размера выборки: «57%» без
   «120 из 209» не значит ничего. */
.pacc__sample {
    margin: 4px 0 0;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--text-faint);
}

.pacc__nums {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-m);
    flex: 1 1 420px;
}

.pacc__num {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: var(--text-2xs);
    color: var(--text-faint);
}

.pacc__n {
    font-family: var(--font-mono);
    font-size: var(--text-xl);
    font-weight: 800;
    color: var(--text);
}

.pacc__n--hit { color: var(--win, #17845A); }
.pacc__n--miss { color: var(--live); }

.pfilters {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-block-end: var(--space-m);
}

.pfilter {
    padding: 6px 14px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--bg-elevated);
    color: var(--text-muted);
    font-size: var(--text-s);
    font-weight: 600;
    text-decoration: none;
}

.pfilter:hover { color: var(--text); border-color: var(--text-faint); }

.pfilter.is-on {
    background: var(--brand-red);
    border-color: var(--brand-red);
    color: #fff;
}

.pcards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--space-2xs);
    padding: 0 var(--space-m) var(--space-m);
}

.pcard {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: var(--space-s) var(--space-m);
    border: 1px solid var(--border);
    border-radius: var(--radius-m, 10px);
    min-inline-size: 0;
}

/* Цветом отмечается только исход прогноза — не весь интерфейс. */
.pcard--hit { border-inline-start: 3px solid var(--win, #17845A); }
.pcard--miss { border-inline-start: 3px solid var(--live); }

.pcard__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2xs);
}

.pcard__comp {
    min-inline-size: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--text-2xs);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-faint);
}

.pcard__teams {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 6px;
    font-size: var(--text-s);
    font-weight: 600;
}

.pcard__team {
    display: flex;
    align-items: center;
    gap: 6px;
    min-inline-size: 0;
}

.pcard__team > span {
    min-inline-size: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pcard__team--away { justify-content: flex-end; text-align: end; }
.pcard__crest { inline-size: 26px; block-size: 26px; flex: none; object-fit: contain; }
.pcard__vs { color: var(--text-faint); }

.pcard__cap {
    margin: 4px 0 0;
    font-size: var(--text-2xs);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-faint);
}

.pcard__pick {
    margin: 0;
    font-size: var(--text-m);
    font-weight: 700;
}

.pcard__pick a { color: inherit; text-decoration: none; }
.pcard__pick a:hover { color: var(--brand-red); }

/* Вероятность и коэффициент — разные величины, и стоят они порознь:
   в одной строке через точку они читались как одно число. */
.pcard__nums {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-s);
    font-size: var(--text-2xs);
    color: var(--text-faint);
}

.pcard__conf b {
    font-family: var(--font-mono);
    font-size: var(--text-l);
    font-weight: 800;
    color: var(--text);
}

.pcard__odds b {
    font-family: var(--font-mono);
    font-size: var(--text-m);
    color: var(--text);
}

.pcard__when {
    margin: 0;
    font-size: var(--text-2xs);
    color: var(--text-faint);
}

/* Калибровка: точность там, где модель уверена, и там, где нет. */
.pcal { list-style: none; margin: 0; padding: 0; }

.pcal__row {
    display: grid;
    grid-template-columns: 3.6rem minmax(0, 1fr) 2.4rem;
    align-items: center;
    gap: 8px;
    padding-block: 7px;
    font-size: var(--text-2xs);
}

.pcal__range { font-family: var(--font-mono); color: var(--text-muted); }

.pcal__bar {
    block-size: 6px;
    border-radius: 3px;
    background: var(--bg-sunken);
    overflow: hidden;
}

.pcal__fill { display: block; block-size: 100%; background: var(--win, #17845A); }
.pcal__pct { font-family: var(--font-mono); text-align: end; font-weight: 700; }

/* Размер выборки — под строкой: без него процент не значит ничего. */
.pcal__sample {
    grid-column: 2 / -1;
    font-family: var(--font-mono);
    color: var(--text-faint);
}

.phow {
    margin: 0;
    padding-inline-start: 1.1rem;
    display: grid;
    gap: 6px;
    font-size: var(--text-s);
    color: var(--text-muted);
}

/* Заглушка находки: первая буква названия вместо пустого круга —
   серое пятно читается как незагрузившаяся картинка. */
.sres__pic--letter {
    display: grid;
    place-items: center;
    background: var(--bg-sunken);
    color: var(--text-faint);
    font-weight: 800;
    font-size: var(--text-s);
    text-transform: uppercase;
}

.pfilter__n {
    margin-inline-start: 4px;
    font-family: var(--font-mono);
    font-size: var(--text-2xs);
    opacity: 0.7;
}

/* Кнопка-вкладка выглядит как ссылка-вкладка рядом. */
button.pfilter {
    font-family: inherit;
    cursor: pointer;
}

/* Главный материал ленты — крупной карточкой.

   Прежде восемь новостей шли одинаковыми плитками, и какая из них
   важнее, страница не говорила: читатель начинал с левой верхней
   просто потому, что она левая верхняя. */
.lead-card {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: 0;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-l);
    overflow: hidden;
    margin-block-end: var(--space-m);
}

@media (max-width: 720px) {
    .lead-card { grid-template-columns: minmax(0, 1fr); }
}

.lead-card__pic {
    display: block;
    position: relative;
    min-block-size: 240px;
    background: var(--bg-sunken);
}

.lead-card__pic img {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
}

/* Пока обложек нет, место под них держит спокойная заливка: пустая
   рамка читалась бы как несработавшая картинка. */
.lead-card__ph {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(120% 140% at 20% 0%, rgba(255, 255, 255, 0.16), transparent 60%),
        linear-gradient(135deg, #16233b, #0d1526);
}

.lead-card__body {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
    padding: var(--space-m) var(--space-l);
    justify-content: center;
}

.lead-card__eyebrow {
    margin: 0;
    font-size: var(--text-2xs);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--brand-red);
}

.lead-card__title {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(1.35rem, 2.4vw, 1.9rem);
    line-height: 1.15;
}

.lead-card__title a { color: inherit; text-decoration: none; }
.lead-card__title a:hover { color: var(--brand-red); }

.lead-card__lead {
    margin: 0;
    color: var(--text-muted);
    font-size: var(--text-m);
}

.lead-card__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-s);
    margin: var(--space-2xs) 0 0;
    font-size: var(--text-xs);
    color: var(--text-faint);
}

.lead-card__more { color: var(--brand-red); text-decoration: none; font-weight: 600; }

/* Пометка о единственном источнике: тот же размер, что у проверенной,
   но знак другой — галочка обещала бы проверку, которой не было. */
.verified__mark--single {
    background: var(--bg-sunken);
    color: var(--text-faint);
    font-style: italic;
    font-weight: 700;
}

/* ------------------------------------------------------------- главная
 *
 * Прежде страница шла вертикальной выгрузкой: «Главное», потом футбол,
 * гандбол, хоккей, крикет, баскетбол и волейбол — каждый вид своей
 * секцией на полтора экрана. До последних читатель не доходил.
 * Теперь первый экран отвечает на три вопроса сразу: что важного
 * случилось, что идёт прямо сейчас и куда пойти дальше. */
.home-head { margin-block-end: var(--space-m); }

.home-head__title {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(1.9rem, 3.6vw, 2.6rem);
    font-weight: 800;
    letter-spacing: -0.02em;
}

.home-head__note {
    margin: 4px 0 0;
    color: var(--text-muted);
    font-size: var(--text-m);
}

.home-head__date {
    margin: 2px 0 0;
    color: var(--text-faint);
    font-size: var(--text-xs);
}

.home-top {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-m);
    align-items: start;
    margin-block-end: var(--space-l);
}

@media (min-width: 1000px) {
    /* Основное во всю ширину, справка под ним: правая колонка на
       340px оставляла половину экрана пустой, когда список слева
       кончался. */
    .home-top { grid-template-columns: minmax(0, 1fr); }
}

.home-top__main { min-inline-size: 0; }

/* Справка главной идёт под основным во всю ширину и делится надвое:
   узкой колонкой справа она резала списки и оставляла под собой
   пустоту в половину экрана. */
.home-top__side {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    align-items: start;
    gap: var(--space-m);
    align-content: start;
    min-inline-size: 0;
}

/* Ведущая новость на главной выше, чем в ленте: это первый экран. */
.lead-card--home .lead-card__pic { min-block-size: 300px; }

/* Карточки турниров в узкой колонке: знак слева, название справа.

   По две в ряд они не помещались: «Национальная баскетбольная
   ассоциация» обрывалась на середине даже в две строки, а под знаком
   лиги оставалось пустое место. В одну колонку названию хватает
   ширины, и восемь турниров занимают ту же высоту, что раньше
   занимали шесть. */
/* Главные турниры — одним рядом во всю ширину, последней карточкой
   переход ко всем таблицам.

   В два столбца они шли лесенкой на четыре ряда и занимали пол-экрана,
   хотя каждая карточка — знак и название. */
.lgcards--home {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    grid-template-columns: none;
    gap: var(--space-2xs);
}

.lgcards--home .lgcard {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    align-content: start;
    text-align: center;
    gap: 5px;
    padding: var(--space-xs) 5px;
    min-inline-size: 0;
}

.lgcards--home .lgcard__logo {
    inline-size: 30px;
    block-size: 30px;
    grid-row: auto;
}

.lgcards--home .lgcard__name {
    font-size: var(--text-2xs);
    line-height: 1.2;
    -webkit-line-clamp: 2;
}

/* Страна повторяет то, что уже говорит название лиги, и в узкой
   карточке отнимает у него строку. */
.lgcards--home .lgcard__country { display: none; }

.lgcards--home .lgcard--more { align-content: center; }
.lgcards--home .lgcard__arrow { font-size: var(--text-l); }

/* На узком экране ряд из девяти карточек нечитаем. */
@media (max-width: 900px) {
    .lgcards--home {
        grid-auto-flow: row;
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    }
}

.home-cols {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-m);
    margin-block: var(--space-l);
}

@media (min-width: 900px) {
    .home-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Колонки выравниваются по высоте.
 *
 * Прогнозов пять, разборов четыре, новостей три — карточки кончались
 * на разной высоте, и нижний край блока выходил ступеньками. Растянуть
 * их проще, чем подбирать число строк: содержимое прижимается к верху,
 * а свободное место остаётся внизу карточки. */
.home-cols > .mcard {
    display: flex;
    flex-direction: column;
}

.home-cols > .mcard > .section-head { flex: 0 0 auto; }

.home-preds {
    display: grid;
    gap: var(--space-2xs);
    padding: 0 var(--space-m) var(--space-m);
}

.pmini {
    display: grid;
    gap: 3px;
    padding: var(--space-2xs) 0;
    border-block-start: 1px solid var(--border);
}

.pmini:first-child { border-block-start: 0; }

.pmini__comp {
    margin: 0;
    font-size: var(--text-2xs);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-faint);
}

.pmini__teams {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    margin: 0;
    font-size: var(--text-s);
    font-weight: 600;
}

.pmini__vs {
    font-style: normal;
    opacity: 0.45;
}

/* Длинное название не выталкивает герб за край карточки. */
.pmini__name { min-width: 0; }

.pmini__pick { margin: 0; font-size: var(--text-s); }
.pmini__pick a { color: var(--brand-red); text-decoration: none; }

.pmini__nums {
    display: flex;
    justify-content: space-between;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--text-muted);
}

.pmini__nums b { color: var(--text); }

.hrev, .hnews { list-style: none; margin: 0; padding: 0 var(--space-m) var(--space-m); }

.hrev__row a, .hnews__row a {
    display: flex;
    align-items: baseline;
    gap: var(--space-2xs);
    padding-block: 9px;
    border-block-start: 1px solid var(--border);
    color: var(--text);
    text-decoration: none;
    font-size: var(--text-s);
}

.hrev__row:first-child a, .hnews__row:first-child a { border-block-start: 0; }
.hrev__row a:hover, .hnews__row a:hover { color: var(--brand-red); }

/* Разбор в колонке главной: турнир сверху, под ним пара с гербами и
   счётом, справа дата. Строкой текста это не читалось. */
.hrev__row a {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    column-gap: var(--space-2xs);
    row-gap: 2px;
}

.hrev__comp {
    grid-column: 1 / -1;
    color: var(--text-faint);
    font-size: var(--text-2xs);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hrev__teams {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    min-inline-size: 0;
    font-weight: 600;
}

.hrev__name { min-width: 0; }

.hrev__score {
    padding-inline: 2px;
    font-weight: 700;
}

.hrev__dash { font-style: normal; opacity: 0.4; }

.hrev__date {
    flex: none;
    align-self: center;
    color: var(--text-faint);
    font-size: var(--text-2xs);
}

.hrev__meta {
    display: flex;
    gap: var(--space-2xs);
    align-items: baseline;
    color: var(--text-faint);
    font-size: var(--text-2xs);
}

.hnews__time {
    flex: none;
    font-family: var(--font-mono);
    font-size: var(--text-2xs);
    color: var(--text-faint);
}

.hnews__title { min-inline-size: 0; }

/* Известные команды и игроки внизу главной. */
.hpop {
    display: grid;
    gap: var(--space-m);
    padding: 0 var(--space-m) var(--space-m);
}

@media (min-width: 900px) {
    .hpop { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.hpop__cap {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-s);
    margin-block-end: var(--space-2xs);
    font-size: var(--text-2xs);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-faint);
}

.hpop__cap a { color: var(--brand-red); text-decoration: none; }

.hpop__row {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: var(--space-2xs);
}

.hpop__item {
    display: grid;
    justify-items: center;
    gap: 4px;
    padding: var(--space-2xs);
    border: 1px solid var(--border);
    border-radius: var(--radius-m, 8px);
    color: inherit;
    text-decoration: none;
    text-align: center;
}

.hpop__item:hover { border-color: var(--brand-red); }

.hpop__pic {
    inline-size: 34px;
    block-size: 34px;
    object-fit: contain;
}

.hpop__pic--face { border-radius: 50%; object-fit: cover; }

/* Пока портретов нет — первая буква имени, а не серый круг. */
.hpop__pic--none {
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--bg-sunken);
    color: var(--text-faint);
    font-weight: 800;
}

.hpop__name {
    font-size: var(--text-xs);
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-inline-size: 100%;
}

.hpop__note {
    font-size: var(--text-2xs);
    color: var(--text-faint);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-inline-size: 100%;
}

/* Две полосы отбора прогнозов: по сроку и по состоянию. */
.pbars {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-s) var(--space-l);
    align-items: center;
    margin-block-end: var(--space-m);
}

.pbars .pfilters { margin-block-end: 0; }

/* Каталог команд: те же три колонки, что у таблиц.

   Фильтры стояли строкой над каталогом и уезжали вместе с первым
   экраном: дочитав до Аргентины, читатель не мог ни сменить тип, ни
   выбрать страну, не возвращаясь наверх. */
.tlayout--teams .tpick__card + .tpick__card { margin-block-start: var(--space-m); }

@media (min-width: 1280px) {
    .tlayout--teams:has(.tside) { grid-template-columns: 230px minmax(0, 1fr) 260px; }
}

/* Первый экран без материалов: содержимое боковой колонки идёт
   широкой сеткой, а не узкой полосой справа от пустоты. */
.home-top--wide { grid-template-columns: minmax(0, 1fr) !important; }
.home-top--wide .home-top__main { display: none; }

@media (min-width: 900px) {
    .home-top--wide .home-top__side {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        align-items: start;
    }
}

/* Подзаголовок внутри карточки фильтров. */
.tpick__sub {
    margin: var(--space-s) 0 var(--space-3xs);
    font-size: var(--text-2xs);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-faint);
}


/* ================================================= матч стопкой

   Боковая колонка узкая: в одну строку «Коннектикут Сан 48 : 74
   Лас-Вегас Эйсес» не помещается никак — от названий оставались первые
   пять букв с многоточием. Стопкой каждой команде достаётся вся
   ширина, счёт стоит справа от своей строки, а сверху — минута и
   турнир. */

.mstack {
    list-style: none;
    margin: 0;
    padding: 0 var(--space-m) var(--space-m);
    display: grid;
    gap: 2px;
}

.mstack__row {
    display: grid;
    gap: 3px;
    padding: 9px 10px;
    border-radius: var(--radius-m);
    color: inherit;
    text-decoration: none;
}

.mstack__row:hover,
.mstack__row:focus-visible { background: var(--bg-subtle); }

.mstack__head {
    display: flex;
    align-items: baseline;
    gap: var(--space-2xs);
    font-size: var(--text-2xs);
    color: var(--text-faint);
    min-width: 0;
}

.mstack__live {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex: none;
    color: var(--live);
    font-weight: 700;
}

.mstack__time {
    flex: none;
    font-family: var(--font-mono);
}

.mstack__comp {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mstack__side {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    font-size: var(--text-s);
}

.mstack__team {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mstack__num {
    flex: none;
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

/* Победитель выделен весом, а не цветом: в списке идущих матчей
   красный уже занят отметкой LIVE. */
.mstack__side.is-winner { font-weight: 700; }


/* ================================================= серия пенальти

   В ленте матча серия разворачивалась двумя десятками строк с минутами
   «120+7», «120+11» — таких минут в футболе нет, а лента вырастала
   вдвое. Здесь два ряда кружков: закрашенный — забил, пустой — нет, и
   итог серии рядом с заголовком. */

.pens {
    display: grid;
    gap: var(--space-2xs);
    padding: 0 var(--space-m) var(--space-m);
}

.pens__row {
    display: grid;
    grid-template-columns: minmax(0, 14rem) minmax(0, 1fr);
    align-items: center;
    gap: var(--space-s);
}

.pens__team {
    display: flex;
    align-items: center;
    gap: var(--space-2xs);
    min-width: 0;
    font-weight: 600;
    font-size: var(--text-s);
}

.pens__name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pens__kicks {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.pens__kick {
    inline-size: 14px;
    block-size: 14px;
    border-radius: 50%;
    border: 2px solid var(--border-strong);
    background: transparent;
}

.pens__kick.is-scored {
    border-color: var(--win);
    background: var(--win);
}

.pens__total {
    font-weight: 800;
    font-size: var(--text-m);
}

@media (max-width: 640px) {
    .pens__row { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}


/* Кнопка «все показатели» под статистикой матча. */
.statmore { padding: 0 var(--space-m) var(--space-m); }

.statmore__toggle {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 13px;
    border: 1px solid var(--border);
    border-radius: var(--radius-m);
    font-size: var(--text-s);
    font-weight: 600;
    color: var(--text-muted);
    list-style: none;
}

.statmore__toggle::-webkit-details-marker { display: none; }
.statmore__toggle::after { content: "▾"; opacity: 0.6; }
.statmore[open] .statmore__toggle::after { content: "▴"; }
.statmore__toggle:hover { border-color: var(--accent); color: var(--accent); }
.statmore .statbars { padding-inline: 0; padding-block-start: var(--space-s); }


/* ================================================= конец материала

   Дочитав заметку, читатель упирался в подвал: ни ссылки на другой
   материал, ни возможности отправить эту. Здесь и то и другое. */

.share {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2xs);
    margin-block: var(--space-l);
}

.share__label {
    color: var(--text-faint);
    font-size: var(--text-xs);
    margin-inline-end: var(--space-2xs);
}

.share__btn {
    padding: 6px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-m);
    background: var(--bg-elevated);
    color: inherit;
    text-decoration: none;
    font-size: var(--text-xs);
    font-weight: 600;
}

.share__btn:hover { border-color: var(--accent); color: var(--accent); }

.artmore { margin-block-start: var(--space-l); }

.artmore__list {
    list-style: none;
    margin: 0;
    padding: 0 var(--space-m) var(--space-m);
    display: grid;
    gap: 2px;
}

.artmore__row a {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    gap: var(--space-s);
    align-items: center;
    padding: var(--space-2xs);
    border-radius: var(--radius-m);
    text-decoration: none;
    color: inherit;
}

.artmore__row a:hover { background: var(--bg-subtle); }

.artmore__pic {
    inline-size: 96px;
    block-size: 64px;
    object-fit: cover;
    border-radius: var(--radius-s);
}

.artmore__text { display: grid; gap: 2px; min-width: 0; }

.artmore__eyebrow {
    font-size: var(--text-2xs);
    color: var(--brand-red);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.artmore__title { font-weight: 600; }
.artmore__date { font-size: var(--text-2xs); color: var(--text-faint); }

@media (max-width: 520px) {
    .artmore__row a { grid-template-columns: 72px minmax(0, 1fr); }
    .artmore__pic { inline-size: 72px; block-size: 52px; }
}


/* Ближайший матч карточкой в колонке страницы команды.

   В общем календаре он стоял седьмой строкой сверху, между сыгранными,
   а спрашивают о нём первым: когда и с кем. */
.tnext {
    display: grid;
    gap: var(--space-2xs);
    padding: var(--space-s);
    text-decoration: none;
    color: inherit;
}

.tnext:hover { background: var(--bg-subtle); }

.tnext__comp {
    font-size: var(--text-2xs);
    color: var(--text-faint);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tnext__pair {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: var(--space-2xs);
    text-align: center;
}

.tnext__side {
    display: grid;
    justify-items: center;
    gap: 4px;
    min-width: 0;
}

.tnext__name {
    font-size: var(--text-xs);
    font-weight: 600;
    max-inline-size: 100%;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.tnext__vs { color: var(--text-faint); }

.tnext__when {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: var(--text-xs);
    color: var(--text-muted);
}

.tnext__side-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 18px;
    block-size: 18px;
    border-radius: var(--radius-s);
    background: var(--bg-sunken);
    font-size: var(--text-2xs);
    font-weight: 700;
}


/* Очные встречи и «как считается» на странице прогноза.

   Пока к прогнозу нет текста, страница состояла из одной строки со
   ставкой — числа, на которых эта ставка стоит, читателю нужнее
   пересказа.

   Правила ограничены страницей прогноза. Без этого они перекрывали
   тот же список на странице матча: там в строке четыре ячейки —
   дата, хозяин, счёт, гость, — а сетка в три колонки сминала
   названия команд до многоточия. */

.prlayout .h2hlist {
    list-style: none;
    margin: 0;
    padding: 0 var(--space-m) var(--space-m);
}

.prlayout .h2hlist a {
    display: grid;
    grid-template-columns: 4.5rem minmax(0, 1fr) auto;
    gap: var(--space-2xs);
    align-items: center;
    padding-block: 9px;
    border-block-start: 1px solid var(--border);
    color: inherit;
    text-decoration: none;
    font-size: var(--text-s);
}

.prlayout .h2hlist li:first-child a { border-block-start: 0; }
.prlayout .h2hlist a:hover { color: var(--brand-red); }

.h2hlist__date { color: var(--text-faint); font-size: var(--text-2xs); }
.h2hlist__teams { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.h2hlist__score { font-weight: 700; }

.phow__list {
    margin: 0;
    padding: 0 var(--space-m) var(--space-m) calc(var(--space-m) + 1.1em);
    color: var(--text-muted);
    font-size: var(--text-s);
    display: grid;
    gap: 6px;
}


/* Итог очных встреч на странице прогноза: две команды и число побед у
   каждой, ничьи посередине. */
.h2hscore {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: var(--space-s);
    padding: var(--space-s) var(--space-m);
}

.h2hscore__side {
    display: flex;
    align-items: center;
    gap: var(--space-2xs);
    min-width: 0;
    font-size: var(--text-s);
}

.h2hscore__side--away { justify-content: flex-end; }

.h2hscore__name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
}

.h2hscore__n {
    font-size: var(--text-l);
    font-weight: 800;
}

.h2hscore__draws {
    display: grid;
    justify-items: center;
    color: var(--text-faint);
    font-size: var(--text-2xs);
}

@media (max-width: 560px) {
    .h2hscore { grid-template-columns: minmax(0, 1fr) auto; row-gap: 6px; }
    .h2hscore__side--away { justify-content: flex-start; }
    .h2hscore__draws { grid-column: 2; grid-row: 1 / span 2; }
}


/* ================================================= страница поиска

   По разбору: крупное поле, вкладки со счётчиками, лучшее совпадение
   отдельной карточкой, находки строками со стрелкой и колонка
   уточнения справа. Прежде это был список под полем ввода. */

.sbig {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    padding: 6px 6px 6px var(--space-s);
    border: 1px solid var(--border);
    border-radius: var(--radius-l);
    background: var(--bg-elevated);
    margin-block-end: var(--space-m);
}

.sbig__icon {
    inline-size: 20px;
    block-size: 20px;
    flex: none;
    fill: none;
    stroke: var(--text-faint);
    stroke-width: 2;
}

.sbig__input {
    flex: 1;
    min-inline-size: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font-size: var(--text-m);
    padding-block: 10px;
}

.sbig__input:focus { outline: none; }

.sbig__go {
    flex: none;
    padding: 10px 20px;
    border: 0;
    border-radius: var(--radius-m);
    background: var(--brand-red);
    color: #fff;
    font-weight: 700;
    cursor: pointer;
}

.stabs {
    display: flex;
    gap: var(--space-xs);
    overflow-x: auto;
    border-block-end: 1px solid var(--border);
    margin-block-end: var(--space-m);
}

.stab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 4px;
    border: 0;
    border-block-end: 2px solid transparent;
    background: transparent;
    color: var(--text-muted);
    font-size: var(--text-s);
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

.stab.is-on { color: var(--brand-red); border-block-end-color: var(--brand-red); }
.stab__n { color: var(--text-faint); font-variant-numeric: tabular-nums; }

.slayout { display: grid; gap: var(--space-l); align-items: start; }

@media (min-width: 960px) {
    .slayout { grid-template-columns: minmax(0, 1fr) 300px; }
}

.sbest { margin-block-end: var(--space-m); }

.sbest__cap {
    margin: 0 0 var(--space-2xs);
    font-size: var(--text-2xs);
    color: var(--text-faint);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.sbest__card {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-m);
    padding: var(--space-m);
    border: 1px solid var(--border);
    border-radius: var(--radius-l);
    background: var(--bg-elevated);
    text-decoration: none;
    color: inherit;
}

.sbest__card:hover { border-color: var(--brand-red); }

.sbest__pic {
    inline-size: 72px;
    block-size: 72px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--bg-sunken);
}

.sbest__pic--letter {
    display: grid;
    place-items: center;
    font-size: var(--text-xl);
    font-weight: 800;
    color: var(--text-faint);
}

.sbest__body { display: grid; gap: 4px; min-width: 0; }
.sbest__name { font-size: var(--text-l); font-weight: 800; }
.sbest__line { color: var(--text-muted); font-size: var(--text-s); }

.sbest__go {
    flex: none;
    padding: 9px 16px;
    border: 1px solid var(--brand-red);
    border-radius: var(--radius-m);
    color: var(--brand-red);
    font-weight: 700;
    font-size: var(--text-s);
    white-space: nowrap;
}

.sgroup__n {
    color: var(--text-faint);
    font-weight: 600;
    font-size: var(--text-s);
}

.sres__chev { color: var(--text-faint); font-size: var(--text-l); }

.sfacets { list-style: none; margin: 0; padding: 0 var(--space-m) var(--space-m); display: grid; gap: 2px; }

.sfacet {
    inline-size: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2xs);
    padding: 8px 10px;
    border: 0;
    border-radius: var(--radius-m);
    background: transparent;
    color: inherit;
    font-size: var(--text-s);
    cursor: pointer;
    text-align: start;
}

.sfacet:hover { background: var(--bg-subtle); }
.sfacet.is-on { background: var(--bg-sunken); font-weight: 700; }
.sfacet__n { color: var(--text-faint); font-variant-numeric: tabular-nums; }

.chips--side { padding: 0 var(--space-m) var(--space-m); }

.snothing__text {
    margin: 0 var(--space-m) var(--space-s);
    color: var(--text-muted);
    font-size: var(--text-s);
}

.snothing .button { margin: 0 var(--space-m) var(--space-m); }


/* ================================================= справочные страницы

   «О проекте», «Контакты», «Редакционная политика», «Реклама». Прежде
   текст шёл простынёй во всю ширину; по разборам это посадочные
   страницы: крупный лид, плитки, разделы карточками и оглавление. */

.spage__head { margin-block: var(--space-l) var(--space-m); max-inline-size: 62ch; }

.spage__title {
    margin: 0 0 var(--space-xs);
    font-size: clamp(2rem, 1.2rem + 2.6vw, 3rem);
    font-weight: 800;
    letter-spacing: -0.02em;
}

.spage__lead p {
    margin: 0 0 var(--space-2xs);
    font-size: var(--text-m);
    color: var(--text-muted);
    line-height: 1.6;
}

.spage__tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-s);
    margin-block-end: var(--space-l);
}

.stile {
    display: grid;
    gap: 6px;
    align-content: start;
    padding: var(--space-m);
    border: 1px solid var(--border);
    border-radius: var(--radius-l);
    background: var(--bg-elevated);
    text-decoration: none;
    color: inherit;
}

.stile:hover { border-color: var(--brand-red); }

.stile__icon,
.scard__icon {
    display: grid;
    place-items: center;
    inline-size: 40px;
    block-size: 40px;
    border-radius: var(--radius-m);
    background: var(--bg-sunken);
    color: var(--brand-red);
}

.stile__icon { color: var(--brand-red); }

.stile__icon svg,
.scard__icon svg {
    inline-size: 22px;
    block-size: 22px;
    fill: none;
    /* Цвет — от самого значка: разделы держатся разноцветными, и
       жёстко заданный красный перебивал оттенок. */
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.stile__title { font-weight: 700; }
.stile__text { color: var(--text-muted); font-size: var(--text-s); line-height: 1.5; }

.spage { display: grid; gap: var(--space-l); align-items: start; }

@media (min-width: 960px) {
    .spage { grid-template-columns: minmax(0, 1fr) 280px; }
}

.scard {
    padding: var(--space-m) var(--space-l);
    border: 1px solid var(--border);
    border-radius: var(--radius-l);
    background: var(--bg-elevated);
    margin-block-end: var(--space-s);
    scroll-margin-block-start: var(--space-xl);
}

.scard__head {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    margin-block-end: var(--space-2xs);
}

.scard__title { margin: 0; font-size: var(--text-l); font-weight: 700; }

.scontact {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-m);
    padding: var(--space-l);
    border: 1px solid var(--border);
    border-radius: var(--radius-l);
    background: var(--bg-subtle);
}

.scontact__title { margin: 0 0 4px; font-size: var(--text-l); font-weight: 700; }
.scontact__text { margin: 0; color: var(--text-muted); font-size: var(--text-s); max-inline-size: 60ch; }

.spage__side { position: sticky; top: var(--space-m); }

.stoc {
    padding: var(--space-m);
    border: 1px solid var(--border);
    border-radius: var(--radius-l);
    background: var(--bg-elevated);
}

.stoc__title {
    margin: 0 0 var(--space-2xs);
    font-weight: 700;
}

.stoc__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 4px;
}

.stoc__list a {
    display: block;
    padding: 5px 0;
    color: var(--text-muted);
    text-decoration: none;
    font-size: var(--text-s);
}

.stoc__list a:hover { color: var(--brand-red); }


/* ================================================= прогнозы по разбору

   Карточка: гербы крупно и «vs» между ними, ставка под ними, крупный
   процент и коэффициент по краям, полоса уверенности и переход. */

.pcard__pair {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: var(--space-2xs);

    /* Пустота ряда собирается здесь, и всё, что ниже — дата, ставка,
       проценты, полоса, — прижато к низу карточки. Длинные названия
       клубов занимают две строки, короткие одну, и без этого ставка в
       соседних карточках стояла на разной высоте. */
    margin-block: var(--space-2xs) auto;
    padding-block-end: var(--space-xs);
}

.pcard__side {
    display: grid;
    justify-items: center;
    gap: 6px;
    min-width: 0;
}

.pcard__crest {
    inline-size: 48px;
    block-size: 48px;
    object-fit: contain;
}

.pcard__crest--blank { border-radius: 50%; background: var(--bg-sunken); }

.pcard__name {
    font-size: var(--text-xs);
    font-weight: 600;
    text-align: center;
    max-inline-size: 100%;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.pcard__vs {
    color: var(--text-faint);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.06em;
}

.pcard__nums {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-s);
    margin-block-start: var(--space-2xs);
}

.pcard__conf { display: flex; align-items: baseline; gap: 6px; }
.pcard__conf b { font-size: var(--text-xl); font-weight: 800; }
.pcard__conf span { color: var(--text-faint); font-size: var(--text-2xs); }

.pcard__odds { display: grid; justify-items: end; }
.pcard__odds span { color: var(--text-faint); font-size: var(--text-2xs); }
.pcard__odds b { font-size: var(--text-m); font-weight: 700; }

.pcard__more {
    display: inline-block;
    margin-block-start: var(--space-2xs);
    color: var(--brand-red);
    text-decoration: none;
    font-size: var(--text-s);
    font-weight: 600;
}

.pcard__when { color: var(--text-faint); font-size: var(--text-2xs); }

/* Кольцо точности в колонке модели.

   По разбору кольцо стоит слева, а числа — справа от него, в два
   ряда. Прежде кольцо занимало всю ширину колонки, а под ним шёл
   список с цветными точками: карточка выходила вдвое выше нужного. */
.pring {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: var(--space-m);
    padding: 0 var(--space-m) var(--space-m);
}

.pring__svg { inline-size: 112px; block-size: 112px; }
.mside .pring__svg { inline-size: 140px; block-size: 140px; }

/* Числа столбцом: в двух колонках подписи «успешных» и «неуспешных»
   вставали впритык и читались одним словом. */
.pring__nums { display: grid; gap: var(--space-xs); }

.pring__num { display: flex; align-items: baseline; gap: 6px; }
.pring__num b { font-size: var(--text-xl); font-weight: 800; line-height: 1; }
.pring__num--hit { color: var(--win); }
.pring__num--miss { color: var(--brand-red); }
.pring__num span { color: var(--text-faint); font-size: var(--text-2xs); line-height: 1.2; }
.pring__num b { min-inline-size: 2.5rem; }

.pring__track,
.pring__hit,
.pring__miss {
    fill: none;
    stroke-width: 4;
}

.pring__track { stroke: var(--bg-sunken); }
.pring__hit { stroke: var(--win); }
.pring__miss { stroke: var(--brand-red); }

/* На странице прогноза кольцо двухцветное: точность и остаток.
   Красная доля там лишняя — рядом стоит своё число. */
.prlayout__side .pring__miss { stroke: transparent; }
.prlayout__side .pring__track { stroke: var(--bg-sunken); }

.pring__value {
    fill: var(--text);
    font-size: 9px;
    font-weight: 800;
    text-anchor: middle;
}

.pring__cap {
    fill: var(--text-faint);
    font-size: 3px;
    text-anchor: middle;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.pring__legend {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 6px;
    inline-size: 100%;
    font-size: var(--text-s);
    color: var(--text-muted);
}

.pring__legend li { display: flex; align-items: center; gap: 8px; }
.pring__legend b { color: var(--text); }

.pring__dot {
    inline-size: 10px;
    block-size: 10px;
    border-radius: 50%;
    background: var(--text-faint);
}

.pring__dot--hit { background: var(--win); }
.pring__dot--miss { background: var(--brand-red); }


/* Полоса чисел на справочных страницах. */
.snums {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: var(--space-s);
    padding: var(--space-m);
    border: 1px solid var(--border);
    border-radius: var(--radius-l);
    background: var(--bg-elevated);
    margin-block-end: var(--space-l);
}

.snum { display: grid; gap: 2px; }

.snum__v {
    font-size: var(--text-xl);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.snum__l { color: var(--text-faint); font-size: var(--text-xs); }


/* ================================================= лента новостей

   По разбору: ведущий материал тёмной карточкой во всю ширину с
   текстом поверх снимка, следом четыре карточки сеткой, остальное —
   строками со снимком слева. */

.nlead {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border-radius: var(--radius-l);
    margin-block-end: var(--space-m);
    background: #0d1526;
    min-block-size: 340px;
    display: flex;
    align-items: flex-end;
}

.nlead__pic {
    position: absolute;
    inset: 0;
    z-index: -1;
}

.nlead__pic img,
.nlead__ph {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    display: block;
}

/* Заглавная карточка ленты — как на главной: снимок вида спорта под
 * градиентом. Материалы приходят без обложек, и на треть экрана
 * растягивалась ровная тёмная заливка. */
.nlead__ph {
    background: linear-gradient(140deg, #1b2a4a, #0d1526);
    background-size: cover;
    background-position: center 58%;
}
.nlead__ph[data-sport="football"] {
    background: url("/assets/img/hub/football.webp") center 58% / cover no-repeat;
}

.nlead__ph[data-sport="basketball"] {
    background: url("/assets/img/hub/basketball.webp") center 58% / cover no-repeat;
}

.nlead__ph[data-sport="hockey"] {
    background: url("/assets/img/hub/hockey.webp") center 58% / cover no-repeat;
}

.nlead__ph[data-sport="cricket"] {
    background: url("/assets/img/hub/cricket.webp") center 58% / cover no-repeat;
}

.nlead__ph[data-sport="volleyball"] {
    background: url("/assets/img/hub/volleyball.webp") center 58% / cover no-repeat;
}

.nlead__ph[data-sport="handball"] {
    background: url("/assets/img/hub/handball.webp") center 58% / cover no-repeat;
}

.nlead__ph[data-sport="rugby"] {
    background: url("/assets/img/hub/rugby.webp") center 58% / cover no-repeat;
}

.nlead__ph[data-sport="american_football"] {
    background: url("/assets/img/hub/american_football.webp") center 58% / cover no-repeat;
}

.nlead__ph[data-sport="baseball"] {
    background: url("/assets/img/hub/baseball.webp") center 58% / cover no-repeat;
}


/* Поволока: белый текст поверх светлого снимка иначе не читается. */
.nlead::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, rgba(6, 10, 20, 0.15) 0%, rgba(6, 10, 20, 0.85) 70%);
}

.nlead__body {
    padding: var(--space-l);
    color: #fff;
    max-inline-size: 62ch;
}

.nlead__badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: var(--radius-s);
    background: var(--brand-red);
    color: #fff;
    font-size: var(--text-2xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.nlead__eyebrow {
    margin: var(--space-xs) 0 4px;
    font-size: var(--text-2xs);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    opacity: 0.85;
}

.nlead__title { margin: 0 0 var(--space-2xs); font-size: var(--text-2xl); line-height: 1.15; }
.nlead__title a { color: #fff; text-decoration: none; }
.nlead__lead { margin: 0 0 var(--space-s); opacity: 0.85; font-size: var(--text-s); }

.nlead__meta {
    display: flex;
    align-items: center;
    gap: var(--space-m);
    margin: 0;
    font-size: var(--text-xs);
    opacity: 0.85;
}

.nlead__more { color: #fff; text-decoration: none; font-weight: 700; }

.nlatest { margin-block-start: var(--space-l); }

.nlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }

.nlist__row a {
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr);
    gap: var(--space-s);
    align-items: center;
    padding: var(--space-2xs);
    border-radius: var(--radius-m);
    text-decoration: none;
    color: inherit;
}

.nlist__row a:hover { background: var(--bg-subtle); }

.nlist__pic {
    inline-size: 120px;
    block-size: 80px;
    object-fit: cover;
    border-radius: var(--radius-s);
}

.nlist__body { display: grid; gap: 3px; min-width: 0; }

.nlist__top {
    display: flex;
    gap: var(--space-2xs);
    align-items: baseline;
    font-size: var(--text-2xs);
}

.nlist__sport { color: var(--brand-red); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700; }
.nlist__time { color: var(--text-faint); font-family: var(--font-mono); }
.nlist__title { font-weight: 700; }
.nlist__lead {
    color: var(--text-muted);
    font-size: var(--text-s);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.nsports { margin-block-start: var(--space-l); }
.nsports__title { margin: 0 0 var(--space-2xs); font-weight: 700; }

@media (max-width: 560px) {
    .nlist__row a { grid-template-columns: 84px minmax(0, 1fr); }
    .nlist__pic { inline-size: 84px; block-size: 58px; }
    .nlead__title { font-size: var(--text-xl); }
}


/* Ведущая карточка главной и горизонтальные карточки «Главного». */
.nlead--home { min-block-size: 300px; }

.grid-cards--rows {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-s);
}

@media (min-width: 720px) {
    .grid-cards--rows { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.arow {
    border: 1px solid var(--border);
    border-radius: var(--radius-l);
    background: var(--bg-elevated);
    overflow: hidden;
}

.arow:hover { border-color: var(--brand-red); }

.arow__link {
    display: grid;
    grid-template-columns: 140px minmax(0, 1fr);
    gap: var(--space-s);
    padding: var(--space-2xs);
    text-decoration: none;
    color: inherit;
    align-items: center;
}

.arow__pic { display: block; }

.arow__pic img,
.arow__ph {
    inline-size: 140px;
    block-size: 104px;
    object-fit: cover;
    border-radius: var(--radius-m);
    display: block;
}

/* Заглушка карточки — снимок вида спорта, как в ведущем материале.
 * Ровный тёмный прямоугольник рядом с шестью такими же читается как
 * пустое место, а не как картинка. */
.arow__ph {
    background: linear-gradient(140deg, #24345a, #131b2e);
    background-size: cover;
    background-position: center 55%;
}
.arow__ph[data-sport="football"] {
    background: url("/assets/img/hub/football.webp") center 55% / cover no-repeat;
}
.arow__ph[data-sport="basketball"] {
    background: url("/assets/img/hub/basketball.webp") center 55% / cover no-repeat;
}
.arow__ph[data-sport="hockey"] {
    background: url("/assets/img/hub/hockey.webp") center 55% / cover no-repeat;
}
.arow__ph[data-sport="cricket"] {
    background: url("/assets/img/hub/cricket.webp") center 55% / cover no-repeat;
}
.arow__ph[data-sport="volleyball"] {
    background: url("/assets/img/hub/volleyball.webp") center 55% / cover no-repeat;
}
.arow__ph[data-sport="handball"] {
    background: url("/assets/img/hub/handball.webp") center 55% / cover no-repeat;
}
.arow__ph[data-sport="rugby"] {
    background: url("/assets/img/hub/rugby.webp") center 55% / cover no-repeat;
}
.arow__ph[data-sport="american_football"] {
    background: url("/assets/img/hub/american_football.webp") center 55% / cover no-repeat;
}
.arow__ph[data-sport="baseball"] {
    background: url("/assets/img/hub/baseball.webp") center 55% / cover no-repeat;
}

.arow__body { display: grid; gap: 4px; min-width: 0; padding-inline-end: var(--space-2xs); }

.arow__eyebrow {
    font-size: var(--text-2xs);
    color: var(--brand-red);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 700;
}

.arow__title {
    font-weight: 700;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.arow__lead {
    color: var(--text-muted);
    font-size: var(--text-s);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.arow__meta { color: var(--text-faint); font-size: var(--text-2xs); }

@media (max-width: 520px) {
    .arow__link { grid-template-columns: 104px minmax(0, 1fr); }
    .arow__pic img, .arow__ph { inline-size: 104px; block-size: 78px; }
}


/* Поиск по странам в панели выбора. */
.tpick__find {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-block-end: var(--space-2xs);
    padding: 6px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-m);
    background: var(--bg-sunken);
}

.tpick__findicon {
    inline-size: 16px;
    block-size: 16px;
    flex: none;
    fill: none;
    stroke: var(--text-faint);
    stroke-width: 2;
}

.tpick__find input {
    flex: 1;
    min-inline-size: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font-size: var(--text-s);
}

.tpick__find input:focus { outline: none; }

/* Найденная строка показывается, даже если она пряталась под кнопкой
   «показать ещё»: иначе поиск находит страну, а её не видно. */
.tpick__row--found { display: block !important; }


/* «Ещё по теме» в боковой колонке материала: карточки уже, чем в
   основной, и снимок им нужен меньше. */
aside .artmore__row a { grid-template-columns: 72px minmax(0, 1fr); }
aside .artmore__pic { inline-size: 72px; block-size: 52px; }
aside .artmore { margin-block-start: 0; }


/* Первый экран главной: колонки выравниваются по верху.

   Правая — LIVE, турниры и таблица — длиннее левой, и под «Главным»
   зияла пустота в половину экрана. Ограничение по высоте убирает её:
   что не поместилось, читатель открывает по ссылке «смотреть все». */
.home-top { align-items: start; }

.home-top__side > .aside-block { margin-block-end: var(--space-m); }

@media (min-width: 1100px) {
    /* Правая колонка не тянет первый экран за собой: её содержимое
       прокручивается вместе со страницей, а высоту задаёт левая. */
    .home-top__side { max-block-size: none; }
}


/* ================================================= страница прогноза

   По разбору: карточка с гербами и ставкой, вероятности исходов,
   линия букмекеров, ключевые факторы тремя карточками и колонка
   справа — как считается, точность модели, матч, предупреждение. */

.prhead { margin-block: var(--space-l) var(--space-m); }

.prhead__title {
    margin: 0 0 var(--space-2xs);
    /* Имена команд в названиях бывают длинными — «Тирё Хандболл
       Женщины — Алингсос ХК Женщины: прогноз на матч», — и в прежнем
       кегле такой заголовок занимал две строки во всю ширину. */
    font-size: clamp(1.4rem, 1rem + 1.3vw, 2rem);
    font-weight: 800;
    letter-spacing: -0.01em;
}

.prhead__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-xs);
    color: var(--text-muted);
    font-size: var(--text-s);
}

.prhead__comp { font-weight: 600; }

.prhead__match {
    margin-inline-start: auto;
    padding: 7px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-m);
    color: inherit;
    text-decoration: none;
    font-weight: 600;
}

.prhead__match:hover { border-color: var(--brand-red); color: var(--brand-red); }

.prlayout { display: grid; gap: var(--space-l); align-items: start; }

/* Разделы страницы прогноза отбиты друг от друга: карточка матча несла
   отступ сама, а разбор и обоснование под ней слипались. */
.prlayout__main { display: grid; gap: var(--space-m); align-content: start; }

@media (min-width: 1000px) {
    .prlayout { grid-template-columns: minmax(0, 1fr) 320px; }
    .prlayout__side { position: sticky; top: var(--space-s); align-self: start; }
}

/* Колонка идёт карточками с промежутками: по разбору каждый блок
   стоит на белом поле с рамкой, а не поверх серого фона страницы
   встык с соседом. */
.prlayout__side { display: grid; gap: var(--space-m); }
.prlayout__side .aside-block + .aside-block { margin-block-start: 0; }

/* Карточка прогноза — на снимке своего вида спорта.
 *
 * Белый прямоугольник с гербами и процентом одинаков у футбола,
 * хоккея и крикета: страница не даёт понять, о каком виде спорта
 * прогноз, пока не дочитаешь до названия турнира. Снимок под светлой
 * поволокой узнаётся сразу и не мешает читать числа. */
.prcard {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: var(--space-l);
    border: 1px solid var(--border);
    border-radius: var(--radius-l);
    background: var(--bg-elevated);
}

.prcard[data-sport]::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-size: cover;
    background-position: center 40%;
    opacity: 0.14;
}

/* Поверх снимка — заливка карточки, иначе числа теряются. */
.prcard[data-sport]::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg,
        rgba(255, 255, 255, 0.55) 0%,
        rgba(255, 255, 255, 0.88) 60%,
        var(--bg-elevated) 100%);
}

.prcard__pair {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: var(--space-m);
    padding-block-end: var(--space-m);
    border-block-end: 1px solid var(--border);
}

.prcard__side { display: grid; justify-items: center; gap: var(--space-2xs); min-width: 0; }
.prcard__crest { inline-size: 64px; block-size: 64px; object-fit: contain; }
.prcard__name { font-weight: 700; text-align: center; }
.prcard__vs { color: var(--text-faint); font-weight: 800; letter-spacing: 0.08em; }

.prcard__grid {
    display: grid;
    gap: var(--space-m);
    padding-block: var(--space-m);
}

@media (min-width: 720px) {
    .prcard__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); }
}

.prcard__cap {
    margin: 0 0 6px;
    font-size: var(--text-xs);
    color: var(--text-muted);
}

.prcard__sel {
    margin: 0 0 4px;
    font-size: var(--text-l);
    font-weight: 800;
    color: var(--win);
}

.prcard__conf { display: flex; align-items: baseline; gap: 8px; margin: 0; }
.prcard__conf b { font-size: var(--text-3xl); font-weight: 800; color: var(--win); line-height: 1; }
.prcard__conf span { color: var(--text-faint); font-size: var(--text-xs); }

.probs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* Три числа рядом, разделённые волосяной линией: по разбору у них нет
   ни плашек, ни заливки — заливка делала из трёх равных величин три
   кнопки. */
.prob {
    display: grid;
    justify-items: center;
    gap: 2px;
    padding: var(--space-xs) var(--space-2xs);
}

.prob + .prob { border-inline-start: 1px solid var(--border); }
.prob__v { font-size: var(--text-2xl); font-weight: 800; line-height: 1.1; }
.prob.is-pick .prob__v { color: var(--win); }
.prob__k { color: var(--text-faint); font-size: var(--text-2xs); }

.prcard__market {
    display: grid;
    gap: var(--space-m);
    padding-block-start: var(--space-m);
    border-block-start: 1px solid var(--border);
}

@media (min-width: 720px) {
    .prcard__market { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
}

.mline { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2xs); }

.mline__cell {
    display: grid;
    justify-items: center;
    gap: 2px;
    padding: var(--space-xs);
    border: 1px solid var(--border);
    border-radius: var(--radius-m);
}

.mline__cell.is-pick { border-color: var(--win); }
.mline__cell b { font-family: var(--font-mono); font-weight: 700; }
.mline__cell span { color: var(--text-faint); font-size: var(--text-2xs); }

.prcard__range { margin: 0; font-family: var(--font-mono); font-size: var(--text-l); font-weight: 700; }

.prcard__fixed {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: var(--space-m) 0 0;
    padding-block-start: var(--space-s);
    border-block-start: 1px solid var(--border);
    color: var(--text-muted);
    font-size: var(--text-xs);
}

.prfactors__title { margin: var(--space-l) 0 var(--space-s); font-size: var(--text-l); }

.prfactors {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--space-s);
    margin-block-end: var(--space-m);
}

.prfact {
    padding: var(--space-m);
    border: 1px solid var(--border);
    border-radius: var(--radius-l);
    background: var(--bg-elevated);
}

.prfact__cap { margin: 0 0 var(--space-xs); font-weight: 700; }
.prfact__team { display: grid; gap: 4px; margin-block-end: var(--space-s); }

.prfact__name { display: flex; align-items: center; gap: 6px; font-size: var(--text-s); font-weight: 600; }
.prfact__sum { color: var(--text-faint); font-size: var(--text-2xs); }

.prfact__h2h {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-2xs);
    text-align: center;
    margin-block-end: var(--space-s);
}

.prfact__h2h span { display: grid; gap: 2px; font-size: var(--text-2xs); color: var(--text-faint); }
.prfact__h2h b { font-size: var(--text-xl); font-weight: 800; color: var(--text); }

.prfact__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }

.prfact__list a {
    display: grid;
    grid-template-columns: 3.5rem minmax(0, 1fr) auto;
    gap: 6px;
    align-items: center;
    padding-block: 5px;
    font-size: var(--text-xs);
    color: inherit;
    text-decoration: none;
}

.prfact__list a:hover { color: var(--brand-red); }
.prfact__date { color: var(--text-faint); }
.prfact__teams { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.prfact__books,
.prfact__avg {
    display: grid;
    gap: 2px;
    margin-block-end: var(--space-s);
}

.prfact__books b, .prfact__avg b { font-size: var(--text-xl); font-weight: 800; }
.prfact__books span, .prfact__avg span { color: var(--text-faint); font-size: var(--text-2xs); }

.pcards--3 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

.prwarn__text { margin: 0 var(--space-m) var(--space-2xs); color: var(--text-muted); font-size: var(--text-s); }
.prwarn__age { margin: 0 var(--space-m) var(--space-m); color: var(--brand-red); font-weight: 800; }


/* Карточка клуба в колонке страницы игрока. */
.pclubcard {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    padding: 0 var(--space-m) var(--space-2xs);
    text-decoration: none;
    color: inherit;
}

.pclubcard__crest { inline-size: 44px; block-size: 44px; object-fit: contain; }
.pclubcard__body { display: grid; gap: 2px; min-width: 0; }
.pclubcard__name { font-weight: 700; }
.pclubcard__note { color: var(--text-faint); font-size: var(--text-2xs); }

.pclubcard__next {
    display: grid;
    gap: 2px;
    margin: var(--space-2xs) var(--space-m) 0;
    padding-block-start: var(--space-2xs);
    border-block-start: 1px solid var(--border);
    font-size: var(--text-s);
}

.pclubcard__cap { color: var(--text-faint); font-size: var(--text-2xs); text-transform: uppercase; letter-spacing: 0.05em; }
.pclubcard__next a { color: inherit; text-decoration: none; font-weight: 600; }
.pclubcard__next a:hover { color: var(--brand-red); }
.pclubcard__date { color: var(--text-faint); font-size: var(--text-2xs); }
.pclubcard__squad { margin: var(--space-s) var(--space-m) var(--space-m); }

.prfact__n { color: var(--text-faint); font-weight: 600; }


/* Подложка карточки без снимка: цвет, а не рисунок с заголовком —
   заголовок и так стоит строкой ниже. */
.card__media--blank {
    display: block;
    aspect-ratio: 16 / 9;
    background: linear-gradient(140deg, #26365c, #141b2d);
}


/* Подложка карточки красится по виду спорта: восемь одинаковых
   тёмно-синих плиток подряд читаются как одна. */
.card__media--blank[data-sport="football"] { background: linear-gradient(140deg, #1f4d8f, #10203a); }
.card__media--blank[data-sport="basketball"] { background: linear-gradient(140deg, #8a4514, #2a1508); }
.card__media--blank[data-sport="hockey"] { background: linear-gradient(140deg, #14566e, #08202b); }
.card__media--blank[data-sport="cricket"] { background: linear-gradient(140deg, #6b2a86, #22102b); }
.card__media--blank[data-sport="volleyball"] { background: linear-gradient(140deg, #96631a, #2c1d07); }
.card__media--blank[data-sport="handball"] { background: linear-gradient(140deg, #1b6b46, #082418); }
.card__media--blank[data-sport="rugby"] { background: linear-gradient(140deg, #7a2231, #2a0b11); }
.card__media--blank[data-sport="american_football"] { background: linear-gradient(140deg, #5a3c1a, #1e1408); }
.card__media--blank[data-sport="baseball"] { background: linear-gradient(140deg, #245440, #0c1e17); }


/* Мелочи страницы прогноза по разбору 18: значки в строке под
   заголовком, подписи под числами, карточка турнира и оговорка
   плашкой. */

.prhead__ico,
.phow__ico,
.prcomp__ico,
.prwarn__ico,
.prnote__ico {
    inline-size: 16px;
    block-size: 16px;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.prhead__comp,
.prhead__when {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.prfact__empty {
    margin: 0;
    color: var(--text-faint);
    font-size: var(--text-s);
}

.prcard__conflabel {
    margin: 2px 0 0;
    color: var(--text-faint);
    font-size: var(--text-xs);
}

.prcard__rangenote {
    margin: 2px 0 0;
    color: var(--text-faint);
    font-size: var(--text-2xs);
}

.phow { list-style: none; margin: 0; padding: 0 var(--space-m) var(--space-2xs); display: grid; gap: var(--space-xs); }

.phow__row {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    gap: var(--space-xs);
    align-items: start;
    color: var(--text-muted);
    font-size: var(--text-s);
    line-height: 1.45;
}

/* Значки в серых квадратиках, как в разборе: они отделяют пункты
   один от другого, а не называют их. */
.phow__ico {
    color: var(--brand-red);
    box-sizing: content-box;
    padding: 6px;
    border-radius: var(--radius-m, 8px);
    background: var(--bg-sunken);
}

.aside-block__link {
    display: inline-block;
    margin: 0 var(--space-m) var(--space-m);
    color: var(--brand-red);
    text-decoration: none;
    font-size: var(--text-s);
    font-weight: 600;
}

.prcomp__head {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    padding: 0 var(--space-m) var(--space-2xs);
}

.prcomp__ico { inline-size: 28px; block-size: 28px; color: var(--brand-red); }
.prcomp__name { margin: 0; font-weight: 700; }
.prcomp__stage { margin: 2px 0 0; color: var(--text-faint); font-size: var(--text-xs); }

.prcomp__link {
    display: block;
    padding: 6px var(--space-m);
    color: var(--brand-red);
    text-decoration: none;
    font-size: var(--text-s);
    font-weight: 600;
}

.prwarn__title { display: flex; align-items: center; gap: 6px; }
.prwarn__ico { color: var(--brand-red); }

.prnote {
    display: grid;
    grid-template-columns: 16px minmax(0, 1fr);
    gap: var(--space-2xs);
    align-items: start;
    margin-block-start: var(--space-m);
    padding: var(--space-s) var(--space-m);
    border-radius: var(--radius-m);
    background: var(--bg-subtle);
    color: var(--text-muted);
    font-size: var(--text-xs);
    line-height: 1.5;
}

.prnote__ico { margin-block-start: 2px; }


/* ================================================= первый экран главной

   По разбору: ведущий материал — снимок слева, текст справа на белом,
   пометка вида спорта лежит на снимке. Прежде это была тёмная карточка
   с текстом поверх, и снимка в ней не было видно вовсе. */

.hlead {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    border: 1px solid var(--border);
    border-radius: var(--radius-l);
    background: var(--bg-elevated);
    overflow: hidden;
    margin-block-end: var(--space-m);
}

@media (min-width: 720px) {
    .hlead { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
}

.hlead__pic {
    position: relative;
    display: block;
    min-block-size: 260px;
}

.hlead__pic img,
.hlead__ph {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    display: block;
}

/* Заглушка обложки: снимок вида спорта под градиентом.
 *
 * Материалы приходят без картинок, и половина заглавной карточки была
 * ровной синей заливкой. Те же фоны, что стоят в шапках разделов,
 * закрывают её фактурой, а градиент поверх держит контраст метки
 * рубрики и не даёт снимку спорить с заголовком справа. */
.hlead__ph {
    background: linear-gradient(140deg, #1f4d8f, #10203a);
    background-size: cover;
    background-position: center 60%;
}

.hlead__ph[data-sport="football"] {
    background:
        linear-gradient(140deg, rgba(31,77,143,0.44), rgba(16,32,58,0.62)),
        url("/assets/img/hub/football.webp") center 60% / cover no-repeat;
}
.hlead__ph[data-sport="basketball"] {
    background:
        linear-gradient(140deg, rgba(138,69,20,0.44), rgba(42,21,8,0.62)),
        url("/assets/img/hub/basketball.webp") center 60% / cover no-repeat;
}
.hlead__ph[data-sport="hockey"] {
    background:
        linear-gradient(140deg, rgba(20,86,110,0.44), rgba(8,32,43,0.62)),
        url("/assets/img/hub/hockey.webp") center 60% / cover no-repeat;
}
.hlead__ph[data-sport="cricket"] {
    background:
        linear-gradient(140deg, rgba(107,42,134,0.44), rgba(34,16,43,0.62)),
        url("/assets/img/hub/cricket.webp") center 60% / cover no-repeat;
}
.hlead__ph[data-sport="volleyball"] {
    background:
        linear-gradient(140deg, rgba(150,99,26,0.44), rgba(44,29,7,0.62)),
        url("/assets/img/hub/volleyball.webp") center 60% / cover no-repeat;
}
.hlead__ph[data-sport="handball"] {
    background:
        linear-gradient(140deg, rgba(27,107,70,0.44), rgba(8,36,24,0.62)),
        url("/assets/img/hub/handball.webp") center 60% / cover no-repeat;
}
.hlead__ph[data-sport="rugby"] {
    background:
        linear-gradient(140deg, rgba(122,34,49,0.44), rgba(42,11,17,0.62)),
        url("/assets/img/hub/rugby.webp") center 60% / cover no-repeat;
}
.hlead__ph[data-sport="american_football"] {
    background:
        linear-gradient(140deg, rgba(90,60,26,0.44), rgba(30,20,8,0.62)),
        url("/assets/img/hub/american_football.webp") center 60% / cover no-repeat;
}
.hlead__ph[data-sport="baseball"] {
    background:
        linear-gradient(140deg, rgba(36,84,64,0.44), rgba(12,30,23,0.62)),
        url("/assets/img/hub/baseball.webp") center 60% / cover no-repeat;
}

.hlead__badge {
    position: absolute;
    inset-block-start: var(--space-s);
    inset-inline-start: var(--space-s);
    padding: 4px 10px;
    border-radius: var(--radius-s);
    background: rgba(9, 15, 26, 0.78);
    color: #fff;
    font-size: var(--text-2xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.hlead__body {
    display: grid;
    align-content: center;
    gap: var(--space-xs);
    padding: var(--space-l);
}

.hlead__title { margin: 0; font-size: var(--text-2xl); line-height: 1.2; }
.hlead__title a { color: inherit; text-decoration: none; }
.hlead__title a:hover { color: var(--brand-red); }
.hlead__lead { margin: 0; color: var(--text-muted); }

.hlead__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-s);
    margin: 0;
    color: var(--text-faint);
    font-size: var(--text-xs);
}

.hlead__more { color: var(--brand-red); text-decoration: none; font-weight: 700; }

/* Строка LIVE в колонке: вид спорта, лига, команды, счёт, стрелка. */
.mstack--live { gap: 0; }

.mlive {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        "head chev"
        "home chev"
        "away chev";
    gap: 3px var(--space-2xs);
    align-items: center;
    padding: var(--space-xs) var(--space-2xs);
    border-block-start: 1px solid var(--border);
    color: inherit;
    text-decoration: none;
}

.mstack--live li:first-child .mlive { border-block-start: 0; }
.mlive:hover { background: var(--bg-subtle); }

.mlive__head {
    grid-area: head;
    display: flex;
    align-items: baseline;
    gap: 6px;
    min-width: 0;
    font-size: var(--text-2xs);
}

.mlive__sport {
    color: var(--brand-red);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    flex: none;
}

.mlive__comp { color: var(--text-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.mlive__side {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    font-size: var(--text-s);
}

/* Стороны занимают свои строки: без этого обе попадали в одну
   область, и стрелка перехода рисовалась дважды. */
.mlive__side:nth-of-type(1) { grid-area: home; }
.mlive__side:nth-of-type(2) { grid-area: away; }

.mlive__team { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mlive__num { flex: none; font-family: var(--font-mono); font-weight: 700; }
.mlive__chev { grid-area: chev; color: var(--text-faint); font-size: var(--text-l); }


/* Нижняя строка подвала: год и правовые ссылки. */
.footer-legal {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-s);
    margin-block-start: var(--space-l);
    padding-block-start: var(--space-s);
    border-block-start: 1px solid var(--border);
    color: var(--text-faint);
    font-size: var(--text-xs);
}

.footer-legal__links { display: flex; flex-wrap: wrap; gap: var(--space-m); }
.footer-legal__links a { color: inherit; text-decoration: none; }
.footer-legal__links a:hover { color: var(--brand-red); }


/* ================================================= материал по разбору 16

   Карточка матча со счётом, карточки «по теме» с гербами и плашка
   «о материале» вместо строки мелким шрифтом. */

.rel { margin: 0 var(--space-m) var(--space-2xs); }

.rel__card {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-2xs);
    border-radius: var(--radius-m);
    text-decoration: none;
    color: inherit;
}

.rel__card:hover { background: var(--bg-subtle); }
.rel__crest { inline-size: 36px; block-size: 36px; object-fit: contain; }
.rel__crest--blank { border-radius: 50%; background: var(--bg-sunken); }
.rel__body { display: grid; gap: 1px; min-width: 0; }
.rel__name { font-weight: 700; font-size: var(--text-s); }
.rel__note { color: var(--text-faint); font-size: var(--text-2xs); }

.amatch__comp {
    margin: 0 var(--space-m) var(--space-2xs);
    color: var(--text-faint);
    font-size: var(--text-2xs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.amatch__score {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: var(--space-2xs);
    padding: 0 var(--space-m);
}

.amatch__side { display: grid; justify-items: center; gap: 4px; min-width: 0; }
.amatch__side img { inline-size: 40px; block-size: 40px; object-fit: contain; }

.amatch__name {
    font-size: var(--text-2xs);
    font-weight: 600;
    text-align: center;
    max-inline-size: 100%;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.amatch__nums {
    display: flex;
    align-items: baseline;
    gap: 4px;
    font-family: var(--font-mono);
    font-size: var(--text-xl);
    font-weight: 800;
}

.amatch__nums i { font-style: normal; color: var(--text-faint); }

.amatch__when,
.amatch__venue {
    margin: var(--space-2xs) var(--space-m) 0;
    color: var(--text-muted);
    font-size: var(--text-xs);
    text-align: center;
}

.amatch__venue { color: var(--text-faint); }
.amatch__go { display: block; margin: var(--space-s) var(--space-m) var(--space-m); text-align: center; }

.about-note {
    margin-block-start: var(--space-l);
    padding: var(--space-m);
    border: 1px solid var(--border);
    border-radius: var(--radius-l);
    background: var(--bg-subtle);
}

.about-note__cap { margin: 0 0 var(--space-2xs); font-weight: 700; }
.about-note__text { margin: 0 0 var(--space-s); color: var(--text-muted); font-size: var(--text-s); line-height: 1.55; }
.about-note__links { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin: 0; }
.about-note__report { color: var(--brand-red); border-color: currentColor; }
.article-meta__by { color: var(--text-muted); }


/* Полоса разделов ленты и отбор по сроку — в одну строку. */
.nbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-s);
    margin-block: var(--space-m);
}

.nperiods { display: flex; gap: 2px; padding: 3px; border-radius: var(--radius-m); background: var(--bg-sunken); }

.nperiod {
    padding: 6px 12px;
    border-radius: var(--radius-s);
    color: var(--text-muted);
    text-decoration: none;
    font-size: var(--text-s);
    font-weight: 600;
}

.nperiod.is-on { background: var(--bg-elevated); color: var(--text); box-shadow: 0 1px 2px rgb(0 0 0 / 0.08); }


/* Перечень главного и кнопки на справочной странице. */
.spage__bullets {
    list-style: none;
    margin: var(--space-m) 0 0;
    padding: 0;
    display: grid;
    gap: var(--space-2xs);
}

.spage__bullets li {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr);
    gap: var(--space-2xs);
    align-items: start;
    color: var(--text-muted);
}

.spage__check {
    inline-size: 20px;
    block-size: 20px;
    fill: none;
    stroke: var(--brand-red);
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
    margin-block-start: 2px;
}

.spage__actions { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin: var(--space-m) 0 0; }


/* Вкладки внутри карточек — обычным регистром, как в разборах. */
.mcard .tabs__label,
.tabs--row .tabs__label {
    text-transform: none;
    letter-spacing: 0;
}

.arow__top { display: flex; align-items: baseline; gap: var(--space-2xs); }
.arow__time { color: var(--text-faint); font-size: var(--text-2xs); }

/* Страница игрока по разбору 08 ---------------------------------- */

/* Паспорт клуба в карточке: строки идут теснее, чем в блоке
   «Об игроке», — карточка здесь не главная. */
.mabout--tight { padding: 0 var(--space-m) var(--space-s); }
.mabout--tight .mabout__row { padding-block: 6px; }
.pclubcard__ext { margin-inline-start: 4px; color: var(--text-faint); font-size: var(--text-2xs); }

/* Справка о команде — мельче основного текста.
 *
 * Строки «Тип команды — Клуб», «Страна — Дания» шли размером статьи и
 * спорили с описанием слева, хотя это подпись к карточке: восемь пар
 * коротких значений, которые смотрят, а не читают. */
.mabout__k {
    font-size: var(--text-xs);
    color: var(--text-muted);
}

.mabout__v {
    font-size: var(--text-s);
    font-weight: 600;
    text-align: right;
}

/* Ссылка в карточке фактов — тем же цветом, что и значение. */
.mabout__v a { color: inherit; text-decoration: none; border-block-end: 1px solid var(--border); }
.mabout__v a:hover { color: var(--brand-red); border-color: currentColor; }

/* Прогнозы дня — три компактных блока в колонке.
 *
 * Прежде здесь стоял один крупный «Прогноз дня», а остальные шли
 * списком ниже. Три карточки занимают ту же высоту, если набрать их
 * мельче: турнир, пара и ставка — по строке на каждое. */
.pdays {
    display: grid;
    gap: var(--space-3xs);
    margin-block-end: var(--space-2xs);
}

/* Полоса прогнозов поперёк страницы: три карточки в ряд, заголовок и
   ссылка «все» — по краям одной строки над ними. */
.pdays__block {
    display: grid;
    gap: var(--space-xs);
    margin-block-end: var(--space-l);
}

.pdays__block .aside-block__title { margin: 0; }

.pdays--row {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--space-2xs);
    margin-block-end: 0;
}

.pdays__block .dsum__all { justify-self: start; }

.pdays .pday {
    gap: 2px;
    padding: var(--space-2xs) var(--space-xs);
}

.pdays .pday__teams {
    font-size: var(--text-xs);
    line-height: 1.3;
}

.pdays .pday__pick {
    font-size: var(--text-2xs);
    color: var(--text-muted);
}

.pdays .pday__comp {
    /* Длинное название турнира не должно занимать две строки в
       карточке из трёх строк. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Ближайший матч отдельной карточкой: обе команды с гербами и время
   между ними. Прежде это была строка «Ближайший матч — Монреаль», а
   ссылка в ней вела в пустоту. */
.pnext {
  display: grid;
  gap: var(--space-s);
  padding: var(--space-m);
  color: inherit;
  text-decoration: none;
}
.pnext:hover .pnext__name { color: var(--brand-red); }
.pnext__cap {
  color: var(--text-faint);
  font-size: var(--text-2xs);
}
.pnext__row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: start;
  gap: var(--space-s);
}
.pnext__side {
  display: grid;
  justify-items: center;
  gap: 6px;
  text-align: center;
  min-width: 0;
}
.pnext__crest { inline-size: 36px; block-size: 36px; object-fit: contain; }
.pnext__name {
  font-size: var(--text-2xs);
  font-weight: 600;
  line-height: 1.25;
  overflow-wrap: anywhere;
}
.pnext__time {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: var(--text-l);
  font-weight: 700;
  padding-block-start: 6px;
}

/* Числа сезона плитками в главной колонке. */
.pstats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: var(--space-s);
  padding: 0 var(--space-m) var(--space-m);
}
.pstats__card {
  display: grid;
  gap: 2px;
  padding: var(--space-s) var(--space-m);
  border: 1px solid var(--border);
  border-radius: var(--radius-m);
  background: var(--surface-2, transparent);
}
.pstats__v { font-size: var(--text-xl); font-weight: 700; line-height: 1.1; }
.pstats__l { color: var(--text-faint); font-size: var(--text-2xs); }

/* Строка матча: гербы обеих команд, как в разборе. */
.pmatches__link {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.pmatches__crest { inline-size: 18px; block-size: 18px; object-fit: contain; flex: none; }
.pmatches__side { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pmatches__dash { color: var(--text-faint); flex: none; }

/* Ссылка «все матчи игрока» под таблицей. */
.panel__more {
  display: inline-block;
  margin: 0 var(--space-m) var(--space-m);
  font-size: var(--text-s);
  font-weight: 600;
  color: var(--brand-red);
  text-decoration: none;
}
.panel__more:hover { text-decoration: underline; }

/* Полоса формы: доли побед, ничьих и поражений одной строкой.
   По разбору страницы клуба она стоит между рядом значков и итогом. */
.tformbar {
  display: flex;
  block-size: 6px;
  margin: var(--space-s) var(--space-m) 0;
  border-radius: 999px;
  overflow: hidden;
  background: var(--border);
}
.tformbar__part { block-size: 100%; }
.tformbar__part--win { background: var(--ok, #16a34a); }
.tformbar__part--draw { background: var(--text-faint); }
.tformbar__part--loss { background: var(--brand-red); }

/* Ссылка «все …» под содержимым бокового блока. */
.aside-block__more {
  display: inline-block;
  margin: var(--space-s) var(--space-m) var(--space-m);
  font-size: var(--text-2xs);
  font-weight: 600;
  color: var(--brand-red);
  text-decoration: none;
}
.aside-block__more:hover { text-decoration: underline; }

/* Компактные карточки прогнозов в блоке «Другие прогнозы».

   На витрине прогнозов карточка развёрнутая — с гербами, «vs» и
   полосой уверенности. На странице прогноза по разбору она сжата до
   пары, ставки и процента: там она не главная. */
.pcards--compact .pcard { padding: var(--space-s) var(--space-m); }
.pcards--compact .pcard__pair {
  display: grid;
  grid-template-columns: auto;
  gap: 4px;
  justify-items: start;
  margin-block: var(--space-2xs) auto;
  padding-block-end: 0;
}
.pcards--compact .pcard__side {
  display: flex;
  align-items: center;
  gap: 6px;
  text-align: start;
}
.pcards--compact .pcard__crest { inline-size: 22px; block-size: 22px; }
.pcards--compact .pcard__name { font-size: var(--text-s); }
.pcards--compact .pcard__vs { display: none; }
/* Карточка-раздел ведёт на свою страницу.
 *
 * Блок прогноза на странице матча показывал ставку и основания, а
 * разбор, раскладку исходов и линию — нет: читатель дочитывал и
 * упирался в тупик. */
.mcard--link { position: relative; }

.mcard__cover {
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: inherit;
}

.mcard--link:hover { border-color: var(--brand-red); }

/* Содержимое лежит поверх накладки, но клики пропускает: иначе
   выделить текст нельзя, а ссылка одна и та же. Сама подпись
   «Разбор и вероятности» клики принимает — ей нужен курсор-палец. */
.mcard--link .prediction,
.mcard--link .section-head { position: relative; z-index: 2; pointer-events: none; }

.mcard--link .mcard__more { position: relative; z-index: 2; pointer-events: auto; }

/* Карточка целиком ведёт на разбор.
 *
 * Ссылка-накладка лежит поверх карточки, а название ставки и
 * «Подробнее» поднимаются над ней: по ним читатель попадает туда же,
 * но с видимым указателем. */
.pcard--link { position: relative; }

.pcard__cover {
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: inherit;
}

.pcard--link:hover { border-color: var(--brand-red); }

.pcard--link .pcard__pick,
.pcard--link .pcard__more {
    position: relative;
    z-index: 2;
}

/* Дата — отдельной строкой над ставкой: рядом с названием турнира она
   съезжала вниз на длинных названиях, и в ряду из четырёх карточек
   даты стояли на четырёх высотах. */
.pcard__cap--when {
    margin-block-end: var(--space-3xs);
    color: var(--text-faint);
    font-variant-numeric: tabular-nums;
}

.pcards--compact .confidence__bar { display: none; }
.pcards--compact .pcard__cap { margin-block-start: var(--space-2xs); }
.pcards--compact .pcard__more { margin-block-start: var(--space-2xs); }

/* Пометка о моменте расчёта — справа от заголовка разбора. */
.prcomment__when { color: var(--text-faint); font-size: var(--text-2xs); }
.prfact__more {
  display: inline-block;
  margin-block-start: var(--space-xs);
  font-size: var(--text-2xs);
  font-weight: 600;
  color: var(--brand-red);
  text-decoration: none;
}
.prfact__more:hover { text-decoration: underline; }

/* Минута идущего матча в табло: по разбору она стоит красным справа
   от счёта и отвечает на вопрос «давно ли идёт». */
.livebar__minute {
  align-self: center;
  padding-inline-start: 6px;
  color: var(--brand-red);
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: var(--text-2xs);
  font-weight: 700;
}

/* Переход к стране целиком — справа в заголовке блока. */
.lgblock__all {
  margin-inline-start: auto;
  font-size: var(--text-2xs);
  font-weight: 600;
  color: var(--brand-red);
  text-decoration: none;
  white-space: nowrap;
}
.lgblock__all:hover { text-decoration: underline; }

/* «Показать ещё» — кнопкой во всю ширину, как в разборе каталога:
   красной строкой она читалась как ссылка на другую страницу. */
.tcat__more {
  display: block;
  margin: var(--space-xs) 0 0;
  padding: var(--space-xs);
  border: 1px solid var(--border);
  border-radius: var(--radius-m);
  color: var(--text-muted);
  font-size: var(--text-xs);
  font-weight: 600;
  text-align: center;
  text-decoration: none;
}
.tcat__more:hover { color: var(--text); border-color: var(--text-faint); }

/* Бомбардиры турнира: портрет, имя с клубом, число мячей. */
.scorers { list-style: none; margin: 0; padding: 0 var(--space-m) var(--space-m); display: grid; gap: var(--space-s); }
.scorer { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; gap: var(--space-s); }
.scorer__face { inline-size: 32px; block-size: 32px; border-radius: 50%; object-fit: cover; }
.scorer__body { display: grid; gap: 1px; min-width: 0; }
.scorer__name { font-size: var(--text-s); font-weight: 600; color: inherit; text-decoration: none; }
.scorer__name:hover { color: var(--brand-red); }
.scorer__team { color: var(--text-faint); font-size: var(--text-2xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scorer__goals { color: var(--text-muted); font-size: var(--text-2xs); white-space: nowrap; }

/* Очки лидера в шапке турнира — на месте финала у идущего сезона. */
.kwin__points { color: #b9c7de; font-size: var(--text-xs); }

/* Карьера: двенадцать сезонов на виду, остальные под кнопкой.
   У игрока с длинной карьерой таблица занимала три экрана. */
.pcareer__row--extra { display: none; }
.panel:has(.pcareer__toggle:checked) .pcareer__row--extra { display: table-row; }
.pcareer__more {
  display: block;
  margin: 0 var(--space-m) var(--space-m);
  padding: var(--space-xs);
  border: 1px solid var(--border);
  border-radius: var(--radius-m);
  color: var(--text-muted);
  font-size: var(--text-xs);
  font-weight: 600;
  text-align: center;
  cursor: pointer;
}
.pcareer__more:hover { color: var(--text); border-color: var(--text-faint); }
.panel:has(.pcareer__toggle:checked) .pcareer__more { display: none; }

/* Значок над числом в полосе справочника. */
.snum__ico {
  display: inline-flex;
  color: var(--brand-red);
  margin-block-end: 4px;
}
.snum__ico svg {
  inline-size: 18px;
  block-size: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Как готовится материал: пять шагов со значками.

   По разбору «О проекте» это единственное место, где сказано, кто
   пишет тексты и кто отвечает за опубликованное. */
.ssteps { margin-block: var(--space-l); }
.ssteps__title { margin: 0 0 var(--space-m); font-size: var(--text-xl); }
.ssteps__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-m);
}
.sstep {
  display: grid;
  justify-items: center;
  gap: 6px;
  text-align: center;
  padding: var(--space-m);
  border: 1px solid var(--border);
  border-radius: var(--radius-l);
  background: var(--bg-elevated);
}
.sstep__n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 22px;
  block-size: 22px;
  border-radius: 50%;
  background: var(--bg-sunken);
  color: var(--text-faint);
  font-size: var(--text-2xs);
  font-weight: 700;
}
.sstep__ico { display: inline-flex; color: var(--brand-red); }
.sstep__ico svg {
  inline-size: 28px;
  block-size: 28px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.sstep__name { font-weight: 700; }
.sstep__text { color: var(--text-muted); font-size: var(--text-s); line-height: 1.4; }

/* Оттенки значков разделов: разборы держат карточки разноцветными —
   иначе восемь одинаковых блоков читаются одним полотном. */
.scard__icon--red { color: var(--brand-red); }
.scard__icon--blue { color: #2563eb; }
.scard__icon--green { color: #16a34a; }
.scard__icon--amber { color: #d97706; }
.scard__icon--violet { color: #7c3aed; }

/* Кнопка перехода в конце раздела: с рамкой, как в разборе, —
   призрачная кнопка там читалась обычной строкой текста. */
.scard__action {
  margin-block-start: var(--space-s);
  border-color: var(--border);
  color: var(--text);
  padding-inline: var(--space-m);
}
.scard__action:hover { border-color: var(--brand-red); color: var(--brand-red); }

/* Линия букмекеров под прогнозом дня: три исхода, как в разборе. */
.pday__market {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2xs);
  margin-block-start: var(--space-xs);
}
.pday__cell {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 6px;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: var(--radius-s, 6px);
  font-size: var(--text-xs);
}
.pday__cell.is-pick { border-color: var(--win); }
.pday__short { color: var(--text-faint); }
.pday__cell b { font-family: var(--font-mono, ui-monospace, monospace); }


/* Переключатель таблиц в боковой колонке остаётся списком.

   В разборе главной вкладки лиг стоят строкой, но у нас в колонке их
   бывает восемь, и названия вроде «НЗИАХЛ (Новая Зеландия)» в ряд не
   помещаются: попытка выстроить их строкой наложила ярлыки друг на
   друга поверх таблицы. Список открывается по наведению и показывает
   те же лиги, не ломая вёрстку. */

/* Узкий экран: строка фиксации и пометка о данных.

   На телефоне строка «Прогноз зафиксирован … и не изменится …»
   разъезжалась на три столбца — она собрана из трёх частей флексом.
   Пометка о моменте расчёта вставала вплотную к заголовку. */
@media (max-width: 720px) {
  .prcard__fixed {
    display: block;
    line-height: 1.5;
  }
  .prcard__lock { margin-inline-end: 4px; }

  .prcomment .section-head {
    display: block;
  }
  .prcomment__when { display: block; margin-block-start: 4px; }
}

/* Строка «данных пока нет» на пустой странице команды. */
.tempty--shown {
  display: block;
  margin: 0;
  padding: var(--space-l) var(--space-m);
  color: var(--text-muted);
  text-align: center;
  line-height: 1.5;
}

/* Полоса видов спорта на витрине прогнозов идёт первой и отделена
   от остальных отборов: это выбор раздела, а не уточнение внутри. */
.pfilters--sports { border-block-end: 1px solid var(--border); padding-block-end: var(--space-xs); }

/* Турнирные таблицы полосой во всю ширину.

   В правой колонке они делали её выше левой на треть экрана: под
   матчами дня зияла пустота, а сама таблица шла в пять строк узкой
   полоской. Во всю ширину помещаются три лиги рядом. */
.home-tables { margin-block-end: var(--space-l); }

.home-tables__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-m);
  padding: 0 var(--space-m) var(--space-m);
}

.home-tables__name {
  margin: 0 0 var(--space-2xs);
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--text-muted);
}

/* Внутри полосы переключателя вкладок не нужно: таблица одна.

   Панель показывается всегда: видимостью управляет отмеченная кнопка
   вкладки, а без головы вкладок отмечать нечего — вторая и третья
   таблицы выходили одними заголовками. */
.home-tables__one .tabs__head { display: none; }
.home-tables__one .tabs__panels > .tabs__panel { display: block; }


.prcard[data-sport="football"]::before { background-image: url("/assets/img/match/football.webp"); }
.prcard[data-sport="basketball"]::before { background-image: url("/assets/img/match/basketball.webp"); }
.prcard[data-sport="hockey"]::before { background-image: url("/assets/img/match/hockey.webp"); }
.prcard[data-sport="cricket"]::before { background-image: url("/assets/img/match/cricket.webp"); }
.prcard[data-sport="volleyball"]::before { background-image: url("/assets/img/match/volleyball.webp"); }
.prcard[data-sport="handball"]::before { background-image: url("/assets/img/match/handball.webp"); }
.prcard[data-sport="rugby"]::before { background-image: url("/assets/img/match/rugby.webp"); }
.prcard[data-sport="baseball"]::before { background-image: url("/assets/img/match/baseball.webp"); }
.prcard[data-sport="american_football"]::before { background-image: url("/assets/img/match/american_football.webp"); }
/* ------------------------------- строка матча в узкой колонке

   Правило карточки витрины задаёт четыре колонки и стоит в файле
   ниже общего разбиения на две строки — с той же силой селектора, но
   позже, поэтому побеждало. Области при этом оставались от узкой
   раскладки: хозяева попадали в колонку времени шириной в три знака
   («В..»), а гости — в колонку по содержимому и печатались целиком.

   Здесь разбиение задано на весь блок списка и стоит последним, так
   что колонки и области снова из одной раскладки. Порог — по ширине
   самого списка, а не окна: на планшете колонка витрины уже
   телефонного экрана. */
@container (max-width: 27rem) {
    .mrows .mrow,
    .shub__card .mrows .mrow {
        grid-template-columns: minmax(0, 1fr) minmax(2.4rem, auto) minmax(0, 1fr);
        grid-template-areas:
            "when when when"
            "home score away";
        row-gap: 2px;
    }

    /* У строки с турниром своя верхняя строка: слева время, справа
       лига. Общее правило выше отдало бы всю её времени, а названию
       турнира не осталось бы места вовсе. */
    .mrows .mrow.mrow--wide,
    .shub__card .mrows .mrow.mrow--wide {
        grid-template-areas:
            "when comp comp"
            "home score away";
    }

    .mrows .mrow .mrow__when { grid-area: when; }
    .mrows .mrow .mrow__comp { grid-area: comp; text-align: end; min-inline-size: 0; }
    .mrows .mrow .mrow__side--home { grid-area: home; }
    .mrows .mrow .mrow__score { grid-area: score; }
    .mrows .mrow .mrow__side--away { grid-area: away; }
}