/* Разворот корейской темы справа налево.
 *
 * Грузится последним — после ver_9.css, блоков, шапки, подвала, плагина игр,
 * tokens.css и megapari-skin.css (порядок задан в build/site_config.py). Всё
 * здесь работает переопределением, поэтому селекторы повторяют донорские
 * один в один и добирают вес префиксом `[dir="rtl"]`.
 *
 * Префикс не косметика: файл попадает в общий бандл, и без него правила легли
 * бы на LTR-страницу и развернули бы её. `dir="rtl"` ставит движок на <html>,
 * так что условие истинно ровно там, где нужно.
 *
 * Браузер сам разворачивает поток текста, порядок flex/grid-элементов,
 * `justify-content: flex-start/end`, `row-reverse`, направление прокрутки и
 * маркеры списков. Он НЕ разворачивает то, что прибито физической стороной:
 * left/right, margin-left, padding-right, border-left, text-align: left,
 * четырёхзначные border-radius и повёрнутые иконки. Ниже — только это.
 *
 * Соглашение по свойствам. Внутри `[dir="rtl"]` логическая сторона
 * `inline-start` — это ПРАВЫЙ край, `inline-end` — левый. Логические шорткаты
 * (`inset-inline`, `margin-inline`, `padding-inline`) используются там, где
 * мало задать новое значение: надо ещё снять донорское с противоположной
 * стороны. Один шорткат закрывает обе стороны; физическая пара требует двух
 * строк, и вторую («right: auto») забывают — а забытая вторая строка в
 * абсолютном позиционировании не просто не работает, она даёт
 * переопределённый блок, где браузер сам решает, какую сторону выбросить.
 * Именно так ломается выезжающее меню — см. блок 2.
 *
 * Зеркалить контейнеры через `transform: scaleX(-1)` нельзя: вместе с
 * коробкой перевернётся и текст внутри. Иконки, где нужен разворот,
 * поворачиваются на 180° поштучно — это чистые псевдоэлементы и <svg> без
 * текста, там переворот безопасен.
 */


/* 1. Шапка: кто прижат к какому краю.
 *
 * `margin-*: auto` во флексе — это не отступ, а распорка: она съедает всё
 * свободное место с одной стороны и тем самым прижимает элемент к другой.
 * Сторона физическая, и при RTL она указывает не туда: логотип с панелью
 * уезжает обратно влево, кнопка загрузки — вправо, и шапка выглядит как
 * английская, набранная арабским.
 *
 * Порядок самих элементов движок уже развернул — исправляем только распорки.
 */
[dir="rtl"] .v9-header__panel {
  margin-inline: 0 auto;
}

[dir="rtl"] .v9-header__download {
  margin-inline: auto 0;
}

@media (max-width: 900px) {
  [dir="rtl"] .v9-header__panel-logo {
    margin-inline: 0 auto;
  }
}

/* Выпадашка бонусов — `position: absolute; left: 0` от кнопки, ширина 360 px.
 * Кнопка после разворота шапки стоит у правого края, и выпадашка, привязанная
 * левым краем к её левому краю, вываливается наружу: замерено 986..1346 при
 * окне 1280 и 764..1124 при 1024 — от 66 до 100 px за краем. Скролла при этом
 * не будет, `overflow-x: clip` на body его съест, будет хуже: у выпадашки
 * срежет тот самый край, где стоит кнопка «забрать». Привязываем её к тому же
 * краю, у которого стоит кнопка, — после правки правый край выпадашки и
 * кнопки совпадают. */
[dir="rtl"] .v9-header__panel-bonuses-content {
  inset-inline: 0 auto;
}

[dir="rtl"] .v9-header__panel-bonuses-content .v9-claim-bonus__description {
  margin-inline: 0 auto;
}

[dir="rtl"] .v9-header__panel-bonuses-content .v9-claim-bonus__link {
  margin-inline: 4px 0;
}


/* 2. Выезжающее меню. Самое дорогое место в файле.
 *
 * Донор прячет панель за `right: -100%` и выводит её в `right: 0`, анимируя
 * `right`. Бургер при RTL стоит слева — замерено, 16..46 px от левого края на
 * всех ширинах, — а панель без правки приезжает справа: на 1280 px она
 * садится в 920..1280, то есть у противоположного края от кнопки, которой её
 * открыли. С правкой садится в 0..360, под бургером.
 *
 * Вторая половина проблемы тише и злее. На ширинах до 900 px донор добавляет
 * `left: 0` и `width: 100%`, не снимая базового `right: -100%`. Три величины
 * из трёх заданы — блок переопределён, и спецификация велит одну выбросить:
 * при LTR выбрасывается `right` (панель ровно во весь экран), при RTL —
 * `left`. То есть побеждает `right: -100%`, и закрытая панель при окне 390 px
 * стоит в 390..780 — целиком за правым краем, растягивая документ вдвое.
 * Строка `left: 0` от донора это не чинит: именно её движок и игнорирует.
 * Сейчас горизонтальный скролл из этого не вылезает только потому, что в
 * megapari-skin.css на `.v9-header__menu` висит `overflow-x: clip`, поставленный
 * совсем по другому поводу. Опираться на это не стоит.
 *
 * Поэтому `inset-inline` шорткатом, а не отдельной стороной: он задаёт обе
 * стороны разом и гасит донорскую. Переопределённого блока больше нет, и
 * поведение не зависит от того, какую сторону выберет браузер. Замерено после
 * правки: на 1280 px закрытая панель стоит в -1280..-920, открытая в 0..360;
 * до 900 px она в обоих состояниях занимает 0..ширину окна, а показывает и
 * прячет её `.v9-header__menu` через visibility. Ширина документа равна
 * ширине окна на 320 / 390 / 768 / 901 / 1280 / 1440 в обоих состояниях. */
[dir="rtl"] .v9-header__menu-nav {
  inset-inline: auto -100%;
  /* Анимировался `right`; теперь двигается `left` — без этой строки панель
     не выезжает, а телепортируется. Длительность и кривая донорские. */
  transition: left 0.3s ease-in-out;
}

[dir="rtl"] .v9-header__menu[data-state="open"] .v9-header__menu-nav {
  inset-inline: auto 0;
}

@media (max-width: 900px) {
  /* На телефоне панель во всю ширину и без выезда — видимостью управляет
     `.v9-header__menu`. Повторено здесь, потому что правило выше лежит ниже
     по каскаду и иначе вернуло бы мобильную панель за край экрана. */
  [dir="rtl"] .v9-header__menu-nav {
    inset-inline: auto 0;
  }
}

/* Пункт меню: 40 px со стороны стрелки, 32 px со стороны текста. Асимметрия
   привязана к тому краю, где начинается строка, а не к левому. */
[dir="rtl"] .v9-header__menu-item {
  padding-inline: 32px 40px;
}


/* 3. Подчёркивание заголовка секции.
 *
 * Полоска 74 px шириной под `.section__title` — не рамка на всю ширину, а
 * акцент у начала строки. Оставленная на `left: 0`, при RTL она оказывается
 * под хвостом заголовка и читается как случайная черта. */
[dir="rtl"] .section__title:after {
  inset-inline: 0 auto;
}

@media (max-width: 768px) {
  /* Донор на мобиле принудительно выравнивает заголовок влево. `start` даёт
     то же самое намерение — «к началу строки» — но считает начало от
     направления документа. */
  [dir="rtl"] .section__title {
    text-align: start;
  }
}


/* 4. Маркеры списков.
 *
 * Кружок с галочкой (ul) и кружок с номером (ol) — inline-элементы перед
 * текстом пункта. Движок сам ставит их справа при RTL, но отбивку до текста
 * держит `margin-right`, который после разворота оказывается с наружной
 * стороны: маркер прилипает к строке, а справа от него повисает пустое место.
 * Неклассных списков на сайте 102, так что ошибка видна на каждой странице. */
[dir="rtl"] ul:not([class]) li:before,
[dir="rtl"] ol:not([class]) li:before {
  margin-inline: 0 8px;
}

/* Карточка игры гасит эту отбивку целиком — там маркер и текст разведены
   через `gap`. Обнуление тоже должно быть логическим, иначе оно снимет
   отступ не с той стороны и галочка уедет от своей строки. */
[dir="rtl"] .v9-games-advanced__card-info ul li:before {
  margin-inline: 0;
}


/* 5. Оглавление.
 *
 * `.v9-toc__panel` держит 30 px со стороны заголовка против 16 px со стороны
 * кнопки-раскрывашки, `.v9-toc__menu` — 36 px под вертикальную направляющую и
 * нумерацию пунктов. Обе величины отсчитываются от того края, с которого
 * начинается чтение, а не от левого. */
[dir="rtl"] .v9-toc__panel {
  padding-inline: 30px 16px;
}

@media (max-width: 768px) {
  /* На мобиле донор выравнивает падинги (`padding: 16px`) — возвращаем это
     явно: правило выше стоит ниже по каскаду и иначе оставило бы на телефоне
     лишние 14 px с одной стороны. */
  [dir="rtl"] .v9-toc__panel {
    padding-inline: 16px;
  }
}

[dir="rtl"] .v9-toc__menu {
  padding-inline: 36px 16px;
}

/* Направляющая — линия в 1 px на всю высоту меню. Она должна стоять между
   номерами и краем, а не по другую сторону от текста. */
[dir="rtl"] .v9-toc__menu:before {
  inset-inline: 16px auto;
}

[dir="rtl"] .v9-toc__menu-item__link:before {
  margin-inline: 0 4px;
}


/* 6. Ответ в FAQ.
 *
 * Тот же приём, что в оглавлении: текст ответа отбит на 29 px, и в этот отступ
 * встаёт вертикальная линия на `left: 12px`. Если развернуть только текст,
 * линия останется с другой стороны и перечеркнёт ответ по хвосту строк. */
[dir="rtl"] .v9-faq__list-item .text-block {
  padding-inline: 29px 0;
}

[dir="rtl"] .v9-faq__list-item .text-block:before {
  inset-inline: 12px auto;
}


/* 7. Номер шага в инструкции.
 *
 * Плашка с цифрой лежит абсолютом поверх картинки шага, в углу, с которого
 * начинается чтение. При RTL это правый верхний угол; оставленная слева, она
 * накрывает ту часть скриншота, куда смотрят первой. */
[dir="rtl"] .v9-step__num {
  inset-inline: 24px auto;
}

@media (max-width: 1024px) {
  [dir="rtl"] .v9-step__num {
    inset-inline: 16px auto;
  }
}


/* 8. Карточки перелинковки.
 *
 * Круглая иконка сидит в начальном углу карточки, стрелка «перейти» — в
 * противоположном. Обе прибиты абсолютом, обе меняются местами.
 *
 * Сама стрелка — символ `chevron` из спрайта, он смотрит вправо. При RTL
 * «дальше» — это влево, и неповёрнутая стрелка отправляет читателя назад.
 * Поворот на 180°, а не `scaleX(-1)`: шеврон симметричен по вертикали,
 * результат тот же, но поворот нельзя случайно применить к контейнеру с
 * текстом. */
[dir="rtl"] .v9-relink-block__card-ico {
  inset-inline: 24px auto;
}

[dir="rtl"] .v9-relink-block__card-arrow {
  inset-inline: auto 12px;
}

[dir="rtl"] .v9-relink-block__card-arrow svg,
[dir="rtl"] .v7-relink-block__card-arrow svg {
  transform: rotate(180deg);
}


/* 9. Разделитель в хлебных крошках.
 *
 * Между крошками стоит псевдоэлемент с маской-шевроном вправо. Направление
 * цепочки задаёт именно он: неразвёрнутый, он показывает «главная ← раздел»
 * при том, что цепочка читается справа налево. Развернуть маску можно только
 * заменой data-URI целиком — поворот дешевле и не расходится с темой при её
 * обновлении. */
[dir="rtl"] .v9-breadcrumbs__item:not(:last-child):after {
  transform: rotate(180deg);
}


/* 10. Таблицы.
 *
 * `text-align: left` в шапке и теле таблиц прибивает содержимое ячеек к
 * левому краю независимо от языка: арабские подписи оказываются оторваны от
 * своего столбца и прижаты к соседнему. `start` — то же намерение, но от
 * направления документа.
 *
 * Внешняя рамка строки собрана из двух ячеек: первая рисует левую грань и
 * скругляет левые углы, последняя — правые. При RTL первая ячейка встаёт
 * справа, и без обмена строка получает рамку с разрывом на одном конце и
 * двойную линию на другом, а скругления садятся на прямые углы. */
[dir="rtl"] .v2-dynamic-table__content,
[dir="rtl"] .v9-top-table tr td,
[dir="rtl"] .v9-top-table tr th {
  text-align: start;
}

[dir="rtl"] .v9-top-table tr td:first-child {
  border-left: 0;
  border-inline-start: 1px solid var(--trow-border, var(--line-secondary));
  border-radius: 0 8px 8px 0;
}

[dir="rtl"] .v9-top-table tr td:last-child {
  border-right: 0;
  border-inline-end: 1px solid var(--trow-border, var(--line-secondary));
  border-radius: 8px 0 0 8px;
}


/* 11. Кнопка «скопировать промокод».
 *
 * Поле и кнопка — одна склеенная плашка: у поля скруглён начальный край, у
 * кнопки конечный, стык остаётся прямым. Движок ставит кнопку слева, а
 * скругления остаются справа — плашка получает два прямых угла снаружи и два
 * скруглённых внутри, на стыке. Выглядит как сломанная вёрстка, и это первый
 * экран промо-страницы. */
[dir="rtl"] .v9-promocode__btn {
  border-radius: var(--button-radius) 0 0 var(--button-radius);
}


/* 12. Кнопка «наверх».
 *
 * `position: fixed` в нижнем углу со стороны конца строки — так плавающая
 * кнопка не садится туда, где строка начинается. При RTL начало строки
 * переезжает вправо, значит кнопка должна уйти влево; оставленная справа, она
 * накрывает первые символы каждой строки, до которых дотягивается. */
[dir="rtl"] .v9-to-top {
  inset-inline: auto 20px;
}


/* 13. Плагин игр.
 *
 * «Смотреть все» прижата к концу заголовка распоркой `margin-left: auto` —
 * та же история, что в шапке.
 *
 * Стрелки слайдера — маски с шевронами влево и вправо. Порядок кнопок движок
 * разворачивает сам, и «назад» уезжает вправо, но рисунок внутри остаётся
 * прежним: кнопка справа со стрелкой влево. Поворот обеих на 180° меняет их
 * местами по смыслу, не трогая 2 КБ base64 в теме плагина — при его
 * обновлении наш файл не разъедется. Кнопки только десктопные: до 768 px у
 * них `display: none`, проверять надо на широком окне. */
[dir="rtl"] .gc-section__heading-view {
  margin-inline: auto 0;
}

[dir="rtl"] .gc-slider__arrow_prev:before,
[dir="rtl"] .gc-slider__arrow_next:before {
  transform: rotate(180deg);
}


/* 14. Карточка игры в блоке «продвинутые игры».
 *
 * Круглая обложка отбита на 8 px от начального края карточки. Отбивка мелкая,
 * но она единственная, что держит иконку в сетке с заголовком ниже. */
[dir="rtl"] .v9-games-advanced__card-bg {
  margin-inline: 8px 0;
}


/* 15. Логотип в подвале.
 *
 * Распорка, прижимающая логотип к началу строки подвала. */
[dir="rtl"] .v9-footer__logo {
  margin-inline: 0 auto;
}


/* Что намеренно НЕ развёрнуто — чтобы следующий, кто откроет этот файл, не
 * добавил это «по недосмотру».
 *
 * `left: 50%` в паре с `translate(-50%, -50%)` — центрирование, а не привязка
 * к левому краю: `.gc-card__buttons`, `.burger-1__icon`, `.button_9:before`,
 * `.v9-welcome__img-btn`. Зеркалить такое — сдвинуть элемент на ширину
 * контейнера в сторону.
 *
 * `left: 0` с `width: 100%` — растяжка на всю ширину: накрывающие ссылки
 * карточек (`.v9-relink-block__card-link`, `.v7-relink-block__card-link`),
 * счётчик скриншотов, подложка меню, линия под шапкой. Стороны здесь нет.
 *
 * `flex-direction: row-reverse` (`.v9-heroscreen__info-buttons__item`,
 * `.v9-footer__app-buttons__download`) — считается от направления документа и
 * при RTL разворачивается сам. Переопределение сломало бы уже правильное.
 *
 * `rotate(90deg) / rotate(270deg)` у шевронов оглавления, FAQ и бонусной
 * выпадашки — это «вниз» и «вверх», вертикальный переключатель. Горизонтали в
 * нём нет, зеркалить нечего. По той же причине не трогаем `rotate(±45deg)` у
 * бургера: крест симметричен.
 *
 * `linear-gradient(90deg, ...)` на ховере карточки игры — декоративная вуаль
 * поверх картинки, она накрывает коробку целиком и ни к какому краю не
 * привязана. Продублировать здесь её цветовые стопы значит получить расхождение
 * при первом же обновлении плагина.
 *
 * `-webkit-gradient(linear, left top, left bottom, ...)` в hero, кнопках и
 * карточках — вертикальный градиент; `left` в нём задаёт колонку, а не
 * сторону. `--gradient-direction` равен 180deg, то есть сверху вниз.
 *
 * Тени: все `box-shadow` в теме имеют нулевое смещение по X (проверено по всем
 * 42 объявлениям). Разворачивать нечего.
 *
 * Анимации: единственная, что двигает по X, — `shine`, и она нигде не
 * подключена. Используется только `shake` — чистый `rotate`.
 *
 * Логотип, латинские названия игр, промокод, номера и код валюты остаются как
 * есть: это не вёрстка, а содержание, и оно пишется слева направо на любом
 * языке. */