/* ========================================
   CHALLENGE BATTLE PAGE STYLES (ch- prefix)
   ======================================== */

/* === ШАПКА: постер фоном, заголовок поверх ===
   Раньше постер висел отдельным прямоугольником посреди пустоты и ничего
   не держал. Теперь он фон шапки, как на страницах разделов; нет постера —
   остаётся ровный тёмный фон, вёрстка не рассыпается */
.ch-hero {
    position: relative;
    z-index: 0;
    /* Пол обложки — общий токен, тот же, что у десяти других разделов. */
    min-height: var(--oblozhka-pol);
    display: flex;
    align-items: flex-end;
    padding: var(--section-y) var(--pad-x) var(--section-y-sm);
    overflow: hidden;
    background: linear-gradient(135deg, rgba(10,10,10,0.95) 0%, rgba(20,20,20,0.9) 100%);
    border-bottom: var(--bw-hair) solid var(--border);
}

.ch-hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.ch-hero-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ch-hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(to top, var(--alpha-black-85) 0%, var(--alpha-black-50) 55%, var(--alpha-black-50) 100%);
}

.ch-hero-inner {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
}

.ch-hero-kicker {
    display: inline-block;
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 10px;
}

.ch-hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 24px;
    color: var(--text-secondary);
    font-size: var(--fs-base);
}

.ch-hero-meta b {
    color: var(--text-primary);
    font-weight: 600;
}

/* === СОПЕРНИКИ === */
.ch-duel {
    padding: var(--section-y-sm) var(--pad-x);
    border-bottom: var(--bw-hair) solid var(--border);
}

/* Слева соперники, справа два блока — страница перестала быть втрое
   длиннее нужного. Колонки одной высоты: карточка игроков растягивается
   под правую, а не оставляет под собой пустоту */
.ch-duel-grid {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 24px;
    align-items: stretch;
    max-width: var(--container-max);
    margin: 0 auto;
}

.ch-players {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    border: var(--bw-hair) solid var(--border-subtle);
    border-radius: var(--radius-lg);
    background: var(--bg-card);
    padding: 22px;
}

/* Сноска под карточками игроков: объясняет, что за счёт под именами */
.ch-stats-note {
    margin-top: 14px;
    padding-top: 12px;
    border-top: var(--bw-hair) solid var(--border-subtle);
    font-size: var(--fs-xs);
    line-height: var(--lh-normal);
    /* Контраст 3.21 при норме 4.5 — мерено по фактической краске 13.10 */
    color: var(--text-muted);
    text-align: center;
}

.ch-aside {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

/* Блоки внутри колонки — обычные коробки, без своих отступов секции.
   Сбрасываем и margin с max-width: у любой section на сайте стоит
   «margin: 0 auto», а автоматическое поле по поперечной оси отменяет
   растяжение — история встреч сжималась по содержимому и была уже
   результата над ней */
.ch-aside > section {
    padding: 0;
    border: none;
    background: none;
    margin: 0;
    max-width: none;
    width: 100%;
}

/* Блоки занимают столько, сколько нужно содержимому, а низ колонки
   добирает последний. Раньше высота делилась поровну — и голосование,
   если в нём пара, переставало помещаться.
   
   Прокрутка бралась не отсюда: в общих стилях у любой section стоит
   overflow-x: hidden, а по правилам вёрстки это делает вторую ось не
   «видимой», а «авто». Обрезанный по высоте блок получал полосу
   прокрутки сам собой. Возвращаем обе оси видимыми */
.ch-aside > section {
    flex: 0 0 auto;
    display: flex;
    overflow: visible;
}

.ch-aside > section:last-child {
    flex: 1 1 auto;
}

.ch-aside > section > div {
    flex: 1;
}

.ch-aside .ch-voting-inner,
.ch-aside .ch-forecast-inner,
.ch-aside .ch-score-inner,
.ch-aside .ch-h2h-box {
    max-width: none;
    margin: 0;
}

/* Домашняя граница вместо своей 900: точек останова на сайте две. */
@media (max-width: 992px) {
    .ch-duel-grid {
        grid-template-columns: 1fr;
    }
}

/* === ЧТО ГОВОРЯТ ЧИСЛА === */
.ch-forecast-sec {
    padding: var(--section-y-sm) var(--pad-x);
    border-bottom: var(--bw-hair) solid var(--border);
}

.ch-forecast-inner {
    max-width: 700px;
    margin: 0 auto;
}

.ch-battle-title {
    /* 40 / 32 / 26 из `--fs-hero`: тот же clamp давал 50 / 45 / 37, то есть
       три кегля мимо девятиступенчатой шкалы (замер 13.10). */
    font-size: var(--fs-hero);
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: 14px;
    line-height: var(--lh-tight);
}

.ch-vs-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-lg);
    margin-bottom: var(--space-lg);
}

.ch-player-card {
    flex: 1;
    max-width: 300px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-sm);
}

.ch-player-photo {
    width: 120px;
    height: 160px;
    border-radius: var(--radius-lg);
    object-fit: cover;
    border: var(--bw-thick) solid var(--border);
    background: var(--bg-secondary);
    transition: border-color 0.3s;
}

/* Та же заглушка на месте портрета 120 × 160: прямоугольник, а не круг,
   поэтому скругление берётся у фотографии, а не у кружка. */
.ch-player-photo.avatar-initials {
    border-radius: var(--radius-lg);
    font-size: var(--fs-3xl);
}
.ch-player-card:hover .ch-player-photo {
    border-color: var(--accent);
}

.ch-player-name {
    font-size: var(--fs-lg);
    font-weight: 700;
    color: var(--text-primary);
    text-align: center;
}

.ch-player-cat {
    font-size: var(--fs-xs);
    color: var(--accent);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.ch-player-ntrp {
    font-size: var(--fs-xs);
    color: var(--text-secondary);
    font-weight: 500;
    margin-top: 2px;
}

.ch-player-stats {
    display: flex;
    gap: var(--space-md);
    font-size: var(--fs-sm);
    color: var(--text-secondary);
}
.ch-stat-w { color: var(--success); }
.ch-stat-l { color: var(--danger); }

/* VS divider */
.ch-vs-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ch-vs-text {
    /* ПЕРЕБИВКА СТРОГО МЕЛЬЧЕ ЗАГОЛОВКА НА КАЖДОМ ВИДЕ. Было 40 при
       заголовке 37 на 844 и 26 при 21 на 390 — самым крупным на экране
       оказывалось слово VS, а не имя баттла. */
    font-size: var(--fs-2xl);
    font-weight: 900;
    color: var(--accent);
    text-shadow: 0 0 20px var(--alpha-lime-50), 0 0 40px var(--alpha-lime-20);
    letter-spacing: 2px;
}

/* Meta info (date, time, venue) */
.ch-meta {
    display: flex;
    justify-content: center;
    gap: var(--space-lg);
    flex-wrap: wrap;
    color: var(--text-secondary);
    font-size: var(--fs-base);
}
.ch-map-link {
    color: var(--accent);
    text-decoration: none;
    font-size: var(--fs-xs);
    font-weight: 600;
    transition: opacity 0.2s;
    white-space: nowrap;
}
.ch-map-link:hover {
    opacity: 0.7;
    text-decoration: underline;
}

/* === VOTING SECTION === */
.ch-voting {
    padding: var(--section-y) var(--pad-x);
    border-bottom: var(--bw-hair) solid var(--border);
}

.ch-voting-inner {
    max-width: 700px;
    margin: 0 auto;
    text-align: center;
}

.ch-voting-title {
    font-size: var(--fs-lg);
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: var(--space-md);
}

/* Подпись под заголовком голосования: объясняет, что имена ниже — это
   кнопки, а не просто список */
.ch-voting-hint {
    text-align: center;
    font-size: var(--fs-sm);
    color: var(--text-muted);
    margin-bottom: 12px;
}

.ch-voting-bar {
    display: flex;
    height: 40px;
    border-radius: var(--radius-md);
    overflow: hidden;
    margin-bottom: var(--space-md);
    background: var(--bg-tertiary);
}

.ch-bar-left {
    background: var(--player-1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fs-sm);
    font-weight: 700;
    color: var(--neutral-white);
    transition: width 0.5s ease;
    min-width: 0;
}
.ch-bar-right {
    background: var(--player-2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fs-sm);
    font-weight: 700;
    color: var(--neutral-white);
    transition: width 0.5s ease;
    min-width: 0;
}

/* ПОЧТИ ЧЁРНЫЙ, А НЕ БЕЛЫЙ. Компонент `Badge 27:53` говорит прямо:
   «Solid takes NEAR-BLACK text, not white. White on danger measures 3.34 and
   fails». У нас на красной половине полосы вышло 3.76 — замер 13.10. */
.ch-bar-left span, .ch-bar-right span {
    color: var(--neutral-950);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0 8px;
}

/* Пара на странице баттла.

   Здесь места хватает, поэтому обе карточки идут рядом, а не внахлёст, как
   на узких карточках: это главный экран баттла, сюда и приходят
   рассматривать. Ширина у всех четверых одинаковая — иначе длинная фамилия
   переносится на вторую строку и своя половина уезжает вверх. */
.ch-pair {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 12px;
}
.ch-pair-side {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-sm);
    width: 128px;
}
.ch-pair .ch-player-photo { width: 100px; height: 132px; }
.ch-pair .ch-player-name { font-size: var(--fs-base); line-height: var(--lh-snug); min-height: 2.4em; }
.ch-pair-plus {
    color: var(--text-muted);
    font-size: var(--fs-lg);
    font-weight: 700;
    margin-top: 56px;
}

/* Счёт в парах вместо побед и поражений: рейтинговые одиночные числа рядом
   с парным матчем ничего не значат */
.ch-pair-record { font-size: var(--fs-xs); color: var(--info); font-weight: 600; }

/* Прогноз по числам.

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

   Цвет приглушённый, синий: это справка, а не событие. Голосование остаётся
   главным на экране — туда человек пришёл нажимать. */
.ch-forecast {
    max-width: 620px;
    margin: 0 auto var(--space-lg);
    padding: 14px 16px;
    border: var(--bw-hair) solid var(--border-subtle);
    border-radius: var(--radius-lg);
    background: var(--alpha-white-04);
}

.ch-forecast-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.ch-forecast-title {
    font-size: var(--fs-sm);
    font-weight: 700;
    color: var(--text-primary);
}

.ch-forecast-hint {
    font-size: var(--fs-xs);
    color: var(--text-muted);
}

.ch-forecast-names {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: var(--fs-xs);
    color: var(--text-secondary);
    margin-bottom: 6px;
}

.ch-forecast-bar {
    display: flex;
    height: 22px;
    border-radius: var(--radius-full);
    overflow: hidden;
    background: var(--alpha-white-04);
}

.ch-forecast-bar i {
    display: flex;
    align-items: center;
    font-style: normal;
    /* Полоса выезжает, когда попадает на экран */
    transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.ch-forecast-bar b {
    font-size: var(--fs-xs);
    font-weight: 800;
    padding: 0 8px;
    white-space: nowrap;
}

.ch-forecast-left  { background: rgba(96,165,250,0.28); justify-content: flex-start; color: #bfdbfe; }
.ch-forecast-right { background: rgba(148,163,184,0.22); justify-content: flex-end;  color: #cbd5e1; }

/* Кнопки голосования одинаковой ширины.

   Ширина шла от длины имени: «Жаныбеков» давал кнопку заметно шире, чем
   «Хан», и вёрстка молча делала ставку за зрителя — крупнее значит главнее.
   Ставим равные доли, чтобы обе стороны выглядели одинаково. */
.ch-vote-buttons {
    display: flex;
    justify-content: center;
    gap: var(--space-md);
    margin-bottom: var(--space-md);
    max-width: 620px;
    margin-left: auto;
    margin-right: auto;
}

.ch-vote-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 16px 28px;
    border-radius: var(--radius-lg);
    border: var(--bw-thick) solid rgba(255,255,255,0.15);
    background: var(--alpha-white-08);
    color: var(--text-primary);
    font-size: var(--fs-base);
    font-weight: 700;
    cursor: pointer;
    transition: all 0.25s;
    flex: 1 1 0;
    min-width: 0;
    position: relative;
}
.ch-vote-btn .ch-vote-name {
    font-size: var(--fs-base);
    font-weight: 700;
    /* Был `normal` — то есть межстрочный не задан вовсе, его решал шрифт. */
    line-height: var(--lh-tight);
}
.ch-vote-btn .ch-vote-count {
    font-size: var(--fs-xs);
    font-weight: 400;
    line-height: var(--lh-tight);
    /* 3.14 на подложке кнопки — мерено 13.10 */
    color: var(--text-muted);
}
.ch-vote-btn .ch-vote-cta {
    font-size: var(--fs-2xs);
    font-weight: 600;
    line-height: var(--lh-tight);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--accent);
    opacity: 0.7;
    transition: opacity 0.2s;
}
.ch-vote-btn:hover:not(.disabled) {
    transform: translateY(-2px);
}

/* Каждая сторона светится своим цветом — тем же, каким она идёт в полосе
   голосования и на странице баттлов. Раньше обе подсвечивались лаймом,
   и было не видно, за кого голосуешь */
.ch-vote-btn.ch-vote-p1:hover:not(.disabled) {
    border-color: var(--player-1);
    background: rgba(79, 195, 247, 0.12);
    box-shadow: 0 4px 16px rgba(79, 195, 247, 0.18);
}

.ch-vote-btn.ch-vote-p2:hover:not(.disabled) {
    border-color: var(--player-2);
    background: rgba(208, 80, 247, 0.12);
    box-shadow: 0 4px 16px rgba(208, 80, 247, 0.18);
}
.ch-vote-btn:hover:not(.disabled) .ch-vote-cta {
    opacity: 1;
}
.ch-vote-btn:not(.disabled):not(.selected) {
    animation: ch-vote-pulse 2.5s ease-in-out infinite;
}
@keyframes ch-vote-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(204, 255, 0, 0); }
    50% { box-shadow: 0 0 0 6px var(--alpha-lime-06); }
}
.ch-vote-btn:active:not(.disabled) {
    transform: scale(0.96);
}
.ch-vote-btn.selected {
    border-color: var(--accent);
    background: var(--alpha-lime-20);
    color: var(--accent);
    box-shadow: 0 0 12px var(--alpha-lime-20);
    font-weight: 600;
    animation: none;
}
.ch-vote-btn.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    animation: none;
}

/* Галочка выбранной стороны — в углу кнопки, а не в общем ряду.
   В потоке она добавляла строку, и имя на выбранной карточке уезжало
   вниз: две кнопки рядом переставали совпадать по высоте строк */
.ch-vote-check {
    position: absolute;
    top: 8px;
    right: 10px;
    color: var(--accent);
    font-size: var(--fs-base);
    font-weight: 700;
    line-height: var(--lh-none);
}

.ch-voted-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    padding: 8px 16px;
    background: var(--alpha-lime-12);
    border: var(--bw-hair) solid var(--accent-glow);
    border-radius: 20px;
    color: var(--accent);
    font-size: var(--fs-sm);
    font-weight: 500;
}
.ch-tg-icon {
    vertical-align: -2px;
    opacity: 0.85;
}

.ch-vote-toast {
    color: var(--accent);
    margin-top: 8px;
    font-size: var(--fs-sm);
    animation: chFadeIn 0.3s ease;
}
@keyframes chFadeIn {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

.ch-vote-dot-red { color: var(--player-1); }
.ch-vote-dot-blue { color: var(--player-2); }

.ch-voting-total {
    font-size: var(--fs-sm);
    color: var(--text-secondary);
}

.ch-voting-login {
    font-size: var(--fs-sm);
    color: var(--text-secondary);
    margin-top: var(--space-sm);
}
.ch-voting-login a {
    color: var(--accent);
    text-decoration: underline;
}

.ch-voting-closed-badge {
    display: inline-block;
    padding: 4px 12px;
    background: rgba(248, 113, 113, 0.15);
    border: var(--bw-hair) solid rgba(248, 113, 113, 0.3);
    border-radius: var(--radius-sm);
    color: var(--danger);
    font-size: var(--fs-sm);
    font-weight: 600;
    margin-top: var(--space-sm);
}
.ch-voting-until {
    color: var(--text-secondary, var(--alpha-white-50));
    font-size: var(--fs-xs);
    margin-top: var(--space-sm);
}

/* === DETAILS SECTION === */
.ch-details {
    padding: var(--section-y-sm) var(--pad-x);
    border-bottom: var(--bw-hair) solid var(--border);
}

/* По той же сетке, что соперники выше: раньше блок центрировался в
   семистах пикселях и его левый край не совпадал ни с чем на странице */
.ch-details-inner {
    max-width: var(--container-max);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.ch-details-title {
    font-size: var(--fs-md);
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0;
}

.ch-detail-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: var(--space-sm) var(--space-md);
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    border: var(--bw-hair) solid var(--border);
}
.ch-detail-icon {
    font-size: var(--fs-lg);
    flex-shrink: 0;
}
.ch-detail-label {
    font-size: var(--fs-xs);
    color: var(--text-secondary);
}
.ch-detail-value {
    font-size: var(--fs-base);
    color: var(--text-primary);
    font-weight: 600;
}

/* Venue block */
.ch-detail-venue {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}
.ch-detail-venue .ch-detail-item {
    margin-bottom: 0;
}

/* Map links */
.ch-detail-map-links {
    display: flex;
    gap: 12px;
    padding: 0 var(--space-md);
}

/* Map embed */
.ch-detail-map {
    border-radius: 12px;
    overflow: hidden;
    border: var(--bw-hair) solid var(--border);
}
.ch-detail-map iframe {
    width: 100%;
    height: 300px;
    border: 0;
    display: block;
}

/* === ИСТОРИЯ ВСТРЕЧ ===
   Живёт под карточками игроков, а не отдельной секцией внизу: она нужна
   ровно там, где смотришь на соперников. Показываем три последних,
   остальные — по кнопке */
.ch-h2h-box {
    margin-top: var(--space-md);
    border: var(--bw-hair) solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: 14px 18px;
    background: var(--surface-glass);
}

.ch-h2h-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 10px;
}

.ch-h2h-title {
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--text-muted);
}

.ch-h2h-count {
    font-size: var(--fs-md);
    font-weight: 800;
    color: var(--text-secondary);
}

.ch-h2h-count b {
    color: var(--accent);
}

.ch-h2h-list {
    display: flex;
    flex-direction: column;
    /* Нажали «ещё встречи» — список прокручивается внутри, а колонка
       остаётся той же высоты и не разъезжается с соседней */
    max-height: 168px;
    overflow-y: auto;
}

.ch-h2h-match {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 0;
    border-top: var(--bw-hair) solid var(--border-subtle);
    font-size: var(--fs-sm);
    color: var(--text-secondary);
}

.ch-h2h-match:first-child {
    border-top: none;
}

.ch-h2h-hidden {
    display: none;
}

.ch-h2h-date {
    min-width: 90px;
}

.ch-h2h-duel {
    color: var(--accent);
    font-size: var(--fs-xs);
}

.ch-h2h-score-text {
    font-weight: 700;
    color: var(--text-primary);
}

.ch-h2h-winner {
    color: var(--accent);
    font-weight: 600;
    min-width: 100px;
    text-align: right;
}

.ch-h2h-more {
    margin-top: 10px;
    background: transparent;
    border: none;
    padding: 0;
    color: var(--accent);
    font-family: var(--font-sans);
    font-size: var(--fs-sm);
    font-weight: 600;
    cursor: pointer;
}

.ch-h2h-more:hover {
    text-decoration: underline;
}

/* === РЕЗУЛЬТАТ ===
   Стоит сразу под шапкой, когда матч сыгран: это первое, за чем приходят
   на страницу отыгранного баттла. Раньше лежал в самом низу, под картой */
.ch-score {
    padding: var(--section-y-sm) var(--pad-x);
    border-bottom: var(--bw-hair) solid var(--border);
}

.ch-score-inner {
    max-width: 700px;
    margin: 0 auto;
    text-align: center;
    border: var(--bw-hair) solid var(--accent-glow);
    background: var(--alpha-lime-06);
    border-radius: var(--radius-lg);
    padding: 22px;
}

.ch-score-title {
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 10px;
}

.ch-score-display {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-md);
    margin-bottom: 12px;
}

.ch-score-player {
    font-size: var(--fs-md);
    font-weight: 600;
    color: var(--text-primary);
    min-width: 120px;
}
.ch-score-player.winner {
    color: var(--accent);
}

.ch-score-sets {
    display: flex;
    gap: var(--space-sm);
}

.ch-score-set {
    padding: 6px 12px;
    background: var(--bg-tertiary);
    border-radius: var(--radius-sm);
    font-size: var(--fs-md);
    font-weight: 700;
    color: var(--text-primary);
    white-space: nowrap;
}

.ch-winner-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 20px;
    background: var(--alpha-lime-12);
    border: var(--bw-hair) solid var(--accent-glow);
    border-radius: var(--radius-md);
    color: var(--accent);
    font-size: var(--fs-base);
    font-weight: 700;
    margin-bottom: var(--space-md);
}

.ch-prediction-result {
    font-size: var(--fs-base);
    color: var(--text-secondary);
    padding: var(--space-sm) var(--space-md);
    background: var(--bg-secondary);
    border-radius: var(--radius-sm);
    border: var(--bw-hair) solid var(--border);
    display: inline-block;
}
.ch-prediction-result strong {
    color: var(--accent);
}

/* === NOT FOUND === */
.ch-not-found {
    text-align: center;
    padding: var(--section-y) var(--pad-x);
    color: var(--text-secondary);
}
.ch-not-found h2 {
    font-size: var(--fs-xl);
    color: var(--text-primary);
    margin-bottom: var(--space-sm);
}

/* === LOADING === */
.ch-loading {
    text-align: center;
    padding: var(--section-y) var(--pad-x);
    color: var(--text-secondary);
    font-size: var(--fs-base);
}

/* === RESPONSIVE ===
   ГРАНИЦ ДВЕ: 992 и 640. Было три своих — 900, 768 и 480. Кегли заголовка
   и перебивки ступают сами, из токенов, и в медиа больше не повторяются. */
@media (max-width: 992px) {
    .ch-hero { padding: var(--section-y) var(--pad-x) var(--section-y-sm); }
    .ch-vs-text { font-size: var(--fs-xl); }
    .ch-player-photo { width: 100px; height: 130px; }
    .ch-player-name { font-size: var(--fs-md); }
    .ch-meta { flex-direction: column; align-items: center; gap: var(--space-sm); }
    .ch-voting { padding: var(--section-y-sm) var(--pad-x); }
    .ch-vote-buttons { flex-direction: column; align-items: center; }
    .ch-vote-btn { width: 100%; max-width: 300px; }
    .ch-details { padding: var(--section-y-sm) var(--pad-x); }
    .ch-duel { padding: var(--space-md) var(--pad-x); }
    .ch-score { padding: var(--section-y-sm) var(--pad-x); }
    .ch-score-display { flex-direction: column; gap: var(--space-sm); }
    .ch-score-player { min-width: auto; }
}

/* ═══ СОПЕРНИКИ НА ТЕЛЕФОНЕ — ДВА СТОЛБЦА, А НЕ ЛЕНТА ════════════════════
   Блок разворачивался в колонку, и «кто с кем» растягивалось на 927 при
   экране 844: снимок 100×132, имя в три строки, категория, NTRP, победы и
   поражения каждое своей строкой. Костя 13.10: «какие они удлинённые».
   Две стороны рядом — так устроен заголовок матча у ATP и ESPN: сравнение
   читается взглядом, а не прокруткой. Замер после правки: 422 вместо 927,
   сторона 138 шириной, имя ложится в две строки, перелива нет. */
@media (max-width: 640px) {
    .ch-hero { padding: var(--space-md) var(--pad-x); }
    /* Заголовок на телефоне 26, значит перебивка 21: ОТНОШЕНИЕ держится на
       каждом виде, а не только на широких. Замер 13.10 после правки поймал
       ровно это: на 390 оба стояли 26. */
    .ch-vs-text { font-size: var(--fs-lg); }

    .ch-vs-container {
        flex-direction: row;
        align-items: flex-start;
        gap: 8px;
    }
    .ch-player-card { max-width: none; min-width: 0; }
    .ch-players { padding: 16px; }
    .ch-player-photo { width: 72px; height: 96px; }
    /* У пары свой снимок, и правило выше до него не доставало: селектор
       `.ch-pair .ch-player-photo` весит больше. Замер 13.10: на 390 пара
       держала 100×132, пока одиночный уже сжимался до 80×110. */
    .ch-pair .ch-player-photo { width: 72px; height: 96px; }
    .ch-player-name { font-size: var(--fs-sm); line-height: var(--lh-snug); }
    .ch-player-cat, .ch-player-ntrp { font-size: var(--fs-2xs); }
    .ch-player-stats { flex-direction: row; gap: 8px; font-size: var(--fs-xs); }
    .ch-vs-divider { align-self: center; }

    .ch-h2h-match { flex-direction: column; gap: 4px; text-align: center; }
    .ch-h2h-winner { text-align: center; min-width: auto; }
}

                                                                           
                                                                      
                                                    
.ch-vote-btn:focus-visible,
.ch-map-link:focus-visible,
.ch-h2h-more:focus-visible{
    outline: var(--bw-heavy) solid var(--accent);
    outline-offset: 2px;
    border-radius: var(--radius-md);
}

/* Слой цели у ссылок карт: сами они живут в строке меты, коробка 15. */
.ch-map-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-height: var(--btn-h-sm);
}
.ch-map-link::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: var(--btn-h-md);
    transform: translateY(-50%);
}
.ch-h2h-more {
    min-height: var(--btn-h-sm);
}
@media (max-width: 640px) {
    .ch-map-link,
    .ch-h2h-more { min-height: var(--btn-h-md); }
}

/* Крошка текущего раздела: была атрибутом style в js. */
.kslt-back-here {
    color: var(--text-muted);
    cursor: default;
}



/* ═══ НИЗКИЙ ГОРИЗОНТАЛЬНЫЙ: ПАРА ЕДЕТ ОДНОЙ ГРАНИЦЕЙ ═══════════════════
   ЧТО СЛОМАЛОСЬ И КТО СЛОМАЛ. 31.10 я опустил `--fs-hero` до 26 на этом
   виде (`css/tokens.css:883`, слово Кости «делай») — ради одной высоты
   обложки раздела. Заголовок баттла читает ту же крутилку
   (`challenge-detail.css:185`), а перебивка VS осталась на ступени ≤992,
   то есть тоже 26. Полный прогон 01.11 поймал ровно это: «перебивка не
   мельче заголовка: заголовок 26, VS 26, имя 18».

   ПАРА, КОТОРАЯ ЧИТАЕТСЯ КАК ПАРА, ЕДЕТ ОДНОЙ ГРАНИЦЕЙ — а я увёз одну
   половину. Отношение «перебивка строго мельче заголовка» заморожено
   13.10 и держится на КАЖДОМ виде, а не только на широких.

   ЧИСЛО НЕ НОВОЕ: 21 — это ровно та ступень, которую пара занимает на
   ≤640 при заголовке 26 (`:970`, решение 13.10). Здесь она доводится до
   вида, у которого своей записи не было.

   ГРАНИЦ ПО ШИРИНЕ НЕ ДОБАВЛЯЕТСЯ: здесь поворот и высота, тот же порог
   500, что у обложки и у полноэкранного живого матча. */
@media (max-height: 500px) and (orientation: landscape) {
    .ch-vs-text { font-size: var(--fs-lg); }
}