/* ============================================================
   AFL - Astana Futbol Ligasy - публичный сайт
   ============================================================ */

/* ---------- Фирменные цвета (сняты с макета astfl.kz_redesign) ---------- */
:root {
    --brand-navy: #003854;      /* фирменный тёмно-синий (брендбук: RGB 0/56/84) — подвал, тёмные полосы */
    --brand-navy-deep: #02293a;  /* топ-бар, низ подвала */
    --brand-teal: #003854;       /* hero, баннеры, приложение — фирменный */
    --brand-teal-stripe: #0f5578; /* диагональные полосы внутри тёмных секций */
    --brand-yellow: #f2e400;
    --brand-page: #f4f4f6;

    --live: #ef2d28;
    --win: #2fb457;
    --bronze: #aa8c30;
    --soft: #c6d3de;
    --font-display: Oswald, "Arial Narrow", "Segoe UI", system-ui, sans-serif;
    --font-text: Jost, "Segoe UI", system-ui, sans-serif;
    --shell: 1240px;
    --gut: 24px;
    --radius: 10px;
    --radius-lg: 16px;
    --radius-table: 8px;   /* таблицы: строже карточек */
    --shadow: 0 1px 2px rgba(12, 29, 45, .06), 0 6px 18px rgba(12, 29, 45, .05);
    --shadow-hover: 0 2px 4px rgba(12, 29, 45, .08), 0 14px 34px rgba(12, 29, 45, .1);
}

/* ---------- Светлая тема — основная, как в макете ---------- */
:root,
html[data-theme="light"] {
    --bg: var(--brand-page);
    --panel: #ffffff;
    --panel-2: #f4f6f8;
    --line: #e4e8ec;
    --line-2: #d3dae0;
    --text: #0c1d2d;
    --muted: #6b7c8d;
    --muted-2: #46586a;
    --dim: #9aa8b5;
    --accent: var(--brand-yellow);
    --accent-text: #0a5a70;
    --on-accent: #0c1d2d;
    --hdr-bg: rgba(255, 255, 255, .96);
    --hdr-solid: #ffffff;
    --card-shadow: var(--shadow);
}

/* ---------- Тёмная тема — по переключателю ---------- */
html[data-theme="dark"] {
    --bg: #08141d;
    --panel: #0e2634;
    --panel-2: #0a1c28;
    --line: #16323f;
    --line-2: #204152;
    --text: #f0f2f4;
    --muted: #7c8ea0;
    --muted-2: #9fb0c0;
    --dim: #556f85;
    --accent: var(--brand-yellow);
    --accent-text: var(--brand-yellow);
    --on-accent: #0c1d2d;
    --hdr-bg: rgba(8, 20, 29, .94);
    --hdr-solid: #08141d;
    --card-shadow: none;
}

/* ---------- Полосы секций ----------
   Макет чередует светлые, белые, бирюзовые и жёлтые полосы.
   Полоса переопределяет токены локально, поэтому карточки и текст
   внутри неё подстраиваются сами — и в светлой, и в тёмной теме. */
.band { background: var(--bg); }
.band--white { background: var(--panel); }

.band--teal,
.band--navy,
[data-scheme="dark"] {
    --panel: rgba(255, 255, 255, .06);
    --panel-2: rgba(255, 255, 255, .04);
    --line: rgba(255, 255, 255, .12);
    --line-2: rgba(255, 255, 255, .2);
    --text: #ffffff;
    --muted: #8ba3b3;
    --muted-2: #b6c7d2;
    --dim: #6d8798;
    --accent-text: var(--brand-yellow);
    --card-shadow: none;
    color: var(--text);
}

.band--teal { background: var(--brand-teal); position: relative; overflow: hidden; }
.band--navy { background: var(--brand-navy); }

/* Диагональные полосы на бирюзовых секциях — как в макете */
.band--teal::before {
    content: "";
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        115deg,
        transparent 0 78px,
        var(--brand-teal-stripe) 78px 160px
    );
    opacity: .5;
    pointer-events: none;
}
.band--teal > * { position: relative; z-index: 1; }

.band--yellow {
    background: var(--brand-yellow);
    --text: #0c1d2d;
    --muted: #4a5a2e;
    --muted-2: #2f3d1c;
    color: var(--text);
}

/* ---------- База ---------- */
* { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 96px; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-text);
    min-height: 100vh;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    transition: background .25s ease, color .25s ease;
}

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

a { color: var(--accent-text); text-decoration: none; transition: opacity .15s ease, color .15s ease, border-color .15s ease; }
a:hover { opacity: .7; }

button { font: inherit; }

h1, h2, h3 { margin: 0; font-weight: 600; }

::-webkit-scrollbar { height: 6px; width: 6px; }
::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 3px; }

@keyframes pulse { 0%, 100% { opacity: 1 } 50% { opacity: .35 } }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- Раскладка ---------- */
.shell {
    max-width: var(--shell);
    margin: 0 auto;
    padding: 0 var(--gut);
    width: 100%;
}

.section { padding-top: 48px; }
.section--tight { padding-top: 34px; }
.section--first { padding-top: 44px; }
.section--mid { padding-top: 44px; }

.eyebrow {
    font-size: 10px;
    letter-spacing: .2em;
    color: var(--muted);
    font-weight: 800;
    margin-bottom: 10px;
    text-transform: uppercase;
}
.eyebrow--live { color: var(--live); }

.h1, .h2 {
    font-family: var(--font-display);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .01em;
    line-height: 1.06;
}
.h1 { font-size: clamp(26px, 3.6vw, 42px); }
.h2 { font-size: clamp(22px, 2.6vw, 34px); }

.sec-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px 24px;
    flex-wrap: wrap;
    margin-bottom: 26px;
}
.sec-lead {
    font-size: 14px;
    color: var(--muted-2);
    margin: 12px 0 0;
    max-width: 560px;
    line-height: 1.6;
}
.sec-link {
    font-size: 11.5px;
    letter-spacing: .08em;
    font-weight: 700;
    text-transform: uppercase;
    white-space: nowrap;
}
.sec-link--muted { color: var(--muted-2); }

.grid { display: grid; gap: 16px; }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.card {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--card-shadow);
}

/* ---------- Кнопки ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 8px;
    padding: 13px 22px;
    font-family: var(--font-display);
    font-size: 12px;
    letter-spacing: .06em;
    font-weight: 600;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
    border: 1px solid transparent;
}
.btn--accent { background: var(--accent); color: var(--on-accent); }
.btn--accent:hover { opacity: .85; }
.btn--ghost { border-color: var(--line-2); color: var(--muted-2); background: transparent; }
.btn--ghost:hover { border-color: var(--accent-text); color: var(--accent-text); opacity: 1; }
.btn--block { display: flex; width: 100%; }
.btn--sm { padding: 11px 16px; }


/* ---------- Кнопка-пилюля с жёлтой обводкой (из макета) ---------- */
.btn--pill {
    border-radius: 8px;
    border-color: var(--brand-yellow);
    color: var(--text);
    background: transparent;
    padding: 10px 20px;
}
.btn--pill::after { content: " →"; }
.btn--pill:hover { background: var(--brand-yellow); color: #0c1d2d; opacity: 1; }
.band--teal .btn--pill, .band--navy .btn--pill { color: var(--brand-yellow); }
.band--teal .btn--pill:hover, .band--navy .btn--pill:hover { color: #0c1d2d; }


/* Полосы дают собственные отступы, у секций внутри убираем двойной */
.band > .section:last-child { padding-bottom: 48px; }
/* Страницы без полосы-обёртки (команды, календарь) иначе упираются
   последней карточкой прямо в подвал */
main > .section:last-child { padding-bottom: 48px; }
.band--teal > .section, .band--navy > .section { padding-bottom: 48px; }



/* ---------- Карточка трансляции с обложкой AFL ---------- */
.stream__thumb {
    position: relative;
    aspect-ratio: 16 / 9;
    height: auto;
    background: var(--brand-teal);
    overflow: hidden;
}
/* Эмблема по центру плитки, а не растянутая обложка: кадров трансляций
   у лиги нет, поэтому плитка строится из фирменного фона и логотипа */
.stream__logo {
    position: absolute;
    top: 50%;
    left: 50%;
    width: auto;
    max-width: 62%;
    max-height: 62%;
    transform: translate(-50%, -50%);
    object-fit: contain;
    transition: transform .4s ease;
}
.stream:hover .stream__logo { transform: translate(-50%, -50%) scale(1.05); }

/* Плашка «Смотреть на YouTube» слева снизу */
.stream__watch {
    position: absolute;
    left: 12px;
    bottom: 12px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 10px;
    border-radius: 6px;
    background: rgba(255, 255, 255, .94);
    color: #0c1d2d;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}
.stream__watch svg { display: block; }

.stream__score {
    position: absolute;
    right: 12px;
    bottom: 12px;
    font-family: var(--font-display);
    font-weight: 800;
    font-style: normal;
    font-size: 17px;
    color: #ffffff;
    background: rgba(12, 29, 45, .72);
    padding: 4px 11px;
    border-radius: 6px;
}
.stream__tag--status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    top: 12px;
    right: 12px;
    left: auto;
    background: var(--live);
    color: #ffffff;
}

/* ---------- Цельные секции: фон даёт полоса, а не вложенная карточка ---------- */
.section--flush { padding-top: 48px; }

/* Hero: без рамки и скруглений, во всю ширину полосы */
.band--teal .hero__body { padding: 40px 44px; }
.band--teal .hero__figure { min-height: 340px; }

/* SOCCA: две цельные половины на всю ширину, без внутренней карточки */
.socca__media { border-radius: 0; }
.socca__panel {
    padding: 48px clamp(20px, 4vw, 56px);
    display: flex;
    flex-direction: column;
    justify-content: center;
}
/* Строки рейтинга — тонкие линии, а не карточки */
.socca .rank { border-bottom: 1px solid var(--line); }
.socca .rank--top { border-radius: 8px; }

/* Баннер приложения: цельный, без рамки */

/* ---------- Топ-бар (макет: тёмная полоса с пилюлями) ---------- */
.topbar {
    background: var(--brand-navy-deep);
    color: #ffffff;
    font-size: 11px;
}
.topbar__inner {
    min-height: 38px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px 20px;
    flex-wrap: wrap;
    padding-top: 5px;
    padding-bottom: 5px;
}
.topbar__meta { display: flex; align-items: center; gap: 8px 14px; flex-wrap: wrap; margin-left: auto; }

.pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .09);
    color: #dfe8ee;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
    white-space: nowrap;
}
.pill--link { color: #dfe8ee; }
.pill--link:hover { background: rgba(255, 255, 255, .18); opacity: 1; }
.pill--live {
    background: var(--brand-yellow);
    color: #0c1d2d;
    padding: 3px 8px;
    gap: 4px;
}
.pill__dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #0c1d2d;
    animation: pulse 1.6s infinite;
}

/* Языки: активный в жёлтом круге, как в макете */
.lang { display: flex; align-items: center; gap: 2px; }
.lang__item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    height: 26px;
    padding: 0 6px;
    border-radius: 999px;
    border: 1.5px solid transparent;
    color: #7e94a3;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .06em;
}
.lang__item:hover { color: #ffffff; opacity: 1; }
.lang__item.is-active {
    color: var(--brand-yellow);
    border-color: var(--brand-yellow);
}

.socials { display: flex; align-items: center; gap: 10px; }
.socials__item { color: #b9c9d4; display: inline-flex; }
.socials__item:hover { color: var(--brand-yellow); opacity: 1; }



/* Переключатель темы в топ-баре */
.topbar__theme {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    border: 0;
    background: rgba(255, 255, 255, .09);
    color: #dfe8ee;
    cursor: pointer;
    padding: 0;
}
.topbar__theme:hover { background: var(--brand-yellow); color: #0c1d2d; }

/* Пилюля города в шапке */
.city-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 8px 13px;
    border-radius: 999px;
    background: var(--panel-2);
    border: 1px solid var(--line);
    color: var(--muted-2);
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}
.city-pill--btn {
    font-family: inherit;
    cursor: pointer;
}
.city-pill--btn:hover { border-color: var(--line-2); color: var(--text); }
.city-switch.is-open .city-pill--btn svg { transform: rotate(180deg); }
.city-pill--btn svg { transition: transform .15s ease; }

/* Выпадающая панель переключателя города — короткий список ссылок */
.city-switch { position: relative; }
.city-switch__panel {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 60;
    min-width: 160px;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: 0 18px 48px rgba(12, 29, 45, .22);
    padding: 6px;
}
html[data-theme="dark"] .city-switch__panel { background: #0e2634; }
.city-switch__panel[hidden] { display: none; }
.city-switch__item {
    display: block;
    padding: 9px 12px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
    color: var(--text);
    white-space: nowrap;
}
.city-switch__item:hover { background: var(--panel-2); opacity: 1; }
.city-switch__item.is-active { color: var(--accent-text); }

/* ---------- Шапка ---------- */
.hdr {
    position: sticky;
    top: 0;
    z-index: 50;
    color: var(--text);
    background: var(--hdr-bg);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--line);
    transition: background .25s ease;
}
.hdr__inner {
    min-height: 76px;
    display: flex;
    /* растягиваем колонки на всю высоту — жёлтая полоса активного пункта ложится на нижнюю кромку */
    align-items: stretch;
    justify-content: space-between;
    gap: 16px 24px;
}
.brand { display: flex; align-items: center; gap: 14px; flex: none; }
.brand:hover { opacity: 1; }
.brand__mark {
    width: 42px;
    height: 42px;
    border-radius: 8px;
    background: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 19px;
    color: var(--on-accent);
    flex: none;
}
.brand__logo { height: 46px; width: auto; max-width: 100%; }
html[data-theme="dark"] .brand__logo--ink { display: none; }
html[data-theme="light"] .brand__logo--inverse { display: none; }
.brand__name { display: block; font-family: var(--font-display); font-size: 17px; letter-spacing: .08em; font-weight: 600; color: var(--text); line-height: 1.1; }
.brand__sub { display: block; font-size: 10px; letter-spacing: .18em; color: var(--muted); font-weight: 700; margin-top: 3px; }

.nav {
    position: relative;
    display: flex;
    /* Меню держим одной строкой: перенос на второй ряд ломал шапку */
    flex-wrap: nowrap;
    align-items: stretch;
    gap: clamp(8px, 1.4vw, 24px);
    font-size: clamp(10px, .92vw, 12px);
    letter-spacing: .06em;
    font-weight: 700;
    flex: 1 1 auto;
    justify-content: flex-end;
    min-width: 0;
}
.nav a { white-space: nowrap; }
.nav a {
    position: relative;
    display: flex;
    align-items: center;
    color: var(--muted-2);
    text-transform: uppercase;
}
.nav a:hover { color: var(--text); opacity: 1; }
.nav a.is-active { color: var(--text); font-weight: 800; }
/* Статичное подчёркивание — запасной вариант, если JS не отработал */
.nav a.is-active::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 5px;
    background: var(--accent);
}

/* Скользящая полоса. Ширина 1px + scaleX: анимируется только transform,
   поэтому переезд идёт на композиторе и не дёргает раскладку */
.nav__bar {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 1px;
    height: 5px;
    background: var(--accent);
    transform-origin: 0 50%;
    transform: scaleX(0);
    opacity: 0;
    pointer-events: none;
    will-change: transform;
    transition: transform .32s cubic-bezier(.4, 0, .2, 1), opacity .2s ease;
}
.nav--sliding a.is-active::after { display: none; }

.hdr__actions { display: flex; align-items: center; gap: 14px; flex: none; }

.icon-btn {
    width: 38px;
    height: 38px;
    border-radius: 8px;
    border: 1px solid var(--line-2);
    background: transparent;
    color: var(--muted-2);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    flex: none;
}
.icon-btn:hover { border-color: var(--accent-text); color: var(--accent-text); }

.burger { display: none; }

html[data-theme="dark"] .theme-icon--moon { display: none; }
html[data-theme="light"] .theme-icon--sun { display: none; }

/* ---------- Матчи ---------- */
.day-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    margin-bottom: 22px;
}
.day-head__date { font-size: 13px; color: var(--muted); font-weight: 600; padding-bottom: 6px; }
.day-head__aside {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    padding-bottom: 6px;
}

.match {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 18px 20px;
}
.match--live { border-color: var(--live); }
.match__top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    font-size: 10px;
    letter-spacing: .14em;
    font-weight: 800;
    color: var(--muted);
    margin-bottom: 16px;
}
.match--live .match__top { color: var(--muted-2); }
.match__body {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}
.match__team { font-family: var(--font-display); font-size: 22px; letter-spacing: .02em; flex: 1; min-width: 0; }
.match__team--away { text-align: right; }
.match__score { font-family: var(--font-display); font-size: 28px; color: var(--accent-text); letter-spacing: .06em; white-space: nowrap; }
.match__kick { text-align: center; line-height: 1.3; flex: none; }
.match__time {
    display: flex;
    align-items: center;
    gap: 5px;
    justify-content: center;
    font-family: var(--font-display);
    font-size: 20px;
    color: var(--accent-text);
}
.match__date { font-size: 10px; color: var(--muted); font-weight: 700; letter-spacing: .1em; }
.match__foot {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--line);
    display: flex;
    justify-content: space-between;
    gap: 10px;
    font-size: 11px;
    color: var(--muted);
    font-weight: 600;
}
.match__foot a { letter-spacing: .1em; font-weight: 800; }
.match__foot a.is-muted { color: var(--muted-2); }

/* ---------- Герой: чемпионы ---------- */
.hero {
    background: var(--brand-teal);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: var(--radius-lg);
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    align-items: center;
    color: var(--text);
}
.hero__body { padding: 40px 44px; }
.hero__podium { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 28px 0 32px; }
.podium {
    background: rgba(255, 255, 255, .05);
    border: 1px solid var(--line-2);
    border-radius: 10px;
    padding: 16px;
}
.podium--gold { background: rgba(255, 236, 45, .1); border-color: rgba(255, 236, 45, .35); }
.podium__place { font-family: var(--font-display); font-size: 15px; letter-spacing: .08em; color: var(--muted-2); }
.podium--gold .podium__place { color: var(--accent-text); }
.podium--bronze .podium__place { color: var(--bronze); }
.podium__team { font-weight: 700; font-size: 15px; margin-top: 8px; }

.hero__awards { display: grid; grid-template-columns: minmax(0,1.4fr) minmax(0,1fr); gap: 32px; }
.label {
    font-size: 11px;
    letter-spacing: .16em;
    color: var(--muted);
    font-weight: 800;
    margin-bottom: 14px;
    text-transform: uppercase;
}
.award-list { display: flex; flex-direction: column; gap: 10px; }
.award-list__row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: 14px;
    border-bottom: 1px solid var(--line);
    padding-bottom: 9px;
}
.award-list__row:last-child { border-bottom: 0; padding-bottom: 0; }
.award-list__row b { font-weight: 700; }
.award-list__row span { color: var(--muted); text-align: right; }
.award-single { font-weight: 700; font-size: 15px; }

.hero__figure {
    position: relative;
    min-height: 380px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}
.hero__figure img { width: 100%; height: 100%; object-fit: contain; object-position: bottom center; }

/* ---------- Цифры лиги ---------- */
.stat { padding: 24px; }
.stat__value { font-family: var(--font-display); font-size: clamp(32px, 3.4vw, 42px); line-height: 1; }
.stat__value--accent { color: var(--accent-text); }
.stat__label {
    font-size: 11px;
    letter-spacing: .16em;
    color: var(--muted);
    font-weight: 800;
    margin-top: 10px;
}

/* ---------- Турниры ---------- */
.trn {
    padding: 24px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 22px;
    min-height: 250px;
}
.trn__name { font-family: var(--font-display); font-size: 20px; line-height: 1.15; letter-spacing: .02em; margin-bottom: 8px; }
.trn__sub { font-size: 12px; color: var(--muted); line-height: 1.5; }
.trn__metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 18px; }
.trn__metric-label { font-size: 10px; letter-spacing: .12em; color: var(--muted); font-weight: 800; }
.trn__metric-value { font-family: var(--font-display); font-size: 20px; margin-top: 4px; }
.trn__metric-value--accent { color: var(--accent-text); }

/* ---------- Трансляции ---------- */
.stream { overflow: hidden; color: var(--text); display: block; }
.stream:hover { opacity: 1; border-color: var(--line-2); }
.stream__tag {
    position: absolute;
    top: 12px;
    font-size: 10px;
    letter-spacing: .12em;
    font-weight: 800;
    padding: 4px 8px;
    border-radius: 4px;
}
.stream__tag--field { left: 12px; color: var(--muted-2); background: rgba(0, 0, 0, .5); }
.stream__tag--status { right: 12px; color: #fff; background: var(--live); }
.stream__tag--soon { background: var(--line-2); color: var(--soft); }
.stream__body { padding: 18px 20px; }
.stream__title { font-family: var(--font-display); font-size: 17px; line-height: 1.2; letter-spacing: .02em; }
.stream__sub { font-size: 12px; color: var(--muted); margin-top: 8px; }

/* ---------- Рейтинг SOCCA ---------- */
.socca {
    display: grid;
    grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
    gap: 20px;
    align-items: stretch;
}
@media (max-width: 900px) { .socca { grid-template-columns: minmax(0, 1fr); } }

/* Панель топ-10 */
.socca__panel {
    background: var(--brand-navy);
    border-radius: var(--radius-lg);
    padding: 26px 24px 24px;
    color: #fff;
    display: flex;
    flex-direction: column;
}
.socca__panel-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; }
.socca__badge {
    font-size: 9.5px;
    letter-spacing: .16em;
    text-transform: uppercase;
    font-weight: 800;
    color: rgba(255, 255, 255, .5);
}
.socca__panel-title {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(17px, 1.7vw, 21px);
    letter-spacing: .02em;
    margin-top: 6px;
}
.socca__updated {
    font-size: 9px;
    letter-spacing: .12em;
    text-transform: uppercase;
    font-weight: 700;
    color: rgba(255, 255, 255, .38);
    margin-top: 8px;
}
.socca__mark { color: rgba(255, 255, 255, .5); flex: none; }

.socca__rows { margin-top: 18px; display: flex; flex-direction: column; gap: 2px; }

/* Строки чередуются, как в макете: полупрозрачная подложка у чётных */
.rank {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 12px;
    border-radius: 8px;
}
.rank:nth-child(even) { background: rgba(255, 255, 255, .04); }
.rank__pos {
    font-size: 12px;
    font-weight: 700;
    color: rgba(255, 255, 255, .45);
    width: 18px;
    flex: none;
}
.rank__country {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .88);
}
/* Флаг кружком, как на макете. Картинкой, а не эмодзи: Windows
   эмодзи-флаги не рисует и показывает вместо них две буквы кода. */
.rank__flag {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    object-fit: cover;
    flex: none;
    background: rgba(255, 255, 255, .12);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2);
}
/* Длинные названия переносим, а не обрезаем */
.rank__name { min-width: 0; overflow-wrap: anywhere; }

/* Лидер рейтинга */
.rank--top { background: rgba(45, 168, 140, .22); }
.rank--top .rank__pos { color: #fff; }
.rank--top .rank__country { color: #fff; font-weight: 800; }

.socca__rows { margin-top: 0; }
/* Все 75 мест внутри панели: без прокрутки блок вытянулся бы на три
   экрана и выдавил бы с главной всё, что ниже */
.socca__scroll {
    margin-top: 16px;
    max-height: 300px;
    overflow-y: auto;
    padding-right: 6px;
    /* полоса прокрутки на тёмной панели: тонкая и приглушённая */
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, .28) transparent;
}
.socca__scroll::-webkit-scrollbar { width: 6px; }
.socca__scroll::-webkit-scrollbar-track { background: transparent; }
.socca__scroll::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, .22); border-radius: 3px;
}
.socca__scroll::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, .36); }

/* Хвост рейтинга: если показываем не весь список, человек должен
   видеть, что рейтинг на этом не заканчивается */
.socca__rest { padding: 9px 12px 0; font-size: 11.5px; color: rgba(255, 255, 255, .42); }

/* Идущий турнир: живые таблицы у организатора, у себя их не дублируем */
.socca__now {
    margin-top: 16px; padding: 11px 14px;
    display: flex; align-items: center; gap: 10px;
    background: rgba(255, 255, 255, .07); border-radius: 10px;
    font-size: 12px; line-height: 1.4; color: rgba(255, 255, 255, .86);
}
a.socca__now:hover { background: rgba(255, 255, 255, .13); color: #fff; opacity: 1; }
/* Обычное состояние — спокойная точка. Жёлтая с ореолом читается как
   «прямо сейчас», и постоянной строке про федерацию она не подходит */
.socca__now::before {
    content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%;
    background: rgba(255, 255, 255, .38);
}
.socca__now--live::before {
    background: var(--brand-yellow);
    box-shadow: 0 0 0 4px rgba(242, 228, 0, .18);
}
.socca__now-text { min-width: 0; }
.socca__now-arrow { margin-left: auto; flex: none; color: var(--brand-yellow); }

.socca__all { margin-top: 14px; color: var(--brand-yellow); }
.socca__all:hover { color: #0c1d2d; }

/* Фото чемпионов */
.socca__media {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    min-height: 380px;
    background: var(--brand-navy);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}
.socca__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* Плашка лежит на фото карточкой с отступом от краёв, а не полосой
   впритык: у полосы верхние углы оставались прямыми и блок выглядел
   обрубленным */
.socca__caption {
    position: relative;
    background: var(--brand-yellow);
    color: #0c1d2d;
    padding: 20px 24px 22px;
    margin: 0 16px 16px;
    border-radius: 18px;
}
.socca__caption-eyebrow {
    font-size: 9.5px;
    letter-spacing: .16em;
    text-transform: uppercase;
    font-weight: 800;
    opacity: .75;
}
.socca__caption-title {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(20px, 2.4vw, 30px);
    letter-spacing: .02em;
    margin-top: 6px;
    /* Длинные подписи переносим по словам, а не режем */
    overflow-wrap: anywhere;
}
.socca__caption-eyebrow { overflow-wrap: anywhere; }

/* Титулы сборной на жёлтой плашке — вместо подписи «что за снимок».
   Плитками, а не списком строк: список читался как перечисление,
   а это витрина достижений, и год в нём — главное */
.socca__honours {
    margin: 12px 0 0; padding: 0; list-style: none;
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px;
}
.socca__honour {
    position: relative;
    display: flex; flex-direction: column; gap: 1px;
    padding: 11px 13px 12px;
    border-radius: 12px;
    background: #0c1d2d;
    color: #fff;
    min-width: 0;
}
/* Медаль — кружок в углу плитки. Не эмодзи: они в разных системах
   разного размера и ломают выравнивание */
.socca__honour-medal {
    position: absolute; top: 11px; right: 12px;
    width: 9px; height: 9px; border-radius: 50%;
    background: var(--brand-yellow);
    box-shadow: 0 0 0 3px rgba(242, 228, 0, .18);
}
.socca__honour--bronze .socca__honour-medal {
    background: #C98A54; box-shadow: 0 0 0 3px rgba(201, 138, 84, .2);
}
.socca__honour-year {
    font-family: var(--font-display); font-weight: 800;
    font-size: 21px; line-height: 1.05; color: var(--brand-yellow);
    font-variant-numeric: tabular-nums;
}
.socca__honour--bronze .socca__honour-year { color: #E5B98C; }
.socca__honour-title {
    margin-top: 4px;
    font-size: 10.5px; font-weight: 700; letter-spacing: .06em;
    text-transform: uppercase; line-height: 1.25;
    overflow-wrap: anywhere;
}
/* Город не переносим по слогам: «Кишинё / в» в две строки выглядело
   опечаткой. Названия короткие, места хватает */
.socca__honour-note {
    font-size: 11px; color: rgba(255, 255, 255, .55); line-height: 1.3;
    white-space: nowrap;
}

@media (max-width: 1080px) {
    .socca__honours { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* На телефоне плитка разворачивается в строку: год — название — город */
@media (max-width: 560px) {
    .socca__honours { grid-template-columns: 1fr; gap: 8px; }
    .socca__honour {
        flex-direction: row; align-items: center; gap: 10px; padding: 10px 14px;
    }
    .socca__honour-year { font-size: 18px; flex: none; }
    .socca__honour-title { margin-top: 0; flex: 1; min-width: 0; }
    .socca__honour-note { flex: none; margin-left: auto; }
    .socca__honour-medal { position: static; flex: none; }
}

/* Круглый флаг чемпиона на стыке фото и подписи */
/* Бейдж висит на верхней кромке жёлтой плашки. Раньше отступ был задан
   от низа фото числом и ломался, стоило подписи стать выше */
.socca__flag-badge {
    position: absolute;
    right: 26px;
    top: -29px;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    border: 3px solid var(--brand-yellow);
    overflow: hidden;
    display: flex;
    z-index: 1;
}
.socca__flag-badge img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 620px) {
    .socca__flag-badge { width: 44px; height: 44px; right: 16px; top: -22px; }
    .socca__caption { padding: 16px 18px 18px; }
}
/* ---------- Новости ---------- */
.news-grid { display: grid; grid-template-columns: minmax(0,1.2fr) minmax(0,1fr) minmax(0,1fr); gap: 16px; }
.news-col { display: grid; grid-template-rows: repeat(2, 1fr); gap: 16px; }

.news {
    padding: 24px 26px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 18px;
    color: var(--text);
}
.news:hover { opacity: 1; border-color: var(--line-2); }
.news__date { font-size: 10px; letter-spacing: .12em; font-weight: 800; color: var(--muted); margin-bottom: 12px; }
.news__title { font-family: var(--font-display); font-size: 21px; line-height: 1.15; letter-spacing: .02em; }
.news__text { font-size: 13px; color: var(--muted-2); margin-top: 10px; line-height: 1.55; }
.news__tag { font-size: 11px; letter-spacing: .14em; color: var(--muted); font-weight: 800; }

.news--feature { padding: 0; overflow: hidden; }
.news--feature img { width: 100%; height: 250px; object-fit: cover; }
.news__inner {
    padding: 24px 26px;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 22px;
}
.news--feature .news__title { font-size: clamp(22px, 2.2vw, 28px); line-height: 1.12; }
.news--feature .news__text { font-size: 14px; margin-top: 12px; line-height: 1.6; }
/* .badge и его модификаторы — ниже, в разделе бейджей */

/* ---------- Документы ---------- */
.docs { padding: 38px 40px; }
.docs__inner { display: grid; grid-template-columns: minmax(0,.85fr) minmax(0,2fr); gap: 44px; }
.docs__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.doc {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    background: var(--panel-2);
    border: 1px solid var(--line);
    border-radius: 9px;
    padding: 18px 20px;
    color: var(--text);
}
.doc:hover { border-color: var(--accent-text); opacity: 1; }
.doc__ext {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    background: var(--line);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-weight: 800;
    color: var(--muted-2);
    flex: none;
}
.doc__body { flex: 1; min-width: 0; }
.doc__name { display: block; font-size: 14px; font-weight: 700; line-height: 1.35; }
.doc__desc { display: block; font-size: 12px; color: var(--muted-2); margin-top: 5px; line-height: 1.5; }
.doc__icon { color: var(--muted); flex: none; }
.doc:hover .doc__icon { color: var(--accent-text); }
.doc__meta { display: block; font-size: 11px; color: var(--muted); margin-top: 4px; }

/* ---------- Фотоальбомы ---------- */
.album {
    display: block;
    border-radius: var(--radius);
    overflow: hidden;
    position: relative;
    border: 1px solid var(--line);
    color: #fff;
}
.album:hover { opacity: 1; }
.album img { width: 100%; height: 230px; object-fit: cover; transition: transform .4s ease; }
.album:hover img { transform: scale(1.05); }
.album__veil {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(8, 20, 29, .96) 0 48%, rgba(8, 20, 29, .6) 72%, rgba(8, 20, 29, 0) 100%);
}
.album__caption { position: absolute; left: 18px; right: 18px; bottom: 16px; }
.album__cat { display: block; font-size: 10px; letter-spacing: .14em; font-weight: 800; color: #ffec2d; margin-bottom: 6px; }
.album__title { display: block; font-family: var(--font-display); font-size: 18px; line-height: 1.2; letter-spacing: .02em; }
.album__meta { display: block; font-size: 11px; color: var(--soft); margin-top: 6px; font-weight: 600; }

/* ---------- Партнёры ---------- */
.partners {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 24px 32px;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    padding: 34px 0;
}
.partners__grid {
    flex: 1 1 480px;
    min-width: 0;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
}
.partner {
    height: 64px;
    border: 1px solid var(--line);
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    letter-spacing: .12em;
    font-weight: 800;
    color: var(--dim);
    text-align: center;
    padding: 8px;
    line-height: 1.3;
}
.partner img { max-height: 44px; width: auto; object-fit: contain; }

/* ---------- Приложение ---------- */
/* Фон подогнан под картинку с телефонами: цвета сняты с неё пипеткой —
   основа #0d3f53, диагональные полосы #0a384d. Угол и шаг тоже измерены по
   картинке: граница полосы уходит вниз-вправо примерно на 4.6°, полоса ~81px,
   период ~325px. Точное совпадение фаз невозможно (полосы в PNG мягкие, с
   анти-алиасингом), поэтому края картинки дополнительно растворяются маской —
   см. .app-cta__devices ниже. */
.app-cta-section {
    background:
        repeating-linear-gradient(
            95deg,
            transparent 0 244px,
            #0a384d 244px 325px
        ),
        #0d3f53;
    overflow: hidden;
    position: relative;
    isolation: isolate;
}
.app-cta {
    color: #fff;
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 28px 0;
    display: flex;
    align-items: center;
    /* По центру и с небольшим зазором: в макете текст и телефоны стоят
       рядом, а не разнесены по краям полосы */
    justify-content: center;
    gap: clamp(24px, 4vw, 64px);
    flex-wrap: wrap;
    position: relative;
    z-index: 1;
}
/* AFL в заголовке — жёлтым, как в макете */
.app-cta__brand { color: var(--brand-yellow); }
.app-cta__title { font-family: var(--font-display); font-size: clamp(26px, 3vw, 36px); line-height: 1.08; letter-spacing: .02em; }
.app-cta__text { font-size: 14px; color: rgba(255, 255, 255, .82); margin-top: 14px; line-height: 1.6; max-width: 420px; }
.app-cta__row { display: flex; gap: 8px; margin-top: 26px; align-items: center; flex-wrap: wrap; }
.app-cta .app-cta__store {
    min-width: 132px;
    padding: 8px 14px;
    border: 0;
    border-radius: 12px;
    background: #fff;
    color: #0d4355;
    font-style: normal;
    letter-spacing: 0;
    text-transform: none;
    gap: 9px;
}
.app-cta__store-icon { width: 22px; height: 22px; flex: 0 0 22px; fill: #0d4355; }
.app-cta__store-copy { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.15; }
.app-cta__store-copy small { font-size: 7px; font-weight: 700; letter-spacing: .02em; }
.app-cta__store-copy strong { font-size: 12px; font-weight: 800; white-space: nowrap; }
.app-cta__store[data-app-link="android"] { min-width: 140px; }
.app-cta__store[data-app-link="android"] .app-cta__store-icon { fill: none; }
.app-cta .app-cta__store:hover { color: #0d4355; opacity: .86; }
.app-cta__shot {
    flex: none;
    width: min(100%, 515px);
    height: 420px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}
.app-cta__devices {
    display: block;
    width: auto;
    max-width: 100%;
    height: 100%;
    object-fit: contain;
    /* Края растворяем в фоне: полосы внутри картинки и на секции идут под
       одним углом, но фаза не совпадает — без этого стык было бы видно.
       Ширина растворения меньше пустых полей в самом PNG (слева 27px,
       справа 38px, снизу 34px в экранном масштабе), иначе подтаяли бы
       телефоны. Сверху растворения нет: там бейдж рейтинга упирается в край. */
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 22px),
                        linear-gradient(to left, transparent 0, #000 30px),
                        linear-gradient(to top, transparent 0, #000 26px);
    mask-image: linear-gradient(to right, transparent 0, #000 22px),
                linear-gradient(to left, transparent 0, #000 30px),
                linear-gradient(to top, transparent 0, #000 26px);
    -webkit-mask-composite: source-in;
    mask-composite: intersect;
}

/* ---------- Подвал ---------- */
/* Без внешнего отступа: он показывал полосу фона страницы между
   последней секцией и подвалом. Воздух даёт внутренний padding. */
.footer {
    color: var(--text);
    border-top: 1px solid var(--line);
    background: #061019;
}
.footer__top {
    padding-top: 52px;
    display: grid;
    grid-template-columns: minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1.2fr);
    gap: 44px;
}
.footer__about { font-size: 13px; color: var(--muted); line-height: 1.7; max-width: 330px; }
.footer__brand { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.footer__logo { height: 52px; width: auto; max-width: 100%; }
.footer__brand-mark {
    width: 38px;
    height: 38px;
    border-radius: 8px;
    background: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 17px;
    color: var(--on-accent);
    flex: none;
}
.footer__col-title { font-size: 11px; letter-spacing: .16em; color: var(--accent-text); font-weight: 800; margin-bottom: 16px; }
.footer__links { display: flex; flex-direction: column; gap: 11px; font-size: 13px; }
.footer__links a { color: var(--muted-2); }
.footer__social { display: flex; gap: 12px; flex-wrap: wrap; font-size: 13px; margin-top: 4px; }
.footer__social a { color: var(--accent-text); }
.footer__more { display: inline-block; font-size: 12px; letter-spacing: .08em; font-weight: 800; margin-top: 6px; }
.footer__contacts { display: flex; flex-direction: column; gap: 13px; font-size: 13px; color: var(--muted-2); line-height: 1.5; }
.footer__contact { display: flex; gap: 10px; align-items: flex-start; }
.footer__contact svg { flex: none; margin-top: 2px; }
.footer__contact a { color: var(--muted-2); }
.footer__bottom {
    margin-top: 36px;
    padding: 32px 0;
    border-top: 1px solid var(--line);
    display: flex;
    justify-content: space-between;
    gap: 12px 24px;
    flex-wrap: wrap;
    font-size: 11px;
    color: var(--dim);
    letter-spacing: .06em;
}

/* ---------- Эмблема команды (или монограмма, пока нет файла) ---------- */
.crest {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    object-fit: contain;
    flex: none;
    background: var(--panel-2);
}
.crest--xs { width: 18px; height: 18px; }
.crest--sm { width: 28px; height: 28px; }
.crest--lg { width: 72px; height: 72px; }
.crest--fallback {
    background: var(--panel-2);
    border: 1px solid var(--line-2);
    padding: 1px;
    box-sizing: border-box;
}
.crest--xs.crest--fallback { padding: 0; }
.crest--sm.crest--fallback { padding: 0; }
.crest--lg.crest--fallback { padding: 2px; }

.match__side {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
}
.match__side--away { justify-content: flex-end; }
.match__side .match__team { flex: 0 1 auto; }

/* ---------- Таблица ---------- */
.card--pad { padding: 8px 10px; }

.table-wrap { overflow-x: auto; }
.table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    min-width: 620px;
}
.table th {
    text-align: left;
    font-size: 10px;
    letter-spacing: .12em;
    font-weight: 800;
    color: var(--muted);
    text-transform: uppercase;
    padding: 14px 8px;
    border-bottom: 1px solid var(--line);
    white-space: nowrap;
}
.table td {
    padding: 12px 8px;
    border-bottom: 1px solid var(--line);
    color: var(--muted-2);
    white-space: nowrap;
}
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr.is-top .table__pos { color: var(--accent-text); }
/* td-селектор перебивает одиночный класс, поэтому усиливаем */
.table td.table__pos,
.table th.table__pos {
    width: 34px;
    font-family: var(--font-display);
    font-size: 15px;
    color: var(--muted);
    text-align: center;
}
.table__team {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--text);
    font-weight: 700;
    white-space: normal;
}
.table tda.table__team:hover { color: var(--accent-text); opacity: 1; }
.table__goals { color: var(--muted); }
.table td.table__pts {
    font-family: var(--font-display);
    font-size: 16px;
    color: var(--text);
}
.table tbody tr.is-top td.table__pts { color: var(--accent-text); }

/* ---------- Герой: сводка турнира ---------- */
.podium__team {
    display: flex;
    align-items: center;
    gap: 9px;
    font-weight: 700;
    font-size: 15px;
    margin-top: 10px;
}
.podium__meta { font-size: 11px; color: var(--muted); margin-top: 8px; font-weight: 600; }

.hero__summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    padding-top: 24px;
    border-top: 1px solid var(--line);
}
.hero__summary-value { font-family: var(--font-display); font-size: 22px; }
.hero__figure-logo { object-fit: contain; padding: 40px; }

.trn__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 16px;
}
.trn__status {
    font-size: 10px;
    letter-spacing: .1em;
    font-weight: 800;
    color: var(--accent-text);
    text-transform: uppercase;
}

.stream__score {
    position: absolute;
    bottom: 12px;
    right: 12px;
    font-family: var(--font-display);
    font-size: 15px;
    color: #fff;
    background: rgba(0, 0, 0, .55);
    padding: 3px 9px;
    border-radius: 4px;
}

.news-grid--single { grid-template-columns: 1fr; }

/* ---------- Соцсети, площадки, шаги, FAQ ---------- */
.social-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.social-row__link { display: inline-flex; align-items: center; gap: 9px; }
.social-row__icon { display: inline-flex; flex-shrink: 0; }
.social-row__icon svg { display: block; border-radius: 6px; }

/* ---------- Контакты одним блоком ---------- */
.contacts-top {
    display: flex;
    align-items: flex-start;
    gap: 24px 40px;
    flex-wrap: wrap;
}
.contacts-top > .card { flex: 1 1 420px; }
.contacts-social { flex: 0 1 auto; padding-top: 2px; }

.contacts-card { padding: 4px 24px; max-width: 560px; }
.contacts-card__row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 15px 0;
    border-top: 1px solid var(--line);
}
.contacts-card__row:first-child { border-top: 0; }
.contacts-card__icon {
    flex: 0 0 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: var(--panel-2);
    color: var(--accent-text);
}
.contacts-card__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.contacts-card__label {
    font-size: 10px;
    letter-spacing: .12em;
    font-weight: 800;
    color: var(--muted);
    text-transform: uppercase;
}
.contacts-card__value { font-size: 14.5px; font-weight: 700; color: var(--text); }
.contacts-card__value a { color: var(--accent-text); }

/* ---------- Контакты администрации ---------- */
.person { padding: 20px 22px; display: flex; flex-direction: column; gap: 6px; }
.person__role {
    font-size: 10px;
    letter-spacing: .12em;
    font-weight: 800;
    color: var(--muted);
    text-transform: uppercase;
}
.person__name { font-size: 15px; font-weight: 700; color: var(--text); }
.person__phone { font-size: 14px; font-weight: 700; color: var(--accent-text); }

/* ---------- Реквизиты ---------- */
.reqs { padding: 22px 24px; }
.reqs__title { font-family: var(--font-display); font-size: 18px; letter-spacing: .02em; margin-bottom: 14px; }
.reqs__list { margin: 0; }
.reqs__row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 10px 0;
    border-top: 1px solid var(--line);
}
.reqs__row:first-child { border-top: 0; }
.reqs__label {
    flex: 0 0 150px;
    font-size: 10px;
    letter-spacing: .12em;
    font-weight: 800;
    color: var(--muted);
    text-transform: uppercase;
}
.reqs__value {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    min-width: 0;
}
/* Номер счёта и БИН — моноширинным: так проще сверять цифры глазами */
.reqs__text { font-size: 14px; font-weight: 700; color: var(--text); word-break: break-all; }
.reqs__copy {
    border: 1px solid var(--line-2);
    background: var(--panel-2);
    color: var(--muted-2);
    border-radius: 7px;
    padding: 4px 10px;
    font-family: inherit;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
}
.reqs__copy:hover { border-color: var(--accent-text); color: var(--accent-text); }
.reqs__copy.is-done { border-color: var(--accent); background: var(--accent); color: var(--on-accent); }
.reqs__foot {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--line);
    font-size: 14px;
    font-weight: 600;
    color: var(--muted-2);
}

@media (max-width: 560px) {
    .reqs__label { flex-basis: 100%; }
}

.venue { padding: 22px; display: flex; flex-direction: column; gap: 10px; }
.venue__name { font-family: var(--font-display); font-size: 19px; letter-spacing: .02em; }
.venue__meta { font-size: 13px; color: var(--muted); line-height: 1.5; flex: 1; }
.venue__map { align-self: flex-start; }

.cta-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    padding: 26px 28px;
}
.cta-row__title { font-family: var(--font-display); font-size: 21px; letter-spacing: .02em; }
.cta-row__text { font-size: 14px; color: var(--muted-2); margin: 8px 0 0; line-height: 1.6; max-width: 460px; }
.cta-row__actions { display: flex; gap: 10px; flex-wrap: wrap; }

.open-reg {
    padding: 22px 26px;
    margin-top: 22px;
    border-color: rgba(255, 236, 45, .4);
}
.open-reg__title {
    font-size: 11px;
    letter-spacing: .14em;
    font-weight: 800;
    text-transform: uppercase;
    color: var(--accent-text);
    margin-bottom: 14px;
}
.open-reg__list { display: flex; gap: 10px; flex-wrap: wrap; }

.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.step { display: flex; gap: 16px; padding: 22px; align-items: flex-start; }
.step__num {
    font-family: var(--font-display);
    font-size: 26px;
    color: var(--accent-text);
    line-height: 1;
    flex: none;
    width: 34px;
}
.step__title { font-weight: 700; font-size: 15px; line-height: 1.3; }
.step__text { font-size: 13px; color: var(--muted-2); margin: 8px 0 0; line-height: 1.6; }

.faq { display: flex; flex-direction: column; gap: 10px; }
.faq__item {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
}
.faq__item[open] { border-color: var(--line-2); }
.faq__q {
    padding: 18px 22px;
    font-weight: 700;
    font-size: 15px;
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::after {
    content: "+";
    font-family: var(--font-display);
    font-size: 22px;
    color: var(--accent-text);
    line-height: 1;
    flex: none;
    transition: transform .2s ease;
}
.faq__item[open] .faq__q::after { transform: rotate(45deg); }
.faq__q:hover { color: var(--accent-text); }
.faq__a {
    padding: 0 22px 20px;
    font-size: 14px;
    color: var(--muted-2);
    line-height: 1.7;
}




/* ---------- Карточка новости в ленте ---------- */
.ncard {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    color: var(--text);
    transition: transform .2s ease, border-color .2s ease;
}
.ncard:hover { opacity: 1; transform: translateY(-3px); border-color: var(--accent-text); }
.ncard__img { width: 100%; height: 190px; object-fit: cover; }
.ncard__body { padding: 22px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.ncard__date { font-size: 10px; letter-spacing: .12em; font-weight: 800; color: var(--muted); }
.ncard__title { font-family: var(--font-display); font-size: 19px; line-height: 1.2; letter-spacing: .02em; }
.ncard__text { font-size: 13px; color: var(--muted-2); line-height: 1.6; margin: 0; flex: 1; }
.ncard__more { font-size: 11px; letter-spacing: .12em; font-weight: 800; color: var(--accent-text); }

/* ---------- Страница новости ---------- */
.article__head { max-width: 760px; margin-top: 18px; }
.article__cover {
    width: 100%;
    max-height: 460px;
    object-fit: cover;
    border-radius: var(--radius-lg);
    margin: 30px 0;
    border: 1px solid var(--line);
}
.article__body {
    max-width: 760px;
    font-size: 16px;
    line-height: 1.8;
    color: var(--muted-2);
}
.article__body p { margin: 0 0 18px; }
.article__body h2, .article__body h3, .article__body h4 {
    font-family: var(--font-display);
    color: var(--text);
    letter-spacing: .02em;
    margin: 32px 0 12px;
}
.article__body h2 { font-size: 26px; }
.article__body h3 { font-size: 21px; }
.article__body h4 { font-size: 18px; }
.article__body strong, .article__body b { color: var(--text); font-weight: 700; }
.article__body ul, .article__body ol { margin: 0 0 18px; padding-left: 22px; }
.article__body li { margin-bottom: 8px; }
.article__body blockquote {
    margin: 24px 0;
    padding: 4px 0 4px 20px;
    border-left: 3px solid var(--accent);
    color: var(--text);
}

/* ---------- Шапка страницы (турнир, команда) ---------- */
.phead {
    display: flex;
    align-items: center;
    gap: 22px;
    margin-top: 18px;
    flex-wrap: wrap;
}
.phead__body { flex: 1; min-width: 240px; }
.phead__status {
    font-size: 11px;
    letter-spacing: .12em;
    font-weight: 800;
    text-transform: uppercase;
    color: var(--muted);
    border: 1px solid var(--line-2);
    border-radius: 999px;
    padding: 8px 16px;
    white-space: nowrap;
}
.phead__status.is-live {
    color: var(--on-accent);
    background: var(--accent);
    border-color: var(--accent);
}


.progress {
    height: 4px;
    border-radius: 2px;
    background: var(--line);
    overflow: hidden;
}
.progress__bar { display: block; height: 100%; background: var(--accent); border-radius: 2px; }

/* ---------- Карточка команды в сетке ---------- */
.tmcard {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    color: var(--text);
    transition: transform .2s ease, border-color .2s ease;
}
.tmcard:hover { opacity: 1; transform: translateY(-2px); border-color: var(--accent-text); }
.tmcard__pos {
    font-family: var(--font-display);
    font-size: 18px;
    color: var(--muted);
    width: 24px;
    text-align: center;
    flex: none;
}
.tmcard__body { min-width: 0; }
.tmcard__name {
    display: block;
    font-weight: 700;
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.tmcard__meta { display: block; font-size: 11px; color: var(--muted); margin-top: 3px; }

/* ---------- Позиция команды в таблице ---------- */
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.posrow {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 20px;
    color: var(--text);
}
.posrow:hover { opacity: 1; border-color: var(--accent-text); }
.posrow__place {
    font-family: var(--font-display);
    font-size: 26px;
    color: var(--accent-text);
    width: 36px;
    text-align: center;
    flex: none;
}
.posrow__body { flex: 1; min-width: 0; }
.posrow__tournament { display: block; font-weight: 700; font-size: 14px; line-height: 1.3; }
.posrow__meta { display: block; font-size: 11px; color: var(--muted); margin-top: 5px; }
.posrow__points { font-family: var(--font-display); font-size: 22px; }

/* Полоска исхода матча слева: победа / ничья / поражение */
.outcome-wrap { display: block; position: relative; }
.outcome-wrap::before {
    content: "";
    position: absolute;
    left: 0;
    top: 8px;
    bottom: 8px;
    width: 3px;
    border-radius: 0 2px 2px 0;
}
.outcome--win::before { background: #33c46a; }
.outcome--draw::before { background: var(--muted); }
.outcome--loss::before { background: var(--live); }
.outcome--none::before { background: transparent; }

/* ---------- Строка матча (списки) ---------- */
.mrow {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    grid-template-areas:
        "meta meta meta"
        "home center away"
        "foot foot foot";
    align-items: center;
    gap: 8px 14px;
    padding: 14px 20px;
    border-bottom: 1px solid var(--line);
    color: var(--text);
}
.mrow:last-child { border-bottom: 0; }
.mrow:hover { opacity: 1; background: var(--panel-2); }
.mrow--off { opacity: .55; }

.mrow__meta {
    grid-area: meta;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    font-size: 10px;
    letter-spacing: .12em;
    font-weight: 800;
    color: var(--muted);
    text-transform: uppercase;
}
.mrow__round { color: var(--accent-text); }

.mrow__side { display: flex; align-items: center; gap: 10px; min-width: 0; }
.mrow__side:first-of-type { grid-area: home; }
.mrow__side--away { grid-area: away; justify-content: flex-end; }
.mrow__team {
    font-weight: 700;
    font-size: 15px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mrow__center {
    grid-area: center;
    text-align: center;
    min-width: 92px;
}
.mrow__score { display: block; font-family: var(--font-display); font-size: 22px; color: var(--accent-text); }
.mrow__time { display: block; font-family: var(--font-display); font-size: 19px; }
.mrow__vs { display: block; font-family: var(--font-display); font-size: 19px; color: var(--muted); }
.mrow__status {
    display: block;
    font-size: 10px;
    letter-spacing: .1em;
    font-weight: 700;
    color: var(--muted);
    margin-top: 3px;
    text-transform: uppercase;
}
.mrow--live .mrow__score { color: var(--live); }

.mrow__foot {
    grid-area: foot;
    display: flex;
    justify-content: space-between;
    gap: 10px;
    font-size: 11px;
    color: var(--muted);
    font-weight: 600;
}
.mrow__video { color: var(--accent-text); }

/* ---------- Фильтры ---------- */
.filters { padding: 20px 22px; }
.filters__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px;
}
.filters__actions { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; }

.field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.field.is-hidden { display: none; }
.field__label {
    font-size: 10px;
    letter-spacing: .12em;
    font-weight: 800;
    color: var(--muted);
    text-transform: uppercase;
}
.field__input {
    width: 100%;
    background: var(--panel-2);
    border: 1px solid var(--line-2);
    border-radius: 8px;
    padding: 11px 12px;
    color: var(--text);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
}
.field__input:focus {
    outline: none;
    border-color: var(--accent-text);
}

/* ---------- Живой поиск: выпадашка с подсказками ---------- */
.suggest { position: relative; }
.suggest__list {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 30;
    margin-top: 6px;
    padding: 5px;
    background: var(--panel);
    border: 1px solid var(--line-2);
    border-radius: 10px;
    box-shadow: 0 12px 28px rgba(0, 0, 0, .16);
    max-height: 320px;
    overflow-y: auto;
}
.suggest__item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 7px;
    color: var(--text);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}
.suggest__item:hover,
.suggest__item.is-active { background: var(--panel-2); }
.suggest__crest { width: 22px; height: 22px; object-fit: contain; flex-shrink: 0; }
.suggest__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.suggest__city {
    margin-left: auto;
    padding-left: 8px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

/* ---------- Пустые состояния ---------- */
.empty { padding: 52px 30px; text-align: center; }
.empty--soft { padding: 34px 30px; }
.empty__icon { color: var(--line-2); margin-bottom: 14px; }
.empty__title { font-family: var(--font-display); font-size: 20px; letter-spacing: .02em; }
.empty__text { font-size: 14px; color: var(--muted); margin: 10px 0 20px; line-height: 1.6; }

.errpage { padding: 70px 30px; }
.errpage__code {
    font-family: var(--font-display);
    font-size: clamp(64px, 12vw, 110px);
    line-height: 1;
    color: var(--accent-text);
    letter-spacing: .04em;
    margin-bottom: 10px;
}
.errpage__actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* ---------- Пагинация ---------- */
.pager { margin-top: 26px; }
.pgn {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.pgn__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
    padding: 0 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
    color: var(--muted-2);
    background: var(--panel);
}
.pgn__btn:hover { border-color: var(--accent-text); color: var(--accent-text); opacity: 1; }
.pgn__btn.is-current {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--on-accent);
}
.pgn__btn.is-disabled { opacity: .4; }
.pgn__gap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 38px;
    color: var(--muted);
    font-weight: 700;
}
/* Стрелки заменяют подписи на узком экране, где на слова нет места */
.pgn__arrow { display: none; font-size: 18px; line-height: 1; }
.pgn__narrow-only { display: none; }

/* ---------- Табло матча ---------- */
.scoreboard {
    margin-top: 18px;
    background: linear-gradient(120deg, #043750 0%, #062230 60%, var(--panel) 100%);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 28px 32px;
    color: var(--text);
}
.scoreboard--live { border-color: var(--live); }
.scoreboard__meta {
    display: flex;
    align-items: center;
    gap: 8px 18px;
    flex-wrap: wrap;
    font-size: 11px;
    letter-spacing: .12em;
    font-weight: 800;
    color: var(--muted);
    text-transform: uppercase;
    margin-bottom: 24px;
}
.scoreboard__tournament { color: var(--accent-text); }
.scoreboard__status { margin-left: auto; }

.scoreboard__body {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 20px;
}
.scoreboard__team {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-align: center;
    font-family: var(--font-display);
    font-size: 20px;
    letter-spacing: .02em;
}
.scoreboard__center { text-align: center; }
.scoreboard__score {
    font-family: var(--font-display);
    font-size: clamp(38px, 6vw, 56px);
    line-height: 1;
    color: var(--accent-text);
    letter-spacing: .04em;
}
.scoreboard__time { font-family: var(--font-display); font-size: clamp(30px, 5vw, 44px); line-height: 1; }
.scoreboard__date { font-size: 12px; color: var(--muted); font-weight: 600; margin-top: 10px; }
.scoreboard__pens { font-size: 11px; color: var(--muted-2); font-weight: 700; margin-top: 6px; }
.scoreboard__actions { display: flex; gap: 10px; margin-top: 26px; flex-wrap: wrap; }

.detail__value { font-size: 15px; font-weight: 700; margin-top: 8px; }

/* ---------- События матча ---------- */
.timeline { display: flex; flex-direction: column; }
.timeline__row {
    display: grid;
    grid-template-columns: 28px 44px 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 11px 6px;
    border-bottom: 1px solid var(--line);
    font-size: 14px;
}
.timeline__row:last-child { border-bottom: 0; }
.timeline__icon { font-size: 15px; }
.timeline__minute { font-family: var(--font-display); color: var(--accent-text); }
.timeline__player { font-weight: 700; }
.timeline__team { font-size: 12px; color: var(--muted); }
.timeline__row.is-away { background: var(--panel-2); }

/* ---------- Составы ---------- */
.lineup { display: flex; flex-direction: column; }
.lineup__row {
    display: grid;
    grid-template-columns: 34px 1fr auto;
    align-items: center;
    gap: 10px;
    padding: 9px 4px;
    border-bottom: 1px solid var(--line);
    font-size: 14px;
}
.lineup__row:last-child { border-bottom: 0; }
.lineup__row.is-sub { opacity: .7; }
.lineup__number {
    font-family: var(--font-display);
    color: var(--muted);
    text-align: center;
}
.lineup__name { font-weight: 600; }
.lineup__captain {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 4px;
    background: var(--accent);
    color: var(--on-accent);
    font-size: 9px;
    font-weight: 800;
    margin-left: 6px;
}
.lineup__pos { font-size: 11px; color: var(--muted); font-weight: 700; }

/* ---------- Страница турнира ---------- */
.back-link { font-size: 12px; letter-spacing: .1em; font-weight: 800; }

.rounds { display: flex; flex-direction: column; gap: 22px; }
.round {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
}
.round__title {
    padding: 14px 20px;
    font-family: var(--font-display);
    font-size: 15px;
    letter-spacing: .08em;
    color: var(--accent-text);
    border-bottom: 1px solid var(--line);
    background: var(--panel-2);
}
.round__list { display: flex; flex-direction: column; }

.fixture {
    display: grid;
    grid-template-columns: 1fr auto 1fr 34px;
    align-items: center;
    gap: 14px;
    padding: 13px 20px;
    border-bottom: 1px solid var(--line);
    font-size: 14px;
}
.fixture:last-child { border-bottom: 0; }
.fixture__side { display: flex; align-items: center; gap: 10px; min-width: 0; }
.fixture__side span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fixture__side--away { justify-content: flex-end; }
.fixture__score {
    font-family: var(--font-display);
    font-size: 18px;
    color: var(--accent-text);
    text-align: center;
    min-width: 84px;
}
.fixture__date {
    display: block;
    font-family: var(--font-text);
    font-size: 10px;
    letter-spacing: .08em;
    color: var(--muted);
    font-weight: 700;
    margin-top: 2px;
}
.fixture__link { text-align: right; font-size: 13px; }


/* ---------- Подвал: аккуратнее и компактнее ---------- */
.footer { background: var(--brand-navy); border-top: 0; }
.footer__col-title {
    font-family: var(--font-display);
    font-weight: 800;
    font-style: normal;
    text-transform: uppercase;
    font-size: 13px;
    letter-spacing: .04em;
    color: #ffffff;
    margin-bottom: 18px;
}
.footer__links a { color: #9fb3c2; font-size: 13px; }
.footer__links a:hover { color: var(--brand-yellow); opacity: 1; }
.footer__about { color: #8ba0b0; }
.footer__cta { margin-top: 18px; }
.footer__contacts { color: #9fb3c2; }
.footer__contact a { color: #9fb3c2; }
.footer__contact a:hover { color: var(--brand-yellow); opacity: 1; }
.footer__bottom { border-top: 1px solid rgba(255, 255, 255, .09); color: #6d8494; }

/* Соцсети и сторы в подвале — кружки и бейджи, как на макете */
.footer__socials { display: flex; gap: 8px; margin-top: 20px; }
.footer__socials a {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: rgba(255, 255, 255, .07);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #c3d2dc;
}
.footer__socials a:hover { background: var(--brand-yellow); color: #0c1d2d; opacity: 1; }

/* ---------- Заглушка простой страницы ---------- */
.stub { padding: 96px 0 40px; text-align: center; }
.stub__text { font-size: 15px; color: var(--muted-2); margin: 18px auto 30px; max-width: 520px; line-height: 1.7; }

/* ============================================================
   Адаптив
   ============================================================ */
@media (max-width: 1180px) {
    .hero__body { padding: 32px 30px; }
    .socca__panel { padding: 28px; }
    .docs__inner { grid-template-columns: 1fr; gap: 28px; }
}

/* Меню сворачивается в бургер раньше сеточных правил: шесть пунктов вместе с
   логотипом, городом и кнопкой упираются в строку около 1075px (казахский —
   самый длинный), поэтому берём порог с запасом */
@media (max-width: 1120px) {
    :root { --gut: 24px; }

    .burger { display: flex; }

    .brand__logo { height: 38px; }

    /* .hdr создаёт containing block (backdrop-filter), поэтому меню выпадает ровно под шапкой */
    .nav {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        justify-content: flex-start;
        align-items: stretch;
        gap: 0;
        background: var(--hdr-solid);
        border-bottom: 1px solid var(--line);
        padding: 8px var(--gut) 20px;
        font-size: 13px;
        /* Вычитаем шапку (77px) и верхнюю полосу над ней: раньше её не
           учитывали, и меню вылезало за нижний край экрана */
        max-height: calc(100vh - 120px);
        /* dvh учитывает свернувшуюся адресную строку, vh — нет; оставляем
           обе строки, старые браузеры возьмут первую */
        max-height: calc(100dvh - 120px);
        overflow-y: auto;
        /* Докрутив меню до конца, не утаскиваем за собой страницу под ним */
        overscroll-behavior: contain;
        opacity: 0;
        visibility: hidden;
        transform: translateY(-10px);
        transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
        z-index: 40;
    }
    .nav a {
        padding: 15px 2px 15px 14px;
        border-bottom: 1px solid var(--line);
    }
    .nav a:last-child { border-bottom: 0; }
    /* в выпадающем списке полоса снизу нечитаема — активный пункт метим слева */
    .nav a.is-active::after { display: none; }
    .nav a.is-active { box-shadow: inset 3px 0 0 var(--accent); }
    .nav__bar { display: none; }
    .nav.is-open {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }
}

@media (max-width: 1080px) {
    :root { --gut: 24px; }


    .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .hero { grid-template-columns: 1fr; }
    .hero__figure { min-height: 300px; order: -1; }

    .socca { grid-template-columns: 1fr; }
    /* 340px хватало прежней короткой подписи; с плитками титулов фото
       сжималось в полоску, поэтому блоку нужна высота под оба слоя */
    .socca__media { min-height: 580px; }

    .news-grid { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
    .news--feature { grid-column: 1 / -1; }
    .news--feature img { height: 300px; }

    .partners { justify-content: center; }
    .partners__grid { flex-basis: 100%; grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
    :root { --gut: 18px; }

    .section { padding-top: 52px; }
    .section--first { padding-top: 32px; }
    .section--mid { padding-top: 44px; }
    /* Без этой строки общее правило .section выше перебивало модификатор,
       и «плотная» секция на мобильных переставала быть плотной */
    .section--tight { padding-top: 34px; }

    /* Пагинация: «Назад/Далее» превращаются в стрелки, а дальние номера
       страниц скрываются — иначе строка не помещается и переносится */
    .pgn__word { display: none; }
    .pgn__arrow { display: inline; }
    .pgn__wide-only { display: none; }
    .pgn__narrow-only { display: inline-flex; }

    .topbar__meta [data-optional] { display: none; }

    .brand__sub { display: none; }
    .brand__logo { height: 32px; }
    .footer__logo { height: 44px; }

    .grid-4, .grid-3 { grid-template-columns: 1fr; }

    .hero__body { padding: 26px 22px; }
    .hero__podium { grid-template-columns: 1fr; }
    .hero__awards { grid-template-columns: 1fr; gap: 24px; }

    .socca__caption { margin: 0 14px 14px; }
    .socca__panel { padding: 24px 22px; }

    .news-grid, .news-col { grid-template-columns: 1fr; grid-template-rows: none; }

    .docs { padding: 26px 22px; }
    .docs__list { grid-template-columns: 1fr; }

    .partners__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .app-cta { padding: 30px 24px; }
    .app-cta__shot { width: 100%; height: 200px; }

    .footer__top { grid-template-columns: 1fr; gap: 32px; }
    .footer__bottom { flex-direction: column; }

    .match__team { font-size: 19px; }
    .match__score { font-size: 24px; }

    .hero__summary { grid-template-columns: 1fr; gap: 16px; }

    .fixture {
        grid-template-columns: 1fr auto 1fr;
        gap: 10px;
        padding: 12px 14px;
        font-size: 13px;
    }
    .fixture__link { display: none; }
    .fixture__score { min-width: 62px; font-size: 16px; }

    .mrow { padding: 12px 14px; gap: 6px 10px; }
    .mrow__team { font-size: 13px; }
    .mrow__center { min-width: 70px; }
    .mrow__score { font-size: 19px; }

    .filters { padding: 16px; }
    .filters__grid { grid-template-columns: 1fr; }

    .scoreboard { padding: 22px 18px; }
    .scoreboard__body { gap: 10px; }
    .scoreboard__team { font-size: 15px; }
    .scoreboard__meta { margin-bottom: 18px; }
    .scoreboard__status { margin-left: 0; }

    .timeline__row { grid-template-columns: 24px 36px 1fr; font-size: 13px; }
    .timeline__team { display: none; }

    .grid-2 { grid-template-columns: 1fr; }
    .article__body { font-size: 15px; }
    .article__cover { margin: 22px 0; }
    .ncard__img { height: 170px; }
    .steps { grid-template-columns: 1fr; }
    .cta-row { flex-direction: column; align-items: flex-start; }
    .faq__q { padding: 15px 18px; font-size: 14px; }
    .faq__a { padding: 0 18px 16px; font-size: 13px; }
    .phead { gap: 14px; }
    .phead__status { order: -1; }
    .tabs__item { font-size: 10.5px; }
    .posrow { padding: 14px 16px; gap: 12px; }
    .posrow__place { font-size: 21px; width: 28px; }
}

@media (max-width: 420px) {
    .hdr__cta { display: none; }
    .match__body { gap: 8px; }
    .match__team { font-size: 17px; }
}

/* Ссылка «показать всю таблицу» под усечённой таблицей */
.table__more {
    display: block;
    text-align: center;
    padding: 14px;
    margin-top: 4px;
    border-top: 1px solid var(--line);
    font-size: 11px;
    font-weight: 800;
    font-style: normal;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--accent-text);
}
.table__more:hover { background: var(--panel-2); opacity: 1; }

/* Кнопка «все турниры» под сеткой на главной */
.trn__all {
    display: flex;
    width: fit-content;
    margin: 22px auto 0;
}

/* ---------- Карточка матча: три жёсткие колонки ----------
   flex со space-between позволял названиям налезать на счёт: Montserrat
   шире Oswald, и длинные названия («KazEuroTrans») перекрывали цифры.
   Сетка 1fr / auto / 1fr фиксирует счёт по центру и не даёт им сползтись. */
.match__body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 10px;
}
.match__side { min-width: 0; overflow: hidden; }
.match__side .match__team {
    flex: 1 1 auto;
    min-width: 0;
    font-size: clamp(15px, 1.35vw, 19px);
    line-height: 1.15;
    /* Длинное название переносим, а не растягиваем карточку */
    overflow-wrap: anywhere;
}
.match__score {
    font-size: clamp(19px, 1.8vw, 24px);
    white-space: nowrap;
    text-align: center;
    padding: 0 4px;
}
.match__kick { padding: 0 4px; }

/* ---------- Цифры лиги: жёлтый блок со скруглением ---------- */
.stats-band {
    background: var(--brand-yellow);
    border-radius: var(--radius-lg);
    padding: 34px clamp(22px, 3.4vw, 52px);
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
}
.stats-band__value {
    font-family: var(--font-display);
    font-weight: 800;
    font-style: normal;
    color: #0c1d2d;
    font-size: clamp(30px, 3.4vw, 44px);
    line-height: 1;
}
.stats-band__label {
    margin-top: 10px;
    font-family: var(--font-display);
    font-weight: 800;
    font-style: normal;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: .05em;
    line-height: 1.35;
    color: #0c1d2d;
}

@media (max-width: 760px) {
    .stats-band {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 22px;
        padding: 26px 22px;
    }
}


/* ---------- Мега-меню турниров в шапке (макет tournament-dropdown-menu) ---------- */
.nav__item { display: flex; align-items: stretch; }
.nav__item--has-menu { position: static; }
.nav__item--has-menu > a { gap: 6px; }
.nav__caret { flex: none; transition: transform .18s ease; }
.nav__item.is-open .nav__caret { transform: rotate(180deg); }

/* ---------- Простая выпадашка «О нас» ---------- */
.nav__item--has-drop { position: relative; }

/* Пункт-кнопка: выглядит как остальные пункты меню, но никуда не ведёт —
   раскрывает список. Сбрасываем всё, что браузер рисует у <button>.
   Цвета берём те же, что у ссылок шапки (.hdr .nav a ниже по файлу):
   шапка тёмно-синяя, и цвет по умолчанию слился бы с фоном. */
.nav__drop-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    letter-spacing: inherit;
    color: var(--muted-2);
    white-space: nowrap;
    cursor: pointer;
}
.dropmenu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 60;
    min-width: 244px;
    padding: 6px;
    background: var(--hdr-solid);
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: 0 16px 36px rgba(0, 0, 0, .18);
    display: flex;
    flex-direction: column;
}
/* Атрибут hidden браузер применяет через display:none, а объявление выше
   его перебивает — без этой строки панель видна всегда */
.dropmenu[hidden] { display: none; }
.dropmenu__link {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    /* Основной цвет текста, а не приглушённый: в шапке пункты набраны
       капслоком и мелко, а тут обычный список — блёклый серый читался плохо */
    color: var(--text);
    white-space: nowrap;
}
.dropmenu__link:hover { background: var(--panel-2); color: var(--accent-text); opacity: 1; }
.dropmenu__ext { margin-left: auto; font-size: 12px; color: var(--muted); }

.megamenu {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    z-index: 60;
    padding: 12px var(--gut) 0;
    display: flex;
    justify-content: center;
}
.megamenu[hidden] { display: none; }

.megamenu__panel {
    width: min(1060px, 100%);
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 18px;
    box-shadow: 0 18px 48px rgba(12, 29, 45, .22);
    padding: 26px 28px 28px;
}
/* На тёмных полосах шапка прозрачная — панель всегда светлая и читаемая */
html[data-theme="dark"] .megamenu__panel { background: #0e2634; }

.megamenu__title {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 19px;
    color: var(--text);
    margin-bottom: 20px;
}

.megamenu__cols {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 12px 40px;
    align-items: start;
}
.megamenu__col { display: flex; flex-direction: column; gap: 18px; min-width: 0; }

/* Тонкая линия между «Приём заявок» и «Завершёнными» в правой колонке */
.megamenu__group + .megamenu__group {
    border-top: 1px solid var(--line);
    padding-top: 16px;
}

.megamenu__group-title {
    font-size: 9.5px;
    letter-spacing: .18em;
    text-transform: uppercase;
    font-weight: 800;
    color: var(--dim);
    margin-bottom: 8px;
}

.megamenu__item {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 7px 10px;
    border-radius: 10px;
    color: var(--text);
    min-width: 0;
}
.megamenu__item:hover { background: var(--panel-2); opacity: 1; }
.megamenu__item-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.megamenu__item-name {
    font-size: 12.5px;
    font-weight: 700;
    /* Названия турниров длинные — обрезаем, панель не должна разъезжаться */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.megamenu__item-status {
    font-size: 9px;
    letter-spacing: .14em;
    text-transform: uppercase;
    font-weight: 800;
    color: var(--dim);
}

.megamenu__archive {
    font-size: 11.5px;
    font-weight: 700;
    color: var(--accent-text);
    padding: 0 10px;
}
/* На десктопе пункт «Турниры» сам ведёт на /tournaments — ссылка тут лишняя.
   Нужна только в мобильном аккордеоне, где клик по пункту раскрывает список
   вместо перехода (см. media-запрос ниже, где её обратно показываем). */
/* a.megamenu__archive--mobile-only — специфичность (класс+тег) равна
   правилу .nav a, а идёт в файле позже — при равной специфичности
   побеждает более позднее правило */
a.megamenu__archive--mobile-only { display: none; }

.megamenu__cta {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--brand-yellow);
    color: #0c1d2d;
    border-radius: 14px;
    padding: 16px 18px;
}
.megamenu__cta:hover { opacity: .9; }
.megamenu__cta-icon { flex: none; display: flex; }
.megamenu__cta-copy { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.megamenu__cta-copy strong { font-size: 13.5px; font-weight: 800; }
.megamenu__cta-copy small { font-size: 11.5px; opacity: .75; }
.megamenu__cta-arrow { margin-left: auto; font-size: 17px; font-weight: 700; }

/* На узких экранах панель переезжает внутрь пункта меню (см. site.js) и
   работает как обычный раскрывающийся список: поверх выпадающего меню
   вторая плавающая панель была нечитаема и мешала попасть по пункту. */
@media (max-width: 1120px) {
    .nav__item--has-menu { flex-direction: column; align-items: stretch; }
    .nav__item--has-menu > a { justify-content: space-between; }

    /* «О нас» на узком экране — не плавающая панель, а вложенный список:
       поверх выпадающего меню вторая панель нечитаема */
    .nav__item--has-drop { flex-direction: column; align-items: stretch; }
    .nav__item--has-drop > a { justify-content: space-between; }
    .dropmenu {
        position: static;
        min-width: 0;
        padding: 0 0 8px 12px;
        background: transparent;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }
    .dropmenu__link { white-space: normal; padding: 8px 10px; }

    .megamenu {
        position: static;
        padding: 0 0 10px;
        display: block;
    }
    .megamenu__panel {
        width: 100%;
        border: 0;
        border-radius: 12px;
        box-shadow: none;
        background: var(--panel-2);
        padding: 14px 14px 16px;
    }
    .megamenu__title { display: none; }
    .megamenu__cols { grid-template-columns: minmax(0, 1fr); gap: 16px; }
    .megamenu__item { padding: 9px 8px; }
    .megamenu__item-name { white-space: normal; }
    .megamenu__archive { padding: 0 8px; }
    a.megamenu__archive--mobile-only { display: flex; }
    .megamenu__cta { padding: 13px 14px; }
}

/* Панель мега-меню считает координаты от шапки, а не от блока меню */
.hdr__inner { position: relative; }
.megamenu { left: 0; right: 0; padding-left: 0; padding-right: 0; }


/* ---------- Лента с горизонтальной прокруткой (турниры, партнёры, трансляции) ---------- */
.rail {
    display: grid;
    grid-auto-flow: column;
    /* 4 карточки в видимой части, как в макете; дальше — прокрутка */
    grid-auto-columns: calc((100% - 3 * 16px) / 4);
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    /* Плавность задаёт JS через scrollTo: CSS scroll-behavior вместе со
       scroll-snap отменяет программную прокрутку в Chromium */
    /* тень карточек не должна обрезаться краем прокрутки */
    padding: 4px 4px 14px;
    margin: -4px -4px -14px;
    scrollbar-width: none;
}
.rail::-webkit-scrollbar { display: none; }
.rail__item { scroll-snap-align: start; }

.rail-nav { display: flex; gap: 8px; flex: none; }
.rail-nav[hidden] { display: none; }
.rail-nav__btn {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid var(--line-2);
    background: var(--panel);
    color: var(--text);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: border-color .15s ease, color .15s ease, opacity .15s ease;
}
.rail-nav__btn:hover:not(:disabled) { border-color: var(--text); }
.rail-nav__btn:disabled { opacity: .35; cursor: default; }

@media (max-width: 1100px) { .rail { grid-auto-columns: calc((100% - 2 * 16px) / 3); } }
@media (max-width: 860px)  { .rail { grid-auto-columns: calc((100% - 16px) / 2); } }
@media (max-width: 620px)  { .rail { grid-auto-columns: 82%; } }


/* ---------- Бейджи ---------- */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border-radius: 999px;
    padding: 4px 10px;
    font-size: 9.5px;
    letter-spacing: .12em;
    text-transform: uppercase;
    font-weight: 800;
    white-space: nowrap;
}
.badge--soon { background: var(--panel-2); color: var(--dim); border: 1px solid var(--line); }
.badge--live { background: var(--live); color: #fff; }
.badge--accent { background: var(--brand-yellow); color: #0c1d2d; }

/* Тёмная кнопка из макета (карточка турнира) */
.btn--dark { background: var(--brand-navy); color: #fff; }
.btn--dark:hover { opacity: .85; }
.btn--dark.is-disabled {
    background: var(--panel-2);
    color: var(--dim);
    border-color: var(--line);
    cursor: default;
    pointer-events: none;
}


/* ---------- Правый блок заголовка секции: кнопка + стрелки ленты ---------- */
.sec-head__actions { display: flex; align-items: center; gap: 12px; flex: none; }

/* Партнёры лентой: белые карточки одинаковой высоты */
.rail--partners { grid-auto-columns: calc((100% - 4 * 16px) / 5); }
.rail--partners .partner {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 118px;
    padding: 18px 22px;
    background: #fff;
}
.rail--partners .partner img { max-height: 56px; width: auto; object-fit: contain; }
.partner__name { font-weight: 800; font-size: 13px; color: #0c1d2d; text-align: center; }

@media (max-width: 1100px) { .rail--partners { grid-auto-columns: calc((100% - 3 * 16px) / 4); } }
@media (max-width: 860px)  { .rail--partners { grid-auto-columns: calc((100% - 2 * 16px) / 3); } }
@media (max-width: 620px)  { .rail--partners { grid-auto-columns: 54%; } }

/* Карточка трансляции: строка статуса и стрелка перехода */
.stream { position: relative; }
.stream__meta { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.stream__venue {
    font-size: 9.5px;
    letter-spacing: .14em;
    font-weight: 800;
    color: var(--dim);
}
.stream__go {
    position: absolute;
    right: 16px;
    bottom: 16px;
    font-size: 16px;
    font-weight: 700;
    color: var(--muted);
}


/* ---------- Флаг страны в рейтинге SOCCA ---------- */
.rank__country { display: flex; align-items: center; gap: 9px; min-width: 0; }
.rank__flag { font-size: 15px; line-height: 1; flex: none; }



/* ---------- Новости: обложки, теги, бейдж главной новости ---------- */
.news__cover { display: block; position: relative; overflow: hidden; background: var(--panel-2); }
.news__cover img { width: 100%; height: 100%; object-fit: cover; }
/* Обложка по умолчанию — фирменный кадр лиги. Кадр широкий (3.4:1), карточки
   ближе к 2:1, поэтому object-fit из .news__cover img обрезает его по центру:
   мяч остаётся, лишнее небо и трава уходят. */
.news__cover-default { object-position: center; }
/* Крупная карточка: фото сверху, текст под ним */
.news--feature { position: relative; }
.news--feature .news__cover { height: 250px; }
.news--feature .news__inner { display: flex; flex-direction: column; }
.news__badge {
    position: absolute;
    top: 14px;
    left: 14px;
    background: var(--brand-yellow);
    color: #0c1d2d;
    border-radius: 999px;
    padding: 6px 13px;
    font-size: 9.5px;
    letter-spacing: .12em;
    text-transform: uppercase;
    font-weight: 800;
}

/* Карточка ленты: фото слева, текст справа */
.news--row {
    display: grid;
    grid-template-columns: minmax(0, 150px) minmax(0, 1fr);
    padding: 0;
    overflow: hidden;
    gap: 0;
}
.news--row .news__cover { height: 100%; min-height: 128px; }
.news__body {
    display: flex;
    flex-direction: column;
    padding: 18px 20px;
    min-width: 0;
}
.news--row .news__title {
    font-size: 15px;
    /* Заголовки протоколов КДК длинные — не даём карточке разъезжаться */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.news--row .news__text {
    font-size: 12px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.news__tag { margin-top: auto; padding-top: 12px; }

@media (max-width: 900px) {
    .news--row { grid-template-columns: minmax(0, 110px) minmax(0, 1fr); }
}


/* ============================================================
   Страница матча (макет: тёмный герой → вкладки → ход матча)
   ============================================================ */

/* Только вертикальные отступы: горизонтальные задаёт .shell */
.match-hero__inner { padding-block: 14px 0; }
.back-link--light { color: rgba(255, 255, 255, .68); font-size: 12px; font-weight: 700; }
.back-link--light:hover { color: #fff; opacity: 1; }

/* Крошки: назад в календарь и турнир этого матча */
.match-hero__crumbs {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding-bottom: 14px;
    font-size: 11.5px;
    font-weight: 600;
    color: rgba(255, 255, 255, .52);
}
.match-hero__crumbs a { color: rgba(255, 255, 255, .68); }
.match-hero__crumbs a:hover { color: #fff; opacity: 1; }
.match-hero__crumbs-sep { opacity: .4; }

.match-hero__status {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 16px;
}
.match-hero__round { font-size: 12.5px; font-weight: 600; color: rgba(255, 255, 255, .6); }
.badge--glass { background: rgba(255, 255, 255, .1); color: rgba(255, 255, 255, .82); }

.match-hero__body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 20px 24px;
}

.match-hero__side {
    display: flex;
    align-items: center;
    gap: 14px;
    justify-content: flex-start;
    color: #fff;
    min-width: 0;
}
/* row-reverse переворачивает и ось: flex-start прижимает гостей к правому краю */
.match-hero__side--away { flex-direction: row-reverse; justify-content: flex-start; }
.match-hero__side:hover { opacity: .85; }
.match-hero__side.is-lost .match-hero__name { color: rgba(255, 255, 255, .62); }
.match-hero__side.is-lost .match-hero__crest { opacity: .84; }

/* Белая плашка под эмблемой — как в макете */
.match-hero__crest {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 12px;
    background: #fff;
    padding: 7px;
    flex: none;
}
.match-hero__team { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.match-hero__side--away .match-hero__team { align-items: flex-end; text-align: right; }
.match-hero__name {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(16px, 1.75vw, 23px);
    line-height: 1.1;
    text-transform: uppercase;
}
.match-hero__caption {
    font-size: 9px;
    letter-spacing: .17em;
    text-transform: uppercase;
    font-weight: 800;
    color: rgba(255, 255, 255, .4);
}
/* Победитель помечен жёлтым: исход читается не только по цвету цифр */
.match-hero__win {
    align-self: flex-start;
    background: var(--brand-yellow);
    color: var(--brand-navy-deep);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .13em;
    text-transform: uppercase;
    padding: 2px 7px;
    border-radius: 5px;
}
.match-hero__side--away .match-hero__win { align-self: flex-end; }

.match-hero__center { text-align: center; color: #fff; }
.match-hero__score {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-family: var(--font-display);
    font-weight: 600;
    font-style: normal;
    font-size: clamp(34px, 3.9vw, 54px);
    line-height: .96;
    letter-spacing: .01em;
    font-variant-numeric: tabular-nums;
}
.match-hero__score .is-dim { color: rgba(255, 255, 255, .5); }
.match-hero__colon { color: rgba(255, 255, 255, .3); font-size: .5em; transform: translateY(-.06em); }
.match-hero__score--time { display: block; font-size: clamp(28px, 3.2vw, 42px); }
.match-hero__note {
    margin-top: 6px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .5);
}
.match-hero__note--acc { color: var(--brand-yellow); }

/* Полоса фактов: место и судьи названы один раз, здесь */
.match-hero__facts {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 24px;
    margin-top: 18px;
    padding: 12px 0;
    border-top: 1px solid rgba(255, 255, 255, .13);
}
.match-hero__facts-end { margin-left: auto; }
.match-fact {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    font-size: 12.5px;
    color: rgba(255, 255, 255, .72);
}
.match-fact svg { width: 14px; height: 14px; flex: none; opacity: .62; }
.match-fact b { font-weight: 600; color: #fff; }
.match-fact a { border-bottom: 1px solid rgba(255, 255, 255, .22); }
.match-fact a:hover { color: #fff; opacity: 1; border-bottom-color: var(--brand-yellow); }

@media (max-width: 760px) {
    .match-hero__body { gap: 12px 10px; align-items: start; }
    .match-hero__side,
    .match-hero__side--away { flex-direction: column; gap: 8px; text-align: center; }
    .match-hero__team,
    .match-hero__side--away .match-hero__team { align-items: center; text-align: center; }
    .match-hero__win,
    .match-hero__side--away .match-hero__win { align-self: center; }
    .match-hero__crest { width: 56px; height: 56px; border-radius: 11px; padding: 5px; }
    .match-hero__name { font-size: 14px; }
    .match-hero__score { padding-top: 8px; }
    .match-hero__facts { flex-direction: column; align-items: stretch; gap: 10px; }
    .match-hero__facts-end { margin-left: 0; }
    .match-hero__facts-end .btn { width: 100%; justify-content: center; }
}

/* ---------- Полоса вкладок ---------- */
.tabs-band { border-bottom: 1px solid var(--line); }
.tabs {
    display: flex;
    gap: 26px;
    overflow-x: auto;
    scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tabs__item {
    position: relative;
    padding: 16px 0;
    font-size: 11px;
    letter-spacing: .1em;
    text-transform: uppercase;
    font-weight: 800;
    color: var(--muted);
    white-space: nowrap;
}
.tabs__item:hover { color: var(--text); opacity: 1; }
.tabs__item.is-active { color: var(--text); }
.tabs__item.is-active::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 3px;
    background: var(--brand-yellow);
}

/* ---------- Обзор матча: две колонки ---------- */
/* Ход матча слева, трансляция справа. Ролика нет — ход матча на всю ширину */
.match-cols {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 540px;
    gap: 20px;
    align-items: start;
}
@media (max-width: 1100px) { .match-cols { grid-template-columns: minmax(0, 1fr); } }

.panel-title {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 13px;
    letter-spacing: .1em;
    text-transform: uppercase;
    margin-bottom: 18px;
}

/* ---------- Ход матча ---------- */
/* Центральная ось: хозяева слева, гости справа, минута между ними.
   Плашка минуты залита цветом карточки и перекрывает линию оси. */
.flow { position: relative; }
.flow::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 2px;
    margin-left: -1px;
    border-radius: 2px;
    background: var(--line-2);
}

.flow__row {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 56px minmax(0, 1fr);
    align-items: center;
    min-height: 44px;
}
.flow__row.is-home .flow__side { grid-column: 1; text-align: right; }
.flow__row.is-away .flow__side { grid-column: 3; text-align: left; }
.flow__minute { grid-column: 2; }

.flow__side { min-width: 0; padding-block: 5px; }
.flow__player {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    font-size: 14px;
    font-weight: 600;
}
.flow__row.is-home .flow__player { justify-content: flex-end; }
.flow__row.is-away .flow__player { flex-direction: row-reverse; justify-content: flex-end; }
.flow__player a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Подпись стоит только у карточек: у гола иконка уже всё сказала */
.flow__label { font-size: 11px; font-weight: 600; color: var(--muted); margin-top: 1px; }

.flow__minute {
    position: relative;
    z-index: 1;
    justify-self: center;
    min-width: 40px;
    padding: 4px 0;
    border-radius: 6px;
    background: var(--panel);
    color: var(--muted-2);
    text-align: center;
    font-family: var(--font-display);
    font-size: 12.5px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.flow__minute.is-goal { background: var(--brand-navy); color: #fff; }

/* ---------- Компактная таблица в колонке ---------- */
.table--compact th, .table--compact td { padding-left: 6px; padding-right: 6px; font-size: 11.5px; }
.table--compact .table__goals { display: none; }
.table tr.is-match td { background: rgba(242, 228, 0, .1); }

/* ---------- Видео матча ---------- */
.video-frame {
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--brand-navy);
}
.video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* Ход матча ещё не заполнен — таблица занимает всю ширину */
.match-cols--single { grid-template-columns: minmax(0, 1fr); }


/* ============================================================
   Страница турнира (макет: тёмная шапка → плитки → вкладки)
   ============================================================ */

.tournament-hero__inner { padding-block: 26px 32px; }

.tournament-hero__head {
    display: flex;
    align-items: center;
    gap: 22px;
    margin: 22px 0 26px;
    flex-wrap: wrap;
}
.tournament-hero__crest {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 96px;
    height: 96px;
    border-radius: 16px;
    background: var(--brand-yellow);
    flex: none;
}
.tournament-hero__body { min-width: 0; flex: 1 1 320px; color: #fff; }
.tournament-hero__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.chip {
    border: 1px dashed rgba(255, 255, 255, .3);
    border-radius: 8px;
    padding: 5px 11px;
    font-size: 10px;
    letter-spacing: .12em;
    text-transform: uppercase;
    font-weight: 800;
    color: rgba(255, 255, 255, .78);
}
/* Плашка турнира на странице команды: сплошная и жёлтая, чтобы отличалась
   от пунктирных справочных и читалась как «данные в рамках этого турнира» */
.chip--accent {
    border-style: solid;
    border-color: var(--brand-yellow);
    background: var(--brand-yellow);
    color: #003854;
}
.tournament-hero__sub {
    margin-top: 12px;
    font-size: 12px;
    color: rgba(255, 255, 255, .55);
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
}
.tournament-hero__extra strong { color: #fff; }

/* Плитки статистики */
.tiles {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}
.tile {
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 14px;
    padding: 18px 20px;
    color: #fff;
    text-align: center;
}
.tile__value {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(22px, 2.6vw, 30px);
    line-height: 1;
}
.tile__label {
    margin-top: 8px;
    font-size: 9.5px;
    letter-spacing: .14em;
    font-weight: 800;
    color: rgba(255, 255, 255, .5);
}
.tile--yellow .tile__value { color: var(--brand-yellow); }
.tile--red .tile__value { color: #ff6b63; }

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

/* ---------- Раскладка вкладок турнира ---------- */
.tournament-panel + .tournament-panel { margin-top: 16px; }

.tournament-cols {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 300px);
    gap: 16px;
    align-items: start;
}
.tournament-cols__main { min-width: 0; }
@media (max-width: 980px) { .tournament-cols { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Списки лидеров ---------- */
.leaders__row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 0;
    border-bottom: 1px solid var(--line);
}
.leaders__row:last-child { border-bottom: 0; }
.leaders__pos {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 800;
    flex: none;
    background: var(--panel-2);
    color: var(--muted);
}
/* Призовая тройка — золото, серебро, бронза, как в макете */
.leaders__pos--1 { background: var(--brand-yellow); color: #0c1d2d; }
.leaders__pos--2 { background: var(--line-2); color: var(--text); }
.leaders__pos--3 { background: var(--bronze); color: #fff; }

.leaders__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.leaders__name { font-size: 13px; font-weight: 700; }
.leaders__team { font-size: 10.5px; color: var(--muted); }
.leaders__count {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 15px;
    flex: none;
}

/* ---------- Сайдбар «Другие лиги» ---------- */
.tournament-aside { position: sticky; top: 96px; }
.aside-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 8px;
    border-radius: 10px;
    color: var(--text);
    min-width: 0;
}
.aside-item:hover { background: var(--panel-2); opacity: 1; }
.aside-item__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.aside-item__name {
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.aside-item__status {
    font-size: 9px;
    letter-spacing: .12em;
    text-transform: uppercase;
    font-weight: 800;
    color: var(--dim);
}
.aside-item__go { color: var(--muted); flex: none; }

/* ---------- Сетка плей-офф ---------- */
.bracket {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(260px, 1fr);
    gap: 16px;
    overflow-x: auto;
    padding-bottom: 10px;
}
.bracket__col { min-width: 0; }

/* ---------- Строка фильтров над списком ---------- */
.filter-bar {
    display: flex;
    align-items: flex-end;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 22px;
}
.filter-bar .field { min-width: 170px; }
.filter-bar__reset { font-size: 11.5px; font-weight: 700; padding-bottom: 12px; }

/* Строка с одним поиском (раздел «Команды»): не на всю ширину экрана,
   но поля хватает на самое длинное название команды.
   Отступ снизу не нужен — форма замыкает свою секцию, а до карточек
   расстояние задаёт padding следующей секции */
.filter-bar--search { max-width: 520px; margin-bottom: 0; }
.filter-bar--search .field { flex: 1 1 240px; }


/* ============================================================
   Табло матчей на главной: вкладки дней + лента карточек
   ============================================================ */

.board__tabs {
    display: flex;
    gap: 22px;
    margin-bottom: 18px;
    overflow-x: auto;
    scrollbar-width: none;
}
.board__tabs::-webkit-scrollbar { display: none; }

.board__tab {
    position: relative;
    background: none;
    border: 0;
    padding: 6px 0 10px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 700;
    color: var(--muted);
    white-space: nowrap;
}
.board__tab:hover { color: var(--text); }
.board__tab.is-active { color: var(--text); }
.board__tab.is-active::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    border-radius: 2px;
    background: var(--brand-yellow);
}

.board__panel[hidden] { display: none; }
.board__more { display: flex; justify-content: center; margin-top: 18px; }

/* Стрелки лежат по краям ленты, как в макете */
.board__rail-wrap { position: relative; }
.board__rail { grid-auto-columns: calc((100% - 3 * 16px) / 4); }

.board__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    box-shadow: 0 4px 14px rgba(12, 29, 45, .14);
}
.board__arrow--prev { left: -14px; }
.board__arrow--next { right: -14px; }
.board__arrow[hidden] { display: none; }

@media (max-width: 1100px) { .board__rail { grid-auto-columns: calc((100% - 2 * 16px) / 3); } }
@media (max-width: 860px)  { .board__rail { grid-auto-columns: calc((100% - 16px) / 2); } }
@media (max-width: 620px)  {
    .board__rail { grid-auto-columns: 84%; }
    .board__arrow { display: none; }
}

/* ---------- Карточка матча в табло ---------- */
.board-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 16px 18px;
    color: var(--text);
    min-width: 0;
}
.board-card:hover { opacity: 1; border-color: var(--line-2); box-shadow: var(--shadow-hover); }

.board-card__head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 13px;
    border-bottom: 1px solid var(--line);
    min-width: 0;
}
.board-card__meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.board-card__round { font-size: 13px; font-weight: 800; }
.board-card__league {
    font-size: 11px;
    color: var(--muted);
    /* Названия турниров длинные («Зимнее Первенство AFL 2026 - 2 | Высшая лига»):
       переносим на вторую строку, а не режем многоточием посреди слова */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.3;
}

.board-card__status {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    font-size: 11px;
    color: var(--muted);
    flex: none;
    text-align: right;
}
.board-card__date { font-size: 11px; }
.board-card__time { font-size: 11px; font-weight: 700; color: var(--text); }
.board-card__live {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--live);
    font-weight: 800;
    font-size: 10px;
    letter-spacing: .1em;
}

.board-card__teams { display: flex; flex-direction: column; gap: 10px; padding-top: 13px; }
.board-card__team { display: flex; align-items: center; gap: 10px; min-width: 0; }
.board-card__name {
    font-size: 14px;
    font-weight: 700;
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.board-card__score {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 17px;
    flex: none;
}



/* ============================================================
   Новости: хлебные крошки, крупная карточка, страница материала
   ============================================================ */

.crumbs {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 11.5px;
    color: var(--muted);
    margin-bottom: 20px;
}
.crumbs__item { color: var(--muted); }
.crumbs__item:hover { color: var(--text); opacity: 1; }
.crumbs__item--current { color: var(--text); font-weight: 700; }
.crumbs__sep { color: var(--dim); }

/* Обложка в карточке ленты */
.ncard .news__cover { height: 190px; flex: none; }
.ncard__tag {
    font-size: 9.5px;
    letter-spacing: .14em;
    font-weight: 800;
    color: var(--dim);
    margin-top: auto;
    padding-top: 4px;
}
.ncard__title {
    /* Заголовки протоколов КДК длинные — держим карточки одной высоты */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.ncard__text {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Крупная карточка первой новости */
.nlead {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    overflow: hidden;
    color: var(--text);
    margin-bottom: 16px;
}
.nlead:hover { opacity: 1; border-color: var(--accent-text); }
.nlead__cover { display: block; min-height: 280px; }
.nlead__cover .news__cover { height: 100%; }
.nlead__body {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 32px 34px;
    justify-content: center;
}
.nlead__meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.nlead__title {
    font-family: var(--font-display);
    font-weight: 800;
    font-style: normal;
    text-transform: uppercase;
    font-size: clamp(20px, 2.2vw, 28px);
    line-height: 1.15;
}
.nlead__text { font-size: 14px; color: var(--muted-2); line-height: 1.65; }
.nlead__more {
    font-size: 11px;
    letter-spacing: .12em;
    font-weight: 800;
    text-transform: uppercase;
    color: var(--accent-text);
}

@media (max-width: 860px) {
    .nlead { grid-template-columns: minmax(0, 1fr); }
    .nlead__cover { min-height: 200px; }
    .nlead__body { padding: 24px; }
}

.news-list { margin-top: 16px; }

/* ---------- Страница новости ---------- */
.article { max-width: 900px; }
.article__cover {
    margin: 0 0 24px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--line);
}
.article__cover .news__cover { height: clamp(220px, 34vw, 420px); }

.article__meta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.article__date { font-size: 11.5px; color: var(--muted); font-weight: 700; }
.article__title { margin-bottom: 22px; }

/* Цитаты в тексте — тёмная врезка из макета */
.article__body blockquote {
    background: var(--brand-teal);
    color: #fff;
    border-left: 0;
    border-radius: var(--radius-lg);
    padding: 22px 26px;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.5;
}
.article__body blockquote p:last-child { margin-bottom: 0; }

.article__author {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 32px;
    padding-top: 22px;
    border-top: 1px solid var(--line);
}
.article__author-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--brand-teal);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 17px;
    flex: none;
}
.article__author-body { display: flex; flex-direction: column; gap: 2px; }
.article__author-name { font-size: 13.5px; font-weight: 800; }
.article__author-role { font-size: 11px; color: var(--muted); }


/* ---------- Таблица документов ---------- */
.doc-table { overflow: hidden; }
.doc-table .table td { vertical-align: middle; }

.doc-row { display: flex; align-items: center; gap: 12px; min-width: 0; }
.doc-row__icon {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: var(--panel-2);
    color: var(--accent-text);
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
}
.doc-row__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.doc-row__name { font-size: 13px; font-weight: 700; color: var(--text); }
.doc-row__desc { font-size: 11.5px; color: var(--muted); }
.doc-row__date { font-size: 12px; color: var(--muted); white-space: nowrap; }
.doc-row__link {
    display: inline-flex;
    align-items: baseline;
    gap: 7px;
    font-size: 12px;
    font-weight: 800;
    color: var(--accent-text);
    white-space: nowrap;
}
.doc-row__size { font-size: 11px; font-weight: 600; color: var(--muted); }

.badge--current {
    background: rgba(47, 180, 87, .14);
    color: #1f7a3c;
    border: 1px solid rgba(47, 180, 87, .3);
}
html[data-theme="dark"] .badge--current { color: #6ee08f; }


/* ---------- Тёмная шапка команды ---------- */
.team-hero__inner { padding-block: 26px 32px; }
.team-hero__head {
    display: flex;
    align-items: center;
    gap: 22px;
    margin: 22px 0 26px;
    flex-wrap: wrap;
}
.team-hero__crest {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 96px;
    height: 96px;
    border-radius: 16px;
    background: #fff;
    flex: none;
}
.team-hero__body { min-width: 0; flex: 1 1 320px; color: #fff; }
.team-hero__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.team-hero__text {
    margin: 12px 0 0;
    font-size: 13px;
    line-height: 1.6;
    color: rgba(255, 255, 255, .6);
    max-width: 620px;
}
.team-hero__social { flex: none; }

.team-standings { margin-bottom: 16px; }
.team-more { margin-top: 18px; }


/* ============================================================
   «Как попасть в лигу»: шаги и форма заявки
   ============================================================ */

.steps-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}
@media (max-width: 1000px) { .steps-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .steps-grid { grid-template-columns: minmax(0, 1fr); } }

.stepcard { padding: 22px 24px; display: flex; flex-direction: column; gap: 10px; }
.stepcard__num {
    font-size: 9.5px;
    letter-spacing: .16em;
    text-transform: uppercase;
    font-weight: 800;
    color: var(--dim);
}
.stepcard__title { font-family: var(--font-display); font-weight: 800; font-size: 16px; }
.stepcard__text { font-size: 13px; color: var(--muted-2); line-height: 1.6; margin: 0; }

.open-reg__list { display: flex; flex-wrap: wrap; gap: 10px; }

/* ---------- Форма заявки ---------- */
.apply {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: 28px;
    align-items: start;
}
@media (max-width: 900px) { .apply { grid-template-columns: minmax(0, 1fr); } }

.apply__contacts { margin-top: 26px; display: flex; flex-direction: column; gap: 6px; }
.apply__contacts a { font-size: 14px; font-weight: 700; }

.apply__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}
@media (max-width: 620px) { .apply__grid { grid-template-columns: minmax(0, 1fr); } }
.apply__field--wide { grid-column: 1 / -1; }

.apply__submit { margin-top: 22px; }

.field__req { color: var(--live); margin-left: 2px; }
.field__error { font-size: 11.5px; color: var(--live); }
.field__input.is-invalid { border-color: var(--live); }
.field textarea.field__input { resize: vertical; min-height: 96px; font-family: inherit; }

/* ---------- Сообщение об успехе ---------- */
.notice {
    border-radius: var(--radius);
    padding: 14px 18px;
    font-size: 13.5px;
    font-weight: 700;
    margin-top: 20px;
}
.notice--ok {
    background: rgba(47, 180, 87, .12);
    border: 1px solid rgba(47, 180, 87, .35);
    color: #1f7a3c;
}
html[data-theme="dark"] .notice--ok { color: #6ee08f; }


/* ---------- Подвал: кнопки сторов (соцсети описаны выше) ---------- */
.footer__stores { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.footer__store {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 128px;
    padding: 7px 12px;
    border-radius: 10px;
    background: #fff;
    color: #0c1d2d;
}
.footer__store:hover { opacity: .86; }
.footer__store svg { width: 20px; height: 20px; flex: none; fill: #0c1d2d; }
.footer__store span { display: flex; flex-direction: column; line-height: 1.15; }
.footer__store small { font-size: 7px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.footer__store strong { font-size: 11.5px; font-weight: 800; white-space: nowrap; }
.footer__store[data-app-link="android"] svg { fill: none; }


/* Шапка карточки со списком: слева название, справа единица измерения */
.panel-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
}
.panel-head .panel-title { margin-bottom: 0; }
.panel-unit {
    font-size: 10px;
    letter-spacing: .12em;
    text-transform: uppercase;
    font-weight: 800;
    color: var(--dim);
}

/* Состав: номер, фото, имя, позиция справа */
.lineup__row { gap: 10px; }


/* ---------- Эмблема-заглушка на плашках героев ---------- */
.tournament-hero__crest .crest--fallback,
.team-hero__crest .crest--fallback,
.match-hero__crest .crest--fallback {
    background: transparent;
}


/* ---------- Партнёры в подвале ---------- */
.footer__partners { padding-top: 44px; }
.footer__partners-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
    margin: 16px 0 8px;
}
.footer__partner {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 84px;
    padding: 14px 18px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .08);
}
.footer__partner:hover { background: rgba(255, 255, 255, .09); opacity: 1; }
.footer__partner img { max-height: 44px; width: auto; object-fit: contain; }

/* ============================================================
   Редизайн 2026 — тёмная шапка, упрощённое меню турниров
   и новые блоки главной (баннеры, быстрые ссылки, таблицы лиг,
   протоколы, постер приложения).
   ============================================================ */

/* ---------- Шапка всегда тёмная, на фирменном #003854 ---------- */
.hdr {
    background: var(--brand-teal);
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    color: #fff;
}
.hdr .nav a { color: #C9D8E2; }
.hdr .nav a:hover { color: #fff; }
.hdr .nav a.is-active { color: #fff; }

/* «О нас» — кнопка, а не ссылка, поэтому под правила для «a» не попадает.
   Повторяем и цвета тёмной шапки, и типографику с отступами: иначе пункт
   выбивался из ряда — крупнее, светлее по весу, капслоком и выше по базовой линии */
.hdr .nav .nav__drop-btn {
    color: #C9D8E2;
    font-size: 14px;
    font-weight: 600;
    text-transform: none;
    padding: 5px 2px 9px;
}
.hdr .nav .nav__drop-btn:hover,
.hdr .nav .nav__item--has-drop.is-open .nav__drop-btn,
.hdr .nav .nav__drop-btn.is-active { color: #fff; }

/* Панель выпадашки светлая и лежит вне шапки визуально — возвращаем
   пунктам обычный тёмный текст. Специфичность выше, чем у «.hdr .nav a»,
   иначе они наследовали бы светлый цвет шапки и терялись на белом фоне */
.hdr .nav .dropmenu__link { color: var(--text); }
.hdr .nav .dropmenu__link:hover { color: var(--accent-text); }

/* На узком экране панель прозрачная и лежит прямо на тёмном фоне меню —
   тёмный текст правила выше там нечитаем. Блок идёт после него: при равной
   специфичности побеждает тот, что ниже по файлу */
@media (max-width: 1120px) {
    .hdr .nav .dropmenu__link { color: #C9D8E2; }
    .hdr .nav .dropmenu__link:hover { color: #fff; background: rgba(255, 255, 255, .07); }
}
.hdr .brand__name { color: #fff; }
.hdr .icon-btn { border-color: rgba(255, 255, 255, .25); color: #E4ECF1; }
.hdr .icon-btn:hover { border-color: var(--brand-yellow); color: var(--brand-yellow); }
.hdr .city-pill { border-color: rgba(255, 255, 255, .22); color: #C9D8E2; background: transparent; }
.hdr .city-pill--btn:hover { border-color: rgba(255, 255, 255, .45); color: #fff; }

/* ---------- Мегаменю: один список + кнопка архива ---------- */
.megamenu__panel--list { max-width: 400px; }
.megamenu__list { display: flex; flex-direction: column; }
.megamenu__item-logo { width: 26px; height: 26px; object-fit: contain; flex: none; }
.megamenu__archive-btn { display: flex; width: 100%; margin-top: 14px; }

/* ---------- Главные события: фото новостей на фирменном фоне ----------
   Согласованный редизайн: ровный фирменный фон #003854, по углам —
   полноцветные фрагменты мяча из эмблемы (соты жёлтый + бирюзовый).
   Заголовка у секции нет: блок открывает страницу и говорит сам за себя. */
.hero-news {
    position: relative; overflow: hidden;
    background: #003854; color: #fff; padding: 24px 0 32px;
}

/* Соты в правом верхнем углу; поверх — слабое жёлтое свечение, чтобы
   графика не выглядела наклейкой на ровном фоне */
.hero-news::before {
    content: ""; position: absolute; pointer-events: none;
    top: -170px; right: -140px; width: 600px; height: 600px;
    opacity: .55; transform: rotate(-14deg);
    background:
        radial-gradient(closest-side, rgba(242, 228, 0, .10), transparent 72%),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 560 560'%3E%3Cg stroke='%2302293A' stroke-width='14' stroke-linejoin='round'%3E%3Cpath d='M280 120 L420 200 L420 360 L280 440 L140 360 L140 200 Z' fill='%23F2E400'/%3E%3Cpath d='M280 120 L140 200 L60 120 L180 40 Z' fill='%233CD8DA'/%3E%3Cpath d='M280 120 L420 200 L500 120 L380 40 Z' fill='%233CD8DA'/%3E%3Cpath d='M140 360 L140 200 L20 240 L20 380 Z' fill='%23F2E400' fill-opacity='.85'/%3E%3Cpath d='M420 360 L420 200 L540 240 L540 380 Z' fill='%233CD8DA'/%3E%3Cpath d='M280 440 L140 360 L100 480 L240 540 Z' fill='%233CD8DA'/%3E%3Cpath d='M280 440 L420 360 L460 480 L320 540 Z' fill='%23F2E400' fill-opacity='.85'/%3E%3C/g%3E%3Cg fill='none' stroke='%233CD8DA' stroke-width='5' opacity='.5'%3E%3Cpath d='M60 470 L110 500 L110 555 L60 585 L10 555 L10 500 Z'/%3E%3C/g%3E%3Cg fill='none' stroke='%23F2E400' stroke-width='5' opacity='.55'%3E%3Cpath d='M505 425 L550 450 L550 502 L505 528 L460 502 L460 450 Z'/%3E%3C/g%3E%3C/svg%3E")
        center / contain no-repeat;
}

/* Фрагмент поменьше в левом нижнем углу — уравновешивает композицию */
.hero-news::after {
    content: ""; position: absolute; pointer-events: none;
    left: -110px; bottom: -190px; width: 380px; height: 380px;
    opacity: .42; transform: rotate(22deg);
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 560 560'%3E%3Cg stroke='%2302293A' stroke-width='14' stroke-linejoin='round'%3E%3Cpath d='M280 120 L420 200 L420 360 L280 440 L140 360 L140 200 Z' fill='%233CD8DA'/%3E%3Cpath d='M280 120 L140 200 L60 120 L180 40 Z' fill='%23F2E400'/%3E%3Cpath d='M280 120 L420 200 L500 120 L380 40 Z' fill='%23F2E400'/%3E%3Cpath d='M420 360 L420 200 L540 240 L540 380 Z' fill='%23F2E400'/%3E%3Cpath d='M280 440 L140 360 L100 480 L240 540 Z' fill='%23F2E400'/%3E%3C/g%3E%3C/svg%3E")
        center / contain no-repeat;
}

/* Карточки поверх графики */
.hero-news > .shell { position: relative; z-index: 2; }

/* Карточка всегда одного размера — четверть ряда. Меньше четырёх
   новостей — карточек просто меньше, раскладку не перестраиваем */
.hero-news__grid { display: grid; gap: 18px; grid-template-columns: repeat(4, minmax(0, 1fr)); }

.hero-card {
    position: relative; display: block; overflow: hidden;
    border-radius: 12px; background: #02293A; aspect-ratio: 4 / 3;
    box-shadow: 0 10px 28px -14px rgba(0, 10, 18, .55);
}
.hero-card:hover { opacity: 1; }
.hero-card__img {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; transition: transform .35s;
}
.hero-card:hover .hero-card__img { transform: scale(1.04); }
@media (prefers-reduced-motion: reduce) {
    .hero-card__img, .hero-card:hover .hero-card__img { transition: none; transform: none; }
}
/* Затемнение снизу, чтобы заголовок читался на любой фотографии */
.hero-card::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(0, 22, 34, 0) 34%, rgba(0, 22, 34, .88) 100%);
}
.hero-card__body {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
    padding: 15px 17px;
}
.hero-card__title {
    font-family: var(--font-display); font-weight: 600; text-transform: uppercase;
    font-size: 15.5px; line-height: 1.25; color: #fff;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

/* Узкий экран: те же равные карточки, но 2x2, чтобы заголовки читались */
@media (max-width: 860px) {
    .hero-news { padding: 18px 0 24px; }
    .hero-news__grid,
    .hero-news__grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .hero-news__grid--1 { grid-template-columns: minmax(0, 1fr); }
    .hero-news__grid--1 .hero-card { aspect-ratio: 16 / 9; }
    /* Нечётная третья карточка занимает весь ряд, а не половину */
    .hero-news__grid--3 .hero-card:last-child { grid-column: 1 / -1; aspect-ratio: 16 / 7; }
    .hero-card__body { padding: 11px 13px; }
    .hero-card__title { font-size: 13px; }
    .hero-news__grid--1 .hero-card__title { font-size: clamp(14px, 4vw, 17px); }
    /* Соты мельче и только в одном углу: на узком экране два фрагмента
       забивают фон */
    .hero-news::before { width: 340px; height: 340px; top: -90px; right: -90px; opacity: .45; }
    .hero-news::after { display: none; }
}

/* ---------- Республиканские турниры: узкая полоса под ссылками ----------
   Yeleu Cup и Кубок Чемпионов — центральные турниры страны, видны при
   любом выбранном городе. Тон глубже фирменного, чтобы полоса читалась
   отдельным уровнем между шапкой и городскими секциями. */
.nationals { background: #02293a; color: #fff; padding: 14px 0; }
.nationals__inner { display: flex; align-items: center; gap: 14px; }
.nationals__label { flex: none; margin-right: 6px; }
.nationals__eyebrow { color: var(--brand-yellow); }
.nationals__hint { font-size: 12px; color: #8FA9B8; margin-top: 3px; }
.nationals__card {
    flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px;
    padding: 10px 16px; border-radius: 12px; color: #fff;
    background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .13);
    transition: border-color .12s;
}
.nationals__card:hover { border-color: var(--brand-yellow); opacity: 1; }
.nationals__logo { width: 42px; height: 46px; object-fit: contain; flex: none; }
.nationals__text { min-width: 0; }
.nationals__name {
    display: block; font-family: var(--font-display); font-weight: 600;
    font-size: 15px; text-transform: uppercase; line-height: 1.2;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.nationals__sub {
    display: block; font-size: 12px; color: #9FB6C2; margin-top: 2px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.nationals__live {
    flex: none; font-size: 10.5px; font-weight: 700; letter-spacing: .08em;
    text-transform: uppercase; color: #003854; background: var(--brand-yellow);
    padding: 4px 9px; border-radius: 7px;
}
.nationals__arrow { flex: none; margin-left: auto; color: var(--brand-yellow); }

@media (max-width: 1020px) {
    .nationals__inner { flex-direction: column; align-items: stretch; gap: 10px; }
    .nationals__label { display: flex; align-items: baseline; gap: 10px; margin: 0; }
}

/* ---------- Быстрые ссылки под баннером ---------- */
.quick { padding: 18px 0; border-bottom: 1px solid var(--line); background: var(--bg); }
.quick__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.qcard {
    display: flex; align-items: center; gap: 14px;
    background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
    box-shadow: var(--card-shadow); padding: 15px 18px;
    transition: transform .12s ease, box-shadow .12s ease;
}
.qcard:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); opacity: 1; }
.qcard__ico {
    flex: none; width: 44px; height: 44px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(242, 228, 0, .2); color: var(--text);
}
.qcard__body { flex: 1; min-width: 0; }
.qcard__title {
    font-family: var(--font-display); font-weight: 600; font-size: 14.5px;
    text-transform: uppercase; letter-spacing: .03em; color: var(--text);
}
.qcard__sub { font-size: 12.5px; color: var(--muted); }
.qcard__arr { flex: none; color: var(--dim, var(--muted)); font-size: 17px; transition: transform .12s, color .12s; }
.qcard:hover .qcard__arr { color: var(--text); transform: translateX(3px); }

/* ---------- Сегментные вкладки (матчи, лиги) ---------- */
.seg { display: inline-flex; gap: 2px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px; padding: 3px; }
.seg__btn {
    border: 0; background: transparent; cursor: pointer;
    font-family: var(--font-text); font-size: 13px; font-weight: 600; color: var(--muted);
    padding: 8px 16px; border-radius: 7px; transition: background .12s, color .12s;
    white-space: nowrap;
}
.seg__btn.is-active { background: var(--brand-teal); color: #fff; }

/* ---------- Таблицы лиг на главной ---------- */
.league-card { background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 6px 20px 14px; }
.league-tbl { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
.league-tbl th {
    text-align: left; font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
    color: var(--muted); padding: 12px 10px 9px; border-bottom: 2px solid var(--line);
}
.league-tbl td { padding: 11px 10px; border-bottom: 1px solid var(--line); }
.league-tbl tr:last-child td { border-bottom: 0; }
/* Числовые колонки не переносим: счёт «35–11» на узком экране рвался
   пополам, когда длинное название команды съедало ширину. Переносится
   пусть название — оно для этого приспособлено, а счёт нет */
.league-tbl .r { text-align: right; white-space: nowrap; }
.league-tbl__pos { width: 34px; font-weight: 700; color: var(--muted); }
.league-tbl tr.is-top .league-tbl__pos { box-shadow: inset 3px 0 0 var(--brand-yellow); }
.league-tbl__team { display: flex; align-items: center; gap: 11px; font-weight: 600; min-width: 0; }
.league-tbl__team img { width: 30px; height: 30px; object-fit: contain; flex: none; }
.league-tbl__pts { font-family: var(--font-display); font-weight: 700; font-size: 15px; }
.league-foot { display: flex; align-items: center; gap: 18px; margin-top: 14px; font-size: 12.5px; color: var(--muted); flex-wrap: wrap; }
.league-foot__zone::before {
    content: ""; display: inline-block; width: 9px; height: 9px; border-radius: 50%;
    background: var(--brand-yellow); margin-right: 7px;
}
.league-foot .sec-link { margin-left: auto; }
.league-empty { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; padding: 48px 24px; }
.league-empty b { font-family: var(--font-display); font-weight: 600; font-size: 18px; text-transform: uppercase; }
.league-empty p { color: var(--muted); max-width: 46ch; font-size: 14px; margin: 0; }

/* ---------- Последние протоколы ---------- */
.protos { display: flex; flex-direction: column; gap: 10px; }
.proto {
    display: flex; align-items: center; gap: 18px;
    background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
    padding: 15px 20px; transition: transform .12s, box-shadow .12s;
}
.proto:hover { transform: translateY(-1px); box-shadow: var(--card-shadow); opacity: 1; }
.proto__num {
    flex: none; min-width: 62px; text-align: center;
    font-family: var(--font-display); font-weight: 700; font-size: 15px; color: var(--text);
    background: rgba(242, 228, 0, .25); border-radius: 8px; padding: 8px 10px;
}
.proto__body { flex: 1; min-width: 0; }
.proto__title { font-size: 14.5px; font-weight: 600; color: var(--text); }
.proto__sub { font-size: 12.5px; color: var(--muted); }
.proto__date { flex: none; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.proto__ext {
    flex: none; font-family: var(--font-display); font-weight: 600; font-size: 11px; letter-spacing: .08em;
    color: var(--text); border: 1.5px solid var(--line-2); border-radius: 7px; padding: 6px 13px;
}
.proto:hover .proto__ext { border-color: var(--text); }

/* ---------- Страница протоколов: поиск, годы, лента ---------- */
/* Подпись только для скринридера: у поля есть иконка и подсказка,
   но озвучить его как-то надо */
.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.proto-search { display: flex; gap: 10px; align-items: center; margin-bottom: 16px; flex-wrap: wrap; }
.proto-search__field {
    position: relative; flex: 1 1 320px; min-width: 0;
    display: flex; align-items: center;
}
.proto-search__ico { position: absolute; left: 15px; color: var(--muted); pointer-events: none; }
.proto-search__field input {
    width: 100%; padding: 13px 16px 13px 42px;
    background: var(--panel); color: var(--text);
    border: 1px solid var(--line); border-radius: var(--radius);
    font: inherit; font-size: 14px;
}
.proto-search__field input::placeholder { color: var(--muted); }
.proto-search__field input:focus { outline: none; border-color: var(--line-2); box-shadow: var(--card-shadow); }
/* Крестик очистки в Chrome на тёмной теме почти не виден — прячем,
   рядом есть кнопка «Сбросить» */
.proto-search__field input::-webkit-search-cancel-button { display: none; }

.proto-total { color: var(--muted); font-size: 13px; margin: 0 0 18px; }

.proto-jump { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px; }
.proto-jump__item {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 7px 14px; border-radius: 999px;
    border: 1px solid var(--line); background: var(--panel);
    font-family: var(--font-display); font-weight: 600; font-size: 13px; color: var(--text);
    font-variant-numeric: tabular-nums;
}
.proto-jump__item:hover { border-color: var(--line-2); opacity: 1; }
.proto-jump__count { font-size: 11px; color: var(--muted); font-weight: 500; }

.proto-year { margin-bottom: 34px; }
.proto-year__title {
    display: flex; align-items: baseline; gap: 10px;
    font-family: var(--font-display); font-size: 22px; margin: 0 0 14px;
    scroll-margin-top: 100px;
}
.proto-year__count { font-size: 12px; font-weight: 500; color: var(--muted); }

/* На странице протокола выдержка занимает всю строку и обрезается в одну */
.protos .proto__title {
    display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
}

/* ---------- Нижняя панель на телефонах ---------- */
/* На десктопе её нет: там всё меню в строке. Появляется только там, где
   до верха экрана большим пальцем не дотянуться. */
.tabbar { display: none; }

@media (max-width: 760px) {
    /* Меню выпадает не от верха экрана: над шапкой (77px) висит ещё
       верхняя полоса (на телефоне около 104px), а снизу — панель разделов.
       Общий max-height этого не учитывал, из-за чего меню оказывалось
       длиннее экрана и его низ было не достать даже прокруткой */
    .nav {
        max-height: calc(100dvh - 181px - 62px - env(safe-area-inset-bottom, 0px));
        padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    }

    .tabbar {
        position: fixed;
        left: 0; right: 0; bottom: 0;
        z-index: 60;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        background: var(--panel);
        border-top: 1px solid var(--line);
        /* Домашняя полоса iPhone перекрывает нижние 34px — отступаем на неё */
        padding-bottom: env(safe-area-inset-bottom, 0);
        box-shadow: 0 -6px 22px rgba(0, 0, 0, .10);
    }

    .tabbar__item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        padding: 9px 4px 8px;
        min-height: 56px;
        color: var(--muted);
        text-decoration: none;
    }
    .tabbar__item:hover { opacity: 1; }
    .tabbar__item.is-active { color: var(--text); }

    .tabbar__icon { display: flex; }
    .tabbar__icon svg { width: 22px; height: 22px; }

    /* Активный раздел отмечаем не только цветом: на жёлтом кружке значок
       виден и тем, кто цвета различает плохо */
    .tabbar__item.is-active .tabbar__icon {
        background: var(--brand-yellow);
        color: #0c1d2d;
        border-radius: 999px;
        padding: 3px 13px;
        margin-bottom: 1px;
    }

    .tabbar__label { font-size: 10.5px; line-height: 1.2; letter-spacing: .01em; }
    .tabbar__item.is-active .tabbar__label { font-weight: 600; }

    /* Панель перекрывает низ страницы — освобождаем под неё место,
       иначе она закрывает последнюю строку подвала */
    body { padding-bottom: calc(68px + env(safe-area-inset-bottom, 0px)); }
}
/* ---------- Судьи: список и профиль ---------- */
.ref-total { color: var(--muted); font-size: 13px; margin: 0 0 18px; }

.ref-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.ref {
    display: flex; align-items: center; gap: 14px;
    padding: 14px 18px; min-width: 0;
    transition: transform .12s ease, box-shadow .12s ease;
}
.ref:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); opacity: 1; }
/* Поля под фото у судьи нет — у всех общий значок пользователя */
.ref-ava {
    flex: none; display: flex; align-items: center; justify-content: center;
    border-radius: 50%; background: var(--brand-navy); color: #fff;
}
.ref-ava svg { width: 62%; height: 62%; display: block; }
.ref-ava--sm { width: 42px; height: 42px; }
.ref-ava--lg { width: 66px; height: 66px; }
.ref__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ref__name { font-weight: 600; font-size: 14.5px; color: var(--text); overflow-wrap: anywhere; }
.ref__cat { font-size: 12px; color: var(--muted); }
.ref__count { flex: none; display: flex; flex-direction: column; align-items: center; gap: 1px; }
.ref__count b {
    font-family: var(--font-display); font-size: 18px; color: var(--text);
    font-variant-numeric: tabular-nums; line-height: 1;
}
.ref__count span { font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.ref__count-empty { color: var(--line-2); font-size: 17px; }

.ref-head { display: flex; align-items: center; gap: 20px; padding: 22px 26px; margin-bottom: 14px; }
.ref-head__body { min-width: 0; }
.ref-head__name {
    font-family: var(--font-display); font-size: 27px; line-height: 1.15;
    margin: 4px 0 0; overflow-wrap: anywhere;
}
.ref-head__cat { color: var(--muted); font-size: 13.5px; margin: 7px 0 0; }

/* Показателей всего два, и растягивать их на всю полосу незачем:
   под одним числом карточка в пол-экрана выглядит пустой */
.ref-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 230px));
    gap: 12px;
    margin-bottom: 30px;
}
.ref-stat { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; }
.ref-stat__value {
    font-family: var(--font-display); font-size: 27px; line-height: 1; color: var(--text);
    font-variant-numeric: tabular-nums;
}
.ref-stat__label { font-size: 12px; color: var(--muted); line-height: 1.3; }

/* Плотный список матчей судьи: имена подтянуты к счёту, эмблемы по краям
   пары, дата и турнир — справа. Строка около 46px против 126px у общей
   карточки матча: у судьи их больше сотни. */
/* Список не тянем на всю полосу: строка короткая, и на широком экране
   между парой и датой оставалась пустая треть */
.rlist { padding: 4px 0; overflow: hidden; max-width: 790px; }
.rmatch {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 20px;
    padding: 9px 18px;
    border-bottom: 1px solid var(--line);
    color: var(--text);
}
.rmatch:last-child { border-bottom: 0; }
.rmatch:hover { background: var(--panel-2); opacity: 1; }

.rmatch__teams {
    display: grid;
    /* Колонки команд ограничены: на всю ширину они разъезжались,
       и между эмблемой и счётом зияла пустота */
    grid-template-columns: minmax(0, 170px) 54px minmax(0, 170px);
    align-items: center;
    gap: 10px;
    min-width: 0;
}
.rmatch__side { display: flex; align-items: center; gap: 9px; min-width: 0; }
/* Имена тянутся к счёту, а не к краям полосы — иначе в середине пустота */
.rmatch__side--home { justify-content: flex-end; }
.rmatch__side--away { justify-content: flex-start; }
.rmatch__name {
    font-size: 13.5px; font-weight: 600; color: var(--text);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rmatch__score {
    text-align: center; white-space: nowrap;
    font-family: var(--font-display); font-size: 15px; color: var(--text);
    font-variant-numeric: tabular-nums;
}
.rmatch__meta { font-size: 11.5px; color: var(--muted); white-space: nowrap; }

@media (max-width: 760px) {
    /* Дата с турниром уходят под пару: в строку они уже не помещаются */
    .rmatch { grid-template-columns: 1fr; gap: 6px; padding: 10px 14px; }
    .rmatch__meta { white-space: normal; }
    .rmatch__teams { grid-template-columns: minmax(0, 1fr) 46px minmax(0, 1fr); gap: 7px; }
    /* На телефоне даём имени перенестись: обрезанное название команды
       узнать труднее, чем смириться с разной высотой строк */
    .rmatch__name {
        font-size: 12.5px;
        white-space: normal;
        line-height: 1.25;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow-wrap: anywhere;
    }
    /* Эмблему ужимаем: на 375px каждый пиксель нужен названию команды */
    .rmatch .crest { width: 20px; height: 20px; }
    .rmatch__side { gap: 7px; }
}
/* Число матчей рядом с заголовком: сразу видно, сколько всего страниц */
.ref-count {
    font-family: var(--font-display); font-size: 15px; color: var(--muted);
    font-variant-numeric: tabular-nums;
}
.ref-back { margin-top: 20px; }

@media (max-width: 640px) {
    .ref-grid { grid-template-columns: 1fr; }
    .ref-head { flex-direction: column; align-items: flex-start; gap: 14px; padding: 20px 18px; }
    .ref-head__name { font-size: 22px; }
}
/* ---------- Регламент: оглавление сбоку и текст статьями ---------- */
.reg {
    display: grid;
    grid-template-columns: minmax(0, 260px) minmax(0, 700px);
    gap: 26px;
    align-items: start;
    max-width: 986px;
    margin: 0 auto;
}
/* Оглавление едет вместе со страницей: статей семнадцать, и без него
   из середины документа не выбраться */
.reg__aside { position: sticky; top: 92px; }
.reg__toc {
    background: var(--panel); border: 1px solid var(--line);
    border-radius: var(--radius); overflow: hidden;
}
.reg__toc-head {
    padding: 14px 18px; cursor: pointer; list-style: none;
    font-family: var(--font-display); font-weight: 600; font-size: 13px;
    letter-spacing: .06em; text-transform: uppercase; color: var(--text);
    border-bottom: 1px solid var(--line);
}
.reg__toc-head::-webkit-details-marker { display: none; }
.reg__toc-list { display: flex; flex-direction: column; max-height: calc(100vh - 190px); overflow-y: auto; }
.reg__toc-item {
    display: flex; gap: 10px; align-items: baseline;
    padding: 9px 18px; font-size: 13px; line-height: 1.35; color: var(--muted);
    border-bottom: 1px solid var(--line);
}
.reg__toc-item:last-child { border-bottom: 0; }
.reg__toc-item:hover { background: var(--panel-2); color: var(--text); opacity: 1; }
.reg__toc-num {
    flex: none; min-width: 20px; text-align: center;
    font-family: var(--font-display); font-weight: 700; font-size: 11.5px;
    color: var(--text); background: rgba(242, 228, 0, .25); border-radius: 5px; padding: 2px 5px;
}
.reg__toc-title { min-width: 0; }

.reg__body { min-width: 0; }
/* Общий потолок ширины из .paper здесь мешает: колонка уже задана сеткой */
.reg__paper { max-width: none; margin: 0; }
.reg__preamble { color: var(--muted); font-size: 14.5px; line-height: 1.65; margin: 0 0 24px; }

.reg__section-title, .reg__article-title {
    font-family: var(--font-display); font-size: 19px; line-height: 1.3;
    margin: 0 0 14px; scroll-margin-top: 100px;
}
.reg__article { padding-top: 26px; margin-top: 26px; border-top: 1px solid var(--line); scroll-margin-top: 100px; }
.reg__article-num {
    display: block; font-size: 11.5px; letter-spacing: .09em; text-transform: uppercase;
    color: var(--muted); margin-bottom: 5px; font-weight: 600;
}

.reg__p { margin: 0 0 13px; line-height: 1.7; font-size: 14.5px; }
.reg__p:last-child { margin-bottom: 0; }
.reg__p--numbered { display: flex; gap: 11px; align-items: baseline; }
.reg__marker {
    flex: none; min-width: 38px;
    font-family: var(--font-display); font-weight: 700; font-size: 12.5px;
    color: var(--text); font-variant-numeric: tabular-nums;
}
.reg__p--item { padding-left: 18px; position: relative; color: var(--muted-2, var(--text)); }
.reg__p--item::before {
    content: ""; position: absolute; left: 4px; top: .7em;
    width: 5px; height: 5px; border-radius: 50%; background: var(--brand-yellow);
}

.reg__glossary { margin: 0 0 8px; }
.reg__term { padding: 12px 0; border-bottom: 1px solid var(--line); }
.reg__term:first-child { border-top: 1px solid var(--line); }
.reg__term dt { font-weight: 700; font-size: 14px; color: var(--text); margin-bottom: 4px; }
.reg__term dd { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.6; }

.reg__related { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 18px; }
.reg__related-item {
    display: flex; flex-direction: column; gap: 4px;
    padding: 15px 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel);
}
.reg__related-item:hover { border-color: var(--line-2); opacity: 1; }
.reg__related-title { font-weight: 600; font-size: 14px; color: var(--text); }
.reg__related-sub { font-size: 12.5px; color: var(--muted); }

@media (max-width: 1020px) {
    .reg { grid-template-columns: 1fr; gap: 16px; }
    /* Липкое оглавление на узком экране закрывало бы пол-страницы */
    .reg__aside { position: static; }
    .reg__toc-list { max-height: 320px; }
}
@media (max-width: 640px) {
    .reg__related { grid-template-columns: 1fr; }
    .reg__p--numbered { flex-direction: column; gap: 2px; }
}
/* ---------- Страница одного протокола ---------- */
/* Колонка уже полосы: протокол читают подряд, а строка во всю ширину
   макета — это под сотню знаков, глаз теряет начало следующей */
.paper, .paper-nav { max-width: 720px; margin-left: auto; margin-right: auto; }
.paper { padding: 30px 34px 34px; }
.paper__head { padding-bottom: 20px; margin-bottom: 24px; border-bottom: 1px solid var(--line); }
.paper__title { font-family: var(--font-display); font-size: 27px; line-height: 1.2; margin: 6px 0 0; }
.paper__date { color: var(--muted); font-size: 13.5px; margin: 8px 0 0; }
.paper__body p { margin: 0 0 16px; }
.paper__body p:last-child { margin-bottom: 0; }

.paper__file {
    display: flex; align-items: center; gap: 14px;
    padding: 14px 18px; margin-bottom: 24px;
    border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel-2);
}
.paper__file:hover { border-color: var(--line-2); opacity: 1; }
.paper__file-ico {
    flex: none; width: 40px; height: 40px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(242, 228, 0, .2); color: var(--text);
}
.paper__file-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.paper__file-name { font-weight: 600; font-size: 14px; color: var(--text); overflow-wrap: anywhere; }
.paper__file-size { font-size: 12px; color: var(--muted); }
.paper__file-arr { flex: none; color: var(--muted); }

.paper-nav {
    display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px;
    margin-top: 18px;
}
.paper-nav__item {
    display: flex; flex-direction: column; gap: 3px;
    padding: 13px 18px; border: 1px solid var(--line); border-radius: var(--radius);
    background: var(--panel); min-width: 0;
}
.paper-nav__item:hover { border-color: var(--line-2); opacity: 1; }
.paper-nav__item--next { text-align: right; }
.paper-nav__label { font-size: 12px; color: var(--muted); }
.paper-nav__num { font-weight: 600; font-size: 13.5px; color: var(--text); font-variant-numeric: tabular-nums; }

@media (max-width: 760px) {
    .paper { padding: 22px 18px 24px; }
    .paper__title { font-size: 22px; }
    .paper-nav { grid-template-columns: 1fr; }
    .paper-nav__item--next { text-align: left; }
    .paper-nav__all { order: 3; justify-self: stretch; text-align: center; }
    .proto-search { gap: 8px; }
    .proto-search__field { flex-basis: 100%; }
}

/* ---------- Инструкция к приложению ---------- */
/* Раскладка повторяет регламент: слева оглавление, справа текст.
   Разделов восемь и они разбиты на две аудитории — без оглавления
   капитан не находит свою половину */
.guide {
    display: grid;
    grid-template-columns: minmax(0, 260px) minmax(0, 700px);
    gap: 26px;
    align-items: start;
    max-width: 986px;
    margin: 0 auto;
}
.guide__aside { position: sticky; top: 92px; }
.guide__toc {
    background: var(--panel); border: 1px solid var(--line);
    border-radius: var(--radius); overflow: hidden;
}
.guide__toc-head {
    padding: 14px 18px; cursor: pointer; list-style: none;
    font-family: var(--font-display); font-weight: 600; font-size: 13px;
    letter-spacing: .06em; text-transform: uppercase; color: var(--text);
    border-bottom: 1px solid var(--line);
}
.guide__toc-head::-webkit-details-marker { display: none; }
.guide__toc-list { display: flex; flex-direction: column; max-height: calc(100vh - 190px); overflow-y: auto; }
.guide__toc-group {
    padding: 12px 18px 7px; font-size: 11px; letter-spacing: .09em;
    text-transform: uppercase; font-weight: 700; color: var(--muted);
    background: var(--panel-2); border-bottom: 1px solid var(--line);
}
.guide__toc-item {
    display: flex; gap: 10px; align-items: baseline;
    padding: 9px 18px; font-size: 13px; line-height: 1.35; color: var(--muted);
    border-bottom: 1px solid var(--line);
}
.guide__toc-item:last-child { border-bottom: 0; }
.guide__toc-item:hover { background: var(--panel-2); color: var(--text); opacity: 1; }
.guide__toc-num {
    flex: none; min-width: 20px; text-align: center;
    font-family: var(--font-display); font-weight: 700; font-size: 11.5px;
    color: var(--text); background: rgba(242, 228, 0, .25); border-radius: 5px; padding: 2px 5px;
}
.guide__toc-title { min-width: 0; }

.guide__body { min-width: 0; }
/* Общий потолок ширины у .paper здесь мешает: колонка уже задана сеткой */
.guide__paper { max-width: none; margin: 0; }
.guide__intro { color: var(--muted); font-size: 14.5px; line-height: 1.65; margin: 0 0 14px; }
.guide__outro {
    margin: 26px 0 0; padding-top: 18px; border-top: 1px solid var(--line);
    color: var(--muted); font-size: 13.5px; line-height: 1.6;
}

.guide__group { margin-top: 30px; }
.guide__group-head { padding-bottom: 14px; border-bottom: 2px solid var(--brand-yellow); }
.guide__group-title { font-family: var(--font-display); font-size: 20px; line-height: 1.2; margin: 0; }
.guide__group-lead { margin: 5px 0 0; font-size: 13.5px; color: var(--muted); }

.guide__section { padding-top: 22px; margin-top: 22px; border-top: 1px solid var(--line); scroll-margin-top: 100px; }
.guide__group > .guide__section:first-of-type { border-top: 0; }
.guide__section-title {
    display: flex; align-items: center; gap: 10px;
    font-family: var(--font-display); font-size: 17px; line-height: 1.3;
    margin: 0 0 12px; scroll-margin-top: 100px;
}
.guide__section-num {
    flex: none; width: 26px; height: 26px; display: inline-flex;
    align-items: center; justify-content: center;
    font-size: 13px; font-weight: 700; color: #10333f;
    background: var(--brand-yellow); border-radius: 8px;
}
/* Шаги нумеруем сами: у ol счётчик сбрасывается на каждом разделе,
   а сквозная нумерация внутри раздела здесь и нужна */
.guide__steps { margin: 0; padding: 0 0 0 22px; display: flex; flex-direction: column; gap: 9px; }
.guide__step { font-size: 14.5px; line-height: 1.62; color: var(--text); }
.guide__step::marker { color: var(--muted); font-size: 13px; font-weight: 600; }

.guide__note {
    margin-top: 14px; padding: 13px 16px;
    background: var(--panel-2); border: 1px solid var(--line);
    border-left: 3px solid var(--brand-yellow); border-radius: var(--radius);
}
.guide__note-title {
    font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase;
    font-weight: 700; color: var(--text); margin-bottom: 7px;
}
.guide__note-list { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 5px; }
.guide__note-list li { font-size: 13.5px; line-height: 1.55; color: var(--muted); }

.guide__install {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; flex-wrap: wrap; margin-top: 18px; padding: 16px 20px;
}
.guide__install-title { font-weight: 600; font-size: 14.5px; color: var(--text); }
.guide__install-sub { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.guide__install-row { display: flex; gap: 8px; flex-wrap: wrap; }

.guide__related { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
.guide__related-item {
    display: flex; flex-direction: column; gap: 4px;
    padding: 15px 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel);
}
.guide__related-item:hover { border-color: var(--line-2); opacity: 1; }
.guide__related-title { font-weight: 600; font-size: 14px; color: var(--text); }
.guide__related-sub { font-size: 12.5px; color: var(--muted); }

@media (max-width: 1020px) {
    .guide { grid-template-columns: 1fr; gap: 16px; }
    /* Липкое оглавление на узком экране закрывало бы пол-страницы */
    .guide__aside { position: static; }
    .guide__toc-list { max-height: 320px; }
}
@media (max-width: 640px) {
    .guide__related { grid-template-columns: 1fr; }
    .guide__install { flex-direction: column; align-items: flex-start; }
}

/* Ссылка на инструкцию в баннере приложения на главной */
/* Именно flex, а не inline-flex: на телефоне inline-flex ужимался по
   содержимому и текст складывался в узкий столбик в четыре строки */
.app-cta__guide {
    display: flex; align-items: center; gap: 12px;
    margin-top: 16px; padding: 11px 16px;
    border: 1px solid rgba(255, 255, 255, .22); border-radius: 12px;
    background: rgba(255, 255, 255, .06); color: #fff;
    width: 100%; max-width: 420px;
}
.app-cta__guide:hover { border-color: var(--brand-yellow); background: rgba(255, 255, 255, .1); opacity: 1; }
.app-cta__guide-icon { flex: none; display: inline-flex; color: var(--brand-yellow); }
.app-cta__guide-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.app-cta__guide-copy strong { font-size: 13.5px; font-weight: 700; }
.app-cta__guide-copy small { font-size: 11.5px; color: rgba(255, 255, 255, .7); line-height: 1.4; }
.app-cta__guide-arrow { flex: none; margin-left: auto; color: var(--brand-yellow); font-size: 16px; }

/* ---------- Постер приложения ---------- */
/* Постер вертикальный: ограничиваем по высоте, а не по ширине —
   380px ширины давали почти 600px высоты и раздували весь блок */
.app-cta__poster {
    justify-self: center; align-self: center;
    width: auto; max-width: 100%; max-height: 360px;
    border-radius: 16px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .45); border: 1px solid rgba(255, 255, 255, .14);
}

/* ---------- Адаптив новых блоков ---------- */
/* Четыре плитки в ряд помещаются только на полной ширине: ниже
   раскладываем 2x2, иначе заголовки в три строки на казахском */
@media (max-width: 1200px) {
    .quick__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1020px) {
    .quick__grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    .proto { flex-wrap: wrap; gap: 10px 14px; }
    .proto__body { flex-basis: 100%; order: 3; }
    .league-card { overflow-x: auto; }
    .league-tbl .hide-m { display: none; }
    .seg__btn { padding: 8px 12px; font-size: 12.5px; }
}

/* Мобильная панель меню в редизайне — тоже тёмная, под цвет шапки */
@media (max-width: 1120px) {
    .hdr .nav {
        background: var(--brand-teal);
        border-bottom: 1px solid rgba(255, 255, 255, .12);
    }
    .hdr .nav a { border-bottom-color: rgba(255, 255, 255, .1); }
    .hdr .nav a.is-active { box-shadow: inset 3px 0 0 var(--brand-yellow); }
}

/* ---------- Карточки матчей на главной (по макету) ---------- */
.sec-head__actions { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.mgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.mcard {
    display: flex; flex-direction: column; gap: 11px;
    background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
    box-shadow: var(--card-shadow); padding: 17px 18px 14px;
    border-top: 3px solid transparent;
    transition: transform .12s ease, box-shadow .12s ease;
}
.mcard:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); opacity: 1; }
.mcard--next { border-top-color: var(--brand-yellow); }
.mcard__meta {
    display: flex; justify-content: space-between; gap: 10px;
    font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
    color: var(--muted);
}
.mcard__meta span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mcard__meta .is-live { color: var(--live); flex: none; }
.mcard__line { display: flex; align-items: center; gap: 10px; min-width: 0; }
.mcard__line img, .mcard__line .crest { width: 30px; height: 30px; object-fit: contain; flex: none; }
.mcard__name {
    flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-weight: 600; font-size: 14.5px; color: var(--text);
}
.mcard__score { font-family: var(--font-display); font-weight: 700; font-size: 17px; color: var(--muted-2); }
.mcard__line.is-won .mcard__score { color: var(--text); }
.mcard__foot {
    display: flex; justify-content: space-between; align-items: center; gap: 10px;
    border-top: 1px solid var(--line); padding-top: 10px; margin-top: 2px;
    font-size: 12px; color: var(--muted);
}
.mcard__time { font-family: var(--font-display); font-weight: 700; font-size: 15px; color: var(--text); }

/* ---------- Ссылки-«ещё» с жёлтым подчёркиванием (по макету) ---------- */
.link-more {
    font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    color: var(--muted-2); border-bottom: 2px solid var(--brand-yellow); padding-bottom: 2px;
    white-space: nowrap;
}
.link-more:hover { color: var(--text); opacity: 1; }
.link-more::after { content: " →"; }

/* ---------- Надзаголовки секций с жёлтым тире (по макету) ---------- */
.eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 11px; letter-spacing: .16em; }
.eyebrow::before { content: ""; width: 22px; height: 3px; background: var(--brand-yellow); flex: none; }
.eyebrow--live::before { background: var(--live); }

/* ---------- Бейдж рейтинга у сторов (по макету) ---------- */
.app-cta__rating { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: #C9D8E2; margin-left: 6px; }
.app-cta__rating b { font-family: var(--font-display); font-weight: 700; font-size: 16px; color: var(--brand-yellow); }

@media (max-width: 1020px) { .mgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px)  { .mgrid { grid-template-columns: 1fr; } }

/* hidden-атрибут сильнее display:grid у переключаемых панелей */
.mgrid[hidden],
[data-league-panel][hidden] { display: none !important; }

/* ============================================================
   Редизайн 2026, доводка по макету: топ-бар, блок приложения,
   футер, вкладки лиг, компактность.
   ============================================================ */

/* ---------- Топ-бар как в макете ---------- */
.topbar { font-size: 12px; }
.topbar__left { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.topbar .pill--link {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 12px; border-radius: 6px;
    background: rgba(255, 255, 255, .07); border: 0;
    font-size: 12px; font-weight: 600; letter-spacing: .01em;
    color: #C9D8E2; text-transform: none;
}
.topbar .pill--link:hover { background: rgba(255, 255, 255, .14); color: #fff; opacity: 1; }
.topbar .lang { display: inline-flex; gap: 2px; }
.topbar .lang__item {
    padding: 3px 8px; border-radius: 6px;
    font-size: 11.5px; font-weight: 700; letter-spacing: .06em; color: #9FB6C2;
}
.topbar .lang__item.is-active { background: var(--brand-yellow); color: #003854; }
.topbar .lang__item:hover { color: #fff; opacity: 1; }
.topbar .lang__item.is-active:hover { color: #003854; }
.topbar__theme { border-radius: 6px; }

/* ---------- Блок приложения — полоса по макету ---------- */
.app-cta-section {
    background:
        repeating-linear-gradient(115deg, transparent 0 90px, rgba(255, 255, 255, .04) 90px 92px),
        var(--brand-navy);
}
.app-cta {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    gap: 40px;
    align-items: center;
    justify-content: stretch;
    padding: 40px 0;
}
.eyebrow--on-dark { color: #7E99A8; }
.app-cta__title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(24px, 3vw, 36px);
    line-height: 1.08;
    letter-spacing: .01em;
    text-transform: uppercase;
    margin-top: 10px;
}
.app-cta__title em, .app-cta__brand { font-style: normal; color: var(--brand-yellow); }
.app-cta__text { font-size: 14.5px; color: #9FB6C2; margin-top: 12px; line-height: 1.6; max-width: 46ch; }
.app-cta__row { margin-top: 24px; gap: 12px; }
.app-cta .app-cta__store {
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .15);
    color: #fff;
    border-radius: 10px;
    padding: 10px 16px;
}
.app-cta .app-cta__store:hover { background: rgba(255, 255, 255, .14); color: #fff; opacity: 1; }
.app-cta__store-icon { fill: #fff; }
.app-cta .app-cta__store[data-app-link="android"] .app-cta__store-icon { fill: none; }
.app-cta__store-copy small { font-size: 8px; color: #9FB6C2; }
.app-cta__store-copy strong { font-size: 12.5px; font-weight: 700; }

/* На телефоне две колонки блока приложения сжимались до 163px: кнопки
   магазинов вставали друг под друга, а ссылка на инструкцию — в столбик
   по одному слову. Ниже 760px кладём постер под текст */
@media (max-width: 760px) {
    .app-cta { grid-template-columns: 1fr; gap: 24px; padding: 32px 0; }
    .app-cta__poster { max-width: 100%; }
}

/* ---------- Футер по макету ---------- */
.footer { background: var(--brand-navy); border-top: 0; }
.footer__partners {
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
    padding: 26px 0; border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.footer__partners-label {
    font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
    color: #7E99A8; margin-right: 10px;
}
.footer__partners-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.footer__partner {
    display: flex; align-items: center; justify-content: center;
    padding: 10px 20px; border-radius: 10px;
    background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1);
}
.footer__partner img { max-height: 30px; width: auto; }
.footer__partner:hover { border-color: rgba(255, 255, 255, .3); opacity: 1; }
.link-more--light { margin-left: auto; color: #C9D8E2; }
.link-more--light:hover { color: #fff; }
.footer__top {
    padding-top: 38px; padding-bottom: 6px;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: 36px;
}
.footer__col-title {
    font-size: 11px; letter-spacing: .14em; color: #7E99A8;
    font-weight: 700; text-transform: uppercase; margin-bottom: 14px;
}
.footer__links { gap: 9px; font-size: 13.5px; }
.footer__links a { color: #C9D8E2; }
.footer__links a:hover { color: #fff; opacity: 1; }
.footer__about { color: #9FB6C2; font-size: 13.5px; }
.footer__contacts { color: #9FB6C2; }
.footer__contact a { color: #C9D8E2; }
.footer__social a { color: var(--brand-yellow); }
.footer__more { color: var(--brand-yellow); }
.footer__bottom {
    display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
    padding: 16px 0 24px; margin-top: 26px;
    border-top: 1px solid rgba(255, 255, 255, .08);
    font-size: 12.5px; color: #7E99A8;
}
.footer__bottom a { color: #C9D8E2; }

/* ---------- Вкладки лиг: своя строка, переносы, не уезжают ---------- */
.seg--wrap { display: flex; flex-wrap: wrap; border-radius: 12px; margin-bottom: 18px; }
.seg--wrap .seg__btn { flex: none; }

/* Компактнее заголовки секций */
.sec-head { margin-bottom: 20px; }
.sec-lead { font-size: 13.5px; margin-top: 8px; }

/* ---------- Доводка по замечаниям (раунд 3) ---------- */

/* Меню в шапке — слева за логотипом, как в макете; город прижат вправо */
.hdr__inner { justify-content: flex-start; gap: 16px 30px; }
.hdr__actions { margin-left: auto; }

/* Гербы в таблице лиг: компонент crest вместо голого img */
.league-tbl__team .crest { width: 30px; height: 33px; object-fit: contain; flex: none; }

/* Убрана подсветка первых мест (решение заказчика) */
.league-tbl tr.is-top .league-tbl__pos { box-shadow: none; }
.league-foot__zone { display: none; }

/* Вкладки матчей: компактный блок справа от заголовка, без растяжения */
.sec-head__actions { margin-left: auto; justify-content: flex-end; }
.sec-head__actions .seg { flex: none; }

/* ---------- Меню в шапке — как в макете (раунд 4) ---------- */
.hdr .nav {
    flex: 0 1 auto;
    justify-content: flex-start;
    gap: clamp(10px, 1.8vw, 28px);
    font-size: 15px;
    letter-spacing: 0;
    font-weight: 500;
}
.hdr .nav a { text-transform: none; }
.hdr .nav a.is-active { font-weight: 700; }
.hdr .nav__caret { width: 10px; height: 10px; }

/* Город: пилюля с жёлтой точкой, без стрелки — как в макете */
.hdr .city-pill {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, .25);
    color: #E4ECF1;
    font-size: 13.5px;
    font-weight: 600;
    gap: 8px;
    padding: 8px 15px;
}
.hdr .city-pill::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--brand-yellow);
    flex: none;
}
.hdr .city-pill--btn svg { display: none; }
.hdr .city-pill--btn:hover { border-color: rgba(255, 255, 255, .5); color: #fff; }

/* ---------- Таблицы лиг: таблица слева, список турниров справа ---------- */
.leagues-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 20px;
    align-items: start;
}
.leagues-main { min-width: 0; }
.leagues-side {
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: var(--panel-2);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 16px;
    position: sticky;
    top: 96px;
}
.leagues-side__title {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--muted);
    padding: 2px 10px 10px;
    border-bottom: 2px solid var(--brand-yellow);
    margin-bottom: 6px;
}
.leagues-side__btn {
    display: flex;
    flex-direction: column;
    gap: 3px;
    text-align: left;
    border: 0;
    background: transparent;
    cursor: pointer;
    font-family: var(--font-text);
    padding: 11px 12px;
    border-radius: 9px;
    transition: background .12s;
}
.leagues-side__btn:hover { background: var(--panel); }
.leagues-side__name { font-size: 14px; font-weight: 600; color: var(--text); line-height: 1.35; }
.leagues-side__status { font-size: 11.5px; color: var(--muted); }
.leagues-side__btn.is-active { background: var(--brand-teal); box-shadow: inset 3px 0 0 var(--brand-yellow); }
.leagues-side__btn.is-active .leagues-side__name { color: #fff; }
.leagues-side__btn.is-active .leagues-side__status { color: #A7C0CD; }
.leagues-side__archive { align-self: flex-start; margin: 12px 10px 4px; }

@media (max-width: 1020px) {
    .leagues-grid { grid-template-columns: 1fr; }
    /* На мобильном список турниров — компактной строкой над таблицей */
    .leagues-side { position: static; order: -1; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px; }
    .leagues-side__title { display: none; }
    .leagues-side__btn { flex-direction: row; align-items: center; gap: 8px; padding: 9px 13px; border: 1px solid var(--line); background: var(--panel); }
    .leagues-side__btn.is-active { border-color: var(--brand-teal); }
    .leagues-side__status { display: none; }
    .leagues-side__archive { margin: 0 4px; }
}

/* Сайдбар в разметке идёт первым (для мобильной версии), на десктопе — справа */
@media (min-width: 1021px) {
    .leagues-side { grid-column: 2; grid-row: 1; }
    .leagues-main { grid-column: 1; grid-row: 1; }
}

/* ---------- Мегаменю: узкая панель под пунктом «Турниры», как в макете ---------- */
.megamenu { justify-content: flex-start; padding: 12px 0 0; }
.megamenu__panel--list {
    width: 400px;
    max-width: calc(100vw - 48px);
    margin-left: var(--megamenu-left, 0px);
    border-radius: 12px;
    padding: 18px 20px 20px;
    box-shadow: 0 8px 16px rgba(2, 41, 58, .16), 0 24px 60px rgba(2, 41, 58, .24);
}
.megamenu__panel--list .megamenu__title {
    font-family: var(--font-text);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--muted);
    margin: 0 0 8px;
    padding: 0 10px 9px;
    border-bottom: 2px solid var(--brand-yellow);
}
.megamenu__panel--list .megamenu__item { padding: 9px 10px; border-radius: 8px; }
.megamenu__panel--list .megamenu__item > span {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    line-height: 1.35;
    min-width: 0;
}
.megamenu__archive-btn { margin-top: 12px; }

/* Полоса активного пункта — 3px, как в макете */
.nav a.is-active::after { height: 3px; }
.nav__bar { height: 3px; }

/* ---------- Шапка компактнее, полоса — сразу под текстом (как в макете) ---------- */
@media (min-width: 1121px) {
    .hdr__inner { min-height: 64px; align-items: center; }

    /* Пункты меню больше не растягиваются на всю высоту шапки: из-за этого
       жёлтая полоса активного пункта уезжала к нижней кромке */
    .hdr .nav { align-items: center; align-self: center; }
    .hdr .nav a { padding: 5px 2px 9px; }
    .hdr .nav__item--has-menu { display: flex; align-items: center; }
}

/* ============================================================
   Выравнивание типографики по прототипу (сверено покомпонентно:
   семейство / вес / кегль / трекинг у каждого элемента главной).
   ============================================================ */

/* Заголовки */
.h1, .h2 { font-weight: 600; letter-spacing: normal; }
.app-cta__title { font-weight: 600; letter-spacing: normal; }

/* Надзаголовки секций */
.eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .14em; }

/* Кнопки и ссылки-«ещё» */
.btn { font-weight: 700; font-size: 13px; letter-spacing: .05em; }
.link-more { font-size: 13px; letter-spacing: .08em; }

/* Переключатели: вкладки матчей и список лиг */
.seg__btn { font-size: 13.5px; font-weight: 700; }
.leagues-side__name { font-size: 14px; font-weight: 600; }

/* Карточки матчей */
.mcard__name { font-size: 15px; font-weight: 700; }
.mcard__score { font-weight: 600; }
.mcard__meta { font-size: 11.5px; letter-spacing: .07em; }
.mcard__foot { font-size: 12.5px; }

/* Турнирная таблица */
.league-tbl { font-size: 14.5px; }
.league-tbl th { font-size: 11px; letter-spacing: .1em; }
.league-tbl__team { font-weight: 700; }
.league-tbl__pts { font-weight: 600; font-size: 16px; }

/* Быстрые ссылки */
.qcard__title { font-size: 15px; letter-spacing: .02em; }

/* Протоколы */
.proto__num { font-weight: 600; font-size: 18px; }
.proto__title { font-size: 15px; }
.proto__sub { font-size: 13px; }
.proto__date { font-size: 13.5px; font-weight: 500; }
.proto__ext { font-weight: 700; font-size: 12px; letter-spacing: .08em; }

/* Рейтинг SOCCA: в макете обычный регистр, а не капс */
.rank__name { font-family: var(--font-text); font-size: 14px; font-weight: 600; letter-spacing: normal; text-transform: none; }

/* Блок приложения */
.app-cta__text { font-size: 16px; }

/* Шапка и топ-бар */
.hdr .nav a { font-size: 14px; font-weight: 600; }
.hdr .nav a.is-active { font-weight: 600; }
.topbar .pill--link { font-size: 12.5px; letter-spacing: normal; }

/* Подвал */
.footer__col-title { font-family: var(--font-text); font-size: 11.5px; font-weight: 700; letter-spacing: .14em; }
.footer__links { font-size: 14px; }
.footer__about { font-size: 14px; }
.footer__bottom { letter-spacing: normal; }

/* ---------- Подвал: полоса партнёров как в макете ---------- */
/* Светлая линия над полосой партнёров — она отделяет подвал от блока приложения */
.footer { border-top: 1px solid rgba(255, 255, 255, .14); }
.footer__partners { padding: 30px 0; gap: 16px; }
.footer__partner { padding: 14px 26px; }
.footer__partner img { max-height: 44px; }
.footer__links a { font-size: 14px; }

/* ---------- Трансляции: каналы полей + записи (без красного) ---------- */
.fields {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 30px;
}
.field-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 20px;
    border-radius: var(--radius);
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .14);
    color: #fff;
    transition: background .14s ease, border-color .14s ease, transform .14s ease;
}
.field-card:hover {
    background: rgba(255, 255, 255, .1);
    border-color: var(--brand-yellow);
    transform: translateY(-2px);
    opacity: 1;
}
.field-card__play {
    flex: none;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--brand-yellow);
    color: #003854;
}
.field-card__copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.field-card__name {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 16px;
    letter-spacing: .02em;
    text-transform: uppercase;
}
.field-card__hint { font-size: 12.5px; color: #9FB6C2; }
.field-card__go { margin-left: auto; font-size: 17px; color: #9FB6C2; transition: transform .14s, color .14s; }
.field-card:hover .field-card__go { color: var(--brand-yellow); transform: translateX(3px); }

/* Подзаголовок ленты записей */
.streams-head { display: flex; align-items: center; gap: 16px; margin-bottom: 14px; }
.streams-head__title {
    font-family: var(--font-text);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #7E99A8;
}
.streams-head .rail-nav { margin-left: auto; }

/* Плашка «Смотреть» — фирменная, вместо красного логотипа YouTube */
.stream__watch {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: var(--brand-yellow);
    color: #003854;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 12px;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: 6px 12px;
    border-radius: 7px;
}
/* Статус «Запись» — спокойный, красным остаётся только идущий эфир */
.badge--soon { background: rgba(255, 255, 255, .1); color: #C9D8E2; border-color: transparent; }
.stream__venue { font-size: 11.5px; letter-spacing: .06em; color: #8FA9B8; text-transform: none; }

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

/* ---------- Герб-заглушка = знак лиги: без серой плашки и рамки ---------- */
.crest--fallback {
    background: transparent;
    border: 0;
    padding: 0;
    object-fit: contain;
}

/* ---------- Быстрые ссылки: заголовок и подпись в две строки (как в макете) ---------- */
.qcard { padding: 17px 20px; gap: 15px; }
.qcard__body { display: flex; flex-direction: column; gap: 3px; }
.qcard__title { display: block; line-height: 1.25; }
.qcard__sub { display: block; line-height: 1.35; }
.qcard__ico { border-radius: 12px; }

/* ============================================================
   Страница матча: составы и иконки событий
   ============================================================ */

/* Составы — на всю ширину сетки, под ходом матча */
.squads {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    align-items: start;
    margin-top: 20px;
}
@media (max-width: 860px) { .squads { grid-template-columns: minmax(0, 1fr); } }

.squad__head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--line);
}
.squad__head .crest { width: 26px; height: 26px; flex: none; }
.squad__name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: var(--font-display);
    font-size: 13.5px;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
}
.squad__count { margin-left: auto; flex: none; font-size: 11.5px; font-weight: 600; color: var(--dim); }

/* Строка игрока: номер, фото, имя, отметки, позиция.
   Имя не растягивается — отметки о голах стоят сразу за ним,
   а позиция уходит к правому краю и не переносится на вторую строку. */
.squads .lineup__row {
    display: flex;
    align-items: center;
    gap: 11px;
    height: 42px;
    padding: 0 18px;
    border-bottom: 1px solid var(--panel-2);
    font-size: 14px;
}
.squads .lineup__row:last-child { border-bottom: 0; }
.squads .lineup__row:hover { background: var(--panel-2); }
.squads .lineup__number { width: 22px; flex: none; font-size: 14px; font-variant-numeric: tabular-nums; }
.squads .lineup__name {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 500;
}
.squads .lineup__pos {
    width: 38px;
    flex: none;
    margin-left: auto;
    text-align: right;
    font-family: var(--font-display);
    font-size: 10.5px;
    letter-spacing: .08em;
}

/* Голы и карточки игрока в этом матче */
.lineup__marks { display: flex; align-items: center; gap: 5px; flex: none; }
.lineup__marks-n {
    margin-left: -2px;
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 600;
    color: var(--muted);
}

/* Разделитель основы и запаса — появляется, только если протокол их различает */
.lineup__split {
    padding: 9px 18px;
    background: var(--panel-2);
    border-block: 1px solid var(--line);
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--muted);
}

/* Иконки событий: рисованные, а не эмодзи — те рендерятся по-разному в разных системах */
.ev-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    color: var(--brand-navy);
}
.ev-ico svg { display: block; width: 100%; height: 100%; }
.flow__player .ev-ico { width: 17px; height: 17px; }
.lineup__marks .ev-ico { width: 15px; height: 15px; }
/* Мяч крупнее карточек: у круглого узора мелкий размер съедает соты,
   при 17px он читался как тёмное пятно. Карточки — простые прямоугольники,
   им хватает и меньшего */
.ev-ico--goal, .ev-ico--own_goal { width: 22px; height: 22px; }
.flow__player .ev-ico--goal, .flow__player .ev-ico--own_goal { width: 22px; height: 22px; }
.lineup__marks .ev-ico--goal, .lineup__marks .ev-ico--own_goal { width: 19px; height: 19px; }

/* Ход матча на телефоне: центральной оси нет — на 390 px она съедает половину
   ширины и режет фамилии. Строка занимает всю ширину, сторону показывает
   положение минуты: у хозяев слева, у гостей справа. */
@media (max-width: 620px) {
    .flow::before { display: none; }
    .flow__row {
        display: flex;
        flex-direction: row-reverse;
        align-items: center;
        gap: 10px;
        min-height: 40px;
        border-bottom: 1px solid var(--panel-2);
    }
    .flow__row:last-child { border-bottom: 0; }
    .flow__row.is-home { justify-content: flex-end; }
    .flow__row.is-away { justify-content: flex-start; }
    .flow__row.is-home .flow__player,
    .flow__row.is-away .flow__player { flex-direction: row; justify-content: flex-start; }
    .flow__row.is-away .flow__side { text-align: right; }
    .flow__minute { min-width: 34px; padding: 3px 6px; }
}

/* ---------- Мобильный выбор турнира вместо ряда длинных плашек ---------- */
.leagues-picker { display: none; }

@media (max-width: 1020px) {
    .leagues-grid { position: relative; }

    .leagues-picker {
        display: flex;
        align-items: center;
        gap: 12px;
        width: 100%;
        text-align: left;
        background: var(--panel);
        border: 1px solid var(--line);
        border-radius: var(--radius);
        padding: 12px 16px;
        cursor: pointer;
        font-family: var(--font-text);
        margin-bottom: 12px;
    }
    .leagues-picker__label {
        flex: none;
        font-size: 10.5px;
        font-weight: 700;
        letter-spacing: .13em;
        text-transform: uppercase;
        color: var(--muted);
    }
    .leagues-picker__value {
        flex: 1;
        min-width: 0;
        font-size: 14px;
        font-weight: 600;
        color: var(--text);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .leagues-picker__caret { flex: none; color: var(--muted); transition: transform .15s ease; }
    .leagues-picker[aria-expanded="true"] .leagues-picker__caret { transform: rotate(180deg); }

    /* Сам список — панель под кнопкой, по умолчанию скрыта */
    .leagues-side {
        display: none;
        position: absolute;
        top: 58px;
        left: 0;
        right: 0;
        z-index: 30;
        flex-direction: column;
        gap: 2px;
        background: var(--panel);
        border: 1px solid var(--line);
        border-radius: var(--radius);
        box-shadow: 0 12px 32px rgba(2, 41, 58, .18);
        padding: 10px;
        max-height: 60vh;
        overflow-y: auto;
    }
    .leagues-side.is-open { display: flex; }
    .leagues-side__title { display: none; }
    .leagues-side__btn {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
        border: 0;
        background: transparent;
        padding: 11px 12px;
    }
    .leagues-side__btn.is-active { background: var(--brand-teal); }
    .leagues-side__name { white-space: normal; }
    .leagues-side__status { display: block; }
    .leagues-side__archive { margin: 8px 12px 4px; }
}

/* На узком экране вкладки и ссылка секции идут отдельными строками:
   вместе они шире экрана и распирали страницу по горизонтали */
@media (max-width: 700px) {
    .sec-head__actions {
        width: 100%;
        margin-left: 0;
        justify-content: flex-start;
        gap: 12px;
    }
    .sec-head__actions .seg { flex: 0 1 auto; max-width: 100%; }
    .sec-head__actions .seg__btn { padding: 8px 14px; }
}

/* Карточка матча не должна распирать сетку: длинное название турнира
   в мета-строке задавало минимальную ширину карточки */
.mgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.mcard { min-width: 0; }
.mcard__meta span { min-width: 0; }

/* Плашка титулов — карточка со своими полями, см. .socca__caption выше */
.socca__caption { box-sizing: border-box; }

@media (max-width: 1020px) { .mgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px)  { .mgrid { grid-template-columns: minmax(0, 1fr); } }

/* ============================================================
   Мобильный выбор турнира — чистовая версия.
   Прежние правила делали список строкой с центрированием
   (align-items: center на колонке) — отсюда рваный левый край.
   ============================================================ */
@media (max-width: 1020px) {
    .leagues-picker {
        gap: 10px;
        padding: 13px 16px;
        box-shadow: var(--card-shadow);
        transition: border-color .14s ease;
    }
    .leagues-picker[aria-expanded="true"] { border-color: var(--brand-teal); }
    .leagues-picker__label { letter-spacing: .12em; }

    .leagues-side {
        align-items: stretch;
        gap: 0;
        padding: 8px;
        top: 62px;
        border-radius: var(--radius);
        box-shadow: 0 16px 40px rgba(2, 41, 58, .22);
    }

    /* Пункт списка: во всю ширину, текст по левому краю */
    .leagues-side__btn {
        display: block;
        width: 100%;
        text-align: left;
        padding: 13px 14px;
        border: 0;
        border-radius: 10px;
        background: transparent;
        box-shadow: none;
        font-family: var(--font-text);
        transition: background .12s ease;
    }
    .leagues-side__btn + .leagues-side__btn { margin-top: 2px; }
    .leagues-side__btn:hover { background: var(--panel-2); }

    .leagues-side__name {
        display: block;
        width: 100%;
        font-size: 15px;
        font-weight: 600;
        line-height: 1.3;
        color: var(--text);
    }

    /* Статус в выпадающем списке не нужен — он есть в самой таблице */
    .leagues-side__status { display: none; }

    .leagues-side__btn.is-active {
        background: var(--brand-teal);
        box-shadow: inset 3px 0 0 var(--brand-yellow);
    }
    .leagues-side__btn.is-active .leagues-side__name { color: #fff; }

    /* Архив — отдельной строкой под разделителем */
    .leagues-side__archive {
        display: block;
        margin: 8px 0 2px;
        padding: 12px 14px 4px;
        border-top: 1px solid var(--line);
        border-bottom: 0;
    }
    .leagues-side__archive::after { content: " →"; }
}


/* ============================================================
   Список турниров: таблица вместо карточек
   Карточка несла восемь значений, из которых половина у большинства
   турниров пустая. Строкой они сравниваются по колонкам, а архив
   перестал быть вкладкой и виден при прокрутке.
   ============================================================ */
.trn-sec { margin-bottom: 34px; }
.trn-sec:last-child { margin-bottom: 0; }
.trn-sec__head {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 14px;
}
.trn-sec__title {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 19px;
    line-height: 1;
    letter-spacing: .03em;
    text-transform: uppercase;
    margin: 0;
}
.trn-sec__count {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 12px;
    color: var(--muted);
    background: var(--panel);
    border: 1px solid var(--line);
    padding: 3px 9px;
    border-radius: 6px;
}

.trn-tbl {
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--panel);
}

/* Колонки: турнир — статус — команды — стрелка */
.trn-tbl__head,
.trn-tbl__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 190px 92px 40px;
    align-items: center;
    gap: 12px;
}
.trn-tbl__head {
    padding: 11px 18px;
    background: var(--panel-2);
    border-bottom: 1px solid var(--line);
    font-size: 10px;
    letter-spacing: .12em;
    text-transform: uppercase;
    font-weight: 800;
    color: var(--dim);
}
.trn-tbl__head span:last-child { text-align: right; }

.trn-tbl__row {
    padding: 13px 18px;
    border-bottom: 1px solid var(--panel-2);
    color: var(--text);
    transition: background .12s ease;
}
.trn-tbl__row:last-child { border-bottom: 0; }
.trn-tbl__row:hover { background: var(--panel-2); opacity: 1; }

.trn-tbl__main { display: flex; align-items: center; gap: 12px; min-width: 0; }
.trn-tbl__crest {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: var(--panel-2);
    flex: none;
    display: grid;
    place-items: center;
    padding: 4px;
}
.trn-tbl__crest img,
.trn-tbl__crest svg { width: 100%; height: 100%; object-fit: contain; }
.trn-tbl__id { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.trn-tbl__name {
    font-weight: 600;
    font-size: 14.5px;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.trn-tbl__row:hover .trn-tbl__name { color: var(--brand-navy); }
.trn-tbl__sub {
    font-size: 12px;
    color: var(--dim);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.trn-tbl__season { font-size: 13.5px; color: var(--muted); font-weight: 600; }
.trn-tbl__teams { text-align: right; }
.trn-tbl__num {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 16px;
    font-variant-numeric: tabular-nums;
}
.trn-tbl__go { color: var(--dim); display: flex; justify-content: flex-end; }
.trn-tbl__go svg { width: 16px; height: 16px; }
.trn-tbl__row:hover .trn-tbl__go { color: var(--brand-navy); }

/* Статус строкой-таблеткой */
.status-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 10px;
    border-radius: 6px;
    background: var(--panel-2);
    color: var(--muted);
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
    white-space: nowrap;
}
.status-pill--live { background: rgba(239, 45, 40, .1); color: #b3373b; }
.status-pill--live .pill__dot { background: var(--live); }


/* ---------- Тёмная шапка страницы ---------- */
.trn-hero__inner { padding-block: 34px 30px; }
.eyebrow--light { color: rgba(255, 255, 255, .58); }
.eyebrow--light::before { background: var(--brand-yellow); }
.trn-hero__title { color: #fff; margin-bottom: 8px; }
.trn-hero__lead {
    margin: 0;
    font-size: 15px;
    color: rgba(255, 255, 255, .66);
    max-width: 60ch;
}
.trn-hero__meta {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, .13);
    font-size: 13.5px;
}
.trn-hero__count { font-weight: 600; color: #fff; }
.trn-hero__sep { color: rgba(255, 255, 255, .3); }
.trn-hero__archive {
    color: var(--brand-yellow);
    font-weight: 600;
    border-bottom: 1px solid rgba(242, 228, 0, .4);
    padding-bottom: 1px;
}
.trn-hero__archive:hover { border-bottom-color: var(--brand-yellow); opacity: 1; }

/* ---------- Лента прошлых сезонов ---------- */
.past { padding-block: 40px 46px; }
.past__head { margin-bottom: 20px; }
.past__title { color: #fff; margin-bottom: 10px; }
.past__lead {
    margin: 0;
    max-width: 62ch;
    font-size: 13.5px;
    line-height: 1.5;
    color: rgba(255, 255, 255, .6);
}
/* Архив разложен по сезонам: одним списком он читался сплошняком */
.past__season { margin-top: 24px; }
.past__season-head {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 11px;
}
.past__season-title {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 15px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--brand-yellow);
}
.past__season-count {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 12px;
    color: rgba(255, 255, 255, .6);
    background: rgba(255, 255, 255, .08);
    padding: 2px 8px;
    border-radius: 6px;
}

/* ---------- Телефон: таблица разворачивается в список ---------- */
@media (max-width: 860px) {
    .trn-tbl__head { display: none; }
    .trn-tbl__row {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 10px 12px;
        padding: 14px;
    }
    .trn-tbl__main { grid-column: 1 / -1; }
    .trn-tbl__status { grid-column: 1; }
    .trn-tbl__teams { grid-column: 2; text-align: right; }
    .trn-tbl__go { display: none; }


}


/* ============================================================
   Страница турнира: таблицы идущего этапа, сайдбар, сетка плей-офф
   ============================================================ */

/* ---------- Две колонки: таблицы + сайдбар ---------- */
.tournament-cols {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 20px;
    align-items: start;
}
.tournament-cols__main { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.tournament-cols__side { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
@media (max-width: 1000px) { .tournament-cols { grid-template-columns: minmax(0, 1fr); } }

.tournament-panel { overflow: hidden; }
.tournament-panel__head {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: 15px 18px;
    border-bottom: 1px solid var(--line);
}
.tournament-panel__head .panel-title { margin-bottom: 0; }
.tournament-panel__sub {
    margin-left: auto;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--dim);
    flex: none;
}
/* Верхняя пулька — золотая полоса: там борьба за первое место */
.tournament-panel--split_top { border-top: 3px solid #D9A72A; }
.tournament-panel--split_bottom { border-top: 3px solid var(--line); }

/* ---------- Карточки сайдбара ---------- */
.side-panel { overflow: hidden; }
.side-panel__head {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--line);
}
.side-panel__head .panel-title { margin-bottom: 0; }
.side-panel__count,
.side-panel__unit {
    margin-left: auto;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--dim);
    flex: none;
}
.side-panel__foot {
    padding: 11px 18px;
    border-top: 1px solid var(--line);
    background: var(--panel-2);
    font-size: 12px;
    color: var(--muted);
}

/* ---------- Дисквалификации ---------- */
.susp { display: flex; flex-direction: column; }
/* Имя, команда и причина идут строками друг под другом. В одну строку они
   не помещались: причина занимает половину ширины сайдбара, и имя игрока
   обрезалось до многоточия — а именно оно здесь главное. */
.susp__row {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    padding: 12px 18px 13px 26px;
    border-bottom: 1px solid var(--panel-2);
}
.susp__row:last-child { border-bottom: 0; }
/* Цветная засечка вместо отдельного элемента-полоски */
.susp__row::before {
    content: "";
    position: absolute;
    left: 18px;
    top: 14px;
    bottom: 15px;
    width: 3px;
    border-radius: 2px;
    background: #E9B824;
}
.susp__row.is-hard::before { background: #D8393E; }
.susp__name {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.25;
    color: var(--text);
}
.susp__name:hover { color: var(--brand-navy); opacity: 1; }
.susp__team { font-size: 12px; color: var(--muted); line-height: 1.3; }
.susp__team:hover { color: var(--text); opacity: 1; }
.susp__reason {
    align-self: flex-start;
    margin-top: 4px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 5px;
    line-height: 1.35;
}
.susp__reason--red { color: #A2242A; background: rgba(216, 57, 62, .11); }
.susp__reason--yellow { color: #8A6608; background: rgba(233, 184, 36, .16); }

/* ---------- Бомбардиры ---------- */
.lead { display: flex; flex-direction: column; }
.lead__row {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 9px 18px;
    border-bottom: 1px solid var(--panel-2);
}
.lead__row:last-child { border-bottom: 0; }
.lead__row:hover { background: var(--panel-2); }
.lead__pos {
    width: 21px;
    height: 21px;
    border-radius: 6px;
    flex: none;
    display: grid;
    place-items: center;
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 700;
    color: var(--muted);
    background: var(--panel-2);
}
.lead__pos--1 { background: #D9A72A; color: #fff; }
.lead__pos--2 { background: #AAB7C0; color: #fff; }
.lead__pos--3 { background: #C88A52; color: #fff; }
.lead__body { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 1px; }
.lead__name {
    font-size: 13.5px;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.lead__team { font-size: 11.5px; color: var(--muted); }
.lead__count {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 16px;
    flex: none;
    color: var(--brand-navy);
}

/* ---------- Плей-офф: матчи по стадиям ---------- */
/* Сетки нет намеренно: в одном кубке идут сразу несколько кубков
   со своими стадиями, и в общей сетке они бы переплелись. */
.po { display: flex; flex-direction: column; gap: 26px; }
.po__head {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 12px;
}
.po__title {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 17px;
    line-height: 1;
    letter-spacing: .04em;
    text-transform: uppercase;
    margin: 0;
}
.po__count {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 12px;
    color: var(--muted);
    background: var(--panel);
    border: 1px solid var(--line);
    padding: 3px 9px;
    border-radius: 6px;
}

/* ---------- Полоса «Другие турниры» ---------- */
.other { padding-block: 30px 34px; }
.sec-head--light .h2 { color: #fff; }
.other__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(226px, 1fr));
    gap: 12px;
}
.ocard {
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: var(--radius);
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
    transition: .15s;
}
.ocard:hover {
    background: rgba(255, 255, 255, .12);
    border-color: rgba(242, 228, 0, .45);
    opacity: 1;
}
.ocard__top { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ocard__crest { width: 30px; height: 30px; flex: none; }
.ocard__status {
    margin-left: auto;
    flex: none;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #02293A;
    background: var(--brand-yellow);
    padding: 3px 7px;
    border-radius: 5px;
}
.ocard__status--soft { background: rgba(255, 255, 255, .14); color: rgba(255, 255, 255, .82); }
.ocard__name {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 14.5px;
    line-height: 1.2;
    text-transform: uppercase;
    color: #fff;
}
.ocard__go {
    margin-top: auto;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--brand-yellow);
}
.ocard__go::after { content: " \2192"; }

@media (max-width: 640px) {
    .third { gap: 10px; }
    .third__pair { width: 100%; }
}

/* Сайдбара нет — таблицы занимают всю ширину */
.tournament-cols--solo { grid-template-columns: minmax(0, 1fr); }

/* ---------- Таблицы этапов (пулька) и матчи кубка ---------- */
.league-stage-title {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 15px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--text);
    margin: 20px 0 10px;
}
.league-stage-title:first-child { margin-top: 0; }

.league-card--matches { padding: 8px 10px; }
.league-match {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
    border-radius: 10px;
    transition: background .12s ease;
}
.league-match + .league-match { border-top: 1px solid var(--line); }
.league-match:hover { background: var(--panel); opacity: 1; }
.league-match__team { display: flex; align-items: center; gap: 10px; min-width: 0; font-weight: 600; font-size: 14.5px; }
.league-match__team > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.league-match__team--away { justify-content: flex-end; text-align: right; }
.league-match__score {
    flex: none;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 16px;
    color: var(--text);
    min-width: 62px;
    text-align: center;
}

/* Мобильный выбор турнира: подпись убираем, название занимает всю кнопку */
@media (max-width: 560px) {
    .leagues-picker__label { display: none; }
    .leagues-picker__value { font-size: 14.5px; }
    .league-match { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 10px; }
    .league-match__score { min-width: 52px; font-size: 15px; }
}

/* ---------- Таблицы лиг: фон и состояние загрузки ---------- */
/* Секция стоит на белой полосе — карточка таблицы светло-серая,
   иначе на сером фоне она сливалась с подложкой */
.band--white .league-card,
.band--white .leagues-side { background: #F7F9F9; }

.league-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 220px;
    padding: 24px;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: #F7F9F9;
    color: var(--muted);
    font-size: 14px;
}
.league-loading--error { color: var(--loss, #d6564f); }


/* ============================================================
   Таблица турниров: варианты
   ============================================================ */

/* Статус у всех строк секции одинаковый — колонки нет, сетка на одну уже */
.trn-tbl--slim .trn-tbl__head,
.trn-tbl--slim .trn-tbl__row { grid-template-columns: minmax(0, 1fr) 92px 40px; }

/* Эмблемы у турнира нет: нейтральный кубок вместо одинакового знака лиги */
.trn-tbl__glyph { width: 19px; height: 19px; color: var(--dim); }
.trn-tbl__crest img { width: 100%; height: 100%; object-fit: contain; }

/* Ноль команд — прочерк: заявок ещё нет, а не «результат ноль» */
.trn-tbl__num--empty { color: var(--dim); font-weight: 500; }

/* Идущий турнир — жёлтая засечка слева: строка выделяется не только текстом */
.trn-tbl__row.is-live { position: relative; }
.trn-tbl__row.is-live::before {
    content: "";
    position: absolute;
    left: 0;
    top: 8px;
    bottom: 8px;
    width: 3px;
    border-radius: 0 2px 2px 0;
    background: var(--brand-yellow);
}

/* ---------- Тёмный вариант: лента прошлых сезонов ---------- */
.trn-tbl--dark {
    background: rgba(255, 255, 255, .05);
    border-color: rgba(255, 255, 255, .12);
}
.trn-tbl--dark .trn-tbl__head {
    background: rgba(255, 255, 255, .05);
    border-bottom-color: rgba(255, 255, 255, .12);
    color: rgba(255, 255, 255, .5);
}
.trn-tbl--dark .trn-tbl__row {
    color: #fff;
    border-bottom-color: rgba(255, 255, 255, .08);
}
.trn-tbl--dark .trn-tbl__row:hover { background: rgba(255, 255, 255, .07); }
.trn-tbl--dark .trn-tbl__row:hover .trn-tbl__name { color: var(--brand-yellow); }
.trn-tbl--dark .trn-tbl__crest { background: rgba(255, 255, 255, .08); }
.trn-tbl--dark .trn-tbl__glyph { color: rgba(255, 255, 255, .42); }
.trn-tbl--dark .trn-tbl__sub { color: rgba(255, 255, 255, .45); }
.trn-tbl--dark .trn-tbl__season { color: rgba(255, 255, 255, .72); }
.trn-tbl--dark .trn-tbl__num { color: #fff; }
.trn-tbl--dark .trn-tbl__num--empty { color: rgba(255, 255, 255, .38); }
.trn-tbl--dark .trn-tbl__go { color: rgba(255, 255, 255, .38); }
.trn-tbl--dark .trn-tbl__row:hover .trn-tbl__go { color: var(--brand-yellow); }

@media (max-width: 860px) {
    .trn-tbl--slim .trn-tbl__row { grid-template-columns: minmax(0, 1fr) auto; }
    .past { padding-block: 30px 34px; }
}


/* ============================================================
   Правки после разбора страниц турнира и подвала
   ============================================================ */

/* Эмблемы у турнира нет: без жёлтой плашки и без знака лиги —
   он читался как логотип самого турнира */
.tournament-hero__crest--empty {
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .14);
    color: rgba(255, 255, 255, .55);
}
.tournament-hero__crest--empty svg { width: 40px; height: 40px; }

/* Подвал на телефоне.
   Слой редизайна переопределяет .footer__top уже ПОСЛЕ мобильного
   медиазапроса выше, поэтому четыре колонки доживали до 375 px и
   логотип сжимался. Возвращаем одну колонку здесь же, ниже по файлу. */
@media (max-width: 760px) {
    .footer__top {
        grid-template-columns: minmax(0, 1fr);
        gap: 28px;
        padding-top: 30px;
    }
    .footer__about { max-width: none; }
    .footer__logo { height: 40px; }
}


/* ---------- Дисквалификации: матч-источник и пустой блок ---------- */
/* Из какого матча наказание — вопрос, который возникает сразу за причиной */
.susp__match {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 7px;
    margin-top: 7px;
    font-size: 12px;
    line-height: 1.35;
    color: var(--muted);
}
.susp__match:hover { opacity: 1; }
.susp__match:hover .susp__match-name { color: var(--brand-navy); }
.susp__match-label {
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--dim);
}
.susp__match-name {
    font-weight: 600;
    color: var(--muted-2);
    border-bottom: 1px solid var(--line-2);
}
.susp__match-date { color: var(--dim); }

.susp__empty {
    padding: 22px 18px 24px;
    text-align: center;
    font-size: 13.5px;
    color: var(--muted);
    line-height: 1.5;
}

/* Шапка страницы (заголовок + подзаголовок в полосе) и следующий за ней
   блок складывали свои отступы — 48px снизу и 44px сверху, почти сто
   пикселей пустоты. Подрезаем обе половины разом для всех страниц:
   у полосы с заголовком — низ, у идущего следом блока — верх. */
/* :last-child нужен, чтобы перебить правило «.band > .section:last-child»
   выше по файлу — у него специфичность больше, чем у простого класса */
.band > .section--first,
.band > .section--first:last-child { padding-bottom: 26px; }
.band + .section--first,
.band + .band > .section--first { padding-top: 24px; }

/* ---------- Кодекс участника ---------- */
.code-grid { align-items: start; }
.code-card { padding: 24px 26px; display: flex; flex-direction: column; gap: 16px; }
.code-card__head { display: flex; align-items: center; gap: 12px; }
.code-card__icon {
    flex: 0 0 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: var(--panel-2);
    color: var(--accent-text);
}
.code-card__title { font-family: var(--font-display); font-size: 19px; letter-spacing: .02em; margin: 0; }
.code-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; }
.code-list li {
    position: relative;
    padding-left: 20px;
    font-size: 14px;
    line-height: 1.65;
    color: var(--muted-2);
}
/* Маркер рисуем сами: у списка нестандартный отступ и фирменный цвет */
.code-list li::before {
    content: '';
    position: absolute;
    left: 2px;
    top: 9px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent);
}
.code-note {
    margin-top: 18px;
    padding: 20px 24px;
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}
.code-note__icon {
    flex: 0 0 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: var(--panel-2);
    color: var(--accent-text);
}
.code-note__text { margin: 0; flex: 1 1 260px; font-size: 14px; font-weight: 600; color: var(--text); line-height: 1.6; }

/* ---------- Афиша календаря мероприятий ---------- */
.poster {
    display: block;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid var(--line);
    box-shadow: var(--card-shadow);
    background: var(--panel);
    line-height: 0;
}
/* Вписываем в экран: афиша высокая, во всю ширину колонки она уходила
   далеко за нижний край и её приходилось долго прокручивать.
   Мелкие даты читаются по клику — открывается оригинал */
.poster { max-width: max-content; margin-left: auto; margin-right: auto; }
.poster__img {
    display: block; width: auto; height: auto;
    max-width: 100%; max-height: calc(100vh - 210px);
}
.poster-hint { margin: 12px 0 0; text-align: center; font-size: 13px; color: var(--muted); }

/* ---------- Меморандумы: карточка соглашения и его сканы ---------- */
.memo { padding: 24px 26px 22px; }
.memo + .memo { margin-top: 18px; }
.memo__head { margin-bottom: 20px; }
.memo__title { font-size: 19px; line-height: 1.3; margin: 0; }
.memo__summary { color: var(--muted); margin: 7px 0 0; }
.memo__meta { color: var(--muted-2, var(--muted)); font-size: 12.5px; margin: 9px 0 0; }
/* Сканы всего ~560px в ширину — колонки держим уже, чтобы страницы
   не растягивались и текст на них оставался читаемым */
.memo__pages { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.memo__page {
    display: block; text-decoration: none;
    /* Потолок ширины: у меморандума из одной страницы колонка иначе
       растягивает скан вдвое против оригинала и текст плывёт */
    max-width: 400px;
    border: 1px solid var(--line); border-radius: 12px; overflow: hidden;
    background: var(--panel-2); transition: transform .12s ease, box-shadow .12s ease;
}
.memo__page:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); }
.memo__img { display: block; width: 100%; height: auto; }
.memo__cap {
    display: block; padding: 9px 12px; font-size: 12px;
    color: var(--muted); border-top: 1px solid var(--line);
}
.memo__hint { color: var(--muted); font-size: 12.5px; margin: 14px 0 0; }
@media (max-width: 640px) {
    .memo { padding: 20px 18px 18px; }
    .memo__pages { grid-template-columns: 1fr; }
}

/* ============================================================
   Архив турниров
   Турниров в архиве под сотню: карточками страница превращалась
   в бесконечную мозаику, где нечего сравнивать. Поэтому строки,
   сгруппированные по годам, а главная величина в строке — победитель:
   именно за ним в архив и приходят.
   ============================================================ */
.arc-hero__inner { padding-block: 34px 30px; }
.arc-hero__title { color: #fff; margin-bottom: 18px; }

.arc-hero__stats { display: flex; flex-wrap: wrap; gap: 10px; }
.arc-stat {
    display: flex; flex-direction: column; gap: 2px;
    padding: 10px 16px;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: var(--radius);
    min-width: 108px;
}
.arc-stat b {
    font-family: var(--font-display); font-weight: 600; font-size: 22px; line-height: 1;
    color: #fff; font-variant-numeric: tabular-nums;
}
.arc-stat span {
    font-size: 11px; letter-spacing: .07em; text-transform: uppercase;
    color: rgba(255, 255, 255, .6);
}

/* ---------- фильтры ---------- */
.arc-filters {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 18px; flex-wrap: wrap; margin-bottom: 26px;
}
.arc-chips { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
.arc-chip {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 7px 13px;
    font-family: var(--font-display); font-weight: 500; font-size: 12.5px;
    letter-spacing: .03em; text-transform: uppercase;
    color: var(--muted-2); text-decoration: none;
    background: var(--panel); border: 1px solid var(--line); border-radius: 999px;
    transition: border-color .12s ease, color .12s ease;
}
.arc-chip:hover { border-color: var(--line-2); color: var(--text); }
.arc-chip.is-active {
    background: var(--brand-teal); border-color: var(--brand-teal); color: #fff;
}
.arc-chip__n {
    font-size: 11px; font-variant-numeric: tabular-nums;
    color: var(--dim); background: var(--panel-2);
    padding: 1px 6px; border-radius: 999px;
}
.arc-chip.is-active .arc-chip__n {
    color: var(--brand-yellow); background: rgba(255, 255, 255, .12);
}
.arc-year { flex: none; }

.arc-applied {
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
    margin-bottom: 18px; font-size: 13.5px; color: var(--muted);
}
.arc-applied__reset { color: var(--accent-text); }

/* ---------- год как ось архива ---------- */
.arc-year-sec { display: block; margin-bottom: 18px; }
.arc-year-sec:last-child { margin-bottom: 0; }
.arc-year-sec__head {
    display: flex; align-items: center; gap: 12px;
    padding-bottom: 8px; margin-bottom: 12px;
    border-bottom: 2px solid var(--text);
    cursor: pointer; list-style: none;
}
.arc-year-sec__head::-webkit-details-marker { display: none; }
.arc-year-sec__head:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 3px; }
.arc-year-sec__caret {
    width: 18px; height: 18px; margin-left: auto; color: var(--dim);
    transition: transform .15s ease;
}
.arc-year-sec[open] .arc-year-sec__caret { transform: rotate(180deg); }
.arc-year-sec:not([open]) .arc-year-sec__head { margin-bottom: 0; }
.arc-year-sec__title {
    font-family: var(--font-display); font-weight: 600; font-size: 24px; line-height: 1;
    letter-spacing: .02em; margin: 0; font-variant-numeric: tabular-nums;
}
.arc-year-sec__count { font-size: 12.5px; color: var(--muted); }

/* ---------- строка турнира ---------- */
.arc-list {
    border: 1px solid var(--line); border-radius: var(--radius-lg);
    overflow: hidden; background: var(--panel);
}
.arc-row {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) auto 20px;
    align-items: center; gap: 14px;
    padding: 9px 16px;
    text-decoration: none; color: inherit;
    border-bottom: 1px solid var(--line);
    transition: background .12s ease;
}
.arc-row:last-child { border-bottom: 0; }
.arc-row:hover { background: var(--panel-2); }
.arc-row > * { min-width: 0; }

.arc-row__id { display: flex; flex-direction: column; gap: 2px; }
.arc-row__series {
    font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
    color: var(--dim);
}
.arc-row__name {
    font-family: var(--font-display); font-weight: 600; font-size: 14.5px;
    line-height: 1.2; text-transform: uppercase; letter-spacing: .01em;
}
.arc-row__sub { font-size: 12.5px; color: var(--muted); }

.arc-row__champ { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.arc-row__champ-label {
    font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--dim);
}
.arc-row__champ-name {
    display: flex; align-items: center; gap: 7px;
    font-weight: 500; font-size: 14.5px; min-width: 0; overflow: hidden;
}
.arc-row__champ-name svg { width: 15px; height: 15px; flex: none; color: var(--accent-text); }
.arc-row__champ-none { font-size: 12.5px; color: var(--dim); }

.arc-row__meta {
    display: flex; flex-direction: column; gap: 2px; text-align: right;
    font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.arc-row__go { color: var(--dim); }
.arc-row__go svg { width: 18px; height: 18px; display: block; }
.arc-row:hover .arc-row__go { color: var(--accent-text); }

@media (max-width: 760px) {
    .arc-row {
        grid-template-columns: minmax(0, 1fr) 18px;
        row-gap: 8px;
        padding: 13px 14px;
    }
    .arc-row__id { grid-column: 1; }
    .arc-row__go { grid-column: 2; grid-row: 1; align-self: start; }
    .arc-row__champ { grid-column: 1 / -1; }
    .arc-row__champ-label { display: none; }
    /* Числа таблиц и команд на узком экране уводят взгляд от победителя */
    .arc-row__meta { display: none; }
    .arc-filters { flex-direction: column; align-items: stretch; }
    .arc-year-sec__title { font-size: 20px; }
}

/* ============================================================
   Страница перенесённого турнира
   ============================================================ */
.arc-th__inner { padding-block: 26px 30px; }
.arc-th__title { color: #fff; margin: 6px 0 12px; }
.arc-th__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.arc-th__note {
    margin: 16px 0 0; max-width: 62ch;
    font-size: 13.5px; line-height: 1.55; color: rgba(255, 255, 255, .65);
}

.arc-champ {
    display: inline-flex; align-items: center; gap: 12px; flex-wrap: wrap;
    margin-top: 20px; padding: 12px 20px 12px 16px;
    background: rgba(242, 228, 0, .1);
    border: 1px solid rgba(242, 228, 0, .35);
    border-radius: var(--radius);
}
.arc-champ__cup { width: 26px; height: 26px; flex: none; color: var(--brand-yellow); }
.arc-champ__label {
    font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
    color: rgba(255, 255, 255, .6);
}
.arc-champ__name {
    font-family: var(--font-display); font-weight: 600; font-size: 20px;
    text-transform: uppercase; color: #fff;
}

/* ---------- итоговые таблицы ---------- */
.arc-tables { display: flex; flex-direction: column; gap: 18px; }
.arc-table { padding: 0; overflow: hidden; }
.arc-table__head {
    padding: 13px 18px;
    font-family: var(--font-display); font-weight: 600; font-size: 14px;
    letter-spacing: .06em; text-transform: uppercase;
    border-bottom: 1px solid var(--line);
    background: var(--panel-2);
}

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

/* ---------- матчи ---------- */
.arc-mlist {
    border: 1px solid var(--line); border-radius: var(--radius-lg);
    overflow: hidden; background: var(--panel);
}
.arc-m {
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr) 74px minmax(0, 1fr) minmax(0, 0.9fr);
    align-items: center; gap: 12px;
    padding: 11px 16px;
    border-bottom: 1px solid var(--line);
    font-size: 14px;
}
.arc-m:last-child { border-bottom: 0; }
.arc-m > * { min-width: 0; }

.arc-m__when { display: flex; flex-direction: column; gap: 1px; }
.arc-m__date { font-size: 12.5px; color: var(--muted-2); white-space: nowrap; }
.arc-m__time { font-size: 11.5px; color: var(--dim); font-variant-numeric: tabular-nums; }

.arc-m__side { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.arc-m__side--home { text-align: right; }
.arc-m__side--away { text-align: left; }
.arc-m__side.is-won { font-weight: 600; }

.arc-m__score {
    text-align: center;
    font-family: var(--font-display); font-weight: 600; font-size: 15px;
    font-variant-numeric: tabular-nums;
    background: var(--panel-2); border: 1px solid var(--line);
    border-radius: 6px; padding: 3px 0;
}
.arc-m__extra { display: flex; flex-direction: column; gap: 1px; text-align: right; }
.arc-m__stage { font-size: 11.5px; color: var(--accent-text); }
.arc-m__venue {
    font-size: 11.5px; color: var(--dim);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.arc-round { margin-bottom: 22px; }
.arc-round:last-child { margin-bottom: 0; }
.arc-round__head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.arc-round__title {
    font-family: var(--font-display); font-weight: 600; font-size: 15px;
    letter-spacing: .04em; text-transform: uppercase; margin: 0;
}
.arc-round__date { font-size: 12.5px; color: var(--muted); }

.arc-loading {
    display: flex; align-items: center; justify-content: center;
    min-height: 120px; color: var(--muted); font-size: 14px;
    border: 1px dashed var(--line); border-radius: var(--radius-lg);
}
.arc-loading--error { color: #b4551e; border-style: solid; }

@media (max-width: 760px) {
    .arc-m {
        grid-template-columns: minmax(0, 1fr) 62px minmax(0, 1fr);
        row-gap: 6px;
        padding: 11px 12px;
    }
    .arc-m__when { grid-column: 1 / -1; flex-direction: row; gap: 8px; align-items: baseline; }
    .arc-m__extra { grid-column: 1 / -1; flex-direction: row; gap: 8px; text-align: left; }
    .arc-th__title { margin-bottom: 10px; }
    .arc-champ { width: 100%; }
}

/* ---------- другие розыгрыши серии ---------- */
.arc-siblings {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px;
}
.arc-sib {
    display: flex; flex-direction: column; gap: 3px;
    padding: 14px 16px; text-decoration: none; color: inherit;
    background: var(--panel-2); border: 1px solid var(--line);
    border-radius: var(--radius); transition: border-color .12s ease;
}
.arc-sib:hover { border-color: var(--line-2); }
.arc-sib__year {
    font-family: var(--font-display); font-weight: 600; font-size: 18px;
    line-height: 1; font-variant-numeric: tabular-nums; color: var(--accent-text);
}
.arc-sib__name { font-size: 13.5px; font-weight: 500; line-height: 1.3; }
.arc-sib__champ { font-size: 12px; color: var(--muted); }

.arc-source {
    padding-block: 20px;
    font-size: 12.5px; color: var(--dim);
    border-top: 1px solid var(--line);
}
.arc-source a { color: var(--muted); }

/* Переход в архив на странице турниров вместо ленты прошлых сезонов */
.past__cta {
    display: flex; align-items: center; justify-content: space-between;
    gap: 28px; flex-wrap: wrap; padding-block: 30px;
}
.past__cta-body { max-width: 52ch; }
.past__cta-side { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.past__cta-nums { display: flex; flex-direction: column; gap: 1px; }
.past__cta-num {
    font-family: var(--font-display); font-weight: 600; font-size: 34px; line-height: 1;
    color: #fff; font-variant-numeric: tabular-nums;
}
.past__cta-label {
    font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
    color: rgba(255, 255, 255, .6);
}
.past__cta-years { font-size: 12.5px; color: var(--brand-yellow); font-variant-numeric: tabular-nums; }

@media (max-width: 720px) {
    .past__cta { flex-direction: column; align-items: flex-start; gap: 20px; }
    .past__cta-side { width: 100%; justify-content: space-between; }
}

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

/* Тёмный текст на жёлтой кнопке: правило .hdr .nav a перебивало .btn--accent
   по весу селектора — и на мобильном, и на десктопе */
.hdr .nav a.btn--accent { color: var(--on-accent); }
.hdr .nav a.btn--accent:hover { color: var(--on-accent); }

@media (max-width: 1120px) {
    /* Список турниров — не карточка поверх меню, а вложенный список,
       как уже сделано у «О нас» */
    .hdr .nav .megamenu__panel {
        background: transparent;
        border-radius: 0;
        box-shadow: none;
        padding: 0 0 10px 12px;
    }
    .hdr .nav .megamenu__panel--list .megamenu__item { padding: 12px 10px; border-radius: 8px; }
    .hdr .nav .megamenu__panel--list .megamenu__item > span {
        color: #C9D8E2; font-size: 14.5px; font-weight: 500;
    }
    .hdr .nav .megamenu__item:hover { background: rgba(255, 255, 255, .07); }
    .hdr .nav .megamenu__item:hover > span { color: #fff; }

    /* «Все турниры» — жёлтым: серый на тёмном почти не виден */
    .hdr .nav a.megamenu__archive {
        color: var(--brand-yellow); font-weight: 600;
        padding: 12px 10px 4px; border-bottom: 0;
    }
    .hdr .nav a.megamenu__archive:hover { color: #fff; }

    /* Кнопка архива — во всю ширину списка, подпись по центру */
    .hdr .nav a.megamenu__archive-btn {
        margin-top: 10px; justify-content: center;
        padding: 14px 16px; font-weight: 700; border-bottom: 0;
    }
}

/* ---------- Таблицы и панели рядом с ними: скругление мельче ----------
   Просьба клиента: у таблиц рамка должна быть строже, чем у карточек.
   Панель выбора турнира стоит вплотную к таблице и держит тот же радиус,
   иначе рядом стоят два разных скругления. */
.league-card,
.leagues-side,
.trn-tbl,
.card.arc-table { border-radius: var(--radius-table); }

/* ---------- Страница судьи: компактнее сверху, шире список матчей ----------
   Между хлебными крошками и карточкой судьи зияло около 90px, а список
   матчей был зажат в 790px при полосе 1240 — названия команд обрезались,
   справа пустовала треть экрана. */
.ref-page .section--first { padding-top: 22px; padding-bottom: 0; }
.ref-page .section--tight { padding-top: 14px; }
.ref-head { padding: 18px 22px; margin-bottom: 12px; }

/* Список во всю полосу — только на широком экране. Правила идут
   после мобильного блока выше по файлу, поэтому без ограничения по
   ширине они перебивали его и на телефоне список оставался
   двухколоночным: матчи не читались */
.rlist { max-width: none; }

@media (min-width: 761px) {
    .rmatch {
        grid-template-columns: minmax(0, 1fr) minmax(0, 300px);
        gap: 24px;
        padding: 11px 20px;
    }
    .rmatch__teams {
        /* Команды получают всю свободную ширину: обрезать названия
           больше незачем, места хватает */
        grid-template-columns: minmax(0, 1fr) 66px minmax(0, 1fr);
        gap: 14px;
    }
    .rmatch__name { font-size: 14px; }
    .rmatch__score { font-size: 16px; font-weight: 600; }
    /* Дата и турнир — двумя строками: в одну они не помещались
       и жались к самому краю */
    .rmatch__meta {
        display: flex; flex-direction: column; gap: 2px;
        text-align: right; white-space: normal; font-size: 12px; line-height: 1.35;
    }
}

@media (max-width: 760px) {
    /* На телефоне дата и турнир идут строкой под парой команд */
    .rmatch__meta { display: flex; flex-wrap: wrap; gap: 4px 8px; font-size: 11.5px; }
    .rmatch__trn { color: var(--dim); }
}

/* ---------- Карточки турнира: списки и матрица по турам ---------- */

/* Список игроков с карточками (вкладки «Жёлтые» / «Красные») */
.cards-table { padding: 0; overflow: hidden; }
.ctbl { width: 100%; border-collapse: collapse; font-size: 14px; }
.ctbl th {
    text-align: left; padding: 12px 14px;
    font-family: var(--font-text); font-size: 11px; font-weight: 700;
    letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
    border-bottom: 1px solid var(--line); white-space: nowrap;
}
.ctbl td { padding: 11px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.ctbl tr:last-child td { border-bottom: 0; }
.ctbl__num { width: 44px; color: var(--muted); font-weight: 700; }
.ctbl__player { font-weight: 600; }
.ctbl__team { color: var(--muted-2); }
/* Команда под именем — только там, где своя колонка спрятана */
.ctbl__team-inline { display: none; font-size: 12px; font-weight: 400; color: var(--muted); }
.ctbl__matches-inline { display: none; flex-wrap: wrap; gap: 5px; margin-top: 6px; font-weight: 400; }
.ctbl__count { width: 90px; text-align: center; }
.ctbl__matches { display: flex; flex-wrap: wrap; gap: 6px; }
.ctbl__match {
    display: inline-block; padding: 3px 9px; border-radius: 6px;
    background: var(--panel-2); border: 1px solid var(--line);
    font-size: 12px; color: var(--muted-2); white-space: nowrap;
}
a.ctbl__match:hover { border-color: var(--line-2); color: var(--text); opacity: 1; }

/* Счётчик карточек цветной плашкой */
.card-chip {
    display: inline-block; min-width: 30px; padding: 3px 9px; border-radius: 6px;
    font-family: var(--font-display); font-weight: 700; font-size: 14px; text-align: center;
}
.card-chip--yellow { background: var(--brand-yellow); color: #0c1d2d; }
.card-chip--red { background: var(--live); color: #fff; }

/* Карточки команды таблицей: колонки — соперники */
.cgrid__legend { display: inline-flex; gap: 14px; font-size: 12px; font-weight: 400; color: var(--muted); margin-left: 14px; text-transform: none; letter-spacing: 0; }
.cgrid__legend span { display: inline-flex; align-items: center; gap: 6px; }
.cgrid__mark {
    display: inline-block; width: 11px; height: 15px; border-radius: 2px;
    vertical-align: middle; margin: 0 1px; flex: none;
}
.cgrid__mark--yellow { background: var(--brand-yellow); }
.cgrid__mark--red { background: var(--live); }

/* Вторая жёлтая за матч: жёлтая с наложенной красной — на поле игрок
   получил обе, и по двум отдельным квадратам это не читалось */
.cgrid__pair {
    position: relative; display: inline-block;
    width: 19px; height: 15px; vertical-align: middle; margin: 0 1px;
}
.cgrid__pair .cgrid__mark { position: absolute; top: 0; margin: 0; }
.cgrid__pair .cgrid__mark--yellow { left: 0; }
.cgrid__pair .cgrid__mark--red {
    left: 8px;
    /* Тонкая обводка цветом карточки: без неё красная сливается с жёлтой */
    box-shadow: -1px 0 0 var(--panel);
}

.cgrid-wrap { overflow-x: auto; margin: 0 -4px; }
.cgrid { border-collapse: collapse; font-size: 13.5px; }
.cgrid th, .cgrid td { border-bottom: 1px solid var(--line); }
.cgrid tbody tr:last-child td { border-bottom: 0; }

/* Имя игрока не уезжает при прокрутке вбок — иначе строка безымянная */
.cgrid th.cgrid__player, .cgrid td.cgrid__player {
    position: sticky; left: 0; z-index: 1;
    background: var(--panel); text-align: left;
    min-width: 175px; padding: 9px 14px 9px 4px;
    font-weight: 600; white-space: nowrap;
}
.cgrid thead th.cgrid__player { font-weight: 700; }

/* Колонка соперника: короткое имя и дата матча под ним */
.cgrid th.cgrid__opp {
    padding: 7px 6px; vertical-align: bottom; text-align: center;
    font-weight: 600; font-size: 11.5px; color: var(--muted-2);
    min-width: 78px; max-width: 108px;
}
.cgrid__opp a { display: block; color: inherit; }
.cgrid__opp a:hover { color: var(--text); opacity: 1; }
.cgrid__opp-name { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cgrid__opp-date { display: block; margin-top: 2px; font-size: 10.5px; font-weight: 400; color: var(--dim); }

.cgrid td.cgrid__cell { padding: 8px 6px; text-align: center; white-space: nowrap; }
.cgrid tbody tr:hover td { background: var(--panel-2); }
.cgrid tbody tr:hover td.cgrid__player { background: var(--panel-2); }

@media (max-width: 760px) {
    /* Команда переезжает под имя: своя колонка на телефоне не влезает */
    .ctbl .hide-m { display: none; }
    .ctbl__team-inline { display: block; margin-top: 2px; }
    .ctbl__matches-inline { display: flex; }
    .ctbl th, .ctbl td { padding: 10px 12px; }
    /* Имя игрока уже: на телефоне колонки соперников важнее */
    .cgrid th.cgrid__player, .cgrid td.cgrid__player { min-width: 130px; font-size: 13px; }
}

/* Ссылка на страницу турнира — над таблицей, а не под ней */
.league-head { display: flex; justify-content: flex-end; margin-bottom: 10px; }
@media (max-width: 1020px) {
    /* На телефоне таблица длинная: ссылка сверху остаётся на виду */
    .league-head { justify-content: flex-start; margin-bottom: 8px; }
}

/* Матчи команды внутри турнира — компактнее: название турнира в строке
   не повторяется, и строка не должна занимать столько места */
.mlist--tight .mrow { padding: 9px 14px; gap: 4px 12px; }
.mlist--tight .mrow__meta { margin: 0; }
.mlist--tight .mrow__team { font-size: 13.5px; }
.mlist--tight .mrow__score { font-size: 16px; }
.mlist--tight .mrow__status { font-size: 10px; }
.mlist--tight .mrow__foot { font-size: 11px; }


/* ---------- Пропускающие ближайший матч на странице команды ---------- */
.tsusp__count {
    display: inline-block; margin-left: 10px; padding: 1px 8px; border-radius: 20px;
    background: var(--panel-2); border: 1px solid var(--line);
    font-size: 12px; font-weight: 700; color: var(--muted-2);
}
.tsusp__row {
    display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px;
    padding: 11px 2px; border-bottom: 1px solid var(--line);
}
.tsusp__row:last-child { border-bottom: 0; }
.tsusp__name { font-weight: 600; font-size: 14px; }
.tsusp__reason {
    padding: 3px 9px; border-radius: 6px; font-size: 12px; font-weight: 600;
    background: rgba(242, 228, 0, .22); color: #6b5e00;
}
/* Удаление — краснее накопления жёлтых: разная тяжесть наказания */
.tsusp__reason.is-hard { background: rgba(239, 45, 40, .12); color: #a12420; }
.tsusp__match {
    margin-left: auto; display: inline-flex; align-items: center; gap: 8px;
    font-size: 12.5px; color: var(--muted-2);
}
a.tsusp__match:hover { color: var(--text); opacity: 1; }
.tsusp__date { color: var(--dim); font-size: 11.5px; }
.tsusp__empty { padding: 6px 2px 2px; color: var(--muted); font-size: 13.5px; }

@media (max-width: 760px) {
    /* Соперник переносится под имя: в строку с причиной он не помещается */
    .tsusp__match { margin-left: 0; }
}