/*! rbxportal — публичный слой портала «Рейтинг Букмекеров»
 * стандарт: RBX-VIS-STD-3.0.0 · namespace: rbxportal · режим: light
 * build-id: de7d71fcdb74
 * файл машинный: править ui/src/*, не этот бандл
 */

/* ───── ui/src/00-tokens.generated.css ───── */
/* Токены публичного слоя. ВЫПУЩЕНО МАШИНОЙ ui/tools/build.mjs — править
 * ui/tokens/homepage-passport-tokens.json, не этот файл.
 * Источник значений: design-references/homepage-baseline-2026-08-10/homepage-style-passport.json
 * sha256(token-layer) = af551bc0a894b42dbe7594f923cd6e130349834703d49c1cceb0c77202950828
 */

.rbxportal {
  --rbxportal-color-surface: #FFFFFF;
  --rbxportal-color-surface-sunken: #F8F8F8;
  --rbxportal-color-surface-inset: #F2F2F2;
  --rbxportal-color-surface-accent: #F2F8FF;
  --rbxportal-color-ink-strong: #212121;
  --rbxportal-color-ink: #474747;
  --rbxportal-color-ink-muted: #908F8F;
  --rbxportal-color-ink-inverse: #FFFFFF;
  --rbxportal-color-border: #EDEDED;
  --rbxportal-color-border-strong: #E5E5E5;
  --rbxportal-color-action: #0077EE;
  --rbxportal-color-link: #0099FF;
  --rbxportal-color-positive: #15A863;
  --rbxportal-color-positive-hover: #0F9556;
  --rbxportal-color-cookie-surface: #323232;
  --rbxportal-color-header-veil: rgba(255,255,255,.60);
  --rbxportal-radius-xs: 4px;
  --rbxportal-radius-sm: 6px;
  --rbxportal-radius-md: 8px;
  --rbxportal-radius-lg: 12px;
  --rbxportal-radius-xl: 16px;
  --rbxportal-radius-pill: 9999px;
  --rbxportal-radius-helper: 24px 12px 12px 24px;
  --rbxportal-space-3xs: 4px;
  --rbxportal-space-2xs: 6px;
  --rbxportal-space-xs: 8px;
  --rbxportal-space-sm: 12px;
  --rbxportal-space-md: 16px;
  --rbxportal-space-lg: 24px;
  --rbxportal-space-xl: 32px;
  --rbxportal-space-2xl: 36px;
  --rbxportal-space-3xl: 48px;
  --rbxportal-space-4xl: 64px;
  --rbxportal-font-family: -apple-system, BlinkMacSystemFont, Arial, sans-serif;
  --rbxportal-font-weight-regular: 400;
  --rbxportal-font-weight-bold: 700;
  --rbxportal-font-body-size: 16px;
  --rbxportal-font-body-line: 24px;
  --rbxportal-font-heading-size: 24px;
  --rbxportal-font-heading-line: 30px;
  --rbxportal-font-heading-size-mobile: 20px;
  --rbxportal-font-heading-line-mobile: 24px;
  --rbxportal-font-card-heading-size: 16px;
  --rbxportal-font-card-heading-line: 20px;
  --rbxportal-font-card-heading-size-mobile: 14px;
  --rbxportal-font-card-heading-line-mobile: 16px;
  --rbxportal-font-meta-size: 12px;
  --rbxportal-font-meta-line: 16px;
  --rbxportal-font-button-size: 14px;
  --rbxportal-font-button-line: 14px;
  --rbxportal-font-button-size-mobile: 12px;
  --rbxportal-font-button-line-mobile: 12px;
  --rbxportal-shadow-review: 0 2px 4px rgba(0,0,0,.10);
  --rbxportal-shadow-raised: 0 2px 4px rgba(0,0,0,.10);
  --rbxportal-shadow-focus-ring: 0 0 0 2px #FFFFFF, 0 0 0 4px #0077EE;
  --rbxportal-layer-cookie: 2147483647;
  --rbxportal-layer-header: 1003;
  --rbxportal-layer-bottom-nav: 1003;
  --rbxportal-layer-menu-overlay: 1002;
  --rbxportal-layer-dialog: 2147483000;
  --rbxportal-layer-sticky-helper: 50;
  --rbxportal-layer-fixed-promo: 40;
  --rbxportal-layout-wide-container: 1322px;
  --rbxportal-layout-content-band: 1286px;
  --rbxportal-layout-main-track: 966px;
  --rbxportal-layout-rail-track: 320px;
  --rbxportal-layout-track-gap: 36px;
  --rbxportal-layout-main-measure: 924px;
  --rbxportal-layout-mobile-measure: 358px;
  --rbxportal-layout-mobile-card: 288px;
  --rbxportal-layout-mobile-edge: 16px;
  --rbxportal-layout-mobile-edge-compact: 8px;
  --rbxportal-layout-header-height: 98px;
  --rbxportal-layout-header-row-top: 52px;
  --rbxportal-layout-header-row-nav: 46px;
  --rbxportal-layout-header-height-mobile: 52px;
  --rbxportal-layout-bottom-nav-height: 54px;
  --rbxportal-layout-bottom-nav-item: 78px;
  --rbxportal-layout-fixed-promo-height: 60px;
  --rbxportal-layout-sticky-helper-height: 52px;
  --rbxportal-layout-sticky-helper-height-mobile: 44px;
  --rbxportal-layout-sticky-helper-offset: 68px;
  --rbxportal-layout-sticky-helper-offset-mobile: 130px;
  --rbxportal-layout-sticky-helper-top: 80px;
  --rbxportal-layout-document-tail-mobile: 40px;
  --rbxportal-breakpoint-mobile-max: 767px;
  --rbxportal-breakpoint-compact-min: 768px;
  --rbxportal-breakpoint-wide-min: 1360px;
  --rbxportal-motion-control: 150ms;
  --rbxportal-motion-track: 600ms;
  --rbxportal-motion-promo-cycle: 5000ms;
  --rbxportal-motion-easing: ease-out;
}

/* ───── ui/src/02-base.css ───── */
/* ============================================================================
 * 02 · База. Задача [0.21.4].
 *
 * Reset ограничен корневой областью `.rbxportal`: глобальные `:root`/`*`
 * запрещены контрактом изоляции — тема тиражируется на десятки поддоменов и
 * не должна протекать ни в административную часть, ни в чужие блоки.
 * ==========================================================================*/

.rbxportal {
  /* Шрифт системный. Паспорт фиксирует: кастомных FontFace на эталоне не
   * загружено, Arial 400/700 приходит системным fallback. Свой шрифт сдвинул
   * бы ширины строк по всему документу и развалил бы посекционную сверку. */
  font-family: var(--rbxportal-font-family);
  font-size: var(--rbxportal-font-body-size);
  line-height: var(--rbxportal-font-body-line);
  font-weight: var(--rbxportal-font-weight-regular);
  color: var(--rbxportal-color-ink);
  background: var(--rbxportal-color-surface);
  margin: 0;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* Глобального overflow-x:hidden НЕТ намеренно: он маскирует причину выноса,
   * а не устраняет её. Ленты получают локальные контейнеры прокрутки. */
}

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

.rbxportal h1,
.rbxportal h2,
.rbxportal h3,
.rbxportal h4,
.rbxportal p,
.rbxportal figure,
.rbxportal blockquote,
.rbxportal dl,
.rbxportal dd {
  margin: 0;
}

.rbxportal ul,
.rbxportal ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

.rbxportal img,
.rbxportal svg,
.rbxportal picture,
.rbxportal video {
  display: block;
  max-width: 100%;
}

.rbxportal img {
  /* Размеры слота задаются разметкой (width/height обязательны), поэтому
   * картинка не имеет права менять высоту слота при ленивой загрузке —
   * иначе вся вертикаль поедет и покадровое сравнение станет бессмысленным. */
  height: auto;
}

.rbxportal a {
  color: var(--rbxportal-color-link);
  text-decoration: none;
}

.rbxportal a:hover {
  text-decoration: underline;
}

.rbxportal button,
.rbxportal input,
.rbxportal select,
.rbxportal textarea {
  font: inherit;
  color: inherit;
  margin: 0;
}

.rbxportal button {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-align: inherit;
}

.rbxportal [hidden] {
  display: none !important;
}

/* Служебная подпись для скринридера: используется у счётчиков каруселей,
 * у результата копирования промокода и у скрытых заголовков секций. */
.rbxportal-hp-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Ссылка «к содержимому»: видна только при клавиатурном фокусе. Собственное
 * отличие копии от донора — доступность правится сознательно. */
.rbxportal-hp-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: calc(var(--rbxportal-layer-cookie));
  background: var(--rbxportal-color-surface);
  color: var(--rbxportal-color-ink-strong);
  padding: var(--rbxportal-space-xs) var(--rbxportal-space-md);
  border-radius: var(--rbxportal-radius-md);
}

.rbxportal-hp-skip:focus-visible,
.rbxportal-hp-skip:focus {
  left: var(--rbxportal-space-md);
  top: var(--rbxportal-space-xs);
}

/* Уважение к системной настройке: автопрокрутка каруселей и переходы трека
 * выключаются вместе с ней (второй контур — в поведенческом слое). */
@media (prefers-reduced-motion: reduce) {
  .rbxportal *,
  .rbxportal *::before,
  .rbxportal *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}

/* ───── ui/src/03-typography.css ───── */
/* ============================================================================
 * 03 · Типографика. Задача [0.21.4].
 *
 * Все кегли и интерлиньяжи — роли из token-layer, ни одного литерала.
 * Значения перенесены из homepage-style-passport.json:
 *   body 16/24/400 · heading desktop 24/30/700 · heading mobile 20/24/700
 *   card heading desktop 16/20 · mobile 14/16 · metadata 12/16
 *   button desktop 14/14 · mobile 12/12
 * Мобильные значения переключаются в 12-responsive.css, а не дублированием
 * классов: одна роль — одно место правки.
 * ==========================================================================*/

.rbxportal-hp-h1,
.rbxportal-hp-h2 {
  font-size: var(--rbxportal-font-heading-size);
  line-height: var(--rbxportal-font-heading-line);
  font-weight: var(--rbxportal-font-weight-bold);
  color: var(--rbxportal-color-ink-strong);
}

.rbxportal-hp-h3 {
  font-size: var(--rbxportal-font-card-heading-size);
  line-height: var(--rbxportal-font-card-heading-line);
  font-weight: var(--rbxportal-font-weight-bold);
  color: var(--rbxportal-color-ink-strong);
}

.rbxportal-hp-text {
  font-size: var(--rbxportal-font-body-size);
  line-height: var(--rbxportal-font-body-line);
  color: var(--rbxportal-color-ink);
}

.rbxportal-hp-meta {
  font-size: var(--rbxportal-font-meta-size);
  line-height: var(--rbxportal-font-meta-line);
  color: var(--rbxportal-color-ink-muted);
}

.rbxportal-hp-meta--accent {
  color: var(--rbxportal-color-action);
}

.rbxportal-hp-strong {
  font-weight: var(--rbxportal-font-weight-bold);
  color: var(--rbxportal-color-ink-strong);
}

/* Заголовок секции: строка «название + ссылка на весь раздел». Такой парой
 * оформлены новости, блоги, гид, spotlight и популярное — поэтому это один
 * компонент, а не повторённая вёрстка в семи местах. */
.rbxportal-hp-sechead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--rbxportal-space-sm);
  margin-bottom: var(--rbxportal-space-md);
}

.rbxportal-hp-sechead__link {
  font-size: var(--rbxportal-font-button-size);
  line-height: var(--rbxportal-font-button-line);
  color: var(--rbxportal-color-action);
  white-space: nowrap;
}

/* Текстовые карточки высоту НЕ фиксируют и line-clamp не получают: паспорт
 * его не подтвердил (typography.overflow_rules.confirmed_line_clamp = false).
 * Фиксированы только медиа-слоты и паспортные размеры компонентов. */

/* ───── ui/src/04-layout.css ───── */
/* ============================================================================
 * 04 · Раскладка. Задача [0.21.4].
 *
 * Числа — из homepage-style-passport.json:
 *   desktop  wide-контейнер 1322 · полоса контента 1286 = 966 + 320,
 *            визуальный зазор main→rail 36 · main measure 924
 *   mobile   контент 358 при боковых отступах 16
 *   header   desktop 98 (две строки 52 + 46), mobile 52, z-index 1003
 *
 * Одна семантическая композиция на оба режима: отдельных desktop/mobile
 * страниц нет — иначе пришлось бы держать две разные разметки и две правды.
 * ==========================================================================*/

.rbxportal-hp {
  /* Ширина страницы держится контейнером, а не отрицательными отступами:
   * страница обязана оставаться в пределах вьюпорта на всех ширинах. */
  width: 100%;
  min-width: 0;
}

/* ── полоса контента ───────────────────────────────────────────────────── */

.rbxportal-hp-band {
  width: 100%;
  max-width: var(--rbxportal-layout-wide-container);
  margin: 0 auto;
  padding-inline: var(--rbxportal-space-md);
  min-width: 0;
}

/* Двухколоночная сетка «основной поток + rail». В compact и mobile режимах
 * она разбирается в один поток (12-responsive.css). */
.rbxportal-hp-cols {
  display: grid;
  grid-template-columns: var(--rbxportal-layout-main-track) var(--rbxportal-layout-rail-track);
  column-gap: var(--rbxportal-layout-track-gap);
  align-items: start;
  min-width: 0;
}

.rbxportal-hp-main {
  min-width: 0;
  /* main measure 924 при треке 966: внутренние отступы 6 слева и 36 справа.
   * Перенесено дословно из global_layout.desktop.main_measure. */
  padding-left: var(--rbxportal-space-2xs);
  padding-right: var(--rbxportal-space-2xl);
}

.rbxportal-hp-rail {
  min-width: 0;
}

/* Секции основного потока идут единым вертикальным ритмом. Величина взята из
 * шкалы отступов паспорта, а не подобрана. */
.rbxportal-hp-main > * + * {
  margin-top: var(--rbxportal-space-xl);
}

.rbxportal-hp-rail > * + * {
  margin-top: var(--rbxportal-space-md);
}

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

.rbxportal-hp-header {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: var(--rbxportal-layer-header);
  height: var(--rbxportal-layout-header-height);
  background: var(--rbxportal-color-header-veil);
  -webkit-backdrop-filter: saturate(180%) blur(8px);
  backdrop-filter: saturate(180%) blur(8px);
  border-bottom: 1px solid var(--rbxportal-color-border);
}

/* Шапка fixed, поэтому поток документа обязан получить компенсацию её высоты
 * отдельным элементом. Отрицательные отступы для этого не годятся: они
 * ломают якорную прокрутку. */
.rbxportal-hp-header-spacer {
  height: var(--rbxportal-layout-header-height);
}

.rbxportal-hp-header__row {
  display: flex;
  align-items: center;
  gap: var(--rbxportal-space-md);
  max-width: var(--rbxportal-layout-wide-container);
  margin: 0 auto;
  padding-inline: var(--rbxportal-space-md);
  min-width: 0;
}

.rbxportal-hp-header__row--top {
  height: var(--rbxportal-layout-header-row-top);
}

.rbxportal-hp-header__row--nav {
  height: var(--rbxportal-layout-header-row-nav);
}

.rbxportal-hp-header__logo {
  display: block;
  flex: 0 0 auto;
}

.rbxportal-hp-header__spacer {
  flex: 1 1 auto;
  min-width: 0;
}

/* Промо в шапке: у донора это место с чередованием кадров по таймеру
 * (P-008, ориентир цикла ~5 с). Ширина здесь не фиксируется, чтобы строка
 * шапки не разъезжалась на промежуточных ширинах. */
.rbxportal-hp-header__promo {
  display: flex;
  align-items: center;
  gap: var(--rbxportal-space-xs);
  min-width: 0;
  overflow: hidden;
}

.rbxportal-hp-nav {
  display: flex;
  align-items: center;
  gap: var(--rbxportal-space-lg);
  min-width: 0;
  overflow: hidden;
}

.rbxportal-hp-nav__link {
  font-size: var(--rbxportal-font-button-size);
  line-height: var(--rbxportal-font-button-line);
  color: var(--rbxportal-color-ink-strong);
  white-space: nowrap;
  padding-block: var(--rbxportal-space-xs);
}

.rbxportal-hp-nav__link:hover {
  color: var(--rbxportal-color-action);
  text-decoration: none;
}

/* ── подвал ────────────────────────────────────────────────────────────── */

.rbxportal-hp-footer {
  background: var(--rbxportal-color-surface-sunken);
  border-top: 1px solid var(--rbxportal-color-border);
  margin-top: var(--rbxportal-space-3xl);
}

.rbxportal-hp-footer__inner {
  max-width: var(--rbxportal-layout-wide-container);
  margin: 0 auto;
  padding: var(--rbxportal-space-xl) var(--rbxportal-space-md);
}

/* Хвостовой белый отступ 40 px после мобильного подвала. Паспорт фиксирует
 * его отдельной записью m-document-tail, поэтому он существует как элемент,
 * а не как margin подвала: иначе он схлопнулся бы с соседним отступом. */
.rbxportal-hp-tail {
  height: var(--rbxportal-layout-document-tail-mobile);
  background: var(--rbxportal-color-surface);
}

/* ───── ui/src/05-primitives.css ───── */
/* ============================================================================
 * 05 · Примитивы: кнопки, чипы, медиа-слоты, состояния фокуса. [0.21.4].
 *
 * ФОКУС — сознательное отличие копии от донора. Паспорт поведения числит
 * дефектами: у триггера мобильного меню `outline: 0px` и без тени, все 16
 * контролов раскрытия строк — `div` с `tabindex=-1`. Здесь фокус видимый и
 * одинаковый у всех интерактивных элементов; в покое он ничего не рисует,
 * поэтому статическая сверка не затрагивается.
 * ==========================================================================*/

.rbxportal :focus-visible {
  outline: 2px solid var(--rbxportal-color-action);
  outline-offset: 2px;
  border-radius: var(--rbxportal-radius-xs);
}

/* Кольцо на тёмных и цветных поверхностях: outline на них теряется, поэтому
 * добавляется двухслойная тень из token-layer. */
.rbxportal-hp-btn:focus-visible,
.rbxportal-hp-chip:focus-visible,
.rbxportal-hp-tab:focus-visible {
  outline: none;
  box-shadow: var(--rbxportal-shadow-focus-ring);
}

/* ── кнопки ────────────────────────────────────────────────────────────── */
/* Паспорт: стандартная кнопка 40 px, кегль desktop 14/14, mobile 12/12. */

.rbxportal-hp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--rbxportal-space-2xs);
  height: 40px;
  padding-inline: var(--rbxportal-space-md);
  border-radius: var(--rbxportal-radius-md);
  font-size: var(--rbxportal-font-button-size);
  line-height: var(--rbxportal-font-button-line);
  font-weight: var(--rbxportal-font-weight-bold);
  white-space: nowrap;
  transition: background-color var(--rbxportal-motion-control) var(--rbxportal-motion-easing),
              color var(--rbxportal-motion-control) var(--rbxportal-motion-easing);
}

.rbxportal-hp-btn--positive {
  background: var(--rbxportal-color-positive);
  color: var(--rbxportal-color-ink-inverse);
}

.rbxportal-hp-btn--positive:hover {
  background: var(--rbxportal-color-positive-hover);
  text-decoration: none;
}

.rbxportal-hp-btn--action {
  background: var(--rbxportal-color-action);
  color: var(--rbxportal-color-ink-inverse);
}

.rbxportal-hp-btn--ghost {
  background: var(--rbxportal-color-surface-inset);
  color: var(--rbxportal-color-ink-strong);
}

.rbxportal-hp-btn--ghost:hover {
  background: var(--rbxportal-color-border);
  text-decoration: none;
}

.rbxportal-hp-btn--block {
  display: flex;
  width: 100%;
}

/* Нейтральное целевое действие. Партнёрских ссылок пока нет, поэтому это
 * `button` с `aria-disabled`, а НЕ `href="#"` и не native `disabled`:
 * контрол обязан остаться в Tab-порядке и получать фокус, но не действовать.
 * Визуально он полноценный — таково требование заказчика. */
.rbxportal-hp-btn[aria-disabled='true'] {
  cursor: default;
}

/* ── мелкая ссылка «смотреть все» ──────────────────────────────────────── */

.rbxportal-hp-seeall {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding-inline: var(--rbxportal-space-sm);
  border-radius: var(--rbxportal-radius-pill);
  background: var(--rbxportal-color-surface-accent);
  color: var(--rbxportal-color-action);
  font-size: var(--rbxportal-font-meta-size);
  line-height: var(--rbxportal-font-meta-line);
  white-space: nowrap;
}

.rbxportal-hp-seeall:hover {
  text-decoration: none;
  background: var(--rbxportal-color-border);
}

/* ── чипы и бейджи ─────────────────────────────────────────────────────── */

.rbxportal-hp-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--rbxportal-space-3xs);
  height: 24px;
  padding-inline: var(--rbxportal-space-xs);
  border-radius: var(--rbxportal-radius-xs);
  background: var(--rbxportal-color-surface-inset);
  color: var(--rbxportal-color-ink);
  font-size: var(--rbxportal-font-meta-size);
  line-height: var(--rbxportal-font-meta-line);
  white-space: nowrap;
}

.rbxportal-hp-chip--accent {
  background: var(--rbxportal-color-surface-accent);
  color: var(--rbxportal-color-action);
}

.rbxportal-hp-chip--age {
  background: transparent;
  color: var(--rbxportal-color-ink-muted);
  padding-inline: 0;
}

/* ── медиа-слот ────────────────────────────────────────────────────────── */
/* Слот держит размер САМ. Картинка внутри не имеет права его менять — иначе
 * при ленивой загрузке поедет вся вертикаль документа. Поэтому у каждого
 * изображения в разметке обязательны width/height, а слот дополнительно
 * задаёт aspect-ratio и фон состояния загрузки. */

.rbxportal-hp-media {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--rbxportal-radius-md);
  background: var(--rbxportal-color-surface-inset);
  flex: 0 0 auto;
}

.rbxportal-hp-media > img,
.rbxportal-hp-media > picture,
.rbxportal-hp-media > picture > img,
.rbxportal-hp-media > svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}

.rbxportal-hp-media--contain > img,
.rbxportal-hp-media--contain > picture > img,
.rbxportal-hp-media--contain > svg {
  object-fit: contain;
}

/* Состояние «нет изображения»: слот сохраняет размеры и не схлопывается.
 * Декоративный резерв не озвучивается — alt="" и aria-hidden в разметке. */
.rbxportal-hp-media--empty {
  background: var(--rbxportal-color-surface-inset);
}

/* ── знак конторы ──────────────────────────────────────────────────────── */

.rbxportal-hp-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  background: var(--rbxportal-color-surface);
  border-radius: var(--rbxportal-radius-sm);
  overflow: hidden;
}

/* ── карточка ──────────────────────────────────────────────────────────── */

.rbxportal-hp-card {
  display: flex;
  flex-direction: column;
  background: var(--rbxportal-color-surface);
  border: 1px solid var(--rbxportal-color-border);
  border-radius: var(--rbxportal-radius-lg);
  overflow: hidden;
  min-width: 0;
}

.rbxportal-hp-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--rbxportal-space-xs);
  padding: var(--rbxportal-space-sm);
  min-width: 0;
}

.rbxportal-hp-card__foot {
  margin-top: auto;
  padding: var(--rbxportal-space-sm);
  padding-top: 0;
}

.rbxportal-hp-panel {
  background: var(--rbxportal-color-surface-sunken);
  border-radius: var(--rbxportal-radius-xl);
  padding: var(--rbxportal-space-lg);
  min-width: 0;
}

/* ── значки ────────────────────────────────────────────────────────────── */
/* Размер задаётся ЗДЕСЬ, а не атрибутами на каждом `<svg>`: их 98 штук.
 * Это обязательное правило, а не косметика — у `<svg>` без width/height
 * дефолтный размер замещаемого элемента 300×150 px, и одна такая иконка
 * в шапке распирала документ до 1107 px на мобильном.
 * `currentColor` — чтобы значок наследовал цвет роли у своего контейнера. */
.rbxportal-icon {
  display: inline-block;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  fill: currentColor;
  color: inherit;
  vertical-align: middle;
}

.rbxportal-icon--sm {
  width: 16px;
  height: 16px;
}

.rbxportal-icon--lg {
  width: 24px;
  height: 24px;
}

/* ── горизонтальная лента ──────────────────────────────────────────────── */
/* Локальный контейнер прокрутки вместо глобального overflow-x:hidden.
 * scroll-snap даёт карточкам предсказуемые позиции при свайпе, а
 * scrollbar-width:none убирает полосу, которой нет у эталона. */

.rbxportal-hp-rail-scroll {
  display: flex;
  gap: var(--rbxportal-space-sm);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  min-width: 0;
}

.rbxportal-hp-rail-scroll::-webkit-scrollbar {
  display: none;
}

.rbxportal-hp-rail-scroll > * {
  scroll-snap-align: start;
  flex: 0 0 auto;
}

/* Стрелки ленты. На краю получают `disabled` — это состояние, а не скрытие:
 * скрытие меняло бы раскладку в покое. */
.rbxportal-hp-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--rbxportal-radius-pill);
  background: var(--rbxportal-color-surface);
  border: 1px solid var(--rbxportal-color-border-strong);
  color: var(--rbxportal-color-ink-strong);
}

.rbxportal-hp-arrow[disabled] {
  opacity: .4;
  cursor: default;
}

/* ───── ui/src/07-components-data.css ───── */
/* ============================================================================
 * 07 · Данные: рейтинг, fair play, матчи, статистика подвала. [0.21.4].
 *
 * Числа из homepage-style-passport.json:
 *   рейтинг desktop  внешний блок 966×934, контент 876, padding 24,
 *                    строки 58/62, прибавка раскрытой строки ≈154
 *   рейтинг mobile   вкладки x=16 w=358 h=44, строки x=8 w=374,
 *                    верхняя часть 49, нижняя часть метрик 48
 *   fair play desktop 966×342, контент 924×326, колонки 457.77/458.23, gap 8,
 *                    subcard 224.9×118
 *   fair play mobile  панель 390×256, слайд 358×216, бейдж 236×46
 * ==========================================================================*/

/* ── рейтинг ───────────────────────────────────────────────────────────── */

.rbxportal-hp-rating {
  background: var(--rbxportal-color-surface-sunken);
  border-radius: var(--rbxportal-radius-xl);
  padding: var(--rbxportal-space-lg);
  min-width: 0;
}

.rbxportal-hp-rating__intro {
  margin-top: var(--rbxportal-space-xs);
}

/* Полоса вкладок. Активная вкладка прокручивается в видимую область
 * поведенческим слоем — на mobile третья и четвёртая лежат за горизонтальной
 * границей, как и у эталона. */
.rbxportal-hp-rating__tabs {
  display: flex;
  gap: var(--rbxportal-space-lg);
  margin-top: var(--rbxportal-space-md);
  overflow-x: auto;
  scrollbar-width: none;
  min-width: 0;
}

.rbxportal-hp-rating__tabs::-webkit-scrollbar {
  display: none;
}

/* Вкладка — настоящая `button[role=tab]`, а не `div` с tabindex=-1.
 * Это заявленное отличие копии: у донора клавиатурного пути нет. */
.rbxportal-hp-tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding-inline: var(--rbxportal-space-3xs);
  flex: 0 0 auto;
  font-size: var(--rbxportal-font-button-size);
  line-height: var(--rbxportal-font-button-line);
  color: var(--rbxportal-color-ink-muted);
  white-space: nowrap;
  border-radius: var(--rbxportal-radius-xs);
}

.rbxportal-hp-tab[aria-selected='true'] {
  color: var(--rbxportal-color-ink-strong);
  font-weight: var(--rbxportal-font-weight-bold);
}

.rbxportal-hp-tab[aria-selected='true']::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  height: 2px;
  background: var(--rbxportal-color-action);
  border-radius: var(--rbxportal-radius-pill);
}

.rbxportal-hp-rating__list {
  display: flex;
  flex-direction: column;
  gap: var(--rbxportal-space-xs);
  margin-top: var(--rbxportal-space-md);
}

/* Строка рейтинга. Высота НЕ фиксируется числом: паспорт показывает разброс
 * 58/62 в зависимости от бейджа, и жёсткая высота обрезала бы строку с
 * длинным названием. Держат высоту внутренние отступы и высота знака. */
.rbxportal-hp-row {
  background: var(--rbxportal-color-surface);
  border-radius: var(--rbxportal-radius-xl);
  min-width: 0;
}

.rbxportal-hp-row__head {
  display: flex;
  align-items: center;
  gap: var(--rbxportal-space-sm);
  padding: var(--rbxportal-space-sm);
  min-width: 0;
}

.rbxportal-hp-row__rank {
  flex: 0 0 auto;
  width: 20px;
  font-size: var(--rbxportal-font-meta-size);
  line-height: var(--rbxportal-font-meta-line);
  color: var(--rbxportal-color-ink-muted);
  text-align: center;
}

.rbxportal-hp-row__mark {
  width: 92px;
  height: 34px;
}

.rbxportal-hp-row__name {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1 1 auto;
}

.rbxportal-hp-row__title {
  font-size: var(--rbxportal-font-card-heading-size);
  line-height: var(--rbxportal-font-card-heading-line);
  font-weight: var(--rbxportal-font-weight-bold);
  color: var(--rbxportal-color-ink-strong);
}

.rbxportal-hp-row__score {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}

.rbxportal-hp-row__score-value {
  font-size: var(--rbxportal-font-card-heading-size);
  line-height: var(--rbxportal-font-card-heading-line);
  font-weight: var(--rbxportal-font-weight-bold);
  color: var(--rbxportal-color-positive);
}

.rbxportal-hp-row__cta {
  flex: 0 0 auto;
}

/* Контрол раскрытия строки. У эталона это `div` с tabindex=-1 — здесь
 * настоящая кнопка с aria-expanded. Восемь строк раскрываются независимо:
 * открытие одной не закрывает другие. */
.rbxportal-hp-row__toggle {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--rbxportal-radius-pill);
  color: var(--rbxportal-color-ink-muted);
}

.rbxportal-hp-row__toggle svg {
  transition: transform var(--rbxportal-motion-control) var(--rbxportal-motion-easing);
}

.rbxportal-hp-row__toggle[aria-expanded='true'] svg {
  transform: rotate(180deg);
}

/* Панель раскрытия. Наблюдённая desktop-прибавка ≈154 px — это следствие
 * содержимого, поэтому высота задаётся содержимым, а не числом: жёсткие
 * 154 px обрезали бы панель на mobile, где ширина вдвое меньше. */
.rbxportal-hp-row__panel {
  padding: 0 var(--rbxportal-space-sm) var(--rbxportal-space-sm);
  border-top: 1px solid var(--rbxportal-color-border);
  margin-top: var(--rbxportal-space-xs);
  padding-top: var(--rbxportal-space-sm);
}

.rbxportal-hp-row__facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--rbxportal-space-xs);
}

.rbxportal-hp-row__fact {
  background: var(--rbxportal-color-surface-sunken);
  border-radius: var(--rbxportal-radius-md);
  padding: var(--rbxportal-space-xs);
  min-width: 0;
}

/* Промокод: строка + кнопка копирования. Результат копирования объявляется
 * коротким aria-live сообщением — у донора обратной связи нет вовсе. */
.rbxportal-hp-promocode {
  display: flex;
  align-items: center;
  gap: var(--rbxportal-space-xs);
  margin-top: var(--rbxportal-space-xs);
}

.rbxportal-hp-promocode__value {
  font-weight: var(--rbxportal-font-weight-bold);
  color: var(--rbxportal-color-ink-strong);
  letter-spacing: .04em;
  border: 1px dashed var(--rbxportal-color-border-strong);
  border-radius: var(--rbxportal-radius-xs);
  padding: var(--rbxportal-space-3xs) var(--rbxportal-space-xs);
}

/* ── подсказка рейтинга (sticky) ───────────────────────────────────────── */
/* Привязана к КОНТЕЙНЕРУ рейтинга, а не к жёсткому scrollY: паспорт точного
 * порога не доказывает, а привязка к числу рассыпалась бы при любом
 * изменении высоты контента выше. */

.rbxportal-hp-helper {
  position: sticky;
  top: var(--rbxportal-layout-sticky-helper-top);
  z-index: var(--rbxportal-layer-sticky-helper);
  display: flex;
  align-items: center;
  gap: var(--rbxportal-space-xs);
  height: var(--rbxportal-layout-sticky-helper-height);
  margin-bottom: var(--rbxportal-layout-sticky-helper-offset);
  padding: var(--rbxportal-space-xs);
  background: var(--rbxportal-color-surface);
  border: 1px solid var(--rbxportal-color-border-strong);
  border-radius: var(--rbxportal-radius-helper);
  font-size: var(--rbxportal-font-meta-size);
  line-height: var(--rbxportal-font-meta-line);
  color: var(--rbxportal-color-ink);
}

/* ── fair play ─────────────────────────────────────────────────────────── */

.rbxportal-hp-fair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--rbxportal-space-xs);
  background: var(--rbxportal-color-surface-accent);
  border-radius: var(--rbxportal-radius-xl);
  padding: var(--rbxportal-space-xs);
  min-width: 0;
}

.rbxportal-hp-fair__col {
  display: flex;
  flex-direction: column;
  gap: var(--rbxportal-space-sm);
  padding: var(--rbxportal-space-md);
  min-width: 0;
}

.rbxportal-hp-fair__stat {
  font-size: 40px;
  line-height: 44px;
  font-weight: var(--rbxportal-font-weight-bold);
  color: var(--rbxportal-color-action);
}

.rbxportal-hp-fair__subcards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--rbxportal-space-xs);
}

.rbxportal-hp-fair__subcard {
  background: var(--rbxportal-color-surface);
  border-radius: var(--rbxportal-radius-md);
  padding: var(--rbxportal-space-sm);
  min-height: 118px;
  min-width: 0;
}

.rbxportal-hp-fair__quote {
  background: var(--rbxportal-color-surface);
  border-radius: var(--rbxportal-radius-md);
  padding: var(--rbxportal-space-sm);
}

.rbxportal-hp-fair__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--rbxportal-space-xs);
  min-height: 46px;
  padding: var(--rbxportal-space-xs) var(--rbxportal-space-sm);
  background: var(--rbxportal-color-surface);
  border-radius: var(--rbxportal-radius-pill);
  font-size: var(--rbxportal-font-meta-size);
  line-height: var(--rbxportal-font-meta-line);
}

/* Мобильный вариант — один горизонтально переключаемый trust-слайд с тремя
 * индикаторами. Индикаторы существуют в обоих режимах, но на desktop скрыты
 * (12-responsive.css): создавать их скриптом нельзя — в покое разметка
 * обязана совпадать. */
.rbxportal-hp-fair__slides {
  display: none;
}

.rbxportal-hp-fair__dots {
  display: none;
  gap: var(--rbxportal-space-2xs);
  justify-content: center;
  padding-top: var(--rbxportal-space-xs);
}

.rbxportal-hp-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--rbxportal-radius-pill);
  background: var(--rbxportal-color-border-strong);
}

.rbxportal-hp-dot[aria-current='true'] {
  background: var(--rbxportal-color-action);
  width: 16px;
}

/* ── матчи (только mobile) ─────────────────────────────────────────────── */
/* Статичные справочные карточки: ни API, ни таймеров, ни live-индикаторов —
 * матч-центр исключён из объёма проекта. */

.rbxportal-hp-matches {
  display: none;
}

.rbxportal-hp-match {
  width: 288px;
  min-height: 242px;
  display: flex;
  flex-direction: column;
  gap: var(--rbxportal-space-xs);
  background: var(--rbxportal-color-surface);
  border: 1px solid var(--rbxportal-color-border);
  border-radius: var(--rbxportal-radius-lg);
  padding: var(--rbxportal-space-sm);
}

.rbxportal-hp-match__teams {
  display: flex;
  flex-direction: column;
  gap: var(--rbxportal-space-3xs);
}

.rbxportal-hp-match__odds {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--rbxportal-space-2xs);
  margin-top: auto;
}

/* Коэффициент — не контрол: он ничего не открывает и не меняет. Поэтому это
 * `span`, а не кнопка, и tab-порядок он не занимает. */
.rbxportal-hp-match__odd {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  border-radius: var(--rbxportal-radius-sm);
  background: var(--rbxportal-color-surface-inset);
  font-weight: var(--rbxportal-font-weight-bold);
  color: var(--rbxportal-color-ink-strong);
}

/* ───── ui/src/09-components-action.css ───── */
/* ============================================================================
 * 09 · Действие и слои: промо, cookie, мобильное меню, диалог, нижняя
 *      навигация. Задача [0.21.4].
 *
 * Слои по паспорту: cookie 2147483647 · шапка и нижняя навигация 1003 ·
 * overlay меню 1002 · sticky-подсказка 50 · fixed-промо 40.
 * Промо desktop 930×60, mobile 390×60; при высоте 844 промо стоит на
 * top:730, нижняя навигация начинается с 790.
 * ==========================================================================*/

/* ── промо-слоты в потоке ──────────────────────────────────────────────── */
/* Слот 966×192 при креативе 924×160, внутренние отступы 16/36/16/6 —
 * перенесено дословно; на mobile слот 390×232 при креативе 358×200. */

.rbxportal-hp-promo {
  background: var(--rbxportal-color-surface-sunken);
  border-radius: var(--rbxportal-radius-md);
  padding: var(--rbxportal-space-md) var(--rbxportal-space-2xl) var(--rbxportal-space-md) var(--rbxportal-space-2xs);
  min-width: 0;
}

.rbxportal-hp-promo__inner {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--rbxportal-space-md);
  min-height: 160px;
  border-radius: var(--rbxportal-radius-md);
  overflow: hidden;
  background: var(--rbxportal-color-surface-accent);
  min-width: 0;
}

.rbxportal-hp-promo__media {
  position: absolute;
  inset: 0;
}

.rbxportal-hp-promo__media img,
.rbxportal-hp-promo__media picture,
.rbxportal-hp-promo__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.rbxportal-hp-promo__body {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--rbxportal-space-xs);
  padding: var(--rbxportal-space-md);
  min-width: 0;
}

/* Верхний мобильный промо-стрип 390×70 при креативе 390×40. */
.rbxportal-hp-promo--strip {
  display: none;
  padding: var(--rbxportal-space-md) 0;
  background: var(--rbxportal-color-surface-inset);
}

.rbxportal-hp-promo--strip .rbxportal-hp-promo__inner {
  min-height: 40px;
  border-radius: 0;
}

/* Промо в rail — тот же компонент, другой размер слота. */
.rbxportal-hp-promo--rail {
  padding: 0;
  background: transparent;
}

.rbxportal-hp-promo--rail .rbxportal-hp-promo__inner {
  min-height: 296px;
}

.rbxportal-hp-promo--rail-tall .rbxportal-hp-promo__inner {
  min-height: 484px;
}

/* ── фиксированное промо ───────────────────────────────────────────────── */
/* Независимый fixed-слой. Его закрытие НЕ меняет поток документа, якоря,
 * пороги sticky и состояние cookie-панели — это отдельные слои. */

.rbxportal-hp-fixedpromo {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: var(--rbxportal-layer-fixed-promo);
  display: flex;
  justify-content: center;
  pointer-events: none;
}

.rbxportal-hp-fixedpromo__inner {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--rbxportal-space-xs);
  width: min(930px, 100%);
  height: var(--rbxportal-layout-fixed-promo-height);
  padding-inline: var(--rbxportal-space-sm);
  background: var(--rbxportal-color-surface-accent);
  border-top: 1px solid var(--rbxportal-color-border);
  pointer-events: auto;
  min-width: 0;
}

.rbxportal-hp-fixedpromo__close {
  margin-left: auto;
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--rbxportal-radius-pill);
  color: var(--rbxportal-color-ink-muted);
}

/* ── cookie-панель ─────────────────────────────────────────────────────── */
/* Самый верхний слой: у эталона z-index 2147483647. На мобильной ширине она
 * висит поверх нижней панели, поэтому и перехватывает клики — это состояние
 * эталона, а не дефект. Закрытие сохраняется в localStorage под
 * versioned namespaced-ключом, обёрнутым в try/catch. */

.rbxportal-hp-cookie {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: var(--rbxportal-layer-cookie);
  display: flex;
  align-items: center;
  gap: var(--rbxportal-space-sm);
  padding: var(--rbxportal-space-sm) var(--rbxportal-space-md);
  background: var(--rbxportal-color-cookie-surface);
  color: var(--rbxportal-color-ink-inverse);
  font-size: var(--rbxportal-font-meta-size);
  line-height: var(--rbxportal-font-meta-line);
  min-width: 0;
}

.rbxportal-hp-cookie a {
  color: var(--rbxportal-color-ink-inverse);
  text-decoration: underline;
}

.rbxportal-hp-cookie__ok {
  flex: 0 0 auto;
  margin-left: auto;
  height: 32px;
  padding-inline: var(--rbxportal-space-md);
  border: 1px solid var(--rbxportal-color-ink-inverse);
  border-radius: var(--rbxportal-radius-xs);
  color: var(--rbxportal-color-ink-inverse);
  font-weight: var(--rbxportal-font-weight-bold);
}

.rbxportal-hp-cookie__ok:focus-visible {
  outline: 2px solid var(--rbxportal-color-ink-inverse);
  outline-offset: 2px;
}

/* ── нижняя мобильная навигация ────────────────────────────────────────── */
/* 390×54 при эталонном вьюпорте, отступы 8 сверху и снизу, пять пунктов по
 * 78, z-index 1003. Учитывается безопасная зона устройства. */

.rbxportal-hp-bottomnav {
  display: none;
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: var(--rbxportal-layer-bottom-nav);
  height: calc(var(--rbxportal-layout-bottom-nav-height) + env(safe-area-inset-bottom, 0px));
  padding-block: var(--rbxportal-space-xs);
  padding-bottom: calc(var(--rbxportal-space-xs) + env(safe-area-inset-bottom, 0px));
  background: var(--rbxportal-color-surface);
  border-top: 1px solid var(--rbxportal-color-border);
}

.rbxportal-hp-bottomnav__list {
  display: flex;
  height: 100%;
}

.rbxportal-hp-bottomnav__item {
  flex: 1 1 var(--rbxportal-layout-bottom-nav-item);
  min-width: 0;
}

.rbxportal-hp-bottomnav__link {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  height: 100%;
  width: 100%;
  font-size: 10px;
  line-height: 12px;
  color: var(--rbxportal-color-ink-muted);
}

.rbxportal-hp-bottomnav__link[aria-current='page'] {
  color: var(--rbxportal-color-action);
}

/* ── мобильное меню ────────────────────────────────────────────────────── */
/* Полноэкранный modal-like overlay: role=dialog, aria-modal, отдельная кнопка
 * закрытия, вложенные группы и возврат к корню. Фон получает inert, прокрутка
 * html блокируется с сохранением scrollY. */

.rbxportal-hp-menu {
  position: fixed;
  inset: 0;
  z-index: var(--rbxportal-layer-menu-overlay);
  display: flex;
  flex-direction: column;
  background: var(--rbxportal-color-surface);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.rbxportal-hp-menu__head {
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  gap: var(--rbxportal-space-sm);
  padding: var(--rbxportal-space-sm) var(--rbxportal-space-md);
  background: var(--rbxportal-color-surface);
  border-bottom: 1px solid var(--rbxportal-color-border);
}

.rbxportal-hp-menu__back,
.rbxportal-hp-menu__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  border-radius: var(--rbxportal-radius-md);
  color: var(--rbxportal-color-ink-strong);
}

.rbxportal-hp-menu__close {
  margin-left: auto;
}

.rbxportal-hp-menu__body {
  padding: var(--rbxportal-space-md);
}

.rbxportal-hp-menu__group + .rbxportal-hp-menu__group {
  margin-top: var(--rbxportal-space-xs);
}

.rbxportal-hp-menu__trigger,
.rbxportal-hp-menu__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--rbxportal-space-sm);
  width: 100%;
  min-height: 48px;
  padding: var(--rbxportal-space-xs) var(--rbxportal-space-sm);
  border-radius: var(--rbxportal-radius-md);
  color: var(--rbxportal-color-ink-strong);
  font-size: var(--rbxportal-font-body-size);
  line-height: var(--rbxportal-font-body-line);
}

.rbxportal-hp-menu__trigger:hover,
.rbxportal-hp-menu__link:hover {
  background: var(--rbxportal-color-surface-inset);
  text-decoration: none;
}

/* ── полноэкранный диалог spotlight ────────────────────────────────────── */

.rbxportal-hp-dialog {
  position: fixed;
  inset: 0;
  z-index: var(--rbxportal-layer-dialog);
  display: flex;
  flex-direction: column;
  background: rgba(0, 0, 0, .92);
  color: var(--rbxportal-color-ink-inverse);
}

.rbxportal-hp-dialog__bar {
  display: flex;
  align-items: center;
  gap: var(--rbxportal-space-sm);
  padding: var(--rbxportal-space-sm) var(--rbxportal-space-md);
}

.rbxportal-hp-dialog__counter {
  font-size: var(--rbxportal-font-meta-size);
  line-height: var(--rbxportal-font-meta-line);
}

.rbxportal-hp-dialog__close {
  margin-left: auto;
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--rbxportal-radius-md);
  color: var(--rbxportal-color-ink-inverse);
}

.rbxportal-hp-dialog__close:focus-visible,
.rbxportal-hp-dialog__nav:focus-visible {
  outline: 2px solid var(--rbxportal-color-ink-inverse);
  outline-offset: 2px;
}

.rbxportal-hp-dialog__stage {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--rbxportal-space-sm);
  padding: var(--rbxportal-space-md);
  min-height: 0;
}

.rbxportal-hp-dialog__figure {
  max-width: min(100%, 720px);
}

.rbxportal-hp-dialog__nav {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--rbxportal-radius-pill);
  border: 1px solid rgba(255, 255, 255, .4);
  color: var(--rbxportal-color-ink-inverse);
}

/* Блокировка прокрутки фона. Класс ставится на <html> поведенческим слоем и
 * снимается при закрытии; scrollY сохраняется и восстанавливается там же. */
.rbxportal-hp-locked,
.rbxportal-hp-locked body {
  overflow: hidden;
}

/* ───── ui/src/10-components-content.css ───── */
/* ============================================================================
 * 10 · Содержательные секции: эксперты, бонусы, отзывы, новости, блоги, гид,
 *      spotlight, популярное, подвал. Задача [0.21.4].
 *
 * Числа из homepage-style-passport.json (desktop / mobile):
 *   эксперты   300 / 288, gap 12 / 8, медиа 300×336 / 288×336
 *   бонусы     300×514 / 288×514, gap 12 / 8, медиа 284×152 / 272×152,
 *              кнопка 40, подвал карточки 52
 *   отзывы     300×272 / 288×272, цитата 276×168 / 264×168, тень 0 2px 4px
 *   новости    feature 596×356, обычная 284×172, mobile 342×172
 *   блоги      144×176 gap 12 / ячейки 167×170 сеткой 2×4
 *   гид        панель 926×328, колонки 422/444.8, карточка 444.8×96,
 *              медиа 108×80 / панель 358×518, карточка 342×72, медиа 76×56
 *   spotlight  300×328 / 288, gap 12 / 8
 *   популярное сетка 3×2 по 300, gap 12, padding 16 / ширина 358, gap 8
 * ==========================================================================*/

/* ── общая сетка карточек ──────────────────────────────────────────────── */

.rbxportal-hp-grid {
  display: grid;
  gap: var(--rbxportal-space-sm);
  min-width: 0;
}

.rbxportal-hp-grid--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.rbxportal-hp-grid--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* ── эксперты ──────────────────────────────────────────────────────────── */

.rbxportal-hp-expert__media {
  height: 336px;
  border-radius: var(--rbxportal-radius-lg) var(--rbxportal-radius-lg) 0 0;
  background: var(--rbxportal-color-surface-accent);
}

/* ── бонусы ────────────────────────────────────────────────────────────── */
/* Карточка держит паспортную высоту 514: ряд обязан стоять по одной линии,
 * иначе разная длина условий разваливает сетку. Кнопка внизу — 40,
 * служебная подпись — 52. */

.rbxportal-hp-bonus {
  min-height: 514px;
}

.rbxportal-hp-bonus__media {
  height: 152px;
  border-radius: 0;
}

.rbxportal-hp-bonus__amount {
  font-size: var(--rbxportal-font-heading-size);
  line-height: var(--rbxportal-font-heading-line);
  font-weight: var(--rbxportal-font-weight-bold);
  color: var(--rbxportal-color-ink-strong);
}

.rbxportal-hp-bonus__mark {
  width: 64px;
  height: 24px;
}

.rbxportal-hp-bonus__note {
  min-height: 52px;
  padding: var(--rbxportal-space-xs) var(--rbxportal-space-sm);
  font-size: var(--rbxportal-font-meta-size);
  line-height: var(--rbxportal-font-meta-line);
  color: var(--rbxportal-color-ink-muted);
}

/* ── отзывы ────────────────────────────────────────────────────────────── */

.rbxportal-hp-review {
  min-height: 272px;
  box-shadow: var(--rbxportal-shadow-review);
  border: 0;
}

.rbxportal-hp-review__quote {
  min-height: 168px;
  background: var(--rbxportal-color-surface-sunken);
  border-radius: var(--rbxportal-radius-md);
  padding: var(--rbxportal-space-sm);
  margin: var(--rbxportal-space-sm);
  min-width: 0;
}

.rbxportal-hp-review__head {
  display: flex;
  align-items: center;
  gap: var(--rbxportal-space-xs);
  padding: 0 var(--rbxportal-space-sm) var(--rbxportal-space-sm);
  min-width: 0;
}

.rbxportal-hp-review__avatar {
  width: 32px;
  height: 32px;
  border-radius: var(--rbxportal-radius-pill);
  overflow: hidden;
  flex: 0 0 auto;
}

.rbxportal-hp-stars {
  display: inline-flex;
  gap: 2px;
  color: var(--rbxportal-color-positive);
}

/* ── новости ───────────────────────────────────────────────────────────── */

.rbxportal-hp-news__layout {
  display: grid;
  grid-template-columns: minmax(0, 596px) minmax(0, 1fr);
  gap: var(--rbxportal-space-sm);
  align-items: start;
}

.rbxportal-hp-news__feature-media {
  height: 356px;
  border-radius: var(--rbxportal-radius-lg) var(--rbxportal-radius-lg) 0 0;
}

.rbxportal-hp-news__rest {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: var(--rbxportal-space-sm);
}

.rbxportal-hp-news__media {
  height: 172px;
  border-radius: var(--rbxportal-radius-lg) var(--rbxportal-radius-lg) 0 0;
}

/* Скрытая вкладками карточка убирается атрибутом hidden, а не классом:
 * состояние обязано читаться скринридером и без CSS. */

/* ── блоги ─────────────────────────────────────────────────────────────── */

.rbxportal-hp-blogs {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 144px;
  gap: var(--rbxportal-space-sm);
  overflow-x: auto;
  scrollbar-width: none;
  scroll-snap-type: x mandatory;
  min-width: 0;
}

.rbxportal-hp-blogs::-webkit-scrollbar {
  display: none;
}

.rbxportal-hp-blog {
  min-height: 176px;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: var(--rbxportal-space-2xs);
  align-items: center;
  text-align: center;
  padding: var(--rbxportal-space-sm);
  background: var(--rbxportal-color-surface);
  border: 1px solid var(--rbxportal-color-border);
  border-radius: var(--rbxportal-radius-lg);
  min-width: 0;
}

.rbxportal-hp-blog__avatar {
  width: 56px;
  height: 56px;
  border-radius: var(--rbxportal-radius-pill);
  overflow: hidden;
  flex: 0 0 auto;
}

/* ── гид ───────────────────────────────────────────────────────────────── */

.rbxportal-hp-guide {
  display: grid;
  grid-template-columns: minmax(0, 422px) minmax(0, 444.8px);
  gap: var(--rbxportal-space-sm);
  min-height: 328px;
  align-items: start;
}

.rbxportal-hp-guide__art {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 240px;
}

.rbxportal-hp-guide__list {
  display: flex;
  flex-direction: column;
  gap: var(--rbxportal-space-xs);
  min-width: 0;
}

.rbxportal-hp-guide__item {
  display: flex;
  align-items: center;
  gap: var(--rbxportal-space-sm);
  min-height: 96px;
  padding: var(--rbxportal-space-xs);
  background: var(--rbxportal-color-surface);
  border-radius: var(--rbxportal-radius-md);
  min-width: 0;
}

.rbxportal-hp-guide__media {
  width: 108px;
  height: 80px;
}

/* ── spotlight ─────────────────────────────────────────────────────────── */

.rbxportal-hp-spotlight__media {
  height: 328px;
  border-radius: var(--rbxportal-radius-lg);
}

/* Открывашка галереи — кнопка на всю карточку: у эталона это тоже одно
 * действие на весь блок, но там оно недоступно с клавиатуры. */
.rbxportal-hp-spotlight__open {
  display: block;
  width: 100%;
  text-align: left;
  border-radius: var(--rbxportal-radius-lg);
  min-width: 0;
}

/* ── популярное ────────────────────────────────────────────────────────── */

.rbxportal-hp-popular {
  background: var(--rbxportal-color-surface-sunken);
  border-radius: var(--rbxportal-radius-xl);
  padding: var(--rbxportal-space-md);
}

.rbxportal-hp-popular__item {
  display: flex;
  gap: var(--rbxportal-space-xs);
  background: var(--rbxportal-color-surface);
  border-radius: var(--rbxportal-radius-md);
  padding: var(--rbxportal-space-sm);
  min-width: 0;
}

.rbxportal-hp-popular__emblem {
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
}

.rbxportal-hp-popular__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rbxportal-space-3xs) var(--rbxportal-space-xs);
  margin-top: var(--rbxportal-space-3xs);
}

/* ── подвал ────────────────────────────────────────────────────────────── */
/* Подвал на mobile НЕ сокращается: app-регион, статистика, trust, legal,
 * social, награды, партнёры, аффилиации и издатель остаются доступны. */

.rbxportal-hp-foot__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--rbxportal-space-lg);
  min-width: 0;
}

.rbxportal-hp-foot__block {
  display: flex;
  flex-direction: column;
  gap: var(--rbxportal-space-xs);
  min-width: 0;
}

/* Статистика на mobile прокручивается ВНУТРИ СЕБЯ, а не выносит страницу. */
.rbxportal-hp-foot__stats {
  display: flex;
  gap: var(--rbxportal-space-sm);
  overflow-x: auto;
  scrollbar-width: none;
  min-width: 0;
}

.rbxportal-hp-foot__stats::-webkit-scrollbar {
  display: none;
}

.rbxportal-hp-foot__stat {
  flex: 0 0 auto;
  min-width: 140px;
  background: var(--rbxportal-color-surface);
  border-radius: var(--rbxportal-radius-md);
  padding: var(--rbxportal-space-sm);
}

.rbxportal-hp-foot__stat-value {
  font-size: var(--rbxportal-font-card-heading-size);
  line-height: var(--rbxportal-font-card-heading-line);
  font-weight: var(--rbxportal-font-weight-bold);
  color: var(--rbxportal-color-ink-strong);
}

.rbxportal-hp-foot__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--rbxportal-space-xs) var(--rbxportal-space-md);
}

.rbxportal-hp-foot__marks {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rbxportal-space-xs);
  align-items: center;
}

.rbxportal-hp-foot__mark {
  width: 72px;
  height: 32px;
}

.rbxportal-hp-foot__app {
  display: flex;
  gap: var(--rbxportal-space-sm);
  align-items: center;
  background: var(--rbxportal-color-surface);
  border-radius: var(--rbxportal-radius-lg);
  padding: var(--rbxportal-space-sm);
  min-width: 0;
}

.rbxportal-hp-foot__qr {
  width: 88px;
  height: 88px;
  flex: 0 0 auto;
}

.rbxportal-hp-foot__legal {
  margin-top: var(--rbxportal-space-lg);
  padding-top: var(--rbxportal-space-md);
  border-top: 1px solid var(--rbxportal-color-border);
  display: flex;
  flex-direction: column;
  gap: var(--rbxportal-space-xs);
}

/* ───── ui/src/12-responsive.css ───── */
/* ============================================================================
 * 12 · Адаптивность. Задача [0.21.4].
 *
 * Три режима:
 *   mobile   0–767px    — один поток, мобильные вставки, нижняя навигация
 *   compact  768–1359px — один основной поток, rail-материалы переезжают в
 *                         утверждённые мобильные позиции
 *   wide     1360px+    — двухколоночная сетка паспорта
 *
 * 1360px — РЕАЛИЗАЦИОННОЕ значение, а не измеренное: паспорт доказывает
 * только 390 и 1440. Оно вынесено в token-layer и обязано проверяться
 * снимками при приёмке ([0.21.5]).
 *
 * Базовые правила выше написаны под wide; сужение идёт сверху вниз, чтобы
 * mobile-режим не приходилось «отменять» на каждой ширине.
 * ==========================================================================*/

/* ── compact: 768–1359 ─────────────────────────────────────────────────── */
@media (max-width: 1359px) {
  .rbxportal-hp-cols {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Rail перестаёт быть колонкой и встраивается в основной поток в тех же
   * позициях, что и мобильные вставки. Отдельной разметки для этого нет:
   * одна композиция — одно дерево. */
  .rbxportal-hp-rail {
    margin-top: var(--rbxportal-space-xl);
  }

  .rbxportal-hp-rail > * + * {
    margin-top: var(--rbxportal-space-xl);
  }

  .rbxportal-hp-main {
    padding-inline: 0;
  }

  /* Sticky-подсказка держится на контейнере рейтинга и в один поток, но её
   * нижний отступ на узких экранах избыточен. */
  .rbxportal-hp-helper {
    margin-bottom: var(--rbxportal-space-lg);
  }

  .rbxportal-hp-news__layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .rbxportal-hp-news__rest {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .rbxportal-hp-guide {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ── mobile: 0–767 ─────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  /* Типографика мобильного режима: заголовок 20/24, карточный 14/16,
   * кнопка 12/12. Переключаются роли, а не классы. */
  .rbxportal {
    --rbxportal-font-heading-size: var(--rbxportal-font-heading-size-mobile);
    --rbxportal-font-heading-line: var(--rbxportal-font-heading-line-mobile);
    --rbxportal-font-card-heading-size: var(--rbxportal-font-card-heading-size-mobile);
    --rbxportal-font-card-heading-line: var(--rbxportal-font-card-heading-line-mobile);
    --rbxportal-font-button-size: var(--rbxportal-font-button-size-mobile);
    --rbxportal-font-button-line: var(--rbxportal-font-button-line-mobile);
    /* Шапка mobile 52 вместо 98 — роль одна, значение другое. */
    --rbxportal-layout-header-height: var(--rbxportal-layout-header-height-mobile);
    --rbxportal-space-sm: 8px;
  }

  .rbxportal-hp-band {
    padding-inline: var(--rbxportal-layout-mobile-edge);
  }

  /* ── Строка рейтинга: мобильная композиция паспорта ───────────────────
   * На эталоне строка mobile — ДВЕ полосы (верх 49 px + метрики 48 px),
   * а не одна десктопная: `x=8; width=374`, варианты высоты 98/112 px.
   * DOM один на оба режима — перестроение делает только grid, порядок
   * узлов не меняется.
   *
   * Без этого правила десктопная однополосная строка не влезала в 390 px:
   * CTA 117 px и toggle 28 px выдавливали содержимое до right=424 px, из-за
   * чего Chrome расширял layout viewport до 425 px и вся мобильная вёрстка
   * мерилась не по 390. Правка снимает именно эту причину, а не маскирует
   * её глобальным overflow-x. */
  /* Панель рейтинга на mobile — во всю ширину viewport-контейнера (390),
   * а не внутри отступов полосы: паспорт задаёт вкладки x=16; width=358 и
   * строки x=8; width=374, то есть строки ШИРЕ вкладок и почти касаются
   * края. Поэтому боковой отступ полосы компенсируется, а внутренние
   * отступы назначаются каждому уровню отдельно. */
  .rbxportal-hp-rating {
    padding-inline: 0;
    margin-inline: calc(-1 * var(--rbxportal-layout-mobile-edge));
  }

  .rbxportal-hp-rating__tabs {
    /* Паспорт: x=16; width=358; height=44. Именно margin, а не padding:
     * паспорт задаёт габарит самой ленты вкладок, а не её содержимого. */
    margin-inline: var(--rbxportal-layout-mobile-edge);
    height: 44px;
  }

  .rbxportal-hp-rating__list {
    /* x=8; width=374 */
    padding-inline: var(--rbxportal-space-sm);
  }

  .rbxportal-hp-row {
    max-width: 100%;
  }

  /* ── Ленты с подглядыванием: бонусы, отзывы, эксперты, spotlight ──────
   * Паспорт даёт этим карточкам на mobile ширину 288 px при контентной
   * полосе 358 px. Карточка УЖЕ полосы — значит это горизонтальная лента,
   * где виден край следующей карточки (358 − 288 = 70 px), а не колонка:
   * в колонке карточка занимала бы все 358 px.
   *
   * Секции popular (358 px), guide и blogs (сетка 2×4) сюда НЕ входят —
   * у них паспортная ширина равна полосе, поэтому они остаются потоком. */
  .rbxportal-hp-grid--railmob {
    display: flex;
    grid-template-columns: none;
    gap: var(--rbxportal-space-sm);
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    min-width: 0;
    /* Лента идёт до края экрана, а карточки начинаются от отступа полосы:
     * иначе последняя карточка упирается в край без «воздуха». */
    margin-inline: calc(-1 * var(--rbxportal-layout-mobile-edge));
    padding-inline: var(--rbxportal-layout-mobile-edge);
    /* Ширина задаётся ЯВНО. Flex-контейнер без заданной ширины растёт по
     * содержимому и распирает документ вместо того, чтобы прокручиваться
     * внутри себя: тогда overflow-x просто не срабатывает. */
    box-sizing: border-box;
    width: calc(100% + 2 * var(--rbxportal-layout-mobile-edge));
  }

  .rbxportal-hp-grid--railmob::-webkit-scrollbar {
    display: none;
  }

  .rbxportal-hp-grid--railmob > * {
    flex: 0 0 var(--rbxportal-layout-mobile-card);
    width: var(--rbxportal-layout-mobile-card);
    max-width: var(--rbxportal-layout-mobile-card);
    scroll-snap-align: start;
  }

  .rbxportal-hp-row__head {
    display: grid;
    grid-template-columns: 20px auto minmax(0, 1fr) 28px;
    grid-template-rows: 49px 49px;
    grid-template-areas:
      'rank mark name toggle'
      'score score cta cta';
    align-items: center;
    column-gap: var(--rbxportal-space-sm);
    row-gap: 0;
    padding-block: 0;
  }

  .rbxportal-hp-row__rank {
    grid-area: rank;
  }

  .rbxportal-hp-row__mark {
    grid-area: mark;
  }

  .rbxportal-hp-row__name {
    grid-area: name;
    min-width: 0;
  }

  /* Длинное название не должно распирать колонку: усечение по одной
   * строке — свойство самой ячейки, а не запрет переполнения у страницы. */
  .rbxportal-hp-row__title,
  .rbxportal-hp-row__name .rbxportal-hp-meta {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .rbxportal-hp-row__toggle {
    grid-area: toggle;
    justify-self: end;
  }

  /* Нижняя полоса метрик: оценка слева, действие справа. */
  .rbxportal-hp-row__score {
    grid-area: score;
    flex-direction: row;
    align-items: baseline;
    justify-content: flex-start;
    gap: var(--rbxportal-space-sm);
    min-width: 0;
  }

  .rbxportal-hp-row__cta {
    grid-area: cta;
    justify-self: end;
    min-width: 0;
  }

  /* Вторая строка шапки на mobile не показывается: её место занимают
   * бургер, нижняя навигация и overlay-меню. */
  .rbxportal-hp-header__row--nav {
    display: none;
  }

  .rbxportal-hp-header {
    height: var(--rbxportal-layout-header-height-mobile);
  }

  .rbxportal-hp-header-spacer {
    height: var(--rbxportal-layout-header-height-mobile);
  }

  /* Мобильные вставки паспорта: верхний промо-стрип, карточки матчей,
   * нижняя навигация. В покое на desktop они не выводятся вовсе. */
  .rbxportal-hp-promo--strip {
    display: block;
  }

  .rbxportal-hp-matches {
    display: block;
  }

  .rbxportal-hp-bottomnav {
    display: block;
  }

  /* Нижняя панель перекрывает конец документа — поток получает компенсацию,
   * иначе последние строки подвала недостижимы. */
  .rbxportal-hp-tail {
    height: calc(var(--rbxportal-layout-document-tail-mobile)
      + var(--rbxportal-layout-bottom-nav-height)
      + env(safe-area-inset-bottom, 0px));
  }

  /* Fair play: две колонки превращаются в один trust-слайд с тремя
   * индикаторами. Слайды и индикаторы уже есть в разметке — здесь они
   * только показываются. */
  .rbxportal-hp-fair {
    grid-template-columns: minmax(0, 1fr);
  }

  .rbxportal-hp-fair__col--secondary {
    display: none;
  }

  .rbxportal-hp-fair__slides {
    display: flex;
    gap: var(--rbxportal-space-xs);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    min-width: 0;
  }

  .rbxportal-hp-fair__slides::-webkit-scrollbar {
    display: none;
  }

  .rbxportal-hp-fair__slide {
    flex: 0 0 100%;
    scroll-snap-align: start;
    min-height: 216px;
    background: var(--rbxportal-color-surface);
    border-radius: var(--rbxportal-radius-md);
    padding: var(--rbxportal-space-sm);
    min-width: 0;
  }

  .rbxportal-hp-fair__dots {
    display: flex;
  }

  /* Сетки: карточные ряды становятся горизонтальными лентами либо
   * колонкой — как на эталоне. */
  .rbxportal-hp-grid--3,
  .rbxportal-hp-grid--2 {
    grid-template-columns: minmax(0, 1fr);
  }

  .rbxportal-hp-news__rest {
    grid-template-columns: minmax(0, 1fr);
  }

  .rbxportal-hp-news__feature-media,
  .rbxportal-hp-news__media {
    height: 172px;
  }

  /* Блоги: сетка 2×4 вместо горизонтальной ленты. */
  .rbxportal-hp-blogs {
    grid-auto-flow: row;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-columns: auto;
    overflow-x: visible;
    gap: var(--rbxportal-space-xs);
  }

  .rbxportal-hp-blog {
    min-height: 170px;
  }

  .rbxportal-hp-guide__item {
    min-height: 72px;
  }

  .rbxportal-hp-guide__media {
    width: 76px;
    height: 56px;
  }

  .rbxportal-hp-expert__media,
  .rbxportal-hp-spotlight__media {
    height: 328px;
  }

  .rbxportal-hp-foot__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Промо в потоке: слот 390×232 при креативе 358×200. */
  .rbxportal-hp-promo {
    padding: var(--rbxportal-space-md);
  }

  .rbxportal-hp-promo__inner {
    min-height: 200px;
  }

  /* Sticky-подсказка на mobile: высота 44, нижний отступ 130. */
  .rbxportal-hp-helper {
    height: var(--rbxportal-layout-sticky-helper-height-mobile);
    margin-bottom: var(--rbxportal-layout-sticky-helper-offset-mobile);
  }

  /* Фиксированное промо стоит НАД нижней навигацией: при вьюпорте 844
   * промо занимает 730..790, навигация начинается с 790. */
  .rbxportal-hp-fixedpromo {
    bottom: calc(var(--rbxportal-layout-bottom-nav-height) + env(safe-area-inset-bottom, 0px));
  }

  .rbxportal-hp-cookie {
    flex-wrap: wrap;
  }

  .rbxportal-hp-cookie__ok {
    margin-left: 0;
  }
}

/* ── очень узкие экраны ────────────────────────────────────────────────── */
/* 320px — контрольная ширина проверки. Боковые отступы сжимаются до
 * compact_edge_padding паспорта, чтобы контент не выносило за вьюпорт. */
@media (max-width: 359px) {
  .rbxportal-hp-band {
    padding-inline: var(--rbxportal-layout-mobile-edge-compact);
  }

  .rbxportal-hp-match {
    width: 100%;
  }
}

/* ── печать ────────────────────────────────────────────────────────────── */
/* Фиксированные слои на печати не нужны и перекрывают содержимое. */
@media print {
  .rbxportal-hp-header,
  .rbxportal-hp-bottomnav,
  .rbxportal-hp-fixedpromo,
  .rbxportal-hp-cookie,
  .rbxportal-hp-helper {
    display: none !important;
  }
}