/* Баскетбольные блоки V5: КЛУБНАЯ КРАСКА и движение.
   Подключается ПОСЛЕ bb-blocks.css — самый специфичный слой. */

/* ═══ ЭФФЕКТЫ БЛОКОВ ═══
   Этот файл подключается ПОСЛЕДНИМ, после CSS темы. Иначе не работает:
   собственный фон компонента (.v5-bigtile { background: … }) объявлен позже
   и перебивает заливку градиентом — заливка остаётся светлой, а текст уже
   переключился на светлый. Ровно это и вышло на первом прогоне: числа в
   сводке стали белыми на светлой плитке. Порядок здесь — не вкус, а условие. */

/* ─────────── Градиент под «геройские» элементы ─────────── */
.bb-grad {
  background: linear-gradient(150deg, var(--bb-grad-a), var(--bb-grad-b));
  color: var(--bb-on-grad);

  /* Внутри залитой карточки поверхности строятся ИЗ ЕЁ ЖЕ текста полупрозрачно,
     а не из цвета страницы. Иначе вложенная плитка (счёт по четвертям) остаётся
     светлой, как на белом листе, и белый текст на ней исчезает. */
  /* Фон тоже: внутри залитой карточки «фон страницы» не существует. Без этого
     плитка четвертей в V1 брала светлый фон страницы, а текст — светлый от
     карточки, и счёт по четвертям пропадал. */
  --bb-ground: color-mix(in srgb, var(--bb-on-grad) 10%, transparent);
  --bb-surface: color-mix(in srgb, var(--bb-on-grad) 14%, transparent);
  --bb-surface-2: color-mix(in srgb, var(--bb-on-grad) 22%, transparent);
  --bb-ink: var(--bb-on-grad);
  /* ⛔ И эти три — здесь же. В tokens.css они посчитаны от чернил СТРАНИЦЫ:
     var() в значении переменной подставляется там, где переменная объявлена,
     поэтому строчка --bb-ink выше сама по себе их не меняет. Без повтора
     пометка «WIN» внутри градиентной карточки остаётся цветом страницы.
     Найдено собственным тестом «тройка -ink пересчитана в каждом правиле». */
  --bb-brand2-ink: color-mix(in srgb, var(--bb-brand2-base) 40%, var(--bb-ink));
  --bb-win-ink: color-mix(in srgb, var(--bb-win-base) 30%, var(--bb-ink));
  --bb-loss-ink: color-mix(in srgb, var(--bb-loss-base) 30%, var(--bb-ink));
  --bb-live-ink: color-mix(in srgb, var(--bb-live-base) 30%, var(--bb-ink));
  --bb-muted: color-mix(in srgb, var(--bb-on-grad) 72%, transparent);
  --bb-line: color-mix(in srgb, var(--bb-on-grad) 22%, transparent);
  --bb-accent: var(--bb-on-grad);
  --bb-accent-data: var(--bb-on-grad);
}

/* Где тема посчитала свой читаемый акцент для клубной карточки (V5 меряет его
   по снимку боевой таблицы) — он точнее нашего запасного, возвращаем его. */
.bb-v5 .bb-grad.bb-brandcard {
  --bb-accent: var(--fnwv5-acc-brandcard, var(--bb-on-grad));
  --bb-accent-data: var(--fnwv5-acc-brandcard-data, var(--bb-on-grad));
}

/* Идущий матч — единственное место с движением: перелив означает
   «счёт меняется прямо сейчас», а не украшает. */
.bb-grad--live {
  background: linear-gradient(120deg, var(--bb-grad-a), var(--bb-grad-b), var(--bb-grad-a));
  background-size: 220% 100%;
  animation: bb-live-shift 9s ease-in-out infinite;
}

@keyframes bb-live-shift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

@media (prefers-reduced-motion: reduce) {
  .bb-grad--live { animation: none; background-size: 100% 100%; }
}

/* ─────────── Длинные названия ───────────
   Правило: имя клуба не сокращаем и не режем многоточием, но и блок от него
   не меняется. Достигается РЕЗЕРВОМ: ячейка имени всегда высотой в две
   строки, независимо от того, короткое имя или длинное.

   Две строки — не на глаз: в MPBL названия от 10 до 42 знаков, медиана 18,
   длиннее 24 знаков пять клубов из 28. Сорокадвухзначное
   «Biñan Tatak Gel Beast Motorcycle MEGA WAGI» в колонке около 260 пикселей
   укладывается ровно в две строки, и на телефоне при полной ширине — тоже.

   Третью строку разрешаем только там, где строка и так карточка. */
.bb-name {
  /* ⛔ ТЕКСТ ВНУТРИ РЕЗЕРВА — ПО СЕРЕДИНЕ. Резерв в две строки нужен, чтобы
     строки и карточки не прыгали от длины названия. Но при `display:block`
     короткое имя прижималось к ВЕРХУ зарезервированной коробки, и рядом с
     гербом или числом оно оказывалось выше середины — замер по строкам текста
     дал смещение -9…-10px в 23 местах (плашки матчей, «идёт матч», лидеры,
     состав, статистика игроков). Сетка с `align-content: center` ставит текст
     по середине коробки и, в отличие от flex, НЕ ломает `text-align`: строка
     остаётся выровненной так, как задал блок. */
  display: grid;
  align-content: center;
  min-height: calc(var(--bb-name-lh, 1.25em) * 2);
  line-height: var(--bb-name-lh, 1.25);
  /* break-word, а НЕ anywhere. anywhere уменьшает минимальную ширину элемента,
     и таблица отбирает у колонки имени место: «Abra Solid North Weavers»
     превращается в «Abra / Solid / North / Weave / rs». Проверено рендером
     на 700 пикселях. break-word переносит по словам и ширину не занижает. */
  overflow-wrap: break-word;
  hyphens: auto;
}

/* Где имя заведомо короткое (свой клуб в шапке, соперник в календаре) —
   резерв снимаем осознанно, а не забываем. */
.bb-name--free { min-height: 0; }

/* ─────────── Фото игрока ───────────
   Слот занимаем ВСЕГДА и у всех карточек блока сразу. Половина карточек с
   фотографией, половина без — это разъехавшаяся сетка, а не «у одного нет
   данных». Пока сборщик фотографий не даёт, в слоте кружок с инициалами. */
.bb-photo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  border-radius: 50%;
  font-weight: 700;
  letter-spacing: .02em;
  background: color-mix(in srgb, var(--bb-brand) 16%, transparent);
  color: var(--bb-accent);
  overflow: hidden;
}

.bb-photo img { width: 100%; height: 100%; object-fit: cover; }

/* ═══ ПОВЕДЕНИЕ БЛОКОВ ═══
   Ротация партий, раскрытие длинных списков, переключение месяцев. Механика
   общая на четыре темы — вид остаётся своим у каждой. Лежит в effects.css,
   потому что этот слой подключается ПОСЛЕ CSS темы: обрезка партии обязана
   победить любую раскладку сетки, иначе тема покажет всё сразу. */

/* ─────────── Атрибут hidden обязан прятать ───────────
   Правило браузера [hidden]{display:none} проигрывает любому авторскому
   display. Стоит теме задать карточке display:flex — и скрытая карточка
   остаётся на экране: ротация показывает всё сразу, а спрятанная стрелка
   календаря продолжает висеть рядом с той, что работает. Проверено рендером:
   кнопка «вперёд» в августе была скрыта скриптом и всё равно рисовалась. */
[data-bb-rot] > [hidden],
[data-bb-slide] > [hidden],
[data-bb-more] > [hidden],
[data-bb-month][hidden],
.bb-calnav[hidden],
.bb-more[hidden] { display: none !important; }

/* ─────────── Партии карточек ───────────
   Пока скрипт не подключился, лишние карточки обрезает CSS. Без этого на
   страницу высыпается весь состав, и сетка, нарисованная под шесть карточек,
   растягивается на пятнадцать. Классов ровно столько, сколько партий реально
   используется в блоках: 1, 3, 4 и 6 на десктопе, 1, 2 и 3 на мобильной. */
.bb-rot:not(.bb-rot--js):not(.bb-slide--js).bb-rot--d1 > *:nth-child(n+2),
.bb-rot:not(.bb-rot--js):not(.bb-slide--js).bb-rot--d3 > *:nth-child(n+4),
.bb-rot:not(.bb-rot--js):not(.bb-slide--js).bb-rot--d4 > *:nth-child(n+5),
.bb-rot:not(.bb-rot--js):not(.bb-slide--js).bb-rot--d6 > *:nth-child(n+7) { display: none; }

@media (max-width: 640px) {
  .bb-rot:not(.bb-rot--js):not(.bb-slide--js).bb-rot--m1 > *:nth-child(n+2),
  .bb-rot:not(.bb-rot--js):not(.bb-slide--js).bb-rot--m2 > *:nth-child(n+3),
  .bb-rot:not(.bb-rot--js):not(.bb-slide--js).bb-rot--m3 > *:nth-child(n+4) { display: none; }
}

/* Смена партии: сетка уходит целиком, видимость меняется, пока её не видно,
   и сетка возвращается. Двигаем контейнер, а не карточки, — иначе движение
   разъехалось бы по четырём темам, где сетки устроены по-разному. */
.bb-rot--js { transition: opacity .2s ease, transform .2s ease; }
.bb-rot--js.is-swap { opacity: 0; transform: translateY(10px); }

/* Точки — не украшение: без них ротация неуправляема, карточка ушла и
   вернуться к ней нечем. */
.bb-rot__dots {
  display: flex;
  gap: 7px;
  justify-content: center;
  margin-top: 14px;
}

.bb-rot__dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--bb-line);
  cursor: pointer;
  transition: background .2s ease, transform .2s ease;
}

.bb-rot__dot:hover { background: var(--bb-muted); }
.bb-rot__dot.is-on { background: var(--bb-brand); transform: scale(1.55); }

/* Карточка целиком как ссылка: отдельная кнопка на каждой карточке вела бы
   туда же, но к шести карточкам добавляла бы шесть кнопок. */
.bb-cardlink {
  text-decoration: none;
  color: inherit;
  transition: transform .18s ease, background .18s ease, box-shadow .18s ease;
}

/* Как карточка отзывается на курсор — решает тема: подъём хорош для карточки
   и плох для плотной строки, где сдвиг на два пиксела читается как дрожание
   таблицы. Здесь только сброс подчёркивания и видимый фокус. */
.bb-cardlink:focus-visible { outline: 2px solid var(--bb-accent); outline-offset: 2px; }

/* ─────────── Лента: показали четыре, сдвинули на одну ───────────
   Второй механизм рядом с партиями, и разница не в оформлении. Партия из
   четырёх у штаба из семи человек дала бы четыре и три — второй «экран»
   стоял бы полупустым. Шаг в одну плитку такого не даёт: плитки уезжают
   влево по одной, и полупустого экрана не возникает никогда.

   Без скрипта лента остаётся сеткой темы, а лишние плитки обрезает то же
   правило `bb-rot--d4`, что и у партий. Со скриптом сетка превращается в
   ленту, и ширину плитки задаёт JS: она зависит от отступа, а отступы у
   четырёх тем разные — зашитое число в CSS увело бы одну из них. */
.bb-slidevp--js {
  overflow: hidden;
  /* Место под тень карточки сверху и снизу: overflow срезал бы её вместе с
     уехавшими плитками. По горизонтали срез и нужен. */
  padding: 6px 0 14px;
  margin: -6px 0 -14px;
}

.bb-slide--js {
  display: flex;
  flex-wrap: nowrap;
  transform: translateX(0);
  transition: transform .42s cubic-bezier(.22, .61, .36, 1);
  will-change: transform;
}

.bb-slide--js > * { flex: 0 0 var(--bb-tile, 25%); min-width: 0; }

/* ─────────── Раскрытие длинного списка ───────────
   Кнопку делает скрипт: без скрипта список приходит полным, и кнопка, которая
   ничего не сворачивает, была бы хуже её отсутствия. */
.bb-more {
  display: block;
  margin: 14px auto 0;
  padding: 10px 22px;
  border: 1px solid var(--bb-line);
  border-radius: 999px;
  background: var(--bb-surface);
  color: var(--bb-ink);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}

.bb-more::after { content: '\25BE'; margin-inline-start: 8px; font-size: 11px; }
.bb-more.is-open::after { content: '\25B4'; }

.bb-more:hover {
  background: var(--bb-brand);
  border-color: var(--bb-brand);
  color: var(--bb-on-brand);
}

/* Строки проявляются по очереди: одновременное появление десяти строк
   читается как рывок страницы, а не как раскрытие списка. */
@keyframes bb-reveal {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

.is-reveal {
  animation: bb-reveal .34s ease both;
  animation-delay: calc(var(--bb-step, 0) * 40ms);
}

/* ─────────── Календарь: переключение месяцев ─────────── */
.bb-calnav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  font-size: 20px;
  line-height: 1;
  opacity: .7;
  cursor: pointer;
  transition: background .18s ease, opacity .18s ease;
}

.bb-calnav:hover { opacity: 1; background: var(--bb-surface-2); }

/* Высоту сцены ведёт скрипт: в месяце бывает пять недель, а бывает шесть, и
   без этого блок дёргается на целую строку клеток. */
[data-bb-cal-stage] {
  position: relative;
  overflow: hidden;
  transition: height .3s ease;
}

[data-bb-month] { transition: opacity .28s ease, transform .28s ease; }
[data-bb-month].is-in-right { opacity: 0; transform: translateX(28px); }
[data-bb-month].is-in-left  { opacity: 0; transform: translateX(-28px); }

[data-bb-month].is-out-left,
[data-bb-month].is-out-right {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}

[data-bb-month].is-out-left  { transform: translateX(-28px); }
[data-bb-month].is-out-right { transform: translateX(28px); }

/* Плашка «данных пока нет» — сознательное исключение из правила пустоты.
   Правило верно для блоков, которые на странице не главные. Но на странице
   расписания молчание не ответ: читатель пришёл за «когда следующая игра», и
   пустая страница читается как поломка сайта. */
.bb-none {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 26px 22px;
  border: 1px dashed var(--bb-line);
  border-radius: 12px;
  background: var(--bb-surface);
}

.bb-none b { font-size: 15px; color: var(--bb-ink); }
.bb-none span { font-size: 13px; color: var(--bb-muted); max-width: 60ch; }

/* Месяц без игр. Календарь живёт по календарю, а не по данным: наступил
   сентябрь — показываем сентябрь, даже если играть в нём нечего. Пустая сетка
   из тридцати клеток без единого слова читается как поломка, поэтому месяц
   говорит о себе сам. */
.bb-calnone {
  margin: 14px 16px 4px;
  text-align: center;
  font-size: 13px;
  color: var(--bb-muted);
}

/* ─────────── Плитки командной статистики: геометрия ───────────
   Сколько плитка занимает — общее решение (ядро считает, сколько их всего).
   Как плитка выглядит в этом размере — своё у каждой темы. */
.bb-t-d1 { grid-column: span 12; text-align: center; }
.bb-t-d2 { grid-column: span 6; }
.bb-t-d3 { grid-column: span 4; }
.bb-t-d4 { grid-column: span 3; }

@media (max-width: 640px) {
  .bb-t-m1 { grid-column: span 12; text-align: center; }
  .bb-t-m2 { grid-column: span 6; }
  /* Плитка широкая на десктопе, но парная на мобильной, не должна остаться
     по центру рядом с прижатой к краю соседкой. */
  .bb-t-d1.bb-t-m2 { text-align: start; }
}

@media (prefers-reduced-motion: reduce) {
  .bb-rot--js,
  .bb-slide--js,
  .bb-cardlink,
  .bb-more,
  .bb-calnav,
  [data-bb-month],
  [data-bb-cal-stage] { transition: none; }
  .bb-rot__dot { transition: none; }
  .is-reveal { animation: none; }
}

/* ─────────── Ссылка «весь состав» под блоком ───────────
   Партия показывает шесть игроков из пятнадцати. Ждать, пока ротация дойдёт
   до нужного, — не работа читателя: рядом должна быть дверь в полный список. */
.bb-alllink {
  display: block;
  width: fit-content;
  margin: 14px auto 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--bb-accent);
  text-decoration: none;
}

.bb-alllink::after { content: ' \2192'; }
.bb-alllink:hover { text-decoration: underline; }
/* ═══ ЧЕРНИЛА И ВУАЛЬ — ОТ ПОВЕРХНОСТИ, А НЕ ЛИТЕРАЛОМ ═══
   Здесь стояло `--bb-ink: #fff` двенадцать раз. Это совпадало с истиной, только
   пока клубный primary тёмный: на золотом #e7c524 вышло белым по золоту, а тема
   при этом СЧИТАЛА правильно — её `fnwv5_on_color()` для золота отдаёт тёмные
   чернила #111111 (относительная яркость 0.755 против порога 0.6).

   Теперь каждая клубная поверхность берёт чернила у темы (`--fnwv5-on-primary`,
   `--fnwv5-on-theme`), а приглушённый текст, линии и вуали выводятся из этих же
   чернил через color-mix. Вуаль — ПРОТИВОПОЛОЖНОСТЬ чернилам (`--fnwv5-veil`):
   она обязана уводить заливку от текста, а не к нему; чёрная вуаль на светлой
   заливке тянула её в середину яркости и убивала обе стороны.

   ⛔ Правило слоя краски: роли чернил (`--bb-ink`, `--bb-muted`, `--bb-accent`,
   `--bb-accent-data`, `--bb-line`) НЕ присваиваются литеральным цветом. Только
   var() от токена поверхности. Проверяется грепом в bb_blocks_all_test.php.

   Пороги не выдумываем: тема тянет акцент через fnwv5_readable_accent — ниже
   ΔL* 30 вмешивается, тянет до 35. Мера откалибрована на 259 живых оценках
   владельца (Clubs-Wiki/mechanisms/contrast-repair-process). */

/* ═══ КЛУБНАЯ КРАСКА V5 ═══
   Срисовано с боевого assets/css/v5-design.css, а не придумано.

   Главное, что я упустил в прошлый раз: в V5 карточка матча, строка матча,
   выделенный матч и обёртка таблицы — это НЕ белые листы с тонким акцентом.
   Это панели клубного цвета с ТРЁХСЛОЙНЫМ фоном и медленной анимацией:

     .fnwv5-mc-feat  — штриховка 135° + тёмная вуаль + рампа primary, 18 с
     .fnwv5-mc-row   — вуаль + рампа primary, 16 с
     .fnwv5-fx-card  — вуаль + рампа primary, 17 с
     .fnwv5-ltable-wrap — то же, 240% 240%
     .fnwv5-ltable thead th — linear-gradient(180deg, primary-dark, primary-deep)
     .fnwv5-player   — radial-gradient(120% 95% at 50% 0%, theme-hi, theme, theme-deep)

   А плитки внутри (.fnwv5-standing__bigtile, __tile) — наоборот, полупрозрачный
   ЧЁРНЫЙ поверх клубной заливки: rgba(0,0,0,.24) и rgba(0,0,0,.18).
   То есть краска идёт крупными панелями, а не точечными акцентами. */

@keyframes bb-move {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ── панель клубного цвета: общий приём темы ── */
.bb-v5 .v5-feat,
.bb-v5 .v5-row,
.bb-v5 .v5-sheet,
.bb-v5 .v5-standing,
.bb-v5 .v5-pair {
  position: relative;
  z-index: 2;
  border: 1px solid color-mix(in srgb, var(--bb-on-primary, var(--fnwv5-on-primary, #fff)) 10%, transparent);
  background:
    linear-gradient(160deg, color-mix(in srgb, var(--bb-veil, var(--fnwv5-veil, #000)) 16%, transparent), color-mix(in srgb, var(--bb-veil, var(--fnwv5-veil, #000)) 46%, transparent)),
    linear-gradient(135deg, var(--bb-cardlo, var(--fnwv5-primary-deep, #0b1f16)),
                            var(--fnwv5-primary, #1b4332) 50%,
                            var(--bb-cardhi, var(--fnwv5-primary-hi, #2c6a52)));
  background-size: 100% 100%, 220% 220%;
  animation: bb-move 16s ease-in-out infinite;
  box-shadow: 0 16px 38px color-mix(in srgb, var(--bb-veil, var(--fnwv5-veil, #000)) 30%, transparent);
  color: var(--bb-on-primary, var(--fnwv5-on-primary, #fff));

  /* Внутри клубной панели всё строится от её собственного текста. */
  --bb-ink: var(--bb-on-primary, var(--fnwv5-on-primary, #fff));

  /* ⛔ Эти три ПОВТОРЕНЫ здесь нарочно. В tokens.css они посчитаны от
     чернил СТРАНИЦЫ: var() в значении переменной подставляется там, где
     переменная объявлена, поэтому строчка `--bb-ink` выше сама по себе
     их не меняет. Без повтора «WIN» остаётся светло-мятным на клубной
     заливке, где чернила чёрные. */
  --bb-brand2-ink: color-mix(in srgb, var(--bb-brand2-base) 40%, var(--bb-ink));
  --bb-win-ink: color-mix(in srgb, var(--bb-win-base) 30%, var(--bb-ink));
  --bb-loss-ink: color-mix(in srgb, var(--bb-loss-base) 30%, var(--bb-ink));
  --bb-live-ink: color-mix(in srgb, var(--bb-live-base) 30%, var(--bb-ink));
  --bb-muted: color-mix(in srgb, var(--bb-on-primary, var(--fnwv5-on-primary, #fff)) 74%, transparent);
  --bb-line: color-mix(in srgb, var(--bb-on-primary, var(--fnwv5-on-primary, #fff)) 18%, transparent);
  --bb-ground: color-mix(in srgb, var(--bb-veil, var(--fnwv5-veil, #000)) 18%, transparent);
  --bb-surface: color-mix(in srgb, var(--bb-veil, var(--fnwv5-veil, #000)) 24%, transparent);
  --bb-surface-2: color-mix(in srgb, var(--bb-veil, var(--fnwv5-veil, #000)) 34%, transparent);
  --bb-accent: var(--fnwv5-acc-brandcard, var(--bb-on-primary, var(--fnwv5-on-primary, #fff)));
  --bb-accent-data: var(--fnwv5-acc-brandcard-data, var(--bb-on-primary, var(--fnwv5-on-primary, #fff)));
  --bb-mine: color-mix(in srgb, var(--bb-on-primary, var(--fnwv5-on-primary, #fff)) 14%, transparent);
}

/* Выделенный матч — с диагональной штриховкой, как в теме. */
.bb-v5 .v5-feat {
  background:
    repeating-linear-gradient(135deg, color-mix(in srgb, var(--bb-on-primary, var(--fnwv5-on-primary, #fff)) 5%, transparent) 0 2px, transparent 2px 26px),
    linear-gradient(160deg, color-mix(in srgb, var(--bb-veil, var(--fnwv5-veil, #000)) 12%, transparent), color-mix(in srgb, var(--bb-veil, var(--fnwv5-veil, #000)) 42%, transparent)),
    linear-gradient(135deg, var(--bb-cardlo, var(--fnwv5-primary-deep, #0b1f16)),
                            var(--fnwv5-primary, #1b4332) 50%,
                            var(--bb-cardhi, var(--fnwv5-primary-hi, #2c6a52)));
  background-size: auto, 100% 100%, 220% 220%;
  animation-duration: 18s;
  box-shadow: 0 18px 40px color-mix(in srgb, var(--bb-veil, var(--fnwv5-veil, #000)) 32%, transparent);
}

/* Обёртка таблицы — та же панель, но растяжка шире. */
.bb-v5 .v5-sheet { background-size: 100% 100%, 240% 240%; animation-duration: 20s; }

/* Полная таблица на своей странице — диагональная штриховка поверх градиента.
   Ровно приём футбольной V5 (`fnwv5-ltable-wrap`): полоски рисует ОБЁРТКА, а
   строки остаются прозрачными. Если дать градиент каждой строке, вся таблица
   идёт рябью — двадцать восемь независимых анимаций в столбик.
   Плотность полосок берётся от ЧЕРНИЛ поверхности, а не от белого: на светлом
   клубном цвете белая штриховка не видна вовсе, а чёрная — видна. */
.bb-v5 .v5-sheet--stripe {
  background:
    repeating-linear-gradient(135deg,
      color-mix(in srgb, var(--bb-on-primary, var(--fnwv5-on-primary, #fff)) 4%, transparent) 0 2px,
      transparent 2px 30px),
    linear-gradient(160deg, color-mix(in srgb, var(--bb-veil, var(--fnwv5-veil, #000)) 14%, transparent),
                            color-mix(in srgb, var(--bb-veil, var(--fnwv5-veil, #000)) 44%, transparent)),
    linear-gradient(135deg, var(--bb-cardlo, var(--fnwv5-primary-deep, #0b1f16)),
                            var(--fnwv5-primary, #1b4332) 50%,
                            var(--bb-cardhi, var(--fnwv5-primary-hi, #2c6a52)));
  background-size: auto, 100% 100%, 240% 240%;
}

/* Строки ленты стоят вплотную: убираем двойную рамку и даём шаг. */
.bb-v5 .v5-rows { display: grid; gap: 10px; }
.bb-v5 .v5-row { border-radius: 12px; overflow: hidden; }
.bb-v5 .v5-row__date { border-right-color: color-mix(in srgb, var(--bb-on-primary, var(--fnwv5-on-primary, #fff)) 16%, transparent); }

/* Полоса клубного цвета слева, выезжающая при наведении — приём темы. */
.bb-v5 .v5-row::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--fnwv5-secondary, #d4af37);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform .28s ease;
}
.bb-v5 .v5-row:hover::before { transform: scaleY(1); }

/* ── плитки ВНУТРИ клубной панели: полупрозрачный чёрный ── */
.bb-v5 .v5-bigtile {
  background: color-mix(in srgb, var(--bb-veil, var(--fnwv5-veil, #000)) 24%, transparent);
  border: 1px solid color-mix(in srgb, var(--bb-on-primary, var(--fnwv5-on-primary, #fff)) 10%, transparent);
  transition: border-color .3s ease;
}
.bb-v5 .v5-bigtile:hover { border-color: var(--fnwv5-secondary, #d4af37); }
.bb-v5 .v5-tile,
.bb-v5 .v5-q {
  background: color-mix(in srgb, var(--bb-veil, var(--fnwv5-veil, #000)) 18%, transparent);
  border: 1px solid color-mix(in srgb, var(--bb-on-primary, var(--fnwv5-on-primary, #fff)) 8%, transparent);
}
.bb-v5 .v5-standing { border-radius: var(--v5-r); padding: 18px; }

/* ── шапка таблицы: своя ступень рампы ── */
.bb-v5 .v5-table thead th {
  background: linear-gradient(180deg, var(--fnwv5-primary-dark, #14301f),
                                      var(--bb-cardlo, var(--fnwv5-primary-deep, #0b1f16)));
  color: color-mix(in srgb, var(--bb-on-primary, var(--fnwv5-on-primary, #fff)) 82%, transparent);
}
.bb-v5 .v5-table td { border-top-color: color-mix(in srgb, var(--bb-on-primary, var(--fnwv5-on-primary, #fff)) 10%, transparent); }
.bb-v5 .v5-table tbody tr:hover { background: color-mix(in srgb, var(--bb-on-primary, var(--fnwv5-on-primary, #fff)) 6%, transparent); }
.bb-v5 .v5-me { background: color-mix(in srgb, var(--bb-on-primary, var(--fnwv5-on-primary, #fff)) 14%, transparent); box-shadow: inset 3px 0 0 var(--fnwv5-secondary, #d4af37); }

/* ── карточка игрока: радиальная рампа темы, как в v5-design.css ── */
.bb-v5 .v5-player {
  /* Рампа PRIMARY, а не theme. У футбольной V5 карточка игрока построена на
     theme, потому что там она лежит на странице цвета theme. У нас блок лежит
     на белом листе, и при светлом theme_color карточка выцветала почти до
     белого при белом же тексте — имена пропадали. Проверено рендером 04.09.
     Primary после притемнения читаем при любой оболочке. */
  background: radial-gradient(120% 95% at 50% 0%,
    color-mix(in srgb, var(--fnwv5-primary, #1b4332) 78%, #000),
    var(--fnwv5-primary, #1b4332) 46%,
    color-mix(in srgb, var(--fnwv5-primary, #1b4332) 42%, #000) 100%);
  border: 1px solid color-mix(in srgb, var(--bb-on-primary, var(--fnwv5-on-primary, #fff)) 10%, transparent);
  color: var(--bb-on-primary, var(--fnwv5-on-primary, #fff));
  --bb-ink: var(--bb-on-primary, var(--fnwv5-on-primary, #fff));
  --bb-brand2-ink: color-mix(in srgb, var(--bb-brand2-base) 40%, var(--bb-ink));
  --bb-win-ink: color-mix(in srgb, var(--bb-win-base) 30%, var(--bb-ink));
  --bb-loss-ink: color-mix(in srgb, var(--bb-loss-base) 30%, var(--bb-ink));
  --bb-live-ink: color-mix(in srgb, var(--bb-live-base) 30%, var(--bb-ink));
  --bb-muted: color-mix(in srgb, var(--bb-on-primary, var(--fnwv5-on-primary, #fff)) 72%, transparent);
  --bb-accent: var(--fnwv5-acc-brandcard, var(--fnwv5-secondary, #d4af37));
}
/* ── номер игрока: виден и на силуэте, и на настоящем снимке ──────────────
   Раньше здесь было семь процентов чернил — подложка, которую владелец не
   увидел вовсе. Читаемость держит не яркость, а ПАРА: цвет чернил поверхности
   и тень цвета вуали. На светлом силуэте работает цвет, на тёмном снимке —
   тень. Цифра декоративная (aria-hidden), поэтому порог ΔL* к ней не
   применяется, но выглядеть она обязана нарочно поставленной. */
.bb-v5 .v5-player__bg {
  /* 74%, а не 62%: сканер читаемости мерил номер на карточке в 27.3-27.9 при
     пороге 30. Он декоративный (aria-hidden, дублирует ярлык «№ 31»), но
     держать цифру ниже порога незачем — она крупная и её читают. */
  color: color-mix(in srgb, var(--bb-on-primary, var(--fnwv5-on-primary, #fff)) 74%, transparent);
  text-shadow: 0 2px 14px color-mix(in srgb, var(--bb-veil, var(--fnwv5-veil, #000)) 62%, transparent);
}

/* ── силуэт: место под портрет ────────────────────────────────────────────
   Заливка от ЧЕРНИЛ ПОВЕРХНОСТИ, а не от бренда: карточка игрока и плитка
   лидера объявляют свои `--bb-ink` (белые чернила на клубной заливке), и
   силуэт обязан следовать за ними. Фиксированный цвет пропал бы на одной из
   двух поверхностей. 18% — виден как место, но не спорит с подписями. */
/* ⛔ РАЗМЫТИЕ — ЧАСТЬ ЗАМЫСЛА, а не украшение. Требование владельца звучало
   буквально: «тень реального человека». Обвод с бритвенно резким краем читается
   значком независимо от того, насколько верно нарисован; полтора пикселя
   размытия превращают его в тень. Значение мелкое нарочно: при большем силуэт
   расползается в пятно и перестаёт быть человеком. */
.bb-v5 .bb-sil {
  fill: color-mix(in srgb, var(--bb-ink) 20%, transparent);
  filter: blur(1.6px);
}
/* ⛔ ПОДСВЕТКИ ПОД ФИГУРОЙ ЗДЕСЬ БЫЛА — И БЫЛА ОШИБКОЙ. Градиент второго
   цвета под нижней половиной силуэта читался не подсветкой, а посторонним
   оранжевым прямоугольником в правой половине карточки: у него был свой
   край, и край был виден. Место под портрет должно быть тихим: единственное,
   что его выдаёт, — сам силуэт. */

/* Кружок-заглушка герба на клубной поверхности: должен быть виден и пустым,
   иначе при появлении гербов сетка поедет. */
.bb-v5 .bb-crest--mono {
  background: color-mix(in srgb, var(--bb-ink) 12%, transparent);
  color: var(--bb-ink);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bb-ink) 20%, transparent);
}

/* ── лидеры и награды: плитка на клубной заливке ── */
.bb-v5 .v5-ldr {
  background:
    linear-gradient(160deg, color-mix(in srgb, var(--bb-veil, var(--fnwv5-veil, #000)) 10%, transparent), color-mix(in srgb, var(--bb-veil, var(--fnwv5-veil, #000)) 40%, transparent)),
    linear-gradient(135deg, var(--bb-cardlo, var(--fnwv5-primary-deep, #0b1f16)), var(--fnwv5-primary, #1b4332));
  border: 1px solid color-mix(in srgb, var(--bb-on-primary, var(--fnwv5-on-primary, #fff)) 10%, transparent);
  color: var(--bb-on-primary, var(--fnwv5-on-primary, #fff));
  --bb-ink: var(--bb-on-primary, var(--fnwv5-on-primary, #fff));
  --bb-brand2-ink: color-mix(in srgb, var(--bb-brand2-base) 40%, var(--bb-ink));
  --bb-win-ink: color-mix(in srgb, var(--bb-win-base) 30%, var(--bb-ink));
  --bb-loss-ink: color-mix(in srgb, var(--bb-loss-base) 30%, var(--bb-ink));
  --bb-live-ink: color-mix(in srgb, var(--bb-live-base) 30%, var(--bb-ink));
  --bb-muted: color-mix(in srgb, var(--bb-on-primary, var(--fnwv5-on-primary, #fff)) 72%, transparent);
  --bb-accent: var(--fnwv5-acc-brandcard, var(--fnwv5-secondary, #d4af37));
}

/* ── месячный разделитель: штрих клубного цвета и гаснущая линия ── */
.bb-v5 .v5-monthhead::before {
  content: "";
  width: 30px; height: 3px;
  background: var(--fnwv5-primary, #1b4332);
  flex-shrink: 0;
}
.bb-v5 .v5-monthhead i {
  background: linear-gradient(90deg, var(--fnwv5-primary, #1b4332),
                                     var(--fnwv5-line, rgba(0,0,0,.12)) 55%, transparent);
}

/* ── чипы и календарь ── */
.bb-v5 .v5-chip--on {
  background: linear-gradient(135deg, var(--fnwv5-primary, #1b4332), var(--fnwv5-primary-dark, #14301f));
  border-color: transparent;
  color: var(--bb-on-primary, var(--fnwv5-on-primary, #fff));
}
.bb-v5 .v5-calday--has {
  background: linear-gradient(160deg,
    color-mix(in srgb, var(--fnwv5-primary, #1b4332) 22%, transparent),
    color-mix(in srgb, var(--fnwv5-primary, #1b4332) 8%, transparent));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fnwv5-primary, #1b4332) 26%, transparent);
}

@media (prefers-reduced-motion: reduce) {
  .bb-v5 .v5-feat,
  .bb-v5 .v5-row,
  .bb-v5 .v5-sheet,
  .bb-v5 .v5-standing,
  .bb-v5 .v5-pair { animation: none; background-size: auto, 100% 100%, 100% 100%; }
  .bb-v5 .v5-row::before { transition: none; }
}

/* ── Найдено осмотром блоков по одному, 04.09.2026 ── */

/* Свой клуб в сетке плей-офф не отмечался: краска подключается ПОСЛЕ и её
   рамка перебивала `.v5-pair--me`. Все три пары выглядели одинаково, хотя в
   каждой играл наш клуб. Возвращаем метку здесь — в самом позднем слое. */
.bb-v5 .v5-pair.v5-pair--me {
  /* Два класса в селекторе не для красоты: правило клубной панели выше
     объявляет свою тень, и метка своего клуба его не перебивала. */
  border-color: var(--fnwv5-secondary, #d4af37);
  box-shadow: inset 4px 0 0 var(--fnwv5-secondary, #d4af37), 0 16px 38px color-mix(in srgb, var(--bb-veil, var(--fnwv5-veil, #000)) 30%, transparent);
}

/* День с матчем почти не отличался от пустого: подсветка тонула на клубной
   панели. Теперь у него своя заливка вторым цветом и полоса сверху, а у пустых
   дней число приглушено — разница видна с одного взгляда. */
.bb-v5 .v5-calday {
  background: color-mix(in srgb, var(--bb-veil, var(--fnwv5-veil, #000)) 22%, transparent);
  border: 1px solid color-mix(in srgb, var(--bb-on-primary, var(--fnwv5-on-primary, #fff)) 6%, transparent);
}
.bb-v5 .v5-calday .v5-caln { color: color-mix(in srgb, var(--bb-on-primary, var(--fnwv5-on-primary, #fff)) 45%, transparent); }
.bb-v5 .v5-calday--out { background: transparent; border-color: transparent; }
.bb-v5 .v5-calday--has {
  background: linear-gradient(160deg,
    color-mix(in srgb, var(--fnwv5-secondary, #d4af37) 26%, transparent),
    color-mix(in srgb, var(--bb-veil, var(--fnwv5-veil, #000)) 18%, transparent) 70%);
  border-color: color-mix(in srgb, var(--fnwv5-secondary, #d4af37) 44%, transparent);
  box-shadow: inset 0 2px 0 var(--fnwv5-secondary, #d4af37);
}
.bb-v5 .v5-calday--has .v5-caln { color: var(--bb-on-primary, var(--fnwv5-on-primary, #fff)); font-weight: 800; }
.bb-v5 .v5-calday--has .v5-calm { color: color-mix(in srgb, var(--bb-on-primary, var(--fnwv5-on-primary, #fff)) 82%, transparent); }

/* Кружок под фотографию на клубной заливке.
   Подложка считалась подмесом бренда в прозрачность и на клубной панели
   пропадала: инициалы висели в воздухе и читались как вторая подпись, а не
   как место под портрет. Слот должен быть виден и пустым — тогда при появлении
   фотографий сетка не поедет. */
.bb-v5 .bb-photo {
  background: color-mix(in srgb, var(--bb-on-primary, var(--fnwv5-on-primary, #fff)) 14%, transparent);
  color: var(--bb-on-primary, var(--fnwv5-on-primary, #fff));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bb-on-primary, var(--fnwv5-on-primary, #fff)) 18%, transparent);
}

/* ─────────── Отыгранный день и предстоящий ───────────
   Разница между «уже сыграли» и «ещё сыграем» — главное, что читают в
   календаре, и держать её только на том, что в одной клетке счёт, а в другой
   время, нельзя: клетки выглядели одинаково золотыми (найдено рендером
   смешанного месяца). Предстоящий день держит клубную рамку и получает
   обводку; отыгранный уходит в спокойную заливку. */
.bb-v5 .v5-calday--done {
  background: color-mix(in srgb, var(--bb-veil, var(--fnwv5-veil, #000)) 34%, transparent);
  border-color: color-mix(in srgb, var(--bb-on-primary, var(--fnwv5-on-primary, #fff)) 10%, transparent);
  box-shadow: none;
}

.bb-v5 .v5-calday--done .v5-caln { color: color-mix(in srgb, var(--bb-on-primary, var(--fnwv5-on-primary, #fff)) 58%, transparent); font-weight: 700; }

.bb-v5 .v5-calday--next {
  box-shadow: inset 0 2px 0 var(--fnwv5-secondary, #d4af37),
    0 0 0 1px color-mix(in srgb, var(--fnwv5-secondary, #d4af37) 62%, transparent);
}

/* ─────────── Полоса на клубной заливке: чернила от роли ───────────
   Тема кладёт клубный градиент в полосу «ближайшие матчи» и зашивает в неё
   белый текст модификатором `--light`. На тёмном клубном цвете это угадывает,
   на светлом (проверено на #e7c524) заголовок, ссылка и пустое состояние
   становятся белым по золоту. Это последняя нечитаемая область главной, и она
   вне блочного слоя — в самой теме. Здесь она приводится к общей роли. */
.bb-onbrand,
.bb-onbrand .fnwv5-h2,
.bb-onbrand .fnwv5-sec-link,
.bb-onbrand .fnwv5-matches-empty__title,
.bb-onbrand .fnwv5-matches-empty__icon { color: var(--bb-on-primary, #fff); }

.bb-onbrand .fnwv5-matches-empty {
  border-color: color-mix(in srgb, var(--bb-on-primary, #fff) 38%, transparent);
}

/* ═══════════════════════════════════════════════════════════════════════════
   ВТОРОЙ КЛУБНЫЙ ЦВЕТ КАК УКРАШЕНИЕ — ДЕСЯТЬ ПРИЁМОВ

   Владелец попросил задействовать секондари как дополнительный цвет по блокам,
   разными способами, и отдельно — с анимациями. Ниже десять приёмов, каждый на
   своём блоке, чтобы их было видно по отдельности и можно было выбрать.

   ⛔ Общее правило на все десять: секондари красит ЛИНИИ, КРОМКИ, УГОЛКИ и
   ПОДЛОЖКИ, а текстом становится только через `--bb-brand2-ink` — цвет,
   уведённый к чернилам той поверхности, где надпись лежит. Чистый #a50301 даёт
   на золоте ΔL* около 47 (годится), а на тёмной странице 19 (не годится), и
   разница видна только если считать от поверхности, а не от цвета.

   Движение: каждая анимация выключается при `prefers-reduced-motion`. Ни одна
   не двигает текст — только кромки, блики и подложки: буквы, которые ползают,
   читать нельзя.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. ПОДЧЁРКИВАНИЕ ЗАГОЛОВКА СЕКЦИИ ────────────────────────────────────
   Короткая полоса под H2, переходящая из секондари в клубный цвет. Даёт всем
   секциям общий ритм и отделяет заголовок от блока без лишней рамки. */
.bb-sec .fnwv5-sec-head .fnwv5-h2,
.fnwv5-mc-h {
  position: relative;
  padding-bottom: 14px;
}

.bb-sec .fnwv5-sec-head .fnwv5-h2::after,
.fnwv5-mc-h::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 74px;
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--bb-brand2) 0%, var(--fnwv5-primary) 100%);
}

.fnwv5-mc-h--center::after { left: 50%; transform: translateX(-50%); }

[dir="rtl"] .bb-sec .fnwv5-sec-head .fnwv5-h2::after,
[dir="rtl"] .fnwv5-mc-h::after {
  left: auto;
  right: 0;
  background: linear-gradient(270deg, var(--bb-brand2) 0%, var(--fnwv5-primary) 100%);
}

/* ── 2. УГОЛОК НА ВЫДЕЛЕННОМ МАТЧЕ ────────────────────────────────────────
   Треугольный клин в начале карточки: тот же приём, что у спортивных афиш.
   Не мешает тексту — карточка внутри имеет свой отступ. */
.bb-v5 .v5-feat,
.fnwv5-mc-feat {
  position: relative;
  overflow: hidden;
}

.bb-v5 .v5-feat::before,
.fnwv5-mc-feat::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 96px;
  height: 96px;
  background: var(--bb-brand2);
  clip-path: polygon(0 0, 100% 0, 0 100%);
  opacity: 0.9;
}

[dir="rtl"] .bb-v5 .v5-feat::before,
[dir="rtl"] .fnwv5-mc-feat::before {
  left: auto;
  right: 0;
  clip-path: polygon(0 0, 100% 0, 100% 100%);
}

/* ── 3. КРОМКА СВЕРХУ У КЛУБНОГО ЛИСТА ────────────────────────────────────
   Тонкая линия по верху таблицы и статистики: лист перестаёт «висеть». */
.bb-v5 .v5-sheet {
  border-top: 3px solid var(--bb-brand2);
}

/* ── 4. РАЗДЕЛИТЕЛЬ МЕСЯЦА ────────────────────────────────────────────────
   Линия месяца уходит из секондари в прозрачность — видно, где начинается
   новый месяц, без второй подписи. */
.bb-v5 .v5-monthhead i {
  background: linear-gradient(90deg, var(--bb-brand2), transparent 88%);
}

.bb-v5 .v5-monthhead span {
  color: var(--bb-brand2-ink);
}

/* ── 5. НОМЕР ИГРОКА В КОЛЬЦЕ ─────────────────────────────────────────────
   Кружок с номером получает обод второго цвета: карточки состава перестают
   быть однотонными плитками. */
.bb-v5 .v5-player__jersey {
  border: 1.5px solid color-mix(in srgb, var(--bb-brand2) 62%, transparent);
  border-radius: 999px;
  padding: 2px 9px;
}

/* ── 6. ТОЧКИ ЛЕНТЫ ───────────────────────────────────────────────────────
   Активная точка — второго цвета и крупнее: видно, где ты в ленте. */
.bb-rot__dot.is-on {
  background: var(--bb-brand2);
  transform: scale(1.35);
}

.bb-rot__dot {
  transition: transform .2s ease, background .2s ease;
}

/* ── 7. ПОДЛОЖКА У КНОПКИ «ПОКАЗАТЬ ВСЕХ» ─────────────────────────────────
   Кнопка получает мягкую подложку второго цвета и его же кромку: раньше она
   сливалась с фоном страницы. */
.bb-more {
  background: var(--bb-brand2-soft);
  border: 1px solid color-mix(in srgb, var(--bb-brand2) 46%, transparent);
  color: var(--bb-brand2-ink);
}

.bb-more:hover {
  background: color-mix(in srgb, var(--bb-brand2) 26%, transparent);
}

/* ── 8. КЛЕТКА КАЛЕНДАРЯ С МАТЧЕМ ─────────────────────────────────────────
   У дня с игрой — кромка второго цвета слева; у отыгранного она приглушена,
   у предстоящего полная. Разница читается без счёта и времени. */
.bb-v5 .v5-calday--has {
  box-shadow: inset 3px 0 0 color-mix(in srgb, var(--bb-brand2) 55%, transparent);
}

.bb-v5 .v5-calday--next {
  box-shadow: inset 3px 0 0 var(--bb-brand2);
}

[dir="rtl"] .bb-v5 .v5-calday--has {
  box-shadow: inset -3px 0 0 color-mix(in srgb, var(--bb-brand2) 55%, transparent);
}

[dir="rtl"] .bb-v5 .v5-calday--next {
  box-shadow: inset -3px 0 0 var(--bb-brand2);
}

/* ── 9. КРУПНАЯ ПЛИТКА СВОДКИ ─────────────────────────────────────────────
   Место и баланс получают тонкую рамку второго цвета: главные два числа
   отделяются от остальных без увеличения кегля. */
.bb-v5 .v5-bigtile {
  border: 1px solid color-mix(in srgb, var(--bb-brand2) 40%, transparent);
}

.bb-v5 .v5-bigtile .v5-biglbl {
  color: var(--bb-brand2-ink);
}

/* ── 10. ПАРА В СЕТКЕ ПЛЕЙ-ОФФ ────────────────────────────────────────────
    Пара со своим клубом уже помечена полосой; остальным парам дадим тонкую
    кромку второго цвета снизу, чтобы сетка читалась как сетка. */
.bb-v5 .v5-pair {
  border-bottom: 2px solid color-mix(in srgb, var(--bb-brand2) 34%, transparent);
}

/* ═══════════════════════════════════════════════════════════════════════════
   ДВИЖЕНИЕ: ПЯТЬ ПРИЁМОВ

   ⛔ Ни одна анимация не двигает и не перекрашивает текст. Двигаются кромки,
   блики и подложки — то, что можно не заметить и от чего ничего не зависит.
   ═══════════════════════════════════════════════════════════════════════════ */

/* A. Полоса «мой клуб» в таблице медленно дышит — строку видно, не выделяя её
      цветом сильнее остальных. */
@keyframes bb-brand2-breathe {
  0%, 100% { box-shadow: inset 3px 0 0 var(--bb-brand2); }
  50%      { box-shadow: inset 5px 0 0 var(--bb-brand2); }
}

.bb-v5 .v5-me {
  animation: bb-brand2-breathe 3.6s ease-in-out infinite;
}

/* B. По разделителю месяца пробегает блик — вся лента результатов оживает
      одной деталью. */
@keyframes bb-brand2-sweep {
  0%   { background-position: -140% 0; }
  100% { background-position: 240% 0; }
}

.bb-v5 .v5-monthhead i {
  background:
    linear-gradient(90deg, transparent 0%,
      color-mix(in srgb, var(--bb-brand2) 85%, transparent) 45%, transparent 90%),
    linear-gradient(90deg, var(--bb-brand2), transparent 88%);
  background-size: 60% 100%, 100% 100%;
  background-repeat: no-repeat, no-repeat;
  animation: bb-brand2-sweep 5.2s linear infinite;
}

/* C. Уголок выделенного матча разворачивается при наведении. */
.bb-v5 .v5-feat::before,
.fnwv5-mc-feat::before {
  transition: width .35s cubic-bezier(.22,.61,.36,1), height .35s cubic-bezier(.22,.61,.36,1);
}

.bb-v5 .v5-feat:hover::before,
.fnwv5-mc-feat:hover::before {
  width: 132px;
  height: 132px;
}

/* D. Кромка сверху у клубного листа переливается из второго цвета в клубный. */
@keyframes bb-brand2-edge {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

.bb-v5 .v5-sheet {
  border-top: 0;
  position: relative;
}

.bb-v5 .v5-sheet::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 3px;
  z-index: 3;
  background: linear-gradient(90deg, var(--bb-brand2), var(--fnwv5-primary), var(--bb-brand2));
  background-size: 220% 100%;
  animation: bb-brand2-edge 9s ease-in-out infinite;
}

/* E. Точка ленты, к которой лента едет, слегка пульсирует. */
@keyframes bb-brand2-dot {
  0%, 100% { transform: scale(1.35); }
  50%      { transform: scale(1.6); }
}

.bb-rot__dot.is-on {
  animation: bb-brand2-dot 2.4s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .bb-v5 .v5-me,
  .bb-v5 .v5-monthhead i,
  .bb-v5 .v5-sheet::before,
  .bb-rot__dot.is-on {
    animation: none;
  }
  .bb-v5 .v5-monthhead i {
    background: linear-gradient(90deg, var(--bb-brand2), transparent 88%);
  }
}

/* ── КНОПКА ПРОТОКОЛА ─────────────────────────────────────────────────────
   ⛔ Кнопка «Box score» стояла клубным цветом на клубной заливке и еле
   читалась — та же болезнь, что была у «VS». Берём чернила поверхности и
   подложку от второго клубного цвета: кнопка становится видимой кнопкой, а не
   подписью. */
.bb-v5 .fnwbb-boxbtn,
.fnwv5-mc-feat .fnwbb-boxbtn,
.fnwv5-mcard .fnwbb-boxbtn {
  color: var(--bb-ink, var(--fnwv5-on-primary, #fff));
  background: var(--bb-brand2-soft);
  border: 1px solid color-mix(in srgb, var(--bb-brand2) 50%, transparent);
  border-radius: 999px;
  padding: 5px 13px;
  text-decoration: none;
  font-weight: 700;
  transition: background .2s ease, border-color .2s ease;
}

.bb-v5 .fnwbb-boxbtn:hover,
.fnwv5-mc-feat .fnwbb-boxbtn:hover,
.fnwv5-mcard .fnwbb-boxbtn:hover {
  background: color-mix(in srgb, var(--bb-brand2) 30%, transparent);
  border-color: var(--bb-brand2);
}