/* Мобильные стили для лендинга Москва 2030 */

/* Класс для скрытия изображений на мобильных устройствах */
.mobile-hidden {
    display: none !important;
}

/* Мобильная версия - показывается только на экранах меньше 768px */



.mobile-version-section {
    display: none; /* Скрыта по умолчанию */
    position: relative;
    width: 100%;
    background: #030810;
    z-index: 9999;
    overflow: hidden; /* Ограничиваем выход элементов за границы */
}

/* Секция 1 */
.mobile-section-1 {
    position: relative;
    width: 100%;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Секция 1.1 */
.mobile-section-1-1 {
    position: relative;
    width: 100%;
    height: calc(2.356 * 100vw); /* Высота равна высоте фона */
    overflow: hidden;
}

/* Фон секции 1.1 */
.mobile-section-1-1-background {
    /* Пропорции: 320x754 */
    /* Высота = (754 / 320) * ширина = 2.356 * ширина */
    width: 100vw;
    height: calc(2.356 * 100vw); /* 754/320 = 2.356 */
    object-fit: cover;
    object-position: top left;
    display: block;
}

/* Круг Путь ИТ героя */
.mobile-hero-path-circle {
    position: absolute;
    top: 19%; /* 10% от верха секции */
    left: 3%; /* 10% от левого края секции */
    z-index: 10;
}

.mobile-hero-path-circle-image {
    /* Пропорции: 311.01x311.02 при ширине 320px */
    /* Размер = (311.01 / 320) * 100vw = 97.19vw */
    width: 97.19vw; /* 311.01px / 320px * 100vw */
    height: auto;
    display: block;
    aspect-ratio: 311.01 / 311.02;
}

/* Иконка ДИТ */
.mobile-dit-icon {
    position: absolute;
    top: 3%;
    left: 7%;
    z-index: 20;
}

.mobile-dit-icon-image {
    /* Пропорции: 58.01x20 при ширине 320px */
    /* Размер = (58.01 / 320) * 100vw = 18.13vw */
    width: 18.13vw; /* 58.01px / 320px * 100vw */
    height: auto;
    display: block;
    aspect-ratio: 58.01 / 20;
}

/* Иконка Москва 2030 */
.mobile-moscow-icon {
    position: absolute;
    top: 3%;
    right: 7%;
    z-index: 20;
}

.mobile-moscow-icon-image {
    /* Пропорции: 32.73x19.37 при ширине 320px */
    /* Размер = (32.73 / 320) * 100vw = 10.23vw */
    width: 10.23vw; /* 32.73px / 320px * 100vw */
    height: auto;
    display: block;
    aspect-ratio: 32.73 / 19.37;
}

/* Тень за героем малая */
.mobile-hero-shadow-small {
    position: absolute;
    top: 32%;
    left: 25%;
    z-index: 5;
}

.mobile-hero-shadow-small-image {
    /* Пропорции: 197.89x271 при ширине 320px */
    /* Размер = (197.89 / 320) * 100vw = 61.84vw */
    width: 61.84vw; /* 197.89px / 320px * 100vw */
    height: auto;
    display: block;
    aspect-ratio: 197.89 / 271;
}

/* Тень за героем */
.mobile-hero-shadow {
    position: absolute;
    top: 2.5%;
    left: -35%;
    z-index: 5;
}

.mobile-hero-shadow-image {
    /* Пропорции: 947.62x763 при ширине 320px */
    /* Размер = (947.62 / 320) * 100vw = 296.13vw */
    width: 296.13vw; /* 947.62px / 320px * 100vw */
    height: auto;
    display: block;
    aspect-ratio: 947.62 / 763;
}

/* Сам герой */
.mobile-hero-character {
    position: absolute;
    top: 30%;
    left: 15%;
    z-index: 15;
}

.mobile-hero-character-image {
    /* Пропорции: 230x315 при ширине 320px */
    /* Размер = (230 / 320) * 100vw = 71.88vw */
    width: 71.88vw; /* 230px / 320px * 100vw */
    height: auto;
    display: block;
    aspect-ratio: 230 / 315;
}

/* Текстовая плашка */
.mobile-text-plate {
    position: absolute;
    top: 71%;
    left: 6%;
    z-index: 20;
}

.mobile-text-plate-image {
    /* Пропорции: 274x127 при ширине 320px */
    /* Размер = (274 / 320) * 100vw = 85.63vw */
    width: 85.63vw; /* 274px / 320px * 100vw */
    height: auto;
    display: block;
    aspect-ratio: 274 / 127;
}

/* Текст для плашки */
.mobile-text-for-plate {
    position: absolute;
    top: 72.5%;
    left: 10%; /* 10% от левого края секции */
    z-index: 25;
}

.mobile-text-for-plate-image {
    /* Пропорции: 255x106 при ширине 320px */
    /* Размер = (255 / 320) * 100vw = 79.69vw */
    width: 79.69vw; /* 255px / 320px * 100vw */
    height: auto;
    display: block;
    aspect-ratio: 255 / 106;
}

/* Кнопка Путь ИТ героя */
.mobile-hero-path-button {
    position: absolute;
    top: 92%;
    left: 16%;
    z-index: 30;
}

.mobile-hero-path-button-image {
    /* Пропорции: 217.77x58.08 при ширине 320px */
    /* Размер = (217.77 / 320) * 100vw = 68.05vw */
    width: 68.05vw; /* 217.77px / 320px * 100vw */
    height: auto;
    display: block;
    aspect-ratio: 217.77 / 58.08;
}

/* Контейнер для текстов */
.mobile-texts-container {
    position: absolute;
    top: 6%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 25;
    text-align: center;
}

/* Текст 1: Павильон */
.mobile-text-1 {
    font-family: 'Unbounded', sans-serif;
    font-weight: 400;
    font-size: 2.5vw; /* 8px / 320px * 100vw */
    color: white;
    line-height: 1.2;
    margin-bottom: 2vw;
    white-space: nowrap;
}

/* Текст 2: Дата */
.mobile-text-2 {
    font-family: 'Unbounded', sans-serif;
    font-weight: 400;
    font-size: 3.44vw; /* 11px / 320px * 100vw */
    color: white;
    line-height: 1.2;
    margin-bottom: 2vw;
    white-space: nowrap;
}

/* Текст 3: Парк */
.mobile-text-3 {
    font-family: 'Unbounded', sans-serif;
    font-weight: 400;
    font-size: 2.5vw; /* 8px / 320px * 100vw */
    color: white;
    line-height: 1.2;
    margin-bottom: 2vw;
    white-space: nowrap;
}

/* Текст 4: Расписание */
.mobile-text-4 {
    font-family: 'Unbounded', sans-serif;
    font-weight: 400;
    font-size: 1.8vw; /* 8px / 320px * 100vw */
    color: white;
    line-height: 1.9;
    white-space: nowrap;
}

/* Секция 2 */
.mobile-section-2 {
    position: relative;
    width: 100%;
    min-height: 100vh;
    overflow: visible; /* Разрешаем выход элементов за границы */
}

/* Секция 2.1 */
.mobile-section-2-1 {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
}

/* Фон секции 2.1 */
.mobile-section-2-1-background {
    /* Пропорции: 320x252 */
    /* Высота = (252 / 320) * ширина = 0.788 * ширина */
    width: 100vw;
    height: calc(0.788 * 100vw); /* 252/320 = 0.788 */
    object-fit: cover;
    object-position: center;
    display: block;
}

/* Тень за героем (дубль 1 в секции 2) */
.mobile-hero-shadow-2-1 {
    position: absolute;
    top: 0.7%;
    left: -86%;
    z-index: 5;
}

.mobile-hero-shadow-2-1-image {
    /* Пропорции: 947.62x763 при ширине 320px */
    /* Размер = (947.62 / 320) * 100vw = 296.13vw */
    width: 296.13vw; /* 947.62px / 320px * 100vw */
    height: auto;
    display: block;
    aspect-ratio: 947.62 / 763;
}

/* Тень за героем (дубль 2 в секции 2) */
.mobile-hero-shadow-2-2 {
    position: absolute;
    top: -9.5%;
    left: 11%;
    z-index: 5;
}

.mobile-hero-shadow-2-2-image {
    /* Пропорции: 947.62x763 при ширине 320px */
    /* Размер = (947.62 / 320) * 100vw = 296.13vw */
    width: 296.13vw; /* 947.62px / 320px * 100vw */
    height: auto;
    display: block;
    aspect-ratio: 947.62 / 763;
}

/* Свиток пустой */
.mobile-scroll-empty {
    position: absolute;
    top: -2%; /* 10% от верха секции */
    left: -30%; /* 10% от левого края секции */
    z-index: 10;
}

.mobile-scroll-empty-image {
    /* Пропорции: 511x511 при ширине 320px */
    /* Размер = (511 / 320) * 100vw = 159.69vw */
    width: 159.69vw; /* 511px / 320px * 100vw */
    height: auto;
    display: block;
    aspect-ratio: 511 / 511;
}

/* Дракон */
.mobile-dragon {
    position: absolute;
    top: 20%; /* 10% от верха секции */
    left: -17%; /* 10% от левого края секции */
    z-index: 10;
}

.mobile-dragon-image {
    /* Пропорции: 606x551 при ширине 320px */
    /* Размер = (606 / 320) * 100vw = 189.38vw */
    width: 189.38vw; /* 606px / 320px * 100vw */
    height: auto;
    display: block;
    aspect-ratio: 606 / 551;
}

/* Тень за ноутбуком белая */
.mobile-laptop-shadow-white {
    position: absolute;
    top: 35%; /* 10% от верха секции */
    left: -50%; /* 10% от левого края секции */
    z-index: 10;
}

.mobile-laptop-shadow-white-image {
    /* Пропорции: 606x191 при ширине 320px */
    /* Размер = (606 / 320) * 100vw = 189.38vw */
    width: 189.38vw; /* 606px / 320px * 100vw */
    height: auto;
    display: block;
    aspect-ratio: 606 / 191;
}

/* Плашка для текста 1 */
.mobile-text-plate-1 {
    position: absolute;
    top: 46%; /* 10% от верха секции */
    left: 0%; /* 10% от левого края секции */
    z-index: 11;
}

.mobile-text-plate-1-image {
    /* Пропорции: 323x176 при ширине 320px */
    /* Размер = (323 / 320) * 100vw = 100.94vw */
    width: 100.94vw; /* 323px / 320px * 100vw */
    height: auto;
    display: block;
    aspect-ratio: 323 / 176;
}

/* Ноутбук */
.mobile-laptop {
    position: absolute;
    top: 37%; /* 10% от верха секции */
    left: -6.9%; /* 10% от левого края секции */
    z-index: 11;
}

.mobile-laptop-image {
    /* Пропорции: 152x163 при ширине 320px */
    /* Размер = (152 / 320) * 100vw = 47.5vw */
    width: 47.5vw; /* 152px / 320px * 100vw */
    height: auto;
    display: block;
    aspect-ratio: 152 / 163;
}

/* Мышь */
.mobile-mouse {
    position: absolute;
    top: 49%; /* 10% от верха секции */
    left: 9%; /* 10% от левого края секции */
    z-index: 11;
}

.mobile-mouse-image {
    /* Пропорции: 30x44 при ширине 320px */
    /* Размер = (30 / 320) * 100vw = 9.38vw */
    width: 9.38vw; /* 30px / 320px * 100vw */
    height: auto;
    display: block;
    aspect-ratio: 30 / 44;
}

/* Секция 2.2 */
.mobile-section-2-2 {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
}

/* Фон секции 2.2 */
.mobile-section-2-2-background {
    /* Пропорции: 320x1137 */
    /* Высота = (1137 / 320) * ширина = 3.553 * ширина */
    width: 100vw;
    height: calc(3.553 * 100vw); /* 1137/320 = 3.553 */
    object-fit: cover;
    object-position: center;
    display: block;
}

/* Космос */
.mobile-cosmos {
    position: absolute;
    top: 47%; /* 10% от верха секции */
    left: 0%; /* 10% от левого края секции */
    z-index: 10;
}

.mobile-cosmos-image {
    /* Пропорции: 326x415 при ширине 320px */
    /* Размер = (326 / 320) * 100vw = 101.88vw */
    width: 101.88vw; /* 326px / 320px * 100vw */
    height: auto;
    display: block;
    aspect-ratio: 326 / 415;
}

/* Плашка для текста 2 */
.mobile-text-plate-2 {
    position: absolute;
    top: 64%; /* 10% от верха секции */
    left: 0%; /* 10% от левого края секции */
    z-index: 10;
}

.mobile-text-plate-2-image {
    /* Пропорции: 323x255.5 при ширине 320px */
    /* Размер = (323 / 320) * 100vw = 100.94vw */
    width: 100.94vw; /* 323px / 320px * 100vw */
    height: auto;
    display: block;
    aspect-ratio: 323 / 255.5;
}

/* Герой с мечом */
.mobile-hero-with-sword {
    position: absolute;
    top: 45%; /* 10% от верха секции */
    left: -77%; /* 10% от левого края секции */
    z-index: 10;
}

.mobile-hero-with-sword-image {
    /* Пропорции: 855.95x559 при ширине 320px */
    /* Размер = (855.95 / 320) * 100vw = 267.48vw */
    width: 267.48vw; /* 855.95px / 320px * 100vw */
    height: auto;
    display: block;
    aspect-ratio: 855.95 / 559;
}

/* Секция 2.3 */
.mobile-section-2-3 {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible; /* Разрешаем выход элементов за границы */
}

/* Фон секции 2.3 */
.mobile-section-2-3-background {
    /* Пропорции: 320x166 */
    /* Высота = (166 / 320) * ширина = 0.519 * ширина */
    width: 100vw;
    height: calc(0.519 * 100vw); /* 166/320 = 0.519 */
    object-fit: cover;
    object-position: center;
    display: block;
}

/* Плашка для текста 3 */
.mobile-text-plate-3 {
    position: absolute;
    bottom: 0%;/* 10% от верха секции */
    left: 0%; /* 10% от левого края секции */
    z-index: 10;
}

.mobile-text-plate-3-image {
    /* Пропорции: 323x219.5 при ширине 320px */
    /* Размер = (323 / 320) * 100vw = 100.94vw */
    width: 100.94vw; /* 323px / 320px * 100vw */
    height: auto;
    display: block;
    aspect-ratio: 323 / 219.5;
}

/* Вертикальный меч */
.mobile-vertical-sword {
    position: absolute;
    top: -77%; /* 10% от верха секции */
    left: 37%; /* 10% от левого края секции */
    z-index: 10;
}

.mobile-vertical-sword-image {
    /* Пропорции: 285.7x362 при ширине 320px */
    /* Размер = (285.7 / 320) * 100vw = 89.28vw */
    width: 89.28vw; /* 285.7px / 320px * 100vw */
    height: auto;
    display: block;
    aspect-ratio: 285.7 / 362;
}

/* Текст 1: ИТ-Турнир */
.mobile-tournament-text-1 {
    position: absolute;
    top: 95%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 25;
    width: 80.31vw; /* 257px / 320px * 100vw */
    min-height: 73.44vw; /* 235px / 320px * 100vw */
    font-family: 'Unbounded', sans-serif;
    font-weight: 400;
    font-size: 3.44vw; /* 11px / 320px * 100vw */
    color: black;
    text-align: center;
    line-height: 1.3;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: pre-line;
    overflow: visible;
}

/* Текст 2: Дракон изменил правила */
.mobile-tournament-text-2 {
    position: absolute;
    top: 42.5%;
    left: 24%;
    z-index: 25;
    width: 68.75vw; /* 220px / 320px * 100vw */
    min-height: 33.13vw; /* 106px / 320px * 100vw */
    font-family: 'Unbounded', sans-serif;
    font-weight: 400;
    font-size: 3.44vw; /* 11px / 320px * 100vw */
    color: white;
    text-align: left;
    line-height: 1.3;
    white-space: pre-line;
    overflow: visible;
}

/* Текст 3: Простой пользователь */
.mobile-tournament-text-3 {
    position: absolute;
    top: 67%;
    left: 41%;
    z-index: 25;
    width: 50.44vw; /* 123px / 320px * 100vw */
    min-height: 3.13vw; /* 10px / 320px * 100vw */
    font-family: 'Unbounded', sans-serif;
    font-weight: 400;
    font-size: 3.44vw; /* 11px / 320px * 100vw */
    color: white;
    text-align: left;
    line-height: 1.3;
    white-space: pre;
    overflow: visible;
}

/* Текст 4: Получится ли у Претендента */
.mobile-tournament-text-4 {
    position: absolute;
    bottom: 10%;
    left: 6%;
    z-index: 25;
    width: 58.75vw; /* 188px / 320px * 100vw */
    min-height: 52.5vw; /* 168px / 320px * 100vw */
    font-family: 'Unbounded', sans-serif;
    font-weight: 400;
    font-size: 3.13vw; /* 8px / 320px * 100vw */
    color: white;
    text-align: left;
    line-height: 1.3;
    white-space: pre-line;
    overflow: visible;
}

/* Медиа-запрос для мобильных устройств */
@media (max-width: 768px) {
    /* Настройки контейнера для мобильных */
    .container {
        overflow-x: hidden;
        overflow-y: auto;
    }
    
    /* Скрываем все элементы на мобильных устройствах */
    .dit-logo,
    .moscow-logo,
    .park-text,
    .pavilion-text,
    .date-text,
    .schedule-block,
    .hero-path,
    .hero-shadow,
    .hero-shadow-duplicate,
    .hero-shadow-duplicate-2,
    .hero-shadow-duplicate-3,
    .dragon-wrapper,
    .scroll-text-wrapper,
    .hero-character,
    .it-world-element,
    .hero-sword,
    .sword-plate,
    .shadow-duplicate-second-1,
    .shadow-duplicate-second-2,
    .curtain,
    .curtain-duplicate,
    .tournament-text,
    .glow-rectangle,
    .glow-frame,
    .hero-second-block,
    .story-text,
    .second-background,
    .second-section,
    .main-third-section,
    .main-fourth-section,
    .main-fifth-section,
    .main-sixth-section,
    .main-seventh-section,
    .inner-section-3-1,
    .inner-section-4-1,
    .inner-section-3-2,
    .inner-section-3-3,
    .hero-with-rita,
    .text-block-1,
    .text-block-2,
    .text-block-3,
    .story-text-block,
    .story-text-block-2,
    .story-text-block-3,
    .rita-text-element,
    .cosmos-element,
    .hero-shadow-section-3-2,
    .hero-with-sword-behind,
    .text-main-thing,
    .text-block-for-3-2,
    .text-block-between-sections,
    .story-text-block-main,
    .story-text-block-3-2,
    .big-text-block-between-sections,
    .comics-rule-violation,
    .story-text-block-big,
    .hero-shadow-duplicate-main,
    .dragon-looking-at-heroes,
    .text-block-for-3-3-main,
    .story-text-block-3-3-main,
    .hero-shadow-duplicate-2-main,
    .battle-banner,
    .all-heroes-together,
    .hero-shadow-duplicate-4-1-1,
    .hero-shadow-duplicate-4-1-2,
    .curtain-duplicate-4-1-1,
    .curtain-duplicate-4-1-2,
    .moscow-waits-heroes,
    .text-for-section-5,
    .start-button,
    .um-frame,
    .audio-guide-text,
    .interactive-quest-text,
    .listen-button,
    .immerse-button,
    .tg-icon-duplicate-1,
    .tg-icon-duplicate-2,
    .dit-element,
    .chat-bot-element {
        display: none !important;
    }
    
    /* Показываем только синий фон */
    .full-image-section {
        background: #030810;
        min-height: 100vh;
        width: 100%;
        position: relative;
    }
    
    .full-image {
        display: none;
    }
    
    /* Показываем мобильную версию */
    .mobile-version-section {
        display: block !important;
    }
    
    /* Скрываем все остальные секции на мобильных */
    .full-image-section,
    .second-section,
    .main-third-section,
    .main-fourth-section,
    .main-fifth-section,
    .main-sixth-section,
    .main-seventh-section {
        display: none !important;
    }
}

/* Дополнительные настройки для очень маленьких экранов */
@media (max-width: 300px) {
    /* Убеждаемся, что секция 1.1 не превышает высоту фона */
    .mobile-section-1-1 {
        height: calc(2.356 * 100vw);
        min-height: auto;
    }
    
    /* Уменьшаем размеры элементов для очень маленьких экранов */
    .mobile-hero-path-circle-image {
        width: 95vw; /* Немного уменьшаем для очень маленьких экранов */
    }
    
    .mobile-hero-character-image {
        width: 70vw; /* Немного уменьшаем героя */
    }
    
    .mobile-text-plate-image {
        width: 83vw; /* Немного уменьшаем текстовую плашку */
    }
    
    .mobile-hero-path-button-image {
        width: 65vw; /* Немного уменьшаем кнопку */
    }
}

/* Секция 3 */
.mobile-section-3 {
    position: relative;
    width: 100%;
    min-height: 100vh;
    overflow: visible; /* Разрешаем выход элементов за границы */
}

/* Секция 3.1 */
.mobile-section-3-1 {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
}

/* Фон секции 3.1 */
.mobile-section-3-1-background {
    /* Пропорции: 320x486 */
    /* Высота = (486 / 320) * ширина = 1.519 * ширина */
    width: 100vw;
    height: calc(1.519 * 100vw); /* 486/320 = 1.519 */
    object-fit: cover;
    object-position: center;
    display: block;
}

/* Секция 3.2 */
.mobile-section-3-2 {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
}

/* Фон секции 3.2 */
.mobile-section-3-2-background {
    /* Пропорции: 320x937 */
    /* Высота = (937 / 320) * ширина = 2.928 * ширина */
    width: 100vw;
    height: calc(2.928 * 100vw); /* 937/320 = 2.928 */
    object-fit: cover;
    object-position: center;
    display: block;
}

/* Секция 3.3 */
.mobile-section-3-3 {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
}

/* Фон секции 3.3 */
.mobile-section-3-3-background {
    /* Пропорции: 320x1225 */
    /* Высота = (1225 / 320) * ширина = 3.828 * ширина */
    width: 100vw;
    height: calc(3.828 * 100vw); /* 1225/320 = 3.828 */
    object-fit: cover;
    object-position: center;
    display: block;
}

/* Белая тень в секции 3.2 */
.mobile-white-shadow {
    position: absolute;
    top: 12%;
    left: -40%;
    z-index: 10;
}

.mobile-white-shadow-image {
    /* Пропорции: 606x551 при ширине 320px */
    /* Размер = (606 / 320) * 100vw = 189.38vw */
    width: 189.38vw; /* 606px / 320px * 100vw */
    height: auto;
    display: block;
    aspect-ratio: 606 / 551;
}

/* Шторка с гардиной (дубль 1) в секции 3.1 */
.mobile-curtain-gardine-1 {
    position: absolute;
    top: 60%;
    left: -37%;
    z-index: 10;
    transform: rotate(5.56deg);
}

.mobile-curtain-gardine-1-image {
    /* Пропорции: 239.91x388.3 при ширине 320px */
    /* Размер = (239.91 / 320) * 100vw = 74.97vw */
    width: 74.97vw; /* 239.91px / 320px * 100vw */
    height: auto;
    display: block;
    aspect-ratio: 239.91 / 388.3;
}

/* Шторка с гардиной (дубль 2) в секции 3.1 */
.mobile-curtain-gardine-2 {
    position: absolute;
    top: 60%;
    right: -37%;
    z-index: 10;
    transform: rotate(-5.56deg);
}

.mobile-curtain-gardine-2-image {
    /* Пропорции: 239.91x388.3 при ширине 320px */
    /* Размер = (239.91 / 320) * 100vw = 74.97vw */
    width: 74.97vw; /* 239.91px / 320px * 100vw */
    height: auto;
    display: block;
    aspect-ratio: 239.91 / 388.3;
}

/* Герой с Ритой в секции 3.2 */
.mobile-hero-with-rita {
    position: absolute;
    bottom: 0%;
    left: -12%;
    z-index: 9;
}

.mobile-hero-with-rita-image {
    /* Пропорции: 425x377 при ширине 320px */
    /* Размер = (425 / 320) * 100vw = 132.81vw */
    width: 132.81vw; /* 425px / 320px * 100vw */
    height: auto;
    display: block;
    aspect-ratio: 425 / 377;
}

/* Текстовый блок в секции 3.2 */
.mobile-text-block {
    position: absolute;
    top: 11.5%;
    left: 6%;
    z-index: 9;
}

.mobile-text-block-image {
    /* Пропорции: 282x503.5 при ширине 320px */
    /* Размер = (282 / 320) * 100vw = 88.13vw */
    width: 88.13vw; /* 282px / 320px * 100vw */
    height: auto;
    display: block;
    aspect-ratio: 282 / 503.5;
}

/* Рита в секции 3.2 */
.mobile-rita {
    position: absolute;
    top: -8%;
    left: 10.5%;
    z-index: 10;
}

.mobile-rita-image {
    /* Пропорции: 251x251 при ширине 320px */
    /* Размер = (251 / 320) * 100vw = 78.44vw */
    width: 78.44vw; /* 251px / 320px * 100vw */
    height: auto;
    display: block;
    aspect-ratio: 251 / 251;
}

/* Текст Рита я даже не джун в секции 3.2 */
.mobile-rita-text {
    position: absolute;
    top: 58%;
    left: 55%;
    z-index: 10;
}

.mobile-rita-text-image {
    /* Пропорции: 131x105.53 при ширине 320px */
    /* Размер = (131 / 320) * 100vw = 40.94vw */
    width: 40.94vw; /* 131px / 320px * 100vw */
    height: auto;
    display: block;
    aspect-ratio: 131 / 105.53;
}

/* Текст 1: Победить в Турнире (секция 3.1) */
.mobile-tournament-text-3-1 {
    position: absolute;
    top: 5%;
    left: 20%;
    z-index: 25;
    width: 58.75vw; /* 188px / 320px * 100vw */
    min-height: 21.88vw; /* 70px / 320px * 100vw */
    font-family: 'Unbounded', sans-serif;
    font-weight: 400;
    font-size: 3.44vw; /* 11px / 320px * 100vw */
    color: white;
    text-align: center;
    line-height: 1.3;
    white-space: pre-line;
    overflow: visible;
}

/* Текст 2: В качестве помощника (секция 3.2) */
.mobile-tournament-text-3-2 {
    position: absolute;
    top: 19%;
    left: 11%;
    z-index: 25;
    width: 78.13vw; /* 250px / 320px * 100vw */
    min-height: 56.25vw; /* 180px / 320px * 100vw */
    font-family: 'Unbounded', sans-serif;
    font-weight: 400;
    font-size: 3.44vw; /* 11px / 320px * 100vw */
    color: white;
    text-align: center;
    line-height: 1.3;
    white-space: pre-line;
    overflow: visible;
}

/* Текст 3: На встрече Претендент (секция 3.2) */
.mobile-tournament-text-3-3 {
    position: absolute;
    top: 45%;
    left: 9%;
    z-index: 25;
    width: 81.8vw; /* 262px / 320px * 100vw */
    min-height: 30.63vw; /* 98px / 320px * 100vw */
    font-family: 'Unbounded', sans-serif;
    font-weight: 400;
    font-size: 3.44vw; /* 11px / 320px * 100vw */
    color: white;
    text-align: center;
    line-height: 1.3;
    white-space: pre-line;
    overflow: visible;
}

/* Космос в секции 3.3 */
.mobile-cosmos-3-3 {
    position: absolute;
    top: 15%; /* 10% от верха секции */
    left: -34%; /* 10% от левого края секции */
    z-index: 10;
}

.mobile-cosmos-3-3-image {
    /* Пропорции: 326x415 при ширине 320px */
    /* Размер = (326 / 320) * 100vw = 101.88vw */
    width: 141.88vw; /* 326px / 320px * 100vw */
    height: auto;
    display: block;
    aspect-ratio: 326 / 415;
}

/* Тень за героем (дубль в секции 3.3) */
.mobile-hero-shadow-3-3 {
    position: absolute;
    top: 13.5%;
    left: -20%;
    z-index: 9;
}

.mobile-hero-shadow-3-3-image {
    /* Пропорции: 947.62x763 при ширине 320px (как в оригинале) */
    /* Размер = (947.62 / 320) * 100vw = 296.13vw */
    width: 220.13vw; /* 947.62px / 320px * 100vw */
    height: auto;
    display: block;
    aspect-ratio: 947.62 / 763;
}

/* Плашка для текста 1 в секции 3.3 */
.mobile-text-plate-3-3-1 {
    position: absolute;
    top: -5%;
    left: 6%;
    z-index: 10;
}

.mobile-text-plate-3-3-1-image {
    /* Пропорции: 282x247 при ширине 320px */
    /* Размер = (282 / 320) * 100vw = 88.13vw */
    width: 88.13vw; /* 282px / 320px * 100vw */
    height: auto;
    display: block;
    aspect-ratio: 282 / 247;
}

/* Плашка для текста 2 в секции 3.3 */
.mobile-text-plate-3-3-2 {
    position: absolute;
    top: 49%;
    left: 6%;
    z-index: 10;
}

.mobile-text-plate-3-3-2-image {
    /* Пропорции: 282x353 при ширине 320px */
    /* Размер = (282 / 320) * 100vw = 88.13vw */
    width: 88.13vw; /* 282px / 320px * 100vw */
    height: auto;
    display: block;
    aspect-ratio: 282 / 353;
}

/* Герой с мечом за спиной */
.mobile-hero-with-sword-back {
    position: absolute;
    top: 13%; /* 10% от верха секции */
    left: 11%; /* 10% от левого края секции */
    z-index: 15;
}

.mobile-hero-with-sword-back-image {
    /* Пропорции: 270x526 при ширине 320px */
    /* Размер = (270 / 320) * 100vw = 84.375vw */
    width: 84.375vw; /* 270px / 320px * 100vw */
    height: auto;
    display: block;
    aspect-ratio: 270 / 526;
}

/* Круговой текст */
.mobile-circular-text {
    position: absolute;
    top: 18%; /* 10% от верха секции */
    left: 3%; /* 10% от левого края секции */
    z-index: 20;
}

.mobile-circular-text-image {
    /* Пропорции: 265.3x265.3 при ширине 320px */
    /* Размер = (265.3 / 320) * 100vw = 82.906vw */
    width: 93.906vw; /* 265.3px / 320px * 100vw */
    height: auto;
    display: block;
    aspect-ratio: 265.3 / 252.3;
}

/* Нарушение правил */
.mobile-rules-violation {
    position: absolute;
    bottom: 0%; /* 10% от верха секции */
    left: -15%; /* 10% от левого края секции */
    z-index: 25;
}

.mobile-rules-violation-image {
    /* Пропорции: 368.83x340 при ширине 320px */
    /* Размер = (368.83 / 320) * 100vw = 115.259vw */
    width: 115.259vw; /* 368.83px / 320px * 100vw */
    height: auto;
    display: block;
    aspect-ratio: 368.83 / 340;
}

/* Текст 1: Вместе они проходят все испытания (секция 3.3) */
.mobile-tournament-text-3-3-1 {
    position: absolute;
    top: -4%;
    left: 13%;
    z-index: 25;
    width: 88.13vw; /* 282px / 320px * 100vw */
    min-height: 77.19vw; /* 247px / 320px * 100vw */
    font-family: 'Unbounded', sans-serif;
    font-weight: 400;
    font-size: 3.9vw; /* 13px / 320px * 100vw */
    color: white;
    text-align: left;
    line-height: 1.3;
    white-space: pre-line;
    overflow: visible;
}

/* Текст 2: За успешным прохождением (секция 3.3) */
.mobile-tournament-text-3-3-2 {
    position: absolute;
    top: 55%;
    left: 12%;
    z-index: 25;
    width: 75vw; /* 240px / 320px * 100vw */
    min-height: 70.31vw; /* 225px / 320px * 100vw */
    font-family: 'Unbounded', sans-serif;
    font-weight: 400;
    font-size: 3.44vw; /* 11px / 320px * 100vw */
    color: white;
    text-align: left;
    line-height: 1.2;
    white-space: pre-line;
    overflow: visible;
}

/* Секция 4 */
.mobile-section-4 {
    position: relative;
    width: 100%;
    min-height: 100vh;
    overflow: visible; /* Разрешаем выход элементов за границы */
}

/* Секция 4.1 */
.mobile-section-4-1 {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
}

/* Фон секции 4.1 */
.mobile-section-4-1-background {
    /* Пропорции: 320x409 */
    /* Высота = (409 / 320) * ширина = 1.278 * ширина */
    width: 100vw;
    height: calc(1.278 * 100vw); /* 409/320 = 1.278 */
    object-fit: cover;
    object-position: center;
    display: block;
}

/* Текст 1: Однако, они успевают добраться */
.mobile-tournament-text-4-1 {
    position: absolute;
    top: -0%;
    left: 8%;
    z-index: 25;
    width: 89.69vw; /* 287px / 320px * 100vw */
    min-height: 28.44vw; /* 91px / 320px * 100vw */
    font-family: 'Unbounded', sans-serif;
    font-weight: 400;
    font-size: 3.34vw; /* 11px / 320px * 100vw */
    color: white;
    text-align: left;
    line-height: 1.2;
    white-space: pre-line;
    overflow: visible;
}



/* Секция 4.2 */
.mobile-section-4-2 {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
}

/* Фон секции 4.2 */
.mobile-section-4-2-background {
    /* Пропорции: 320x1350 */
    /* Высота = (1350 / 320) * ширина = 4.219 * ширина */
    width: 100vw;
    height: calc(4.219 * 100vw); /* 1350/320 = 4.219 */
    object-fit: cover;
    object-position: center;
    display: block;
}

/* Секция 4.3 */
.mobile-section-4-3 {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
}

/* Фон секции 4.3 */
.mobile-section-4-3-background {
    /* Пропорции: 320x816 */
    /* Высота = (816 / 320) * ширина = 2.55 * ширина */
    width: 100vw;
    height: calc(2.55 * 100vw); /* 816/320 = 2.55 */
    object-fit: cover;
    object-position: center;
    display: block;
}

/* Команда */
.mobile-team {
    position: absolute;
    bottom: -27%; /* 10% от верха секции */
    left: -23%; /* 10% от левого края секции */
    z-index: 15;
}

.mobile-team-image {
    /* Пропорции: 588x586 при ширине 320px */
    /* Размер = (588 / 320) * 100vw = 183.75vw */
    width: 183.75vw; /* 588px / 320px * 100vw */
    height: auto;
    display: block;
    aspect-ratio: 588 / 586;
}

/* Плашка для текста 1 в секции 4.2 */
.mobile-text-plate-4-2-1 {
    position: absolute;
    top: -5%; /* 10% от верха секции */
    left: 6%; /* 10% от левого края секции */
    z-index: 20;
}

.mobile-text-plate-4-2-1-image {
    /* Пропорции: 282.5x238 при ширине 320px */
    /* Размер = (282.5 / 320) * 100vw = 88.28vw */
    width: 88.28vw; /* 282.5px / 320px * 100vw */
    height: auto;
    display: block;
    aspect-ratio: 282.5 / 238;
}

/* Текст 1: Дракон – это вовсе не преграда */
.mobile-tournament-text-4-2 {
    position: absolute;
    top:-1%;
    left: 12%;
    z-index: 25;
    width: 75vw; /* 240px / 320px * 100vw */
    min-height: 45.94vw; /* 147px / 320px * 100vw */
    font-family: 'Unbounded', sans-serif;
    font-weight: 400;
    font-size: 3.44vw; /* 11px / 320px * 100vw */
    color: white;
    text-align: left;
    line-height: 1.2;
    white-space: pre-line;
    overflow: visible;
}

/* Текст 1: И помните! Главное сокровище */
.mobile-tournament-text-4-3-1 {
    position: absolute;
    top: 22%;
    left: 17%;
    z-index: 25;
    width: 68.75vw; /* 220px / 320px * 100vw */
    min-height: 24.38vw; /* 78px / 320px * 100vw */
    font-family: 'Unbounded', sans-serif;
    font-weight: 400;
    font-size: 3.44vw; /* 11px / 320px * 100vw */
    color: white;
    text-align: left;
    line-height: 1.2;
    white-space: pre-line;
    overflow: visible;
}

/* Текст 2: Москва ждет героев */
.mobile-tournament-text-4-3-2 {
    position: absolute;
    top: 33.5%;
    left: 17%;
    z-index: 25;
    width: 68.75vw; /* 220px / 320px * 100vw */
    min-height: 13.75vw; /* 44px / 320px * 100vw */
    font-family: 'Unbounded', sans-serif;
    font-weight: 400;
    font-size: 4.8vw; /* 16px / 320px * 100vw */
    color: white;
    text-align: left;
    line-height: 1.2;
    white-space: pre-line;
    overflow: visible;
}

/* Дерево */
.mobile-tree {
    position: absolute;
    bottom: 0%; /* 10% от верха секции */
    left: 0%; /* 10% от левого края секции */
    z-index: 16;
}

.mobile-tree-image {
    /* Пропорции: 320x524 при ширине 320px */
    /* Размер = (320 / 320) * 100vw = 100vw */
    width: 100vw; /* 320px / 320px * 100vw */
    height: auto;
    display: block;
    aspect-ratio: 320 / 524;
}

/* Текст ИТ-роща (первый) */
.mobile-it-grove-text-1 {
    position: absolute;
    top: 63%; /* 10% от верха секции */
    left: 15%; /* 10% от левого края секции */
    z-index: 20;
}

.mobile-it-grove-text-1-image {
    /* Пропорции: 224x91 при ширине 320px */
    /* Размер = (224 / 320) * 100vw = 70vw */
    width: 70vw; /* 224px / 320px * 100vw */
    height: auto;
    display: block;
    aspect-ratio: 224 / 91;
}

/* Кнопка начать */
.mobile-start-button {
    position: absolute;
    top: 75%; /* 10% от верха секции */
    left: 28%; /* 10% от левого края секции */
    z-index: 25;
}

.mobile-start-button-image {
    /* Пропорции: 142.77x58.08 при ширине 320px */
    /* Размер = (142.77 / 320) * 100vw = 44.62vw */
    width: 44.62vw; /* 142.77px / 320px * 100vw */
    height: auto;
    display: block;
    aspect-ratio: 142.77 / 58.08;
}

/* Плашка для текста в секции 4.3 */
.mobile-text-plate-4-3 {
    position: absolute;
    top: 18.6%; /* 10% от верха секции */
    left: 6%; /* 10% от левого края секции */
    z-index: 15;
}

.mobile-text-plate-4-3-image {
    /* Пропорции: 282x216 при ширине 320px */
    /* Размер = (282 / 320) * 100vw = 88.13vw */
    width: 88.13vw; /* 282px / 320px * 100vw */
    height: auto;
    display: block;
    aspect-ratio: 282 / 216;
}

/* Секция 5 */
.mobile-section-5 {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
}

/* Фон секции 5 */
.mobile-section-5-background {
    /* Пропорции: 320x370 */
    /* Высота = (370 / 320) * ширина = 1.156 * ширина */
    width: 100vw;
    height: calc(1.156 * 100vw); /* 370/320 = 1.156 */
    object-fit: cover;
    object-position: center;
    display: block;
}

/* Секция 6 */
.mobile-section-6 {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
}

/* Фон секции 6 */
.mobile-section-6-background {
    /* Пропорции: 320x230 */
    /* Высота = (230 / 320) * ширина = 0.719 * ширина */
    width: 100vw;
    height: calc(0.719 * 100vw); /* 230/320 = 0.719 */
    object-fit: cover;
    object-position: center;
    display: block;
}

/* Рамка УМ (дубль 1) */
.mobile-um-frame-1 {
    position: absolute;
    top: -18%; /* 10% от верха секции */
    left: 6%; /* 10% от левого края секции */
    z-index: 10;
}

.mobile-um-frame-1-image {
    /* Пропорции: 280x175 при ширине 320px */
    /* Размер = (280 / 320) * 100vw = 87.5vw */
    width: 87.5vw; /* 280px / 320px * 100vw */
    height: auto;
    display: block;
    aspect-ratio: 280 / 175;
}

/* Рамка УМ (дубль 2) */
.mobile-um-frame-2 {
    position: absolute;
    top: 40%; /* 10% от верха секции */
    left: 6%; /* 10% от левого края секции */
    z-index: 10;
}

.mobile-um-frame-2-image {
    /* Пропорции: 280x175 при ширине 320px */
    /* Размер = (280 / 320) * 100vw = 87.5vw */
    width: 87.5vw; /* 280px / 320px * 100vw */
    height: auto;
    display: block;
    aspect-ratio: 280 / 175;
}

/* Кнопка окунуться */
.mobile-dive-button {
    position: absolute;
    top: 79%; /* 10% от верха секции */
    left: 24%; /* 10% от левого края секции */
    z-index: 30;
}

.mobile-dive-button-image {
    /* Пропорции: 162.77x58.08 при ширине 320px */
    /* Размер = (162.77 / 320) * 100vw = 50.87vw */
    width: 50.87vw; /* 162.77px / 320px * 100vw */
    height: auto;
    display: block;
    aspect-ratio: 162.77 / 58.08;
}

/* Кнопка послушать */
.mobile-listen-button {
    position: absolute;
    top: 21%; /* 10% от верха секции */
    left: 24%; /* 10% от левого края секции */
    z-index: 30;
}

.mobile-listen-button-image {
    /* Пропорции: 162.77x58.08 при ширине 320px */
    /* Размер = (162.77 / 320) * 100vw = 50.87vw */
    width: 50.87vw; /* 162.77px / 320px * 100vw */
    height: auto;
    display: block;
    aspect-ratio: 162.77 / 58.08;
}

/* Белая тень (дубль в секции 6) */
.mobile-white-shadow-6 {
    position: absolute;
    top: -220%;
    left: -80%;
    z-index: 8;
}

.mobile-white-shadow-6-image {
    /* Пропорции: 606x551 при ширине 320px */
    /* Размер = (606 / 320) * 100vw = 189.38vw */
    width: 260.38vw; /* 606px / 320px * 100vw */
    height: auto;
    display: block;
    aspect-ratio: 606 / 551;
}

/* Рамка ТГ (дубль 1) */
.mobile-tg-frame-1 {
    position: absolute;
    top: 15%; /* 10% от верха секции */
    left: 6%; /* 10% от левого края секции */
    z-index: 10;
}

.mobile-tg-frame-1-image {
    /* Пропорции: 133x92 при ширине 320px */
    /* Размер = (133 / 320) * 100vw = 41.56vw */
    width: 41.56vw; /* 133px / 320px * 100vw */
    height: auto;
    display: block;
    aspect-ratio: 133 / 92;
}

/* Рамка ТГ (дубль 2) */
.mobile-tg-frame-2 {
    position: absolute;
    top: 15%; /* 10% от верха секции */
    left: 52%; /* 10% от левого края секции */
    z-index: 10;
}

.mobile-tg-frame-2-image {
    /* Пропорции: 133x92 при ширине 320px */
    /* Размер = (133 / 320) * 100vw = 41.56vw */
    width: 41.56vw; /* 133px / 320px * 100vw */
    height: auto;
    display: block;
    aspect-ratio: 133 / 92;
}

/* ДИТ в секции 6 */
.mobile-dit-6 {
    position: absolute;
    top: 42%; /* 10% от верха секции */
    left: 66%; /* 10% от левого края секции */
    z-index: 20;
}

.mobile-dit-6-image {
    /* Пропорции: 42x14 при ширине 320px */
    /* Размер = (42 / 320) * 100vw = 13.13vw */
    width: 13.13vw; /* 42px / 320px * 100vw */
    height: auto;
    display: block;
    aspect-ratio: 42 / 14;
}

/* ЧАТ-БОТ */
.mobile-chat-bot {
    position: absolute;
    top: 42%; /* 10% от верха секции */
    left: 12%; /* 10% от левого края секции */
    z-index: 20;
}

.mobile-chat-bot-image {
    /* Пропорции: 98x14 при ширине 320px */
    /* Размер = (98 / 320) * 100vw = 30.63vw */
    width: 30.63vw; /* 98px / 320px * 100vw */
    height: auto;
    display: block;
    aspect-ratio: 98 / 14;
}

/* Фиксированная шторка справа для мобильной версии */
.fixed-curtain-mobile {
    position: fixed;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    z-index: 1000;
    display: block;
}

.fixed-curtain-mobile-link {
    display: block;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.fixed-curtain-mobile-link:hover {
    transform: scale(1.05);
}

.fixed-curtain-mobile-image {
    width: 8.628vw; /* 23px / 320px * 100vw */
    height: 43.872vw; /* 117px / 320px * 100vw */
    display: block;
    object-fit: contain;
}

/* Скрываем фиксированную шторку на ПК устройствах */
@media (min-width: 769px) {
    .fixed-curtain-mobile {
        display: none !important;
    }
}

/* Иконка Москва 2030 (дубль 1) в секции 6 */
.mobile-moscow-icon-6-1 {
    position: absolute;
    top: 70%; /* 10% от верха секции */
    left: 22%; /* 10% от левого края секции */
    z-index: 20;
}

.mobile-moscow-icon-6-1-image {
    /* Пропорции: 173x44 при ширине 320px */
    /* Размер = (173 / 320) * 100vw = 54.06vw */
    width: 54.06vw; /* 173px / 320px * 100vw */
    height: auto;
    display: block;
    aspect-ratio: 173 / 44;
}

/* Текст 1: Интерактивный квест */
.mobile-tournament-text-5-1 {
    position: absolute;
    top: 59%;
    left: 12%;
    z-index: 25;
    width: 75.81vw; /* 233px / 320px * 100vw */
    min-height: 13.75vw; /* 44px / 320px * 100vw */
    font-family: 'Unbounded', sans-serif;
    font-weight: 400;
    font-size: 5vw; /* 16px / 320px * 100vw */
    color: white;
    text-align: center;
    line-height: 1.2;
    white-space: pre-line;
    overflow: visible;
}

/* Текст 2: Аудиогид */
.mobile-tournament-text-5-2 {
    position: absolute;
    top: 0%;
    left: 25%;
    z-index: 25;
    width: 52.69vw; /* 159px / 320px * 100vw */
    min-height: 13.75vw; /* 44px / 320px * 100vw */
    font-family: 'Unbounded', sans-serif;
    font-weight: 400;
    font-size: 5vw; /* 16px / 320px * 100vw */
    color: white;
    text-align: center;
    line-height: 1.2;
    white-space: pre-line;
    overflow: visible;
}