/* v2/v1 — планшет и мобильные (ширина до 1280px, где fullpage.js выключен).
   Десктоп (от 1281px) этот файл не трогает — кроме правила для #slide-number ниже.

   Шапка — уменьшенная копия десктопной сцены: ноутбук с героями (images/macheroes.png)
   на фоне top-bg.png, «700 лучших игр» над крышкой, «ОТ», провайдеры и кнопка — в экране.
   Сцена свёрстана в десктопных px и целиком масштабируется: --z = ширина экрана / видимая ширина сцены.
   --c — дополнительное увеличение контента экрана относительно сцены (на мобильных он крупнее).
   Геометрия в десктопных px: сцена 1664x1003 (macheroes.png 1303x785 x1.277),
   экран ноутбука — x 252..1201, y 245..850; верх блока с цифрами — на 222px выше верха экрана.
   Ноутбук в macheroes.png смещён влево (справа герой шире), поэтому по центру страницы ставится
   центр экрана ноутбука (x 726), а не центр картинки. */

/* Все ширины: до запуска ulslide (js/main.min.js) список цифр #slide-number стоял столбиком из 10 картинок.
   Пока у списка нет inline-стиля плагина — те же размеры и обрезка, что плагин ставит после запуска. */
#slide-number:not([style]) { position: relative; height: 134px; padding: 0; overflow: hidden; }

@media only screen and (max-width: 1280px) {
    html, body { overflow-x: hidden; }

    /* ---------- шапка ---------- */
    .top-header {
        --c: 1;
        background: url(../images/top-bg.png) no-repeat 50% 100% / cover;
        overflow: hidden;
    }
    .top-header .header-wrap {
        height: auto;
        padding: 18px 0 0;
        zoom: .56;
    }
    .top-header .logo-wrap {
        margin: 0;
        padding: 0;
        zoom: var(--c);
        position: relative;
        z-index: 2;
    }
    .top-header .top-logo { width: 354px; height: 51px; }
    .top-header .top-content {
        position: relative;
        width: 1664px;
        height: 1003px;
        margin: calc(222px * var(--c) - 245px + 24px) 0 0 calc(50% - 726px);
        background: url(../images/macheroes.png) no-repeat 0 0 / 100% 100%;
    }
    .top-header .number-wrap {
        position: absolute;
        left: 0;
        right: calc((1664px - 2 * 726px) / var(--c));   /* центр блока = центр экрана ноутбука */
        top: calc((245px - 222px * var(--c)) / var(--c));
        margin: 0;
        zoom: var(--c);
    }
    /* внутри сцены — десктопные размеры, а не мобильные правки styles.min.css */
    .top-header .number-game { left: -30px; }
    .top-header .best-games img { width: 600px; height: 145px; }
    .top-header .best-games span { font-size: 47px; line-height: 56px; }
    .top-header .top-icons { display: inline; width: 520px; }
    .top-header .top-icons-small { display: none; }
    .top-header .number-wrap .btn { margin-top: 20px; padding: 15px 85px; font-size: 43px; }

    /* ---------- общее ---------- */
    .btn-wrap { display: block; width: auto; }
    .section h3, .section-3-content { line-height: 1.1; }

    /* игры */
    .section-2 { margin: 48px 0 0; }
    .game-list-txt, .game-list { display: flex; justify-content: center; gap: 1.6%; margin: 0 auto; padding: 0 16px; max-width: 1180px; box-sizing: border-box; }
    .game-list-txt li, .game-list li { width: 23.5%; margin: 0; }
    .game-list-txt li { font-size: clamp(20px, 4.2vw, 46px); }
    .game-list { margin: 10px auto 28px; }
    .game-list li img { display: block; width: 100%; height: auto; }

    /* турниры */
    .parallax__layer--deep { margin-top: 56px; }
    .section-3-parallax-part { display: block; position: relative; padding: 0 0 40px; background-position: 50% 0; }
    .section-3-parallax-part li:nth-child(2) { display: block; padding: 0 22% 0; }
    .section-3-content { margin: 0; padding-top: clamp(150px, 26vw, 290px); font-size: clamp(32px, 5vw, 50px); }
    .section-3-parallax-part li span { font-size: clamp(15px, 1.9vw, 20px); }
    .parallax__layer--deep .btn-wrap { margin: 18px 0 0; }
    .point { width: clamp(110px, 20vw, 260px); bottom: -30px; right: 2%; }

    /* бонусы */
    .section-4 { padding-top: 64px; }
    .section-4 h3 { margin: 0 16px 24px; font-size: clamp(30px, 5vw, 46px); }
    .section-4-parallax-part { display: flex; justify-content: center; gap: 2%; width: 100%; padding: 0 16px; box-sizing: border-box; }
    .section-4-parallax-part li { float: none; display: block; }
    .section-4-parallax-part li:nth-child(2), .section-4-parallax-part li:nth-child(4) { display: none; }
    /* 90.png 274x495 и 100.png 393x500 — одной высоты */
    .section-4-parallax-part .img-50, .section-4-parallax-part .img-100 { display: block; position: static; width: auto; height: min(500px, calc((100vw - 48px) * .72)); }
    .section-4 .btn-wrap { top: 0; margin-top: 24px; }

    /* кешбэк, поинты, статусы: текст + картинка в две колонки, как на десктопе */
    .fullpage > .section:not(.top-header):not(.section-2):not(.section-4):not(.parallax__layer--deep) { height: auto; }
    .section-5, .section-6, .section-7 {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        height: auto;
        min-height: 0;
        padding: 0;
        margin: 64px auto 0;
        max-width: 1180px;
    }
    .section-6 { flex-direction: row-reverse; }
    .section-5-left-part, .section-5-right-part, .section-6-left-part, .section-6-right-part,
    .section-7-left-part, .section-7-right-part {
        position: static;
        float: none;
        display: block;
        width: 50%;
        height: auto;
        padding: 0;
        box-sizing: border-box;
    }
    .section-5-left-part, .section-6-right-part, .section-7-left-part { padding: 0 24px; }
    .section-5-left-part h3, .section-6-right-part h3, .section-7-left-part h3 { margin: 0 0 14px; font-size: clamp(32px, 4.4vw, 49px); text-align: center; }
    .section-5-left-part p, .section-6-right-part p, .section-7-left-part p { margin: 0 0 12px; font-size: 17px; line-height: 1.4; text-align: center; padding: 0; }
    .section-5-left-part p br, .section-6-right-part p br, .section-7-left-part p br { display: none; }
    .dark-hero { aspect-ratio: 1118 / 683; object-fit: cover; object-position: 50% 0; }  /* снизу у картинки белое поле */
    .section-6-left-part img, .section-5-right-part img, .img-car-small { display: block; width: 100%; height: auto; padding: 0; }
    .section-7-left-part ul { margin: 6px 0 14px; padding: 0; }
    .section-7-left-part li { padding: 0 8px; font-size: clamp(26px, 3.6vw, 42px); }
    .section-7 .btn-wrap, .btn-foot { width: 100%; margin: 28px 0 0; }

    footer { margin: 56px 0 0; padding: 16px 0 20px; min-height: 0; }
    footer .footer-icons { max-width: calc(100% - 32px); background-size: contain; background-position: 50%; }
}

/* планшет: контент экрана ноутбука чуть крупнее */
@media only screen and (max-width: 1032px) {
    .top-header { --c: 1.15; }
    .top-header .header-wrap { zoom: .58; }
}

/* мобильные: колонки друг под другом, сцена с героями во всю ширину, контент экрана крупнее */
@media only screen and (max-width: 711.98px) {
    .top-header { --c: 1.62; }
    .top-header .header-wrap { zoom: .26; padding-top: 40px; }
    .top-header .top-icons { width: 400px; }  /* правый край экрана закрывает кулак героя */

    .btn { font-size: 24px; padding: 12px 44px; }

    .section-2 { margin-top: 32px; }
    .game-list-txt, .game-list { padding: 0 10px; }
    .game-list { margin-bottom: 20px; }

    .parallax__layer--deep { margin-top: 40px; }
    .section-3-parallax-part { background-size: auto 100%; padding-bottom: 32px; }
    .section-3-parallax-part li:nth-child(2) { padding: 0 16px; }
    .section-3-content { padding-top: 96px; }
    .point { width: 104px; bottom: -36px; right: 8px; }

    .section-4 { padding-top: 56px; }
    .section-4-parallax-part { padding: 0 10px; }

    .section-5, .section-6, .section-7 { flex-direction: column; margin-top: 48px; }
    .section-5-left-part, .section-5-right-part, .section-6-left-part, .section-6-right-part,
    .section-7-left-part, .section-7-right-part { width: 100%; }
    .section-5-left-part, .section-6-right-part, .section-7-left-part { padding: 0 16px; }
    .section-5-left-part p, .section-6-right-part p, .section-7-left-part p { font-size: 16px; text-align: center; padding: 0; }
    .section-5-right-part, .section-6-left-part, .section-7-right-part { margin-top: 12px; }
    .section-7 .btn-wrap, .btn-foot { margin-top: 20px; }

    footer { margin-top: 40px; }
}

/* ширина сцены зависит от экрана плавно, где браузер умеет делить длины */
@supports (width: calc(1px * tan(atan2(1px, 1px)))) {
    @media only screen and (max-width: 1280px) {
        .top-header .header-wrap { zoom: calc(tan(atan2(100vw, 1760px))); }
    }
    @media only screen and (max-width: 1032px) {
        .top-header .header-wrap { zoom: calc(tan(atan2(100vw, 1720px))); }
    }
    @media only screen and (max-width: 711.98px) {
        .top-header .header-wrap { zoom: calc(tan(atan2(100vw, 1500px))); }
    }
}