/* VSE MATCHI — страница матча. Токены и компоненты один в один с макетом
   design_handoff_apl_live (Match.dc.html). Радиусы 4px, теней нет — глубина
   строится рамками и хайрлайнами. */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;600&family=Lora:wght@400;600&display=swap');

:root {
  --bg: #141312;
  --surface: #1c1a18;
  --fg: #f3f2f2;
  --muted: #a7a19a;
  --line: rgba(243, 242, 242, 0.16);
  --gold: #e1ad66;
  --goldsoft: rgba(225, 173, 102, 0.22);
  --font-heading: "Cormorant Garamond", Georgia, serif;
  --font-body: "Lora", Georgia, serif;
  --wrap: 1320px;
}

body[data-theme="light"] {
  --bg: #f3f2f2;
  --surface: #eae9e9;
  --fg: #201f1d;
  --muted: #605d5d;
  --line: rgba(32, 31, 29, 0.18);
  --gold: #b68235;
  --goldsoft: rgba(182, 130, 53, 0.28);
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--fg);
  font: 400 15px/1.55 var(--font-body);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: 400; margin: 0; letter-spacing: -0.015em; }
p { margin: 0 0 13.8px; }
a { color: var(--gold); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
img { display: block; max-width: 100%; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
::selection { background: var(--goldsoft); }

.num { font-variant-numeric: tabular-nums; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 32px; }
.caps {
  font: 400 11px/1 var(--font-body);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
}
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

@keyframes livepulse { 0%, 100% { opacity: 1 } 50% { opacity: 0.25 } }

/* ───────────────────────────── шапка ───────────────────────────── */

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--bg); border-bottom: 1px solid var(--line);
}
.site-header__inner {
  max-width: var(--wrap); margin: 0 auto; padding: 0 32px;
  height: 74px; display: flex; align-items: center; gap: 44px;
}
.brand { display: flex; align-items: baseline; gap: 9px; color: var(--fg); }
.brand:hover { text-decoration: none; }
.brand__mono { width: 34px; height: 34px; align-self: center; margin-right: 2px; border-radius: 5px; }
.brand__mark { font: 400 27px/1 var(--font-heading); letter-spacing: 0.01em; }
.brand__live {
  font: 400 11px/1 var(--font-body); letter-spacing: 0.3em;
  text-transform: uppercase; color: var(--gold);
}
.mainnav { display: flex; align-items: center; gap: 30px; flex: 1; }
.mainnav__item { display: flex; flex-direction: column; gap: 7px; }
.mainnav__item a { font: 400 14px/1 var(--font-body); color: var(--fg); }
.mainnav__item a:hover { color: var(--gold); text-decoration: none; }
.mainnav__item[aria-current="page"] a { color: var(--fg); }
.mainnav__underline { height: 1px; background: var(--gold); }
.header-tools { display: flex; align-items: center; gap: 14px; }
.searchbox {
  display: flex; align-items: center; height: 36px; padding: 0 14px;
  border: 1px solid var(--line); border-radius: 4px;
  background: transparent; color: var(--fg);
  font: 400 13px/1 var(--font-body); min-width: 190px;
}
.searchbox::placeholder { color: var(--muted); }
.searchbox:hover { border-color: var(--gold); }
.btn-ghost {
  height: 36px; padding: 0 14px; border: 1px solid var(--line); border-radius: 4px;
  background: transparent; color: var(--fg);
  font: 400 12px/1 var(--font-body); letter-spacing: 0.06em; cursor: pointer;
}
.btn-ghost:hover { border-color: var(--gold); color: var(--gold); }
.btn-gold {
  display: inline-flex; align-items: center; height: 36px; padding: 0 18px;
  border: 1px solid var(--gold); border-radius: 4px; color: var(--gold);
  font: 600 14px/1 var(--font-heading);
}
.btn-gold:hover { background: var(--goldsoft); text-decoration: none; }

/* ─────────────────────────── реклама ──────────────────────────── */

.adslot {
  position: relative; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 6px;
  width: 100%; min-height: 74px; padding: 14px;
  border: 1px solid var(--line); border-radius: 4px;
  background: repeating-linear-gradient(135deg, var(--goldsoft) 0 1px, transparent 1px 13px);
}
.adslot::before {
  content: "Реклама"; position: absolute; top: 6px; left: 8px;
  font: 400 9px/1 var(--font-body); letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--muted); opacity: 0.7;
}
.adslot__label {
  font: 600 15px/1.2 var(--font-heading); letter-spacing: 0.02em;
  color: var(--gold); text-align: center;
}
.adslot__size { font: 400 11px/1.4 var(--font-body); color: var(--muted); font-variant-numeric: tabular-nums; }
.ad-top { padding-top: 20px; }
.ad-970 { height: 90px; }
.ad-728 { height: 90px; }
.ad-under-player { margin-top: 20px; }

/* — баннеры партнёра: вся площадь кликабельна — */
.ad {
  position: relative; display: block; overflow: hidden;
  border-radius: 4px; outline: 1px solid var(--line); outline-offset: -1px;
  transition: outline-color 0.15s ease;
}
.ad:hover { outline-color: var(--gold); text-decoration: none; }
.ad img { width: 100%; height: auto; display: block; }
.ad__mark {
  position: absolute; top: 0; left: 0;
  padding: 3px 8px 4px 7px;
  background: rgba(0, 0, 0, 0.42);
  border-bottom-right-radius: 4px;
  font: 400 8px/1 var(--font-body); letter-spacing: 0.18em;
  text-transform: uppercase; color: rgba(255, 255, 255, 0.7);
}
.ad--side img { border-radius: 4px; }

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

.matchbar { border-bottom: 1px solid var(--line); margin-top: 22px; }
.matchbar__inner { max-width: var(--wrap); margin: 0 auto; padding: 26px 32px 24px; }
.breadcrumbs { display: flex; align-items: center; gap: 12px; }
.breadcrumbs a { color: var(--muted); }
.breadcrumbs a:hover { color: var(--gold); }
.scoreline {
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center; gap: 28px; margin-top: 20px;
}
.team { display: flex; align-items: center; gap: 16px; }
.team--home { justify-content: flex-end; text-align: right; }
.team__name { font: 400 34px/1.05 var(--font-heading); letter-spacing: -0.015em; }
.team__meta { font: 400 12px/1 var(--font-body); color: var(--muted); margin-top: 6px; }
.crest {
  width: 54px; height: 54px; flex: none;
  border: 1px solid var(--line); border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  font: 600 14px/1 var(--font-heading); color: var(--muted);
  overflow: hidden;
}
.crest img { width: 100%; height: 100%; object-fit: contain; padding: 3px; }
.scorebox { text-align: center; }
.livebadge {
  display: inline-flex; align-items: center; gap: 7px; padding: 4px 10px;
  border: 1px solid var(--gold);
  font: 400 10px/1 var(--font-body); letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--gold);
}
.livebadge--idle { border-color: var(--line); color: var(--muted); }
.livebadge__dot {
  width: 5px; height: 5px; border-radius: 50%; background: var(--gold);
  animation: livepulse 1.7s infinite;
}
.livebadge--idle .livebadge__dot { background: var(--muted); animation: none; }
.scorebox__score { font: 400 62px/1 var(--font-heading); margin-top: 12px; }
.scorebox__meta { font: 400 12px/1.5 var(--font-body); color: var(--muted); margin-top: 10px; }

/* ─────────────────────────── сетка ────────────────────────────── */

.layout {
  max-width: var(--wrap); margin: 0 auto; padding: 30px 32px 72px;
  display: grid; grid-template-columns: minmax(0, 1fr) 300px;
  gap: 44px; align-items: start;
}
.col-main { display: flex; flex-direction: column; gap: 46px; min-width: 0; }
.sidebar { display: flex; flex-direction: column; gap: 36px; position: sticky; top: 96px; }

.section-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 20px;
  border-bottom: 1px solid var(--line); padding-bottom: 10px; margin-bottom: 24px;
}
.section-head h2, .section-head h3 { font: 400 26px/1 var(--font-heading); }
.sub { margin: 0 0 22px; font: 400 12px/1.5 var(--font-body); color: var(--muted); }

/* ────────────────────── заголовок страницы ────────────────────── */

.page-title { margin-bottom: 18px; }
.page-title h1 {
  font: 400 32px/1.15 var(--font-heading);
  margin-top: 9px; letter-spacing: -0.015em;
}
@media (max-width: 680px) {
  .page-title h1 { font-size: 24px; }
}

/* ─────────────────────────── плеер ────────────────────────────── */

.player-frame {
  position: relative; border: 6px solid var(--surface); outline: 1px solid var(--line);
  background: var(--surface);
}
.player-frame video, .player-frame iframe {
  display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; background: #000;
}
.player-holder {
  aspect-ratio: 16 / 9;
  background:
    repeating-linear-gradient(112deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 12px),
    var(--surface);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  text-align: center; padding: 20px;
}
.fallback-note {
  display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
  padding: 11px 14px; background: var(--surface);
  border-top: 1px solid var(--line);
}
.fallback-note__tag {
  font: 400 9px/1 var(--font-body); letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--gold);
}
.fallback-note__title { font: 400 13px/1.4 var(--font-body); color: var(--fg); flex: 1; min-width: 0; }
.fallback-note__src { font: 400 11px/1 var(--font-body); color: var(--muted); }

.player-holder__title {
  font: 400 11px/1 var(--font-body); letter-spacing: 0.26em;
  text-transform: uppercase; color: var(--muted);
}
.player-holder__hint { font: 400 12px/1.5 var(--font-body); color: var(--muted); opacity: 0.7; }
.chiprow {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; margin-top: 16px; flex-wrap: wrap;
}
.chipgroup { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.chipgroup__label {
  font: 400 10px/1 var(--font-body); letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--muted); margin-right: 4px;
}
.chip {
  padding: 7px 13px; border: 1px solid var(--line); border-radius: 4px;
  background: transparent; font: 400 12px/1 var(--font-body); color: var(--muted);
  cursor: pointer; font-variant-numeric: tabular-nums;
}
.chip:hover { border-color: var(--gold); color: var(--gold); }
.chip[aria-pressed="true"] { border-color: var(--gold); color: var(--gold); background: var(--goldsoft); }
.chip[disabled] { cursor: not-allowed; opacity: 0.5; }

/* ───────────────────────────── табы ───────────────────────────── */

.tabs { display: flex; gap: 26px; border-bottom: 1px solid var(--line); margin-bottom: 26px; flex-wrap: wrap; }
.tabs button {
  padding: 0 0 11px; border: 0; background: transparent; cursor: pointer;
  font: 400 15px/1 var(--font-body); color: var(--muted);
  border-bottom: 1px solid transparent; margin-bottom: -1px;
}
.tabs button:hover { color: var(--gold); }
.tabs button[aria-selected="true"] { color: var(--fg); border-bottom-color: var(--gold); }

/* ────────────────────── составы и расстановка ─────────────────── */

.lineups { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 28px; align-items: start; }
.pitch--empty { display:block; padding:34px 18px; text-align:center }
.pitch {
  border: 1px solid var(--line); border-radius: 4px; padding: 18px;
  background: repeating-linear-gradient(180deg, var(--goldsoft) 0 1px, transparent 1px 46px);
  display: flex; flex-direction: column; gap: 20px;
}
.pitch__side { display: flex; flex-direction: column; gap: 20px; }
.pitch__caption {
  display: flex; align-items: center; gap: 10px;
  font: 400 10px/1 var(--font-body); letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--muted);
}
.pitch__caption b { font: 600 11px/1 var(--font-heading); letter-spacing: 0.12em; color: var(--fg); }
.pitch__caption i {
  width: 8px; height: 8px; border-radius: 50%; flex: none;
  background: var(--club, var(--gold));
}
.pitch__halfway {
  height: 1px; background: var(--line); position: relative; margin: 6px 0;
}
.pitch__halfway::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 54px; height: 54px; transform: translate(-50%, -50%);
  border: 1px solid var(--line); border-radius: 50%;
}
.pitch__row { display: flex; justify-content: space-around; align-items: flex-start; gap: 4px; }
.pl { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 82px; }
.pl__n {
  width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid var(--gold); background: var(--bg);
  display: flex; align-items: center; justify-content: center;
  font: 400 13px/1 var(--font-body); color: var(--gold);
  font-variant-numeric: tabular-nums;
}
.pl--away .pl__n { border-color: var(--fg); color: var(--fg); }
.pl__name { font: 400 11px/1.2 var(--font-body); color: var(--fg); text-align: center; }
.pl__mark { color: var(--gold); }

.bench-col { display: flex; flex-direction: column; gap: 22px; }
.mini-head {
  border-bottom: 1px solid var(--line); padding-bottom: 8px; margin-bottom: 12px;
  font: 400 11px/1 var(--font-body); letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--muted);
}
.bench-row {
  display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 8px;
  padding: 8px 0; border-bottom: 1px solid var(--line);
  font: 400 13px/1.3 var(--font-body); font-variant-numeric: tabular-nums;
}
.bench-row span:first-child { color: var(--muted); }
.bench-row span:last-child { color: var(--muted); font-size: 11px; }

/* ───────────────────────── статистика ───────────────────────── */

.stats { display: flex; flex-direction: column; gap: 20px; }
.stat__top {
  display: flex; justify-content: space-between; align-items: baseline;
  font-variant-numeric: tabular-nums; gap: 12px;
}
.stat__val { font: 400 18px/1 var(--font-heading); }
.stat__label {
  font: 400 11px/1 var(--font-body); letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--muted); text-align: center;
}
.stat__bars { display: flex; gap: 4px; margin-top: 9px; height: 3px; }
.stat__track { flex: 1; background: var(--goldsoft); }
.stat__track--home { display: flex; justify-content: flex-end; }
.stat__fill-home { height: 100%; background: var(--gold); }
.stat__fill-away { height: 100%; background: var(--fg); opacity: 0.65; }

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

.odds { border: 1px solid var(--line); border-radius: 4px; padding: 24px 26px; }
.odds__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.odds__head h2 { font: 400 22px/1 var(--font-heading); }
.odds__grid {
  display: grid; grid-template-columns: minmax(0, 1fr) repeat(3, 92px) 132px;
  gap: 14px; align-items: center; font-variant-numeric: tabular-nums;
}
.odds__th { font: 400 11px/1 var(--font-body); letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.odds__th--c { text-align: center; letter-spacing: 0; text-transform: none; font-size: 11px; }
.odds__mark { font-size: 9px; }
.odds__book {
  display: flex; flex-direction: column; gap: 4px;
  border-top: 1px solid var(--line); padding-top: 14px;
}
.odds__book b { font: 600 18px/1.2 var(--font-heading); letter-spacing: 0.01em; }
.odds__book i {
  font: 400 11px/1.4 var(--font-body); font-style: normal; color: var(--muted);
}
.odds__val {
  display: flex; align-items: center; justify-content: center;
  text-align: center; font: 400 17px/1 var(--font-body); color: var(--gold);
  border-top: 1px solid var(--line); padding-top: 14px; min-height: 44px;
}
a.odds__val:hover { text-decoration: none; background: var(--goldsoft); }
.odds__cta { border-top: 1px solid var(--line); padding-top: 8px; }
.odds__cta a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 100%; height: 36px; border: 1px solid var(--gold); border-radius: 4px;
  font: 600 13px/1 var(--font-heading);
}
.odds__cta a:hover { background: var(--goldsoft); text-decoration: none; }
.disclaimer { margin: 16px 0 0; font: 400 11px/1.5 var(--font-body); color: var(--muted); }

/* ──────────────────── главная: список матчей ────────────────── */

.layout--single { grid-template-columns: minmax(0, 1fr); }
.matchlist { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.matchrow {
  display: grid; grid-template-columns: 62px minmax(0, 1fr) auto 120px;
  align-items: center; gap: 18px;
  padding: 17px 6px; border-bottom: 1px solid var(--line);
  color: var(--fg);
}
.matchrow:hover { background: var(--goldsoft); text-decoration: none; }
.matchrow__logos { display: flex; gap: 6px; }
.matchrow__logos img { width: 26px; height: 26px; object-fit: contain; }
.matchrow__teams { font: 400 19px/1.2 var(--font-heading); letter-spacing: -0.01em; }
.matchrow__meta { font: 400 12px/1.4 var(--font-body); color: var(--muted); }
.matchrow__cta {
  display: inline-flex; align-items: center; justify-content: center;
  height: 36px; border: 1px solid var(--gold); border-radius: 4px;
  color: var(--gold); font: 600 13px/1 var(--font-heading);
}

@media (max-width: 680px) {
  .matchrow { grid-template-columns: 62px minmax(0, 1fr); gap: 10px 14px; }
  .matchrow__meta { grid-column: 2; }
  .matchrow__cta { grid-column: 1 / -1; margin-top: 8px; }
}

/* ───────────────────────── сайдбар ──────────────────────────── */

.otherlist a {
  display: flex; justify-content: space-between; gap: 10px;
  padding: 10px 0; border-bottom: 1px solid var(--line);
  color: var(--fg); font: 400 13px/1.4 var(--font-body); font-variant-numeric: tabular-nums;
}
.otherlist a:hover { color: var(--gold); text-decoration: none; }
.otherlist a span:last-child { color: var(--muted); }

.sidecard { border: 1px solid var(--line); border-radius: 4px; padding: 18px 20px; }
.sidecard h3 { font: 400 18px/1.15 var(--font-heading); margin-bottom: 8px; }
.sidecard p { margin: 0; font: 400 12px/1.65 var(--font-body); color: var(--muted); }

/* ─────────────────────────── SEO-текст ──────────────────────── */

.seotext { max-width: 78ch; }
.seotext h2 { font: 400 26px/1.15 var(--font-heading); margin: 0 0 14px; }
.seotext h3 { font: 400 20px/1.2 var(--font-heading); margin: 26px 0 10px; }
.seotext p, .seotext li { font: 400 14px/1.75 var(--font-body); color: var(--fg); }
.seotext p { margin: 0 0 14px; }
.seotext ul { margin: 0 0 16px; padding-left: 20px; }
.seotext li { margin-bottom: 7px; }
.faq { border-top: 1px solid var(--line); margin-top: 8px; }
.faq details { border-bottom: 1px solid var(--line); padding: 14px 0; }
.faq summary {
  cursor: pointer; font: 400 16px/1.35 var(--font-heading); color: var(--fg);
  list-style: none; display: flex; justify-content: space-between; gap: 14px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--gold); font-size: 18px; line-height: 1; }
.faq details[open] summary::after { content: "–"; }
.faq p { margin: 10px 0 0; font: 400 14px/1.7 var(--font-body); color: var(--muted); }

/* ─────────────────────────── статус ──────────────────────────── */

.updated {
  display: flex; align-items: center; gap: 8px;
  font: 400 10px/1 var(--font-body); letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--muted);
}
.updated__dot { width: 5px; height: 5px; border-radius: 50%; background: var(--gold); }
.updated.is-stale .updated__dot { background: var(--muted); }

/* ──────────────────────────── футер ─────────────────────────── */

.site-footer { border-top: 1px solid var(--line); }
.site-footer__inner {
  max-width: var(--wrap); margin: 0 auto; padding: 30px 32px 46px;
  display: flex; justify-content: space-between; gap: 40px; flex-wrap: wrap;
}
.site-footer p { margin: 0; max-width: 46ch; font: 400 12px/1.7 var(--font-body); color: var(--muted); }
.site-footer nav { display: flex; gap: 26px; font: 400 13px/1 var(--font-body); flex-wrap: wrap; }

/* ───────────────────────── адаптив ──────────────────────────── */

@media (max-width: 1180px) {
  .layout { grid-template-columns: minmax(0, 1fr); }
  .sidebar { position: static; flex-direction: row; flex-wrap: wrap; gap: 44px; }
  .sidebar > * { flex: 1 1 260px; }
  .lineups { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 900px) {
  .site-header__inner { gap: 20px; }
  .searchbox { display: none; }
  .mainnav { gap: 18px; }
  .team__name { font-size: 26px; }
  .scorebox__score { font-size: 48px; }
  .odds__grid { grid-template-columns: minmax(0, 1fr) repeat(3, 62px); gap: 10px; }
  .odds__cta { grid-column: 1 / -1; padding-top: 4px; border-top: 0; }
}

@media (max-width: 680px) {
  .wrap, .site-header__inner, .matchbar__inner, .layout, .site-footer__inner { padding-left: 16px; padding-right: 16px; }
  .site-header__inner { height: 62px; }
  .brand__mark { font-size: 22px; }
  .mainnav { display: none; }
  .scoreline { grid-template-columns: 1fr; gap: 16px; text-align: center; }
  .team, .team--home { justify-content: center; text-align: center; }
  .team--away { flex-direction: row-reverse; }
  .team__name { font-size: 24px; }
  .scorebox__score { font-size: 42px; margin-top: 6px; }
  .breadcrumbs { flex-wrap: wrap; gap: 8px; font-size: 10px; }
  .pl { width: 60px; }
  .pl__name { font-size: 10px; }
  .col-main { gap: 36px; }
  .layout { padding-top: 22px; padding-bottom: 48px; }
  .ad-970, .ad-728 { height: 74px; }
  .chiprow { gap: 12px; }
}

/* ───────────── обратный отсчёт вместо баннера под плеером ───────────── */

.countdown {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-top: 18px; padding: 14px 18px;
  border: 1px solid var(--line); border-radius: 4px;
  background: var(--goldsoft);
}
.countdown__tag {
  font: 400 10px/1 var(--font-body); letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--muted);
}
.countdown__time {
  font: 400 26px/1 var(--font-heading); color: var(--gold);
  font-variant-numeric: tabular-nums; min-width: 108px;
}
.countdown__hint { font: 400 12px/1.5 var(--font-body); color: var(--muted); flex: 1; min-width: 200px; }
.countdown.is-live .countdown__time { font-size: 18px; }

/* ─────────────── контекстный блок ставки на матч ──────────────── */

.betoffer {
  border: 1px solid var(--gold); border-radius: 4px; padding: 24px 26px;
  background: var(--goldsoft);
}
.betoffer__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; margin-bottom: 14px;
}
.betoffer__mark { font-size: 9px; }
.betoffer__hero {
  font: 400 24px/1.3 var(--font-heading); margin-bottom: 18px;
  font-variant-numeric: tabular-nums;
}
.betoffer__hero b { font-weight: 600; color: var(--gold); }
.betoffer__lines {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px; margin-bottom: 18px;
}
.betline {
  display: flex; flex-direction: column; gap: 6px;
  padding: 11px 14px; border: 1px solid var(--line); border-radius: 4px;
  background: var(--bg); color: var(--fg);
}
.betline:hover { border-color: var(--gold); text-decoration: none; }
.betline__label { font: 400 11px/1.3 var(--font-body); color: var(--muted); }
.betline__coef { font: 400 20px/1 var(--font-heading); color: var(--gold); }
.betoffer__cta {
  display: flex; align-items: center; justify-content: center;
  height: 50px; border-radius: 4px;
  background: var(--gold); color: var(--bg);
  font: 600 15px/1.2 var(--font-heading); letter-spacing: 0.01em;
  text-align: center; padding: 0 18px;
}
.betoffer__cta:hover { text-decoration: none; filter: brightness(1.08); }
.betoffer .disclaimer { margin-top: 14px; }

@media (max-width: 680px) {
  .betoffer { padding: 18px; }
  .betoffer__hero { font-size: 19px; }
  .betoffer__lines { grid-template-columns: 1fr; gap: 8px; }
  .betline { flex-direction: row; align-items: center; justify-content: space-between; }
}

/* ─────────────── прогноз в один клик (микроконверсия) ─────────────── */

.poll {
  margin-top: 18px; padding: 18px 20px;
  border: 1px solid var(--line); border-radius: 4px;
}
.poll__head {
  display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
  margin-bottom: 14px;
}
.poll__q { font: 400 20px/1.2 var(--font-heading); }
.poll__hint { font: 400 11px/1 var(--font-body); color: var(--muted); }
.poll__opts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.poll__opt {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 12px 14px; cursor: pointer;
  border: 1px solid var(--line); border-radius: 4px;
  background: transparent; color: var(--fg); font: inherit;
}
.poll__opt:hover { border-color: var(--gold); }
.poll__opt[aria-pressed="true"] { border-color: var(--gold); background: var(--goldsoft); }
.poll__name { font: 400 14px/1.2 var(--font-body); text-align: left; }
.poll__coef { font: 400 18px/1 var(--font-heading); color: var(--gold); }
.poll__result { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.poll__resulttext { font: 400 17px/1.4 var(--font-heading); margin-bottom: 12px; }
.poll__resulttext b { font-weight: 600; color: var(--gold); }
.poll__cta {
  display: flex; align-items: center; justify-content: center;
  height: 46px; border-radius: 4px;
  background: var(--gold); color: var(--bg);
  font: 600 15px/1.2 var(--font-heading); text-align: center; padding: 0 16px;
}
.poll__cta:hover { text-decoration: none; filter: brightness(1.08); }
.poll__mark {
  display: block; margin-top: 8px;
  font: 400 9px/1 var(--font-body); letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--muted);
}

/* ──────────────────── оверлей поверх плеера ───────────────────── */

.overlay {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  padding: 16px 46px 16px 20px;
  background: linear-gradient(180deg, rgba(20, 19, 18, 0), rgba(20, 19, 18, 0.94));
  z-index: 3;
}
.overlay__close {
  position: absolute; top: 8px; right: 10px;
  width: 28px; height: 28px; padding: 0; cursor: pointer;
  border: 1px solid rgba(243, 242, 242, 0.3); border-radius: 50%;
  background: rgba(0, 0, 0, 0.4); color: #f3f2f2;
  font: 400 17px/1 var(--font-body);
}
.overlay__close:hover { border-color: var(--gold); color: var(--gold); }
.overlay__mark {
  position: absolute; top: 12px; left: 20px;
  font: 400 8px/1 var(--font-body); letter-spacing: 0.18em;
  text-transform: uppercase; color: rgba(243, 242, 242, 0.55);
}
.overlay__text {
  flex: 1; min-width: 180px;
  font: 400 16px/1.35 var(--font-heading); color: #f3f2f2;
  font-variant-numeric: tabular-nums;
}
.overlay__text b { font-weight: 600; color: var(--gold); }
.overlay__cta {
  display: inline-flex; align-items: center; height: 42px; padding: 0 20px;
  border-radius: 4px; background: var(--gold); color: #141312;
  font: 600 14px/1 var(--font-heading);
}
.overlay__cta:hover { text-decoration: none; filter: brightness(1.08); }

/* ────────────────── подписка: возврат аудитории ───────────────── */

.subscribe {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 16px;
  padding: 13px 18px; border: 1px solid var(--gold); border-radius: 4px;
  background: var(--goldsoft); color: var(--fg);
}
.subscribe:hover { text-decoration: none; filter: brightness(1.06); }
.subscribe__text { font: 400 14px/1.4 var(--font-body); }
.subscribe__text b { font: 600 15px/1.3 var(--font-heading); }
.subscribe__cta {
  display: inline-flex; align-items: center; height: 34px; padding: 0 16px;
  border: 1px solid var(--gold); border-radius: 4px;
  font: 600 13px/1 var(--font-heading); color: var(--gold);
}

@media (max-width: 680px) {
  .poll__opts { grid-template-columns: 1fr; gap: 8px; }
  .poll__q { font-size: 18px; }
  .overlay { padding: 12px 40px 12px 14px; gap: 10px; }
  .overlay__text { font-size: 14px; }
  .overlay__cta { height: 38px; padding: 0 14px; font-size: 13px; }
}

/* ─────────────── страница рейтинга букмекеров ──────────────── */

.seotext--wide { max-width: 92ch; }
.lead { font: 400 16px/1.7 var(--font-body); }
.breadcrumbs + .page-title { margin-top: 18px; }

.rank { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.rank__row {
  display: grid;
  grid-template-columns: 34px minmax(0, 1.5fr) 104px 96px 96px minmax(0, 1.6fr) 116px;
  align-items: center; gap: 14px;
  padding: 15px 6px; border-bottom: 1px solid var(--line);
}
.rank__row:hover:not(.rank__row--head) { background: var(--goldsoft); }
.rank__row--head {
  font: 400 10px/1.3 var(--font-body); letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--muted);
  padding-top: 10px; padding-bottom: 10px;
}
.rank__row--head:hover { background: transparent; }
.rank__num { font: 400 17px/1 var(--font-heading); color: var(--gold); }
.rank__bk { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rank__score {
  font: 400 12px/1 var(--font-body); color: var(--gold); font-style: normal;
}
.rank__val { font: 400 16px/1 var(--font-heading); }
.rank__bonus { font: 400 12px/1.45 var(--font-body); color: var(--muted); }
.rank__cta a {
  display: flex; align-items: center; justify-content: center;
  height: 38px; border-radius: 4px; background: var(--gold); color: var(--bg);
  font: 600 13px/1 var(--font-heading);
}
.rank__cta a:hover { text-decoration: none; filter: brightness(1.08); }

/* плашка вместо логотипа БК — реальные логотипы подставляются позже */
.bk-plate {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 112px; height: 36px; padding: 0 12px;
  border: 1px solid var(--line); border-radius: 4px;
  font: 600 14px/1 var(--font-heading); letter-spacing: 0.01em;
  color: var(--fg); background: var(--surface);
}

.chipgroup--wrap { flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.bk-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 13px; border: 1px solid var(--line); border-radius: 4px;
  font: 400 13px/1 var(--font-body); color: var(--fg);
}
.bk-chip:hover { border-color: var(--gold); text-decoration: none; }
.bk-chip i { color: var(--gold); font-style: normal; }

.bk-card {
  border: 1px solid var(--line); border-radius: 4px;
  padding: 20px 22px; margin-bottom: 14px;
}
.bk-card__head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.bk-card__head h3 { font: 400 21px/1.25 var(--font-heading); }
.bk-card__meta {
  display: block; margin-top: 5px;
  font: 400 12px/1.4 var(--font-body); color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.bk-card__rank {
  margin-left: auto; font: 400 22px/1 var(--font-heading); color: var(--gold);
}
.bk-card__text { margin: 14px 0 16px; font: 400 14px/1.7 var(--font-body); }
.bk-card__foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  border-top: 1px solid var(--line); padding-top: 14px;
}
.bk-card__bonus { font: 400 13px/1.4 var(--font-body); color: var(--gold); }
.bk-card__cta {
  display: inline-flex; align-items: center; height: 40px; padding: 0 20px;
  border: 1px solid var(--gold); border-radius: 4px;
  font: 600 14px/1 var(--font-heading); color: var(--gold);
}
.bk-card__cta:hover { background: var(--goldsoft); text-decoration: none; }

@media (max-width: 900px) {
  .rank__row {
    grid-template-columns: 28px minmax(0, 1fr) 78px 78px;
    grid-template-areas:
      "num bk dep bet"
      "bonus bonus bonus cta";
    gap: 10px 12px;
  }
  .rank__num { grid-area: num; }
  .rank__bk { grid-area: bk; }
  .rank__val:nth-of-type(1) { grid-area: dep; }
  .rank__bonus { grid-area: bonus; }
  .rank__cta { grid-area: cta; }
  .rank__row--head { display: none; }
  .rank__val::before {
    content: attr(data-label); display: block;
    font: 400 9px/1 var(--font-body); letter-spacing: 0.16em;
    text-transform: uppercase; color: var(--muted); margin-bottom: 4px;
  }
}

/* ─────────────── предматчевая страница-прогноз ─────────────── */

.muted { color: var(--muted); }

/* Быстрые факты: во сколько / где смотреть / стадион.
   Первый экран закрывает самый частотный предматчевый интент. */
.fc-facts {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px; background: var(--line);
  border: 1px solid var(--line); border-radius: 4px;
  margin: 28px 0; overflow: hidden;
}
.fc-facts__item {
  display: flex; flex-direction: column; gap: 6px;
  padding: 16px 18px; background: var(--bg);
}
.fc-facts__item span { color: var(--muted); }
.fc-facts__item b {
  font: 600 17px/1.3 var(--font-heading); color: var(--fg);
  font-variant-numeric: tabular-nums;
}

/* Сетка рынков: 4 колонки вместо 5 у матчевого блока коэффициентов */
.odds__grid--fc { grid-template-columns: minmax(0, 1fr) 92px 118px 132px; }
.odds__book i {
  color: var(--gold); text-transform: uppercase; letter-spacing: 0.12em;
  font-size: 10px;
}

.fc-note {
  margin: 16px 0 0; font: 400 12px/1.6 var(--font-body); color: var(--muted);
}

/* Ожидаемые составы */
.fc-line {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px;
  margin: 24px 0;
}
.fc-line__side {
  border: 1px solid var(--line); border-radius: 4px; padding: 20px 22px;
}
.fc-line__side h3 { font: 400 20px/1.2 var(--font-heading); margin: 0 0 12px; }
.fc-line__xi {
  margin: 0 0 12px; font: 400 14px/1.8 var(--font-body); color: var(--fg);
}
.fc-line__side .muted { font: 400 12px/1.6 var(--font-body); margin: 0; }

/* Личные встречи */
.fc-h2h-wrap { margin: 24px 0; }
.fc-h2h {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px; background: var(--line);
  border: 1px solid var(--line); border-radius: 4px; overflow: hidden;
}
.fc-h2h__cell {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 22px 16px; background: var(--bg); text-align: center;
}
.fc-h2h__cell b {
  font: 400 34px/1 var(--font-heading); color: var(--gold);
  font-variant-numeric: tabular-nums;
}
.fc-h2h__cell span {
  font: 400 11px/1.4 var(--font-body); letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--muted);
}

/* Форма команд */
.fc-form {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px;
  margin: 24px 0;
}
.fc-form__side {
  border: 1px solid var(--line); border-radius: 4px; padding: 20px 22px;
}
.fc-form__side h3 { font: 400 20px/1.2 var(--font-heading); margin: 0 0 12px; }
.fc-form__side p { margin: 0; font: 400 13px/1.7 var(--font-body); color: var(--muted); }
.fc-form__chips { display: flex; gap: 6px; margin: 0 0 14px; }
.fc-form__chips .chip {
  min-width: 30px; height: 30px; padding: 0; cursor: default;
  display: inline-flex; align-items: center; justify-content: center;
  font: 600 13px/1 var(--font-heading);
}
.fc-form__chips .chip:hover { border-color: var(--line); color: var(--fg); }
.chip--win { border-color: var(--gold); color: var(--gold); background: var(--goldsoft); }
.chip--draw { color: var(--muted); }
.chip--loss { opacity: 0.55; }

/* Источники */
.fc-src { margin: 12px 0 0; padding: 0 0 0 18px; }
.fc-src li { font: 400 13px/1.9 var(--font-body); color: var(--muted); }
.fc-src a { color: var(--gold); }

@media (max-width: 900px) {
  .fc-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fc-line, .fc-form { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .odds__grid--fc { grid-template-columns: minmax(0, 1fr) 64px 74px 96px; gap: 10px; }
}
@media (max-width: 560px) {
  .fc-facts { grid-template-columns: minmax(0, 1fr); }
  .odds__grid--fc { grid-template-columns: minmax(0, 1fr) 56px 66px; }
  .odds__grid--fc .odds__cta { grid-column: 1 / -1; }
}

/* ───────── навигация между тремя страницами одного матча ───────── */

.matchnav {
  display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px;
}
.matchnav__item {
  display: inline-flex; align-items: center; height: 36px; padding: 0 16px;
  border: 1px solid var(--line); border-radius: 4px;
  font: 400 13px/1 var(--font-body); color: var(--fg);
}
.matchnav__item:hover { border-color: var(--gold); color: var(--gold); text-decoration: none; }
.matchnav__item--now {
  border-color: var(--gold); background: var(--goldsoft); color: var(--gold);
}

/* ─────────────────── витрина прогнозов /prognozy/ ───────────────── */

.fclist { display: block; }
.fcrow {
  display: grid;
  grid-template-columns: 58px 56px minmax(0, 1fr) 190px 62px 104px;
  align-items: center; gap: 16px;
  padding: 14px 6px; border-bottom: 1px solid var(--line);
  color: var(--fg);
}
.fcrow:hover { background: var(--goldsoft); text-decoration: none; }
.fcrow b, .fcrow i { display: block; }
.fcrow i { font-style: normal; font: 400 11px/1.4 var(--font-body); color: var(--muted); }
.fcrow__time b {
  font: 600 16px/1.2 var(--font-heading); font-variant-numeric: tabular-nums;
}
.fcrow__time i { text-transform: uppercase; letter-spacing: 0.04em; }
.fcrow__logos { display: flex; gap: 5px; }
.fcrow__logos img { width: 22px; height: 22px; object-fit: contain; }
.fcrow__teams b { font: 400 17px/1.2 var(--font-heading); letter-spacing: -0.01em; }
.fcrow__pick b { font: 400 14px/1.3 var(--font-body); }
.fcrow__coef {
  font: 600 17px/1 var(--font-heading); color: var(--gold);
  font-variant-numeric: tabular-nums; text-align: right;
}
.fcrow__cta {
  display: inline-flex; align-items: center; justify-content: center;
  height: 34px; border: 1px solid var(--gold); border-radius: 4px;
  color: var(--gold); font: 600 12px/1 var(--font-heading);
}
.fcrow--done { grid-template-columns: 58px minmax(0, 1fr) 190px 104px; }
.fcrow--done .fcrow__pick b {
  font: 600 17px/1 var(--font-heading); font-variant-numeric: tabular-nums;
}

@media (max-width: 860px) {
  .fcrow { grid-template-columns: 58px 44px minmax(0, 1fr) 62px; gap: 10px 12px; }
  /* выбор занимает первые три колонки, коэффициент остаётся с ним на одной
     строке справа — иначе цифра уезжает под текст отдельным этажом */
  .fcrow__pick { grid-column: 1 / 4; }
  .fcrow__cta { display: none; }
  .fcrow--done { grid-template-columns: 58px minmax(0, 1fr); }
}