/* =====================================================================
   polish.css — единый стиль внутренних страниц (2026-09-27)
   Подключается последним, поэтому правила здесь побеждают styles.css.
   Цвета взяты из тёмной темы главной/«Возможностей»:
     фон #080b26, карточка #151b45, акцент #c3c9ff, шапка #2d3ac6,
     градиент призыва #2d3ac6 → #6640dd → #a94bef.
   ===================================================================== */


/* ---------- 1. Основная кнопка призыва ----------
   .Button__container переопределён ниже в styles.css стеклянным стилем
   (для фиолетового фона главной) и на странице игры перебивал фон
   .GamePage__cta — кнопка «Забронировать» была белой на белом. */
.GamePage__cta.Button__container,
.GameText__cta.Button__container,
.ErrorPage__cta.Button__container {
    background: linear-gradient(120deg, #3242d3 0%, #6640dd 55%, #a94bef 100%);
    border: 1px solid rgba(255, 255, 255, .22);
    color: #fff;
    font-weight: 700;
    padding: 14px 30px;
    border-radius: 999px;
    box-shadow: 0 12px 28px rgba(102, 64, 221, .38), 0 1px 0 rgba(255, 255, 255, .25) inset;
    backdrop-filter: none;
}

.GamePage__cta.Button__container:hover,
.GameText__cta.Button__container:hover,
.ErrorPage__cta.Button__container:hover {
    background: linear-gradient(120deg, #3a4ae0 0%, #7250ea 55%, #b35cf5 100%);
    color: #fff;
    border-color: rgba(255, 255, 255, .4);
    transform: translateY(-1px);
    box-shadow: 0 16px 34px rgba(102, 64, 221, .5), 0 1px 0 rgba(255, 255, 255, .3) inset;
}

.GamePage__cta.Button__container:focus-visible,
.GameText__cta.Button__container:focus-visible,
.ErrorPage__cta.Button__container:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
}


/* ---------- 2. Каталог игр в тёмной теме ---------- */
body.page-dark .GamesPageHeader__container {
    margin-top: 32px;
}

body.page-dark .GamesPageHeader__titleWrapper {
    background: linear-gradient(-190deg, #2d3ac6 18%, #6640dd 58%, #a94bef 100%);
    box-shadow: 0 16px 34px rgba(55, 35, 250, .28);
}

body.page-dark .GamesPageTags__tag {
    border-width: 1px;
    border-color: rgba(255, 255, 255, .7);
    border-radius: 999px;
    padding: 5px 13px;
}

body.page-dark .GamesPageTags__tag:hover {
    background: rgba(255, 255, 255, .12);
}

body.page-dark .GamesPageTags__tag.active {
    color: #2d3ac6;
    background: #fff;
    border-color: #fff;
}

body.page-dark .GameCard__title {
    color: #fff;
    font-size: 21px;
}

body.page-dark .GameCard__imageWrapper {
    background: #151b45;
    border: 1px solid rgba(255, 255, 255, .08);
}

body.page-dark .GameCard__tags {
    color: rgba(255, 255, 255, .5);
}

/* Карточка не «прыгает» целиком — приподнимается картинка */
body.page-dark .GameCard__card:hover {
    transform: none;
}

body.page-dark .GameCard__card:hover .GameCard__imageWrapper {
    border-color: rgba(255, 255, 255, .3);
    box-shadow: 0 18px 38px rgba(8, 11, 38, .55);
}

body.page-dark .GameCard__card:hover .GameCard__title {
    background: linear-gradient(120deg, #c3c9ff, #e1b1ff);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

body.page-dark .GameCard__link:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 6px;
    border-radius: 16px;
}

body.page-dark .GamesCatalog__list {
    padding-top: 28px;
}

@media (max-width: 768px) {
    body.page-dark .GamesPageHeader__container {
        margin-top: 20px;
    }
    body.page-dark .GameCard__title {
        font-size: 19px;
    }
    body.page-dark .GamesCatalog__list {
        gap: 26px;
        padding-bottom: 72px;
    }
}


/* ---------- 3. Страница игры в тёмной теме ---------- */
body.page-dark .GamePage__page {
    padding-top: 36px;
}

body.page-dark .GamePage__title {
    color: #fff;
}

body.page-dark .GamePage__tags {
    color: rgba(255, 255, 255, .5);
}

body.page-dark .GamePage__description {
    color: rgba(255, 255, 255, .75);
    font-size: 15px;
    line-height: 1.65;
}

body.page-dark .GamePage__description p {
    margin: 0 0 10px;
}

body.page-dark .GamePage__media {
    background: #0c1030;
}

body.page-dark .game-media-swiper {
    --swiper-theme-color: #fff;
    --swiper-navigation-size: 26px;
}

body.page-dark .GamePage__thumb {
    border: 1px solid rgba(255, 255, 255, .1);
}

body.page-dark .GamePage__thumb.swiper-slide-thumb-active {
    border-color: rgba(255, 255, 255, .6);
}

body.page-dark .GameText__title {
    color: #fff;
}

body.page-dark .GameText__p,
body.page-dark .GameText__list {
    color: rgba(255, 255, 255, .72);
}

body.page-dark .GameText__list li::marker {
    color: #a94bef;
}

body.page-dark .GameSimilar__item {
    border-color: rgba(255, 255, 255, .14);
    background: rgba(255, 255, 255, .04);
    color: #c3c9ff;
    border-radius: 999px;
}

body.page-dark .GameSimilar__item:hover {
    background: rgba(255, 255, 255, .1);
    border-color: rgba(255, 255, 255, .45);
    color: #fff;
}


/* ---------- 4. Хлебные крошки на тёмном фоне ----------
   Синие ссылки #3242d3 почти сливались с тёмно-синим фоном. */
body.page-dark .GameCrumbs,
body.page-dark .GameCrumbs__current {
    color: rgba(255, 255, 255, .5);
}

body.page-dark .GameCrumbs a {
    color: #c3c9ff;
}

body.page-dark .GameCrumbs a:hover {
    color: #fff;
}


/* ---------- 5. «Возможности»: без одинокой карточки во втором ряду ---------- */
@media (min-width: 1180px) {
    .Scen__grid {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    }
    .Scen__cardTitle {
        font-size: 19px;
    }
}

@media (min-width: 641px) and (max-width: 1179px) {
    .Scen__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    /* нечётная последняя карточка — на всю ширину, картинка слева */
    .Scen__card:last-child:nth-child(odd) {
        grid-column: 1 / -1;
        flex-direction: row;
    }
    .Scen__card:last-child:nth-child(odd) .Scen__cardImage {
        flex: 0 0 46%;
        aspect-ratio: auto;
        min-height: 190px;
    }
}


/* ---------- 6. Шапка на телефоне ----------
   Было: логотип, меню в две строки, отдельной строкой «Профиль» — ~210 px.
   Стало: логотип + «Профиль» в одну строку, меню одной строкой под ними. */
@media (max-width: 768px) {
    .Header__header {
        padding: 10px 0 8px;
    }

    .Header__container {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 8px 12px;
    }

    .Header__logo {
        order: 1;
        margin: 0;
    }

    .Header__logo img {
        height: 22px !important;
    }

    .Header__userMenu {
        order: 2;
        margin-left: auto;
    }

    .Header__menu {
        order: 3;
        flex: 0 0 100%;
    }

    .Header__menu .Header__menuList {
        flex-wrap: nowrap;
        justify-content: space-between;
        gap: 6px;
        max-width: 360px;
        margin: 0 auto;
    }

    .Header__menu .Header__menuItem {
        font-size: 15px;
        white-space: nowrap;
    }

    .Header__profileBtn {
        padding: 7px 14px;
        font-size: 14px;
        gap: 6px;
    }

    .Header__profileIcon {
        width: 16px;
        height: 16px;
    }

    .Header__header.is-scrolled {
        padding: 8px 0;
    }
}

@media (max-width: 340px) {
    .Header__menu .Header__menuItem {
        font-size: 13.5px;
    }
    .Header__profileBtn span {
        display: none;
    }
}


/* ---------- 7. Подвал: контакты и документы ---------- */
.Footer__link[data-cookie-settings] {
    cursor: pointer;
}

.Footer__mail {
    color: #fff;
    text-decoration: none;
}

.Footer__mail:hover {
    text-decoration: underline;
}

/* На телефоне всё в подвале по центру — документы тоже (раньше были прижаты влево) */
@media (max-width: 768px) {
    .Footer__docs {
        align-items: center;
        max-width: 320px;
    }
    .Footer__docs .Footer__link {
        justify-content: center;
    }
    /* блок «Игры» на телефоне — с теми же полями, что и карточки */
    .GamesPageHeader__container {
        padding-left: 18px;
        padding-right: 18px;
    }
}


/* ---------- 8. Страница ошибки и юридические страницы ---------- */
.ErrorPage {
    padding: 72px 0 96px;
    text-align: center;
}

.ErrorPage__code {
    font-size: clamp(72px, 18vw, 140px);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -.04em;
    background: linear-gradient(120deg, #c3c9ff, #a94bef);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin: 0 0 12px;
}

.ErrorPage__title {
    font-size: clamp(24px, 5vw, 34px);
    font-weight: 700;
    margin: 0 0 12px;
}

.ErrorPage__text {
    color: rgba(255, 255, 255, .7);
    font-size: 16px;
    max-width: 46ch;
    margin: 0 auto 28px;
}

.ErrorPage__links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px 20px;
    margin-top: 28px;
}

.ErrorPage__links a {
    color: #c3c9ff;
    border-bottom: 1px solid rgba(195, 201, 255, .35);
}

.ErrorPage__links a:hover {
    color: #fff;
    border-bottom-color: #fff;
}

.ErrorPage__cta.Button__container {
    display: inline-flex;
}

.Legal__doc {
    max-width: 76ch;
}

.Legal__meta {
    color: rgba(255, 255, 255, .5);
    font-size: 14px;
    margin: -18px 0 30px;
}

.Legal__doc h2 {
    font-size: 20px;
    font-weight: 700;
    margin: 30px 0 10px;
}

.Legal__doc p,
.Legal__doc li {
    color: rgba(255, 255, 255, .78);
    font-size: 15.5px;
    line-height: 1.7;
}

.Legal__doc p {
    margin: 0 0 12px;
}

.Legal__doc ul {
    margin: 0 0 14px 20px;
    list-style: disc;
}

.Legal__doc li {
    margin-bottom: 4px;
}

.Legal__doc li::marker {
    color: #a94bef;
}

.Legal__doc a {
    color: #c3c9ff;
    text-decoration: underline;
}

.Legal__doc table {
    width: 100%;
    border-collapse: collapse;
    margin: 6px 0 18px;
    font-size: 14.5px;
}

.Legal__tableWrap {
    overflow-x: auto;
}

.Legal__doc th,
.Legal__doc td {
    text-align: left;
    vertical-align: top;
    padding: 10px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
    color: rgba(255, 255, 255, .78);
}

.Legal__doc th {
    color: #fff;
    font-weight: 600;
}

.Legal__btn {
    display: inline-flex;
    margin: 4px 0 18px;
    padding: 10px 18px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .4);
    background: transparent;
    color: #fff;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.Legal__btn:hover {
    background: rgba(255, 255, 255, .1);
}


/* ---------- 9. Блок «Полезное из блога» на главной ----------
   Заголовок взят из тёмных страниц (.Scen__h2), но на главной нет
   body.page-dark, и он наследовал почти чёрный цвет на тёмном фоне. */
.Blog__embed .Scen__h2 {
    color: #fff;
}


/* ---------- 10. Меню на телефонах: переход с первого касания ----------
   Подчёркивание по :hover на сенсорных экранах превращало первое касание
   в «наведение», и переходить приходилось вторым. Эффект — только для мыши. */
@media (hover: none) {
    .Header__menuLink::after {
        display: none;
    }
}

.Header__menuLink,
.Header__profileBtn,
#logo {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}


/* ---------- 11. Модалки «Тарифы» / «Что в комплекте» ----------
   Tailwind здесь собран с !important в @layer utilities — обычными правилами
   его не перебить. Поэтому:
   - цвета: Tailwind берёт их из переменных (var(--color-gray-800)) — задаём
     переменные обычными hex-цветами внутри окна. Заодно это чинит старые
     iPhone (Safari < 15.4 не понимает oklch(), и цены становились невидимыми);
   - слой: пока окно открыто, опускаем фиксированную шапку ниже окна
     (шапка z-index 100, окно — z-50 из Tailwind). */
.TariffModal__card {
    --color-gray-500: #6b7280;
    --color-gray-600: #4b5563;
    --color-gray-700: #374151;
    --color-gray-800: #1f2937;
}

body:has(div[id^="modal-"]:not(.hidden)) .Header__header {
    z-index: 40;
}

/* 12. «Как это работает»: на средних экранах (~900–1200 px) пара картинок была шире
   карточки — вылезала за край и наезжала на соседний слайд. Две картинки делят
   ширину пополам (gap-8 = 2rem), высоту по-прежнему ограничивает max-h из разметки. */
.stepSlider .Card__thumb { overflow: hidden; }
.stepSlider .Card__thumb > div { width: 100%; min-width: 0; }
.stepSlider .Card__thumb img:not(:only-of-type) {
    min-width: 0;
    max-width: calc(50% - 1rem);
    height: auto;
    object-fit: contain;
}