/*
  Deterministic beautiful-site shell chrome (header burger, drawer, breadcrumbs, footer).
  Loaded after main.css; uses theme CSS variables from the LLM-generated palette.
*/

/* Reference logo ratio (mostbeteg.app: width="800" height="128") */
body.mb-site {
  margin: 0;
  --mb-logo-ratio: 800 / 128;
  --mb-logo-header-height: 40px;
  --mb-logo-footer-max-width: 24%;
  --mb-logo-footer-max-cap: 30%;
}

/* Shell chrome typography — header/footer live outside .mb-article after convert. */
body.mb-site {
  --mb-font: var(
    --mb-font,
    "Inter",
    "Noto Sans",
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Arial,
    sans-serif
  );
}

body.mb-site,
body.mb-site .mb-site-header,
body.mb-site .mb-page-strip,
body.mb-site .mb-site-footer,
body.mb-site .mb-site-drawer,
body.mb-site .mb-site-drawer__panel {
  font-family: var(--mb-font);
}

/* Burger toggle */
body.mb-site .mb-site-burger {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  border: 1px solid var(--mb-border, rgba(227, 178, 87, 0.28));
  border-radius: var(--mb-radius-sm, 12px);
  background: rgba(0, 0, 0, 0.22);
  color: var(--mb-text, #fff6dc);
  cursor: pointer;
}

body.mb-site .mb-site-burger__bar {
  display: block;
  width: 20px;
  height: 2px;
  margin-inline: auto;
  border-radius: 999px;
  background: currentColor;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

body.mb-site.mb-site-nav-open .mb-site-burger__bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

body.mb-site.mb-site-nav-open .mb-site-burger__bar:nth-child(2) {
  opacity: 0;
}

body.mb-site.mb-site-nav-open .mb-site-burger__bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Off-canvas drawer — viewport-sized overlay (header backdrop-filter creates a fixed containing block). */
body.mb-site .mb-site-drawer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  box-sizing: border-box;
  z-index: 1200;
  display: flex;
  justify-content: flex-end;
  /* Clip the closed panel: it rests at translateX(100%), i.e. one panel-width past
     the right edge. The header's backdrop-filter makes this "fixed" box a containing
     block, so that offset counted toward document scroll width and every page had a
     horizontal scrollbar with a strip of empty space beside the content. */
  overflow: hidden;
  pointer-events: none;
  visibility: hidden;
  background: color-mix(in srgb, var(--mb-panel, #040201) 55%, transparent);
  opacity: 0;
  transition: opacity 0.22s ease, visibility 0.22s ease;
}

body.mb-site.mb-site-nav-open .mb-site-drawer {
  pointer-events: auto;
  visibility: visible;
  opacity: 1;
}

body.mb-site .mb-site-drawer__panel {
  width: min(100%, 320px);
  max-width: 100%;
  height: 100%;
  min-height: 100dvh;
  box-sizing: border-box;
  overflow: auto;
  padding: clamp(18px, 4vw, 28px);
  color: var(--mb-text, #fff6dc);
  /* Opaque base under the gradient: theme panels carry alpha (KZ ships
     --mb-panel: rgba(45,13,8,.92) / --mb-panel-2: .86), so the open menu let the
     hero art and the header CTA show through it. */
  background-color: var(--mb-bg, #120a08);
  background-image:
    linear-gradient(
      180deg,
      var(--mb-panel, var(--mb-panel-2, rgba(20, 16, 24, 0.98))),
      var(--mb-panel-2, var(--mb-panel, rgba(12, 10, 16, 0.88)))
    );
  border-inline-start: 1px solid var(--mb-border, rgba(227, 178, 87, 0.28));
  box-shadow: var(--mb-shadow, 0 22px 70px rgba(0, 0, 0, 0.42));
  transform: translateX(100%);
  transition: transform 0.22s ease;
}

body.mb-site[dir="rtl"] .mb-site-drawer__panel {
  transform: translateX(-100%);
}

/* Обвязка урду-страницы зеркалится вместе с самой страницей. На mostbetdownloadapk.pk шаг 80
   оставил у шапки, крошек, подвала и выдвижного меню `direction: ltr` (у остальных шести
   сайтов там `rtl`): меню подвала шло слева направо, и ссылка на главную — первая в разметке —
   читалась у урду-читателя последней, вопреки правилу заказчика «главная всегда первый пункт».
   Там, где обвязка уже `rtl`, правило ничего не меняет; английские страницы идут с
   `dir="ltr"` и не затрагиваются. */
[dir="rtl"] body.mb-site :is(.mb-site-header, .mb-page-strip, .mb-site-footer, .mb-site-drawer) {
  direction: rtl !important;
}

body.mb-site.mb-site-nav-open .mb-site-drawer__panel {
  transform: translateX(0);
}

/* Reset inline dropdown rules from main.css — shell owns off-canvas layout */
body.mb-site .mb-site-drawer {
  inset: unset !important;
  top: 0 !important;
  left: 0 !important;
  right: auto !important;
  bottom: auto !important;
  width: 100vw !important;
  height: 100dvh !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  max-width: none !important;
  min-width: 0 !important;
  margin-inline: 0 !important;
  margin-block: 0 !important;
  box-shadow: none !important;
  transform: none !important;
  /* Was `visible !important`, which let the closed panel (translateX(100%))
     stick out one panel-width past the right edge and stretch document scroll
     width — a horizontal scrollbar on every page. The panel scrolls itself. */
  overflow: hidden !important;
  /* The open menu must outrank anything the theme paints. main.css is generated
     per site, so its stacking values vary (this run alone ships 50, 999, 1000,
     1200 and 9999) — the shell's plain `z-index: 1200` only held by luck, and a
     theme rule at 1200 wins on DOM order alone. Pin it above every theme value. */
  z-index: 999999 !important;
}

body.mb-site .mb-site-drawer__nav {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

body.mb-site .mb-site-drawer__nav a {
  display: block;
  padding: 12px 14px;
  border-radius: var(--mb-radius-sm, 12px);
  color: var(--mb-text-soft, #ead8b1);
  text-decoration: none;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  border: 1px solid transparent;
}

body.mb-site .mb-site-drawer__nav a:hover,
body.mb-site .mb-site-drawer__nav a:focus-visible {
  color: var(--mb-gold-2, #ffd985);
  border-color: var(--mb-border, rgba(227, 178, 87, 0.28));
  background: color-mix(
    in srgb,
    var(--mb-gold-2, var(--mb-gold, var(--mb-primary, #ffd985))) 8%,
    transparent
  );
}

body.mb-site .mb-site-drawer__nav a[aria-current="page"] {
  color: var(--mb-teal, var(--mb-primary, var(--mb-red, #63ded2)));
  border-color: color-mix(
    in srgb,
    var(--mb-teal, var(--mb-primary, var(--mb-red, #63ded2))) 35%,
    transparent
  );
  background: color-mix(
    in srgb,
    var(--mb-teal, var(--mb-primary, var(--mb-red, #63ded2))) 10%,
    transparent
  );
}

/* Header layout: logo left, actions right (override theme mobile column stack) */
body.mb-site .mb-site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(10px, 2vw, 18px);

  /* Same container geometry as .mb-page-strip__inner below, and for one reason:
     the logo's left edge and the breadcrumbs' left edge must land on one line.
     The strip is pinned here in shell.css, but main.css is LLM-authored per site
     and drifts — it wrote `width: min(100%, 1120px)` + `padding-inline:
     clamp(1rem, 4vw, 1.5rem)` for the header, which puts the logo 24px to the
     right of the crumbs at desktop. Pinning only one of the two containers is
     what created the gap, so both are pinned. padding-block is deliberately
     left to the theme. */
  width: 100%;
  max-width: calc(
    var(--mb-container, 1120px) + var(--mb-page-pad, 28px) + var(--mb-page-pad, 28px)
  );
  margin-inline: auto;
  padding-inline: var(--mb-page-pad, clamp(16px, 3.4vw, 28px));
}

body.mb-site .mb-site-brand {
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

body.mb-site .mb-site-header .mb-site-brand__logo {
  display: block;
  max-height: var(--mb-logo-header-height);
  max-width: 100%;
  width: auto;
  height: auto;
  aspect-ratio: var(--mb-logo-ratio);
  object-fit: contain;

  /* Логотип-PNG несёт собственную прозрачную кайму, поэтому его коробка
     выравнена по контейнеру, а видимая надпись — нет. Кайма пропорциональна
     размеру отрисовки: на мобильной (82px) это 2px и незаметно, на десктопе
     (250px) — 7px, и это видно.

     Проценты в `transform` считаются от собственной коробки элемента, а не от
     родителя, поэтому одно значение верно на любом размере. Величину измеряет
     `sitegen/logo_bleed.py` из самого файла и дописывает переменную к копии
     этого файла при сборке — поменяется логотип, поменяется и компенсация.
     Запасное значение 0% означает «не сдвигать». */
  transform: translateX(calc(-1 * var(--mb-logo-bleed-inline, 0%)));
}

body.mb-site .mb-site-footer__brand {
  display: block;
  flex-shrink: 0;
  width: min(var(--mb-logo-footer-max-width, 24%), var(--mb-logo-footer-max-cap, 30%));
  max-width: min(var(--mb-logo-footer-max-width, 24%), var(--mb-logo-footer-max-cap, 30%));
}

body.mb-site .mb-site-footer .mb-site-brand__logo {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: var(--mb-logo-ratio);
  max-width: none;
  object-fit: contain;
}

body.mb-site .mb-site-header__actions {
  display: inline-flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 10px;
  flex: 0 0 auto;
  flex-shrink: 0;
}

/* Header CTA — deterministic pill button (LLM main.css may omit .mb-site-btn). */
body.mb-site .mb-site-btn,
body.mb-site .mb-site-drawer__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  min-width: 0;
  padding: 11px 18px;
  border-radius: 999px;
  border: 1px solid color-mix(
    in srgb,
    var(--mb-teal, var(--mb-primary, var(--mb-red, #63ded2))) 45%,
    transparent
  );
  color: var(--mb-on-accent, var(--mb-btn-text, #09100f));
  background: linear-gradient(
    135deg,
    var(--mb-teal, var(--mb-primary, var(--mb-red, var(--mb-pink, #63ded2)))),
    var(--mb-teal-2, var(--mb-primary-2, var(--mb-red-2, var(--mb-pink-2, #45cfc2))))
  );
  text-decoration: none;
  font-weight: 800;
  font-size: 0.94rem;
  line-height: 1.2;
  letter-spacing: 0.02em;
  white-space: nowrap;
  box-shadow: 0 0 24px color-mix(
    in srgb,
    var(--mb-teal, var(--mb-primary, var(--mb-red, #63ded2))) 22%,
    transparent
  );
  overflow-wrap: anywhere;
}

/* APK CTA — secondary outline style so it differs from Register. */
body.mb-site .mb-site-btn--apk,
body.mb-site .mb-site-drawer__cta--apk {
  color: var(--mb-text, #fff6dc);
  background: transparent;
  border: 1px solid color-mix(
    in srgb,
    var(--mb-gold, var(--mb-primary, var(--mb-teal, #e3b257))) 70%,
    transparent
  );
  box-shadow: none;
}

body.mb-site .mb-site-btn--apk:hover,
body.mb-site .mb-site-btn--apk:focus-visible,
body.mb-site .mb-site-drawer__cta--apk:hover,
body.mb-site .mb-site-drawer__cta--apk:focus-visible {
  filter: brightness(1.08);
  background: color-mix(
    in srgb,
    var(--mb-gold, var(--mb-primary, var(--mb-teal, #e3b257))) 16%,
    transparent
  );
  outline: none;
  text-decoration: none;
}

body.mb-site .mb-site-btn:hover,
body.mb-site .mb-site-btn:focus-visible,
body.mb-site .mb-site-drawer__cta:hover,
body.mb-site .mb-site-drawer__cta:focus-visible {
  filter: brightness(1.06);
  outline: none;
  text-decoration: none;
}

body.mb-site .mb-site-drawer__cta {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  white-space: normal;
  text-align: center;
  overflow-wrap: anywhere;
}

body.mb-site .mb-site-drawer__cta + .mb-site-drawer__cta {
  margin-top: 10px;
}

/* Main content spacing below header chrome (override per-site main.css gaps). */
body.mb-site .mb-site-main {
  box-sizing: border-box;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0;
  margin: 0;
  padding-block: clamp(18px, 3vw, 34px) clamp(34px, 5vw, 64px);
  padding-inline: var(--mb-page-pad, var(--mb-site-gutter, clamp(16px, 3.4vw, 28px)));
}

body.mb-site .mb-site-main .mb-article,
body.mb-site main .mb-article {
  width: 100%;
  max-width: min(100%, var(--mb-container, 1120px));
  box-sizing: border-box;
}

body.mb-site {
  overflow-x: clip;
}

@supports not (overflow: clip) {
  body.mb-site {
    overflow-x: hidden;
  }
}

/* Drawer nav: normalize ul/li from LLM headers (avoid phantom scrollbars). */
body.mb-site .mb-site-drawer__nav ul {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

body.mb-site .mb-site-drawer__nav li {
  margin: 0;
  padding: 0;
  list-style: none;
}

body.mb-site .mb-site-drawer__panel {
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

body.mb-site .mb-site-drawer__panel::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

/* Hide legacy horizontal nav when drawer chrome is used */
body.mb-site .mb-site-header__inner > .mb-site-nav,
body.mb-site .mb-site-header__inner > .mb-main-nav {
  display: none;
}

/* Breadcrumbs inside header — compact strip, left-aligned */
body.mb-site .mb-site-header .mb-page-strip {
  border-block: none;
  border-top: 1px solid color-mix(
    in srgb,
    var(--mb-border, var(--mb-line, rgba(255, 255, 255, 0.12))) 60%,
    transparent
  );
  background: transparent;
  margin-block-end: 0;
}

body.mb-site .mb-site-header .mb-page-strip__inner {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-direction: row;
  width: 100%;
  max-width: calc(var(--mb-container, 1120px) + var(--mb-page-pad, 28px) + var(--mb-page-pad, 28px));
  margin-inline: auto;
  padding-inline: var(--mb-page-pad, clamp(16px, 3.4vw, 28px));
  padding-block: 8px;
}

body.mb-site .mb-site-header .mb-breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--mb-muted, #c7ad7d);
  font-size: 0.93rem;
  line-height: 1.5;
}

body.mb-site .mb-breadcrumbs li + li::before {
  content: "/";
  margin-inline-end: 8px;
  color: var(--mb-muted-2, #9f8557);
}

body.mb-site .mb-breadcrumbs a {
  color: var(--mb-gold-2, #ffd985);
  text-decoration: none;
}

body.mb-site .mb-breadcrumbs a:hover,
body.mb-site .mb-breadcrumbs a:focus-visible {
  color: var(--mb-teal, #63ded2);
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

/* Footer: logo + wrapping inline nav links (reference: flex row, not columns) */
body.mb-site .mb-site-footer__top {
  display: grid;
  gap: clamp(16px, 3vw, 28px);
  align-items: center;
}

body.mb-site .mb-footer-nav {
  display: block !important;
  width: 100%;
  min-width: 0;
  max-width: none;
  padding: 0 !important;
  margin: 0;
  border: none !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
  justify-content: flex-start !important;
  flex-wrap: nowrap !important;
  gap: 0 !important;
  overflow: visible !important;
}

/* Reference (mostbeteg.app/info): flex-wrap rows, each item grows to fill row width */
body.mb-site .mb-footer-nav__list {
  display: flex !important;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0;
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  min-width: 0;
  overflow: visible !important;
}

body.mb-site .mb-footer-nav__list > li {
  display: flex;
  flex: 1 1 auto;
  align-items: stretch;
  min-width: 0;
}

body.mb-site .mb-footer-nav a,
body.mb-site .mb-footer-nav__link {
  display: flex !important;
  align-items: center;
  justify-content: center;
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  min-height: 0;
  max-width: none;
  padding: 10px clamp(16px, 3vw, 30px) !important;
  border: none !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
  color: var(--mb-text-soft, #ead8b1);
  text-decoration: none;
  font-weight: 600;
  font-size: clamp(0.94rem, 1.7vw, 1rem);
  line-height: 1.35;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
  transform: none !important;
  overflow-wrap: anywhere;
}

body.mb-site .mb-footer-nav a:hover,
body.mb-site .mb-footer-nav a:focus-visible,
body.mb-site .mb-footer-nav__link:hover,
body.mb-site .mb-footer-nav__link:focus-visible {
  color: var(--mb-gold-2, #ffd985);
  text-decoration: underline;
  text-underline-offset: 0.18em;
  transform: none;
  background: none;
}

body.mb-site .mb-footer-nav a[aria-current="page"],
body.mb-site .mb-footer-nav__link[aria-current="page"] {
  color: var(--mb-teal, #63ded2);
  background: none;
  border: none;
}

body.mb-site .mb-site-footer__copy {
  margin: 0;
  color: var(--mb-muted, #c7ad7d);
  font-size: 0.9rem;
  line-height: 1.5;
  text-align: center;
}

/*
  Подвал: колонка на всю ширину контейнера.

  Здесь сталкивались два источника стилей. main.css пишет модель, и она верстает подвал
  флексом: `display: flex; justify-content: space-between`. Этот файл переводит контейнер
  в грид, но `justify-content` от флекса никуда не девается — в гриде оно раскладывает
  ТРЕКИ, и единственный автоширинный трек прижимается к началу вместо растяжения.

  Замер 26.08.2026, пакистанский прогон, окно 1440: контейнер подвала 1120px с центром 720,
  а всё содержимое — колонка 413px с центром 394. Логотип, ссылка, лицензия и копирайт
  сидели слева от середины, и это читалось как «текст стоит неровно». Разметка была цела,
  раскладку ломала одна унаследованная строчка.

  Поэтому трек объявлен явно, а выравнивание сброшено — что бы модель ни написала выше.
*/
body.mb-site .mb-site-footer__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-content: stretch;
  justify-items: stretch;
  gap: clamp(16px, 3vw, 24px);
}

@media (min-width: 768px) {
  body.mb-site .mb-site-footer__top {
    grid-template-columns: min(var(--mb-logo-footer-max-width, 24%), var(--mb-logo-footer-max-cap, 30%)) minmax(0, 1fr);
    gap: clamp(24px, 4vw, 48px);
  }

  body.mb-site .mb-site-footer__brand {
    width: 100%;
    max-width: none;
  }

  body.mb-site .mb-site-footer__top > .mb-footer-nav {
    justify-self: stretch;
    align-self: center;
  }

  /*
    Логотип у края, остальное — по центру подвала.

    Колонок стало три: логотип, ссылки, пустой противовес той же ширины. Без противовеса
    колонка ссылок занимает весь остаток, и её середина уезжает вправо: замер 26.08.2026
    давал центр ссылок 904 при центре подвала 720, тогда как лицензия и копирайт стояли
    ровно на 720. Две разные оси в одном подвале и читались как «текст стоит неровно».

    Противовес — пустая ячейка из `::after`, а не лишний тег: разметку подвала строит
    сборщик, и ради выравнивания её трогать незачем.
  */
  body.mb-site .mb-site-footer__top {
    grid-template-columns:
      min(var(--mb-logo-footer-max-width, 24%), var(--mb-logo-footer-max-cap, 30%))
      minmax(0, 1fr)
      min(var(--mb-logo-footer-max-width, 24%), var(--mb-logo-footer-max-cap, 30%));
  }

  body.mb-site .mb-site-footer__top::after {
    content: "";
    display: block;
  }
}

/* Compact one-row header on phone + tablet (incl. iPad landscape < 1024). */
@media (max-width: 1023px) {
  body.mb-site .mb-site-header__inner {
    flex-direction: row !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 4px;
  }

  body.mb-site .mb-site-header .mb-site-brand {
    flex: 0 1 auto;
    min-width: 0;
    max-width: 24%;
    overflow: hidden;
    justify-content: flex-start !important;
  }

  body.mb-site .mb-site-header .mb-site-brand__logo {
    max-height: 20px;
    max-width: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
  }

  body.mb-site .mb-site-header__actions {
    flex: 1 1 auto;
    justify-content: flex-end;
    flex-wrap: nowrap;
    gap: 3px;
    min-width: 0;
  }

  body.mb-site .mb-site-btn {
    height: 30px;
    padding: 0 5px;
    font-size: clamp(0.54rem, 2.4vw, 0.64rem);
    width: auto;
    box-sizing: border-box;
  }

  body.mb-site .mb-site-burger {
    width: 30px;
    height: 30px;
    gap: 4px;
  }

  body.mb-site .mb-site-burger__bar {
    width: 14px;
  }

  body.mb-site .mb-site-drawer__cta {
    display: flex;
    margin-top: 14px;
  }

  body.mb-site .mb-site-drawer__cta + .mb-site-drawer__cta {
    margin-top: 10px;
  }

  body.mb-site .mb-site-header .mb-page-strip__inner {
    flex-direction: row !important;
    align-items: center !important;
  }

  /* Stacked footer: logo spans full row width (reference mobile layout) */
  body.mb-site .mb-site-footer__top {
    grid-template-columns: 1fr;
    gap: clamp(20px, 5vw, 28px);
  }

  body.mb-site .mb-site-footer__brand {
    display: block;
    width: 100%;
    max-width: none;
  }

  body.mb-site .mb-site-footer .mb-site-brand__logo {
    display: block;
    width: 100%;
    height: auto;
    max-width: none;
    aspect-ratio: var(--mb-logo-ratio);
    object-fit: contain;
  }
}

/* main.css stacks header nav pills at 380px; footer keeps reference row grow layout */
@media (max-width: 380px) {
  body.mb-site .mb-footer-nav a,
  body.mb-site .mb-footer-nav__link {
    flex-basis: auto !important;
  }
}

/* Drawer CTAs only needed when burger is the nav path (phone/tablet). */
@media (min-width: 1024px) {
  body.mb-site .mb-site-btn--apk,
  body.mb-site .mb-site-drawer__cta--apk {
    display: none !important;
  }

  body.mb-site .mb-site-drawer__cta {
    display: none;
  }
}

/* Article TOC (fair-pages-kit / pipeline-injected after hero) */
.mb-article .mb-toc,
.mbpk-article .mb-toc,
.mbpk-page .mb-article .mb-toc {
  width: 100%;
  max-width: var(--mb-container);
  margin-inline: auto;
  margin-block-end: var(--mb-stack-gap, var(--mb-section-gap, clamp(34px, 6vw, 64px)));
  padding: clamp(20px, 4vw, 36px) var(--mb-page-pad, var(--mb-gutter, clamp(16px, 3.4vw, 28px)));
  border: 1px solid var(--mb-border, rgba(255, 255, 255, 0.12));
  border-radius: var(--mb-radius-lg, 22px);
  background:
    radial-gradient(circle at 88% 10%, color-mix(in srgb, var(--mb-gold, var(--mb-primary, #e3b257)) 14%, transparent), transparent 16rem),
    linear-gradient(180deg, var(--mb-panel, var(--mb-panel-2, rgba(20, 16, 24, 0.94))), var(--mb-panel-2, rgba(12, 10, 16, 0.88)));
  box-shadow: var(--mb-shadow, 0 22px 70px rgba(0, 0, 0, 0.42));
}

.mb-article .mb-toc__summary,
.mbpk-article .mb-toc__summary,
.mbpk-page .mb-article .mb-toc__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  cursor: pointer;
  list-style: none;
  margin: 0;
  padding: 0;
}

.mb-article .mb-toc__summary::-webkit-details-marker,
.mbpk-article .mb-toc__summary::-webkit-details-marker,
.mbpk-page .mb-article .mb-toc__summary::-webkit-details-marker {
  display: none;
}

.mb-article .mb-toc__summary::after,
.mbpk-article .mb-toc__summary::after,
.mbpk-page .mb-article .mb-toc__summary::after {
  content: "+";
  flex: 0 0 auto;
  width: 1.75rem;
  height: 1.75rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--mb-border-strong, rgba(255, 255, 255, 0.24));
  border-radius: var(--mb-radius-sm, 12px);
  color: var(--mb-gold-2, #ffd985);
  font-size: 1.1rem;
  line-height: 1;
  transition: transform 0.2s ease, background 0.2s ease;
}

.mb-article .mb-toc[open] .mb-toc__summary::after,
.mbpk-article .mb-toc[open] .mb-toc__summary::after,
.mbpk-page .mb-article .mb-toc[open] .mb-toc__summary::after {
  content: "−";
}

.mb-article .mb-toc__title,
.mbpk-article .mb-toc__title,
.mbpk-page .mb-article .mb-toc__title {
  margin: 0;
  color: var(--mb-gold-2, #ffd985);
  font-size: clamp(1.15rem, 2.4vw, 1.45rem);
  line-height: 1.25;
}

.mb-article .mb-toc__list,
.mbpk-article .mb-toc__list,
.mbpk-page .mb-article .mb-toc__list {
  margin: clamp(14px, 2.5vw, 20px) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: clamp(8px, 1.5vw, 12px);
}

.mb-article .mb-toc__list--sub,
.mbpk-article .mb-toc__list--sub,
.mbpk-page .mb-article .mb-toc__list--sub {
  margin: clamp(8px, 1.5vw, 10px) 0 0;
  padding-left: clamp(12px, 2vw, 18px);
  border-left: 1px solid var(--mb-border, rgba(255, 255, 255, 0.12));
}

.mb-article .mb-toc__item,
.mbpk-article .mb-toc__item,
.mbpk-page .mb-article .mb-toc__item {
  margin: 0;
}

.mb-article .mb-toc__link,
.mbpk-article .mb-toc__link,
.mbpk-page .mb-article .mb-toc__link {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  padding: 0.55rem 0.75rem;
  border-radius: var(--mb-radius-sm, 12px);
  color: var(--mb-text, var(--mb-ink, #f2f2ee));
  text-decoration: none;
  background: color-mix(in srgb, var(--mb-text, var(--mb-ink, #f2f2ee)) 3%, transparent);
  border: 1px solid transparent;
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}

.mb-article .mb-toc__num,
.mbpk-article .mb-toc__num,
.mbpk-page .mb-article .mb-toc__num {
  flex: 0 0 auto;
  min-width: 2.2rem;
  color: var(--mb-gold, #e3b257);
  font-variant-numeric: tabular-nums;
}

.mb-article .mb-toc__text,
.mbpk-article .mb-toc__text,
.mbpk-page .mb-article .mb-toc__text {
  flex: 1 1 auto;
}

.mb-article .mb-toc__link:hover,
.mbpk-article .mb-toc__link:hover,
.mbpk-page .mb-article .mb-toc__link:hover,
.mb-article .mb-toc__link:focus-visible,
.mbpk-article .mb-toc__link:focus-visible,
.mbpk-page .mb-article .mb-toc__link:focus-visible {
  color: var(--mb-gold-2, #ffd985);
  border-color: var(--mb-border-strong, rgba(255, 255, 255, 0.24));
  background: color-mix(
    in srgb,
    var(--mb-gold, var(--mb-primary, #e3b257)) 8%,
    transparent
  );
}

@media (max-width: 640px) {
  .mb-article .mb-toc,
  .mbpk-article .mb-toc,
  .mbpk-page .mb-article .mb-toc {
    max-width: 100%;
  }
}

/* Hero: single-column stack at every breakpoint (media → CTA → copy share one column). */
body.mb-site .mb-hero,
body.mb-site .mb-hero.mb-row--stack {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "media"
    "cta"
    "copy";
}

/*
  Просвет между абзацами — гарантированный минимум, а не переопределение.

  main.css пишет модель, и на двух сайтах из семи она поставила абзацам нулевые поля:
  замер 26.08.2026 дал зазор 0px на трёх страницах (mostbetloginpakistan.pk обе,
  mostbetofficialwebsite.pk английская), тогда как на остальных пяти он 17–22px. Текст
  шёл сплошняком.

  Правило намеренно задаёт margin СВЕРХУ у второго абзаца, а не снизу у первого.
  Контейнер — обычный блок (проверено: display=block), значит соседние вертикальные поля
  СХЛОПЫВАЮТСЯ и берётся большее. Там, где сайт уже поставил свои 17 или 22 — ничего не
  меняется; там, где ноль — появляется просвет. Разнообразие вёрстки между доменами при
  этом не страдает, а оно здесь и есть смысл всей затеи.

  Единица em, а не пиксели: у каждого сайта свой кегль, и просвет должен быть ему под стать.

  `!important` — не грубость, а единственный устойчивый способ. Селекторы в main.css пишет
  модель, и их вес непредсказуем: на mostbetofficialwebsite.pk она выдала
  `:is(.mb-article, .mbpk-article, .mbpk-page .mb-article) .mb-hero__lead { margin-block: 0 }`
  — три класса против двух у обычного правила, и порог молча проигрывал. Гнаться за весом
  бессмысленно: следующий сайт напишет на класс длиннее.

  Переопределения при этом не происходит: задаётся поле СВЕРХУ, а поля схлопываются по
  большему. Сайт со своими 22px снизу сохранит 22px; сайт с нулём получит просвет.
*/
body.mb-site .mb-hero__copy p + p,
body.mb-site .mb-copy p + p,
body.mb-site .mb-card__body p + p {
  margin-block-start: 0.9em !important;
}

/*
  Горизонтальная картинка в контенте — в рамке по её собственной пропорции, а не 2:3.

  Тема рисует `.mb-media` рамкой 2:3 с `object-fit: cover`: генерация делает контентные
  картинки вертикальными, и для них это верно. Но на PK часть картинок взята со старых
  сайтов заказчика, 1280×708, и та же рамка срезала у них около двух третей ширины.

  Помечает такие обёртки сборка — `data-orient="landscape"` по размеру файла на диске
  (mark_landscape_media в beautiful_site_publish.py). Вертикальных пометка не касается:
  они остаются в рамке темы и заполняют блок.

  Прежняя попытка — инлайн-стиль на КАЖДУЮ картинку с потолком высоты 620px (157dc2fae) —
  горизонтальные не спасла, а вертикальные 1696×2528 сжала до 416×620 с пустотами по
  бокам. Здесь правило срабатывает только на помеченной обёртке.

  `!important` — по той же причине, что и у просвета абзацев выше: вес селекторов в
  main.css пишет модель, на двух сайтах он доходит до `.mbpk-page .mb-article .mb-media img`.
*/
body.mb-site .mb-media[data-orient="landscape"],
body.mb-site .mb-media[data-orient="landscape"] > a,
body.mb-site .mb-media[data-orient="landscape"] picture,
body.mb-site .mb-card__media[data-orient="landscape"],
body.mb-site .mb-card__media[data-orient="landscape"] > a,
body.mb-site .mb-card__media[data-orient="landscape"] picture {
  aspect-ratio: auto !important;
  height: auto !important;
}
body.mb-site .mb-media[data-orient="landscape"] img,
body.mb-site .mb-card__media[data-orient="landscape"] img {
  aspect-ratio: auto !important;
  /* Место под картинку резервируется ДО загрузки: с `auto` у отложенной картинки высота 0, и
     страница прыгает при прокрутке. Пропорция берётся из `width`/`height` в разметке (их
     проставляет fix_fleet_standard_html по файлу на диске). Браузер без типизированного
     `attr()` правило пропустит и останется на строке выше — хуже, чем было, не станет. */
  aspect-ratio: attr(width type(<number>)) / attr(height type(<number>)) !important;
  width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
}

/*
  Герой перенесённой страницы с картинкой не 16:9 — в рамке по её пропорции, без обрезки.
  Пометку ставит только scripts/build_legacy_pages.py (mark_hero_by_proportion); у героя
  140 страниц прогона пометки нет, их рамка 16:9 остаётся. Замечание 14.09: у 3:2 на
  страницах входа срезался верх с надписью.
*/
body.mb-site .mb-hero__media[data-orient="landscape"],
body.mb-site .mb-hero__media[data-orient="landscape"] > a,
body.mb-site .mb-hero__media[data-orient="landscape"] picture {
  aspect-ratio: auto !important;
  height: auto !important;
}
body.mb-site .mb-hero__media[data-orient="landscape"] img {
  aspect-ratio: auto !important;
  /* Пропорция из `width`/`height`, чтобы место под героем держалось до загрузки. */
  aspect-ratio: attr(width type(<number>)) / attr(height type(<number>)) !important;
  width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
}

/*
  Плитка карточек перенесённых страниц — по 5 в ряд, как на оригинале (решение 14.09.2026).
  Сетка темы держит 3 колонки, и плитки из 5, 10 и 4 карточек оставляли пустые клетки справа.
  Модификатор ставит только scripts/build_legacy_pages.py; сетки темы без него не меняются.
  Телефон — 1 колонка (по одной карточке, замечание 14.09: в 2 колонки на узком экране
  мелко и с одинокой карточкой в конце), планшет — 3, десктоп — 5.
*/
body.mb-site .mb-slot-grid.mb-slot-grid--row5 {
  grid-template-columns: minmax(0, 1fr) !important;
}
@media (min-width: 640px) {
  body.mb-site .mb-slot-grid.mb-slot-grid--row5 {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}
@media (min-width: 980px) {
  body.mb-site .mb-slot-grid.mb-slot-grid--row5 {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }
}
/*
  Ряд с горизонтальной картинкой — картинка над текстом, в одну колонку (замечание 14.09).
  В main.css обычный и `--reverse` ряд ставят картинку сбоку, `--stack/--long` с `--reverse` —
  под текстом; горизонтальная картинка сбоку сжимается в узкую полосу. Пометку
  `data-orient="landscape"` ставит сборка (mark_landscape_media), вертикальные ряды не меняются.
*/
body.mb-site .mb-article .mb-row:has(> .mb-media[data-orient="landscape"]) {
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-areas: "media" "copy" !important;
}

/*
  `.mb-measure` — на всю ширину секции, как остальные блоки статьи (замечание 14.09).
  Во всех семи main.css он ограничен шириной строки `min(72ch, 100%)` и стоит по центру; агент
  шага 80 заворачивал в него таблицы с абзацами и целые тексты политик — таблицы выходили
  урезанными посреди секции. Правило только снимает ограничение: разметка страниц не меняется.
*/
body.mb-site .mb-article .mb-measure {
  max-width: 100% !important;
  max-inline-size: 100% !important;
}

/*
  Строка иконок оплаты перенесённых страниц — на всю ширину секции (замечание 14.09): на
  десктопе одна линия от края до края, на телефоне сетка по 3, чтобы не было одинокой иконки.
  Класс ставит только scripts/build_legacy_pages.py.
*/
body.mb-site .mb-pay-row {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px 24px !important;
  margin-block: 14px 26px !important;
}
body.mb-site .mb-pay-row img {
  width: auto !important;
  height: 30px !important;
  max-width: 100% !important;
}
@media (max-width: 639px) {
  body.mb-site .mb-pay-row {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    justify-items: center !important;
  }
  body.mb-site .mb-pay-row img {
    height: 22px !important;
  }
}

/*
  Плитка короче пяти карточек — ряд на всю секцию, без пустых клеток (замечание 14.09: Live
  Casino из 4 карточек прижималась к краю). Модификатор `--nN` ставит сборка по числу карточек.
*/
@media (min-width: 640px) {
  body.mb-site .mb-slot-grid.mb-slot-grid--row5.mb-slot-grid--n2,
  body.mb-site .mb-slot-grid.mb-slot-grid--row5.mb-slot-grid--n4 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
@media (min-width: 980px) {
  body.mb-site .mb-slot-grid.mb-slot-grid--row5.mb-slot-grid--n2 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  body.mb-site .mb-slot-grid.mb-slot-grid--row5.mb-slot-grid--n3 {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
  body.mb-site .mb-slot-grid.mb-slot-grid--row5.mb-slot-grid--n4 {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}
/*
  Все карточки плитки — одной высоты картинки: одна пропорция 3:2 и обрезка по краям.
  Картинки карточек разной пропорции (1024×683, 1024×734, 1024×768), и рамка «по своей
  пропорции» давала ряды, где картинки и подписи прыгают по высоте (замечание 14.09).
  Селектор сильнее правила data-orient выше — у карточки плитки выигрывает этот.
*/
body.mb-site .mb-slot-grid.mb-slot-grid--row5 .mb-card__media,
body.mb-site .mb-slot-grid.mb-slot-grid--row5 .mb-card__media[data-orient="landscape"],
body.mb-site .mb-slot-grid.mb-slot-grid--row5 .mb-card__media > a {
  aspect-ratio: 3 / 2 !important;
  height: auto !important;
}
body.mb-site .mb-slot-grid.mb-slot-grid--row5 .mb-card__media > a {
  display: block !important;
}
/*
  Плитка не прилипает к тексту над ней, подпись карточки читается (замечание 14.09): отступ
  сверху — как между блоками статьи; низ карточки компактный, подпись крупнее, жирная, по
  центру — как у подписи под картинкой на оригинале.
*/
body.mb-site .mb-slot-grid.mb-slot-grid--row5 {
  margin-block-start: clamp(20px, 3vw, 32px) !important;
}
body.mb-site .mb-slot-grid.mb-slot-grid--row5 .mb-card {
  grid-template-rows: auto auto !important;
}
body.mb-site .mb-slot-grid.mb-slot-grid--row5 .mb-card__body {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: clamp(10px, 1.4vw, 14px) clamp(10px, 1.2vw, 14px) !important;
}
body.mb-site .mb-slot-grid.mb-slot-grid--row5 .mb-card__title {
  margin: 0 !important;
  text-align: center !important;
  font-size: clamp(0.95rem, 1.15vw, 1.1rem) !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
}
body.mb-site .mb-slot-grid.mb-slot-grid--row5 .mb-card__media img,
body.mb-site .mb-slot-grid.mb-slot-grid--row5 .mb-card__media[data-orient="landscape"] img {
  aspect-ratio: 3 / 2 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* Вопрос FAQ — со значком «раскрыть». Тема снимает системный треугольник у `summary`, а свой
   значок ставит только на двух сайтах из семи (apkdownload, company): на остальных вопрос
   выглядит обычной строкой, и не видно, что он раскрывается (14.09, mostbetappdownload.pk).
   Значок один на весь флот: «+» закрыт, «−» открыт. Оглавление (`.mb-toc`) не трогаем. */
body.mb-site .mb-faq summary {
  list-style: none !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  cursor: pointer;
}
body.mb-site .mb-faq summary::-webkit-details-marker {
  display: none !important;
}
body.mb-site .mb-faq summary::after {
  content: "+" !important;
  margin-inline-start: auto !important;
  flex: 0 0 auto !important;
  display: grid !important;
  place-items: center !important;
  width: 28px !important;
  height: 28px !important;
  border: 1px solid currentColor !important;
  border-radius: 999px !important;
  opacity: 0.75 !important;
  font-size: 1.05em !important;
  line-height: 1 !important;
}
body.mb-site .mb-faq details[open] > summary::after {
  content: "−" !important;
}

/* Списки на урду: отступ со стороны маркеров. main.css задаёт спискам `padding-left`, а в
   RTL маркеры стоят справа — у урду-списков отступ 0, номера и точки лежат на правой рамке
   карточки (у английских 21.6 px). Логическое свойство отдаёт отступ туда, где маркер. */
[dir="rtl"] body.mb-site .mb-article :is(ul, ol):not(.mb-toc__list) {
  padding-inline-start: 1.35em !important;
  padding-inline-end: 0 !important;
}

/* CTA без ссылки не показывается. Сборка срезает кнопки сверх лимита страницы, и плашка
   с призывом остаётся без кнопки (mostbetcompany.pk/bonuses-aur-promo-codes, 14.09). */
body.mb-site .mb-cta:not(:has(a[href])) {
  display: none !important;
}

/* 404: подвал внизу окна. Страница короче экрана, и подвал висел посередине. */
body.mb-site:has(> .mb-site-main--404) {
  min-height: 100vh;
  display: flex !important;
  flex-direction: column !important;
}
body.mb-site > .mb-site-main--404 {
  flex: 1 0 auto !important;
}

/* Ячейки таблиц не рвут слова. main.css ставит `.mb-article { overflow-wrap: anywhere }`,
   ячейки его наследуют, и авто-раскладка таблицы сжимает столбец до обломков слов
   («Verificatio/n», mostbet2.pk/en/mostbet-overview, 14.09). `break-word` переносит только
   то, что иначе вылезло бы за ячейку, и не уменьшает минимальную ширину столбца. */
body.mb-site .mb-article :is(th, td) {
  overflow-wrap: break-word !important;
}

/* Ряд без картинки — одна колонка на всю ширину. Шаг 80 иногда оставляет ряду сетку
   «текст | картинка» без самой картинки: текст с таблицей стоит в одной половине, вторая
   пустая (mostbetcompany.pk/shart-kaise-lagayen, 14.09). */
body.mb-site .mb-article .mb-row:not(.mb-hero):not(:has(> .mb-media)) {
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-areas: "copy" !important;
}

/* CTA без подписи — на перенесённых страницах подпись вычеркнута вместе с промокодом.
   Без правила кнопка прижата к краю широкой пустой плашки с отступом сверху, как под
   исчезнувшим текстом; по центру и без отступа плашка читается как задуманная. */
body.mb-site .mb-cta:not(:has(.mb-cta__copy)) > .mb-cta__actions {
  margin-block-start: 0 !important;
  justify-content: center !important;
}

/* Измерено из самого файла логотипа при сборке (mostbet-logo.png): прозрачная кайма слева. */
:root { --mb-logo-bleed-inline: 2.5391%; }

/* Locale switcher — top of mb-site drawer */
body.mb-site .mb-site-drawer__panel .mb-lang-switch {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 8px;
	width: 100%;
	margin: 0 0 14px;
	padding: 0 0 14px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.18);
	flex-shrink: 0;
}
body.mb-site .mb-lang-switch__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 1 1 0;
	min-width: 0;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0;
	color: rgba(255, 255, 255, 0.95);
	text-decoration: none;
	padding: 6px 10px;
	border-radius: 8px;
	border: 1px solid rgba(255, 255, 255, 0.35);
	white-space: nowrap;
	line-height: 1.15;
}
body.mb-site .mb-lang-switch__link:hover {
	background: rgba(255, 255, 255, 0.14);
	color: #fff;
}
body.mb-site .mb-lang-switch__link.is-active {
	background: rgba(255, 179, 0, 0.22);
	border-color: rgba(255, 179, 0, 0.65);
	color: #fff;
}

/* Override main.css: keep copyright below logo+nav, not beside them */
body.mb-site .mb-site-footer__inner {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: clamp(16px, 3vw, 24px);
  align-items: stretch;
}
body.mb-site .mb-footer-nav__list > li {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}
@media (max-width: 639px) {
  body.mb-site .mb-footer-nav__list > li {
    flex-basis: auto !important;
  }
}

/* Prevent horizontal document scroll (drawer 100vw + wide tables) */
html {
  margin: 0;
  padding: 0;
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
  background: #050505;
}
@supports not (overflow: clip) {
  html {
    overflow-x: hidden;
  }
}
body.mb-site {
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: clip !important;
  box-sizing: border-box;
}
@supports not (overflow: clip) {
  body.mb-site {
    overflow-x: hidden !important;
  }
}
/* Closed drawer must not expand document scrollWidth via translateX(100%) */
body.mb-site .mb-site-drawer,
.mb-site-drawer {
  width: 100% !important;
  max-width: 100% !important;
  left: 0 !important;
  right: 0 !important;
  overflow: hidden !important;
  contain: paint;
}
body.mb-site .mb-site-main,
body.mb-site .mb-article {
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
/* Wide data tables scroll inside their box instead of the page */
body.mb-site .mb-table,
body.mb-site table.mb-table {
  display: block;
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
body.mb-site .mb-table thead,
body.mb-site .mb-table tbody,
body.mb-site .mb-table tr {
  display: table;
  width: 100%;
  table-layout: fixed;
}

/* Header APK/download CTA — accent pill beside registration.
   Use a.mb-site-btn.mb-site-btn--apk so we beat body.mb-site a.mb-site-btn in main.css. */
body.mb-site a.mb-site-btn.mb-site-btn--apk,
body.mb-site .mb-site-drawer__cta.mb-site-drawer__cta--apk {
  border-color: color-mix(in srgb, var(--mb-accent, #ffb300) 55%, transparent);
  color: var(--mb-on-accent-2, #1a0f08);
  background: linear-gradient(
    135deg,
    var(--mb-accent, #ffb300),
    var(--mb-accent-2, #e6a200)
  );
  box-shadow: 0 0 20px color-mix(in srgb, var(--mb-accent, #ffb300) 24%, transparent);
}

body.mb-site a.mb-site-btn.mb-site-btn--apk:hover,
body.mb-site a.mb-site-btn.mb-site-btn--apk:focus-visible,
body.mb-site .mb-site-drawer__cta.mb-site-drawer__cta--apk:hover,
body.mb-site .mb-site-drawer__cta.mb-site-drawer__cta--apk:focus-visible {
  color: var(--mb-on-accent-2, #1a0f08);
  background: linear-gradient(
    135deg,
    var(--mb-accent, #ffb300),
    var(--mb-accent-2, #e6a200)
  );
  filter: brightness(1.05);
}

body.mb-site .mb-site-header__actions {
  flex-wrap: wrap;
  justify-content: flex-end;
  row-gap: 6px;
}

@media (min-width: 1024px) {
  /* APK/download CTA is mobile+tablet only; desktop keeps registration only. */
  body.mb-site .mb-site-btn--apk,
  body.mb-site .mb-site-drawer__cta--apk {
    display: none !important;
  }
}

@media (max-width: 767px) {
  body.mb-site .mb-site-header {
    overflow-x: clip;
  }

  body.mb-site .mb-site-header__inner {
    flex-wrap: nowrap;
    align-items: center;
    gap: 4px;
    width: 100%;
    max-width: 100%;
    padding: 8px 6px;
    box-sizing: border-box;
  }

  body.mb-site .mb-site-header .mb-site-brand {
    flex: 0 1 24%;
    min-width: 0;
    max-width: 24%;
  }

  body.mb-site .mb-site-header .mb-site-brand__logo {
    max-height: 20px;
    max-width: 100%;
    width: auto;
    height: auto;
  }

  body.mb-site .mb-site-header__actions {
    flex: 1 1 auto;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
    gap: 3px;
    max-width: none;
    min-width: 0;
  }

  body.mb-site .mb-site-btn,
  body.mb-site .mb-site-btn--apk {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    height: 30px;
    min-height: 30px;
    padding: 0 5px;
    font-size: clamp(0.54rem, 2.4vw, 0.64rem);
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1;
    flex-shrink: 1;
    min-width: 0;
  }

  body.mb-site .mb-site-burger {
    width: 30px;
    height: 30px;
    flex-shrink: 0;
  }

  body.mb-site .mb-site-burger__bar {
    width: 14px;
  }
}

body.mb-site .mb-site-drawer__cta--apk {
  margin-top: 8px;
}

/* Drawer CTA fit — avoid clipping long register/download labels */
body.mb-site a.mb-site-drawer__cta,
body.mb-site .mb-site-drawer__cta {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
  text-align: center;
  line-height: 1.15;
}