/* =========================================================
   SIL7 / BETAI Telegram Mini App
   styles.css с русскими комментариями.

   ВАЖНО:
   - Комментарии CSS вида /* ... */ НЕ отображаются на странице.
   - Они видны только в редакторе кода: VS Code, Notepad++, PyCharm и т.д.

   Быстрая настройка:
   1) Логотип двигаем через --logo-left и --logo-top.
   2) Размер логотипа меняем через --logo-width.
   3) Прямую линию между логотипом и основной частью настраиваем
      через --brand-separator-*.
   4) Высоту строки дат меняем через --date-row-* и --date-pill-height.
   ========================================================= */

:root {
  /* =========================
     ОСНОВНЫЕ ЦВЕТА ПРОЕКТА
     ========================= */
  --bg: #020311;
  --panel: #08051f;
  --panel-2: #120a32;
  --text: #ffffff;
  --muted: rgba(244, 238, 255, .68);
  --pink: #ff42ee;
  --violet: #a340ff;
  --blue: #226dff;
  --line: rgba(162, 83, 255, .58);
  --glow-pink: 0 0 18px rgba(255, 66, 238, .62), 0 0 44px rgba(160, 64, 255, .28);

  /* =========================
     ЛОГОТИП: ПОЛОЖЕНИЕ И РАЗМЕР
     Подогнано под маленький прямоугольник сверху слева.
     ========================= */
  --logo-left: 14px;       /* больше = логотип правее */
  --logo-top: 8px;         /* больше = логотип ниже */
  --logo-width: 132px;     /* больше = логотип крупнее */
  --brand-stage-height: 156px; /* высота верхнего блока с логотипом: меньше = даты выше, больше = ниже */

  /* =========================
     РАМКА ВОКРУГ ЛОГОТИПА
     Сейчас скрыта. Поставь .25 / .35 / .55, если нужна рамка.
     ========================= */
  --logo-outline-opacity: 0;
  --logo-outline-top: -8px;
  --logo-outline-right: -10px;
  --logo-outline-bottom: -9px;
  --logo-outline-left: -10px;
  --logo-outline-radius: 16px;

  /* =========================
     ПРЯМАЯ ГОРИЗОНТАЛЬНАЯ ЛИНИЯ-РАЗДЕЛИТЕЛЬ
     Отделяет верхний блок с логотипом от основной части.
     ========================= */
  --brand-separator-bottom: 0px;       /* положение линии: больше = линия выше */
  --brand-separator-height: 2px;       /* толщина прямой линии */
  --brand-separator-opacity: .95;  /* яркость линии */
  --brand-separator-glow: .35;         /* сила свечения */
  --brand-separator-inset:0px;       /* отступ линии слева и справа */

  /* =========================
     ЛЕНТА ДАТ
     Положение и высота строки дат.

     ВАЖНО:
     Эти переменные теперь реально подключены к .date-strip ниже.
     Для проверки можно поставить padding 30px — строка дат обязана измениться.
     ========================= */
  --date-strip-left: 10px;          /* отступ ленты слева */
  --date-strip-right: 10px;         /* отступ ленты справа */
  --date-row-margin-top: 0px;       /* сдвиг всей строки дат: больше = ниже, отрицательное = выше */
  --date-row-margin-bottom: 0px;    /* отступ после строки дат до основной области */
  --date-row-padding-top: 4px;      /* верхний внутренний отступ строки дат */
  --date-row-padding-bottom: 5px;   /* нижний внутренний отступ строки дат */
  --date-pill-height: 42px;         /* высота самих кнопок дат */
}

/* =========================
   ОБЩИЙ СБРОС РАЗМЕРОВ
   ========================= */
* {
  box-sizing: border-box;
}

/* =========================
   БАЗОВЫЙ РАЗМЕР СТРАНИЦЫ
   ========================= */
html,
body {
  width: 100%;
  min-height: 100%;
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* Disable double-tap zoom, including inside nested scrollers and dialogs.
   Panning/pinch zoom remain available; specific drag controls may use none. */
:where(html, body, .app-shell, .app-shell *, .sil7-header-panel, .sil7-header-panel *) {
  touch-action: manipulation;
}

/* =========================
   ОБЩИЙ ФОН ПРИЛОЖЕНИЯ
   ========================= */
body {
  overflow: hidden;
  background:
    radial-gradient(460px 230px at 94% 0%, rgba(137, 38, 255, .48), transparent 68%),
    radial-gradient(300px 170px at 82% 14%, rgba(255, 62, 235, .22), transparent 70%),
    linear-gradient(180deg, #050417 0%, #020311 54%, #01020b 100%);
  color: var(--text);
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: 0;
}

/* =========================
   ДЕКОРАТИВНЫЕ СЛОИ ФОНА
   ========================= */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
}

/* Тонкая сетка поверх фона */
body::after {
  z-index: -1;
  opacity: .32;
  background-image:
    linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: radial-gradient(circle at 50% 45%, black, transparent 72%);
}

/* =========================
   ГЛАВНЫЙ КОНТЕЙНЕР MINI APP
   ========================= */
.app-shell {
  position: fixed;
  top: var(--sil7-viewport-top, 0px);
  left: 0;
  right: 0;
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  width: min(100%, 430px);
  height: 100vh;
  height: 100dvh;
  height: var(--sil7-viewport-height, var(--tg-viewport-stable-height, 100dvh));
  min-height: 0;
  min-width: 0;
  margin: 0 auto;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(6, 4, 24, .14), rgba(2, 3, 17, .72)),
    transparent;
}

/* =========================
   ВЕРХНИЙ БЛОК С ЛОГОТИПОМ
   ========================= */
.brand-stage {
  position: relative;

  /* ВАЖНО: логотип внутри стоит absolute, поэтому высоту держит сам блок.
     Если height убрать — верхняя зона схлопнется и логотип обрежется. */
  height: var(--brand-stage-height, 156px);
  min-height: var(--brand-stage-height, 156px);

  padding: 0;
  overflow: hidden;

  border-bottom: 0;

  box-shadow: 0 18px 42px rgba(0, 0, 0, .32);
}

/* =========================
   ПРЯМАЯ ГОРИЗОНТАЛЬНАЯ ЛИНИЯ-РАЗДЕЛИТЕЛЬ
   Это главная линия, которая отделяет логотип от основной части.
   Она прямая, без дуг и хвостов.
   ========================= */
.brand-stage::before {
  content: "";
  position: absolute;
  z-index: 50;

  left: 0;
  right: 0;

  bottom: 84px;

  height: 1px;
  pointer-events: none;

  background: linear-gradient(
    90deg,
    rgba(255, 66, 238, .35) 0%,
    rgba(255, 66, 238, .95) 35%,
    rgba(163, 64, 255, .85) 70%,
    rgba(255, 66, 238, .25) 100%
  );

  box-shadow:
    0 0 5px rgba(255, 66, 238, .65),
    0 0 12px rgba(163, 64, 255, .35);
}

/* =========================
   ЛЕНТА ДАТ
   Горизонтальный выбор даты для матчей.

   ГДЕ МЕНЯТЬ ВЫСОТУ:
   1) --date-row-padding-top    = верхний отступ внутри строки
   2) --date-row-padding-bottom = нижний отступ внутри строки
   3) --date-pill-height        = высота самих кнопок дат

   Если поставить padding-top / padding-bottom по 30px, строка дат
   должна стать очень высокой. Если не стала — значит открыт старый CSS.
   ========================= */
.date-strip {
  position: relative;
  z-index: 20;

  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  overflow-y: hidden;

  margin-top: var(--date-row-margin-top) !important;
  margin-bottom: var(--date-row-margin-bottom) !important;

  padding-top: var(--date-row-padding-top) !important;
  padding-right: var(--date-strip-right) !important;
  padding-bottom: var(--date-row-padding-bottom) !important;
  padding-left: var(--date-strip-left) !important;

  min-height: calc(
    var(--date-pill-height) +
    var(--date-row-padding-top) +
    var(--date-row-padding-bottom)
  ) !important;

  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;

  background:
    linear-gradient(180deg, rgba(14, 6, 35, .92), rgba(5, 4, 18, .98));

  border-top: 1px solid rgba(255, 66, 238, .32);
  border-bottom: 1px solid rgba(255, 66, 238, .22);
  box-shadow:
    0 8px 22px rgba(0, 0, 0, .34),
    inset 0 1px 0 rgba(255, 255, 255, .035);
}
.date-strip::-webkit-scrollbar {
  display: none;
}

.date-pill {
  position: relative;
  flex: 0 0 auto;
  min-width: 54px;
  height: var(--date-pill-height) !important;
  padding: 5px 8px 4px;

  display: grid;
  grid-template-rows: 11px 17px 9px;
  align-items: center;
  justify-items: center;

  border: 1px solid rgba(132, 85, 226, .42);
  border-radius: 14px;
  outline: 0;

  background:
    linear-gradient(180deg, rgba(18, 12, 50, .82), rgba(6, 5, 24, .92));
  color: rgba(255, 255, 255, .76);
  font: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.date-pill::before {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: 13px;
  background: linear-gradient(180deg, rgba(255,255,255,.055), transparent 62%);
  pointer-events: none;
}

.date-pill.is-active {
  border-color: rgba(255, 66, 238, .96);
  background:
    radial-gradient(circle at 50% 10%, rgba(255, 66, 238, .30), transparent 54%),
    linear-gradient(180deg, rgba(56, 16, 70, .98), rgba(16, 7, 39, .98));
  color: #ffffff;
  box-shadow:
    0 0 10px rgba(255, 66, 238, .40),
    0 0 22px rgba(163, 64, 255, .22);
}

.date-day {
  font-size: 7px;
  line-height: 1;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .60);
}

.date-pill.is-active .date-day {
  color: rgba(255, 255, 255, .88);
}

.date-number {
  font-size: 17px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: -.04em;
}

.date-month {
  font-size: 7px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .58);
}

.date-pill.is-active .date-month {
  color: rgba(255, 255, 255, .84);
}


/* =========================
   ЛОГОТИП SIL7
   ========================= */
.brand-mark {
  position: absolute;
  z-index: 80 !important;
  left: var(--logo-left);
  top: var(--logo-top);
  width: var(--logo-width);
  max-width: var(--logo-width);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  isolation: isolate;
}

/* Опциональная рамка вокруг логотипа */
.brand-mark::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: var(--logo-outline-top);
  right: var(--logo-outline-right);
  bottom: var(--logo-outline-bottom);
  left: var(--logo-outline-left);
  border: 1px solid rgba(255, 72, 238, var(--logo-outline-opacity));
  border-radius: var(--logo-outline-radius);
  background: rgba(8, 5, 31, calc(var(--logo-outline-opacity) * .22));
  box-shadow:
    0 0 14px rgba(255, 66, 238, calc(var(--logo-outline-opacity) * .46)),
    inset 0 0 18px rgba(163, 64, 255, calc(var(--logo-outline-opacity) * .26));
  pointer-events: none;
}

/* Если в HTML осталась старая обёртка, она больше не режет логотип */
.brand-logo-crop {
  width: 100%;
  height: auto;
  overflow: visible;
}



/* Картинка логотипа */
.sil7-logo-img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: contain;
  object-position: left top;
  filter: drop-shadow(0 0 9px rgba(157, 68, 255, .30));
}

/* Подпись под логотипом */
.brand-subtitle {
  display: block;

  /* Ширина подписи отдельно от ширины логотипа */
  width: 200px;
  max-width: none;

  margin-top: 3px;
  overflow: visible;

  color: rgba(255, 255, 255, .96);
  font-size: 6.6px;
  line-height: 1;
  font-weight: 600;

  /* Нормальное расстояние между буквами */
  letter-spacing: .13em;

  text-transform: uppercase;
  white-space: nowrap;
  text-shadow: 0 0 8px rgba(255, 255, 255, .45);
}
/* =========================
   ОСНОВНАЯ ПУСТАЯ ОБЛАСТЬ
   ========================= */
.empty-stage {
  position: relative;
  min-height: 0;
  overflow: hidden;
}

/* Центральная декоративная карточка */
.empty-stage::before {
  content: "";
  position: absolute;
  inset: 18px 20px 88px;
  border: 1px solid rgba(142, 80, 255, .16);
  border-radius: 26px;
  background:
    radial-gradient(circle at 78% 72%, rgba(255, 62, 238, .18), transparent 36%),
    radial-gradient(circle at 28% 20%, rgba(34, 109, 255, .16), transparent 38%),
    linear-gradient(180deg, rgba(9, 6, 31, .42), rgba(4, 3, 15, .16));
  opacity: .9;
}

/* Большое мягкое кольцо в центре */
.ambient-ring {
  position: absolute;
  left: 50%;
  top: 45%;
  width: min(74vw, 300px);
  aspect-ratio: 1;
  border: 1px solid rgba(255, 64, 238, .22);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-shadow:
    inset 0 0 50px rgba(117, 49, 255, .16),
    0 0 70px rgba(255, 64, 238, .10);
  opacity: .55;
}

/* =========================
   НИЖНЯЯ ПАНЕЛЬ КНОПОК PRE-MATCH / LIVE
   ========================= */
.mode-tabs {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding: 10px 14px;
  padding-bottom: calc(10px + max(env(safe-area-inset-bottom, 0px), var(--tg-safe-area-inset-bottom, 0px), var(--tg-content-safe-area-inset-bottom, 0px)));
  border-top: 1px solid rgba(255, 65, 238, .48);
  background:
    linear-gradient(180deg, rgba(7, 5, 26, .84), rgba(3, 2, 13, .98));
  box-shadow: 0 -12px 32px rgba(0, 0, 0, .46);
}

.mode-tab {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  min-width: 0;
  padding: 0 12px;
  gap: 10px;
  border: 1px solid rgba(132, 85, 226, .52);
  border-radius: 16px;
  outline: 0;
  background: linear-gradient(180deg, rgba(17, 12, 49, .94), rgba(8, 6, 31, .98));
  color: rgba(255, 255, 255, .82);
  font: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* Let the software keyboard cover the bottom navigation instead of lifting
   Pre-match / Live above it. The content uses the released grid row. */
html[data-keyboard-open="true"] .mode-tabs { display:none; }

.mode-tab.is-active {
  border-color: rgba(255, 65, 238, .94);
  background:
    radial-gradient(circle at 18% 48%, rgba(255, 64, 238, .24), transparent 42%),
    linear-gradient(180deg, rgba(57, 15, 68, .96), rgba(20, 8, 42, .98));
  box-shadow: var(--glow-pink);
  color: #ffffff;
}

.mode-label {
  min-width: 0;
  overflow: hidden;
  font-size: 13px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: -.01em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mode-count,
.mode-tab.is-active .mode-count {
  display: grid;
  place-items: center;
  min-width: 30px;
  height: 26px;
  padding: 0 8px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 999px;
  background: rgba(91, 78, 146, .32);
  color: #ffffff;
  font-size: 14px;
  line-height: 1;
  font-weight: 800;
}

/* =========================
   АДАПТАЦИЯ ПОД УЗКИЕ ЭКРАНЫ
   ========================= */
/* Финальная оптика SVG-иконок */
.filter-icon-odds .odds-svg-text {
  paint-order: stroke fill;
  stroke: rgba(255, 255, 255, .10);
  stroke-width: .16px;
}

.filter-icon-stats path:last-child {
  opacity: .84;
}

.filter-icon-reset svg {
  filter: drop-shadow(0 0 3px currentColor);
}

.filter-reset.is-enabled .filter-icon-reset svg {
  filter:
    drop-shadow(0 0 4px rgba(255, 66, 238, .78))
    drop-shadow(0 0 8px rgba(163, 64, 255, .42));
}

@media (max-width: 380px) {
  :root {
    --logo-left: 14px;
    --logo-top: 8px;
    --logo-width: 132px;
    --brand-separator-inset: 14px;
    --date-strip-left: 10px;
    --date-strip-right: 10px;
  }



  .date-strip {
    gap: 5px;
  }

  .date-pill {
    min-width: 50px;
    border-radius: 13px;
  }

  .date-number {
    font-size: 16px;
  }

  .mode-tabs {
    gap: 8px;
    padding-inline: 10px;
  }

  .mode-tab {
    height: 46px;
    gap: 8px;
    padding: 0 8px;
  }

  .mode-label {
    font-size: 13px;
  }

  .mode-count {
    min-width: 30px;
    height: 26px;
    font-size: 14px;
  }
}

/* =========================================================
   ФИНАЛЬНОЕ ПОЛОЖЕНИЕ ЛОГОТИПА, ЛИНИИ И ДАТ
   Этот блок должен быть самым последним в styles.css
   ========================================================= */
:root {
  /* Высота верхнего блока с логотипом */
  --brand-stage-height-final: 56px;

  /* Положение линии внутри верхнего блока */
  --brand-line-bottom-final: 0px;

  /* Положение строки дат */
  --date-control-margin-top: 0px;
  --date-control-margin-bottom: 10px;

  /* Отступы строки дат слева и справа */
  --date-control-left: 5px;
  --date-control-right: 10px;

  /* Внутренние отступы строки дат */
  --date-control-padding-top: 5px;
  --date-control-padding-bottom: 4px;

  /* Высота самих кнопок дат */
  --date-control-pill-height: 46px;
}
/* Верхний блок с логотипом */
.brand-stage {
  height: var(--brand-stage-height-final) !important;
  min-height: var(--brand-stage-height-final) !important;
  overflow: hidden !important;
}

/* Разделительная линия под логотипом */
.brand-stage::before {
  bottom: var(--brand-line-bottom-final) !important;
  height: 1px !important;
}

/* Строка дат */
.date-strip {
  margin-top: var(--date-control-margin-top) !important;
  margin-bottom: var(--date-control-margin-bottom) !important;

  padding-top: var(--date-control-padding-top) !important;
  padding-right: var(--date-control-right) !important;
  padding-bottom: var(--date-control-padding-bottom) !important;
  padding-left: var(--date-control-left) !important;

  min-height: calc(
    var(--date-control-pill-height) +
    var(--date-control-padding-top) +
    var(--date-control-padding-bottom)
  ) !important;
}
/* Кнопки дат */
.date-pill {
  height: var(--date-control-pill-height) !important;
  min-height: var(--date-control-pill-height) !important;
}

/* =========================================================
   СКРОЛЛ ДАТ НА КОМПЬЮТЕРЕ
   Клики по датам НЕ отключаются
   ========================================================= */

.date-strip {
  cursor: default;
  user-select: none;
  overscroll-behavior-x: contain;
}

.date-pill {
  cursor: pointer;
}

/* =========================================================
   ФИЛЬТРЫ ПОД ДАТАМИ — ЕДИНЫЙ SVG-БЛОК
   Время / Коэф. / Статистика / Сброс
   Старые CSS-иконки и псевдоэлементы удалены.
   ========================================================= */

.app-shell {
  grid-template-rows: auto auto auto 1fr auto !important;
}

:root {
  /* Положение строки */
  --filter-row-left: 4px;
  --filter-row-right: 4px;
  --filter-row-margin-top: 8px;
  --filter-row-margin-bottom: 5px;

  /* Кнопки */
  --filter-chip-height: 34px;
  --filter-chip-radius: 10px;
  --filter-chip-gap: 5px;

  /* SVG */
  --filter-icon-box-size: 22px;
  --filter-icon-size: 15px;
  --filter-text-size: 11px;
  --filter-reset-size: 34px;
}

.match-filters {
  position: relative;
  z-index: 18;

  display: flex;
  align-items: center;
  justify-content: center;
  justify-content: safe center;
  gap: var(--filter-chip-gap);

  width: 100%;
  min-width: 0;

  margin-top: var(--filter-row-margin-top);
  margin-bottom: var(--filter-row-margin-bottom);
  padding-left: var(--filter-row-left);
  padding-right: var(--filter-row-right);
  scroll-padding-inline: var(--filter-row-left);

  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;

  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.match-filters::-webkit-scrollbar {
  display: none;
}

/* Общая геометрия кнопок */
.filter-chip,
.filter-reset {
  position: relative;
  flex: 0 0 auto;

  height: var(--filter-chip-height);
  margin: 0;
  padding: 0;

  border: 1px solid rgba(168, 119, 255, .52);
  border-radius: var(--filter-chip-radius);
  outline: 0;

  background:
    radial-gradient(circle at 20% 8%, rgba(255, 255, 255, .09), transparent 34%),
    linear-gradient(180deg, rgba(21, 14, 55, .98), rgba(7, 5, 27, .99));

  color: rgba(255, 255, 255, .86);
  font: inherit;
  cursor: pointer;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .07),
    inset 0 0 0 1px rgba(255, 255, 255, .025),
    0 0 0 1px rgba(100, 57, 188, .10),
    0 7px 15px rgba(0, 0, 0, .25);

  -webkit-tap-highlight-color: transparent;

  transition:
    border-color .18s ease,
    background .18s ease,
    box-shadow .18s ease,
    color .18s ease,
    opacity .18s ease,
    transform .12s ease;
}

.filter-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 0 9px;
  white-space: nowrap;
}

.filter-chip[data-filter="time"] {
  width: 88px;
  min-width: 88px;
}

.filter-chip[data-filter="odds"] {
  width: 88px;
  min-width: 88px;
}

.filter-chip[data-filter="stats"] {
  width: 116px;
  min-width: 116px;
}

/* Только стеклянный блик кнопки — иконки через псевдоэлементы не рисуются */
.filter-chip::before,
.filter-reset::before {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: calc(var(--filter-chip-radius) - 1px);
  background: linear-gradient(180deg, rgba(255, 255, 255, .075), transparent 61%);
  pointer-events: none;
}

.filter-chip::after,
.filter-reset::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 0 0 1px rgba(240, 210, 255, .055);
  pointer-events: none;
}

/* Контейнер SVG-иконки */
.filter-icon {
  position: relative;
  z-index: 1;

  display: inline-grid;
  place-items: center;

  flex: 0 0 var(--filter-icon-box-size);
  width: var(--filter-icon-box-size);
  height: var(--filter-icon-box-size);

  border: 1px solid rgba(214, 194, 255, .18);
  border-radius: 6px;

  background:
    radial-gradient(circle at 35% 23%, rgba(255, 255, 255, .22), transparent 44%),
    linear-gradient(180deg, rgba(39, 29, 78, .96), rgba(13, 9, 39, .97));

  color: rgba(246, 242, 255, .96);

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .11),
    inset 0 0 0 1px rgba(255, 255, 255, .025),
    0 0 8px rgba(88, 55, 170, .22);

  transition:
    border-color .18s ease,
    background .18s ease,
    color .18s ease,
    filter .18s ease,
    box-shadow .18s ease;
}

/* Никаких CSS-рисунков внутри иконок */
.filter-icon::before,
.filter-icon::after {
  content: none !important;
  display: none !important;
}

.filter-icon svg {
  display: block;
  width: var(--filter-icon-size);
  height: var(--filter-icon-size);
  overflow: visible;

  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;

  transform: none;
  filter: drop-shadow(0 0 3px color-mix(in srgb, currentColor 68%, transparent));
}

/* Индивидуальная оптика SVG */
.filter-icon-time svg {
  width: 15.5px;
  height: 15.5px;
}

.filter-icon-odds svg {
  width: 18.5px;
  height: 15px;
}

.filter-icon-odds .odds-svg-text {
  fill: currentColor;
  stroke: none;
  font-family: Inter, Arial, sans-serif;
  font-size: 10.4px;
  font-weight: 850;
  letter-spacing: -.34px;
  text-anchor: middle;
  dominant-baseline: middle;
}

.filter-icon-stats svg {
  width: 16px;
  height: 16px;
  stroke-width: 2.05;
}

.filter-icon-reset svg {
  width: 16px;
  height: 16px;
  stroke-width: 2.05;
  transform: translate(.15px, .1px);
}

/* Цветовые акценты */
.filter-icon-time {
  color: #77eaff;
  border-color: rgba(119, 234, 255, .42);
  background:
    radial-gradient(circle at 35% 23%, rgba(255, 255, 255, .24), transparent 43%),
    linear-gradient(180deg, rgba(22, 76, 101, .82), rgba(8, 20, 46, .97));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .13),
    0 0 9px rgba(64, 208, 255, .30);
}

.filter-icon-odds {
  color: #ff82ef;
  border-color: rgba(255, 130, 239, .44);
  background:
    radial-gradient(circle at 35% 23%, rgba(255, 255, 255, .24), transparent 43%),
    linear-gradient(180deg, rgba(93, 23, 99, .86), rgba(35, 8, 51, .97));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .13),
    0 0 9px rgba(255, 66, 238, .32);
}

.filter-icon-stats {
  color: #c1a4ff;
  border-color: rgba(193, 164, 255, .46);
  background:
    radial-gradient(circle at 35% 23%, rgba(255, 255, 255, .24), transparent 43%),
    linear-gradient(180deg, rgba(67, 44, 124, .88), rgba(18, 12, 52, .97));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .13),
    0 0 9px rgba(159, 112, 255, .30);
}

.filter-icon-reset {
  color: rgba(255, 150, 243, .76);
  border-color: rgba(255, 150, 243, .28);
}

.filter-label {
  position: relative;
  z-index: 1;

  display: inline-flex;
  align-items: center;
  min-height: 16px;

  font-size: var(--filter-text-size);
  line-height: 1;
  font-weight: 760;
  letter-spacing: .005em;
  color: rgba(255, 255, 255, .94);
  text-shadow: 0 1px 6px rgba(0, 0, 0, .42);
}

/* Активный фильтр */
.filter-chip.is-active {
  border-color: rgba(255, 66, 238, .95);

  background:
    linear-gradient(180deg, rgba(24, 12, 52, .96), rgba(10, 7, 29, .98));

  color: #ffffff;

  box-shadow:
    0 0 0 1px rgba(255, 66, 238, .18),
    0 0 10px rgba(255, 66, 238, .35),
    0 0 20px rgba(163, 64, 255, .18),
    inset 0 1px 0 rgba(255, 255, 255, .06);
}

.filter-chip.is-active .filter-icon {
  border-color: rgba(255, 132, 246, .75);

  background:
    linear-gradient(180deg, rgba(32, 18, 67, .95), rgba(14, 9, 37, .96));

  color: #ffffff;

  box-shadow:
    0 0 8px rgba(255, 66, 238, .24),
    inset 0 1px 0 rgba(255, 255, 255, .08);
}

/* Сброс */
.filter-reset {
  width: var(--filter-reset-size);
  min-width: var(--filter-reset-size);
  display: inline-grid;
  place-items: center;
  border-color: rgba(164, 128, 220, .42);
  color: rgba(255, 255, 255, .52);
}

.filter-reset .filter-icon {
  width: 24px;
  height: 24px;
  flex-basis: 24px;
}

.filter-reset:disabled {
  cursor: default;
  opacity: .74;
}

.filter-reset.is-enabled {
  border-color: rgba(255, 66, 238, .96);
  background:
    radial-gradient(circle at 50% 35%, rgba(255, 66, 238, .31), transparent 54%),
    linear-gradient(180deg, rgba(52, 15, 72, .99), rgba(13, 6, 35, .99));
  color: #ffffff;
  opacity: 1;
  box-shadow:
    0 0 0 1px rgba(255, 90, 241, .14),
    0 0 11px rgba(255, 66, 238, .52),
    0 0 23px rgba(163, 64, 255, .29),
    inset 0 1px 0 rgba(255, 255, 255, .10);
}

.filter-reset.is-enabled .filter-icon-reset {
  color: #ffffff;
  border-color: rgba(255, 154, 247, .76);
  background:
    radial-gradient(circle at 40% 23%, rgba(255, 255, 255, .28), transparent 44%),
    linear-gradient(145deg, rgba(255, 66, 238, .40), rgba(105, 46, 190, .26));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .14),
    0 0 10px rgba(255, 66, 238, .46),
    0 0 18px rgba(163, 64, 255, .20);
}

.filter-chip:not(:disabled):hover,
.filter-reset.is-enabled:hover {
  border-color: rgba(215, 150, 255, .92);
}

.filter-chip:not(:disabled):active,
.filter-reset.is-enabled:active {
  transform: scale(.975);
}

.filter-chip:focus-visible,
.filter-reset:focus-visible {
  box-shadow:
    0 0 0 2px rgba(5, 4, 22, .95),
    0 0 0 3px rgba(255, 66, 238, .82),
    0 0 14px rgba(255, 66, 238, .30);
}

@media (max-width: 380px) {
  :root {
    --filter-row-left: 4px;
    --filter-row-right: 4px;
    --filter-chip-height: 30px;
    --filter-chip-gap: 4px;
    --filter-icon-box-size: 20px;
    --filter-icon-size: 13px;
    --filter-text-size: 10.5px;
    --filter-reset-size: 32px;
  }

  .filter-chip {
    gap: 5px;
    padding-inline: 7px;
  }

  .filter-chip[data-filter="time"],
  .filter-chip[data-filter="odds"] {
    width: 82px;
    min-width: 82px;
  }

  .filter-chip[data-filter="stats"] {
    width: 108px;
    min-width: 108px;
  }

  .filter-icon-odds .odds-svg-text {
    font-size: 8.8px;
  }
}

/* =========================================================
   ФИНАЛЬНОЕ ВЫРАВНИВАНИЕ SVG-ИКОНКИ СБРОСА
   ========================================================= */
.filter-reset .filter-icon-reset {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
}

.filter-icon-reset svg {
  display: block;
  width: 14px;
  height: 14px;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.85;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  shape-rendering: geometricPrecision;
  transform: none !important;
  transform-origin: center;
}

.filter-reset:not(.is-enabled) .filter-icon-reset svg {
  opacity: .82;
  filter: none;
}

.filter-reset.is-enabled .filter-icon-reset svg {
  opacity: 1;
  filter:
    drop-shadow(0 0 3px rgba(255, 66, 238, .76))
    drop-shadow(0 0 7px rgba(163, 64, 255, .34));
}


/* Значок сброса без внутренней рамки; размеры кнопки сохранены. */
.match-filters .filter-icon.filter-icon--plain {
  border-color: transparent;
  background: none;
  box-shadow: none;
}

.match-filters .filter-icon.filter-icon--plain svg {
  width: var(--filter-icon-box-size);
  height: var(--filter-icon-box-size);
  filter: none;
}

/* На очень узких экранах сохраняем доступ к первой кнопке при прокрутке */
@media (max-width: 340px) {
  .match-filters {
    justify-content: flex-start;
  }
}

/* =========================================================
   ШКАЛА ВРЕМЕНИ ПОД ФИЛЬТРАМИ
   Открывается только для даты «Сегодня».
   ========================================================= */

/* Логотип / даты / сворачиваемый блок фильтров / контент / нижние вкладки */
.app-shell {
  grid-template-rows: auto auto auto minmax(0, 1fr) auto !important;
}

.match-filter-section { min-width: 0; }
.calendar-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  min-width: 0;
  margin-bottom: 5px;
  border-top: 1px solid rgba(255, 66, 238, .32);
  border-bottom: 1px solid rgba(255, 66, 238, .22);
  background: linear-gradient(180deg, rgba(14, 6, 35, .92), rgba(5, 4, 18, .98));
}
.calendar-toolbar .date-strip {
  min-width: 0;
  margin-block: 0 !important;
  border: 0;
  background: transparent;
  box-shadow: none;
}
.filters-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 10px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: rgba(241, 230, 255, .9);
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.filters-toggle svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.filters-toggle[aria-expanded="true"], .filters-toggle.has-active-filters { border-color: rgba(231, 70, 231, .45); background: rgba(123, 39, 163, .18); color: #fff; }
.filters-toggle:focus { outline: none; }
.filters-toggle:focus-visible { outline: 2px solid #d280ff; outline-offset: 2px; }
.filters-active-count { position: absolute; top: 1px; right: 1px; display: inline-grid; place-items: center; min-width: 16px; height: 16px; border-radius: 50%; background: #873bac; font-size: 9px; }
#matchFiltersPanel[hidden], .filters-active-count[hidden] { display: none; }

/* Кнопка времени недоступна в Live и на будущих датах */
.filter-chip[data-filter="time"]:disabled {
  cursor: default;
  opacity: .42;
  filter: saturate(.45);
  box-shadow: none;
}

/* Шкала открыта, но значение ещё не выбрано */
.filter-chip[data-filter="time"].is-panel-open:not(.is-active) {
  border-color: rgba(113, 225, 255, .72);
  box-shadow:
    0 0 8px rgba(64, 208, 255, .18),
    inset 0 1px 0 rgba(255, 255, 255, .07);
}

.time-filter-panel {
  position: relative;
  z-index: 17;

  width: calc(100% - 20px);
  min-width: 0;
  max-height: 0;

  margin: 0 10px;
  padding: 0 10px;
  overflow: hidden;

  border: 1px solid transparent;
  border-radius: 14px;

  background:
    radial-gradient(circle at 18% 20%, rgba(61, 195, 255, .09), transparent 34%),
    radial-gradient(circle at 82% 20%, rgba(255, 66, 238, .10), transparent 36%),
    linear-gradient(180deg, rgba(15, 9, 39, .97), rgba(6, 5, 22, .99));

  opacity: 0;
  transform: translateY(-5px);
  pointer-events: none;

  transition:
    max-height .24s ease,
    padding .24s ease,
    margin .24s ease,
    border-color .20s ease,
    opacity .18s ease,
    transform .22s ease;
}

.time-filter-panel.is-open {
  max-height: 86px;
  margin-top: 1px;
  margin-bottom: 5px;
  padding-top: 6px;
  padding-bottom: 8px;

  border-color: rgba(162, 83, 255, .34);

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .045),
    0 8px 20px rgba(0, 0, 0, .22);

  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.time-filter-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
  padding-inline: 2px;
}

.time-filter-title {
  font-size: 9px;
  line-height: 1;
  font-weight: 650;
  letter-spacing: .02em;
  color: rgba(255, 255, 255, .58);
}

.time-filter-value {
  min-width: 0;
  overflow: hidden;
  font-size: 9px;
  line-height: 1;
  font-weight: 750;
  color: rgba(255, 255, 255, .90);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.time-scale {
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  align-items: start;
  gap: 2px;
}

.time-scale::before {
  content: "";
  position: absolute;
  z-index: 0;
  left: calc(100% / 12);
  right: calc(100% / 12);
  top: 6px;
  height: 1px;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    rgba(90, 213, 255, .30),
    rgba(163, 64, 255, .42) 50%,
    rgba(255, 66, 238, .30)
  );
  box-shadow: 0 0 7px rgba(163, 64, 255, .18);
  pointer-events: none;
}

.time-scale-option {
  position: relative;
  z-index: 1;

  display: grid;
  justify-items: center;
  gap: 5px;

  min-width: 0;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: rgba(255, 255, 255, .58);
  font: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.time-scale-dot {
  display: block;
  width: 12px;
  height: 12px;

  border: 2px solid rgba(157, 119, 232, .72);
  border-radius: 50%;

  background: #0d0828;
  box-shadow:
    0 0 0 2px rgba(5, 4, 21, .90),
    0 0 7px rgba(123, 79, 220, .20);

  transition:
    border-color .16s ease,
    background .16s ease,
    box-shadow .16s ease,
    transform .14s ease;
}

.time-scale-label {
  font-size: 9px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: -.01em;
  white-space: nowrap;
  transition: color .16s ease, text-shadow .16s ease;
}

.time-scale-option:hover .time-scale-dot {
  border-color: rgba(216, 160, 255, .90);
}

.time-scale-option:active .time-scale-dot {
  transform: scale(.88);
}

.time-scale-option.is-selected {
  color: #ffffff;
}

.time-scale-option.is-selected .time-scale-dot {
  border-color: rgba(255, 128, 244, .98);
  background: radial-gradient(circle, #ffffff 0 24%, #ff42ee 28% 58%, #7c35dc 62% 100%);
  box-shadow:
    0 0 0 2px rgba(5, 4, 21, .94),
    0 0 8px rgba(255, 66, 238, .72),
    0 0 16px rgba(163, 64, 255, .34);
}

.time-scale-option.is-selected .time-scale-label {
  color: #ffffff;
  text-shadow: 0 0 7px rgba(255, 66, 238, .48);
}

.time-scale-option:focus-visible .time-scale-dot {
  box-shadow:
    0 0 0 2px rgba(5, 4, 21, .94),
    0 0 0 4px rgba(255, 66, 238, .72),
    0 0 13px rgba(255, 66, 238, .34);
}

@media (max-width: 380px) {
  .time-filter-panel {
    width: calc(100% - 12px);
    margin-inline: 6px;
    padding-inline: 7px;
  }

  .time-filter-panel.is-open {
    max-height: 82px;
    padding-top: 6px;
    padding-bottom: 6px;
  }

  .time-filter-head {
    margin-bottom: 6px;
  }

  .time-scale {
    gap: 0;
  }

  .time-scale-label,
  .time-filter-title,
  .time-filter-value {
    font-size: 8px;
  }

  .time-scale-dot {
    width: 11px;
    height: 11px;
  }
}


/* =========================================================
   ШКАЛА ВРЕМЕНИ: ПЕРВАЯ ПОЗИЦИЯ — СБРОС
   Сбрасывает только выбранный интервал времени.
   ========================================================= */
.time-scale-reset .time-scale-dot {
  display: grid;
  place-items: center;
  border-color: rgba(255, 132, 246, .46);
  color: rgba(255, 255, 255, .62);
  background:
    radial-gradient(circle at 35% 25%, rgba(255, 255, 255, .10), transparent 44%),
    #0d0828;
}

.time-scale-reset .time-scale-dot {
  position: relative;
}

.time-scale-reset .time-scale-dot::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 6px;
  height: 6px;

  background:
    linear-gradient(
      45deg,
      transparent 40%,
      currentColor 41% 59%,
      transparent 60%
    ),
    linear-gradient(
      -45deg,
      transparent 40%,
      currentColor 41% 59%,
      transparent 60%
    );

  transform: translate(-50%, -50%);
  transform-origin: center;
  filter: drop-shadow(0 0 2px currentColor);
}

.time-scale-reset .time-scale-label {
  color: rgba(255, 255, 255, .46);
}

.time-scale-reset:disabled {
  cursor: default;
  opacity: .42;
}

.time-scale-reset:disabled .time-scale-dot {
  border-color: rgba(157, 119, 232, .38);
  box-shadow:
    0 0 0 2px rgba(5, 4, 21, .90),
    0 0 5px rgba(123, 79, 220, .10);
}

.time-scale-reset.is-enabled {
  opacity: 1;
}

.time-scale-reset.is-enabled .time-scale-dot {
  border-color: rgba(255, 128, 244, .92);
  color: #ffffff;
  background:
    radial-gradient(circle at 35% 25%, rgba(255, 255, 255, .22), transparent 44%),
    linear-gradient(180deg, rgba(80, 24, 91, .96), rgba(29, 8, 48, .98));
  box-shadow:
    0 0 0 2px rgba(5, 4, 21, .94),
    0 0 8px rgba(255, 66, 238, .48),
    0 0 14px rgba(163, 64, 255, .22);
}

.time-scale-reset.is-enabled .time-scale-label {
  color: rgba(255, 255, 255, .88);
  text-shadow: 0 0 6px rgba(255, 66, 238, .34);
}

.time-scale-reset.is-enabled:hover .time-scale-dot {
  border-color: rgba(255, 174, 248, 1);
}

/* =========================================================
   СТРАНЫ И ТУРНИРЫ
   Основная прокручиваемая область под фильтрами.
   ========================================================= */

/* Шкала времени раскрывается внутри общего блока фильтров. */
.app-shell {
  grid-template-rows: auto auto auto minmax(0, 1fr) auto !important;
}

.country-stage {
  position: relative;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: contain;

  padding: 7px 10px 18px;

  background:
    radial-gradient(circle at 78% 9%, rgba(255, 66, 238, .055), transparent 31%),
    linear-gradient(180deg, rgba(4, 3, 18, .30), rgba(1, 2, 11, .68));

  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.country-stage::-webkit-scrollbar {
  display: none;
}

.country-stage-head {
  position: sticky;
  z-index: 4;
  top: 0;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;

  min-height: 43px;
  margin: -7px -1px 8px;
  padding: 8px 5px 7px;

  background:
    linear-gradient(180deg, rgba(2, 3, 17, .98) 0%, rgba(2, 3, 17, .90) 76%, transparent 100%);
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
}

/* На главном экране список начинается сразу под фильтрами. */
.country-stage:not(.is-league-view):not(.is-match-view) > .country-stage-head {
  display: none;
}

.country-stage-heading {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.country-stage-kicker {
  font-size: 7px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: .16em;
  color: rgba(255, 117, 241, .76);
}

.country-stage-title {
  margin: 0;
  font-size: 14px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: -.015em;
  color: rgba(255, 255, 255, .96);
}

.country-stage-total {
  display: inline-grid;
  place-items: center;
  min-width: 28px;
  height: 25px;
  padding-inline: 8px;

  border: 1px solid rgba(255, 98, 240, .38);
  border-radius: 999px;

  background:
    radial-gradient(circle at 35% 25%, rgba(255,255,255,.12), transparent 45%),
    rgba(49, 20, 74, .68);

  color: #ffffff;
  font-size: 11px;
  line-height: 1;
  font-weight: 800;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.07),
    0 0 11px rgba(255, 66, 238, .12);
}

.country-list {
  display: grid;
  gap: 5px;
}

.country-card {
  overflow: hidden;
  border: 1px solid rgba(126, 86, 205, .30);
  border-radius: 14px;

  background:
    radial-gradient(circle at 86% 0%, rgba(154, 70, 255, .065), transparent 36%),
    linear-gradient(180deg, rgba(14, 10, 41, .84), rgba(6, 5, 24, .92));

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.035),
    0 8px 18px rgba(0,0,0,.18);

  transition:
    border-color .18s ease,
    box-shadow .18s ease,
    background .18s ease;
}

.country-card.is-open {
  border-color: rgba(184, 115, 255, .48);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 0 0 1px rgba(255, 66, 238, .04),
    0 10px 22px rgba(0,0,0,.22);
}

.country-row {
  width: 100%;
  min-height: 48px;

  display: grid;
  grid-template-columns: 29px minmax(0, 1fr) 23px;
  align-items: center;
  gap: 9px;

  padding: 6px 9px;
  border: 0;
  outline: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;

  -webkit-tap-highlight-color: transparent;
}

.country-row:active {
  background: rgba(255, 255, 255, .025);
}

.country-row:focus-visible {
  box-shadow: inset 0 0 0 2px rgba(255, 66, 238, .58);
}

.country-flag {
  position: relative;
  display: block;
  width: 29px;
  height: 18px;
  overflow: hidden;

  border: 1px solid rgba(255,255,255,.16);
  border-radius: 6px;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    0 3px 8px rgba(0,0,0,.22);
}

/* Упрощённые векторные флаги без внешних файлов */
.country-flag--gb {
  background:
    linear-gradient(90deg, transparent 38%, #ffffff 38% 62%, transparent 62%),
    linear-gradient(transparent 34%, #ffffff 34% 66%, transparent 66%),
    linear-gradient(90deg, transparent 43%, #e63d66 43% 57%, transparent 57%),
    linear-gradient(transparent 41%, #e63d66 41% 59%, transparent 59%),
    #233c90;
}

.country-flag--es {
  background: linear-gradient(#bc2440 0 26%, #f0c541 26% 74%, #bc2440 74% 100%);
}

.country-flag--it {
  background: linear-gradient(90deg, #24945c 0 33.33%, #f5f4ee 33.33% 66.66%, #d93e4e 66.66% 100%);
}

.country-flag--de {
  background: linear-gradient(#1b1720 0 33.33%, #d03d4c 33.33% 66.66%, #efc44b 66.66% 100%);
}

.country-flag--fr {
  background: linear-gradient(90deg, #3154a1 0 33.33%, #f6f5f2 33.33% 66.66%, #d13f55 66.66% 100%);
}

.country-flag--intl {
  display: grid;
  place-items: center;
  color: #d7c9ff;
  background:
    radial-gradient(circle at 38% 28%, rgba(255,255,255,.16), transparent 44%),
    linear-gradient(145deg, rgba(83, 52, 154, .92), rgba(27, 15, 71, .98));
}

.country-flag--intl svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.55;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.country-row-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.country-name {
  overflow: hidden;
  color: rgba(255,255,255,.94);
  font-size: 11.5px;
  line-height: 1;
  font-weight: 780;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.country-caption {
  color: rgba(225, 214, 247, .48);
  font-size: 7px;
  line-height: 1;
  font-weight: 650;
}

.country-match-count {
  display: inline-grid;
  place-items: center;
  min-width: 27px;
  height: 22px;
  padding-inline: 7px;

  border: 1px solid rgba(151, 106, 230, .32);
  border-radius: 999px;

  background: rgba(78, 57, 128, .24);
  color: rgba(255,255,255,.83);

  font-size: 10px;
  line-height: 1;
  font-weight: 800;
}


/* =========================================================
   СЧЁТЧИКИ ТУРНИРОВ И МАТЧЕЙ В СТРОКЕ СТРАНЫ
   ========================================================= */
.country-stats {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  min-width: 0;
}

.country-stat {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  height: 17px;
  padding: 0 6px;

  border: 1px solid rgba(133, 91, 210, .28);
  border-radius: 999px;

  background: rgba(43, 30, 84, .28);
  color: rgba(225, 214, 247, .62);

  font-size: 7px;
  line-height: 1;
  font-weight: 680;
  white-space: nowrap;
}

.country-stat--leagues {
  border-color: rgba(139, 105, 230, .34);
  background: rgba(81, 54, 137, .22);
}

.country-stat--matches {
  border-color: rgba(255, 66, 238, .25);
  background: rgba(111, 39, 118, .18);
}

.country-stat-label {
  overflow: hidden;
  text-overflow: ellipsis;
}

.country-stat-value {
  color: rgba(255, 255, 255, .92);
  font-size: 8px;
  line-height: 1;
  font-weight: 850;
}

.country-card.is-open .country-stat--leagues {
  border-color: rgba(157, 121, 239, .46);
}

.country-card.is-open .country-stat--matches {
  border-color: rgba(255, 66, 238, .42);
  box-shadow: 0 0 8px rgba(255, 66, 238, .08);
}

@media (max-width: 350px) {
  .country-stat {
    gap: 3px;
    padding-inline: 5px;
    font-size: 7px;
  }

  .country-stat-value {
    font-size: 7px;
  }
}

.country-chevron {
  display: grid;
  place-items: center;
  width: 19px;
  height: 19px;
  color: rgba(213, 192, 255, .56);
  transition: transform .18s ease, color .18s ease;
}

.country-chevron svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.country-card.is-open .country-chevron {
  color: rgba(255, 128, 244, .88);
  transform: rotate(180deg);
}

.country-leagues {
  display: grid;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  border-top: 1px solid transparent;

  transition:
    max-height .24s ease,
    opacity .18s ease,
    border-color .18s ease;
}

.country-card.is-open .country-leagues {
  /* Показываем все турниры. Прокрутка остаётся у общего списка стран. */
  max-height: 1200px;
  opacity: 1;
  border-top-color: rgba(151, 93, 235, .16);
}

.country-league {
  position: relative;
  width: 100%;
  min-height: 34px;

  display: grid;
  grid-template-columns: 7px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;

  padding: 5px 10px 5px 16px;
  border: 0;
  border-bottom: 1px solid rgba(255,255,255,.035);
  outline: 0;

  background: rgba(3, 3, 17, .16);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;

  -webkit-tap-highlight-color: transparent;
  transition: background .16s ease, color .16s ease;
}

.country-league:last-child {
  border-bottom: 0;
}

.country-league:hover {
  background: rgba(255,255,255,.025);
}

.country-league.is-selected {
  background:
    linear-gradient(90deg, rgba(255, 66, 238, .11), rgba(163, 64, 255, .035));
}

.country-league-marker {
  width: 5px;
  height: 5px;
  border: 1px solid rgba(180, 141, 242, .62);
  border-radius: 50%;
  background: transparent;
  box-shadow: 0 0 6px rgba(163, 64, 255, .18);
}

.country-league.is-selected .country-league-marker {
  border-color: rgba(255, 134, 244, .96);
  background: #ff42ee;
  box-shadow:
    0 0 7px rgba(255, 66, 238, .65),
    0 0 12px rgba(163, 64, 255, .24);
}

.country-league-name {
  overflow: hidden;
  color: rgba(241, 234, 255, .72);
  font-size: 8.8px;
  line-height: 1;
  font-weight: 680;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.country-league.is-selected .country-league-name {
  color: #ffffff;
}

.country-league-count {
  min-width: 18px;
  color: rgba(225, 209, 250, .52);
  font-size: 9px;
  line-height: 1;
  font-weight: 800;
  text-align: right;
}

.country-league.is-selected .country-league-count {
  color: rgba(255, 147, 243, .92);
}

@media (max-width: 380px) {
  .country-stage {
    padding-inline: 7px;
  }

  .country-list {
    gap: 6px;
  }

  .country-row {
    grid-template-columns: 27px minmax(0, 1fr) 21px;
    gap: 8px;
    min-height: 46px;
    padding-inline: 8px;
  }

  .country-flag {
    width: 27px;
    height: 18px;
  }

  .country-name {
    font-size: 11px;
  }
}


/* =========================================================
   СОСТОЯНИЯ ЗАГРУЗКИ ТУРНИРОВ ВНУТРИ СТРАНЫ
   Исправляет обрезание текста из-за сетки обычной строки лиги.
   ========================================================= */
.country-league--state {
  grid-template-columns: minmax(0, 1fr) !important;
  justify-items: center;
  min-height: 34px;
  padding: 8px 12px !important;
  cursor: default;
  background:
    linear-gradient(90deg, rgba(163, 64, 255, .035), rgba(255, 66, 238, .025));
}

.country-league--state .country-league-name {
  grid-column: 1 / -1;
  width: 100%;
  overflow: visible;
  color: rgba(238, 229, 255, .70);
  font-size: 8.8px;
  line-height: 1.25;
  text-align: center;
  text-overflow: clip;
  white-space: normal;
}

.country-league--loading {
  grid-template-columns: auto auto !important;
  justify-content: center;
  justify-items: initial;
  align-items: center;
  gap: 3px;
}

.country-league-loading-text {
  color: rgba(238, 229, 255, .78);
  font-size: 8.8px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: .01em;
}

.country-league-dots {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  height: 10px;
}

.country-league-dots span {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(255, 92, 239, .96);
  box-shadow: 0 0 5px rgba(255, 66, 238, .55);
  animation: country-league-dot-move .9s ease-in-out infinite;
}

.country-league-dots span:nth-child(2) {
  animation-delay: .14s;
}

.country-league-dots span:nth-child(3) {
  animation-delay: .28s;
}

.country-league--error {
  cursor: pointer;
}

.country-league--error .country-league-name {
  color: rgba(255, 152, 226, .86);
}

@keyframes country-league-dot-move {
  0%, 60%, 100% {
    opacity: .28;
    transform: translateY(0) scale(.82);
  }
  30% {
    opacity: 1;
    transform: translateY(-2px) scale(1);
  }
}

/* На iPhone/Telegram системная настройка «Уменьшение движения» может
   включать prefers-reduced-motion. Для этого короткого индикатора
   сохраняем мягкую анимацию точек и в таком режиме. */
.country-league-dots span {
  -webkit-animation: country-league-dot-move .9s ease-in-out infinite;
  animation: country-league-dot-move .9s ease-in-out infinite;
  will-change: transform, opacity;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

.country-league-dots span:nth-child(2) {
  -webkit-animation-delay: .14s;
  animation-delay: .14s;
}

.country-league-dots span:nth-child(3) {
  -webkit-animation-delay: .28s;
  animation-delay: .28s;
}

@-webkit-keyframes country-league-dot-move {
  0%, 60%, 100% {
    opacity: .28;
    -webkit-transform: translateY(0) scale(.82);
    transform: translateY(0) scale(.82);
  }
  30% {
    opacity: 1;
    -webkit-transform: translateY(-2px) scale(1);
    transform: translateY(-2px) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .country-league-dots span {
    -webkit-animation: country-league-dot-move .9s ease-in-out infinite !important;
    animation: country-league-dot-move .9s ease-in-out infinite !important;
  }
}

/* =========================================================
   ОБЩАЯ ЗАГРУЗКА СТРАН / СТРАНИЦЫ
   Та же анимация, что внутри раскрытой страны.
   ========================================================= */
.country-row--loading {
  display: flex !important;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  min-height: 48px;
  padding: 12px 14px !important;
  gap: 4px;
}

.country-page-loading-text {
  color: rgba(238, 229, 255, .82);
  font-size: 11px;
  line-height: 1;
  font-weight: 750;
  letter-spacing: .01em;
  white-space: nowrap;
}

.country-page-loading-dots {
  flex: 0 0 auto;
  height: 11px;
}

.country-page-loading-dots span {
  width: 3px;
  height: 3px;
}


/* =========================================================
   ПОЛНОШИРИННЫЕ СОСТОЯНИЯ СПИСКА СТРАН
   Загрузка / пустой список / ошибка не используют сетку страны.
   ========================================================= */
.country-card--state {
  width: 100%;
}

.country-row--state {
  display: flex !important;
  grid-template-columns: none !important;
  align-items: center;
  width: 100%;
  min-width: 0;
}

.country-row--state .country-row-copy {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  min-width: 0;
}

.country-row--state .country-name,
.country-row--state .country-caption {
  width: 100%;
  overflow: visible;
  white-space: normal;
  text-overflow: clip;
}

/* Ошибка загрузки стран — вся карточка является кнопкой повтора. */
.country-row--error {
  justify-content: flex-start;
  min-height: 54px;
  padding: 10px 14px !important;
  text-align: left;
  cursor: pointer;
}

.country-row--error .country-name {
  color: rgba(255, 255, 255, .94);
  font-size: 11px;
  line-height: 1.2;
  font-weight: 800;
}

.country-row--error .country-caption {
  display: block;
  margin-top: 3px;
  color: rgba(231, 216, 250, .52);
  font-size: 8px;
  line-height: 1.25;
  font-weight: 650;
}

.country-row--error:active {
  transform: scale(.995);
}

/* =========================================================
   КОМПАКТНЫЙ СПИСОК ТУРНИРОВ ВНУТРИ СТРАНЫ
   Убирает тяжёлое «окно» и залипающий hover на телефоне.
   ========================================================= */
.country-card.is-open .country-leagues {
  background: rgba(4, 3, 20, .22);
}

.country-league {
  min-height: 34px;
  grid-template-columns: 7px minmax(0, 1fr) auto;
  gap: 9px;
  padding: 0 14px 0 16px;
  border-bottom-color: rgba(162, 99, 236, .10);
  background: transparent;
  box-shadow: none;
  -webkit-touch-callout: none;
}

/* Hover применяется только там, где действительно есть мышь. */
@media (hover: hover) and (pointer: fine) {
  .country-league:hover {
    background: rgba(255, 255, 255, .025);
  }
}

/* На телефоне Telegram WebView не должен оставлять hover после касания. */
@media (hover: none), (pointer: coarse) {
  .country-league:hover {
    background: transparent;
  }

  .country-league:active {
    background: rgba(163, 64, 255, .055);
  }
}

.country-league.is-selected {
  background: rgba(255, 66, 238, .035);
  box-shadow: inset 2px 0 0 rgba(255, 66, 238, .76);
}

.country-league-marker {
  width: 5px;
  height: 5px;
}

.country-league-name {
  font-size: 10px;
  line-height: 1.2;
  font-weight: 700;
}

.country-league-count {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 18px;
  padding: 0 6px;
  border: 1px solid rgba(136, 89, 216, .24);
  border-radius: 999px;
  background: rgba(22, 13, 53, .42);
  font-size: 9px;
  line-height: 1;
  text-align: center;
}

.country-league.is-selected .country-league-count {
  border-color: rgba(255, 66, 238, .30);
  background: rgba(255, 66, 238, .07);
}

@media (max-width: 480px) {
  .country-league {
    min-height: 34px;
    padding-inline: 14px;
  }

  .country-league-name {
    font-size: 10.5px;
  }
}

/* =========================================================
   СТРАНИЦА ЛИГИ — СПИСОК МАТЧЕЙ
   Открывается внутри текущего экрана без отдельного HTML.
   Возврат выполняется нативной кнопкой Telegram.
   ========================================================= */

.country-stage.is-league-view {
  padding-inline: 8px;
}

.country-stage.is-league-view .country-stage-head {
  min-height: 54px;
  margin-top: 0;
  margin-bottom: 6px;
  padding-top: 8px;
  padding-bottom: 8px;
}

.country-stage-kicker[hidden],
.country-stage-total[hidden] {
  display: none !important;
}

.league-stage-title {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-width: 0;
  font-size: 15px;
  line-height: 1.12;
  font-weight: 800;
  letter-spacing: -.018em;
}

.league-stage-title-text {
  display: block;
  min-width: 0;
  overflow: hidden;
  color: rgba(255, 255, 255, .97);
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Флаг в заголовке намеренно меньше флага в строке страны. */
.league-header-flag {
  display: inline-flex;
  flex: 0 0 27px;
  align-items: center;
  justify-content: center;
  width: 27px;
  height: 18px;
  padding: 1px;
  overflow: hidden;
  border: 1px solid rgba(139, 97, 225, .52);
  border-radius: 6px;
  background: rgba(255, 255, 255, .07);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .24);
}

.league-header-flag img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 3px;
  object-fit: cover;
}

.league-header-flag--world {
  color: #59d8ff;
  background: linear-gradient(180deg, rgba(21, 15, 55, .96), rgba(7, 6, 27, .98));
}

.league-header-flag--world svg {
  width: 15px;
  height: 15px;
}

.country-list.is-league-list {
  gap: 5px;
}

.league-match-card {
  overflow: hidden;
  border: 1px solid rgba(126, 86, 205, .32);
  border-radius: 11px;
  background:
    radial-gradient(circle at 86% 4%, rgba(154, 70, 255, .055), transparent 37%),
    linear-gradient(180deg, rgba(13, 9, 39, .84), rgba(5, 5, 23, .93));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .035),
    0 7px 17px rgba(0, 0, 0, .18);
}

.league-match-row {
  width: 100%;
  min-height: 70px;
  display: grid;
  grid-template-columns: 45px 1px minmax(0, 1fr) 15px;
  align-items: center;
  gap: 6px;
  padding: 5px 7px;
  border: 0;
  outline: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.league-match-row:active {
  background: rgba(255, 255, 255, .025);
}

.league-match-row:focus-visible {
  box-shadow: inset 0 0 0 2px rgba(255, 66, 238, .58);
}

.league-match-datetime {
  display: grid;
  align-content: center;
  gap: 3px;
  min-width: 0;
  padding-left: 1px;
}

.league-match-datetime strong {
  color: rgba(255, 255, 255, .97);
  font-size: 13.5px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: -.025em;
}

.league-match-datetime span {
  color: rgba(224, 214, 244, .54);
  font-size: 7px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: .025em;
  text-transform: uppercase;
}

.league-match-divider {
  align-self: stretch;
  width: 1px;
  min-height: 46px;
  background: linear-gradient(
    180deg,
    transparent,
    rgba(145, 99, 225, .26) 14%,
    rgba(145, 99, 225, .34) 50%,
    rgba(145, 99, 225, .26) 86%,
    transparent
  );
}

.league-match-teams {
  display: grid;
  align-content: center;
  gap: 4px;
  min-width: 0;
}

.league-match-team {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.league-match-team > strong {
  min-width: 0;
  overflow: hidden;
  color: rgba(255, 255, 255, .92);
  font-size: 11px;
  line-height: 1.12;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.league-team-logo,
.league-team-logo-fallback {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  min-width: 22px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 25%, rgba(255, 255, 255, .14), transparent 44%),
    linear-gradient(180deg, rgba(34, 25, 69, .96), rgba(8, 7, 28, .98));
  box-shadow:
    0 0 0 1px rgba(110, 75, 190, .18),
    0 3px 8px rgba(0, 0, 0, .26);
}

.league-team-logo img {
  display: block;
  width: 100%;
  height: 100%;
  padding: 2px;
  object-fit: contain;
}

.league-team-logo--flag {
  border-radius: 6px;
}

.league-team-logo--flag img {
  padding: 1px;
  object-fit: cover;
}

.league-team-logo-fallback {
  color: rgba(255, 255, 255, .76);
  font-size: 7.2px;
  line-height: 1;
  font-weight: 850;
  letter-spacing: .02em;
}

.league-match-chevron {
  display: grid;
  place-items: center;
  width: 15px;
  height: 22px;
  color: rgba(255, 82, 237, .82);
}

.league-match-chevron svg {
  width: 11px;
  height: 11px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.15;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.league-match-state {
  min-height: 54px;
  display: grid;
  place-items: center;
  padding: 10px 12px;
  border: 1px solid rgba(126, 86, 205, .30);
  border-radius: 13px;
  background: linear-gradient(180deg, rgba(14, 10, 41, .84), rgba(6, 5, 24, .92));
  text-align: center;
}

.league-match-state.is-empty {
  gap: 4px;
}

.league-match-state.is-empty strong,
.league-match-retry strong {
  color: rgba(255, 255, 255, .92);
  font-size: 11px;
  line-height: 1.2;
  font-weight: 800;
}

.league-match-state.is-empty span,
.league-match-retry span {
  color: rgba(225, 214, 247, .52);
  font-size: 8px;
  line-height: 1.3;
  font-weight: 650;
}

.league-match-retry {
  width: 100%;
  display: grid;
  gap: 4px;
  padding: 4px;
  border: 0;
  outline: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

@media (max-width: 380px) {
  .league-stage-title {
    gap: 9px;
    font-size: 14.5px;
  }

  .league-header-flag {
    flex-basis: 26px;
    width: 26px;
    height: 19px;
  }

  .league-match-row {
    min-height: 66px;
    grid-template-columns: 43px 1px minmax(0, 1fr) 14px;
    gap: 6px;
    padding: 4px 6px;
  }

  .league-match-datetime strong {
    font-size: 13px;
  }

  .league-match-team {
    grid-template-columns: 18px minmax(0, 1fr);
    gap: 6px;
  }

  .league-team-logo,
  .league-team-logo-fallback {
    width: 18px;
    height: 18px;
    min-width: 18px;
  }

  .league-match-team > strong {
    font-size: 10.8px;
  }
}

@media (max-width: 340px) {
  .league-match-row {
    min-height: 75px;
    grid-template-columns: 44px 1px minmax(0, 1fr) 14px;
    gap: 6px;
    padding-inline: 6px;
  }

  .league-match-datetime strong {
    font-size: 12.5px;
  }

  .league-match-datetime span {
    font-size: 7px;
  }

  .league-match-team > strong {
    font-size: 10.5px;
  }

  .league-team-logo,
  .league-team-logo-fallback {
    width: 19px;
    height: 19px;
    min-width: 19px;
  }
}

@media (hover: none) {
  .league-match-row:hover {
    background: transparent;
  }
}

/* =========================================================
   СТРАНИЦА ЛИГИ — УБРАНА ДАТА ПОД ВРЕМЕНЕМ
   ========================================================= */
.league-match-datetime {
  gap: 0;
  justify-items: start;
}

.league-match-datetime span {
  display: none !important;
}

/* =========================================================
   СТРАНИЦА ЛИГИ — ЧИТАЕМОСТЬ КАРТОЧЕК МАТЧЕЙ
   ========================================================= */

/* Дополнительный запас снизу, чтобы последняя карточка
   не перекрывалась фиксированной нижней панелью. */
.country-list.is-league-list {
  padding-bottom: 92px;
}

/* Чуть больше места под время и удобнее зона справа. */
.league-match-row {
  grid-template-columns: 50px 1px minmax(0, 1fr) 22px;
  gap: 5px;
}

/* Разделитель остаётся тонким, но становится спокойнее. */
.league-match-divider {
  opacity: .68;
  background: linear-gradient(
    180deg,
    transparent,
    rgba(145, 99, 225, .18) 16%,
    rgba(145, 99, 225, .26) 50%,
    rgba(145, 99, 225, .18) 84%,
    transparent
  );
}

/* Названия команд чуть крупнее и свободнее по вертикали. */
.league-match-teams {
  gap: 5px;
}

.league-match-team > strong {
  font-size: 11px;
  line-height: 1.16;
}

/* Визуальный размер стрелки почти не меняется,
   но её зона становится заметно удобнее на телефоне. */
.league-match-chevron {
  width: 22px;
  height: 100%;
  min-height: 32px;
}

.league-match-chevron svg {
  width: 12px;
  height: 12px;
}

@media (max-width: 380px) {
  .league-match-row {
    grid-template-columns: 48px 1px minmax(0, 1fr) 21px;
    gap: 6px;
  }

  .league-match-team > strong {
    font-size: 11.8px;
    line-height: 1.16;
  }
}

@media (max-width: 340px) {
  .league-match-row {
    grid-template-columns: 47px 1px minmax(0, 1fr) 20px;
  }

  .league-match-team > strong {
    font-size: 11.2px;
  }
}

/* =========================================================
   СТРАНИЦА ЛИГИ — ВРЕМЯ ПО ЦЕНТРУ ЛЕВОЙ СЕКЦИИ
   ========================================================= */
.league-match-datetime {
  display: grid;
  place-items: center;
  align-content: center;
  justify-content: stretch;
  width: 100%;
  height: 100%;
  padding: 0;
  text-align: center;
}

.league-match-datetime strong {
  width: 100%;
  text-align: center;
}

/* =========================================================
   СТРАНИЦА ЛИГИ — УТОЧНЁННЫЙ РАЗДЕЛИТЕЛЬ В КАРТОЧКЕ МАТЧА
   ========================================================= */
.league-match-divider {
  align-self: center;
  min-height: 0;
  height: 44px;
  opacity: .84;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(145, 99, 225, .28) 10%,
    rgba(162, 107, 244, .44) 50%,
    rgba(145, 99, 225, .28) 90%,
    transparent 100%
  );
  box-shadow: 0 0 5px rgba(132, 85, 226, .10);
}

@media (max-width: 380px) {
  .league-match-divider {
    height: 42px;
  }
}

/* =========================================================
   СТРАНИЦА МАТЧА — НОВЫЙ ИЗОЛИРОВАННЫЙ ЭКРАН
   Старые страницы стран и лиги не изменяются.
   Экран включается только при data-content-view="match".
   ========================================================= */

/* Live has no date filter; retain the selected Pre-match date for the return. */
html[data-active-mode="live"] .calendar-toolbar {
  display: none !important;
}

html[data-active-mode="live"]:not([data-content-view="match"]) .app-shell {
  grid-template-rows: auto auto minmax(0, 1fr) auto !important;
}

html[data-content-view="match"] .app-shell {
  grid-template-rows: auto minmax(0, 1fr) auto !important;
}

/* На странице конкретного матча календарь, фильтры и шкала времени не нужны. */
html[data-content-view="match"] .filters-toggle,
html[data-content-view="match"] .calendar-toolbar,
html[data-content-view="match"] .date-strip,
html[data-content-view="match"] .match-filter-section,
html[data-content-view="match"] .match-filters,
html[data-content-view="match"] .time-filter-panel {
  display: none !important;
}

html[data-content-view="match"] .country-stage-head {
  display: none !important;
}

.country-stage.is-match-view {
  padding: 8px 9px 22px;
  overflow-x: hidden;
  overflow-y: auto;
  background:
    radial-gradient(circle at 82% 4%, rgba(255, 66, 238, .07), transparent 28%),
    radial-gradient(circle at 18% 22%, rgba(34, 109, 255, .055), transparent 34%),
    linear-gradient(180deg, rgba(4, 3, 18, .30), rgba(1, 2, 11, .72));
}

.country-list.is-match-page {
  display: block;
  min-height: 100%;
  padding-bottom: 14px;
}

/* На Telegram Desktop/обычном браузере колесо прокручивает именно контент
   страницы матча. Полоса прокрутки остаётся тонкой и не меняет мобильный вид. */
@media (hover: hover) and (pointer: fine) {
  .country-stage.is-match-view {
    scrollbar-width: thin;
    scrollbar-color: rgba(163, 64, 255, .46) transparent;
  }

  .country-stage.is-match-view::-webkit-scrollbar {
    display: block;
    width: 5px;
  }

  .country-stage.is-match-view::-webkit-scrollbar-track {
    background: transparent;
  }

  .country-stage.is-match-view::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(255, 66, 238, .56), rgba(163, 64, 255, .46));
  }
}

.match-page-shell {
  display: grid;
  gap: 10px;
  width: 100%;
  min-width: 0;
}

/* Страна и название турнира над карточкой матча. */
.match-page-league {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  min-height: 30px;
  padding: 1px 5px;
}

.match-page-league > span:last-child {
  min-width: 0;
  overflow: hidden;
  color: rgba(255, 255, 255, .94);
  font-size: 13px;
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: -.018em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.match-page-league .league-header-flag {
  flex-basis: 27px;
  width: 27px;
  height: 18px;
}

/* Главная карточка матча. */
.match-hero-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 76px minmax(0, 1fr);
  align-items: center;
  gap: 4px;
  min-height: 142px;
  padding: 10px 9px;
  overflow: hidden;
  border: 1px solid rgba(255, 66, 238, .68);
  border-radius: 20px;
  background:
    radial-gradient(circle at 50% 0%, rgba(163, 64, 255, .20), transparent 43%),
    radial-gradient(circle at 8% 100%, rgba(34, 109, 255, .10), transparent 39%),
    radial-gradient(circle at 93% 100%, rgba(255, 66, 238, .11), transparent 39%),
    linear-gradient(180deg, rgba(17, 10, 48, .96), rgba(6, 5, 25, .98));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .055),
    0 0 0 1px rgba(124, 70, 208, .08),
    0 12px 28px rgba(0, 0, 0, .26),
    0 0 18px rgba(255, 66, 238, .10);
}

.match-hero-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .24;
  background-image:
    linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 22px 22px;
  mask-image: radial-gradient(circle at 50% 50%, black, transparent 80%);
}

.match-hero-team,
.match-hero-center {
  position: relative;
  z-index: 1;
}

.match-hero-team {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 4px;
  min-width: 0;
  text-align: center;
}

.match-hero-team-visual {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
}

.match-hero-team-visual .league-team-logo,
.match-hero-team-visual .league-team-logo-fallback {
  width: 52px;
  height: 52px;
  min-width: 52px;
  border-radius: 50%;
}

.match-hero-team-visual .league-team-logo {
  padding: 5px;
  border: 1px solid rgba(173, 123, 255, .50);
  background:
    radial-gradient(circle at 38% 24%, rgba(255,255,255,.14), transparent 42%),
    linear-gradient(180deg, rgba(32, 21, 70, .96), rgba(11, 8, 36, .98));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .09),
    0 0 12px rgba(163, 64, 255, .22);
}

.match-hero-team-visual .league-team-logo img {
  object-fit: contain;
}

.match-hero-team-visual .league-team-logo-fallback {
  border: 1px solid rgba(177, 126, 255, .62);
  background:
    radial-gradient(circle at 35% 22%, rgba(255,255,255,.18), transparent 42%),
    linear-gradient(145deg, rgba(48, 31, 91, .98), rgba(12, 8, 38, .99));
  color: #ffffff;
  font-size: 15px;
  font-weight: 850;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .10),
    0 0 12px rgba(163, 64, 255, .28);
}

.match-hero-team > strong {
  display: -webkit-box;
  width: 100%;
  min-width: 0;
  overflow: hidden;
  color: rgba(255, 255, 255, .98);
  font-size: 11.5px;
  line-height: 1.16;
  font-weight: 800;
  letter-spacing: -.018em;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.match-hero-team > span:last-child {
  color: rgba(213, 188, 255, .56);
  font-size: 8px;
  line-height: 1;
  font-weight: 700;
}

.match-hero-center {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 5px;
  min-width: 0;
}

.match-hero-date {
  color: rgba(227, 214, 250, .68);
  font-size: 9px;
  line-height: 1;
  font-weight: 700;
}

.match-hero-time {
  color: #ffffff;
  font-size: 26px;
  line-height: .95;
  font-weight: 850;
  letter-spacing: -.045em;
  text-shadow: 0 0 13px rgba(255, 255, 255, .10);
}

.match-hero-vs {
  display: grid;
  place-items: center;
  min-width: 37px;
  height: 26px;
  margin-top: 1px;
  border: 1px solid rgba(255, 66, 238, .55);
  border-radius: 10px;
  background: rgba(50, 17, 69, .70);
  color: #ff79ef;
  font-size: 12px;
  line-height: 1;
  font-weight: 850;
  box-shadow: 0 0 10px rgba(255, 66, 238, .13);
}

.match-hero-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 62px;
  height: 22px;
  padding: 0 9px;
  border: 1px solid rgba(255, 66, 238, .38);
  border-radius: 999px;
  background: rgba(78, 24, 91, .44);
  color: rgba(255, 154, 244, .92);
  font-size: 8px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: .02em;
}

.match-hero-status.is-live {
  border-color: rgba(66, 239, 152, .55);
  background: rgba(23, 92, 66, .40);
  color: #7dffc1;
  box-shadow: 0 0 10px rgba(66, 239, 152, .14);
}

/* Пять вкладок страницы матча. */
.match-section-tabs {
  display: flex;
  align-items: stretch;
  gap: 5px;
  width: 100%;
  min-width: 0;
  padding: 4px;
  overflow-x: auto;
  overflow-y: hidden;
  border: 1px solid rgba(126, 86, 205, .34);
  border-radius: 15px;
  background:
    linear-gradient(180deg, rgba(14, 10, 41, .88), rgba(6, 5, 24, .95));
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.match-section-tabs::-webkit-scrollbar {
  display: none;
}

.match-section-tab {
  position: relative;
  flex: 1 0 auto;
  min-width: 65px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0 8px;
  border: 1px solid transparent;
  border-radius: 11px;
  outline: 0;
  background: transparent;
  color: rgba(224, 213, 247, .58);
  font: inherit;
  cursor: pointer;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  transition:
    color .16s ease,
    border-color .16s ease,
    background .16s ease,
    box-shadow .16s ease;
}

.match-section-tab:first-child {
  min-width: 93px;
}

.match-section-tab:last-child {
  min-width: 112px;
}

.match-section-tab > span:last-child {
  font-size: 10px;
  line-height: 1;
  font-weight: 760;
}

.match-section-tab-icon {
  display: inline-grid;
  place-items: center;
  flex: 0 0 17px;
  width: 17px;
  height: 17px;
  color: currentColor;
}

.match-section-tab-icon svg,
.match-panel-title-icon svg,
.match-tab-empty-icon svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.match-section-tab-icon text {
  fill: currentColor;
  stroke: none;
  font-family: Inter, Arial, sans-serif;
  font-size: 8px;
  font-weight: 850;
  text-anchor: middle;
  dominant-baseline: middle;
}

.match-section-tab.is-active {
  border-color: rgba(255, 66, 238, .82);
  background:
    radial-gradient(circle at 24% 10%, rgba(255,255,255,.08), transparent 36%),
    linear-gradient(180deg, rgba(60, 17, 75, .90), rgba(22, 8, 44, .96));
  color: #ffffff;
  box-shadow:
    0 0 9px rgba(255, 66, 238, .24),
    inset 0 1px 0 rgba(255,255,255,.06);
}

.match-section-tab:focus-visible {
  box-shadow:
    0 0 0 2px rgba(4, 3, 18, .96),
    0 0 0 3px rgba(255, 66, 238, .78);
}

.match-tab-panel {
  display: grid;
  gap: 10px;
  min-width: 0;
}

/* Ползунок дистанции анализа. */
.match-distance-card,
.match-stats-preview,
.match-tab-empty {
  overflow: hidden;
  border: 1px solid rgba(126, 86, 205, .32);
  border-radius: 16px;
  background:
    radial-gradient(circle at 84% 4%, rgba(154, 70, 255, .07), transparent 34%),
    linear-gradient(180deg, rgba(14, 10, 41, .86), rgba(6, 5, 24, .94));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.035),
    0 9px 20px rgba(0,0,0,.18);
}

.match-distance-card {
  padding: 12px 13px 11px;
}

.match-distance-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.match-distance-head > span {
  color: rgba(255,255,255,.92);
  font-size: 12px;
  line-height: 1;
  font-weight: 800;
}

.match-distance-head > strong {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 78px;
  height: 26px;
  padding: 0 10px;
  border: 1px solid rgba(255, 66, 238, .52);
  border-radius: 999px;
  background: rgba(81, 25, 94, .44);
  color: #ffffff;
  font-size: 10px;
  line-height: 1;
  font-weight: 800;
  box-shadow: 0 0 9px rgba(255, 66, 238, .13);
}

.match-distance-range-wrap {
  /* Native range ограничивает путь центра бегунка половиной его диаметра.
     Сам input расширен на диаметр бегунка и вынесен за края шкалы ровно
     на половину. Поэтому центры значений 1–10 совпадают с цифрами. */
  --match-distance-thumb-size: 19px;
  --match-distance-progress: 44.444%;
  position: relative;
  padding: 2px 0 0;
}

/* Отдельная видимая шкала. Native track остаётся прозрачным, поэтому его
   внутренние отступы браузера больше не влияют на геометрию. */
.match-distance-range-wrap::before,
.match-distance-range-wrap::after {
  content: "";
  position: absolute;
  z-index: 0;
  left: 0;
  top: 11px;
  height: 4px;
  border-radius: 999px;
  pointer-events: none;
}

.match-distance-range-wrap::before {
  right: 0;
  background: rgba(112, 92, 166, .45);
  box-shadow: 0 0 7px rgba(163, 64, 255, .18);
}

.match-distance-range-wrap::after {
  width: var(--match-distance-progress);
  background: linear-gradient(90deg, #ff42ee, #a340ff);
  box-shadow: 0 0 7px rgba(255, 66, 238, .20);
}

.match-distance-range {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  z-index: 2;
  display: block;
  width: calc(100% + var(--match-distance-thumb-size));
  height: 22px;
  margin: 0 0 0 calc(var(--match-distance-thumb-size) / -2);
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  cursor: pointer;
}

.match-distance-range::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 999px;
  background: transparent;
  box-shadow: none;
}

.match-distance-range::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  width: 19px;
  height: 19px;
  margin-top: -7.5px;
  border: 3px solid rgba(255,255,255,.95);
  border-radius: 50%;
  background: #b54cff;
  box-shadow:
    0 0 0 3px rgba(163, 64, 255, .36),
    0 0 10px rgba(255, 66, 238, .72),
    0 0 19px rgba(163, 64, 255, .38);
}

.match-distance-range::-moz-range-track,
.match-distance-range::-moz-range-progress {
  height: 4px;
  border-radius: 999px;
  background: transparent;
}

.match-distance-range::-moz-range-thumb {
  width: 19px;
  height: 19px;
  border: 3px solid rgba(255,255,255,.95);
  border-radius: 50%;
  background: #b54cff;
  box-shadow:
    0 0 0 3px rgba(163, 64, 255, .36),
    0 0 10px rgba(255, 66, 238, .72);
}

.match-distance-scale {
  position: relative;
  display: block;
  width: 100%;
  height: 12px;
  margin-top: 1px;
  color: rgba(222, 210, 245, .46);
  font-size: 8px;
  line-height: 1;
  font-weight: 700;
}

.match-distance-scale > span {
  position: absolute;
  top: 0;
  left: calc((var(--distance-step) - 1) * 100% / 9);
  min-width: 12px;
  text-align: center;
  transform: translateX(-50%);
  transition: color .14s ease, text-shadow .14s ease, transform .14s ease;
}

.match-distance-scale > span.is-selected {
  color: rgba(255, 255, 255, .98);
  text-shadow: 0 0 7px rgba(255, 66, 238, .62);
  transform: translateX(-50%) scale(1.08);
}

/* Первый каркас вкладки «Статистика». */
.match-stats-preview {
  padding: 12px;
}

.match-panel-title {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  margin-bottom: 12px;
}

.match-panel-title-icon {
  display: inline-grid;
  place-items: center;
  flex: 0 0 25px;
  width: 25px;
  height: 25px;
  padding: 5px;
  border: 1px solid rgba(171, 118, 255, .42);
  border-radius: 8px;
  background: rgba(70, 45, 120, .30);
  color: #c4a6ff;
}

.match-panel-title-copy {
  min-width: 0;
  color: rgba(255, 255, 255, .96);
  font-size: 12px;
  line-height: 1.15;
  font-weight: 800;
  white-space: nowrap;
}

.match-panel-title-copy strong {
  margin-inline: 2px;
  color: #ff55ed;
  font-size: 13px;
  line-height: 1;
  font-weight: 850;
  text-shadow:
    0 0 6px rgba(255, 66, 238, .54),
    0 0 12px rgba(163, 64, 255, .24);
}

.match-panel-title-copy [data-match-stats-distance-word] {
  color: inherit;
}

.match-stats-placeholder {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 34px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-height: 52px;
  padding: 8px 10px;
  border: 1px solid rgba(132, 85, 226, .22);
  border-radius: 12px;
  background: rgba(5, 4, 22, .36);
}

.match-stats-team-name {
  min-width: 0;
  overflow: hidden;
  color: rgba(255,255,255,.78);
  font-size: 9px;
  line-height: 1.2;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.match-stats-team-name--away {
  text-align: right;
}

.match-stats-placeholder-line {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,66,238,.50), transparent);
}

.match-panel-state {
  display: grid;
  gap: 5px;
  justify-items: center;
  padding: 16px 10px 6px;
  text-align: center;
}

.match-panel-state strong {
  color: rgba(255,255,255,.86);
  font-size: 10.5px;
  line-height: 1.2;
  font-weight: 800;
}

.match-panel-state span {
  max-width: 290px;
  color: rgba(221, 207, 244, .48);
  font-size: 8px;
  line-height: 1.35;
  font-weight: 650;
}

/* Остальные вкладки пока имеют отдельный чистый контейнер. */
.match-tab-empty {
  min-height: 155px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 9px;
  padding: 22px;
  text-align: center;
}

.match-tab-empty-icon {
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  padding: 10px;
  border: 1px solid rgba(255, 66, 238, .46);
  border-radius: 13px;
  background: rgba(70, 25, 88, .32);
  color: #ff7aee;
  box-shadow: 0 0 12px rgba(255, 66, 238, .12);
}

.match-tab-empty strong {
  color: rgba(255,255,255,.92);
  font-size: 12px;
  line-height: 1;
  font-weight: 800;
}

.match-tab-empty > span:last-child {
  max-width: 280px;
  color: rgba(221, 207, 244, .50);
  font-size: 9px;
  line-height: 1.4;
  font-weight: 650;
}

@media (max-width: 380px) {
  .country-stage.is-match-view {
    padding-inline: 7px;
  }

  .match-page-shell {
    gap: 8px;
  }

  .match-hero-card {
    grid-template-columns: minmax(0, 1fr) 70px minmax(0, 1fr);
    min-height: 134px;
    padding: 8px 7px;
    border-radius: 18px;
  }

  .match-hero-team-visual,
  .match-hero-team-visual .league-team-logo,
  .match-hero-team-visual .league-team-logo-fallback {
    width: 48px;
    height: 48px;
    min-width: 48px;
  }

  .match-hero-team-visual .league-team-logo-fallback {
    font-size: 13px;
  }

  .match-hero-team > strong {
    font-size: 11px;
  }

  .match-hero-time {
    font-size: 24px;
  }

  .match-section-tab {
    min-width: 62px;
    height: 40px;
    padding-inline: 7px;
  }

  .match-section-tab:first-child {
    min-width: 89px;
  }

  .match-section-tab:last-child {
    min-width: 108px;
  }

  .match-section-tab > span:last-child {
    font-size: 8.8px;
  }
}

@media (max-width: 340px) {
  .match-hero-card {
    grid-template-columns: minmax(0, 1fr) 64px minmax(0, 1fr);
    min-height: 128px;
  }

  .match-hero-team-visual,
  .match-hero-team-visual .league-team-logo,
  .match-hero-team-visual .league-team-logo-fallback {
    width: 44px;
    height: 44px;
    min-width: 44px;
  }

  .match-hero-team > strong {
    font-size: 10px;
  }

  .match-hero-time {
    font-size: 22px;
  }

  .match-page-league > span:last-child {
    font-size: 12px;
  }
}

/* =========================================================
   СТРАНИЦА МАТЧА: СКРЫТЫЙ ВЕРТИКАЛЬНЫЙ СКРОЛЛБАР
   И ПЕРЕТАСКИВАНИЕ ГОРИЗОНТАЛЬНЫХ ВКЛАДОК МЫШЬЮ
   ========================================================= */

/* Контент продолжает прокручиваться колесом и пальцем, но сама
   вертикальная полоса не занимает место и не видна. */
.country-stage.is-match-view {
  scrollbar-width: none !important;
  -ms-overflow-style: none;
}

.country-stage.is-match-view::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

/* На компьютере строку вкладок можно тянуть зажатой левой кнопкой мыши. */
.match-section-tabs {
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  overscroll-behavior-x: contain;
  scroll-behavior: smooth;
}

.match-section-tabs.is-dragging {
  cursor: grabbing;
  scroll-behavior: auto;
}

.match-section-tabs.is-dragging,
.match-section-tabs.is-dragging * {
  user-select: none !important;
  -webkit-user-select: none !important;
}


/* =========================================================
   СТРАНИЦА МАТЧА: ШКАЛА ВНУТРИ «СРЕДНИХ ПОКАЗАТЕЛЕЙ»
   Отдельный блок «Дистанция анализа» больше не используется.
   ========================================================= */
.match-stats-preview {
  padding: 13px 12px 12px;
}

.match-panel-title--stats {
  margin-bottom: 8px;
}

.match-panel-title--stats .match-panel-title-copy {
  color: #ffffff;
  font-size: 12px;
  line-height: 1.2;
  font-weight: 800;
}

.match-panel-title--stats .match-panel-title-copy strong {
  margin-inline: 3px;
  color: #ff55ed;
  font-size: 13px;
  font-weight: 850;
  text-shadow:
    0 0 6px rgba(255, 66, 238, .58),
    0 0 12px rgba(163, 64, 255, .26);
}

.match-panel-title--stats [data-match-stats-distance-word] {
  color: #ffffff;
}

.match-stats-distance-range {
  margin: 0 4px 12px;
}

.match-stats-distance-range + .match-stats-placeholder {
  margin-top: 0;
}

/* =========================================================
   СТРАНИЦА МАТЧА: ФОРМА КОМАНД W / D / L
   До 5 результатов — одна строка. От 6 до 10 — две строки
   по 5 карточек на телефоне и компьютере.
   ========================================================= */
.match-form-container {
  min-width: 0;
  margin-top: 2px;
}

.match-form-comparison {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr);
  align-items: stretch;
  gap: 8px;
  min-width: 0;
  padding: 10px 9px;
  border: 1px solid rgba(132, 85, 226, .22);
  border-radius: 12px;
  background:
    radial-gradient(circle at 50% 0%, rgba(163, 64, 255, .055), transparent 52%),
    rgba(5, 4, 22, .38);
}

.match-form-team {
  display: grid;
  align-content: start;
  justify-items: center;
  gap: 8px;
  min-width: 0;
}

.match-form-team-name {
  display: block;
  width: 100%;
  min-width: 0;
  overflow: hidden;
  color: rgba(255, 255, 255, .82);
  font-size: 9px;
  line-height: 1.15;
  font-weight: 780;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.match-form-divider {
  width: 1px;
  min-height: 52px;
  align-self: stretch;
  background: linear-gradient(
    180deg,
    transparent,
    rgba(255, 66, 238, .24) 18%,
    rgba(163, 64, 255, .38) 50%,
    rgba(255, 66, 238, .24) 82%,
    transparent
  );
}

.match-form-results {
  display: grid;
  grid-template-columns: repeat(var(--match-form-columns, 5), 24px);
  grid-auto-rows: 22px;
  justify-content: center;
  gap: 5px 4px;
  width: 100%;
  min-width: 0;
}

.match-form-result {
  position: relative;
  z-index: 0;
  isolation: isolate;
  display: grid;
  place-items: center;
  width: 24px;
  height: 22px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 6px;
  font-size: 10px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: .01em;
  text-align: center;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .12),
    0 4px 8px rgba(0, 0, 0, .22);
}

.match-form-result > span {
  position: relative;
  z-index: 2;
}

.match-form-result.is-win {
  border-color: rgba(79, 239, 157, .62);
  background:
    radial-gradient(circle at 35% 20%, rgba(255, 255, 255, .20), transparent 42%),
    linear-gradient(180deg, rgba(31, 151, 99, .96), rgba(12, 91, 61, .98));
  color: #ffffff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .14),
    0 0 8px rgba(53, 224, 139, .22),
    0 4px 8px rgba(0, 0, 0, .22);
}

.match-form-result.is-draw {
  border-color: rgba(255, 216, 80, .72);
  background:
    radial-gradient(circle at 35% 20%, rgba(255, 255, 255, .28), transparent 42%),
    linear-gradient(180deg, rgba(240, 188, 45, .98), rgba(184, 125, 20, .98));
  color: #241900;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .24);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .22),
    0 0 8px rgba(255, 204, 57, .22),
    0 4px 8px rgba(0, 0, 0, .22);
}

.match-form-result.is-loss {
  border-color: rgba(255, 91, 119, .66);
  background:
    radial-gradient(circle at 35% 20%, rgba(255, 255, 255, .18), transparent 42%),
    linear-gradient(180deg, rgba(201, 53, 83, .98), rgba(120, 24, 51, .99));
  color: #ffffff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .13),
    0 0 8px rgba(255, 62, 105, .20),
    0 4px 8px rgba(0, 0, 0, .22);
}

/* Поддержка будущего признака дополнительного времени из API. */
.match-form-result.is-extra-time::after {
  content: "";
  position: absolute;
  z-index: 1;
  left: -8px;
  top: 8px;
  width: 40px;
  height: 5px;
  background: rgba(255, 221, 68, .92);
  box-shadow: 0 0 6px rgba(255, 221, 68, .45);
  transform: rotate(-38deg);
  pointer-events: none;
}

.match-form-no-data {
  display: grid;
  place-items: center;
  min-height: 22px;
  color: rgba(224, 211, 247, .42);
  font-size: 8px;
  line-height: 1;
  font-weight: 680;
}

.match-form-state {
  min-height: 64px;
  width: 100%;
  border: 1px solid rgba(132, 85, 226, .22);
  border-radius: 12px;
  background: rgba(5, 4, 22, .38);
  color: inherit;
  font: inherit;
}

.match-form-state--loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  color: rgba(238, 229, 255, .80);
  font-size: 10px;
  line-height: 1;
  font-weight: 760;
}

.match-form-loading-dots {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  height: 10px;
}

.match-form-loading-dots i {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #ff5cef;
  box-shadow: 0 0 5px rgba(255, 66, 238, .55);
  animation: match-form-dot-move .9s ease-in-out infinite;
}

.match-form-loading-dots i:nth-child(2) { animation-delay: .14s; }
.match-form-loading-dots i:nth-child(3) { animation-delay: .28s; }

@keyframes match-form-dot-move {
  0%, 60%, 100% { opacity: .30; transform: translateY(0) scale(.82); }
  30% { opacity: 1; transform: translateY(-2px) scale(1); }
}

.match-form-state--error {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 4px;
  padding: 10px;
  outline: 0;
  cursor: pointer;
  text-align: center;
}

.match-form-state--error strong {
  color: rgba(255, 255, 255, .88);
  font-size: 8.8px;
  line-height: 1.2;
  font-weight: 800;
}

.match-form-state--error span {
  color: rgba(224, 211, 247, .48);
  font-size: 8px;
  line-height: 1.2;
  font-weight: 650;
}

.match-form-state--error:active {
  transform: scale(.995);
}

@media (max-width: 350px) {
  .match-form-comparison {
    gap: 6px;
    padding-inline: 7px;
  }

  .match-form-results {
    grid-template-columns: repeat(var(--match-form-columns, 5), 22px);
    grid-auto-rows: 21px;
    gap: 4px 3px;
  }

  .match-form-result {
    width: 22px;
    height: 18px;
    font-size: 9px;
  }

  .match-form-team-name {
    font-size: 8px;
  }
}


/* =========================================================
   СТРАНИЦА МАТЧА: ФОРМА КОМАНД ПЕРЕНЕСЕНА В ГЛАВНУЮ КАРТОЧКУ
   Результаты W / D / L находятся прямо под названием каждой команды.
   До 5 матчей — одна строка, от 6 до 10 — две строки по 5.
   ========================================================= */
.match-hero-card {
  min-height: 150px;
  padding-top: 9px;
  padding-bottom: 8px;
}

.match-hero-team {
  grid-template-rows: 52px minmax(26px, auto) 34px;
  align-content: center;
  gap: 3px;
}

.match-hero-team > strong {
  min-height: 26px;
  align-content: center;
}

.match-hero-form {
  display: grid;
  place-items: center;
  align-content: center;
  width: 100%;
  min-width: 0;
  min-height: 34px;
  margin-top: 0;
}

.match-hero-form-results {
  display: grid;
  grid-template-columns: repeat(var(--match-form-columns, 5), 17px);
  grid-auto-rows: 16px;
  justify-content: center;
  gap: 3px;
  width: 100%;
  min-width: 0;
}

/* Внутри главной карточки используем более компактные W / D / L. */
.match-hero-form .match-form-result {
  width: 17px;
  height: 16px;
  border-radius: 5px;
  font-size: 7px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .11),
    0 0 6px rgba(0, 0, 0, .18);
}

.match-hero-form .match-form-result.is-win {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .13),
    0 0 6px rgba(53, 224, 139, .20);
}

.match-hero-form .match-form-result.is-draw {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .18),
    0 0 6px rgba(255, 204, 57, .20);
}

.match-hero-form .match-form-result.is-loss {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .12),
    0 0 6px rgba(255, 62, 105, .18);
}

.match-hero-form .match-form-result.is-extra-time::after {
  left: -7px;
  top: 6px;
  width: 30px;
  height: 4px;
}

.match-hero-form-loading {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 16px;
}

.match-hero-form-loading i {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #ff5cef;
  box-shadow: 0 0 5px rgba(255, 66, 238, .55);
  animation: match-form-dot-move .9s ease-in-out infinite;
}

.match-hero-form-loading i:nth-child(2) { animation-delay: .14s; }
.match-hero-form-loading i:nth-child(3) { animation-delay: .28s; }

.match-hero-form-retry {
  min-height: 18px;
  padding: 0 7px;
  border: 1px solid rgba(255, 66, 238, .34);
  border-radius: 999px;
  outline: 0;
  background: rgba(72, 23, 86, .34);
  color: rgba(255, 159, 244, .88);
  font: inherit;
  font-size: 7px;
  line-height: 1;
  font-weight: 750;
  cursor: pointer;
}

.match-hero-form-no-data {
  color: rgba(221, 207, 244, .36);
  font-size: 12px;
  line-height: 1;
  font-weight: 700;
}

/* В блоке средних показателей остаются заголовок, шкала и будущие метрики. */
.match-stats-preview {
  min-height: 92px;
}

@media (max-width: 380px) {
  .match-hero-card {
    min-height: 146px;
    padding-top: 6px;
    padding-bottom: 6px;
  }

  .match-hero-team {
    grid-template-rows: 48px minmax(25px, auto) 33px;
  }

  .match-hero-team > strong {
    min-height: 25px;
  }

  .match-hero-form-results {
    grid-template-columns: repeat(var(--match-form-columns, 5), 16px);
    grid-auto-rows: 15px;
    gap: 3px;
  }

  .match-hero-form .match-form-result {
    width: 16px;
    height: 15px;
    font-size: 7px;
  }
}

@media (max-width: 340px) {
  .match-hero-card {
    min-height: 142px;
  }

  .match-hero-team {
    grid-template-rows: 44px minmax(24px, auto) 32px;
  }

  .match-hero-form-results {
    grid-template-columns: repeat(var(--match-form-columns, 5), 15px);
    grid-auto-rows: 14px;
    gap: 3px 2px;
  }

  .match-hero-form .match-form-result {
    width: 15px;
    height: 14px;
    font-size: 4.9px;
    border-radius: 4px;
  }
}

/* =========================================================
   СТРАНИЦА МАТЧА: ДВА БЛОКА СТАТИСТИКИ ВО ВКЛАДКЕ «ОБЗОР»
   1) Игровая статистика — xG, удары, угловые, карточки, офсайды.
   2) Букмекерская статистика — победы, тоталы и средние голы.
   Старые страницы стран и лиги не затрагиваются.
   ========================================================= */
.match-overview-card {
  overflow: hidden;
  border: 1px solid rgba(126, 86, 205, .32);
  border-radius: 16px;
  background:
    radial-gradient(circle at 86% 4%, rgba(154, 70, 255, .075), transparent 36%),
    linear-gradient(180deg, rgba(14, 10, 41, .88), rgba(6, 5, 24, .96));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .04),
    0 9px 20px rgba(0, 0, 0, .18);
}

.match-overview-card--game {
  border-color: rgba(122, 98, 229, .36);
}

.match-overview-card--bookmaker {
  border-color: rgba(255, 66, 238, .28);
}

.match-overview-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 8px 11px;
  border-bottom: 1px solid rgba(151, 93, 235, .14);
  color: rgba(255, 255, 255, .96);
  font-size: 12px;
  line-height: 1;
  font-weight: 820;
  letter-spacing: -.012em;
}

.match-overview-card--game .match-overview-card-head {
  background:
    linear-gradient(90deg, rgba(78, 55, 164, .18), rgba(22, 13, 54, .04));
}

.match-overview-card--bookmaker .match-overview-card-head {
  background:
    linear-gradient(90deg, rgba(255, 66, 238, .11), rgba(22, 13, 54, .04));
}

.match-overview-card-icon {
  display: inline-grid;
  place-items: center;
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  padding: 5px;
  border: 1px solid rgba(177, 126, 255, .38);
  border-radius: 8px;
  background: rgba(67, 43, 119, .30);
  color: #c7adff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
}

.match-overview-card--bookmaker .match-overview-card-icon {
  border-color: rgba(255, 92, 239, .36);
  background: rgba(106, 30, 105, .26);
  color: #ff83ef;
}

.match-overview-card-icon svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.match-overview-card-icon text {
  fill: currentColor;
  stroke: none;
  font-family: Inter, Arial, sans-serif;
  font-size: 8px;
  font-weight: 850;
  text-anchor: middle;
  dominant-baseline: middle;
}

.match-overview-card-body {
  min-height: 70px;
  padding: 8px 10px 10px;
}

.match-overview-teams {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 78px minmax(0, 1fr);
  align-items: center;
  gap: 5px;
  min-height: 28px;
  margin-bottom: 4px;
  padding: 0 3px 5px;
  border-bottom: 1px solid rgba(151, 93, 235, .11);
}

.match-overview-teams strong {
  min-width: 0;
  overflow: hidden;
  color: rgba(255, 255, 255, .82);
  font-size: 8px;
  line-height: 1.15;
  font-weight: 760;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.match-overview-teams strong:last-child {
  text-align: right;
}

.match-overview-teams > span {
  color: rgba(217, 201, 244, .36);
  font-size: 7px;
  line-height: 1;
  font-weight: 700;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.match-overview-rows {
  display: grid;
}

.match-overview-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(94px, 1.12fr) minmax(0, 1fr);
  align-items: center;
  gap: 5px;
  min-height: 34px;
  padding: 4px 3px;
  border-bottom: 1px solid rgba(255, 255, 255, .035);
}

.match-overview-row:last-child {
  border-bottom: 0;
}

.match-overview-side {
  display: flex;
  min-width: 0;
}

.match-overview-side--home {
  justify-content: flex-start;
}

.match-overview-side--away {
  justify-content: flex-end;
}

.match-overview-label {
  min-width: 0;
  color: rgba(231, 220, 249, .62);
  font-size: 8px;
  line-height: 1.16;
  font-weight: 710;
  text-align: center;
}

.match-overview-value {
  display: grid;
  justify-items: center;
  gap: 2px;
  min-width: 36px;
  padding: 4px 6px;
  border: 1px solid rgba(137, 96, 218, .20);
  border-radius: 9px;
  background: rgba(45, 31, 83, .22);
}

.match-overview-card--bookmaker .match-overview-value {
  border-color: rgba(255, 66, 238, .18);
  background: rgba(88, 28, 91, .16);
}

.match-overview-value strong {
  color: rgba(255, 255, 255, .96);
  font-size: 11px;
  line-height: 1;
  font-weight: 850;
  letter-spacing: -.02em;
}

.match-overview-card--bookmaker .match-overview-value strong {
  color: #ff9af2;
  text-shadow: 0 0 7px rgba(255, 66, 238, .24);
}

.match-overview-value small {
  color: rgba(222, 208, 245, .46);
  font-size: 6.8px;
  line-height: 1;
  font-weight: 680;
  white-space: nowrap;
}

.match-overview-value.is-empty {
  border-color: transparent;
  background: transparent;
}

.match-overview-value.is-empty strong,
.match-overview-value.is-empty {
  color: rgba(221, 207, 244, .34);
}

.match-overview-state {
  min-height: 64px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 10px;
  border: 0;
  outline: 0;
  background: transparent;
  color: rgba(225, 214, 247, .50);
  font: inherit;
  font-size: 9px;
  line-height: 1.3;
  font-weight: 680;
  text-align: center;
}

.match-overview-state--loading {
  color: rgba(239, 231, 255, .72);
}

.match-overview-loading-dots {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  height: 10px;
}

.match-overview-loading-dots i {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #ff5cef;
  box-shadow: 0 0 5px rgba(255, 66, 238, .55);
  animation: match-form-dot-move .9s ease-in-out infinite;
}

.match-overview-loading-dots i:nth-child(2) { animation-delay: .14s; }
.match-overview-loading-dots i:nth-child(3) { animation-delay: .28s; }

.match-overview-state--error {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 4px;
  cursor: pointer;
}

.match-overview-state--error strong {
  color: rgba(255, 255, 255, .86);
  font-size: 8.8px;
  line-height: 1.2;
  font-weight: 800;
}

.match-overview-state--error span {
  color: rgba(255, 126, 241, .78);
  font-size: 8px;
  line-height: 1;
  font-weight: 740;
}

.match-overview-state--error:active {
  transform: scale(.995);
}

/* После добавления двух карточек экран должен свободно прокручиваться
   до самой последней строки, не заходя под нижнюю панель. */
.country-list.is-match-page {
  padding-bottom: 104px;
}

@media (max-width: 380px) {
  .match-overview-card-head {
    min-height: 40px;
    padding-inline: 10px;
    font-size: 11.5px;
  }

  .match-overview-card-body {
    padding-inline: 8px;
  }

  .match-overview-teams {
    grid-template-columns: minmax(0, 1fr) 68px minmax(0, 1fr);
    gap: 5px;
  }

  .match-overview-teams strong {
    font-size: 8px;
  }

  .match-overview-row {
    grid-template-columns: minmax(0, 1fr) minmax(88px, 1.08fr) minmax(0, 1fr);
    gap: 5px;
    min-height: 37px;
    padding-inline: 2px;
  }

  .match-overview-label {
    font-size: 8px;
  }

  .match-overview-value {
    min-width: 39px;
    padding-inline: 5px;
  }

  .match-overview-value strong {
    font-size: 10.5px;
  }

  .match-overview-value small {
    font-size: 5.8px;
  }
}

@media (max-width: 340px) {
  .match-overview-row {
    grid-template-columns: minmax(0, 1fr) 82px minmax(0, 1fr);
    gap: 4px;
  }

  .match-overview-label {
    font-size: 7px;
  }

  .match-overview-value {
    min-width: 31px;
    padding-inline: 4px;
  }
}

/* =========================================================
   СТРАНИЦА МАТЧА: ЕДИНОЕ БОЛЬШОЕ ОКНО «СТАТИСТИКА»
   Внутри две локальные вкладки: «Игровая» и «Букмекерская».
   Старые страницы стран, лиг и список матчей не затрагиваются.
   ========================================================= */
.match-overview-card--combined {
  min-height: 330px;
  border-color: rgba(154, 98, 236, .42);
  background:
    radial-gradient(circle at 88% 0%, rgba(255, 66, 238, .075), transparent 34%),
    radial-gradient(circle at 12% 0%, rgba(103, 78, 229, .09), transparent 34%),
    linear-gradient(180deg, rgba(14, 10, 41, .94), rgba(5, 4, 22, .98));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .045),
    0 10px 23px rgba(0, 0, 0, .22),
    0 0 0 1px rgba(112, 69, 198, .045);
}

.match-overview-card-head--combined {
  min-height: 44px;
  padding: 8px 9px 7px;
  border-bottom-color: rgba(151, 93, 235, .12);
  background:
    linear-gradient(90deg, rgba(92, 58, 176, .18), rgba(255, 66, 238, .065) 72%, transparent);
}

.match-overview-card--combined .match-overview-card-icon {
  border-color: rgba(188, 137, 255, .46);
  background:
    radial-gradient(circle at 35% 22%, rgba(255, 255, 255, .12), transparent 43%),
    rgba(74, 46, 132, .36);
  color: #cdb5ff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .07),
    0 0 8px rgba(163, 64, 255, .13);
}

.match-overview-subtabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
  padding: 8px 10px;
  border-bottom: 1px solid rgba(151, 93, 235, .13);
  background: rgba(4, 3, 19, .28);
}

.match-overview-subtab {
  position: relative;
  min-width: 0;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0 10px;
  border: 1px solid rgba(128, 91, 210, .28);
  border-radius: 11px;
  outline: 0;
  background:
    linear-gradient(180deg, rgba(25, 18, 57, .72), rgba(8, 6, 29, .82));
  color: rgba(224, 213, 247, .56);
  font: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition:
    border-color .16s ease,
    background .16s ease,
    color .16s ease,
    box-shadow .16s ease,
    transform .12s ease;
}

.match-overview-subtab::before {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .04), transparent 62%);
  pointer-events: none;
}

.match-overview-subtab > span:last-child {
  position: relative;
  z-index: 1;
  overflow: hidden;
  font-size: 10.5px;
  line-height: 1;
  font-weight: 780;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.match-overview-subtab-icon {
  position: relative;
  z-index: 1;
  display: inline-grid;
  place-items: center;
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  color: currentColor;
}

.match-overview-subtab-icon svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.match-overview-subtab-icon text {
  fill: currentColor;
  stroke: none;
  font-family: Inter, Arial, sans-serif;
  font-size: 8px;
  font-weight: 850;
  text-anchor: middle;
  dominant-baseline: middle;
}

.match-overview-subtab.is-active {
  border-color: rgba(181, 125, 255, .76);
  background:
    radial-gradient(circle at 24% 8%, rgba(255, 255, 255, .08), transparent 35%),
    linear-gradient(180deg, rgba(69, 42, 127, .80), rgba(24, 13, 59, .94));
  color: #ffffff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .07),
    0 0 9px rgba(133, 81, 230, .19);
}

.match-overview-subtab[data-match-overview-tab="bookmaker"].is-active {
  border-color: rgba(255, 66, 238, .72);
  background:
    radial-gradient(circle at 24% 8%, rgba(255, 255, 255, .08), transparent 35%),
    linear-gradient(180deg, rgba(91, 28, 101, .82), rgba(35, 10, 54, .95));
  color: #ffffff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .07),
    0 0 10px rgba(255, 66, 238, .20);
}

.match-overview-subtab:active {
  transform: scale(.985);
}

.match-overview-subtab:focus-visible {
  box-shadow:
    0 0 0 2px rgba(5, 4, 22, .96),
    0 0 0 3px rgba(255, 66, 238, .76);
}

.match-overview-card-body--combined {
  min-height: 242px;
  padding: 9px 10px 12px;
}

.match-overview-card-body--combined .match-overview-state {
  min-height: 220px;
}

.match-overview-card-body--combined.is-bookmaker .match-overview-value {
  border-color: rgba(255, 66, 238, .18);
  background: rgba(88, 28, 91, .16);
}

.match-overview-card-body--combined.is-bookmaker .match-overview-value strong {
  color: #ff9af2;
  text-shadow: 0 0 7px rgba(255, 66, 238, .24);
}

@media (max-width: 380px) {
  .match-overview-card--combined {
    min-height: 316px;
  }

  .match-overview-subtabs {
    gap: 6px;
    padding: 7px 8px;
  }

  .match-overview-subtab {
    height: 32px;
    gap: 6px;
    padding-inline: 8px;
  }

  .match-overview-subtab > span:last-child {
    font-size: 10px;
  }

  .match-overview-subtab-icon {
    flex-basis: 17px;
    width: 17px;
    height: 17px;
  }

  .match-overview-card-body--combined {
    min-height: 232px;
    padding-inline: 8px;
  }

  .match-overview-card-body--combined .match-overview-state {
    min-height: 210px;
  }
}

/* =========================================================
   СТРАНИЦА МАТЧА: КОМПАКТНОЕ ОКНО ПОЛЗУНКА
   Уменьшаем только карточку выбора дистанции. Остальные
   страницы и большое окно статистики не затрагиваются.
   ========================================================= */
html[data-content-view="match"] .match-stats-preview {
  min-height: 86px;
  padding: 10px 11px 8px;
}

html[data-content-view="match"] .match-panel-title--stats {
  margin-bottom: 6px;
}

html[data-content-view="match"] .match-panel-title--stats .match-panel-title-copy {
  font-size: 11.5px;
  line-height: 1.1;
}

html[data-content-view="match"] .match-panel-title--stats .match-panel-title-copy strong {
  font-size: 12.5px;
}

html[data-content-view="match"] .match-stats-distance-range {
  margin: 0 4px 1px;
}

html[data-content-view="match"] .match-distance-range-wrap {
  padding-top: 2px;
}

html[data-content-view="match"] .match-distance-scale {
  height: 10px;
  margin-top: 0;
  font-size: 7px;
}

@media (max-width: 380px) {
  html[data-content-view="match"] .match-stats-preview {
    min-height: 82px;
    padding: 9px 10px 7px;
  }

  html[data-content-view="match"] .match-panel-title--stats {
    margin-bottom: 6px;
  }

  html[data-content-view="match"] .match-panel-title--stats .match-panel-title-copy {
    font-size: 11px;
  }
}


/* =========================================================
   СТРАНИЦА МАТЧА — ПОКРЫТИЕ ИГРОВОЙ СТАТИСТИКИ
   Под каждым средним значением показывается, по скольким
   матчам из выбранной дистанции рассчитан показатель.
   ========================================================= */
.match-overview-value .match-overview-coverage {
  display: block;
  min-height: 7px;
  font-size: 6.7px;
  line-height: 1;
  font-weight: 760;
  letter-spacing: .01em;
  white-space: nowrap;
}

.match-overview-value.has-full-coverage .match-overview-coverage {
  color: rgba(117, 235, 186, .70);
}

.match-overview-value.has-partial-coverage .match-overview-coverage {
  color: rgba(255, 202, 104, .82);
}

.match-overview-value.has-no-coverage .match-overview-coverage {
  color: rgba(255, 126, 153, .64);
}

.match-overview-value.is-empty.has-no-coverage {
  border-color: rgba(255, 103, 137, .10);
  background: rgba(83, 25, 48, .10);
}

.match-overview-coverage-note {
  margin: 7px 2px 0;
  padding-top: 6px;
  border-top: 1px solid rgba(151, 93, 235, .10);
  color: rgba(221, 207, 244, .44);
  font-size: 7.2px;
  line-height: 1.35;
  font-weight: 650;
  text-align: center;
}

@media (max-width: 380px) {
  .match-overview-value .match-overview-coverage {
    font-size: 6.4px;
  }

  .match-overview-coverage-note {
    font-size: 7px;
  }
}

/* =========================================================
   СТРАНИЦА МАТЧА — H2H В МЕХАНИКЕ FLASHSCORE
   Три последовательных раздела:
   1) последние матчи хозяев;
   2) последние матчи гостей;
   3) очные встречи.
   Старые страницы стран, лиг и вкладка «Обзор» не затрагиваются.
   ========================================================= */
.match-h2h-page,
.match-h2h-content {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.match-h2h-section {
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(132, 86, 215, .34);
  border-radius: 16px;
  background:
    radial-gradient(circle at 90% 0%, rgba(154, 70, 255, .08), transparent 36%),
    linear-gradient(180deg, rgba(14, 10, 42, .94), rgba(5, 4, 22, .98));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .04),
    0 9px 22px rgba(0, 0, 0, .20);
}

.match-h2h-section--home {
  border-color: rgba(255, 66, 238, .36);
}

.match-h2h-section--away {
  border-color: rgba(85, 184, 255, .30);
}

.match-h2h-section--meetings {
  border-color: rgba(171, 103, 255, .42);
}

.match-h2h-section-head {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  min-height: 58px;
  padding: 9px 11px;
  border-bottom: 1px solid rgba(153, 98, 230, .16);
  background:
    linear-gradient(90deg, rgba(255, 66, 238, .035), transparent 60%),
    rgba(8, 6, 31, .42);
}

.match-h2h-section-head.is-no-count {
  grid-template-columns: 34px minmax(0, 1fr);
}

.match-h2h-section-icon {
  display: inline-grid;
  place-items: center;
  width: 29px;
  height: 34px;
  padding: 7px;
  border: 1px solid rgba(255, 91, 238, .50);
  border-radius: 11px;
  background:
    radial-gradient(circle at 35% 24%, rgba(255, 255, 255, .14), transparent 42%),
    linear-gradient(180deg, rgba(71, 25, 91, .80), rgba(22, 9, 48, .96));
  color: #ff78ee;
  box-shadow: 0 0 10px rgba(255, 66, 238, .13);
}

.match-h2h-section--away .match-h2h-section-icon {
  border-color: rgba(82, 200, 255, .46);
  background: linear-gradient(180deg, rgba(20, 70, 98, .76), rgba(8, 22, 48, .96));
  color: #74dcff;
  box-shadow: 0 0 10px rgba(57, 189, 255, .12);
}

.match-h2h-section--meetings .match-h2h-section-icon {
  border-color: rgba(176, 110, 255, .55);
  background: linear-gradient(180deg, rgba(67, 37, 121, .82), rgba(20, 11, 52, .96));
  color: #c99eff;
}

.match-h2h-section-icon svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.match-h2h-section-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.match-h2h-section-copy > strong {
  min-width: 0;
  overflow: hidden;
  color: rgba(255, 255, 255, .96);
  font-size: 12px;
  line-height: 1.1;
  font-weight: 820;
  letter-spacing: -.015em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.match-h2h-section-copy > small {
  min-width: 0;
  overflow: hidden;
  color: rgba(255, 101, 237, .78);
  font-size: 9px;
  line-height: 1;
  font-weight: 720;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.match-h2h-section--away .match-h2h-section-copy > small {
  color: rgba(113, 218, 255, .78);
}

.match-h2h-section--meetings .match-h2h-section-copy > small {
  color: rgba(204, 166, 255, .74);
}

.match-h2h-section-count {
  display: inline-grid;
  place-items: center;
  min-width: 31px;
  height: 24px;
  padding: 0 8px;
  border: 1px solid rgba(151, 105, 229, .28);
  border-radius: 999px;
  background: rgba(66, 45, 112, .22);
  color: rgba(238, 229, 255, .72);
  font-size: 8px;
  line-height: 1;
  font-weight: 800;
}

.match-h2h-list {
  display: grid;
  min-width: 0;
  padding: 0 10px;
}

.match-h2h-row {
  min-width: 0;
  border-bottom: 1px solid rgba(153, 98, 230, .10);
}

.match-h2h-row:last-child {
  border-bottom: 0;
}

.match-h2h-row--recent {
  display: grid;
  grid-template-columns: 48px 31px 20px minmax(0, 1fr) 34px 24px;
  align-items: center;
  gap: 6px;
  min-height: 52px;
  padding: 6px 1px;
}

.match-h2h-date {
  color: rgba(227, 215, 247, .62);
  font-size: 8px;
  line-height: 1;
  font-weight: 700;
  white-space: nowrap;
}

.match-h2h-league {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 18px;
  overflow: hidden;
  border: 1px solid rgba(140, 99, 220, .28);
  border-radius: 6px;
  background: rgba(31, 20, 68, .58);
  color: rgba(223, 208, 247, .70);
  font-size: 6.6px;
  line-height: 1;
  font-weight: 850;
  letter-spacing: -.01em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.match-h2h-venue {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: 50%;
  background: rgba(255, 255, 255, .035);
  color: rgba(232, 222, 249, .54);
  font-size: 5.8px;
  line-height: 1;
  font-weight: 850;
}

.match-h2h-opponent {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: center;
  gap: 5px;
  min-width: 0;
}

.match-h2h-team-mark {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  overflow: hidden;
  border: 1px solid rgba(160, 117, 235, .34);
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 23%, rgba(255, 255, 255, .14), transparent 43%),
    linear-gradient(180deg, rgba(42, 29, 82, .96), rgba(11, 8, 36, .98));
  color: rgba(255, 255, 255, .82);
  font-size: 6.8px;
  line-height: 1;
  font-weight: 850;
  letter-spacing: -.03em;
  box-shadow: 0 2px 7px rgba(0, 0, 0, .22);
}

.match-h2h-team-mark.is-home {
  border-color: rgba(255, 66, 238, .38);
  color: #ffb6f5;
}

.match-h2h-team-mark.is-away {
  border-color: rgba(80, 198, 255, .34);
  color: #b6ebff;
}

.match-h2h-opponent-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.match-h2h-opponent-copy > strong,
.match-h2h-opponent-copy > small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.match-h2h-opponent-copy > strong {
  color: rgba(255, 255, 255, .92);
  font-size: 8.8px;
  line-height: 1.08;
  font-weight: 760;
}

.match-h2h-opponent-copy > small {
  color: rgba(218, 204, 242, .42);
  font-size: 6.7px;
  line-height: 1;
  font-weight: 650;
}

.match-h2h-score {
  color: rgba(255, 255, 255, .96);
  font-size: 11px;
  line-height: 1;
  font-weight: 850;
  letter-spacing: -.02em;
  text-align: center;
  white-space: nowrap;
}

.match-h2h-result {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 6px;
  color: #ffffff;
  font-size: 8px;
  line-height: 1;
  font-weight: 900;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12);
}

.match-h2h-result.is-win {
  border-color: rgba(55, 231, 143, .65);
  background: linear-gradient(180deg, rgba(24, 167, 99, .96), rgba(8, 91, 55, .98));
  box-shadow: 0 0 8px rgba(42, 213, 126, .20);
}

.match-h2h-result.is-draw {
  border-color: rgba(255, 205, 68, .72);
  background: linear-gradient(180deg, rgba(224, 166, 25, .98), rgba(143, 94, 7, .98));
  box-shadow: 0 0 8px rgba(255, 195, 45, .17);
}

.match-h2h-result.is-loss {
  border-color: rgba(255, 87, 116, .68);
  background: linear-gradient(180deg, rgba(205, 44, 78, .98), rgba(115, 15, 40, .98));
  box-shadow: 0 0 8px rgba(255, 70, 104, .18);
}

.match-h2h-result.is-empty {
  background: rgba(255, 255, 255, .035);
  color: rgba(255, 255, 255, .42);
}

.match-h2h-result.is-extra-time::after {
  content: "";
  position: absolute;
  inset: -5px;
  background: linear-gradient(135deg, transparent 43%, rgba(255, 220, 64, .95) 44% 56%, transparent 57%);
  pointer-events: none;
}

.match-h2h-row--meeting {
  display: grid;
  grid-template-columns: 48px 31px minmax(0, 1fr);
  align-items: center;
  gap: 5px;
  min-height: 56px;
  padding: 6px 1px;
}

.match-h2h-duel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 42px minmax(0, 1fr);
  align-items: center;
  gap: 5px;
  min-width: 0;
}

.match-h2h-duel-team {
  display: grid;
  align-items: center;
  gap: 5px;
  min-width: 0;
}

.match-h2h-duel-team--home {
  grid-template-columns: 22px minmax(0, 1fr);
}

.match-h2h-duel-team--away {
  grid-template-columns: minmax(0, 1fr) 22px;
  text-align: right;
}

.match-h2h-duel-team .match-h2h-team-mark {
  width: 22px;
  height: 22px;
  font-size: 6.3px;
}

.match-h2h-duel-team > strong {
  min-width: 0;
  overflow: hidden;
  color: rgba(255, 255, 255, .86);
  font-size: 8px;
  line-height: 1.1;
  font-weight: 730;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.match-h2h-duel-score {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 2px;
  min-width: 0;
  color: #ffffff;
  text-align: center;
}

.match-h2h-duel-score b {
  font-size: 11px;
  line-height: 1;
  font-weight: 900;
}

.match-h2h-duel-score i {
  color: rgba(255, 102, 238, .72);
  font-size: 9px;
  line-height: 1;
  font-style: normal;
  font-weight: 800;
}

.match-h2h-more {
  width: 100%;
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 10px;
  border: 0;
  border-top: 1px solid rgba(153, 98, 230, .11);
  outline: 0;
  background: rgba(8, 6, 30, .34);
  color: rgba(204, 179, 255, .82);
  font: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.match-h2h-more > span {
  font-size: 8px;
  line-height: 1;
  font-weight: 760;
}

.match-h2h-more svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.match-h2h-more:hover {
  color: #ffffff;
  background: rgba(163, 64, 255, .06);
}

.match-h2h-more:active {
  background: rgba(255, 66, 238, .07);
}

.match-h2h-empty,
.match-h2h-state {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 5px;
  min-height: 94px;
  padding: 18px 12px;
  text-align: center;
}

.match-h2h-empty > strong,
.match-h2h-state > strong {
  color: rgba(255, 255, 255, .84);
  font-size: 10px;
  line-height: 1.15;
  font-weight: 800;
}

.match-h2h-empty > span,
.match-h2h-state > span:first-child,
.match-h2h-state--error > span {
  color: rgba(219, 204, 244, .48);
  font-size: 8px;
  line-height: 1.3;
  font-weight: 650;
}

.match-h2h-state {
  min-height: 190px;
  border: 1px solid rgba(132, 86, 215, .34);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(14, 10, 42, .94), rgba(5, 4, 22, .98));
}

.match-h2h-state--error {
  width: 100%;
  border-color: rgba(255, 78, 126, .26);
  color: inherit;
  font: inherit;
  cursor: pointer;
}

@media (max-width: 380px) {
  .match-h2h-page,
  .match-h2h-content {
    gap: 8px;
  }

  .match-h2h-section {
    border-radius: 14px;
  }

  .match-h2h-section-head {
    grid-template-columns: 32px minmax(0, 1fr) auto;
    gap: 8px;
    min-height: 54px;
    padding: 8px 9px;
  }

  .match-h2h-section-icon {
    width: 32px;
    height: 30px;
    padding: 7px;
  }

  .match-h2h-section-copy > strong {
    font-size: 11.5px;
  }

  .match-h2h-section-copy > small {
    font-size: 8px;
  }

  .match-h2h-list {
    padding-inline: 8px;
  }

  .match-h2h-row--recent {
    grid-template-columns: 44px 29px 18px minmax(0, 1fr) 31px 22px;
    gap: 5px;
    min-height: 50px;
  }

  .match-h2h-date {
    font-size: 8px;
  }

  .match-h2h-league {
    width: 29px;
    font-size: 6.2px;
  }

  .match-h2h-opponent {
    grid-template-columns: 22px minmax(0, 1fr);
    gap: 6px;
  }

  .match-h2h-team-mark {
    width: 22px;
    height: 22px;
    font-size: 6.4px;
  }

  .match-h2h-opponent-copy > strong {
    font-size: 9px;
  }

  .match-h2h-opponent-copy > small {
    font-size: 6.4px;
  }

  .match-h2h-score {
    font-size: 10.5px;
  }

  .match-h2h-result {
    width: 20px;
    height: 18px;
    border-radius: 6px;
    font-size: 7px;
  }

  .match-h2h-row--meeting {
    grid-template-columns: 44px 29px minmax(0, 1fr);
    gap: 6px;
    min-height: 54px;
  }

  .match-h2h-duel {
    grid-template-columns: minmax(0, 1fr) 37px minmax(0, 1fr);
    gap: 4px;
  }

  .match-h2h-duel-team > strong {
    font-size: 7.9px;
  }

  .match-h2h-duel-team .match-h2h-team-mark {
    width: 20px;
    height: 18px;
    font-size: 5.9px;
  }

  .match-h2h-duel-team--home {
    grid-template-columns: 20px minmax(0, 1fr);
  }

  .match-h2h-duel-team--away {
    grid-template-columns: minmax(0, 1fr) 20px;
  }
}

@media (max-width: 340px) {
  .match-h2h-section-count,
  .match-h2h-venue {
    display: none;
  }

  .match-h2h-section-head {
    grid-template-columns: 31px minmax(0, 1fr);
  }

  .match-h2h-row--recent {
    grid-template-columns: 42px 27px minmax(0, 1fr) 30px 21px;
  }

  .match-h2h-row--meeting {
    grid-template-columns: 42px 27px minmax(0, 1fr);
  }
}


/* =========================================================
   H2H — В КАЖДОМ МАТЧЕ ПОКАЗЫВАЕМ ОБЕ КОМАНДЫ
   Верхняя строка — хозяева матча, нижняя — гости.
   Результат W / D / L относится к команде текущего раздела.
   ========================================================= */
.match-h2h-row--recent {
  grid-template-columns: 48px 31px minmax(0, 1fr) 22px 24px;
  gap: 6px;
  min-height: 60px;
  padding-block: 6px;
}

.match-h2h-teams {
  display: grid;
  align-content: center;
  gap: 4px;
  min-width: 0;
}

.match-h2h-team-line {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: center;
  gap: 6px;
  min-width: 0;
  color: rgba(226, 215, 245, .62);
}

.match-h2h-team-line.is-selected {
  color: rgba(255, 255, 255, .97);
}

.match-h2h-team-line .match-h2h-team-mark {
  width: 20px;
  height: 18px;
  font-size: 5.9px;
}

.match-h2h-team-line > strong {
  min-width: 0;
  overflow: hidden;
  color: inherit;
  font-size: 9px;
  line-height: 1.08;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.match-h2h-team-line.is-selected > strong {
  font-weight: 800;
  text-shadow: 0 0 7px rgba(255, 255, 255, .06);
}

.match-h2h-scores {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 5px;
  min-width: 0;
}

.match-h2h-scores > strong {
  color: rgba(255, 255, 255, .96);
  font-size: 10px;
  line-height: 1;
  font-weight: 900;
}

@media (max-width: 380px) {
  .match-h2h-row--recent {
    grid-template-columns: 43px 29px minmax(0, 1fr) 20px 22px;
    gap: 5px;
    min-height: 58px;
  }

  .match-h2h-team-line {
    grid-template-columns: 19px minmax(0, 1fr);
    gap: 5px;
  }

  .match-h2h-team-line .match-h2h-team-mark {
    width: 19px;
    height: 19px;
    font-size: 5.6px;
  }

  .match-h2h-team-line > strong {
    font-size: 8.6px;
  }

  .match-h2h-scores > strong {
    font-size: 8.8px;
  }
}

@media (max-width: 340px) {
  .match-h2h-row--recent {
    grid-template-columns: 40px 27px minmax(0, 1fr) 19px 21px;
    gap: 4px;
  }

  .match-h2h-team-line {
    grid-template-columns: 18px minmax(0, 1fr);
    gap: 4px;
  }

  .match-h2h-team-line .match-h2h-team-mark {
    width: 18px;
    height: 18px;
    font-size: 5.3px;
  }

  .match-h2h-team-line > strong {
    font-size: 7.8px;
  }
}


/* H2H — усиленный шрифт и иконка самолёта для гостевых матчей */
.match-h2h-section-copy > strong {
  font-size: 13px;
}

.match-h2h-section-copy > small {
  font-size: 8.8px;
}

.match-h2h-row--recent {
  min-height: 64px;
}

.match-h2h-date {
  font-size: 9px;
  font-weight: 760;
}

.match-h2h-league {
  font-size: 6.9px;
}

.match-h2h-team-line > strong {
  font-size: 10px;
  font-weight: 760;
}

.match-h2h-team-line.is-selected > strong {
  font-weight: 820;
}

.match-h2h-scores > strong {
  font-size: 11px;
}

.match-h2h-result {
  width: 24px;
  height: 24px;
  font-size: 8px;
}

@media (max-width: 380px) {
  .match-h2h-section-copy > strong {
    font-size: 12.5px;
  }

  .match-h2h-section-copy > small {
    font-size: 9px;
  }

  .match-h2h-date {
    font-size: 8.6px;
  }

  .match-h2h-team-line > strong {
    font-size: 8.8px;
  }

  .match-h2h-scores > strong {
    font-size: 10.5px;
  }

  .match-h2h-result {
    width: 22px;
    height: 22px;
    font-size: 8px;
  }
}

@media (max-width: 340px) {
  .match-h2h-section-copy > strong {
    font-size: 12px;
  }

  .match-h2h-team-line > strong {
    font-size: 9px;
  }
}

/* =========================================================
   H2H — САМОЛЁТ ДЛЯ БЛОКА «ПОСЛЕДНИЕ МАТЧИ ГОСТЕЙ»
   Иконка полностью рисуется CSS через mask-image.
   Старый SVG скрывается только в гостевом разделе.
   ========================================================= */
.match-h2h-section--away .match-h2h-section-icon {
  position: relative;
  display: inline-grid;
  place-items: center;
  padding: 0;
  overflow: hidden;
}

/* Старую иконку не показываем, чтобы она не накладывалась на самолёт. */
.match-h2h-section--away .match-h2h-section-icon > svg {
  display: none !important;
}

/* Силуэт самолёта, направленного вверх. */
.match-h2h-section--away .match-h2h-section-icon::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 18px;
  height: 18px;
  transform: translate(-50%, -50%);

  background: linear-gradient(180deg, #c8f7ff 0%, #72e7ff 42%, #35bfff 100%);

  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2.2c.82 0 1.48.66 1.48 1.48v5.18l6.23 4.02c.42.27.67.73.67 1.23v1.23l-6.9-2.18v4.62l2.08 1.52v1.03L12 19.44l-3.56.89V19.3l2.08-1.52v-4.62l-6.9 2.18v-1.23c0-.5.25-.96.67-1.23l6.23-4.02V3.68c0-.82.66-1.48 1.48-1.48Z'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;

  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2.2c.82 0 1.48.66 1.48 1.48v5.18l6.23 4.02c.42.27.67.73.67 1.23v1.23l-6.9-2.18v4.62l2.08 1.52v1.03L12 19.44l-3.56.89V19.3l2.08-1.52v-4.62l-6.9 2.18v-1.23c0-.5.25-.96.67-1.23l6.23-4.02V3.68c0-.82.66-1.48 1.48-1.48Z'/%3E%3C/svg%3E");
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;

  filter:
    drop-shadow(0 0 3px rgba(117, 232, 255, .92))
    drop-shadow(0 0 7px rgba(53, 191, 255, .46));
  pointer-events: none;
}

@media (max-width: 380px) {
  .match-h2h-section--away .match-h2h-section-icon::before {
    width: 20px;
    height: 18px;
  }
}


/* =========================================================
   СТРАНИЦА МАТЧА: ВКЛАДКА «ТАБЛИЦА»
   - обычные чемпионаты и групповые стадии;
   - единая лиговая фаза УЕФА на 36 команд;
   - кубковые стадии без турнирной таблицы;
   - подсветка команд текущего матча;
   - три зоны лиговой фазы.
   ========================================================= */

.match-table-page,
.match-table-content {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.match-table-card,
.match-knockout-card,
.match-table-state {
  overflow: hidden;
  border: 1px solid rgba(126, 86, 205, .34);
  border-radius: 17px;
  background:
    radial-gradient(circle at 87% 0%, rgba(154, 70, 255, .09), transparent 38%),
    radial-gradient(circle at 7% 100%, rgba(34, 109, 255, .055), transparent 34%),
    linear-gradient(180deg, rgba(14, 10, 41, .94), rgba(5, 4, 23, .985));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .045),
    0 10px 24px rgba(0, 0, 0, .22);
}

.match-table-card-head {
  display: grid;
  grid-template-columns: 29px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  min-height: 52px;
  padding: 9px 11px;
  border-bottom: 1px solid rgba(151, 93, 235, .17);
  background:
    linear-gradient(90deg, rgba(91, 52, 171, .16), rgba(255, 66, 238, .035));
}

.match-table-card-icon {
  display: inline-grid;
  place-items: center;
  width: 29px;
  height: 29px;
  padding: 6px;
  border: 1px solid rgba(183, 133, 255, .44);
  border-radius: 9px;
  background:
    radial-gradient(circle at 35% 25%, rgba(255, 255, 255, .14), transparent 44%),
    linear-gradient(180deg, rgba(74, 47, 132, .58), rgba(30, 17, 72, .62));
  color: #c9afff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .07),
    0 0 9px rgba(163, 64, 255, .14);
}

.match-table-card-icon svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.match-table-card-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.match-table-kicker {
  min-width: 0;
  overflow: hidden;
  color: rgba(255, 117, 241, .72);
  font-size: 7px;
  line-height: 1;
  font-weight: 820;
  letter-spacing: .09em;
  text-transform: uppercase;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.match-table-card-copy > strong {
  min-width: 0;
  overflow: hidden;
  color: rgba(255, 255, 255, .97);
  font-size: 12px;
  line-height: 1.1;
  font-weight: 820;
  letter-spacing: -.015em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.match-table-count {
  display: inline-grid;
  place-items: center;
  min-width: 29px;
  height: 25px;
  padding-inline: 7px;
  border: 1px solid rgba(255, 93, 239, .36);
  border-radius: 999px;
  background: rgba(83, 29, 99, .48);
  color: #ffffff;
  font-size: 10px;
  line-height: 1;
  font-weight: 850;
  box-shadow: 0 0 10px rgba(255, 66, 238, .10);
}

.match-table-source {
  display: flex;
  align-items: center;
  gap: 5px;
  min-height: 29px;
  padding: 6px 11px;
  border-bottom: 1px solid rgba(151, 93, 235, .11);
  background: rgba(7, 5, 28, .42);
  color: rgba(220, 208, 243, .54);
  font-size: 8px;
  line-height: 1.25;
  font-weight: 660;
}

.match-table-source > span:first-child {
  flex: 0 0 7px;
  width: 7px;
  height: 7px;
  border: 1px solid rgba(169, 135, 238, .62);
  border-radius: 50%;
  background: rgba(86, 60, 146, .74);
  box-shadow: 0 0 6px rgba(163, 64, 255, .16);
}

.match-table-source.is-calculated > span:first-child {
  border-color: rgba(100, 224, 255, .72);
  background: #53d9ff;
  box-shadow: 0 0 7px rgba(83, 217, 255, .46);
}

.match-table-scroll {
  position: relative;
  width: 100%;
  max-height: min(54dvh, 470px);
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(163, 64, 255, .48) rgba(9, 6, 31, .38);
  -webkit-overflow-scrolling: touch;
}

.match-table-scroll::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

.match-table-scroll::-webkit-scrollbar-track {
  background: rgba(9, 6, 31, .36);
}

.match-table-scroll::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: linear-gradient(
    180deg,
    rgba(255, 66, 238, .58),
    rgba(163, 64, 255, .48)
  );
}

.match-table-scroll:focus-visible {
  outline: 0;
  box-shadow:
    inset 0 0 0 1px rgba(255, 66, 238, .46),
    inset 0 0 16px rgba(163, 64, 255, .07);
}

.match-standings-table {
  width: 100%;
  min-width: 0;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  color: rgba(255, 255, 255, .82);
  font-size: 8px;
  line-height: 1;
}

.match-standings-table.is-penalty-table {
  min-width: 0;
}

.match-table-card .match-table-scroll {
  padding-bottom: 2px;
}

.match-standings-table th:nth-child(2),
.match-standings-row > td:nth-child(2) {
  max-width: 0;
}

.match-standings-table th:last-child,
.match-standings-row > td:last-child {
  padding-right: 2px;
}


.match-standings-table thead {
  position: sticky;
  z-index: 5;
  top: 0;
}

.match-standings-table thead::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: linear-gradient(
    90deg,
    rgba(255, 66, 238, .16),
    rgba(163, 64, 255, .54),
    rgba(255, 66, 238, .16)
  );
  box-shadow: 0 2px 8px rgba(0, 0, 0, .34);
  pointer-events: none;
}

.match-standings-table th {
  height: 28px;
  padding: 0 2px;
  border: 0;
  background:
    linear-gradient(180deg, rgba(18, 12, 50, .995), rgba(9, 7, 31, .995));
  color: rgba(220, 207, 245, .58);
  font-size: 7px;
  line-height: 1;
  font-weight: 820;
  letter-spacing: .025em;
  text-align: center;
  white-space: nowrap;
}

.match-standings-table th:first-child {
  width: 24px;
}

.match-standings-table th:nth-child(2) {
  width: auto;
  padding-left: 4px;
  text-align: left;
}

.match-standings-table th:not(:first-child):not(:nth-child(2)) {
  width: 23px;
}

.match-standings-table.is-penalty-table th:not(:first-child):not(:nth-child(2)) {
  width: 24px;
}

.match-standings-row {
  position: relative;
  height: 32px;
  background: rgba(6, 5, 25, .54);
  transition:
    background .16s ease,
    box-shadow .16s ease;
}

.match-standings-row:nth-child(even) {
  background: rgba(13, 9, 39, .50);
}

.match-standings-row:hover {
  background: rgba(34, 20, 70, .70);
}

.match-standings-row > td {
  position: relative;
  height: 32px;
  padding: 0 2px;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, .035);
  color: rgba(238, 232, 250, .70);
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.match-standings-row:last-child > td {
  border-bottom: 0;
}

.match-standings-row > td:first-child::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  bottom: 6px;
  width: 2px;
  border-radius: 0 999px 999px 0;
  background: rgba(112, 87, 171, .24);
}

.match-standings-row.is-zone-direct > td:first-child::before {
  background: linear-gradient(180deg, #70f2d2, #43b7ff);
  box-shadow: 0 0 7px rgba(82, 222, 224, .45);
}

.match-standings-row.is-zone-playoff > td:first-child::before {
  background: linear-gradient(180deg, #ff66ec, #a340ff);
  box-shadow: 0 0 7px rgba(255, 66, 238, .42);
}

.match-standings-row.is-zone-eliminated > td:first-child::before {
  background: linear-gradient(180deg, #ff718e, #bb2e63);
  box-shadow: 0 0 7px rgba(255, 75, 114, .32);
}

.match-standings-row.is-current-home {
  background:
    linear-gradient(90deg, rgba(255, 66, 238, .17), rgba(30, 12, 61, .68) 58%, rgba(6, 5, 25, .58));
  box-shadow:
    inset 2px 0 0 rgba(255, 87, 239, .92),
    inset 0 0 20px rgba(255, 66, 238, .055);
}

.match-standings-row.is-current-away {
  background:
    linear-gradient(90deg, rgba(61, 186, 255, .15), rgba(22, 21, 70, .68) 58%, rgba(6, 5, 25, .58));
  box-shadow:
    inset 2px 0 0 rgba(86, 208, 255, .90),
    inset 0 0 20px rgba(34, 109, 255, .055);
}

.match-standings-row.is-current-team > td {
  color: rgba(255, 255, 255, .91);
}

.match-standings-rank {
  width: 24px;
  color: rgba(255, 255, 255, .54) !important;
  font-size: 7.5px;
  font-weight: 790;
}

.match-standings-rank > span {
  display: inline-grid;
  place-items: center;
  min-width: 16px;
  height: 16px;
  border: 1px solid rgba(145, 107, 218, .20);
  border-radius: 6px;
  background: rgba(34, 23, 68, .34);
}

.match-standings-row.is-current-home .match-standings-rank > span {
  border-color: rgba(255, 99, 240, .54);
  background: rgba(111, 31, 116, .54);
  color: #ffffff;
  box-shadow: 0 0 8px rgba(255, 66, 238, .20);
}

.match-standings-row.is-current-away .match-standings-rank > span {
  border-color: rgba(92, 210, 255, .52);
  background: rgba(24, 80, 119, .46);
  color: #ffffff;
  box-shadow: 0 0 8px rgba(61, 186, 255, .18);
}

.match-standings-team {
  display: grid;
  grid-template-columns: 15px minmax(0, 1fr);
  align-items: center;
  gap: 4px;
  min-width: 0;
  padding-left: 5px !important;
  text-align: left !important;
}

.match-standings-team-mark {
  display: inline-grid;
  place-items: center;
  width: 15px;
  height: 15px;
  overflow: hidden;
  border: 1px solid rgba(173, 128, 244, .34);
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 24%, rgba(255, 255, 255, .15), transparent 42%),
    linear-gradient(145deg, rgba(60, 38, 111, .92), rgba(17, 11, 48, .98));
  color: rgba(255, 255, 255, .86);
  font-size: 5.8px;
  line-height: 1;
  font-weight: 850;
  letter-spacing: -.02em;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .06),
    0 0 7px rgba(163, 64, 255, .11);
}

.match-standings-row.is-current-home .match-standings-team-mark {
  border-color: rgba(255, 98, 240, .68);
  background:
    radial-gradient(circle at 35% 24%, rgba(255, 255, 255, .20), transparent 42%),
    linear-gradient(145deg, rgba(133, 36, 134, .96), rgba(41, 12, 73, .99));
  box-shadow: 0 0 9px rgba(255, 66, 238, .30);
}

.match-standings-row.is-current-away .match-standings-team-mark {
  border-color: rgba(93, 211, 255, .64);
  background:
    radial-gradient(circle at 35% 24%, rgba(255, 255, 255, .20), transparent 42%),
    linear-gradient(145deg, rgba(30, 112, 154, .94), rgba(12, 30, 73, .99));
  box-shadow: 0 0 9px rgba(61, 186, 255, .25);
}

.match-standings-team > strong {
  min-width: 0;
  overflow: hidden;
  color: rgba(255, 255, 255, .82);
  font-size: 7.1px;
  line-height: 1.1;
  font-weight: 720;
  letter-spacing: -.01em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.match-standings-row.is-current-team .match-standings-team > strong {
  color: #ffffff;
  font-weight: 820;
}

.match-standings-gd {
  color: rgba(211, 197, 239, .66) !important;
}

.match-standings-goals {
  min-width: 36px;
  color: rgba(220, 207, 245, .72) !important;
}

.match-standings-points {
  color: #ffffff !important;
  font-size: 8.1px;
  font-weight: 880;
}

.match-table-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 8px;
  padding: 8px 9px 7px;
  border-top: 1px solid rgba(151, 93, 235, .12);
  background: rgba(5, 4, 22, .46);
}

.match-table-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  color: rgba(222, 210, 246, .58);
  font-size: 7px;
  line-height: 1.2;
  font-weight: 660;
}

.match-table-legend-item > i {
  flex: 0 0 7px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(121, 96, 180, .54);
  box-shadow: 0 0 5px rgba(121, 96, 180, .22);
}

.match-table-legend-item.is-zone-direct > i {
  background: #62decf;
  box-shadow: 0 0 6px rgba(82, 222, 224, .42);
}

.match-table-legend-item.is-zone-playoff > i {
  background: #e552e5;
  box-shadow: 0 0 6px rgba(255, 66, 238, .38);
}

.match-table-legend-item.is-zone-eliminated > i {
  background: #eb5579;
  box-shadow: 0 0 6px rgba(255, 75, 114, .32);
}

.match-table-note {
  margin: 0;
  padding: 0 11px 10px;
  background: rgba(5, 4, 22, .46);
  color: rgba(211, 197, 238, .42);
  font-size: 7px;
  line-height: 1.38;
  font-weight: 620;
}

/* Кубковые стадии, для которых обычная таблица не формируется. */
.match-knockout-card {
  padding-bottom: 11px;
}

.match-knockout-head {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  min-height: 55px;
  padding: 10px 11px;
  border-bottom: 1px solid rgba(151, 93, 235, .16);
  background:
    linear-gradient(90deg, rgba(91, 52, 171, .16), rgba(255, 66, 238, .035));
}

.match-knockout-head > div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.match-knockout-head > div > span {
  overflow: hidden;
  color: rgba(255, 117, 241, .72);
  font-size: 7px;
  line-height: 1;
  font-weight: 820;
  letter-spacing: .09em;
  text-transform: uppercase;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.match-knockout-head > div > strong {
  overflow: hidden;
  color: #ffffff;
  font-size: 12px;
  line-height: 1.1;
  font-weight: 830;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.match-knockout-pair {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 42px minmax(0, 1fr);
  align-items: center;
  gap: 5px;
  min-height: 126px;
  padding: 16px 12px 12px;
}

.match-knockout-team {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 8px;
  min-width: 0;
  text-align: center;
}

.match-knockout-team > span {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(177, 126, 255, .54);
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 22%, rgba(255, 255, 255, .18), transparent 42%),
    linear-gradient(145deg, rgba(55, 34, 104, .98), rgba(13, 8, 42, .99));
  color: #ffffff;
  font-size: 11px;
  line-height: 1;
  font-weight: 850;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .09),
    0 0 12px rgba(163, 64, 255, .20);
}

.match-knockout-team > strong {
  display: -webkit-box;
  width: 100%;
  min-width: 0;
  overflow: hidden;
  color: rgba(255, 255, 255, .90);
  font-size: 9px;
  line-height: 1.2;
  font-weight: 760;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.match-knockout-vs {
  display: grid;
  place-items: center;
}

.match-knockout-vs > span {
  display: grid;
  place-items: center;
  min-width: 38px;
  height: 28px;
  border: 1px solid rgba(255, 66, 238, .48);
  border-radius: 10px;
  background: rgba(61, 19, 78, .48);
  color: #ff79ef;
  font-size: 11px;
  line-height: 1;
  font-weight: 850;
  box-shadow: 0 0 9px rgba(255, 66, 238, .12);
}

.match-knockout-info {
  display: grid;
  justify-items: center;
  gap: 5px;
  margin: 0 11px;
  padding: 11px 10px;
  border: 1px solid rgba(139, 96, 216, .22);
  border-radius: 12px;
  background: rgba(7, 5, 28, .50);
  text-align: center;
}

.match-knockout-info > strong {
  color: rgba(255, 255, 255, .88);
  font-size: 8.8px;
  line-height: 1.2;
  font-weight: 800;
}

.match-knockout-info > span {
  color: rgba(220, 208, 243, .50);
  font-size: 8px;
  line-height: 1.35;
  font-weight: 640;
}

.match-knockout-info > small {
  margin-top: 2px;
  color: rgba(255, 139, 237, .78);
  font-size: 7px;
  line-height: 1.2;
  font-weight: 720;
}

/* Загрузка, ошибка и отсутствие данных. */
.match-table-state {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 8px;
  min-height: 175px;
  padding: 24px 18px;
  text-align: center;
}

.match-table-state-icon {
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  padding: 10px;
  border: 1px solid rgba(255, 66, 238, .42);
  border-radius: 13px;
  background: rgba(70, 25, 88, .30);
  color: #ff7aee;
  box-shadow: 0 0 12px rgba(255, 66, 238, .11);
}

.match-table-state-icon svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.match-table-state > strong {
  color: rgba(255, 255, 255, .92);
  font-size: 11px;
  line-height: 1.2;
  font-weight: 810;
}

.match-table-state > span:not(.match-table-state-icon):not(.match-table-loading-dots) {
  max-width: 285px;
  color: rgba(221, 207, 244, .50);
  font-size: 8px;
  line-height: 1.4;
  font-weight: 640;
}

.match-table-state > button {
  min-width: 82px;
  height: 29px;
  margin-top: 2px;
  padding: 0 12px;
  border: 1px solid rgba(255, 66, 238, .52);
  border-radius: 10px;
  outline: 0;
  background:
    linear-gradient(180deg, rgba(83, 26, 96, .76), rgba(32, 10, 57, .88));
  color: #ffffff;
  font: inherit;
  font-size: 8px;
  font-weight: 780;
  cursor: pointer;
  box-shadow: 0 0 10px rgba(255, 66, 238, .12);
}

.match-table-state > button:active {
  transform: scale(.975);
}

.match-table-loading-dots {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  height: 10px;
}

.match-table-loading-dots i {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #ff5cef;
  box-shadow: 0 0 5px rgba(255, 66, 238, .55);
  animation: match-table-dot-move .9s ease-in-out infinite;
}

.match-table-loading-dots i:nth-child(2) {
  animation-delay: .14s;
}

.match-table-loading-dots i:nth-child(3) {
  animation-delay: .28s;
}

@keyframes match-table-dot-move {
  0%, 60%, 100% {
    opacity: .30;
    transform: translateY(0) scale(.82);
  }

  30% {
    opacity: 1;
    transform: translateY(-2px) scale(1);
  }
}

@media (max-width: 380px) {
  .match-table-card,
  .match-knockout-card,
  .match-table-state {
    border-radius: 15px;
  }

  .match-table-card-head {
    grid-template-columns: 27px minmax(0, 1fr) auto;
    gap: 8px;
    min-height: 49px;
    padding-inline: 9px;
  }

  .match-table-card-icon {
    width: 27px;
    height: 27px;
  }

  .match-table-card-copy > strong {
    font-size: 11px;
  }

  .match-table-kicker {
    font-size: 7px;
  }

  .match-table-scroll {
    max-height: min(52dvh, 430px);
  }

  .match-standings-table {
    min-width: 344px;
  }

  .match-standings-table.is-penalty-table {
    min-width: 336px;
  }

  .match-standings-table th {
    height: 28px;
    font-size: 6.6px;
  }

  .match-standings-row,
  .match-standings-row > td {
    height: 32px;
  }

  .match-standings-team {
    grid-template-columns: 18px minmax(0, 1fr);
    gap: 6px;
    padding-left: 5px !important;
  }

  .match-standings-team-mark {
    width: 18px;
    height: 18px;
    font-size: 6px;
  }

  .match-standings-team > strong {
    font-size: 7.8px;
  }

  .match-table-legend {
    gap: 4px 7px;
    padding-inline: 9px;
  }

  .match-table-legend-item {
    font-size: 7px;
  }

  .match-knockout-pair {
    grid-template-columns: minmax(0, 1fr) 38px minmax(0, 1fr);
    min-height: 118px;
    padding-inline: 9px;
  }

  .match-knockout-team > span {
    width: 40px;
    height: 40px;
    font-size: 10px;
  }
}

@media (max-width: 340px) {
  .match-table-scroll {
    max-height: min(50dvh, 400px);
  }

  .match-standings-table {
    min-width: 336px;
  }

  .match-standings-table.is-penalty-table {
    min-width: 374px;
  }

  .match-standings-table th:not(:first-child):not(:nth-child(2)),
  .match-standings-table.is-penalty-table th:not(:first-child):not(:nth-child(2)) {
    width: 28px;
  }

  .match-standings-team > strong {
    font-size: 7.8px;
  }
}

/* =========================================================
   ТАБЛИЦА МАТЧА — ВИДИМЫЕ НАЗВАНИЯ И СКРЫТЫЙ СКРОЛЛБАР
   Прокрутка колесом, тачем и перетаскиванием сохраняется.
   ========================================================= */
.match-table-scroll {
  scrollbar-width: none !important;
  -ms-overflow-style: none;
}

.match-table-scroll::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

/* Обычная таблица помещается в ширину карточки без горизонтального скролла. */
.match-standings-table:not(.is-penalty-table) {
  width: 100% !important;
  min-width: 100% !important;
}

/* Возвращаем колонке команды нормальную ширину.
   Предыдущее max-width: 0 скрывало названия. */
.match-standings-table th:nth-child(2),
.match-standings-row > td:nth-child(2) {
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
}

.match-standings-table th:first-child,
.match-standings-rank {
  width: 27px !important;
}

.match-standings-table th:not(:first-child):not(:nth-child(2)) {
  width: 28px !important;
}

.match-standings-team {
  grid-template-columns: 19px minmax(0, 1fr) !important;
  gap: 5px !important;
  padding-left: 4px !important;
  padding-right: 2px !important;
}

.match-standings-team > strong {
  display: block;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  font-size: 7.8px !important;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.match-standings-row > td {
  padding-inline: 2px !important;
}

.match-standings-points {
  padding-right: 4px !important;
}

@media (max-width: 380px) {
  .match-standings-table:not(.is-penalty-table) {
    min-width: 100% !important;
  }

  .match-standings-table th:not(:first-child):not(:nth-child(2)) {
    width: 27px !important;
  }

  .match-standings-team > strong {
    font-size: 7.6px !important;
  }
}

/* --- Table fit & caption fix override --- */
.match-table-scroll {
  overflow-x: hidden !important;
  overflow-y: auto !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

.match-table-scroll::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
}

.match-table-scroll::-webkit-scrollbar-thumb,
.match-table-scroll::-webkit-scrollbar-track {
  background: transparent !important;
}

.match-standings-table,
.match-standings-table.is-penalty-table {
  width: 100% !important;
  min-width: 0 !important;
}

.match-standings-table th:first-child {
  width: 24px !important;
}

.match-standings-table th:nth-child(2) {
  width: auto !important;
  padding-left: 4px !important;
}

.match-standings-table th:not(:first-child):not(:nth-child(2)) {
  width: 23px !important;
}

.match-standings-table.is-penalty-table th:not(:first-child):not(:nth-child(2)) {
  width: 24px !important;
}

.match-standings-row,
.match-standings-row > td {
  height: 32px !important;
}

.match-standings-row > td {
  padding: 0 2px !important;
}

.match-standings-rank {
  width: 24px !important;
  font-size: 7.5px !important;
}

.match-standings-rank > span {
  min-width: 16px !important;
  height: 16px !important;
}

.match-standings-team {
  grid-template-columns: 15px minmax(0, 1fr) !important;
  gap: 4px !important;
  padding-left: 5px !important;
}

.match-standings-team-mark {
  width: 15px !important;
  height: 15px !important;
  font-size: 4.9px !important;
}

.match-standings-team > strong {
  font-size: 7.1px !important;
  line-height: 1.1 !important;
  letter-spacing: -.01em !important;
}

.match-standings-points {
  font-size: 8.1px !important;
}


/* =========================================================
   ТАБЛИЦА: ПОЛНАЯ ВЫСОТА БЕЗ ВНУТРЕННЕГО СКРОЛЛА
   Все строки таблицы отображаются целиком.
   Прокрутка, если потребуется, остаётся у всей страницы матча.
   ========================================================= */

.match-table-scroll {
  max-height: none !important;
  height: auto !important;
  overflow-x: hidden !important;
  overflow-y: visible !important;
  overscroll-behavior: auto !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

.match-table-scroll::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

.match-table-card {
  overflow: visible;
}

.country-stage.is-match-view {
  overflow-y: auto;
}


/* =========================================================
   TABLE PAGE: one continuous page, without nested table scroll.
   The table card grows to the full number of rows. If it is taller
   than the Telegram viewport, only the whole match page scrolls.
   ========================================================= */
html[data-content-view="match"] .country-stage.is-match-view {
  overflow-x: hidden !important;
  overflow-y: auto !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
  -webkit-overflow-scrolling: touch;
}

html[data-content-view="match"] .country-stage.is-match-view::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

html[data-content-view="match"] .match-table-page,
html[data-content-view="match"] .match-table-content,
html[data-content-view="match"] .match-table-card {
  height: auto !important;
  max-height: none !important;
  align-self: start;
}

html[data-content-view="match"] .match-table-scroll {
  display: block;
  width: 100%;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow-x: hidden !important;
  overflow-y: visible !important;
  overscroll-behavior: auto !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

html[data-content-view="match"] .match-table-scroll::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

html[data-content-view="match"] .match-standings-table,
html[data-content-view="match"] .match-standings-table.is-penalty-table {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
}


/* ===== PATCH: standings rank ranges + larger team names ===== */
.match-standings-table th:first-child,
.match-standings-rank {
  width: 34px !important;
}

.match-standings-rank > span {
  min-width: 24px !important;
  padding: 0 4px !important;
  font-size: 7px !important;
}

.match-standings-table th:not(:first-child):not(:nth-child(2)) {
  width: 27px !important;
}

.match-standings-team {
  grid-template-columns: 18px minmax(0, 1fr) !important;
  gap: 5px !important;
  padding-left: 4px !important;
}

.match-standings-team-mark {
  width: 16px !important;
  height: 16px !important;
  font-size: 5.2px !important;
}

.match-standings-team > strong {
  font-size: 8.4px !important;
  line-height: 1.14 !important;
  font-weight: 760 !important;
}

@media (max-width: 380px) {
  .match-standings-table th:first-child,
  .match-standings-rank {
    width: 32px !important;
  }

  .match-standings-rank > span {
    min-width: 22px !important;
    font-size: 6.8px !important;
  }

  .match-standings-team > strong {
    font-size: 8px !important;
  }
}

/* ===== PATCH: larger standings team names ===== */
.match-standings-team > strong {
  font-size: 9.2px !important;
  line-height: 1.16 !important;
  font-weight: 780 !important;
}

.match-standings-row,
.match-standings-row > td {
  height: 34px !important;
}

@media (max-width: 380px) {
  .match-standings-team > strong {
    font-size: 8.8px !important;
  }

  .match-standings-row,
  .match-standings-row > td {
    height: 33px !important;
  }
}

/* ===== FINAL FIX: readable standings and two-line team names ===== */
html[data-content-view="match"] .match-standings-table,
html[data-content-view="match"] .match-standings-table.is-penalty-table {
  table-layout: fixed !important;
}

.match-standings-table th:nth-child(2),
.match-standings-table td:nth-child(2) {
  width: auto !important;
}

.match-standings-table th:not(:first-child):not(:nth-child(2)) {
  width: 25px !important;
}

.match-standings-team {
  min-width: 0 !important;
  grid-template-columns: 18px minmax(0, 1fr) !important;
  gap: 6px !important;
  padding: 5px 4px 5px 5px !important;
}

.match-standings-team > strong {
  display: -webkit-box !important;
  min-width: 0 !important;
  overflow: hidden !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
  white-space: normal !important;
  text-overflow: ellipsis !important;
  overflow-wrap: anywhere !important;
  font-size: 10.6px !important;
  line-height: 1.18 !important;
  font-weight: 790 !important;
  letter-spacing: -.012em !important;
}

.match-standings-row,
.match-standings-row > td {
  height: 40px !important;
  min-height: 40px !important;
}

.match-standings-row > td:not(.match-standings-team) {
  font-size: 9px !important;
  font-weight: 720 !important;
}

.match-standings-rank > span {
  font-size: 7.4px !important;
}

@media (max-width: 380px) {
  .match-standings-table th:not(:first-child):not(:nth-child(2)) {
    width: 23px !important;
  }

  .match-standings-team > strong {
    font-size: 10.1px !important;
  }

  .match-standings-row,
  .match-standings-row > td {
    height: 39px !important;
    min-height: 39px !important;
  }
}



/* =========================================================
   H2H: строки матчей открывают отдельную страницу матча
   ========================================================= */
button.match-h2h-row {
  width: 100%;
  margin: 0;
  border-top: 0;
  border-right: 0;
  border-left: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  transition: background-color .16s ease, transform .12s ease;
}

button.match-h2h-row.is-clickable:hover,
button.match-h2h-row.is-clickable:focus-visible {
  background: linear-gradient(90deg, rgba(34, 188, 255, .07), rgba(222, 43, 208, .055));
  outline: none;
}

button.match-h2h-row.is-clickable:active {
  transform: scale(.995);
  background: linear-gradient(90deg, rgba(34, 188, 255, .11), rgba(222, 43, 208, .08));
}

.match-h2h-row--recent {
  grid-template-columns: 48px 31px minmax(0, 1fr) 22px 24px 12px;
}

.match-h2h-row--meeting {
  grid-template-columns: 48px 31px minmax(0, 1fr) 12px;
}

.match-h2h-open-icon {
  display: inline-grid;
  place-items: center;
  width: 12px;
  height: 20px;
  color: rgba(232, 61, 216, .92);
}

.match-h2h-open-icon.is-hidden {
  visibility: hidden;
}

.match-h2h-open-icon svg {
  width: 12px;
  height: 12px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.match-actual-stats-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 8px;
  padding: 0 2px 8px;
  border-bottom: 1px solid rgba(151, 91, 225, .16);
  color: rgba(231, 219, 248, .72);
  font-size: 8px;
  line-height: 1.2;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .045em;
}

.match-actual-stats-head > strong {
  color: #fff;
  font-size: 14px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: 0;
  text-shadow: 0 0 10px rgba(201, 58, 255, .22);
}

.match-overview-rows--actual .match-overview-value > strong {
  font-size: 12px;
}

@media (max-width: 380px) {
  .match-h2h-row--recent {
    grid-template-columns: 43px 29px minmax(0, 1fr) 20px 22px 11px;
  }

  .match-h2h-row--meeting {
    grid-template-columns: 43px 29px minmax(0, 1fr) 11px;
  }
}

@media (max-width: 340px) {
  .match-h2h-row--recent {
    grid-template-columns: 40px 27px minmax(0, 1fr) 19px 21px 10px;
  }

  .match-h2h-row--meeting {
    grid-template-columns: 40px 27px minmax(0, 1fr) 10px;
  }
}


/* ============================================================
   FINISHED MATCH PAGE
   ============================================================ */

.match-section-tabs.is-finished-tabs {
  overflow: hidden;
  cursor: default;
}

.match-section-tabs.is-finished-tabs .match-section-tab {
  flex: 1 1 0;
  min-width: 0;
}

.match-hero-time.is-final-score {
  font-size: 25px;
  letter-spacing: -.035em;
}

.match-result-overview-page {
  display: grid;
  gap: 10px;
}

.match-result-summary-card {
  overflow: hidden;
  border: 1px solid rgba(139, 83, 216, .40);
  border-radius: 15px;
  background:
    linear-gradient(180deg, rgba(30, 14, 64, .96), rgba(7, 6, 29, .98));
  box-shadow: 0 12px 28px rgba(0, 0, 0, .22);
}

.match-result-summary-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 14px;
  border-bottom: 1px solid rgba(151, 91, 225, .22);
  background: rgba(103, 42, 154, .12);
}

.match-result-summary-head > div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.match-result-summary-head > div > span {
  color: #d54acb;
  font-size: 7px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.match-result-summary-head > div > strong {
  overflow: hidden;
  color: rgba(255, 255, 255, .95);
  font-size: 10px;
  line-height: 1.25;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.match-result-summary-score {
  flex: 0 0 auto;
  color: #fff;
  font-size: 20px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: -.03em;
  text-shadow: 0 0 12px rgba(209, 62, 255, .22);
}

.match-result-card-totals {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  border-bottom: 1px solid rgba(151, 91, 225, .18);
  background: rgba(151, 91, 225, .16);
}

.match-result-card-totals > span {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 38px;
  background: rgba(7, 6, 29, .94);
  color: rgba(213, 201, 238, .72);
  font-size: 8px;
  font-weight: 800;
}

.match-result-card-totals strong {
  color: #fff;
  font-size: 10px;
}

.match-result-card-totals i,
.match-result-event-icon.is-yellow-card,
.match-result-event-icon.is-red-card {
  display: inline-block;
  width: 8px;
  height: 12px;
  border-radius: 2px;
  box-shadow: 0 0 7px currentColor;
}

.match-result-card-totals i.is-yellow-card,
.match-result-event-icon.is-yellow-card {
  background: #f5c842;
  color: rgba(245, 200, 66, .45);
}

.match-result-card-totals i.is-red-card,
.match-result-event-icon.is-red-card {
  background: #e34562;
  color: rgba(227, 69, 98, .45);
}

.match-result-events {
  display: grid;
  padding: 4px 12px 8px;
}

.match-result-event {
  display: grid;
  grid-template-columns: 34px 20px minmax(0, 1fr) 34px;
  gap: 7px;
  align-items: center;
  min-height: 49px;
  border-bottom: 1px solid rgba(132, 93, 196, .15);
}

.match-result-event:last-child {
  border-bottom: 0;
}

.match-result-event-minute {
  color: rgba(217, 204, 241, .66);
  font-size: 9px;
  font-weight: 850;
  text-align: center;
}

.match-result-event-icon {
  display: grid;
  place-items: center;
  justify-self: center;
  font-size: 14px;
  line-height: 1;
}

.match-result-event-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.match-result-event-copy strong {
  overflow: hidden;
  color: rgba(255, 255, 255, .96);
  font-size: 10px;
  line-height: 1.15;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.match-result-event-copy small {
  overflow: hidden;
  color: rgba(180, 164, 214, .70);
  font-size: 7.5px;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.match-result-event.is-away .match-result-event-copy {
  text-align: right;
}

.match-result-event-score {
  color: #fff;
  font-size: 10px;
  font-weight: 900;
  text-align: center;
}

.match-result-event-score.is-empty {
  color: rgba(255, 255, 255, .22);
}

.match-result-events-empty {
  display: grid;
  justify-items: center;
  gap: 5px;
  padding: 22px 15px;
  text-align: center;
}

.match-result-events-empty strong {
  color: rgba(255, 255, 255, .90);
  font-size: 10px;
}

.match-result-events-empty span {
  max-width: 250px;
  color: rgba(184, 169, 216, .67);
  font-size: 8px;
  line-height: 1.4;
}

.match-overview-card--finished .match-overview-card-body--combined {
  padding-top: 11px;
}

@media (max-width: 360px) {
  .match-result-summary-head {
    padding-inline: 11px;
  }

  .match-result-summary-head > div > strong {
    max-width: 195px;
  }

  .match-result-event {
    grid-template-columns: 31px 18px minmax(0, 1fr) 31px;
    gap: 5px;
  }
}


/* ============================================================
   GROUPED MATCH STATISTICS
   ============================================================ */

.match-stat-groups {
  display: grid;
  gap: 11px;
  padding: 10px 0 2px;
}

.match-stat-group {
  overflow: hidden;
  border: 1px solid rgba(112, 76, 181, 0.34);
  border-radius: 13px;
  background:
    linear-gradient(180deg, rgba(25, 13, 57, 0.92), rgba(8, 6, 29, 0.96));
}

.match-stat-group-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 38px;
  padding: 8px 11px;
  border-bottom: 1px solid rgba(116, 78, 186, 0.26);
  background: rgba(120, 55, 166, 0.11);
}

.match-stat-group-head strong {
  min-width: 0;
  color: rgba(255, 255, 255, 0.95);
  font-size: 10px;
  line-height: 1.2;
  font-weight: 850;
}

.match-stat-group-head span {
  flex: 0 0 auto;
  padding: 3px 7px;
  border: 1px solid rgba(170, 79, 215, 0.32);
  border-radius: 999px;
  background: rgba(167, 58, 190, 0.10);
  color: rgba(209, 190, 232, 0.72);
  font-size: 6.5px;
  line-height: 1;
  font-weight: 800;
}

.match-stat-group .match-overview-rows {
  padding: 0;
}

.match-stat-group .match-overview-row {
  padding-inline: 10px;
}

.match-stat-group--main {
  border-color: rgba(218, 50, 204, 0.44);
  box-shadow: 0 0 18px rgba(209, 43, 202, 0.05);
}

.match-stat-group--main .match-stat-group-head {
  background:
    linear-gradient(90deg, rgba(172, 35, 160, 0.18), rgba(91, 45, 154, 0.08));
}

.match-stat-group--attack .match-stat-group-head,
.match-stat-group--passes .match-stat-group-head,
.match-stat-group--defense .match-stat-group-head,
.match-stat-group--goalkeeper .match-stat-group-head,
.match-stat-group--discipline .match-stat-group-head,
.match-stat-group--other .match-stat-group-head {
  border-left: 2px solid rgba(195, 62, 205, 0.56);
}

@media (max-width: 360px) {
  .match-stat-group-head {
    padding-inline: 9px;
  }

  .match-stat-group-head strong {
    font-size: 9.5px;
  }

  .match-stat-group .match-overview-row {
    padding-inline: 8px;
  }
}


/* ============================================================
   MATCH STATISTICS DEDUPLICATION
   ============================================================ */

.match-stat-group-head {
  justify-content: flex-start;
}

.match-stat-group-head > span {
  display: none !important;
}

/* =========================================================
   ЭМБЛЕМЫ КОМАНД — HD / LOCAL CACHE
   Финальный блок. Должен оставаться в конце styles.css.

   Источники:
   small  = 64x64  -> список матчей (показываем 24–26px)
   medium = 128x128 -> резерв для средних карточек
   large  = 256x256 -> страница матча (показываем 52–60px)

   ВАЖНО:
   - padding у самого IMG = 0, чтобы не уменьшать полезную эмблему;
   - свечение уменьшено: оно больше не "размывает" края;
   - браузер получает уже подготовленный PNG нужного класса размера.
   ========================================================= */

.league-team-logo,
.league-team-logo-fallback {
  aspect-ratio: 1 / 1;
}

.league-team-logo img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  padding: 0 !important;
  object-fit: contain !important;
  object-position: center !important;
  image-rendering: auto;
  -webkit-font-smoothing: antialiased;
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* ---------- SMALL: список матчей ---------- */
.league-team-logo.team-logo--small,
.league-team-logo-fallback.team-logo--small {
  width: 26px !important;
  height: 26px !important;
  min-width: 26px !important;
}

.league-team-logo.team-logo--small {
  padding: 1px !important;
  border-color: rgba(255, 255, 255, .20);
  background:
    radial-gradient(circle at 36% 24%, rgba(255,255,255,.10), transparent 46%),
    linear-gradient(180deg, rgba(26, 19, 58, .94), rgba(8, 7, 27, .98));
  box-shadow:
    0 0 0 1px rgba(110, 75, 190, .12),
    0 2px 6px rgba(0, 0, 0, .24);
}

/* Сетка строки должна резервировать реальную ширину новой эмблемы. */
.league-match-team {
  grid-template-columns: 26px minmax(0, 1fr) !important;
  gap: 7px !important;
}

/* ---------- MEDIUM: будущие/средние карточки ---------- */
.league-team-logo.team-logo--medium,
.league-team-logo-fallback.team-logo--medium {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
}

.league-team-logo.team-logo--medium {
  padding: 2px !important;
}

/* ---------- LARGE: hero страницы матча ---------- */
.match-hero-team-visual {
  width: 60px !important;
  height: 60px !important;
}

.match-hero-team-visual .league-team-logo.team-logo--large,
.match-hero-team-visual .league-team-logo-fallback.team-logo--large {
  width: 60px !important;
  height: 60px !important;
  min-width: 60px !important;
  border-radius: 50% !important;
}

.match-hero-team-visual .league-team-logo.team-logo--large {
  padding: 3px !important;
  border: 1px solid rgba(183, 139, 255, .46) !important;
  background:
    radial-gradient(circle at 38% 24%, rgba(255,255,255,.09), transparent 44%),
    linear-gradient(180deg, rgba(27, 18, 62, .96), rgba(10, 8, 34, .98)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.07),
    0 0 0 1px rgba(115, 77, 194, .09),
    0 3px 9px rgba(0,0,0,.23),
    0 0 6px rgba(163, 64, 255, .12) !important;
}

.match-hero-team-visual .league-team-logo.team-logo--large img {
  filter: none !important;
}

/* Telegram / телефон */
@media (max-width: 380px) {
  .league-team-logo.team-logo--small,
  .league-team-logo-fallback.team-logo--small {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
  }

  .league-match-team {
    grid-template-columns: 24px minmax(0, 1fr) !important;
    gap: 7px !important;
  }

  .match-hero-team-visual {
    width: 56px !important;
    height: 56px !important;
  }

  .match-hero-team-visual .league-team-logo.team-logo--large,
  .match-hero-team-visual .league-team-logo-fallback.team-logo--large {
    width: 56px !important;
    height: 56px !important;
    min-width: 56px !important;
  }
}

@media (max-width: 340px) {
  .league-team-logo.team-logo--small,
  .league-team-logo-fallback.team-logo--small {
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
  }

  .league-match-team {
    grid-template-columns: 22px minmax(0, 1fr) !important;
    gap: 6px !important;
  }

  .match-hero-team-visual {
    width: 52px !important;
    height: 52px !important;
  }

  .match-hero-team-visual .league-team-logo.team-logo--large,
  .match-hero-team-visual .league-team-logo-fallback.team-logo--large {
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
  }
}


/* Scores share the team row so they stay aligned with names and emblems. */
.sil7-live-clock,
.sil7-live-clock-line {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  color: #ee80e6;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.league-match-datetime .sil7-live-clock { display: inline-flex !important; }
.league-match-datetime .sil7-live-clock-line { display: inline-flex !important; }
.league-match-datetime .sil7-live-clock-phase:not([hidden]) { display: block !important; }

.app-shell .sil7-live-clock .sil7-live-clock-value {
  color: #ee80e6;
  font-size: 12px;
  font-weight: 650;
  line-height: 1.2;
}

.app-shell .sil7-live-clock .sil7-live-clock-phase {
  color: #bc9dc9;
  font-size: 9px;
  line-height: 1.2;
  text-transform: none;
}

.app-shell .sil7-live-clock [hidden] { display: none; }

.match-hero-center > .sil7-live-clock { margin-top: 4px; }

.app-shell .match-hero-center .sil7-live-clock-value { font-size: 14px; }

.sil7-live-clock--hero .sil7-live-clock-line { flex-direction: row; gap: 4px; }
.app-shell .sil7-live-clock--hero .sil7-live-clock-phase,
.app-shell .sil7-live-clock--hero .sil7-live-clock-value,
.app-shell .sil7-live-clock--hero .sil7-live-clock-separator {
  color: #ee80e6;
  font-size: 13px;
  font-weight: 650;
  line-height: 1.3;
}
.sil7-live-clock-added {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 5px;
  padding: 3px 7px;
  border: 1px solid #a34aaa;
  border-radius: 6px;
  background: #511b55;
  color: #f7d5f8;
  font-size: 12px;
  font-weight: 650;
  line-height: 1.2;
}
.sil7-live-clock-added svg { width: 14px; height: 14px; flex: none; }

.league-match-row.is-live .league-match-team,
.league-match-row.is-finished .league-match-team {
  grid-template-columns: auto minmax(0, 1fr) minmax(20px, max-content) !important;
}

.league-match-score {
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.league-match-row.is-live .league-match-datetime strong {
  color: #ee80e6;
  font-size: 11px;
  letter-spacing: 0;
}

/* Club crests keep their own silhouette; portraits and letter fallbacks retain their frame. */
.league-team-logo.league-team-logo--crest,
.match-hero-team-visual .league-team-logo.league-team-logo--crest {
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
  overflow: visible;
}

/* ===== v313 mini prematch odds tab ===== */
.match-odds-page-v313 {
  display: block;
  width: 100%;
  padding: 2px 0 22px;
}

.match-odds-page-head-v313 {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.match-odds-page-head-v313 h2 {
  margin: 3px 0 0;
  font-size: 18px;
  line-height: 1.15;
  font-weight: 800;
}

.match-odds-kicker-v313 {
  display: block;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .16em;
  opacity: .58;
}

.match-odds-count-v313 {
  flex: 0 0 auto;
  padding: 5px 8px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  opacity: .58;
}

.match-odds-stack-v313 {
  display: grid;
  gap: 12px;
}

.match-odds-market-v313 {
  padding: 12px;
  border: 1px solid rgba(255,255,255,.075);
  border-radius: 15px;
  background: rgba(255,255,255,.025);
}

.match-odds-market-v313 h3 {
  margin: 0 0 9px;
  font-size: 12px;
  line-height: 1.25;
  font-weight: 750;
  opacity: .72;
}

.match-odds-grid-v313 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(82px, 1fr));
  gap: 8px;
}

.match-odds-grid-v313--three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.match-odds-grid-v313--two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.match-odds-outcome-v313 {
  min-width: 0;
  padding: 10px 8px;
  border: 1px solid rgba(255,255,255,.075);
  border-radius: 12px;
  background: rgba(255,255,255,.04);
  text-align: center;
}

.match-odds-outcome-label-v313 {
  display: block;
  margin-bottom: 3px;
  overflow: hidden;
  font-size: 10px;
  line-height: 1.2;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
  opacity: .62;
}

.match-odds-outcome-value-v313 {
  display: block;
  font-size: 17px;
  line-height: 1.1;
  font-weight: 850;
  letter-spacing: .01em;
}

.match-odds-team-groups-v313 {
  display: grid;
  gap: 10px;
}

.match-odds-team-title-v313 {
  margin: 0 0 7px;
  font-size: 11px;
  font-weight: 750;
  opacity: .62;
}

.match-odds-state-v313 {
  display: grid;
  justify-items: center;
  gap: 5px;
  padding: 32px 18px;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 15px;
  background: rgba(255,255,255,.025);
  text-align: center;
}

.match-odds-state-v313 strong {
  font-size: 13px;
  font-weight: 800;
}

.match-odds-state-v313 span {
  max-width: 300px;
  font-size: 11px;
  line-height: 1.45;
  opacity: .55;
}

@media (max-width: 390px) {
  .match-odds-market-v313 {
    padding: 10px;
  }

  .match-odds-outcome-v313 {
    padding: 9px 6px;
  }

  .match-odds-outcome-value-v313 {
    font-size: 16px;
  }
}
/* ===== /v313 mini prematch odds tab ===== */


/* ===== v314 multi-source odds market tabs ===== */
.match-odds-page-head-v314{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;margin-bottom:12px}
.match-odds-page-head-v314 h2{margin:2px 0 0;font-size:18px;line-height:1.15;font-weight:800;color:rgba(255,255,255,.96)}
.match-odds-meta-v314{display:flex;gap:5px}.match-odds-meta-v314 span{display:inline-flex;align-items:center;min-height:23px;padding:0 8px;border:1px solid rgba(198,72,255,.26);border-radius:999px;background:rgba(129,44,184,.08);color:rgba(255,255,255,.64);font-size:9px;font-weight:750;white-space:nowrap}
.match-odds-market-tabs-v314,.match-odds-line-tabs-v314,.match-odds-team-tabs-v314{display:flex;width:100%;gap:7px;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch}.match-odds-market-tabs-v314::-webkit-scrollbar,.match-odds-line-tabs-v314::-webkit-scrollbar,.match-odds-team-tabs-v314::-webkit-scrollbar{display:none}.match-odds-market-tabs-v314{padding:2px 1px 10px;border-bottom:1px solid rgba(255,255,255,.055)}
.match-odds-market-tab-v314,.match-odds-line-tab-v314,.match-odds-team-tab-v314{appearance:none;flex:0 0 auto;border:1px solid rgba(150,100,230,.34);border-radius:11px;outline:none;background:rgba(28,24,56,.58);color:rgba(225,220,240,.70);font-family:inherit;font-weight:750;cursor:pointer}.match-odds-market-tab-v314{min-height:38px;padding:0 14px;font-size:11px}.match-odds-line-tab-v314,.match-odds-team-tab-v314{min-height:31px;padding:0 11px;font-size:10px}
.match-odds-market-tab-v314.is-active,.match-odds-line-tab-v314.is-active,.match-odds-team-tab-v314.is-active{border-color:rgba(255,54,234,.88);background:linear-gradient(180deg,rgba(212,36,190,.28),rgba(95,30,135,.28));color:#fff;box-shadow:0 0 0 1px rgba(255,53,222,.10) inset,0 0 14px rgba(223,36,212,.10)}
.match-odds-market-toolbar-v314{display:grid;gap:8px;margin:10px 0}
.match-odds-matrix-v314{overflow:hidden;border:1px solid rgba(133,90,191,.30);border-radius:15px;background:linear-gradient(180deg,rgba(21,20,46,.88),rgba(10,11,31,.92))}.match-odds-matrix-head-v314,.match-odds-bookmaker-row-v314{display:grid;grid-template-columns:minmax(82px,1.10fr) repeat(var(--odds-columns-v314),minmax(62px,1fr));align-items:stretch}.match-odds-matrix-head-v314{border-bottom:1px solid rgba(255,255,255,.06);background:rgba(255,255,255,.018)}
.match-odds-bookmaker-head-v314,.match-odds-column-head-v314{display:flex;align-items:center;min-height:34px;padding:0 7px;color:rgba(223,216,241,.55);font-size:9px;font-weight:800}.match-odds-column-head-v314{justify-content:center;text-align:center}.match-odds-bookmaker-row-v314+.match-odds-bookmaker-row-v314{border-top:1px solid rgba(255,255,255,.055)}
.match-odds-bookmaker-name-v314{display:flex;align-items:center;min-width:0;min-height:58px;padding:7px 8px;overflow:hidden;color:rgba(255,255,255,.91);font-size:11px;font-weight:800;text-overflow:ellipsis;white-space:nowrap}.match-odds-price-cell-v314{position:relative;display:flex;align-items:center;justify-content:center;min-width:0;min-height:58px;padding:14px 5px 6px;border-left:1px solid rgba(255,255,255,.045);color:rgba(255,255,255,.94);text-align:center}.match-odds-price-cell-v314 strong{font-size:15px;line-height:1;font-weight:850}.match-odds-price-cell-v314.is-best strong{color:#d65cff;text-shadow:0 0 12px rgba(210,70,255,.26)}
.match-odds-best-badge-v314{position:absolute;top:4px;left:50%;max-width:calc(100% - 6px);transform:translateX(-50%);padding:2px 5px;overflow:hidden;border:1px solid rgba(244,56,226,.60);border-radius:999px;background:rgba(169,32,154,.22);color:rgba(255,219,253,.92);font-size:6.5px;line-height:1.05;font-weight:850;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:390px){.match-odds-market-tab-v314{min-height:35px;padding:0 11px;font-size:10px}.match-odds-matrix-head-v314,.match-odds-bookmaker-row-v314{grid-template-columns:minmax(74px,1.05fr) repeat(var(--odds-columns-v314),minmax(57px,1fr))}.match-odds-bookmaker-name-v314{min-height:54px;padding:6px;font-size:10px}.match-odds-price-cell-v314{min-height:54px;padding-inline:3px}.match-odds-price-cell-v314 strong{font-size:14px}}
/* ===== /v314 multi-source odds market tabs ===== */

/* ===== v314.4 indicative odds effective matrix ===== */
.match-odds-single-v3144 {
  display: grid;
  grid-template-columns: repeat(var(--odds-columns-v3144), minmax(0, 1fr));
  gap: 8px;
}

.match-odds-single-cell-v3144 {
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 60px;
  padding: 8px 6px;
  border: 1px solid rgba(133,90,191,.30);
  border-radius: 13px;
  background:
    linear-gradient(
      180deg,
      rgba(29,27,58,.90),
      rgba(15,16,39,.94)
    );
  text-align: center;
}

.match-odds-single-label-v3144 {
  margin-bottom: 4px;
  color: rgba(223,216,241,.58);
  font-size: 9px;
  line-height: 1;
  font-weight: 800;
}

.match-odds-single-cell-v3144 strong {
  color: #d65cff;
  font-size: 17px;
  line-height: 1;
  font-weight: 850;
  text-shadow: 0 0 12px rgba(210,70,255,.20);
}

@media (max-width: 390px) {
  .match-odds-single-cell-v3144 {
    min-height: 56px;
  }

  .match-odds-single-cell-v3144 strong {
    font-size: 16px;
  }
}
/* ===== /v314.4 indicative odds effective matrix ===== */

/* ===== v316 all prematch markets ===== */
.match-odds-all-stack-v316 {
  display: grid;
  gap: 12px;
}

.match-odds-all-market-v316 {
  overflow: hidden;
  border: 1px solid rgba(133,90,191,.30);
  border-radius: 14px;
  background:
    linear-gradient(
      180deg,
      rgba(21,20,46,.88),
      rgba(10,11,31,.92)
    );
}

.match-odds-all-market-head-v316 {
  padding: 10px 11px 8px;
  border-bottom: 1px solid rgba(255,255,255,.055);
}

.match-odds-all-market-head-v316 h3 {
  margin: 0;
  color: rgba(255,255,255,.88);
  font-size: 11px;
  line-height: 1.25;
  font-weight: 800;
}

.match-odds-all-sources-v316 {
  display: grid;
}

.match-odds-all-source-v316 + .match-odds-all-source-v316 {
  border-top: 1px solid rgba(255,255,255,.05);
}

.match-odds-all-source-name-v316 {
  padding: 8px 10px 0;
  color: rgba(255,255,255,.64);
  font-size: 9px;
  line-height: 1.2;
  font-weight: 800;
}

.match-odds-all-grid-v316 {
  display: grid;
  grid-template-columns:
    repeat(
      auto-fit,
      minmax(92px, 1fr)
    );
  gap: 7px;
  padding: 9px;
}

.match-odds-all-cell-v316 {
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 54px;
  padding: 7px 5px;
  border: 1px solid rgba(133,90,191,.24);
  border-radius: 11px;
  background: rgba(31,28,61,.72);
  text-align: center;
}

.match-odds-all-cell-v316 span {
  width: 100%;
  margin-bottom: 5px;
  overflow: hidden;
  color: rgba(223,216,241,.58);
  font-size: 8px;
  line-height: 1.15;
  font-weight: 750;
  text-overflow: ellipsis;
}

.match-odds-all-cell-v316 strong {
  color: #d65cff;
  font-size: 15px;
  line-height: 1;
  font-weight: 850;
  text-shadow:
    0 0 10px rgba(210,70,255,.18);
}

@media (max-width: 390px) {
  .match-odds-all-grid-v316 {
    grid-template-columns:
      repeat(
        3,
        minmax(0, 1fr)
      );
    gap: 6px;
    padding: 8px;
  }

  .match-odds-all-cell-v316 {
    min-height: 50px;
    padding-inline: 4px;
  }

  .match-odds-all-cell-v316 strong {
    font-size: 14px;
  }
}
/* ===== /v316 all prematch markets ===== */

/* ===== v319 dedicated odds scrollbar ===== */

/* Absolute protection: the match page itself may never scroll sideways. */
html,
body,
.app-shell,
.country-stage,
.country-stage.is-match-view,
.country-list,
.country-list.is-match-page,
.match-page-shell {
  max-width: 100%;
}

html,
body,
.app-shell,
.country-stage,
.country-stage.is-match-view {
  overflow-x: hidden !important;
}

/* Odds content never grows the page width. */
.match-odds-page-head-v314,
.match-odds-scrollbar-v319,
.match-odds-market-tabs-v314,
.match-odds-market-toolbar-v314,
.match-odds-line-tabs-v314,
.match-odds-team-tabs-v314,
.match-odds-single-v3144,
.match-odds-matrix-v314,
.match-odds-all-stack-v316 {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

/* Dedicated scrollbar directly under the heading. */
.match-odds-scrollbar-v319 {
  padding: 1px 1px 8px;
}

.match-odds-scrollbar-v319[hidden] {
  display: none !important;
}

.match-odds-scroll-track-v319 {
  position: relative;
  width: 100%;
  height: 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.055);
  border: 1px solid rgba(152,93,218,.18);
  overflow: hidden;
  touch-action: none;
}

.match-odds-scroll-thumb-v319 {
  position: absolute;
  top: 1px;
  left: 0;
  height: 4px;
  min-width: 34px;
  border-radius: 999px;
  background:
    linear-gradient(
      90deg,
      rgba(163,64,255,.78),
      rgba(255,66,238,.88)
    );
  box-shadow: 0 0 8px rgba(255,66,238,.20);
  cursor: grab;
  touch-action: none;
  will-change: transform;
}

.match-odds-scroll-thumb-v319:active {
  cursor: grabbing;
}

/* The tabs themselves no longer handle touch horizontal panning.
   Only the dedicated scrollbar moves them, preventing page drift. */
.match-odds-market-tabs-v314 {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  overflow-x: hidden !important;
  overflow-y: hidden !important;
  scrollbar-width: none;
  overscroll-behavior: none;
  padding: 0 1px 7px;
}

.match-odds-market-tabs-v314::-webkit-scrollbar {
  display: none !important;
}

.match-odds-market-tab-v314 {
  flex: 0 0 auto;
  white-space: nowrap;
  min-height: 31px;
  padding: 0 9px;
  border-radius: 9px;
  font-size: 9px;
}

/* Secondary line/team tabs remain local native horizontal strips.
   They are small and cannot shift the whole page because of the guards above. */
.match-odds-line-tabs-v314,
.match-odds-team-tabs-v314 {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  overflow-x: auto;
  overflow-y: hidden;
  max-width: 100%;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.match-odds-line-tabs-v314::-webkit-scrollbar,
.match-odds-team-tabs-v314::-webkit-scrollbar {
  display: none;
}

.match-odds-line-tab-v314,
.match-odds-team-tab-v314 {
  flex: 0 0 auto;
  white-space: nowrap;
  min-height: 27px;
  padding: 0 8px;
  border-radius: 9px;
  font-size: 8.5px;
}

.match-odds-market-toolbar-v314 {
  gap: 5px;
  margin: 7px 0;
}

/* Compact coefficient cards. */
.match-odds-single-v3144 {
  gap: 6px;
}

.match-odds-single-cell-v3144 {
  min-width: 0;
  min-height: 42px;
  padding: 4px;
  border-radius: 10px;
}

.match-odds-single-label-v3144 {
  margin-bottom: 2px;
  font-size: 7.5px;
}

.match-odds-single-cell-v3144 strong {
  font-size: 14px;
}

.match-odds-matrix-v314 {
  max-width: 100%;
  overflow: hidden;
  border-radius: 12px;
}

.match-odds-bookmaker-head-v314,
.match-odds-column-head-v314 {
  min-height: 27px;
  padding-inline: 4px;
  font-size: 7.5px;
}

.match-odds-bookmaker-name-v314,
.match-odds-price-cell-v314 {
  min-height: 43px;
}

.match-odds-bookmaker-name-v314 {
  padding: 4px 5px;
  font-size: 9px;
}

.match-odds-price-cell-v314 {
  padding: 11px 3px 4px;
}

.match-odds-price-cell-v314 strong {
  font-size: 13.5px;
}

/* All Markets remains compact. */
.match-odds-all-stack-v316 {
  gap: 8px;
}

.match-odds-all-market-v316 {
  max-width: 100%;
  border-radius: 11px;
}

.match-odds-all-market-head-v316 {
  padding: 7px 8px 5px;
}

.match-odds-all-market-head-v316 h3 {
  font-size: 9.5px;
}

.match-odds-all-grid-v316 {
  grid-template-columns:
    repeat(auto-fit, minmax(76px, 1fr));
  gap: 5px;
  padding: 6px;
}

.match-odds-all-cell-v316 {
  min-width: 0;
  min-height: 40px;
  padding: 4px 3px;
  border-radius: 8px;
}

.match-odds-all-cell-v316 span {
  margin-bottom: 2px;
  font-size: 7px;
}

.match-odds-all-cell-v316 strong {
  font-size: 12.5px;
}

@media (max-width: 390px) {
  .match-odds-market-tab-v314 {
    min-height: 30px;
    padding-inline: 8px;
  }

  .match-odds-single-cell-v3144 {
    min-height: 40px;
  }

  .match-odds-single-cell-v3144 strong {
    font-size: 13.5px;
  }

  .match-odds-all-grid-v316 {
    grid-template-columns:
      repeat(3, minmax(0, 1fr));
  }

  .match-odds-all-cell-v316 {
    min-height: 38px;
  }
}
/* ===== /v319 dedicated odds scrollbar ===== */

/* ===== v320 match page horizontal-shift guard ===== */
/* The main match page is never a horizontal scroller.
   Only its local tab strips may scroll horizontally. */
.country-stage.is-match-view,
.country-list.is-match-page,
.match-page-shell {
  max-width: 100%;
  min-width: 0;
}

.country-stage.is-match-view,
.country-list.is-match-page {
  overflow-x: hidden !important;
}

.match-page-shell {
  overflow-x: clip;
}

.match-section-tabs {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
/* ===== /v320 match page horizontal-shift guard ===== */

/* ===== v321 reliable odds scroll + fit cells ===== */

/* Visible, native range control directly under the heading. */
.match-odds-range-scroll-v321 {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  padding: 0 2px 7px;
  box-sizing: border-box;
}

.match-odds-range-scroll-v321[hidden] {
  display: none !important;
}

.match-odds-range-v321 {
  appearance: none;
  -webkit-appearance: none;
  display: block;
  width: 100%;
  height: 16px;
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  cursor: pointer;
  touch-action: manipulation;
}

.match-odds-range-v321::-webkit-slider-runnable-track {
  height: 5px;
  border: 1px solid rgba(159, 102, 230, .28);
  border-radius: 999px;
  background:
    linear-gradient(
      90deg,
      rgba(58, 42, 93, .82),
      rgba(89, 45, 119, .72)
    );
  box-shadow:
    inset 0 1px 2px rgba(0,0,0,.28),
    0 0 5px rgba(163,64,255,.10);
}

.match-odds-range-v321::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  width: 42px;
  height: 11px;
  margin-top: -4px;
  border: 1px solid rgba(255, 126, 244, .95);
  border-radius: 999px;
  background:
    linear-gradient(
      90deg,
      #a340ff,
      #ff42ee
    );
  box-shadow:
    0 0 7px rgba(255,66,238,.42),
    0 0 13px rgba(163,64,255,.22);
}

.match-odds-range-v321::-moz-range-track {
  height: 5px;
  border: 1px solid rgba(159, 102, 230, .28);
  border-radius: 999px;
  background:
    linear-gradient(
      90deg,
      rgba(58, 42, 93, .82),
      rgba(89, 45, 119, .72)
    );
}

.match-odds-range-v321::-moz-range-thumb {
  width: 42px;
  height: 11px;
  border: 1px solid rgba(255, 126, 244, .95);
  border-radius: 999px;
  background:
    linear-gradient(
      90deg,
      #a340ff,
      #ff42ee
    );
  box-shadow:
    0 0 7px rgba(255,66,238,.42);
}

/* Market strip is a real local scroller again.
   V320 already removed scrollIntoView(), so it cannot shift the whole page. */
.match-odds-market-tabs-v314 {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding: 0 1px 7px;
}

.match-odds-market-tabs-v314::-webkit-scrollbar {
  display: none !important;
}

/* Slightly smaller market buttons so more fit before scrolling. */
.match-odds-market-tab-v314 {
  min-height: 29px !important;
  padding: 0 8px !important;
  border-radius: 9px !important;
  font-size: 8.6px !important;
}

/* Coefficient grids ALWAYS fit inside viewport. */
.match-odds-single-v3144 {
  width: calc(100% - 8px) !important;
  max-width: calc(100% - 8px) !important;
  min-width: 0 !important;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-columns:
    repeat(
      var(--odds-columns-v3144),
      minmax(0, 1fr)
    ) !important;
  gap: 5px !important;
  box-sizing: border-box;
}

.match-odds-single-cell-v3144 {
  width: 100%;
  max-width: 100%;
  min-width: 0 !important;
  min-height: 38px !important;
  padding: 3px !important;
  border-radius: 9px !important;
  overflow: hidden;
  box-sizing: border-box;
}

.match-odds-single-label-v3144 {
  max-width: 100%;
  margin-bottom: 2px !important;
  overflow: hidden;
  font-size: 7.2px !important;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.match-odds-single-cell-v3144 strong {
  max-width: 100%;
  font-size: 13.2px !important;
  line-height: 1 !important;
}

/* Future multi-bookmaker matrix also must never overflow horizontally. */
.match-odds-matrix-v314 {
  width: calc(100% - 8px) !important;
  max-width: calc(100% - 8px) !important;
  min-width: 0 !important;
  margin: 0 auto !important;
  overflow: hidden !important;
  box-sizing: border-box;
}

.match-odds-matrix-head-v314,
.match-odds-bookmaker-row-v314 {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  grid-template-columns:
    minmax(58px, .85fr)
    repeat(
      var(--odds-columns-v314),
      minmax(0, 1fr)
    ) !important;
}

.match-odds-bookmaker-head-v314,
.match-odds-column-head-v314 {
  min-width: 0;
  padding-inline: 3px !important;
  font-size: 7px !important;
  overflow: hidden;
  text-overflow: ellipsis;
}

.match-odds-bookmaker-name-v314 {
  min-width: 0 !important;
  padding-inline: 4px !important;
  font-size: 8.5px !important;
}

.match-odds-price-cell-v314 {
  min-width: 0 !important;
  padding-inline: 2px !important;
}

.match-odds-price-cell-v314 strong {
  font-size: 13px !important;
}

@media (max-width: 390px) {
  .match-odds-market-tab-v314 {
    min-height: 28px !important;
    padding-inline: 7px !important;
    font-size: 8.3px !important;
  }

  .match-odds-single-v3144,
  .match-odds-matrix-v314 {
    width: calc(100% - 6px) !important;
    max-width: calc(100% - 6px) !important;
  }

  .match-odds-single-cell-v3144 {
    min-height: 37px !important;
  }

  .match-odds-single-cell-v3144 strong {
    font-size: 13px !important;
  }
}
/* ===== /v321 reliable odds scroll + fit cells ===== */

/* ===== v323 clickable odds categories ===== */

/* The V321 scrollbar remains unchanged; only make the category
   controls explicit interactive targets above the scroll container. */
.match-odds-market-tab-v314,
.match-odds-line-tab-v314,
.match-odds-team-tab-v314 {
  position: relative !important;
  z-index: 5 !important;
  pointer-events: auto !important;
  cursor: pointer !important;
  -webkit-tap-highlight-color: transparent;
}

.match-odds-market-tab-v314 {
  touch-action: manipulation;
}

.match-odds-market-tab-v314:active,
.match-odds-line-tab-v314:active,
.match-odds-team-tab-v314:active {
  transform: scale(.97);
}

/* The scrolling container itself must not cover button hit areas. */
.match-odds-market-tabs-v314 {
  position: relative !important;
  z-index: 1 !important;
}

/* ===== /v323 clickable odds categories ===== */

/* ===== v324 permanent odds scrollbar + corrected compact scale ===== */

/* Do not scale/zoom the application. Only constrain the odds section. */
.match-odds-page-v313,
.match-odds-page-head-v314,
.match-odds-market-tabs-v314,
.match-odds-scroll-v324,
.match-odds-market-toolbar-v314,
.match-odds-line-tabs-v314,
.match-odds-team-tabs-v314,
.match-odds-single-v3144,
.match-odds-matrix-v314,
.match-odds-all-stack-v316,
.match-odds-all-market-v316,
.match-odds-all-grid-v316 {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

/* Old V319/V321 controls are retired. */
.match-odds-scrollbar-v319,
.match-odds-range-scroll-v321 {
  display: none !important;
}

/* Heading: return to a compact mobile proportion. */
.match-odds-page-head-v314 {
  margin-bottom: 7px !important;
}

.match-odds-page-head-v314 h2 {
  margin-top: 1px !important;
  font-size: 17px !important;
  line-height: 1.08 !important;
}

/* Categories: native local scrolling + fully clickable buttons. */
.match-odds-market-tabs-v314 {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;

  gap: 5px !important;
  margin: 0 !important;
  padding: 0 1px 5px !important;

  overflow-x: auto !important;
  overflow-y: hidden !important;
  overscroll-behavior-x: contain !important;

  scrollbar-width: none !important;
  -webkit-overflow-scrolling: touch;
}

.match-odds-market-tabs-v314::-webkit-scrollbar {
  display: none !important;
}

.match-odds-market-tab-v314 {
  position: relative !important;
  z-index: 5 !important;

  flex: 0 0 auto !important;
  min-width: max-content !important;

  min-height: 27px !important;
  padding: 0 7px !important;

  border-radius: 8px !important;

  font-size: 8px !important;
  line-height: 1 !important;

  cursor: pointer !important;
  pointer-events: auto !important;
  white-space: nowrap !important;

  touch-action: manipulation;
}

/* Permanent visible scrollbar BELOW the category row. */
.match-odds-scroll-v324 {
  display: block !important;
  padding: 0 2px 7px !important;
  margin: 0 !important;
}

.match-odds-scroll-range-v324 {
  appearance: none;
  -webkit-appearance: none;

  display: block !important;

  width: 100% !important;
  height: 12px !important;

  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;
  outline: 0 !important;

  background: transparent !important;
  cursor: pointer;
}

.match-odds-scroll-range-v324::-webkit-slider-runnable-track {
  height: 4px;
  border: 1px solid rgba(150, 94, 216, .34);
  border-radius: 999px;
  background:
    linear-gradient(
      90deg,
      rgba(65, 40, 96, .82),
      rgba(86, 42, 102, .72)
    );
}

.match-odds-scroll-range-v324::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;

  width: 42px;
  height: 9px;
  margin-top: -3.5px;

  border: 1px solid rgba(255, 151, 247, .96);
  border-radius: 999px;

  background:
    linear-gradient(
      90deg,
      #a340ff,
      #ff42ee
    );

  box-shadow:
    0 0 6px rgba(255, 66, 238, .42);
}

.match-odds-scroll-range-v324::-moz-range-track {
  height: 4px;
  border: 1px solid rgba(150, 94, 216, .34);
  border-radius: 999px;
  background: rgba(73, 43, 101, .82);
}

.match-odds-scroll-range-v324::-moz-range-thumb {
  width: 42px;
  height: 9px;

  border: 1px solid rgba(255, 151, 247, .96);
  border-radius: 999px;

  background:
    linear-gradient(
      90deg,
      #a340ff,
      #ff42ee
    );
}

.match-odds-scroll-v324.is-disabled {
  opacity: .35;
}

.match-odds-scroll-v324.is-disabled
.match-odds-scroll-range-v324 {
  cursor: default;
}

/* Secondary selectors. */
.match-odds-market-toolbar-v314 {
  gap: 4px !important;
  margin: 4px 0 6px !important;
}

.match-odds-line-tabs-v314,
.match-odds-team-tabs-v314 {
  gap: 4px !important;

  overflow-x: auto !important;
  overflow-y: hidden !important;

  scrollbar-width: none !important;
}

.match-odds-line-tabs-v314::-webkit-scrollbar,
.match-odds-team-tabs-v314::-webkit-scrollbar {
  display: none !important;
}

.match-odds-line-tab-v314,
.match-odds-team-tab-v314 {
  flex: 0 0 auto !important;

  min-height: 24px !important;
  padding: 0 7px !important;

  border-radius: 7px !important;

  font-size: 7.6px !important;
}

/* ---------------------------------------------------------
   SPECIALIZED MARKETS
   2 or 3 coefficients always fit in one row.
   --------------------------------------------------------- */
.match-odds-single-v3144 {
  display: grid !important;

  grid-template-columns:
    repeat(
      var(--odds-columns-v3144),
      minmax(0, 1fr)
    ) !important;

  gap: 4px !important;

  margin: 0 !important;
  padding: 0 !important;
}

.match-odds-single-cell-v3144 {
  width: auto !important;
  min-width: 0 !important;

  min-height: 35px !important;
  padding: 3px 2px !important;

  overflow: hidden !important;
  border-radius: 8px !important;
}

.match-odds-single-label-v3144 {
  width: 100% !important;

  margin-bottom: 1px !important;

  overflow: hidden !important;

  font-size: 6.8px !important;
  line-height: 1 !important;

  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.match-odds-single-cell-v3144 strong {
  display: block;

  max-width: 100%;

  overflow: hidden;

  font-size: 12.5px !important;
  line-height: 1 !important;

  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Multi-source table also stays inside the phone width. */
.match-odds-matrix-v314 {
  margin: 0 !important;

  overflow: hidden !important;

  border-radius: 10px !important;
}

.match-odds-matrix-head-v314,
.match-odds-bookmaker-row-v314 {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;

  grid-template-columns:
    minmax(48px, .72fr)
    repeat(
      var(--odds-columns-v314),
      minmax(0, 1fr)
    ) !important;
}

.match-odds-bookmaker-head-v314,
.match-odds-column-head-v314 {
  min-width: 0 !important;
  min-height: 23px !important;

  padding-inline: 2px !important;

  overflow: hidden !important;

  font-size: 6.6px !important;

  text-overflow: ellipsis;
  white-space: nowrap;
}

.match-odds-bookmaker-name-v314 {
  min-width: 0 !important;
  min-height: 36px !important;

  padding: 3px !important;

  overflow: hidden !important;

  font-size: 7.7px !important;

  text-overflow: ellipsis;
  white-space: nowrap;
}

.match-odds-price-cell-v314 {
  min-width: 0 !important;
  min-height: 36px !important;

  padding: 8px 2px 3px !important;

  overflow: hidden !important;
}

.match-odds-price-cell-v314 strong {
  font-size: 12px !important;
}

/* ---------------------------------------------------------
   ALL MARKETS
   Correct compact mobile scale: 3 cards in a row.
   --------------------------------------------------------- */
.match-odds-all-stack-v316 {
  gap: 6px !important;
}

.match-odds-all-market-v316 {
  overflow: hidden !important;

  border-radius: 9px !important;
}

.match-odds-all-market-head-v316 {
  padding: 5px 7px 4px !important;
}

.match-odds-all-market-head-v316 h3 {
  font-size: 8.5px !important;
  line-height: 1.1 !important;
}

.match-odds-all-source-name-v316 {
  padding: 5px 6px 0 !important;
  font-size: 7.3px !important;
}

.match-odds-all-grid-v316 {
  display: grid !important;

  grid-template-columns:
    repeat(
      3,
      minmax(0, 1fr)
    ) !important;

  gap: 4px !important;

  padding: 5px !important;
}

.match-odds-all-cell-v316 {
  width: auto !important;
  min-width: 0 !important;

  min-height: 34px !important;

  padding: 3px 2px !important;

  overflow: hidden !important;

  border-radius: 7px !important;
}

.match-odds-all-cell-v316 span {
  display: block;

  width: 100% !important;

  margin-bottom: 1px !important;

  overflow: hidden !important;

  font-size: 6.2px !important;
  line-height: 1 !important;

  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.match-odds-all-cell-v316 strong {
  display: block;

  max-width: 100%;

  overflow: hidden !important;

  font-size: 11.5px !important;
  line-height: 1 !important;

  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* Main match page itself is never horizontally movable. */
.country-stage.is-match-view,
.country-list.is-match-page,
.match-page-shell,
.match-tab-panel {
  max-width: 100% !important;
  min-width: 0 !important;
}

.country-stage.is-match-view,
.country-list.is-match-page,
.match-page-shell {
  overflow-x: hidden !important;
}

/* ===== /v324 permanent odds scrollbar + corrected compact scale ===== */

/* ===== v325 hidden scroll + clearer labels ===== */

/* Hide the visible range bar from V324.
   Scrolling remains available on the category strip itself:
   touch swipe + mouse wheel. */
.match-odds-scroll-v324 {
  display: none !important;
}

/* Category strip remains a local horizontal scroller with no visible bar. */
.match-odds-market-tabs-v314 {
  overflow-x: auto !important;
  overflow-y: hidden !important;

  scrollbar-width: none !important;
  -ms-overflow-style: none;

  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain !important;

  padding-bottom: 5px !important;
}

.match-odds-market-tabs-v314::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

/* Category labels: more readable and higher contrast. */
.match-odds-market-tab-v314 {
  min-height: 28px !important;
  padding: 0 8px !important;

  color: rgba(236, 231, 248, .82) !important;

  font-size: 8.8px !important;
  line-height: 1 !important;
  font-weight: 800 !important;
  letter-spacing: -0.01em !important;

  text-shadow: 0 1px 1px rgba(0,0,0,.35);
}

.match-odds-market-tab-v314.is-active {
  color: #ffffff !important;
  font-weight: 850 !important;
}

/* Team / line selector labels. */
.match-odds-line-tab-v314,
.match-odds-team-tab-v314 {
  color: rgba(235, 229, 247, .84) !important;

  font-size: 8.4px !important;
  font-weight: 800 !important;

  text-shadow: 0 1px 1px rgba(0,0,0,.30);
}

.match-odds-line-tab-v314.is-active,
.match-odds-team-tab-v314.is-active {
  color: #ffffff !important;
}

/* Specialized coefficient cards:
   keep the same compact height, improve text readability. */
.match-odds-single-label-v3144 {
  color: rgba(232, 225, 246, .76) !important;

  font-size: 8.2px !important;
  line-height: 1.05 !important;
  font-weight: 800 !important;

  text-shadow: 0 1px 1px rgba(0,0,0,.32);
}

.match-odds-single-cell-v3144 strong {
  color: #e45cff !important;

  font-size: 13px !important;
  line-height: 1 !important;
  font-weight: 900 !important;

  text-shadow:
    0 0 8px rgba(218, 78, 255, .22);
}

/* Multi-source matrix labels. */
.match-odds-bookmaker-head-v314,
.match-odds-column-head-v314 {
  color: rgba(231, 224, 244, .74) !important;

  font-size: 7.8px !important;
  font-weight: 800 !important;

  text-shadow: 0 1px 1px rgba(0,0,0,.28);
}

.match-odds-bookmaker-name-v314 {
  color: rgba(245, 240, 252, .90) !important;

  font-size: 8.5px !important;
  font-weight: 800 !important;
}

.match-odds-price-cell-v314 strong {
  color: #e45cff !important;

  font-size: 12.5px !important;
  font-weight: 900 !important;
}

/* "Все рынки": clearer section and outcome labels. */
.match-odds-all-market-head-v316 h3 {
  color: rgba(255,255,255,.92) !important;

  font-size: 9.5px !important;
  line-height: 1.15 !important;
  font-weight: 850 !important;

  text-shadow: 0 1px 1px rgba(0,0,0,.30);
}

.match-odds-all-source-name-v316 {
  color: rgba(231, 224, 244, .72) !important;

  font-size: 8px !important;
  font-weight: 800 !important;
}

.match-odds-all-cell-v316 span {
  color: rgba(232, 225, 246, .76) !important;

  font-size: 7.4px !important;
  line-height: 1.05 !important;
  font-weight: 800 !important;

  text-shadow: 0 1px 1px rgba(0,0,0,.28);
}

.match-odds-all-cell-v316 strong {
  color: #e45cff !important;

  font-size: 12px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
}

/* Keep everything inside the viewport. */
.match-odds-page-v313,
.match-odds-market-tabs-v314,
.match-odds-market-toolbar-v314,
.match-odds-single-v3144,
.match-odds-matrix-v314,
.match-odds-all-stack-v316 {
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

/* ===== /v325 hidden scroll + clearer labels ===== */

/* ===== v326 odds empty-state readability ===== */

.match-odds-state-v313 {
  color: rgba(245, 241, 252, .92) !important;

  min-height: 92px;
  padding: 24px 16px !important;

  border: 1px solid rgba(150, 92, 208, .22) !important;
  border-radius: 13px !important;

  background:
    linear-gradient(
      180deg,
      rgba(22, 20, 43, .72),
      rgba(10, 11, 28, .78)
    ) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.02);
}

.match-odds-state-v313 strong {
  color: rgba(255,255,255,.94) !important;

  font-size: 13px !important;
  line-height: 1.15 !important;
  font-weight: 850 !important;

  text-shadow:
    0 1px 2px rgba(0,0,0,.45);
}

.match-odds-state-v313 span {
  color: rgba(218, 210, 235, .70) !important;

  max-width: 275px !important;

  font-size: 10px !important;
  line-height: 1.35 !important;
  font-weight: 600 !important;

  opacity: 1 !important;
}

.match-odds-state-v313.is-loading strong {
  color: rgba(255,255,255,.94) !important;
}

.match-odds-state-v313.is-error strong {
  color: rgba(255, 126, 149, .95) !important;
}

.match-odds-state-v313.is-error span {
  color: rgba(255, 190, 202, .76) !important;
}

/* ===== /v326 odds empty-state readability ===== */

/* Final results stay legible beside each team in today's calendar. */
.league-match-row.is-finished .league-match-datetime strong {
  color: #b8a9c9;
  font-size: 10px;
  letter-spacing: 0;
}
.league-match-score sup { margin-left: 2px; font-size: 9px; color: #b8a9c9; }