/* ============================================================================
   verdetto — скин verdettosportivo.it, и только его. Испанский сайт живёт на своей
   копии (darkboard.css): правка здесь на него не поедет, и наоборот.

   Направление: «The well-kept board» (dense-tiles), seed 137844736.
   Лист .taste-skill/page/direction.json.

   ЧТО ЭТО ЗА СТРАНИЦА. Доска: плитки встык, зазор 8 пикселей, поля страницы 12.
   Каждая плитка — одна вещь: имя, утверждение, число, список, ссылка. Рамок нет
   ни у чего: плитка отделяется заливкой, а не обводкой. Теней в покое нет.
   Радиус один на весь сайт — 8. Пустых ячеек в доске не бывает.

   ПОЧЕМУ ЗЕЛЁНЫЙ. Verdetto — «вердикт», и первые четыре буквы этого слова читаются
   как verde. Поле тоже зелёное. Лист раздал «rose grey, green»: тёплый розово-серый
   лист, коричнево-чёрный текст и один зелёный тон. Тон не трогает хром — он стоит
   на вердикте: на ставке, на сыгравшем прогнозе, на активном пункте.
   Сыгравшая ставка — зелёная, промах — красный. Цвет говорит «верно / неверно».

   КАРТИНКИ. Леса, которые раздал лист, к футболу отношения не имеют, а открытые
   коллекции в день сборки не отвечали. Поэтому картинки на странице — настоящие и
   свои: гербы клубов и логотипы турниров, которые приходят из API. Мозаика гербов
   в шапке — это сегодняшние команды, а не украшение.

   Шрифт один: Schibsted Grotesk, 800 на имени, 600 на функциональном тексте,
   400 на абзацах.
   ============================================================================ */

:root {
  /* лист и плитки */
  --bg: #ebe5e3;          /* розово-серый лист */
  --tile: #e2dbd8;        /* плитка на тон темнее листа */
  --paper: #f7f4f3;       /* светлая плитка: на ней живут данные */
  --ink: #221e1b;         /* тёмная плитка и основной текст */
  --ink-soft: #322c28;
  --muted: #443d3a;   /* 7,6:1 на плитке: вторичный текст читается, а не сереет */
  --hair: #ded6d3;        /* разделитель внутри светлой плитки */

  /* вердикт */
  --accent: #0f7d45;
  --accent-d: #0a5431;   /* кнопки и ссылки: белым по нему 6:1, по --accent — 3,7:1 */
  --accent-soft: #d8ebe0;
  --accent-ink: #ffffff;
  --lost: #b3261e;
  --lost-soft: #f6dedc;

  --r: 8px;
  --gap: 8px;
  --edge: 12px;
  --pad: 20px;
  /* Высота закреплённой шапки: плитка 56 плюс поле сверху. От неё считаются отступ
     и высота закреплённых колонок — иначе они уезжают под шапку. */
  --head-h: calc(56px + var(--edge));

  --font: "Schibsted Grotesk", Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  --fs-small: 14px;   /* пол: ниже него на странице нет ничего */
  --fs-row: 15px;
  --fs-body: 17px;
  --fs-lead: clamp(20px, 1.1rem + 0.7vw, 26px);
  --fs-head: clamp(28px, 1.3rem + 2.4vw, 46px);
  --fs-name: clamp(44px, 7.6vw, 112px);

  /* Кривые. Встроенные ease-out в браузере слабые; эти две — из свода. */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);

  /* Общая таблица стилей держит тёмную палитру в этих же переменных, и всё, чего мы
     не переопределили правилом, красится ими: имена в классифике выходили белым по
     белому. Переназначаем целиком — так светлеет и то, о чём мы не подумали. */
  --ink2: #3b3430;
  --bg2: #ebe5e3; --surface: #f7f4f3; --surface2: #e2dbd8; --elevate: #e2dbd8;
  --line: #ded6d3; --line2: #ded6d3;
  --brand: #0f7d45; --brand-d: #0b6238; --brand-glow: rgba(15, 125, 69, .14);
  --gold: #8a5a12; --live: #b3261e; --info: #443d3a; --violet: #443d3a;
  --faint: #443d3a;   /* site.css красит .fine синевато-серым #586377 — 4,4:1 */
  --champ: #0a5431; --euro: #443d3a; --releg: #b3261e;
  --shadow: none; --shadow-s: none;
  --radius: 8px; --radius-s: 8px;
}

/* ------------------------------------------------------------------ основа --- */

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

/* Атрибут hidden слабее любого авторского правила с display. У строки матча стоит
   display: grid, и спрятанная скриптом строка оставалась на экране: переключатель дня
   выбирал день, а страница как показывала весь сезон, так и показывала. Секции прятались
   (у них своего display нет), строки — нет, и это читалось как «фильтр не работает». */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 var(--fs-body)/1.45 var(--font);
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; }

a { color: inherit; text-decoration: none; }

/* Общая таблица стилей набирает заголовки и подписи прописными вразрядку и красит
   их приглушённым серым. На доске заглавных вразрядку нет ни одной, а цвет заголовок
   берёт от своей плитки: на зелёной он белый, на светлой — чёрный. */
h1, h2, h3, h4 {
  margin: 0; font-weight: 800; letter-spacing: -0.035em; line-height: 1.04;
  text-transform: none; color: inherit; display: block;
}
th, .kick, .statusline, .pillstat, .db-bh, .db-ch {
  text-transform: none; letter-spacing: -0.015em;
}
h1 { font-size: var(--fs-head); }
h2 { font-size: var(--fs-lead); }
h3 { font-size: var(--fs-body); font-weight: 600; letter-spacing: -0.015em; }
p { margin: 0 0 10px; }
/* Общий шаблон рисует перед заголовками декоративную черту — в доске её нет. */
h2::before, h3::before { content: none !important; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
::selection { background: var(--accent); color: #fff; }

.skiplink { position: absolute; left: -9999px; }
.skiplink:focus {
  left: var(--edge); top: var(--edge); z-index: 60; padding: 10px 16px;
  background: var(--ink); color: #fff; border-radius: var(--r); font-weight: 600;
}

/* --------------------------------------------------------- верхний ряд плиток --- */
/* ШАПКА — не полоса над доской, а её первый ряд: три плитки, как велит лист
   направления. Тёмный квадрат со знаком и именем, широкая плитка со ссылками,
   которые начинаются от средней линии, и плитка действия у правого края.

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

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

.livebar { display: none; }

.head {
  position: sticky; top: 0; z-index: 40;
  padding: var(--edge) var(--edge) 0;
  background: var(--bg);
  border-bottom: 0; backdrop-filter: none;
}
/* Поля и высоту задаёт сама плитка: общая таблица держит .head .w во flex, в 1120
   пикселей, с полями по двадцать и высотой 62 — от всего этого ряд плиток съезжает. */
.head .w {
  display: grid; gap: var(--gap);
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: stretch; height: auto;
  max-width: 1680px; margin: 0 auto; padding: 0;
}

.head .brand {
  display: inline-flex; align-items: center; gap: 12px;
  background: var(--ink); color: #fff;
  border-radius: var(--r); padding: 0 20px 0 14px; min-height: 56px;
}
/* Общая таблица кладёт под знак градиентный квадрат со свечением и скругляет его
   своим радиусом: у знака есть свой фон и свой радиус, подложка только мешает. */
/* Знак крупнее плитки, в которой он раньше стоял: у нового знака тёмная подложка
   того же цвета, что и сама плитка шапки, — на ней она не видна, и в прежние
   тридцать пикселей от знака попадала одна буква высотой в двадцать. Коробка
   больше ровно на эту подложку, видимый размер буквы остаётся прежним. */
.head .brand .logo {
  display: inline-flex; width: 42px; height: 42px; flex: none;
  background: none; box-shadow: none; border-radius: 0;
}
.head .brand .logo svg { width: 100%; height: 100%; display: block; }
.db-wm { display: grid; line-height: 1.05; }
.db-wm b { font-size: 19px; font-weight: 800; letter-spacing: -0.045em; }
.db-wm small { font-size: var(--fs-small); font-weight: 600; color: #b3a9a4; letter-spacing: -0.01em; }

/* Через .head: `.head nav{margin-left:auto}` из общей таблицы прижимал плитку со
   ссылками к правому краю, и она сжималась до ширины слов вместо своей колонки. */
.head .db-hnav {
  margin: 0;
  display: flex; align-items: center; justify-content: center; gap: 2px;
  overflow-x: auto; scrollbar-width: none;
  background: var(--tile); border-radius: var(--r); padding: 0 10px; min-height: 56px;
}
.db-hnav::-webkit-scrollbar { display: none; }
/* Через .head: общая таблица адресует ссылки шапки как `.head nav a`, и без этого
   её правила перебивают наши — вплоть до зелёной заливки активного пункта. */
.head .db-hnav a {
  padding: 9px 16px; border-radius: 6px; white-space: nowrap;
  font-weight: 700; font-size: var(--fs-row); letter-spacing: -0.02em; color: var(--ink-soft);
  transition: background-color .14s ease, color .14s ease;
}
.head .db-hnav a.on, .head .db-hnav a[aria-current] { background: var(--paper); color: var(--ink); }

.db-haction {
  display: inline-flex; align-items: center;
  background: var(--accent-d); color: #fff;
  border-radius: var(--r); padding: 0 22px; min-height: 56px;
  font-weight: 800; font-size: var(--fs-row); letter-spacing: -0.025em; white-space: nowrap;
  transition: background-color .14s ease;
}
.db-haction.on, .db-haction[aria-current] { background: var(--ink); }

/* ------------------------------------------------------------- бегущая строка --- */

.db-ticker {
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  gap: var(--gap); align-items: stretch;
  max-width: 1680px; margin: var(--gap) auto 0; padding: 0 var(--edge);
}
/* На доске лента стоит внутри плитки дня и поля берёт от неё. */
.db-tr .db-ticker { max-width: none; margin: 0; padding: 0; flex: 1 1 320px; min-width: 0; }
.db-main > .db-ticker { max-width: none; margin: 0; padding: 0; }
.db-tr .db-twrap { background: var(--paper); }
.db-tlabel {
  display: inline-flex; align-items: center;
  background: var(--accent); color: var(--accent-ink);
  border-radius: var(--r); padding: 0 16px;
  font-weight: 800; font-size: var(--fs-small); letter-spacing: -0.02em;
  text-transform: none;
}
.db-twrap {
  overflow: hidden; background: var(--tile); border-radius: var(--r);
  min-height: 44px; display: flex; align-items: center;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent);
          mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent);
}
.db-track {
  display: flex; gap: 0; width: max-content;
  animation: vb-ticker 68s linear infinite;
}
/* Кнопки «остановить» у ленты больше нет, поэтому движение замирает под курсором и
   под фокусом с клавиатуры: прочитать строку на ходу иначе нельзя. На телефоне её
   останавливать нечем, но там лента и не нужна — её заменяет сама доска. */

@media (hover: hover) and (pointer: fine) {
  .db-ticker:hover .db-track { animation-play-state: paused; }
}
.db-ticker:focus-within .db-track { animation-play-state: paused; }
@keyframes vb-ticker { to { transform: translateX(-50%); } }
.db-tick {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 0 18px; font-size: var(--fs-small); white-space: nowrap; color: var(--ink-soft);
}
.db-tick b { font-weight: 600; }
.db-tick span { color: var(--muted); }
.db-tick.ready span { color: var(--accent-d); font-weight: 600; }
/* Гербы в ленте.

   max-width и flex здесь не для красоты. Лента — это .db-track шириной max-content,
   то есть ширина у неё неопределённая, пока её не посчитают по содержимому. Общее
   правило `img { max-width: 100% }` из site.css в такой цепочке считает сто процентов
   от нуля, и обе картинки получали ширину 0 при высоте 16: в разметке гербы были, а на
   странице от них оставалась пустота в два пикселя. Поэтому процент снимаем, а flex
   запрещает ужимать картинку ещё и как элемент гибкой строки. */
.db-tcrests { display: inline-flex; flex: none; }
.db-tcrests img {
  width: 16px; height: 16px; max-width: none; flex: none; object-fit: contain;
}
.db-tcrests img + img { margin-left: -4px; }

/* ----------------------------------------------------------------- сама доска --- */

main { display: block; max-width: none; margin: 0; padding: 0; }

.db-wrap {
  display: grid; gap: var(--gap);
  grid-template-columns: 252px minmax(0, 1fr) 300px;
  max-width: 1680px; margin: var(--gap) auto 0; padding: 0 var(--edge) 56px;
  align-items: start;
}
/* Колонка в одну дорожку, и дорожка не шире колонки.

   Без этого неявная дорожка грида меряется по самому широкому содержимому: одна
   таблица, которой тесно, растягивала дорожку до своей ширины, а вместе с ней и
   все остальные плитки колонки. На телефоне это видно сразу — заголовок, карточка
   матча и половина каждого блока уезжали за правый край и там обрезались, потому
   что страница при этом вбок не прокручивается. Таблицы в плитках и так лежат в
   обёртке с горизонтальной прокруткой — теперь она наконец работает. */
.db-main { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap); align-content: start; }
.db-rail { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap); align-content: start; }
.db-aside { min-width: 0; }
/* Колонки стоят в разметке после содержимого — чтобы читалка и поисковик получали
   сначала матчи, а не полторы тысячи ссылок. Порядок на экране задаётся здесь.
   Шапка-доска идёт с порядком 0 и потому остаётся первой на главной. */
.db-main { order: 2; }
.db-wrap > .db-rail:not(.db-aside) { order: 1; }
.db-wrap > .db-aside { order: 3; }

/* Колонки держатся на экране и прокручиваются внутри себя.

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

   Высоту считаем от шапки: она тоже закреплена, и без вычета колонка пряталась бы
   под неё верхними строками. align-items: start у .db-wrap уже стоит — без него
   колонка растянулась бы на высоту матчей и ездить ей было бы некуда.

   Только на широком экране: ниже 861 колонка — это лист снизу, а колонка
   предложений с 1281 идёт во всю ширину, и закреплять там нечего. */
@media (min-width: 861px) {
  .db-wrap:not(.db-board) > .db-rail:not(.db-aside) {
    position: sticky; top: calc(var(--head-h) + var(--gap)); align-self: start;
    max-height: calc(100vh - var(--head-h) - var(--gap) * 2);
    overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin;
  }
}
@media (min-width: 1281px) {
  .db-wrap:not(.db-board) > .db-aside {
    position: sticky; top: calc(var(--head-h) + var(--gap)); align-self: start;
    max-height: calc(100vh - var(--head-h) - var(--gap) * 2);
    overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin;
  }
}

/* Главная доска: ни левой, ни правой колонки — вся ширина, двенадцать делений.
   Разделы, матчи и предложения идут рядами плиток, а не колонками по бокам. */
.db-wrap.db-board { grid-template-columns: repeat(12, minmax(0, 1fr)); }
.db-board > * { grid-column: 1 / -1; }
.db-board > .db-main { grid-template-columns: repeat(12, minmax(0, 1fr)); }
.db-board > .db-main > * { grid-column: 1 / -1; }

/* --------------------------------------------------------------- шапка-доска --- */
/* Два на два: имя, мозаика гербов, тёмная плитка с фразой, зелёная плитка с цифрой.
   Ни одна плитка не пуста и ни одна не обведена. Текст в плитке — сверху слева. */

.vb-hero {
  display: grid; gap: var(--gap);
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-rows: 136px;
}
.vb-tile { border-radius: var(--r); padding: var(--pad); overflow: hidden; position: relative; }

.vb-name {
  grid-column: span 5; grid-row: span 2;
  background: var(--paper);
  display: flex; flex-direction: column; justify-content: flex-end;
}
.vb-name b {
  display: block; font-size: var(--fs-name); font-weight: 800;
  letter-spacing: -0.05em; line-height: 0.82; color: var(--ink);
  /* Имя сайта короткое, но плитка — половина ширины, и длинное имя из неё вылезало.
     Слово переносится по буквам, а не обрезается краем. */
  overflow-wrap: anywhere; hyphens: none;
}
.vb-name small {
  display: block; margin-top: 10px;
  font-size: var(--fs-body); font-weight: 600; color: var(--muted); letter-spacing: -0.02em;
}

/* Мозаика гербов: сегодняшние команды, настоящие картинки из фида.
   Шторка открывает её один раз — это единственный громкий момент страницы. */
.vb-shot {
  grid-column: span 3; grid-row: span 2;
  background: var(--ink); padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 1fr;
}
.vb-shot span { display: grid; place-items: center; padding: 10px; }
.vb-shot img {
  width: 100%; height: 100%; object-fit: contain;
  filter: grayscale(1) brightness(2.4) contrast(.55);
  opacity: .88;
}
/* Плитка держит три ряда по три — остальные гербы в неё не входят.
   minmax(0,1fr), а не 1fr: иначе ряд растёт под собственную высоту герба и
   нижний ряд вылезает за край плитки. */
.vb-shot { grid-template-rows: repeat(3, minmax(0, 1fr)); }
.vb-shot span { min-height: 0; min-width: 0; }
.vb-shot span:nth-child(n+10) { display: none; }
.vb-say {
  grid-column: span 4;
  background: var(--ink); color: #efe9e6;
  display: flex; flex-direction: column; justify-content: center;
}
/* Вопрос страницы стоит здесь, на первом экране и крупно: это и есть заголовок. */
.vb-say h1 { font-size: clamp(21px, 1.9vw, 30px); letter-spacing: -0.04em; line-height: 1.08; }
.vb-say p { margin: 9px 0 0; font-size: var(--fs-row); font-weight: 600; color: #b3a9a4; }
.vb-stat {
  grid-column: span 4;
  background: var(--accent); color: var(--accent-ink);
  display: flex; flex-direction: column; justify-content: space-between;
}
.vb-stat b {
  font-size: clamp(34px, 3.4vw, 54px); font-weight: 800; letter-spacing: -0.05em; line-height: .9;
}
.vb-stat small { font-size: var(--fs-small); font-weight: 600; opacity: .9; max-width: 26ch; }

/* ------------------------------------------------------------ строка вопроса --- */

.db-tr {
  grid-column: 1 / -1;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--gap) 16px;
  background: var(--tile); border-radius: var(--r); padding: 10px;
}
.db-tr h1 { font-size: clamp(24px, 2.2vw, 34px); }

/* ------------------------------------------------------------- выбор дня --- */

.db-dates { display: flex; align-items: center; gap: 6px; position: relative; }
.db-day {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  min-width: 108px; min-height: 38px; padding: 4px 14px; border: 0; cursor: pointer;
  background: var(--paper); color: var(--ink); border-radius: 6px;
  font: 600 var(--fs-row)/1.1 var(--font); letter-spacing: -0.02em;
  transition: background-color .14s ease;
}
.db-day small { font-size: var(--fs-small); color: var(--muted); font-weight: 600; }
.db-nav {
  width: 38px; height: 38px; border: 0; cursor: pointer; border-radius: 6px;
  background: var(--paper); color: var(--ink-soft); font-size: 17px; line-height: 1;
  display: grid; place-items: center;
  transition: background-color .14s ease;
}
.db-cal {
  position: absolute; z-index: 30; margin-top: 6px; padding: 14px;
  background: var(--paper); border-radius: var(--r);
  box-shadow: 0 16px 40px rgba(34, 30, 27, .18);
}
.db-calhead { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.db-calhead b { font-size: var(--fs-row); font-weight: 600; }
.db-calhead .db-nav { width: 30px; height: 30px; background: var(--bg); font-size: 15px; }
.db-calgrid { display: grid; grid-template-columns: repeat(7, 34px); gap: 3px; }
/* Сетка, а не одна строка: под числом стоит счётчик матчей. Поля нулевые явно — иначе
   их добавит общий .db-empty, и месяц разъедется по вертикали. */
.db-cell {
  height: 36px; padding: 0; border: 0; background: none; border-radius: 6px; cursor: pointer;
  display: grid; align-content: center; justify-items: center; gap: 1px;
  font: 600 var(--fs-small)/1 var(--font); color: var(--muted);
}
.db-cell b { font-weight: 600; }
/* Счётчик мельче даты и тусклее её: он подсказка, а не второе число той же важности. */
.db-cell i { font-size: 9px; font-style: normal; font-weight: 800; line-height: 1; opacity: .7; }
/* День без матчей: кликать нечего, и видно, что нечего. */
.db-cell.db-off { cursor: default; opacity: .4; }
.db-cell.has { background: var(--bg); color: var(--ink); }
.db-cell.now { box-shadow: inset 0 0 0 1px var(--line2); }
.db-cell.on { background: var(--accent); color: #fff; }
.db-cell.on i { opacity: .85; }

/* -------------------------------------------------------- плитки вердиктов --- */
/* Единственное, чего нет у соседей. Поэтому они идут выше расписания и шире него. */

.db-vgrid { grid-column: 1 / -1; display: grid; gap: var(--gap); }
.db-vhead {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  background: var(--accent); color: var(--accent-ink);
  border-radius: var(--r); padding: 16px var(--pad);
}
.db-vhead h2 { font-size: clamp(22px, 2vw, 32px); letter-spacing: -0.045em; }
.db-vhead h2 { color: #fff; }
.db-vhead a {
  color: #fff; font-size: var(--fs-row); font-weight: 600; white-space: nowrap;
  border-bottom: 1px solid rgba(255, 255, 255, .45); padding-bottom: 1px;
}
.db-vcards { display: grid; gap: var(--gap); grid-template-columns: 1.6fr 1fr 1fr; }
.db-vcards > :first-child { background: var(--ink); color: #efe9e6; }
.db-vcards > :first-child .db-vcm,
.db-vcards > :first-child .db-vcb small,
.db-vcards > :first-child .db-cf { color: #b3a9a4; }
.db-vcards > :first-child .db-vcb b { color: #6fdda3; font-size: clamp(24px, 2.4vw, 36px); }
.db-vcards > :first-child .db-cfbar { background: #3a3430; }

.db-vc {
  display: grid; gap: 12px; align-content: start;
  background: var(--paper); border-radius: var(--r); padding: var(--pad);
  min-height: 196px;
  transition: background-color .16s ease;
}
.db-vcm {
  display: flex; justify-content: space-between; gap: 10px;
  font-size: var(--fs-small); font-weight: 600; color: var(--muted);
}
.db-vct { display: grid; gap: 6px; }
.db-vct .db-side { display: flex; align-items: center; gap: 9px; }
.db-vct .db-nm {
  font-size: var(--fs-body); font-weight: 600; letter-spacing: -0.02em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Ставка стоит над своей подписью, а не под ней: в разметке подпись идёт первой —
   читалке нужно сперва «наша ставка», а потом её значение, — а на экране первой
   читается сама ставка, и мелкая строка над заголовком больше не выглядит надзаголовком. */
.db-vcb { display: flex; flex-direction: column-reverse; gap: 2px; margin-top: auto; }
.db-vcb small { font-size: var(--fs-small); font-weight: 600; color: var(--muted); }
.db-vcb b {
  font-size: var(--fs-lead); font-weight: 800; letter-spacing: -0.035em; color: var(--accent-d);
  line-height: 1.1;
}
.db-vc .db-cf { display: grid; gap: 5px; font-size: var(--fs-small); font-weight: 600; color: var(--muted); }
.db-cfbar {
  display: block; height: 4px; border-radius: 2px; background: var(--accent-soft); overflow: hidden;
}
.db-cfbar i {
  display: block; height: 100%; background: var(--accent); border-radius: 2px;
  transform-origin: left center;
}

/* --------------------------------------------------- разделы как ряд плиток --- */
/* На доске левая колонка разворачивается в ряд: турниры, регионы, клубы — три
   плитки во всю ширину, а не полторы тысячи пикселей ссылок сбоку. */

/* Три плитки разной ширины, а не три одинаковых: турниров всегда больше всего,
   и ряд из трёх близнецов читается как сетка карточек, которой тут быть не должно.
   Стоят они под доской, а не над ней: это навигация, а не ответ на вопрос страницы,
   и над заголовком «Наши вердикты» их мелкие подписи читались надзаголовком. */
.db-wrap.db-board > .db-rail:not(.db-aside) { order: 4; }
/* :not(.db-aside) — колонка предложений тоже несёт класс db-rail, и без оговорки
   она разбивалась на те же 2fr/1fr/1fr: список брендов занимал две трети, а
   рекламная плитка — треть, вместо ряда во всю ширину. */
.db-board > .db-rail:not(.db-aside) {
  display: grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--gap);
}
.db-wrap.db-board > .db-aside { order: 5; }
.db-board > .db-rail:not(.db-aside) .db-boxb { max-height: 212px; overflow: auto; scrollbar-width: thin; }

.db-box { background: var(--tile); border-radius: var(--r); overflow: hidden; }
.db-box > summary {
  list-style: none; cursor: pointer; padding: 14px var(--pad) 10px;
  display: flex; align-items: center; justify-content: space-between;
}
.db-box > summary::-webkit-details-marker { display: none; }
.db-box > summary::after {
  content: ""; width: 8px; height: 8px; margin-left: 10px;
  border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
  transform: rotate(45deg) translateY(-2px);
  transition: transform .18s var(--ease-out);
}
.db-box[open] > summary::after { transform: rotate(-135deg) translateY(-2px); }
.db-bh {
  font-size: var(--fs-small); font-weight: 800; letter-spacing: -0.015em; color: var(--ink);
}
.db-boxb { padding: 0 10px 10px; display: grid; gap: 1px; }
.db-box h3 { padding: 14px var(--pad) 10px; font-size: var(--fs-small); font-weight: 800; }

.db-item {
  display: grid; grid-template-columns: 22px minmax(0, 1fr) auto;
  gap: 10px; align-items: center;
  padding: 8px 10px; border-radius: 6px;
  font-size: var(--fs-row); font-weight: 600; letter-spacing: -0.015em;
  transition: background-color .14s ease;
}
.db-item span span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.db-item small { display: block; font-size: var(--fs-small); font-weight: 600; color: var(--muted); }
.db-item.on { background: var(--accent-soft); color: var(--accent-d); }
.db-item .flag { width: 22px; height: 16px; border-radius: 2px; object-fit: cover; }
.db-n { font-size: var(--fs-small); font-weight: 700; color: var(--muted); }

.db-ic {
  width: 22px; height: 22px; display: grid; place-items: center;
  border-radius: 4px; background: var(--paper);
  font-size: var(--fs-small); font-weight: 800; color: var(--muted); overflow: hidden;
}
.db-ic img { width: 18px; height: 18px; object-fit: contain; }
.db-ic.db-img { background: none; }

.db-empty {
  padding: 16px var(--pad); color: var(--muted); font-size: var(--fs-row); font-weight: 600;
}

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

.db-lg { background: var(--paper); border-radius: var(--r); overflow: hidden; }
.db-board > .db-main > .db-lg { grid-column: span 6; }
/* Остался один турнир на день — он занимает всю ширину (класс вешает board-js). */
.db-board > .db-main.db-solo > .db-lg { grid-column: 1 / -1; }

.db-lghead {
  display: grid; grid-template-columns: 26px minmax(0, 1fr) auto;
  gap: 12px; align-items: center;
  padding: 14px var(--pad); background: var(--tile);
}
.db-lghead .db-ic { width: 26px; height: 26px; background: var(--paper); }
.db-lghead .db-ic img { width: 22px; height: 22px; }
.db-lghead h2 { font-size: var(--fs-body); font-weight: 800; letter-spacing: -0.025em; }
.db-lghead small { font-size: var(--fs-small); font-weight: 600; color: var(--muted); }
.db-more {
  width: 28px; height: 28px; border-radius: 6px; background: var(--paper);
  display: grid; place-items: center; font-size: 17px; color: var(--ink-soft);
  transition: background-color .14s ease, transform .14s var(--ease-out);
}
.db-morelink {
  display: inline-block; margin: 12px 0 0;
  font-size: var(--fs-row); font-weight: 600; color: var(--accent-d);
}

/* ----------------------------------------------------------- строка матча --- */

.db-m {
  display: grid; align-items: center; gap: 12px;
  grid-template-columns: 62px minmax(0, 1fr) auto auto;
  padding: 9px var(--pad); min-height: 54px;
  transition: background-color .12s ease;
}
.db-m + .db-m { box-shadow: inset 0 1px 0 var(--hair); }

.db-time {
  display: grid; font-variant-numeric: tabular-nums;
  font-size: var(--fs-row); font-weight: 700; letter-spacing: -0.02em;
}
.db-time small { font-size: var(--fs-small); font-weight: 600; color: var(--muted); }
.db-ft { color: var(--muted); }

.db-sides { display: grid; gap: 3px; min-width: 0; }
.db-side { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 9px; align-items: center; }
.db-crest { width: 18px; height: 18px; object-fit: contain; }
.db-nm {
  font-size: var(--fs-row); font-weight: 600; letter-spacing: -0.015em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.db-side.db-w .db-nm, .db-side.db-w .db-sc { font-weight: 800; }
.db-sc { font-size: var(--fs-row); font-weight: 700; font-variant-numeric: tabular-nums; }

.db-odds { display: flex; gap: 4px; }
.db-odds a {
  display: grid; place-items: center; min-width: 52px; padding: 5px 8px;
  background: var(--bg); border-radius: 6px;
  font-variant-numeric: tabular-nums;
  transition: background-color .14s ease, color .14s ease;
}
.db-odds a small { font-size: var(--fs-small); font-weight: 700; color: var(--muted); display: none; }
.db-odds a b { font-size: var(--fs-row); font-weight: 700; letter-spacing: -0.02em; }

/* Значок вердикта в конце строки: там, где ставка есть. Где нет — место пустое. */
.db-res {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px; border-radius: 6px;
  background: var(--accent-soft); color: var(--accent-d);
  font-size: var(--fs-small); font-weight: 700; white-space: nowrap;
  transition: background-color .14s ease, color .14s ease;
}
.db-res.won { background: var(--accent); color: #fff; }
.db-res.lost { background: var(--lost-soft); color: var(--lost); }
.db-predi { flex: none; }
/* Ставка в строке списка. Подписи бывают длинные («Entrambe le squadre segnano»),
   а колонка под значок берёт ширину по содержимому — без потолка она отжимала бы
   имена команд. Поэтому потолок и перенос на вторую строку. Слово «наша ставка»
   на широком экране лишнее: значок с мишенью и так читается как прогноз. */
.db-m .db-pred {
  max-width: 220px; white-space: normal; text-align: left; line-height: 1.25;
}
.db-m .db-predl { display: none; }

/* ------------------------------------------------- плитки букмекеров рядом --- */
/* На доске это не колонка справа, а ряд плиток: четыре в ряд, во всю ширину. */

.db-card { background: var(--tile); border-radius: var(--r); padding: var(--pad); }
.db-card > h2 { margin-bottom: 14px; }
/* Шапка секции внутри карточки: карточка уже даёт поля и заливку, второй раз не надо. */
.db-card > .db-lghead { background: none; padding: 0 0 14px; }
.db-card > .db-lghead .db-ic { background: var(--paper); }
/* Заголовок страницы — тоже плитка: на доске нет текста, который лежит на листе. */
/* Заголовок страницы — плитка и самый крупный текст первого экрана: до этого его
   перебивал счёт в шапке матча, и взгляду было не за что зацепиться. */
.db-main > h1 {
  background: var(--tile); border-radius: var(--r); padding: 20px var(--pad);
  font-size: clamp(30px, 3.9vw, 56px); letter-spacing: -0.045em; line-height: 1.02;
}
.db-ch {
  display: block; margin-bottom: 14px;
  font-size: var(--fs-small); font-weight: 800; letter-spacing: -0.015em;
}

/* Предложения рядом плиток. Четыре жёстких колонки давали 157 пикселей на плитку:
   имя бренда схлопывалось в ноль, а кнопка налезала на логотип. Плитки набираются
   по ширине, и внутри каждой всё стоит столбиком. */
.db-board > .db-aside .db-card {
  display: grid; gap: var(--gap);
  grid-template-columns: repeat(auto-fit, minmax(252px, 1fr));
}
.db-board > .db-aside .db-bk {
  grid-template-columns: 104px minmax(0, 1fr);
  grid-template-areas: "logo name" "go go";
  gap: 12px; padding: 16px;
}
.db-board > .db-aside .db-bk .db-logo { grid-area: logo; }
.db-board > .db-aside .db-bk .db-nm { grid-area: name; }
.db-board > .db-aside .db-bk .db-go { grid-area: go; width: 100%; padding: 11px; }
.db-board > .db-aside .db-ch,
.db-board > .db-aside .db-showmore,
.db-board > .db-aside .db-rg { grid-column: 1 / -1; margin: 0; }

/* Первая колонка по содержимому: в списке букмекеров там номер места, а в остальных
   местах — знак бренда, и у них разная ширина. */
.db-bk {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px; align-items: center;
  background: var(--paper); border-radius: 6px; padding: 12px 14px;
}
.db-board > .db-aside .db-bk.db-more { display: none; }
.db-board > .db-aside .db-card.open .db-bk.db-more { display: grid; }
.db-rail .db-bk + .db-bk { margin-top: 1px; }
/* Колонка в 300 пикселей: имя, бонус и кнопка в одну строку не умещаются — бонус
   заезжал под кнопку. Кнопка уходит под них во всю ширину плитки. */
.db-rail .db-bk {
  grid-template-columns: 104px minmax(0, 1fr);
  grid-template-areas: "logo name" "go go";
  gap: 10px 12px;
}
.db-rail .db-bk .db-logo { grid-area: logo; }
.db-rail .db-bk .db-nm { grid-area: name; }
.db-rail .db-bk .db-go { grid-area: go; width: 100%; padding: 10px; }
.db-rail .db-bk.db-more { display: none; }
.db-rail .db-card.open .db-bk.db-more { display: grid; }

/* Плитка под знак бренда: широкая и тёмная.

   Квадрат в 34 пикселя годится для герба клуба, но у букмекеров знак — это надпись
   шириной в три-шесть высот. В квадрате «Instant Casino» (219x34) печаталось полосой
   в пять пикселей, а «Ybets» — красной чёрточкой: ряд предложений выглядел списком
   битых картинок. Здесь 104x32 — под самую вытянутую из надписей.

   Подложка тёмная, потому что все эти знаки нарисованы для тёмного фона: «Samba Slots»
   жёлтый, «Instant Casino» золотой, у «Fast Slots» неоновое свечение по контуру. На
   бумажной плитке скина они пропадали. Тёмная плитка заодно отделяет чужой знак от
   нашей вёрстки — видно, что это логотип рекламодателя, а не элемент страницы. */
.db-logo {
  width: 104px; height: 32px; border-radius: 6px; background: var(--ink);
  object-fit: contain; padding: 3px; display: grid; place-items: center;
  font-size: var(--fs-row); font-weight: 800; color: var(--paper);
}
.db-bk .db-nm { display: grid; gap: 1px; white-space: normal; overflow: visible; }
.db-bk .db-nm b { font-size: var(--fs-row); font-weight: 700; letter-spacing: -0.02em; }
.db-bk .db-nm small { font-size: var(--fs-small); font-weight: 600; color: var(--muted); }

.db-go {
  display: inline-grid; place-items: center; padding: 8px 14px;
  background: var(--accent-d); color: #fff; border-radius: 6px;
  font-size: var(--fs-small); font-weight: 800; letter-spacing: -0.015em; white-space: nowrap;
  transition: background-color .14s ease, transform .1s var(--ease-out);
}
.db-go:active { transform: scale(.97); }

.db-showmore {
  margin-top: var(--gap); width: 100%; padding: 10px; border: 0; cursor: pointer;
  background: var(--paper); border-radius: 6px; color: var(--ink-soft);
  font: 700 var(--fs-small)/1 var(--font);
  transition: background-color .14s ease;
}
.db-rg { margin-top: 12px; font-size: var(--fs-small); font-weight: 600; color: var(--muted); }

/* Промо между турнирами: та же плитка, но зелёная — это предложение, а не данные. */
.db-promo {
  grid-column: 1 / -1;
  display: grid; grid-template-columns: 128px minmax(0, 1fr) auto;
  gap: 16px; align-items: center;
  background: var(--ink); color: #efe9e6; border-radius: var(--r); padding: 16px var(--pad);
}
/* Та же плитка, что в списках, но крупнее: промо одно на четыре турнира, и знак в нём
   должен читаться. Подложка чуть светлее тёмного поля, иначе знак в нём растворяется. */
.db-pic {
  width: 128px; height: 40px; border-radius: 6px; background: #35302c;
  object-fit: contain; padding: 4px; display: grid; place-items: center;
  font-size: var(--fs-body); font-weight: 800;
}
.db-pbody { display: grid; gap: 1px; min-width: 0; }
.db-pbody b { font-size: var(--fs-body); font-weight: 800; letter-spacing: -0.025em; }
.db-pbody small { font-size: var(--fs-small); font-weight: 600; color: #b3a9a4; }
.db-plab { color: #8fe0b4 !important; }
.db-promo .db-go { padding: 10px 18px; }

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

.db-cols { display: grid; gap: var(--gap); grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* Голы, жёлтые, красные — три списка в ряд. Внутри карточки матча они короткие
   (по пять строк), и в две колонки третий уезжал бы под первые два. */
.db-cols3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.db-cols > div { background: var(--paper); border-radius: var(--r); padding: var(--pad); }
.db-cols > div > b {
  display: block; margin-bottom: 12px;
  font-size: var(--fs-small); font-weight: 800; letter-spacing: -0.015em;
}
.db-cols p { font-size: var(--fs-row); color: var(--muted); }

.db-rec {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px; align-items: center; padding: 7px 0;
  font-size: var(--fs-row); font-variant-numeric: tabular-nums;
}
.db-rec + .db-rec { box-shadow: inset 0 1px 0 var(--hair); }
.db-rec span { color: var(--muted); font-weight: 600; }
.db-rec b { font-weight: 700; }
.db-pl { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.db-pl span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); }
.db-crests { display: inline-flex; }
.db-crests img { width: 16px; height: 16px; object-fit: contain; }
.db-crests img + img { margin-left: -4px; }
.db-face { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; background: var(--bg); }
.db-noface { background: var(--tile); }

.outlist { margin: 0; padding: 0; list-style: none; }
.outlist li {
  display: flex; justify-content: space-between; gap: 12px; padding: 7px 0;
  font-size: var(--fs-row);
}
.outlist li:nth-child(even) { background: var(--bg); }
.outlist li { padding: 7px 10px; border-radius: 5px; }
.outlist li b { font-weight: 600; }
.outlist li span { color: var(--muted); }
.outlist li .db-pl b { color: var(--ink); }

/* ------------------------------------------------------------------ форма --- */

/* Перенос и ограничение по ширине: пять значков это 112 пикселей, а на узком экране
   колонка команды в карточке матча уже этого — значки уезжали за край. Там, где
   места хватает, перенос ничего не меняет. */
.db-form { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 3px; max-width: 100%; position: relative; }
.db-form a, .db-form span {
  width: 20px; height: 20px; border-radius: 4px; display: grid; place-items: center;
  background: var(--tile); color: var(--muted);
  font-size: var(--fs-small); font-weight: 800;
}
.db-form a.W, .db-form span.W { background: var(--accent); color: #fff; }
.db-form a.L, .db-form span.L { background: var(--lost); color: #fff; }
.db-form-l a, .db-form-l span { width: 24px; height: 24px; font-size: var(--fs-small); }

/* Подсказка матча. Своя, а не системная: та приходит через секунду, своим шрифтом
   и белым прямоугольником. Привязана к ряду кружков, иначе её режет край плитки. */
.db-form a::after {
  content: attr(data-t);
  position: absolute; left: 0; bottom: calc(100% + 7px); z-index: 20;
  width: max-content; max-width: 240px; padding: 7px 10px;
  background: var(--ink); color: #f3eeec; border-radius: 6px;
  font-size: var(--fs-small); font-weight: 600; line-height: 1.3; letter-spacing: -0.01em;
  white-space: normal; text-align: left;
  opacity: 0; visibility: hidden; transform: translateY(3px);
  pointer-events: none;
}
/* С клавиатуры подсказка тоже нужна: кружок — ссылка в матч, и без неё непонятно,
   в какой именно. Вне media (hover), там её бы не было у тех, кто ходит табом с
   сенсорного экрана. */
.db-form a:focus-visible::after { opacity: 1; visibility: visible; transform: none; }

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

.db-hero {
  background: var(--paper); border-radius: var(--r); padding: var(--pad);
  display: grid; gap: 18px;
}
.db-hlg { display: inline-flex; align-items: center; gap: 10px; }
.db-hlg .db-ic { width: 26px; height: 26px; background: var(--bg); }
.db-hlgn b { display: block; font-size: var(--fs-row); font-weight: 700; letter-spacing: -0.02em; }
.db-hlgn small { font-size: var(--fs-small); font-weight: 600; color: var(--muted); }

.db-hduel {
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 20px; align-items: start;
}
.db-hero .db-t { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; justify-items: center; text-align: center; }
.db-hero .db-t img { width: 56px; height: 56px; object-fit: contain; }
.db-hero .db-t b {
  display: block; margin-top: 8px;
  font-size: var(--fs-lead); font-weight: 800; letter-spacing: -0.035em; line-height: 1.05;
}
.db-hero .db-t .db-form { justify-content: center; }
/* Сначала счёт (или время начала), потом подпись: мелкая строка над крупной читается
   надзаголовком, а на этой странице главное — сам счёт. */
.db-hero .db-vs {
  display: flex; flex-direction: column; gap: 2px;
  align-items: center; text-align: center; min-width: 110px;
}
.db-hero .db-vs b { order: 1; }
.db-hero .db-vs small { order: 2; }
.db-hero .db-vs span { order: 3; }
.db-hero .db-vs small {
  font-size: var(--fs-small); font-weight: 800; color: var(--muted);
}
.db-hero .db-vs b {
  font-size: clamp(28px, 2.9vw, 42px); font-weight: 800; letter-spacing: -0.05em; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.db-hero .db-vs span { font-size: var(--fs-small); font-weight: 600; color: var(--muted); }
/* Идущий матч.

   Подпись красная, а не приглушённая: «идёт сейчас» — единственное на этой странице,
   что меняется, пока читатель на неё смотрит, и выделяется оно цветом, которого на
   листе больше нигде нет. Точка пульсирует; тем, кто просил убрать движение, она
   просто горит. Минута стоит под счётом на месте даты — у идущего матча дата уже
   ничего не сообщает. */
.db-hero .db-vs .db-livetag {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--lost); font-weight: 800;
}
.db-hero .db-vs .db-livetag i {
  width: 7px; height: 7px; border-radius: 50%; background: currentColor;
  animation: dbpulse 1.4s ease-in-out infinite;
}
.db-hero .db-vs .db-min {
  color: var(--lost); font-weight: 800; font-variant-numeric: tabular-nums;
}
@keyframes dbpulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }

/* ------------------------------------------------- блоки страницы прогноза --- */

.db-lead {
  background: var(--ink); color: #efe9e6; border-radius: var(--r); padding: var(--pad);
  font-size: var(--fs-lead); font-weight: 600; letter-spacing: -0.025em; line-height: 1.3;
}
/* ПЛИТКА ВЕРДИКТА — единственная зелёная плитка страницы прогноза и единственное
   место, где напечатана ставка. Рядом с ней стоит переход к букмекеру: до сих пор
   страница разбора заканчивалась ничем, и читателю, который согласился с выводом,
   некуда было нажать. На сыгранном матче перехода нет — ставить уже не на что. */
.db-verdict {
  background: var(--accent); color: var(--accent-ink);
  border-radius: var(--r); padding: var(--pad);
  /* Вторая дорожка ограничена. С «auto» она берёт ширину по кнопке, а в кнопке стоят
     имена обеих команд: ей доставалось больше половины блока, и разбор сжимался в
     узкий столбец на восемь строк. Теперь место делится в пользу текста, а подпись
     кнопки переносится на вторую строку. */
  display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr) minmax(0, 300px);
  align-items: center;
}
.db-vmain { display: grid; gap: 4px; justify-items: start; }
.db-verdict .db-conf { font-size: var(--fs-small); font-weight: 700; color: #eaf6ee; }
.db-verdict .db-pick {
  font-size: clamp(26px, 3vw, 44px); font-weight: 800;
  letter-spacing: -0.05em; line-height: 1.03;
}
.db-verdict .db-res { background: rgba(255, 255, 255, .22); color: #fff; margin-top: 6px; }
.db-verdict .db-res.lost { background: var(--lost); color: #fff; }
/* Единственная кнопка скина с длинной подписью: в ней стоят имена обеих команд.
   Остальные кнопки короткие, и запрет переноса им не мешает, — а эта на телефоне
   уезжала за край вместе с ним. Здесь перенос разрешён, и ширина ограничена
   плиткой. */
.db-cta {
  padding: 15px 26px; font-size: var(--fs-body); border-radius: var(--r);
  background: var(--ink); color: #fff; white-space: normal; text-align: center;
  max-width: 100%;
}
.db-vsay { margin: 10px 0 0; max-width: 72ch; font-size: var(--fs-row); opacity: .9; }

/* Карточка прогноза на странице матча: ставка, уверенность, отметка результата. */
.db-card > .db-pred {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: 14px;
  background: none; padding: 0;
}
.db-card > .db-pred .db-pick { font-size: var(--fs-lead); letter-spacing: -0.035em; }
.apihead { margin-bottom: 8px; }
.apihead .agree, .apihead .differ {
  padding: 4px 9px; border-radius: 5px; font-size: var(--fs-small); font-weight: 800;
}
.apihead .agree { background: var(--accent-soft); color: var(--accent-d); }
.apihead .differ { background: var(--lost-soft); color: var(--lost); }

/* Заголовок источника оценки и согласие двух оценок между собой. */
.db-srchead {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin: 16px 0 8px; font-size: var(--fs-small); font-weight: 700; color: var(--muted);
}
.db-agree, .db-differ {
  padding: 4px 9px; border-radius: 5px; font-size: var(--fs-small); font-weight: 800;
}
.db-agree { background: var(--accent-soft); color: var(--accent-d); }
.db-differ { background: var(--lost-soft); color: var(--lost); }

/* Полоса вероятностей 1 — X — 2. Заливки, а не обводки; подписи под ней словами. */
.db-bar {
  display: flex; height: 10px; border-radius: 5px; overflow: hidden; background: var(--tile);
}
.db-bar > i { display: block; height: 100%; }
.db-bar > i.h { background: var(--accent); }
.db-bar > i.d { background: var(--accent-soft); }
.db-bar > i.a { background: var(--ink); }
.db-barl {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 14px;
  margin-top: 7px; font-size: var(--fs-small); font-weight: 600; color: var(--muted);
}

/* Ставка в строке раздела прогнозов. */
.db-pbet { display: grid; gap: 1px; }
.db-pbet small { font-size: var(--fs-small); font-weight: 700; color: var(--muted); }
.db-pbet b { font-size: var(--fs-row); font-weight: 700; letter-spacing: -0.02em; }
.db-pbet.own b { color: var(--accent-d); }
.db-pr { grid-template-columns: 56px minmax(0, 1fr) auto auto auto auto; }
.db-pr .db-cf { display: grid; gap: 4px; width: 104px; font-size: var(--fs-small);
                font-weight: 700; color: var(--muted); }
.db-pr .db-odds a { background: var(--bg); }

/* Ряд турнирных кнопок в разделе прогнозов. */
.db-picks { display: flex; flex-wrap: wrap; gap: 6px; }
.db-picks-lg { background: var(--tile); border-radius: var(--r); padding: var(--pad); }

/* Пары «подпись — значение». Раскладки внутри строки не было вовсе, и подпись со
   значением стояли впритык: «Posizione#1», «Punti28». */
.db-info {
  background: var(--tile); border-radius: var(--r); padding: 4px var(--pad);
  display: grid;
}
.db-info > div {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding: 11px 0;
}
.db-info > div + div { box-shadow: inset 0 1px 0 var(--hair); }
.db-info b { font-size: var(--fs-row); font-weight: 700; text-align: right; }
.db-info span { font-size: var(--fs-row); color: var(--muted); }

/* Сводка сезона клуба: четыре коротких числа. Плитками они читаются с одного взгляда,
   строкой за строкой — по одной, и половина ширины карточки стоит пустой. */
.db-stats {
  background: none; padding: 0; gap: var(--gap);
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
}
.db-stats > div {
  display: grid; gap: 4px; justify-items: start; align-content: start;
  padding: 12px 14px; background: var(--paper); border-radius: 8px;
}
.db-stats > div + div { box-shadow: none; }
.db-stats span { font-size: var(--fs-small); font-weight: 700; color: var(--muted); }
.db-stats b { font-size: var(--fs-lead); font-weight: 800; letter-spacing: -0.03em; text-align: left; }

/* Шапка клуба: герб слева, название и форма справа. */
.db-thero { grid-template-columns: auto minmax(0, 1fr); gap: 18px; align-items: center; }
.db-tcrest { width: 64px; height: 64px; object-fit: contain; }
.db-tmain { display: grid; gap: 10px; justify-items: start; min-width: 0; }
.db-tmain h1 { margin: 0; }
.db-tmain p { margin: 0; font-size: var(--fs-row); color: var(--muted); }

/* min-width: колонка сетки по умолчанию не ýже своего содержимого, и широкая таблица
   внутри текста растягивала всю страницу вместо того, чтобы прокручиваться сама. */
.db-text { background: var(--paper); border-radius: var(--r); padding: var(--pad); min-width: 0; }
.db-text h3 { margin: 22px 0 8px; font-size: var(--fs-lead); font-weight: 800; letter-spacing: -0.035em; }
.db-text p { font-size: var(--fs-body); line-height: 1.55; max-width: 70ch; }
.db-text a { color: var(--accent-d); font-weight: 600; }
.db-text ul, .db-text ol { padding-left: 20px; }
.db-text li { font-size: var(--fs-body); line-height: 1.55; margin-bottom: 4px; max-width: 70ch; }
/* На ступень крупнее h3: иначе раздел и его подраздел набраны одинаково, и длинный
   текст читается как один сплошной список заголовков. */
.db-text h2 { margin: 30px 0 10px; font-weight: 800; letter-spacing: -0.035em;
  font-size: clamp(23px, 1.25rem + 0.9vw, 30px); }
.db-text > .seo > :first-child { margin-top: 0; }
/* Таблица в тексте — такая же, как таблицы сайта, но с переносами: на телефоне общее
   правило запрещает их всем таблицам, и предложение в ячейке уезжало бы вбок экранами. */
.db-text .db-tab { margin: 4px 0 16px; }
.db-text .db-tab th, .db-text .db-tab td { white-space: normal; min-width: 92px; }
/* Табличные цифры хороши для счёта, но в них и запятая получает ширину цифры: в
   предложении перед каждой запятой появлялся пробел. */
.db-text .db-tab td { font-variant-numeric: normal; }

/* Крошки — такая же плитка, как всё остальное. Голым текстом они лежали в двенадцати
   пикселях от края экрана: ближе, чем что-либо на странице, и читались как сноска.
   Ширина считается от окна, а не max-width с auto: иначе на узком экране плитка
   прилипала бы к краям, пока доска стоит с полями. */
.db-crumbs {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  width: calc(100% - 2 * var(--edge)); max-width: calc(1680px - 2 * var(--edge));
  margin: var(--gap) auto 0; padding: 10px var(--pad);
  background: var(--tile); border-radius: var(--r);
  font-size: var(--fs-small); font-weight: 600; color: var(--muted);
}
.db-crumbs a { color: var(--muted); font-weight: 600; }

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

.db-tab { width: 100%; border-collapse: collapse; font-size: var(--fs-row); }
.db-tab th {
  text-align: left; padding: 8px var(--pad); background: var(--tile);
  font-size: var(--fs-small); font-weight: 800; color: var(--muted);
}
.db-tab td { padding: 8px var(--pad); font-variant-numeric: tabular-nums; }
.db-tab tr + tr td { box-shadow: inset 0 1px 0 var(--hair); }
.db-tab td.db-p { font-weight: 800; }
.db-tab td.db-r { width: 26px; color: var(--muted); font-weight: 700; }
.db-tab tr.me td { background: var(--accent-soft); }
.db-tab a { font-weight: 600; }
/* Бренд в таблице котировок: знак и название одной ссылкой. Столбец перестаёт быть
   колонкой одинаковых слов. Плитка та же, что в списке предложений, — только уже:
   там она одна на всю колонку, здесь рядом с ней три столбца коэффициентов. */
.db-bkcell { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; }
.db-bkcell .db-logo { flex: none; width: 88px; height: 28px; font-size: var(--fs-small); }
/* Сыгранный тур в календаре сезона: он уже не новость, и строка не должна спорить за
   внимание с ближайшими. Прозрачностью, а не цветом: --muted от основного текста
   отличается на три тона, и разницы между сыгранным и предстоящим не было видно. */
.db-tab tr.db-done td, .db-tab tr.db-done th { opacity: .55; }
.db-xi { font-size: var(--fs-row); }

.db-pill {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 12px; border-radius: 6px; background: var(--tile);
  font-size: var(--fs-small); font-weight: 700; color: var(--ink-soft);
  transition: background-color .14s ease, color .14s ease;
}
.db-pill img { width: 16px; height: 16px; object-fit: contain; }
.db-pill.on { background: var(--accent); color: #fff; }
.db-pill.off { opacity: .5; }

.db-lgn, .db-lgn2 { font-size: var(--fs-row); font-weight: 700; letter-spacing: -0.02em; }
.db-tscroll { overflow-x: auto; }

/* ------------------------------------------------------ этапы и сетка кубка --- */

/* Подзаголовок этапа над таблицей. У чемпионата его нет: там таблица одна, и подпись
   к ней — та же пустая строка, что и заголовок секции. */
.db-stage {
  margin: 18px 0 8px; font-size: var(--fs-row); font-weight: 800;
  letter-spacing: -0.02em; color: var(--muted);
}
.db-card > h2 + .db-stage, .db-card .db-stage:first-of-type { margin-top: 0; }

/* Сетка плей-офф: колонка на круг, прокрутка вбок. Колонки одной ширины — круг с
   шестнадцатью парами не должен делать соседний в два слова шире остальных. */
.db-brk {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(216px, 1fr);
  gap: var(--gap); overflow-x: auto; overscroll-behavior-x: contain;
  padding-bottom: 4px; scrollbar-width: thin;
}
.db-brkcol { display: grid; gap: var(--gap); align-content: start; }
.db-brkcol > h3 {
  margin: 0; font-size: var(--fs-small); font-weight: 800; text-transform: uppercase;
  letter-spacing: .04em; color: var(--muted);
}
.db-tie {
  display: grid; gap: 2px; padding: 9px 10px; border-radius: 8px;
  background: var(--paper); color: inherit; text-decoration: none;
  transition: background-color .14s ease;
}
.db-tie:hover, .db-tie:focus-visible { background: var(--line); }
/* Flex, а не колонки: у клуба без эмблемы колонки под неё нет, и в сетке из колонок
   его название встало бы на место чужой эмблемы. */
.db-tside {
  display: flex; align-items: center; gap: 7px;
  font-size: var(--fs-row); color: var(--muted);
}
.db-tie .db-nm { flex: 1; min-width: 0; }
.db-tside > b { flex: none; }
/* Прошедший дальше — единственное, что читают в сетке, поэтому он и выделен. */
.db-tside.db-w { color: var(--ink); font-weight: 800; }
.db-tie .db-nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.db-tie .db-crest { width: 16px; height: 16px; flex: none; object-fit: contain; }
.db-tie small { font-size: var(--fs-small); color: var(--muted); }

/* ------------------------------------------- мелочи, общие для всех страниц --- */

.db-conf { font-size: var(--fs-small); font-weight: 700; color: var(--muted); }
.db-pick { font-size: var(--fs-row); font-weight: 800; letter-spacing: -0.025em; }
.db-st { font-size: var(--fs-small); font-weight: 800; color: var(--lost); }
/* Перенос и отмена — не событие, за которым следят: их подпись приглушена, красный
   в списке остаётся только у идущего матча. */
.db-st.postponed, .db-st.cancelled, .db-st.suspended { color: var(--muted); }

.db-head {
  background: var(--paper); border-radius: var(--r); padding: var(--pad);
  display: grid; gap: 6px;
}
.db-kick { margin: 0; font-size: var(--fs-row); font-weight: 600; color: var(--muted); }

.db-lgtitle { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.db-lgtitle img { width: 40px; height: 40px; object-fit: contain; }

.db-odds-wide a { min-width: 76px; padding: 9px 12px; }
.db-odds-wide a small { display: block; }
.db-closed { opacity: .55; pointer-events: none; }

.db-news { display: grid; gap: var(--gap); }
.db-news > * { background: var(--paper); border-radius: var(--r); padding: var(--pad); }

.db-sports { display: flex; flex-wrap: wrap; gap: var(--gap); }
.db-sport {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--tile); border-radius: var(--r); padding: 12px 18px;
  font-size: var(--fs-row); font-weight: 700; letter-spacing: -0.02em;
  transition: background-color .14s ease;
}

.db-tl { display: grid; gap: 2px; }
.db-tl > * { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 10px; padding: 7px 0; }
.db-tl > * + * { box-shadow: inset 0 1px 0 var(--hair); }
.db-min { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--muted); }

.daytabs { display: flex; gap: 6px; margin-bottom: var(--gap); flex-wrap: wrap; }
.daytabs button, .daytabs a {
  padding: 8px 14px; border: 0; cursor: pointer; border-radius: 6px;
  background: var(--tile); color: var(--ink-soft);
  font: 700 var(--fs-row)/1 var(--font);
  transition: background-color .14s ease, color .14s ease;
}
.daytabs button.on { background: var(--accent); color: #fff; }
.daypanel a { color: var(--accent-d); }

.kick, .subtitle, .statusline { color: var(--muted); font-size: var(--fs-row); }
.author { display: flex; align-items: center; gap: 10px; font-size: var(--fs-small); color: var(--muted); }
.author .av { width: 28px; height: 28px; border-radius: 50%; background: var(--tile); }
.author .an { font-weight: 700; color: var(--ink); }
.author.ad { color: var(--muted); }

/* Рекламная плитка: та же разметка, что у остальных сайтов, но заглавных вразрядку,
   зелёной таблетки с чёрной надписью и подписи в десять с половиной пунктов тут нет. */
.adbanner {
  background: var(--ink); color: #efe9e6; border: 0; border-radius: var(--r);
  padding: 16px var(--pad); text-align: left;
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap; position: relative;
}
/* Подложка под знак — та же тёмная, что у остальных плиток скина. В общем CSS она
   белая, и у брендов, чья надпись белая (Ybets, Instant Casino, FastSlots), от логотипа
   на ней оставался один значок: белое по белому. Проверено на всех семи знаках — на
   тёмной читаются все, на белой три из семи пропадают. */
.adbanner .ablogo {
  border-radius: 6px; background: #35302c; padding: 4px;
  color: var(--paper); font-weight: 800; font-size: var(--fs-row);
}
.adbanner .ablab {
  font-size: var(--fs-small); font-weight: 700; letter-spacing: -0.01em;
  text-transform: none; color: #8fe0b4;
}
.adbanner .abtext b { font-size: var(--fs-body); color: #fff; }
.adbanner .abtext small:last-child { font-size: var(--fs-small); color: #b3a9a4; }
.adbanner .abgo {
  margin-left: auto; padding: 11px 20px; border-radius: 6px;
  background: var(--accent-d); color: #fff; font-size: var(--fs-small); font-weight: 800;
}
.adbanner .abrg { position: static; width: 100%; font-size: var(--fs-small); color: #b3a9a4; }

/* ------------------------------------------------- лист разделов на телефоне --- */

.db-mbar, .db-mback { display: none; }

/* ------------------------------------------------------------------ подвал --- */
/* Марка закрывает страницу постройкой, а не набранным текстом: каждая буква
   вырезана из своего прямоугольника, прямоугольники разной высоты стоят на одной
   линии с зазором 4. Дальше — колонки ссылок плитками. */

footer {
  display: block; margin-top: 40px; padding: 0; text-align: left;
  background: none; border-top: 0; font-size: var(--fs-row);
}
footer a { color: inherit; }

/* МАРКА, НАБРАННАЯ БЛОКАМИ.

   Каждая буква имени — своя плитка; буква в ней набрана цветом листа, то есть
   вырезана из плитки насквозь. Плитки разной высоты стоят на одной линии с зазором
   в четыре пикселя. Та же постройка, что и в знаке сайта: там из блока вырезана
   одна V, здесь — всё слово.

   Высоты заданы поимённо, а не формулой: ритм 100-72-88-64-94-76-100-68 подобран
   на глаз, чтобы слово читалось стеной с проёмами, а не лесенкой. Букв больше
   восьми — лишние берут высоту по кругу. */
.db-mark {
  display: flex; align-items: flex-end; gap: 4px;
  width: calc(100% - 2 * var(--edge)); max-width: calc(1680px - 2 * var(--edge));
  margin: 0 auto var(--gap); height: clamp(84px, 11vw, 152px);
}
.db-mark span {
  flex: 1 1 0; min-width: 0; height: 100%;
  display: grid; place-items: center;
  background: var(--ink); color: var(--bg);
  border-radius: var(--r);
  font-size: clamp(36px, 5.2vw, 74px); font-weight: 800; letter-spacing: -0.05em;
  line-height: 1; text-transform: uppercase;
}
.db-mark span:nth-child(8n+2) { height: 72%; }
.db-mark span:nth-child(8n+3) { height: 88%; background: var(--ink-soft); }
.db-mark span:nth-child(8n+4) { height: 64%; }
.db-mark span:nth-child(8n+5) { height: 94%; background: var(--ink-soft); }
.db-mark span:nth-child(8n+6) { height: 76%; }
.db-mark span:nth-child(8n+8) { height: 68%; background: var(--ink-soft); }
/* Первая буква зелёная — та же, что вырезана в знаке сайта. */
.db-mark span:first-child { background: var(--accent-d); }

.db-foot {
  display: grid; gap: var(--gap); align-items: start;
  grid-template-columns: 1.6fr 1fr 1fr 1.4fr;
  max-width: 1680px; margin: 0 auto; padding: 0 var(--edge);
}
.db-foot > * { background: var(--tile); border-radius: var(--r); padding: var(--pad); }

.db-fbrand { background: var(--ink) !important; color: #efe9e6; }
.db-fbrand p { margin: 0; font-size: var(--fs-row); color: #b3a9a4; }
.badges span {
  display: inline-block; margin-top: 8px; padding: 5px 10px; border-radius: 6px;
  background: #35302c; color: #efe9e6; font-size: var(--fs-small); font-weight: 800;
}

.db-fcol h2 { margin-bottom: 12px; font-size: var(--fs-small); font-weight: 800; letter-spacing: -0.015em; }
.db-fcol a {
  display: block; padding: 5px 0; font-size: var(--fs-row); font-weight: 600; color: var(--ink-soft);
  transition: color .14s ease;
}
.db-frg p { font-size: var(--fs-small); color: var(--muted); line-height: 1.5; }
.db-frg a { font-size: var(--fs-small); color: var(--accent-d); }
.db-fes { color: var(--muted); }

.db-fbar { max-width: 1680px; margin: var(--gap) auto 0; padding: 0 var(--edge) 24px; }
.db-fbar .w {
  background: var(--tile); border-radius: var(--r); padding: 14px var(--pad);
  display: flex; flex-wrap: wrap; gap: 6px 20px; justify-content: space-between;
}
.db-fbar p { margin: 0; font-size: var(--fs-small); color: var(--ink2); }

/* ============================================================================
   ДВИЖЕНИЕ

   Четыре вещи, и ни одной лишней.

   1. Шторка на мозаике гербов — один громкий момент страницы, один раз за заход.
      Это clip-path и scale: ни то, ни другое не трогает раскладку.
   2. Въезд плиток по мере прокрутки — scroll-driven анимация средствами CSS
      (animation-timeline: view()). Ни строчки JS и ни одного наблюдателя: где
      браузер её не знает, плитка просто стоит на месте в конечном виде.
   3. Полоса уверенности заполняется scaleX — не width: width гоняет раскладку.
   4. Отклик на наведение и нажатие: только цвет и 120–160 мс. Строки матчей
      смотрят десятки раз в день, поэтому здесь не должно быть заметного движения.

   Наведение закрыто (hover: hover): на телефоне касание даёт ложное наведение,
   и подсказка залипала бы после тапа. Всё движение снимается prefers-reduced-motion:
   остаются только изменения цвета и прозрачности.
   ============================================================================ */

@keyframes vb-shutter {
  from { clip-path: inset(0 0 0 100%); }
  to   { clip-path: inset(0 0 0 0); }
}
@keyframes vb-settle {
  from { transform: scale(1.12); }
  to   { transform: scale(1); }
}
@keyframes vb-rise {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
@keyframes vb-fill {
  from { transform: scaleX(0); }
}

@media (prefers-reduced-motion: no-preference) {
  .vb-shot { animation: vb-shutter 1.05s var(--ease-out) both; }
  .vb-shot > span { animation: vb-settle 1.25s var(--ease-out) both; }

  /* Остальная шапка приезжает лесенкой по 60 мс — один раз, при загрузке. */
  .vb-name, .vb-say, .vb-stat { animation: vb-rise .5s var(--ease-out) both; }
  .vb-name { animation-delay: .04s; }
  .vb-say  { animation-delay: .12s; }
  .vb-stat { animation-delay: .18s; }

  .db-cfbar i { animation: vb-fill .7s var(--ease-out) .25s both; }

  /* Плитки ниже первого экрана появляются при входе в кадр. Работает там, где
     браузер знает view(); где не знает — ничего не происходит, и это нормально. */
  @supports (animation-timeline: view()) {
    .db-vc, .db-lg, .db-promo, .db-card, .db-verdict, .db-text,
    .db-board > .db-rail > .db-box, .adbanner, .db-main > h1 {
      animation: vb-rise .5s var(--ease-out) both;
      animation-timeline: view();
      animation-range: entry 0% entry 42%;
    }
  }
}

/* --------------------------------------------------------- страница ошибки --- */

/* Колонок у страницы ошибки нет: ни турнирной, ни предложений — на ней нечего ими
   сопровождать. Поэтому доска в одну дорожку и уже обычной: строка текста во всю
   ширину доски в 1680 пикселей не читается. */
.db-wrap.db-one { grid-template-columns: minmax(0, 1fr); max-width: 940px; }

/* Тёмная плитка: это единственное, что есть на странице, и она должна весить
   столько же, сколько шапка матча на нормальной. */
.db-err {
  background: var(--ink); color: var(--paper);
  border-radius: var(--r); padding: 36px var(--pad) 32px;
}
.db-ecode {
  display: block; margin-bottom: 10px;
  font-size: clamp(56px, 11vw, 128px); font-weight: 800;
  line-height: .84; letter-spacing: -0.06em; color: var(--accent-soft);
}
.db-err h1 {
  margin: 0 0 12px; font-size: clamp(26px, 3.2vw, 42px);
  line-height: 1.04; letter-spacing: -0.045em;
}
.db-err p { margin: 0; max-width: 58ch; font-size: var(--fs-body); line-height: 1.55; color: #cfc7c3; }
.db-elinks { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }
/* Кнопка скина тёмная, а лежит она здесь на тёмном: на вердиктовом зелёном её видно. */
.db-elinks .db-cta { background: var(--accent-d); }
.db-ego {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 15px 22px; border-radius: var(--r);
  background: rgba(247, 244, 243, .12); color: var(--paper);
  font-size: var(--fs-body); font-weight: 700; text-align: center;
}

/* Турниры плашками: промахиваются чаще всего по их адресам, и список из десяти
   строк здесь был бы вторым меню — плашки читаются одним взглядом. */
.db-echips { display: flex; flex-wrap: wrap; gap: 6px; }
.db-echips a {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 13px; border-radius: var(--r);
  background: var(--paper); color: var(--ink);
  font-size: var(--fs-row); font-weight: 700;
}
.db-echips img { width: 20px; height: 20px; object-fit: contain; }

@media (hover: hover) and (pointer: fine) {
  .db-m:hover { background: var(--bg); }
  .db-vc:hover { background: #fffdfc; }
  .db-vc:hover .db-vcb b { color: var(--accent-d); }
  .db-item:hover, .head .db-hnav a:hover { background: #d7cfcb; }
  .head .db-hnav a.on:hover { background: var(--paper); }
  .db-haction:hover { background: #063b22; }
  .db-ego:hover { background: rgba(247, 244, 243, .2); }
  .db-echips a:hover { background: #fffdfc; }
  .db-haction.on:hover { background: var(--ink-soft); }
  .db-item.on:hover { background: var(--accent-soft); }
  .db-odds a:hover { background: var(--accent-soft); color: var(--accent-d); }
  .db-res:hover { background: var(--accent); color: #fff; }
  .db-res.lost:hover { background: var(--lost); color: #fff; }
  .db-go:hover { background: #063b22; }
  .db-more:hover { background: var(--bg); transform: translateX(2px); }
  .db-showmore:hover, .db-day:hover, .db-nav:hover { background: var(--bg); }
  .db-fcol a:hover { color: var(--accent-d); }
  .db-pill:hover { background: #d7cfcb; }
  .db-pill.on:hover { background: var(--accent-d); }
  .daytabs button:hover { background: #d7cfcb; }
  .db-tab a:hover { color: var(--accent-d); }

  /* Подсказка открывается сразу, а гаснет мгновенно: переход стоит только в
     :hover. Иначе, пока ведёшь мышью вдоль ряда, две подсказки видны разом. */
  .db-form a:hover::after {
    opacity: 1; visibility: visible; transform: none;
    transition: opacity .12s ease, transform .12s var(--ease-out);
  }
}

@media (prefers-reduced-motion: reduce) {
  .db-hero .db-vs .db-livetag i { animation: none; }
  .db-track { animation: none; }
  .db-form a:hover::after { opacity: 1; visibility: visible; transform: none; }
}

/* ============================================================================
   УЗКИЕ ЭКРАНЫ

   Телефонную доску считаем отдельно, а не сжимаем ту же: имя и фраза идут первыми,
   зазор 6, плитки в один-два столбца.
   ============================================================================ */

@media (max-width: 1280px) {
  .db-wrap { grid-template-columns: 228px minmax(0, 1fr); }
  .db-wrap > .db-aside { grid-column: 1 / -1; }
  .db-board > .db-aside .db-card { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vb-name { grid-column: span 7; }
  .vb-shot { grid-column: span 5; }
  .vb-say, .vb-stat { grid-column: span 6; }
}

@media (max-width: 1000px) {
  .db-board > .db-main > .db-lg { grid-column: 1 / -1; }
  .db-vcards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .db-vcards > *:nth-child(3) { grid-column: 1 / -1; }
  .db-board > .db-rail:not(.db-aside) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
  :root { --gap: 6px; --edge: 8px; --pad: 16px; }

  .db-wrap, .db-board { grid-template-columns: minmax(0, 1fr); }
  .db-board > .db-main { grid-template-columns: minmax(0, 1fr); }
  .db-foot { grid-template-columns: minmax(0, 1fr); }

  .vb-hero { grid-auto-rows: auto; }
  .vb-name { grid-column: 1 / -1; min-height: 21vh; order: 1; }
  /* Заголовок идёт сразу за именем: на телефоне первый экран должен отвечать на
     вопрос страницы, а не показывать картинку. Мозаика уходит под него. */
  .vb-say { grid-column: 1 / -1; order: 2; }
  .vb-stat { grid-column: 1 / -1; order: 3; flex-direction: row; align-items: baseline;
             justify-content: flex-start; gap: 14px; }
  /* На телефоне мозаика — три на два: при шести колонках во втором ряду оставалась
     дырка, а дырок в этой доске не бывает. */
  .vb-shot { grid-column: 1 / -1; grid-row: auto; order: 4; aspect-ratio: 3 / 2;
             grid-template-columns: repeat(3, minmax(0, 1fr));
             grid-template-rows: repeat(2, minmax(0, 1fr)); }
  .vb-shot span:nth-child(n+7) { display: none; }

  .db-vcards { grid-template-columns: minmax(0, 1fr); }
  .db-vcards > *:nth-child(3) { grid-column: auto; }
  .db-vc { min-height: 0; }
  .db-cols, .db-cols3 { grid-template-columns: minmax(0, 1fr); }
  .db-picks { grid-template-columns: minmax(0, 1fr); }
  .db-board > .db-aside .db-card { grid-template-columns: minmax(0, 1fr); }

  /* Промо на телефоне: знак и текст в строку, кнопка под ними во всю ширину —
     втроём в 390 пикселей они не помещаются, и название бренда схлопывается. */
  .db-promo { grid-template-columns: 104px minmax(0, 1fr); gap: 10px 12px; }
  .db-promo .db-go { grid-column: 1 / -1; width: 100%; }
  .db-pic { width: 104px; height: 34px; }

  .db-hduel { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 10px; }
  .db-hero .db-t img { width: 40px; height: 40px; }
  .db-hero .db-t b { font-size: var(--fs-row); }

  .db-m { grid-template-columns: 50px minmax(0, 1fr) auto; padding: 9px 14px; }
  .db-m .db-odds { grid-column: 1 / -1; }
  .db-odds a { flex: 1; min-width: 0; }
  .db-odds a small { display: block; }
  /* На телефоне ставка идёт отдельной строкой во всю ширину — под коэффициентами
     и перед следующим матчем. В строку с названиями она не влезает, а прятать её
     в значок-точку, как было, значит снова не сказать, какая она. Здесь же нужна
     и подпись: сама по себе «Meno di 2,5 gol» под списком цифр читается как ещё
     одна цифра. */
  .db-m .db-pred {
    grid-column: 1 / -1; max-width: none; width: 100%;
    justify-content: flex-start; gap: 8px; padding: 8px 10px;
  }
  .db-m .db-predl { display: inline; font-weight: 700; opacity: .72; }
  .db-m .db-predb { font-weight: 800; }

  .head { padding: 8px 8px 0; }
  /* Три плитки в два ряда: марка и действие в строку, ссылки под ними во всю ширину.
     В одну строку они не умещаются, а боковая прокрутка в шапке прячет действие. */
  .head .w { grid-template-columns: minmax(0, 1fr) auto; }
  .head .brand { order: 1; min-height: 48px; padding: 0 14px 0 10px; }
  .head .brand .logo { width: 36px; height: 36px; }
  .db-wm b { font-size: 17px; }
  .db-haction { order: 2; min-height: 48px; padding: 0 16px; }
  /* Через .head: иначе центрирование из основного правила (там селектор тоже с .head)
     перебивает это, ряд ссылок центруется в своей прокрутке и первое слово
     оказывается обрезанным слева ещё до того, как его тронули. */
  .head .db-hnav { order: 3; grid-column: 1 / -1; justify-content: flex-start; min-height: 44px; }
  /* Турнир в шапке остаётся один: три названия вроде «UEFA Champions League» на
     экране в 390 пикселей всё равно не видны целиком. */
  .head .db-hnav .db-hlg ~ .db-hlg { display: none; }

  /* Разделы на телефоне — лист снизу, а не полторы тысячи пикселей ссылок.
     Кнопка и подложка живут в разметке колонки, здесь только их вид. */
  .db-mbar {
    position: fixed; left: 8px; right: 8px; bottom: 8px; z-index: 50;
    display: flex; align-items: center; justify-content: center; gap: 9px;
    min-height: 48px; border: 0; cursor: pointer;
    background: var(--ink); color: #fff; border-radius: var(--r);
    font: 800 var(--fs-row)/1 var(--font); letter-spacing: -0.02em;
  }
  .db-mic { width: 14px; height: 2px; background: currentColor; box-shadow: 0 -5px currentColor, 0 5px currentColor; }
  .db-mback {
    position: fixed; inset: 0; z-index: 48; background: rgba(34, 30, 27, .45);
    display: block;
  }
  .db-mback[hidden] { display: none; }

  .db-rail:not(.db-aside), .db-board > .db-rail:not(.db-aside) {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 49;
    max-height: 72vh; overflow: auto;
    display: grid; grid-template-columns: minmax(0, 1fr); gap: 1px;
    background: var(--bg); border-radius: var(--r) var(--r) 0 0;
    padding: 8px 8px 64px;
    transform: translateY(102%);
    transition: transform .26s var(--ease-out);
  }
  body.db-menu .db-rail:not(.db-aside) { transform: none; }
  .db-board > .db-rail:not(.db-aside) .db-boxb { max-height: none; }
  /* Правая колонка на телефоне — обычные плитки в потоке, не лист. */
  .db-aside, .db-board > .db-aside {
    position: static; transform: none; max-height: none; padding: 0; background: none;
    gap: var(--gap); border-radius: 0;
  }

  @media (prefers-reduced-motion: reduce) {
    .db-rail:not(.db-aside) { transition: none; }
  }
}

@media (max-width: 560px) {
  /* Блок ставки в столбик.

     Две колонки — «minmax(0, 1fr) auto» — на телефоне разваливались: вторая берёт
     ширину по кнопке, а в кнопке стоят имена обеих команд, и на неё уходило всё.
     Первой колонке оставался ноль, и подпись со ставкой печатались по одному слову
     в строку, а кнопка лежала поверх них. В столбик ставка читается сразу, а кнопка
     во всю ширину — там, где её и ищут: под текстом. */
  .db-verdict { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .db-verdict .db-cta { width: 100%; padding: 14px 18px; }
  .db-vsay { margin-top: 8px; }

  /* Колонка команды в карточке матча на телефоне — 99 пикселей, а ряд из пяти
     значков в обычном размере занимает 112 и переносился четыре плюс один.
     Уменьшенные значки встают в одну строку; перенос остаётся страховкой для
     совсем узких экранов. */
  .db-hero .db-form { gap: 2px; }
  .db-hero .db-form a, .db-hero .db-form span { width: 17px; height: 17px; border-radius: 3px; }
  /* В узкой таблице знак говорит то же, что и название: у всех наших брендов знак —
     это надпись. Остаётся он, а четыре столбца перестают ездить вбок.
     Селектор с img: у кого знака нет, на его месте буква — там название нужно. */
  .db-bkcell img.db-logo + span { display: none; }
  .db-bkcell .db-logo { width: 76px; }
  .db-mark { height: clamp(64px, 17vw, 96px); gap: 3px; }
  .db-mark span { font-size: clamp(18px, 6.4vw, 30px); border-radius: 5px; }

  /* Выходы со страницы ошибки — в столбик во всю ширину: в строку три кнопки
     переносились по одной и вставали лесенкой разной длины. */
  .db-err { padding: 28px 16px 26px; }
  .db-elinks { display: grid; grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 420px) {
  .vb-say, .vb-stat { grid-column: 1 / -1; }
  .db-fbar .w { flex-direction: column; }
}

/* ----------------------------------------- наследство общей таблицы стилей --- */
/* site.css писалась под тёмный лист: там есть и color:#fff прямо в правиле, и
   обводки в 1px вокруг карточек. На розово-сером листе белое пропадает совсем, а
   обводок у этой доски нет по направлению — плитку определяет заливка. */

td.pts, .mrow .sc, .mrow.win .nm, .odds .val, .tile .n, .bk .nm, .author .an,
.pcard .teams, .pcard .od span, .faq summary, .oddscmp td.o,
.head nav a:hover, .head .sportnav a:hover, .head .sportnav a.on,
.hubgrid a:hover { color: var(--ink); }

.hubgrid a, .mcard, .tile, .bk, .bkcard, .predbox, .pcard, .faq details,
.lcard, .railcard, .newsbox, .card {
  border: 0; background: var(--paper); border-radius: var(--r); box-shadow: none;
}
.predbox { background: var(--accent); color: var(--accent-ink); }
.predbox .pick { background: #fff; color: var(--accent-d); }
.faq summary { font-weight: 700; }
.seeall { color: var(--accent-d); font-weight: 700; }
.kick, .pillstat, .crumbs, .seeall, .fine, .db-rg, .badges span, small {
  font-size: var(--fs-small);
}
.bk .go, .cta a.btn, .seasonbar a.on, .leaguenav a.on, .pcard .betval.own,
.oddscmp td.o.best, .predbox .pick {
  background: var(--accent-d); color: #fff; border-color: var(--accent-d);
  border-radius: 6px; box-shadow: none;
}
.kick { color: var(--accent-d); }
.fd { color: #fff; } .fd.W { background: var(--accent-d); }
.pbar .h { background: var(--accent-d); }
.author .av { background: var(--tile); color: var(--ink); }
.crumbs, .statusline, .bk .stars, .author .ad, .mtab, .railcard .seeall,
.h2hfilter button, table.mini, .nmpred, .scline, .summary, .db-xi, table {
  font-size: var(--fs-row);
}
.outlist li { border-bottom: 0; font-size: var(--fs-row); }
.outlist li b { color: var(--ink); }