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

/* ── Доска рынков (0:485) ───────────────────────────────────────────────
   На фрейме Sports шапка группы залита коралловым, а не кремовым, как на
   остальных страницах: 0:487 «sport-header» — bg #ff704d, border 1px #120e0d. */
.page-sports .league__head { background: var(--color-flame); }

/* 0:508 — невыбранная кнопка коэффициента: заливка #fffdf8 и тонкая светлая
   обводка 1.5px rgba(18,14,13,.149), а не сплошная чернильная. */
.page-sports .event__odds .odds {
  box-shadow: inset 0 0 0 1.5px var(--color-line-strong);
}

/* 0:511 — значение коэффициента в макете красное (#f20d2f). Берём
   --color-brand-text: тот же красный, затемнённый до 4.5:1 (14px/900 — это
   не крупный текст по WCAG). */
.page-sports .event__odds .odds__value { color: var(--color-brand-text); }

/* 0:502 — выбранная кнопка: заливка #f20d2f, обводка 1.5px #120e0d. */
.page-sports .event__odds .odds.is-picked {
  box-shadow: inset 0 0 0 1.5px var(--color-ink);
}
.page-sports .event__odds .odds.is-picked .odds__value { color: var(--color-surface); }

/* 0:512 — «+42 Markets →» в макете набран не капсом (Geist 800 13/16.9). */
.page-sports .event__more .link-arrow { text-transform: none; }

/* ── Купон (0:669) ──────────────────────────────────────────────────────
   На фрейме Sports карточка выбора набрана иначе, чем на главной. */

/* 0:677 — бейдж лиги кремовый с чернильным текстом, pad 2/6, r3 */
.page-sports .slip__pick-head .badge {
  padding: 2px 6px;
  background: var(--color-paper);
  color: var(--color-ink);
}

/* 0:679 — название события обычным начертанием, Geist 400 11/14.3 */
.page-sports .slip__event { font-weight: var(--fw-regular); }

/* 0:682 — «Market: …» здесь 12/15.6, а не 13/17 */
.page-sports .slip__market { font-size: var(--fs-label-xs); line-height: 16px; }

/* 0:685 — коэффициент в карточке выбора красный (#f20d2f → brand-text 4.5:1) */
.page-sports .slip__selection strong { color: var(--color-brand-text); }

/* 0:700 — ссылка на лимит депозита оранжевая #ff7900 (6.7:1 на #120e0d) */
.page-sports .slip__legal-link { color: var(--color-amber); }

/* ── Доска на мобильном фрейме (0:6318) ─────────────────────────────────
   Здесь дизайнер обвёл кнопки коэффициента иначе, чем на десктопе:
   0:6331 — border 1.5px #120e0d у обеих кнопок, а не светлая линия. */
@media (max-width: 767px) {
  .page-sports .event__odds .odds,
  .page-sports .event__odds .odds.is-picked {
    box-shadow: inset 0 0 0 1.5px var(--color-ink);
  }

  /* 17:324 — в мобильной кнопке галочки нет, только название */
  .page-sports .odds.is-picked .odds__name::before { content: none; }
}

/* ── Мобильный фрейм доски: числа из 0:6318 / 0:6319 ────────────────────── */
@media (max-width: 767px) {
  /* 17:319 — имя лиги лежит в красной плашке 42×19, pad 2/6, r3,
     Archivo Black 14/15.23 белым. На десктопе (0:489) плашки нет. */
  .page-sports .league__name {
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    background: var(--color-brand);
    color: var(--color-surface);
    font-size: var(--fs-label-sm);
    line-height: 15px;
  }

  /* 0:6320 — колонка времени: зазор 2, 14 + 12 + 16 = 46.
     Строка времени задана явно: десктопное правило .event__time лежит в
     pages.css ниже мобильного блока и перебивало его (16 вместо 14). */
  .page-sports .event__when { gap: 2px; }
  .page-sports .event__time { font-size: var(--fs-caption); line-height: 14px; }
  .page-sports .event__market-label { font-size: 9px; line-height: 12px; }
  .page-sports .event__market-name { font-size: var(--fs-label-xs); line-height: 16px; }

  /* 17:323 — верхняя строка: колонка времени 120, зазор 12, команды 194.
     Было `1fr auto` с зазором 16 — названия команд уезжали вправо на 47px. */
  .page-sports .event {
    grid-template-columns: 120px minmax(0, 1fr);
    column-gap: var(--space-6);
  }
  .page-sports .event__teams { text-align: left; }

  /* 0:6325 — названия команд 16/17.41, а не 14/19 */
  .page-sports .event__team { font-size: var(--fs-label); line-height: 17px; }

  /* 0:6329 — подпись на кнопке 10/13 */
  .page-sports .event__odds .odds__name { font-size: var(--fs-micro); line-height: 13px; }

  /* 0:6334 — ссылка на рынки прижата к правому краю, 12/15.6 */
  .page-sports .event__more { text-align: right; }
  .page-sports .event__more .link-arrow {
    font-size: var(--fs-label-xs);
    line-height: 16px;
  }
}

/* ── Водяной знак интро на мобильном (0:6279) ───────────────────────────
   Мобильные значения знака заданы в pages.css селектором .page-intro__watermark
   (0,1,0), а страничный .page-sports .page-intro__watermark (0,2,0) стоит вне
   медиазапроса и перебивал их: на 390 знак оставался 160px и уезжал на x120/y100.
   Числа из макета: 72/78.34, x 20, y 193 при hero y 123 → top 70. */
@media (max-width: 767px) {
  .page-sports .page-intro__watermark {
    --wm-size: 72px;
    --wm-left: 20px;
    /* 70 — координата бокса: y 193 при hero y 123. Сдвиг на +1 (компенсация
       разницы базовой линии hhea/win) полосу знака улучшает, но секцию в целом
       ухудшает — 6.03% против 6.47%, поэтому оставлено число макета. */
    --wm-top: 70px;
  }
}

/* ── Метка «18+ · Bet responsibly» (0:456 / 0:6285) ─────────────────────
   В макете это не плашка, а красный текст, вертикальная линейка нулевой
   ширины (1px × 12 при 30%) и подпись чернилами при 60%: 19 + 8 + 0 + 8 + 98
   = 133, ровно ширина фрейма. Красный взят как --color-brand-text: 11px
   не крупный текст, #f20d2f на #f4e2cf даёт 3.41:1 при норме 4.5:1. */
.page-sports .page-intro__age {
  font-weight: var(--fw-bold);
  color: var(--color-brand-text);
}

.page-sports .page-intro__mark-rule {
  position: relative;
  width: 0;
  height: 12px;
  flex: none;
}

.page-sports .page-intro__mark-rule::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 1px;
  background: var(--color-ink);
  opacity: .3;
}

/* 0:459 — подпись при 60% даёт 4.66:1 на кремовом, норма выполняется */
.page-sports .page-intro__mark-text { opacity: .6; }

/* 0:448 — водяной знак начинается на 20px ВЫШЕ секции (y 100 при page-intro
   y 120) и обрезается её краем; в pages.css туда попала абсолютная координата
   фрейма, из-за чего знак стоял на 120px ниже.
   Правило обязано жить в медиазапросе широкой ширины: без него оно стояло
   ниже мобильного блока с той же специфичностью (0,2,0) и перебивало
   --wm-top: 70px на 390 — знак уезжал под верхний край секции. */
@media (min-width: 768px) {
  .page-sports .page-intro__watermark { --wm-top: -20px; }
}

/* 0:6519 — на мобильном фрейме знак «CONTROL» набран в ДВЕ строки в боксе
   380×156 (72/78.34), x 14 при секции x 4 → left 10, y 2687 при секции 2677
   → top 10. Общее правило оставляло его одной строкой в nowrap, и он уезжал
   за экран почти вдвое. */
@media (max-width: 767px) {
  .page-sports .rg-section__watermark {
    top: 10px;
    left: 10px;
    /* На эталонном рендере слово разбито как «CONT» / «ROL», хотя в бокс
       380 влезает шесть знаков (CONTROL = 390.75px, знак ≈ 55.8px): Figma
       ломает переполненное слово раньше края. Ширину ставим по месту
       реального переноса макета, а не по числу бокса, иначе первая строка
       набирается «CONTRO» и знак читается иначе. */
    width: 240px;
    line-height: 78px;
    white-space: normal;
    word-break: break-all;
  }
}

/* ── Купон на мобильном фрейме Sports (0:6589) ────────────────────────────
   Мобильный фрейм рисует купон иначе, чем десктопный: карточка выбора там
   ТЁМНАЯ (#1e1918) с кремовым текстом и коралловым коэффициентом, название
   события стоит отдельной строкой под бейджем, сумма возврата набрана
   кремовым, а кнопка — таблетка. У нас на 390 действовали десктопные числа:
   белая карточка, чернильный текст, зелёный возврат — расхождение 27.21%. */
@media (max-width: 767px) {
  /* 0:6596 — карточка выбора: паддинг 12, зазор 12, радиус 8 */
  .page-sports .slip--board .slip__pick {
    gap: var(--space-6);
    padding: var(--space-6);
    border-radius: var(--radius-lg);
    background: #1e1918;
    color: var(--color-surface);
  }

  /* 0:6597 — в верхней строке только бейдж лиги и «Remove ×»,
     а название события уходит строкой ниже (0:6602). */
  .page-sports .slip--board .slip__pick-head {
    flex-wrap: wrap;
    gap: 0 var(--space-4);
    min-height: 16px;
  }

  .page-sports .slip--board .slip__pick-head .badge {
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    background: var(--color-brand);
    color: var(--color-surface);
    font-size: 9px;
    line-height: 12px;
  }

  /* 0:6602 — событие Archivo Black 14/15.23 кремовым, во всю ширину */
  .page-sports .slip--board .slip__event {
    order: 3;
    width: 100%;
    margin-top: var(--space-6);
    font-family: var(--font-display);
    font-weight: var(--fw-regular);
    font-size: 14px;
    line-height: 15px;
    color: var(--color-surface);
  }

  /* 0:6603 — рынок 12/15.6 кремовым при 0.7; 0:6605 — выбор Geist 800 14/18.2,
     0:6606 — коэффициент Archivo Black 16/17.41 коралловым */
  .page-sports .slip--board .slip__market { color: var(--color-paper); opacity: .7; }
  .page-sports .slip--board .slip__selection {
    font-family: var(--font-body);
    font-weight: var(--fw-extrabold);
    font-size: 14px;
    line-height: 18px;
    color: var(--color-paper);
  }
  .page-sports .slip--board .slip__selection strong {
    font-family: var(--font-display);
    font-weight: var(--fw-regular);
    font-size: 16px;
    line-height: 17px;
    color: var(--color-flame);
  }

  /* 0:6609 — поле ставки белое с радиусом 8; 0:6615 — возврат кремовый */
  .page-sports .slip--board .slip__stake-control { border-radius: var(--radius-lg); background: var(--color-white); }
  .page-sports .slip--board .slip__return-value {
    font-family: var(--font-display);
    font-size: 18px;
    line-height: 20px;
    color: var(--color-surface);
  }

  /* 0:6616 — кнопка-таблетка, надпись Archivo Black 14/15.23 */
  .page-sports .slip--board .slip__place {
    border-radius: var(--radius-pill);
    font-family: var(--font-display);
    font-weight: var(--fw-regular);
    font-size: 14px;
    line-height: 15px;
  }

  /* 0:6618 — сноска по центру: 10/13 при 0.5 и ссылка 11/14.3 */
  .page-sports .slip--board .slip__legal { align-items: center; text-align: center; }
  .page-sports .slip--board .slip__legal-line { font-size: 10px; line-height: 13px; opacity: .5; }
}