/* Megapari поверх темы донора.
 *
 * Тема целиком на CSS-переменных: 144 штуки, и все цвета, кнопки, шапка,
 * подвал и таблицы читают только их. Это удача — перекрашивать сам файл
 * темы на 70 КБ не нужно, достаточно переопределить переменные. Поэтому
 * основная часть файла — переменные, и только они: сломается вёрстка
 * донора — сломается она, а не наши правки поверх неё.
 *
 * Селекторы внизу файла — вынужденные. Каждый стоит там потому, что
 * переменной на это место у темы нет, и рядом с каждым написано, какой
 * именно замер его потребовал.
 *
 * Цвета берутся из tokens.css, а тот — из брендбука
 * (design/brandbook md mcp/MEGAPARI_BRAND_GUIDE_AI.md). Своих hex здесь нет:
 * это правило зафиксировано в самом tokens.css словами «Do not invent hex
 * outside this file».
 *
 * Донор был жёлтым (#fc0) на белом. Megapari — светлый текст на почти чёрном
 * #000413, синий для спорта, красный для казино, золотой для промо. Разница
 * не в оттенке, а в том, что фон меняется на противоположный: поэтому
 * переопределять приходится и текст, и рамки, и таблицы, иначе чёрное на
 * чёрном.
 *
 * Грузится последним, после всех стилей темы — ставит его patch_head.py
 * через `extra_css` в паспорте.
 */

:root {
  /* --- Холст и текст --- */
  --site-bg: var(--bg);
  --text-main: var(--text);
  --text-secondary: var(--text-muted);

  /* --- Ссылки и главная кнопка ---
     Ярко-синий #1a5dce, а не брендовый #1b9dd9: брендовый синий — это
     айдентика, а не элемент управления, так сказано в брендбуке §3.1.

     У ссылки свой оттенок, светлее кнопочного. Кнопка несёт синий фоном, и
     контраст там считается по белому тексту на нём; ссылка несёт синий
     буквами по тёмному, и кнопочный #2066da даёт 3.87 на холсте и 2.84 на
     карточке — ниже 4.5. */
  --links-color: var(--ui-blue-link);
  --button-bg: var(--ui-blue);
  --button-hover-bg: var(--ui-blue-bright);
  --button-color: var(--text);
  --button-hover-color: #fff;
  --button-radius: 999px;
  --button-disable-bg: rgba(255, 255, 255, 0.1);
  --button-disable-color: rgba(255, 255, 255, 0.3);

  /* --- Вторая кнопка: контур, а не заливка --- */
  --secondary-button-bg: transparent;
  --secondary-button-hover-bg: rgba(32, 102, 218, 0.14);
  --secondary-button-color: var(--text);
  --secondary-button-hover-color: var(--text);

  /* --- Карточки и секции --- */
  --card-bg: var(--surface);
  --card-text: var(--text);
  --card-text-secondary: var(--text-muted);
  --contrast-bg: var(--surface-2);

  /* --- Первый экран --- */
  --heroscreen-block-bg: var(--surface-2);
  --heroscreen-button-bg: var(--ui-blue);
  --heroscreen-button-bg-hover: var(--ui-blue-bright);
  --heroscreen-button-color: var(--text);
  --heroscreen-button-color-hover: #fff;
  --heroscreen-button-radius: 999px;
  --heroscreen-links-color: var(--text);

  /* --- Шапка --- */
  --header-bg: var(--bg);
  --header-text: var(--text);
  --header-text-hover: var(--ui-blue-bright);
  --header-button-bg: var(--ui-blue);
  --header-button-bg-hover: var(--ui-blue-bright);
  --header-button-color: var(--text);
  --header-button-color-hover: #fff;
  --header-button-radius: 999px;
  --header-button-secondary-bg: transparent;
  --header-button-secondary-bg-hover: rgba(32, 102, 218, 0.14);
  --header-button-secondary-color: var(--text);
  --header-button-secondary-color-hover: var(--text);

  /* --- Подвал --- */
  --footer-bg: var(--surface-2);
  --footer-text-main: var(--text);
  --footer-text-secondary: var(--text-muted);
  --footer-button-main-bg: var(--ui-blue);
  --footer-button-main-bg-hover: var(--ui-blue-bright);
  --footer-button-main-color: var(--text);
  --footer-button-main-color-hover: #fff;
  --footer-button-radius: 999px;
  --footer-button-secondary-bg: transparent;
  --footer-button-secondary-bg-hover: rgba(32, 102, 218, 0.14);
  --footer-button-secondary-color: var(--text);
  /* У донора здесь стояло `red` словом — единственное место во всей теме,
     где цвет написан именем. Менять было обязательно: на тёмном фоне
     красный текст на красной кнопке нечитаем. */
  --footer-button-secondary-color-hover: var(--text);

  /* --- Меню --- */
  --h-menu-item-text: var(--text);
  --h-menu-item-text-hover: #fff;
  --h-menu-item-bg: var(--surface);
  --h-menu-item-bg-hover: var(--ui-blue);
  --h-menu-back-text: var(--text);
  --h-menu-back-text-hover: #fff;
  --h-menu-back-bg: var(--surface-2);
  --h-menu-back-bg-hover: var(--ui-blue);
  --h-menu-back-border: var(--hairline);
  --h-menu-back-border-hover: var(--ui-blue);
  --h-menu-s-item-text: var(--text);
  --h-menu-s-item-text-hover: #fff;
  --h-menu-s-item-bg: var(--surface);
  --h-menu-s-item-bg-hover: var(--surface-2);

  /* --- Таблицы --- */
  --thead-bg: var(--deep-blue);
  --thead-text: var(--text);
  --thead-border: var(--hairline);
  --trow-bg: var(--surface-2);
  --trow-text: var(--text);
  --trow-border: var(--hairline);
  --trow-secondary-bg: var(--surface);
  --trow-secondary-text: var(--text);

  /* --- Поля ввода --- */
  --c-field-bg: var(--surface-2);
  --c-field-border: var(--hairline);
  --c-field-border-focus: var(--focus);
  --c-field-text: var(--text);

  /* --- Шрифт ---
     Тема читает --version-font. Druk Wide для дисплейных начертаний, Gilroy
     для интерфейса — брендбук §5. */
  --version-font: var(--font-ui);
}

/* Серые оттенки темы: она использует их как «светлее фона», а фон стал
   тёмным, и светлее должно быть светлее, а не темнее. Переворачиваем
   лестницу целиком, иначе рамки и разделители исчезают. */
:root {
  --grey-lighten-4: var(--surface);
  --grey-lighten-3: var(--surface-2);
  --grey-lighten-2: #2c3340;
  --grey-lighten-1: #3a424f;
  --grey-base: var(--text-muted);
  --grey-darken-1: var(--text-muted);
  --grey-darken-2: var(--text-on-accent);
  --grey-darken-3: var(--text);
  --grey-darken-4: var(--text);
  --white: var(--text);
  --black: var(--bg);
}

/* Акцент темы — жёлтый 1win. У нас жёлтый принадлежит промо и наградам
   (брендбук §3.1), поэтому он остаётся жёлтым, но нашим, и не назначается
   кнопкам: те синие выше. */
:root {
  --accent-base: var(--mp-yellow);
  --accent-lighten-1: #f5b52f;
  --accent-lighten-2: #f8c65c;
  --accent-darken-1: #c98600;
  --accent-darken-2: #a56e00;
}

/* Оставшиеся цвета темы.
 *
 * Первый заход переопределил сорок пять переменных и пропустил ещё сорок
 * пять — те, что не попались по именам «bg», «text», «button». Среди них
 * оказались `--h-menu-burger: #000` и `--heroscreen-main-color: #000`:
 * чёрная иконка на чёрной шапке и чёрный текст на тёмном первом экране.
 * Выглядело как пропавшие иконки, а было чёрным по чёрному.
 *
 * Отсюда правило: у тёмной темы переопределять надо ВСЁ, где стоит цвет,
 * а не то, что кажется относящимся к фону. Проверка — скриптом, который
 * сверяет объявленные в теме переменные с нашими. */
:root {
  /* Первый экран */
  --heroscreen-main-color: var(--text);
  --heroscreen-secondary-color: var(--text-muted);
  --heroscreen-bonus-color: var(--text);
  --heroscreen-breadcrumbs-color: var(--text-muted);
  --heroscreen-breadcrumbs-active-color: var(--text);

  /* Иконки и разделители меню */
  --h-menu-burger: var(--text);
  --h-menu-burger-hover: var(--ui-blue-bright);
  --h-menu-divider: var(--hairline);

  /* Акцент темы и линии */
  --theme-color: var(--ui-blue);
  --theme-secondary-color: var(--mp-yellow);
  --line-main: var(--ui-blue);
  --line-secondary: var(--hairline);
  --contrast-color: var(--text);

  /* Значок у заголовка игровой секции. Плагин красит его так:
     `color: var(--gc-acf-genre-icon, var(--contrast-bg))` — то есть при
     незаданном цвете жанра берёт цвет ПОВЕРХНОСТИ. У донора поверхность
     была светлой, и на белой карточке выходил тёмный значок; у нас
     поверхность тёмная, и значок пропал: контраст 1.15 на «Live casino».
     Задаём цвет жанра сами — тогда запасной вариант не используется.
     У «Popular games» значок красный собственной заливкой, и он остаётся. */
  --gc-acf-genre-icon: var(--text);
  --c-field-placeholder: var(--text-muted);

  /* Статусы. Свои, а не донорские кислотные: зелёный и красный у нас в
     брендбуке есть, и «успех» лаймовым #0ef15a рядом с фирменным красным
     читается как чужая система. */
  --success-base: #2fae5e;
  --success-lighten-1: #46c374;
  --success-lighten-2: #6bd694;
  --success-darken-1: #1f8f49;
  --error-base: var(--mp-red);
  --error-lighten-1: #ec5a52;
  --error-lighten-2: #f1837d;
  --error-darken-1: #c22a22;

  /* Градиенты донора — золотой на красном. Заменены брендовыми. */
  --gradient-color-1: #2066da;
  --gradient-color-2: #1b9dd9;
  --gradient-color-3: rgba(32, 102, 218, 0.35);
  --gradient2-color-1: #1a5dce;
  --gradient2-color-2: #1b9dd9;
  --gradient2-color-3: rgba(27, 157, 217, 0.3);
  --gradient-hover-color-1: #2f7ae9;
  --gradient-hover-color-2: #35b0e6;
  --gradient-hover-color-3: rgba(53, 176, 230, 0.35);

  /* Светлые и тёмные концы лестниц. На белой теме донора крайние значения
     почти не участвовали, на тёмной каждое из них где-нибудь да всплывает —
     подсветка строки таблицы, фон уведомления, рамка поля в фокусе. */
  --accent-lighten-4: rgba(237, 159, 2, 0.16);
  --accent-lighten-3: rgba(237, 159, 2, 0.28);
  /* Тёмный конец лестницы на тёмной теме обязан стать светлым. У донора
     пара работала так: бледно-жёлтая плашка, тёмно-коричневые буквы по ней.
     Мы сделали плашку полупрозрачным золотом поверх тёмной карточки — она
     выходит #5b4923, — и тёмные буквы по ней дают контраст 1.25. Это и есть
     нечитаемые «Step 1…4» в блоке шагов. Светлое золото даёт 5.46. */
  --accent-darken-3: #f8c65c;
  --accent-darken-4: #ffd88a;
  --success-lighten-4: rgba(47, 174, 94, 0.16);
  --success-lighten-3: rgba(47, 174, 94, 0.3);
  --success-darken-2: #17703a;
  --success-darken-3: #12592e;
  --success-darken-4: #0c3c1f;
  --error-lighten-4: rgba(230, 53, 43, 0.16);
  --error-lighten-3: rgba(230, 53, 43, 0.3);
  --error-darken-2: #9a231c;
  --error-darken-3: #741a15;
  --error-darken-4: #4d110e;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-ui);
  /* Выезжающее меню темы стоит на `right: -100%` при ширине 360px и
   * растягивает документ вдвое: 2800 px при окне 1400. Страница получает
   * горизонтальный скролл, которого никто не просил, и на телефоне это
   * читается как «сайт едет вбок».
   *
   * Дефект донорский — проверено на его же зеркале, там ровно то же.
   *
   * `clip`, а не `hidden`: `hidden` на body делает предка скролл-контейнером
   * и ломает `position: sticky` у шапки. `clip` обрезает, не создавая
   * контекста прокрутки, и шапка остаётся липкой. */
  overflow-x: clip;
}

/* Обрезать надо там, где меню позиционировано, а не на body: содержащий
   блок для него — `.v9-header__menu` (position: absolute), и ширину
   документа задаёт именно он. На body клип не помог, проверено. */
.v9-header__menu {
  overflow-x: clip;
}

/* Заголовки.
 *
 * Druk Wide (`--font-display`) — очень широкое начертание, оно для коротких
 * ударных строк. Длинный h1 в нём занимает 216 px высоты против 86 px у
 * донорского Inter на том же кегле: три с половиной строки вместо двух,
 * первый экран разъезжается, и выглядит это как «всё капсом», хотя регистр
 * обычный.
 *
 * Поэтому h1 и h2 идут на Druk Text (`--font-accent`) — то же семейство, но
 * нормальной ширины. Druk Wide остаётся там, где он и задуман брендбуком:
 * короткие акцентные строки, которые ставятся вручную классом.
 *
 * h3 — на интерфейсном Gilroy: заголовков третьего уровня на странице 53, и
 * дисплейным начертанием они превращают текст в сплошной шум. */
h1, h2 {
  font-family: var(--font-accent);
}

h3, h4, h5 {
  font-family: var(--font-ui);
  font-weight: 700;
}

.display-wide {
  font-family: var(--font-display);
}

/* Логотип.
 *
 * Тема ставит на него `object-fit: cover`, а в разметке у картинки остались
 * атрибуты донорского растра — `width="1500" height="373"`, то есть 4:1.
 * Наш вектор 216×26, это 8.3:1. `cover` масштабирует до заполнения короткой
 * стороны и обрезает длинную: в шапке оставалось «MEGA:P», а синяя точка
 * двоеточия вырастала в полосу. Именно это и было видно.
 *
 * `contain` вместо `cover` плюс явное соотношение чинят оба конца: картинка
 * вписывается целиком, а коробка перестаёт зависеть от чужих атрибутов. */
.v9-header__panel-logo__img,
.v9-footer__logo-ico,
.custom-logo {
  object-fit: contain;
  height: auto;
  aspect-ratio: 216 / 26;
}

/* Кнопка приложения в шапке — красная.
 *
 * Тема даёт обеим кнопкам шапки один и тот же `--button-bg`, поэтому
 * переменными их не развести, нужен селектор.
 *
 * Красный тут не для красоты: по брендбуку §3.2 синий — спорт, красный —
 * казино и энергия, и рядом они стоят не как равные. «Зарегистрироваться»
 * остаётся синей и главной, приложение уходит в красный вторым акцентом.
 *
 * Оттенок на шесть процентов темнее брендового #e6352b: с белым текстом
 * брендовый даёт 4.28, ниже порога 4.5. Поймала это не глаз, а
 * `python -m _lib.look contrast`.
 *
 * Стоит выше метки блока, который переписывает _lib/donor/skin.py на каждой
 * сборке: всё, что ниже неё, живёт ровно до следующего прогона. Саму метку
 * здесь писать нельзя даже в комментарии — вырезание идёт от первого её
 * появления в файле, и это правило уже один раз само себя стёрло. */
.v9-header__download .vAll-button_header-secondary.button_9 {
  background: var(--mp-red-on-white-text);
  color: #fff;
}
.v9-header__download .vAll-button_header-secondary.button_9::before {
  background: #b82a22;
}

/* mp-de */
/* Зона нажатия кнопки меню. У донора .mobile-menu-button 26x24, и это
   меньше рекомендуемых 44x44. Растягиваем прозрачным псевдоэлементом:
   сама иконка и три её полоски остаются ровно там, где были. */
.mobile-menu-button { position: absolute; }
.mobile-menu-button::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
  /* Ничего не рисует и не ловит на себя фон — только клики. */
  background: transparent;
}

/* Логотип: ссылка inline, поэтому её высота — строка текста, а не картинка.
   inline-block возвращает коробке высоту изображения, ::before добирает до 44. */
.custom-logo-link {
  position: relative;
  display: inline-block;
}
.custom-logo-link::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 44px;
  transform: translate(-50%, -50%);
  background: transparent;
}

/* Кнопка в шапке страницы не переносится по словам, а имена игр длинные:
   «Gates of Olympus Super Scatter oyna» держала строку в 370 px при окне 320
   и уводила документ вбок на 62 px. Проверено заменой: 382 -> 320. */
.welcome-section .buttons .btn {
  white-space: normal;
}

/* Раскрывашка вопроса в FAQ бывает в одну строку и тогда её высота 25 px.
   Соседние вопросы стоят с шагом 46 px, так что 44 px помещаются и ни на
   что не наезжают. Длинные вопросы и так 49 px — их правило не трогает.

   Селектор длинный не для красоты: выше в этом же файле у раскрывашки уже
   есть правило с четырьмя классами, и короткий `button.btn-link.toggler`
   ему проигрывает по весу. Проверено подстановкой: с коротким селектором
   min-height остаётся 0. */
.faq-section .item .question button.toggler {
  min-height: 44px;
}

/* Грид не сжимает свои элементы уже min-content, пока ему прямо не сказать.
   Из-за этого длинный H1 на слот-странице раздвигал документ до 343 px при
   окне 320 и включал горизонтальный скролл. Проверено замером: 343 -> 320. */
.welcome-section__container > * {
  min-width: 0;
}
/* Карточки в таблице фактов — грид из двух колонок, и его элементы по
   умолчанию не сжимаются уже своего содержимого (`min-width: auto`). Пока
   подписи короткие, это незаметно; «Unterstützte Betriebssysteme» задаёт
   минимальную ширину сама, и две колонки с зазором дают 391 px при окне
   390 — документ уезжает вбок на 17 px.

   Правило то же, что ниже у `.welcome-section__container`, и ловушка та же.
   Немецкий её вскрыл первым просто потому, что слова длиннее; на остальных
   языках она лежала тихо и ждала. Проверено замером: 407 -> 390. */
.v9-review__items > *,
.v9-top__wrapper > * {
  min-width: 0;
}

/* CTA на странице отзывов вылезала за 320 px на 31 px. */
a.wp-block-button__link {
  white-space: normal !important;
  overflow-wrap: anywhere;
  max-width: 100%;
}

/* Подпись кнопки «наверх»: у донора она вшита в тему строкой
   content: "top" и переводом не берётся. */
.v9-to-top:after { content: "oben"; }
/* /mp-de */