/* ============================================================
   Страница матча.

   Отдельный файл, а не раздел app.css: странице федерации это
   оформление не нужно ни на одной из её вкладок, а подмена экрана
   работает только внутри одной страницы — значит и возить его
   с собой незачем.

   Подключается после app.css, поэтому переменные и общие классы
   уже определены.
   ============================================================ */

/* --- шапка матча ------------------------------------------
   Живёт вне блока экрана и заменяется целиком: внутри блоков она
   копилась бы вместе с ними. */

.game-bar {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}

.game-bar__title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0 8px;
  border-bottom: 2px solid var(--accent-line);
}

.game-bar__match {
  margin: 0;
  font-size: var(--fs-base);
  font-weight: 700;
  line-height: 1.3;
  text-transform: uppercase;
}

.game-bar__tournament { color: var(--text); text-decoration: none; }
.game-bar__tournament:hover { color: var(--accent); }

.game-bar__detail {
  font-weight: 600;
  color: var(--text-soft);
}

.game-bar__date {
  flex: none;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--loss);
  white-space: nowrap;
}

/* Счёт по центру, кнопки документов под ним по краям — как
   в старой версии. Одна колонка на любой ширине: на узком экране
   кнопки просто сходятся. */
.game-bar__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 0;
}

.game-bar__documents {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  order: 2;
}

.game-bar__score { order: 1; }

.game-bar__document {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-sm);
  color: var(--accent);
  text-decoration: none;
}

.game-bar__document:hover { color: var(--accent-hi); }
.game-bar__document-icon { display: inline-flex; }

/* --- счёт -------------------------------------------------

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

.game-score__teams {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
}

.game-score__side {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 0;
}

.game-score__logo {
  width: 48px;
  height: 48px;
  object-fit: contain;
}

.game-score__name {
  max-width: 100%;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--text);
  text-align: center;
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.game-score__name:hover { color: var(--accent); }

.game-score__center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.game-score__flag { color: var(--text-soft); display: inline-flex; }

.game-score__live {
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--live);
}

.game-score__total {
  font-size: var(--fs-xl);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.game-score__colon { color: var(--text-mute); }

/* Периоды растянуты по всей ширине: так они читаются как шкала
   матча, а не как отдельная таблица.

   Каждый — ссылка на своё место в ленте: у разделителя «Начался
   период N» стоит якорь. Ради этого якоря и расставлялись. */
.game-score__periods {
  display: flex;
  justify-content: space-around;
  gap: 6px;
  margin-top: 10px;
  flex-wrap: wrap;
}

.game-score__period {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 4px 10px;
  font-size: var(--fs-sm);
  color: var(--accent);
  text-decoration: none;
  border-radius: 6px;
  scroll-margin-top: 12px;
}

a.game-score__period:hover {
  background: var(--accent-soft);
  color: var(--accent-hi);
}

.game-score__period-title { white-space: nowrap; }

.game-score__period-score {
  font-size: var(--fs-md);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}

/* Счёт текущего периода мигает только у идущего матча:
   у завершённого мигать нечему. */
.game-score--live .game-score__period--current .game-score__period-score {
  animation: game-score-blink 1.4s ease-in-out infinite;
}

@keyframes game-score-blink {
  50% { opacity: 0.25; }
}

@media (prefers-reduced-motion: reduce) {
  .game-score--live .game-score__period--current .game-score__period-score {
    animation: none;
    color: var(--live);
  }
}

/* --- вкладки матча ----------------------------------------
   Подписей две. «Карта бросков» — двенадцать знаков, пять таких
   в строку на 390 px не встают, поэтому там показывается короткий
   вариант. Значок вместо слова не годится: карту бросков без
   подписи не узнать. */

.game-tabs {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
}

.game-tabs::-webkit-scrollbar { display: none; }

.game-tabs__link {
  padding: 8px 10px;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-soft);
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
}

.game-tabs__link:hover { color: var(--accent); }

.game-tabs__link[aria-current="page"] {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.game-tabs__short { display: none; }

/* --- лента и фильтр -----------------------------------------

   Оба блока лежат на своей поверхности, а не прямо на фоне
   страницы. Без этого они сливались с ней в одно бесформенное
   пятно — и заодно пропадала полосатость: в светлой теме
   --surface-alt и --bg это один и тот же цвет, поэтому зебра
   на фоне страницы была видна только в тёмной теме. */

.protocol__feed,
.protocol-filter {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: var(--shadow-card);
}

.protocol__feed {
  max-width: 1000px;
  padding: 6px;
  overflow: hidden;
}

/* --- строка события ------------------------------------------

   Сетка, и она разная по ширине — ровно на той же границе, где
   появляется фильтр.

   УЗКИЙ ЭКРАН (по умолчанию). Фильтр спрятан, лента занимает весь
   экран, поэтому ось симметрии проходит по центру экрана. Время
   встаёт под счётом, в той же средней колонке.

   ШИРОКИЙ ЭКРАН. Слева стоит фильтр, лента и так смещена вправо,
   и ось симметрии по центру экрана всё равно не проходит. Значит
   держаться за неё незачем: время уезжает в свой столбец слева,
   как отметка времени в любой хронологической ленте, и больше не
   спорит со счётом. Пустого столбца-противовеса справа нет
   намеренно — он ничего не выравнивал бы, только тратил место.

   Из-за этого время и счёт — соседние элементы разметки, а не
   вложенные: положение им задаёт сетка, а не порядок в шаблоне. */

.protocol-row {
  display: grid;
  grid-template-columns: 1fr 4.6rem 1fr;
  grid-template-areas:
    "white score blue"
    "white time  blue";
  align-items: center;
  gap: 2px 8px;
  padding: 5px 8px;
  border-radius: 5px;
  font-size: var(--fs-sm);
  line-height: 1.35;
}

.protocol-row__side--white { grid-area: white; }
.protocol-row__side--blue  { grid-area: blue; }
.protocol-row__score       { grid-area: score; }
.protocol-row__time        { grid-area: time; }

@media (min-width: 992px) {
  .protocol-row {
    grid-template-columns: 4.4rem 1fr 5rem 1fr;
    grid-template-areas: "time white score blue";
    gap: 8px;
  }
}

/* Полоса задаётся классом, а не nth-child: события дописываются
   сверху, и при каждом обновлении вся лента меняла бы оттенок
   разом — раз в пять секунд она перемигивала бы целиком. */
.protocol-row--odd { background: var(--surface-alt); }

.protocol-row--goal { font-weight: 600; }

/* Событие привязано к моменту записи — кликается строка целиком.
   Значка перехода в строке нет: ссылка есть почти у каждого
   события, и полторы сотни одинаковых значков были бы сором. */
.protocol-row--video { cursor: pointer; }
.protocol-row--video:hover { background: var(--accent-soft); }

.protocol-row__side {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.protocol-row__side--blue { text-align: right; align-items: flex-end; }

.protocol-row__player {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  min-width: 0;
}

.protocol-row__side--blue .protocol-row__player { flex-direction: row-reverse; }

.protocol-row__number {
  font-variant-numeric: tabular-nums;
  color: var(--text-mute);
}

.protocol-row__name {
  color: var(--text);
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.protocol-row__name:hover { color: var(--accent); }

.protocol-row__event {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--fs-xs);
  color: var(--text-mute);
}

.protocol-row__side--blue .protocol-row__event { flex-direction: row-reverse; }

.protocol-row__icon { display: inline-flex; flex: none; }

/* Цвет значка задаётся элементу, а currentColor его подхватывает:
   собственный цвет мимо темы никому из них не понадобился.

   Жёлтого в наборе темы не было — заводим его здесь, рядом
   с единственным местом, где он нужен. Он именно жёлтый, а не
   песочный: карточка обязана читаться с одного взгляда. */
.protocol-row {
  --card-yellow: hsl(45 100% 45%);
}

[data-theme="dark"] .protocol-row {
  --card-yellow: hsl(46 100% 56%);
}

.protocol-row__event--goal { color: var(--win); }
.protocol-row__event--assist { color: var(--data-mark); }
.protocol-row__event--save { color: var(--data-mark); }

.protocol-row__event--card-yellow { color: var(--card-yellow); }
.protocol-row__event--card-red { color: var(--loss); }

/* VAR: запрос нейтрален — решения ещё нет, и подкрашивать его
   значило бы подсказывать исход. Принят и отклонён — теми же
   цветами, что победа и поражение. */
.protocol-row__event--var,
.protocol-row__event--var-request { color: var(--text-mute); }
.protocol-row__event--var-ok { color: var(--win); }
.protocol-row__event--var-no { color: var(--loss); }

/* Счёт стоит там, где его и ищут глазами. */
.protocol-row__score {
  font-size: var(--fs-md);
  font-weight: 700;
  text-align: center;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* Время — с часами перед ним, чтобы число не читалось как счёт.
   Значок стоит в обоих видах: иначе он появлялся бы и исчезал
   вместе с шириной окна. */
.protocol-row__time {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  font-size: var(--fs-xs);
  color: var(--text-mute);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.protocol-row__clock { display: inline-flex; opacity: 0.75; }

@media (min-width: 992px) {
  .protocol-row__time { justify-content: flex-start; }
}

/* --- разделитель периода ----------------------------------
   Источник событий «начался период» не присылает — ставим сами
   при смене номера. Лента идёт от свежих к первым, поэтому
   разделитель стоит под событиями своего периода.

   scroll-margin — чтобы при переходе из шапки разделитель не
   вставал вплотную к верхней кромке. */

.protocol-period {
  margin: 6px 0;
  padding: 4px 8px;
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  text-align: center;
  color: var(--data-on-mark);
  background: var(--data-mark);
  border-radius: 4px;
  scroll-margin-top: 16px;
}

.protocol-period--penalty { background: var(--loss); }

/* --- фильтр -----------------------------------------------
   На широком экране стоит рядом с лентой: за неприметной кнопкой
   им никто не пользовался, а место справа всё равно пустовало.
   На узком прячется — он занимает столько же, сколько половина
   ленты. */

.protocol__filter-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  margin-bottom: 8px;
  padding: 9px 12px;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.protocol__filter-count {
  min-width: 18px;
  padding: 0 5px;
  font-size: var(--fs-xs);
  color: var(--on-accent);
  background: var(--accent);
  border-radius: 9px;
  text-align: center;
}

.protocol__filter { display: none; }
.protocol--filter-open .protocol__filter { display: block; }

.protocol-filter {
  padding: 10px 12px;
  font-size: var(--fs-sm);
}

.protocol-filter__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.protocol-filter__title {
  margin: 0;
  font-size: var(--fs-md);
  font-weight: 700;
}

.protocol-filter__reset {
  padding: 2px 8px;
  font-size: var(--fs-xs);
  color: var(--accent);
  background: none;
  border: 1px solid var(--line);
  border-radius: 4px;
}

/* Раскрывающиеся группы — <details>: без JS их иначе было бы
   не открыть, то есть фильтром нельзя было бы пользоваться. */
.protocol-filter__group { border-top: 1px solid var(--line); }

/* Заголовок группы: стрелка, название, кружок цвета шапочек.

   Строка гибкая, и крайние элементы не сжимаются. Иначе длинное
   название команды («Дельфин Нижегородской области») переносило
   кружок на следующую строку.

   Обрезаем средствами CSS, а не в PHP: сколько символов влезет,
   зависит от ширины столбца — на col-lg-4 их больше, чем на
   col-xl-3, — и фиксированная длина всё равно угадывала бы. */
.protocol-filter__summary {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 7px 0;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}

.protocol-filter__team {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.protocol-filter__summary::-webkit-details-marker { display: none; }

.protocol-filter__summary::before {
  content: "\203A";
  flex: none;
  width: 14px;
  color: var(--text-mute);
  transition: transform 0.15s;
}

.protocol-filter__group[open] > .protocol-filter__summary::before {
  transform: rotate(90deg);
}

.protocol-filter__summary--white::after,
.protocol-filter__summary--blue::after {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.protocol-filter__summary--white::after {
  background: var(--white-caps-bg);
  border: 1px solid var(--white-caps-border);
}

.protocol-filter__summary--blue::after {
  background: var(--blue-caps-bg);
  border: 1px solid var(--blue-caps-border);
}

.protocol-filter__group--nested { border-top: none; padding-left: 14px; }

.protocol-filter__list {
  margin: 0 0 6px;
  padding: 0 0 0 14px;
  list-style: none;
}

.protocol-filter__item {
  display: flex;
  align-items: baseline;
  gap: 7px;
  padding: 3px 0;
  cursor: pointer;
}

.protocol-filter__number {
  display: inline-block;
  min-width: 1.6em;
  color: var(--text-mute);
  font-variant-numeric: tabular-nums;
}

.protocol__nothing { display: block; }

/* --- широкий экран ---------------------------------------- */

@media (min-width: 992px) {
  .protocol__filter-toggle { display: none; }
  .protocol__filter { display: block; }
}

/* --- узкий экран ------------------------------------------ */

@media (max-width: 575.98px) {
  .game-tabs__full { display: none; }
  .game-tabs__short { display: inline; }

  .game-tabs { justify-content: space-between; }
  .game-tabs__link { padding: 8px 4px; }

  .protocol-row {
    grid-template-columns: 1fr 4rem 1fr;
    gap: 1px 4px;
    padding: 5px 4px;
    font-size: var(--fs-xs);
  }

  .protocol__feed { padding: 4px; }

  .game-score__logo { width: 40px; height: 40px; }

  .game-score__periods { gap: 2px; }
  .game-score__period { padding: 3px 5px; font-size: var(--fs-xs); }
  .game-score__period-score { font-size: var(--fs-base); }
}

/* --- составы матча -------------------------------------------

   Два блока рядом, на узком экране друг под другом. Белые слева,
   синие справа — тот же порядок, что в счёте: менять сторону от
   экрана к экрану значило бы заставлять сверяться каждый раз. */

.game-roster {
  /* Высота строки игрока: фото плюс отступы ячейки. Ею же
     задаётся высота пустых строк-добивок, иначе «Всего»
     у двух команд снова разъедется. */
  --roster-row-h: 50px;

  height: 100%;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

/* Шапка залита цветом шапочек целиком. Полоской по верхнему краю
   белые от синих почти не отличались — приходилось приглядываться,
   а сторона здесь основная разделяющая величина.

   Цвета и правило подписи те же, что у значка команды
   (.team-badge--*-caps): один и тот же смысл — одно и то же
   оформление. */
.game-roster__head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 12px;
  font-weight: 700;
  text-transform: uppercase;
  border-bottom: 1px solid var(--line);
}

.game-roster--white .game-roster__head {
  background: var(--white-caps-bg);
  border-bottom-color: var(--white-caps-border);
  color: var(--n-700);
}

.game-roster--blue .game-roster__head {
  background: var(--blue-caps-bg);
  border-bottom-color: var(--blue-caps-border);
  color: #fff;
}

/* Подпись команды берёт цвет шапки, а не общий цвет текста:
   на синем фоне тёмный текст не прочитать. */
.game-roster__head .game-roster__team { color: inherit; }
.game-roster--blue .game-roster__team:hover { color: #fff; text-decoration: underline; }

.game-roster__logo { width: 28px; height: 28px; object-fit: contain; flex: none; }

.game-roster__team {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-decoration: none;
}

.game-roster__table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}

.game-roster__table th {
  padding: 6px 4px;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--text-mute);
  border-bottom: 1px solid var(--line);
}

.game-roster__table td { padding: 3px 4px; }

.game-roster__table tbody tr:nth-child(even) { background: var(--surface-alt); }

/* Добивка до длины большего состава: у команд бывает 13 и 14
   игроков, и без неё строки «Всего» стоят на разной высоте. */
.game-roster__filler td { height: var(--roster-row-h); }

.game-roster__col-no {
  width: 2.4rem;
  text-align: center;
  color: var(--text-mute);
  font-variant-numeric: tabular-nums;
}

.game-roster__col-player { text-align: left; }

/* Показатели узкие и по центру: колонок четыре, и без ограничения
   они растащили бы имя игрока. */
.game-roster__col-stat {
  width: 2.6rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.game-roster__table tfoot td {
  padding-top: 6px;
  padding-bottom: 6px;
  font-weight: 700;
  border-top: 1px solid var(--line);
  background: var(--surface-sunk);
}

.game-roster__person {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

/* Фото прямоугольное, а не кружком: это портрет, а не значок
   команды. Нет фото — силуэт: пустая рамка читалась бы как
   незагрузившаяся картинка. */
.game-roster__photo {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 44px;
  overflow: hidden;
  color: var(--text-mute);
  background: var(--surface-sunk);
  border-radius: 3px;
}

.game-roster__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

.game-roster__name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text);
  text-decoration: none;
}

.game-roster__name:hover { color: var(--accent); }

.game-roster__captain { flex: none; color: var(--text-mute); font-size: var(--fs-xs); }

.game-roster__subhead {
  padding: 7px 12px;
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--text-mute);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.game-roster__staff {
  margin: 0;
  padding: 6px 4px;
  list-style: none;
  font-size: var(--fs-sm);
}

.game-roster__staff li { display: flex; gap: 7px; padding: 3px 0; }

/* --- судьи ---------------------------------------------------
   Общие на весь матч, поэтому отдельным блоком под составами,
   а не внутри команды. */

.game-officials {
  margin-top: 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

.game-officials__head {
  padding: 8px 12px;
  font-weight: 700;
  text-transform: uppercase;
  text-align: center;
  border-bottom: 1px solid var(--line);
}

.game-officials__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px 16px;
  margin: 0;
  padding: 12px;
  list-style: none;
}

.game-officials__item { display: flex; flex-direction: column; gap: 1px; }

.game-officials__role { font-size: var(--fs-xs); color: var(--text-mute); }
.game-officials__name { font-size: var(--fs-sm); }

@media (max-width: 575.98px) {
  .game-roster { --roster-row-h: 42px; }
  .game-roster__col-stat { width: 2.2rem; }
  .game-roster__photo { width: 28px; height: 36px; }
  .game-roster__table { font-size: var(--fs-xs); }
}

/* Ссылка на детальную статистику. Отдельная страница, открывается
   в новом окне: таблица широкая, и терять из-за неё составы
   незачем. */
.game-detailed { margin: 0 0 10px; text-align: center; }
.game-detailed a { font-size: var(--fs-sm); font-weight: 600; color: var(--accent); }

/* --- сводная статистика матча --------------------------------

   Две таблицы: слева белые, справа синие, по центру название
   показателя — тот же порядок сторон, что в счёте и составах.

   Каждая таблица читается сама по себе: у неё свои команды, а над
   первой ещё и счёт. Это не дубль шапки — люди снимают такую
   таблицу на телефон, чтобы переслать, и в кадр помещается она
   со своим заголовком, но не шапка матча вместе с ней. */

.game-stat__block {
  height: 100%;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

.game-stat__head {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
}

.game-stat__team {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  font-size: var(--fs-sm);
  font-weight: 700;
  text-transform: uppercase;
}

.game-stat__team--blue { flex-direction: row-reverse; justify-self: end; }

.game-stat__logo { width: 26px; height: 26px; object-fit: contain; flex: none; }

.game-stat__name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Заголовок переносится по словам: на узком экране «Анализ бросков»
   в одну строку налезал на название команды. Счёт не переносится —
   ему это не нужно, он короткий. */
.game-stat__title {
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.2;
  color: var(--text-soft);
  text-align: center;
}

.game-stat__title--score {
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.game-stat__row {
  display: grid;
  grid-template-columns: 4.5rem 1fr 4.5rem;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  font-size: var(--fs-sm);
}

.game-stat__row:nth-child(odd) { background: var(--surface-alt); }

.game-stat__value {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.game-stat__value--blue { text-align: right; }

/* Название показателя приглушено: главное здесь числа по краям,
   а подпись объясняет, что они значат. */
.game-stat__label {
  font-size: var(--fs-xs);
  color: var(--text-mute);
  text-align: center;
}

@media (max-width: 575.98px) {
  .game-stat__row { grid-template-columns: 4rem 1fr 4rem; gap: 4px; padding: 6px 8px; }
  .game-stat__value { font-size: var(--fs-xs); }
  .game-stat__logo { width: 22px; height: 22px; }

  .game-stat__head { gap: 6px; padding: 9px 8px; }
  .game-stat__team { font-size: var(--fs-xs); }
  .game-stat__title { font-size: var(--fs-xs); }
}

/* --- видео матча ---------------------------------------------
   Встраивание держим в рамке с соотношением 16:9: без неё iframe
   получает высоту по умолчанию и на телефоне выходит полоской. */

.game-video { max-width: 1000px; margin: 0 auto; }

.game-video__link { margin: 0 0 12px; text-align: center; }
.game-video__link a { font-size: var(--fs-base); font-weight: 600; color: var(--accent); }

.game-video__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--surface-sunk);
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
}

.game-video__frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.game-video__note {
  margin: 10px 0 0;
  font-size: var(--fs-xs);
  color: var(--text-mute);
  text-align: center;
}

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

   Два блока один под другим: сначала белые, потом синие — тот же
   порядок сторон, что везде. Внутри слева таблицы, справа схемы. */

.shot-map__team {
  margin-bottom: 20px;
  padding: 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: var(--shadow-card);
}

.shot-map__head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--accent-line);
}

.shot-map__logo { width: 34px; height: 34px; object-fit: contain; flex: none; }

.shot-map__name {
  margin: 0;
  font-size: var(--fs-md);
  font-weight: 700;
  text-transform: uppercase;
}

.shot-map__table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}

.shot-map__table--keepers { margin-top: 16px; }

/* Подпись над таблицей: без неё непонятно, что за числа в ней
   стоят — голы из бросков или сейвы из бросков в створ. */
.shot-map__caption {
  padding-bottom: 5px;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-soft);
  text-align: center;
  caption-side: top;
}

/* Ряд с надписью «Позиции» над столбцами зон. */
.shot-map__group td { border: 0; }

.shot-map__positions {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--text-mute);
  border-bottom: 1px solid var(--line);
}

.shot-map__table th {
  padding: 5px 3px;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--text-mute);
  border-bottom: 1px solid var(--line);
}

.shot-map__table td { padding: 3px; }
.shot-map__table tbody tr:nth-child(even) { background: var(--surface-alt); }

.shot-map__no { width: 2.2rem; text-align: center; color: var(--text-mute); }
.shot-map__player { text-align: left; }
.shot-map__player a { color: var(--text); text-decoration: none; }
.shot-map__player a:hover { color: var(--accent); }

.shot-map__total,
.shot-map__pct,
.shot-map__zone-col {
  width: 3rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.shot-map__zone-col { width: 2.8rem; color: var(--text-soft); }

/* --- схемы ---------------------------------------------------
   Ворота: сетка три на три. Поле: два ряда по три, ближний
   к воротам сверху. Каждая ячейка кликается и показывает свои
   броски. */

.shot-map__zones { margin-bottom: 16px; }

.shot-map__zones-title {
  margin-bottom: 6px;
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  text-align: center;
  color: var(--text-mute);
}

.shot-map__goal {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
}

.shot-map__cell {
  padding: 10px 4px;
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
  color: var(--text);
  background: var(--surface-alt);
  border: 0;
  cursor: pointer;
}

.shot-map__cell:hover:not(:disabled) { background: var(--accent-soft); color: var(--accent); }
.shot-map__cell:disabled { color: var(--text-mute); cursor: default; }

/* Поле: вода, поверх неё схема, поверх схемы — кружки зон.

   Вода одного цвета в обеих темах: разметка на ней белая, и если
   бы фон менялся, пришлось бы менять и её. */
.shot-map__field {
  position: relative;
  aspect-ratio: 3 / 2;
  background: hsl(var(--brand-h) 62% 52%);
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
}

.shot-map__pitch {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  color: rgba(255, 255, 255, 0.75);
}

.shot-map__mark {
  fill: rgba(255, 255, 255, 0.75);
  font-size: 13px;
  font-weight: 600;
}

/* Ряды кружков привязаны к линиям на схеме, а не отмерены на глаз:
   зоны 5, 6 и 1 лежат МЕЖДУ двумя метрами и пятью, зоны 4, 3 и 2 —
   ниже пятиметровой.

   Доли строк повторяют координаты линий из рисунка: 26% до двух
   метров, 20% между линиями, остальное ниже. Проценты в grid-rows
   считаются от высоты — в отличие от padding, который считался бы
   от ширины и увёл бы всю раскладку. */
.shot-map__spots {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 26fr 20fr 54fr;
  align-items: center;
  gap: 0 4%;
  height: 100%;
  padding: 0 6%;
}

.shot-map__spot:nth-child(-n+3) { grid-row: 2; }
.shot-map__spot:nth-child(n+4)  { grid-row: 3; }

/* Прозрачные и скромные: они подписывают место, а не заслоняют
   схему. */
.shot-map__spot {
  justify-self: center;
  align-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.1rem;
  height: 3.1rem;
  font-size: var(--fs-xs);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: #fff;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 50%;
  cursor: pointer;
}

.shot-map__spot:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.34);
}

.shot-map__spot:disabled {
  color: rgba(255, 255, 255, 0.55);
  border-color: rgba(255, 255, 255, 0.35);
  cursor: default;
}

.shot-map__aside {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 5px;
  font-size: var(--fs-xs);
  color: var(--accent);
  background: none;
  border: 0;
  cursor: pointer;
}

.shot-map__aside:disabled { color: var(--text-mute); cursor: default; }

/* --- список бросков в окне ----------------------------------- */

/* Отступы задаёт содержимое, а не само окно: у .dialog padding
   нулевой намеренно, так же сделан и список игр. Без боковых
   отступов текст упирается в край и читается как обрезанный. */
.shot-list { margin: 0; padding: 0; list-style: none; font-size: var(--fs-sm); }

.shot-list__item { padding: var(--sp-3) var(--sp-4); }

.shot-list__item + .shot-list__item { border-top: 1px solid var(--line); }

.shot-list__item--goal { font-weight: 700; }
.shot-list__number { color: var(--text-mute); }
.shot-list__what { color: var(--text-soft); }
.shot-list__video { margin-left: 6px; color: var(--accent); text-decoration: none; }

@media (max-width: 575.98px) {
  .shot-map__table { font-size: var(--fs-xs); }
  .shot-map__zone-col { width: 2.3rem; }
  .shot-map__total, .shot-map__pct { width: 2.6rem; }
  .shot-map__spot { width: 2.7rem; height: 2.7rem; }
}