/* Общие CSS стили для всех tumski страниц */
/* Выносим дублирующийся код в отдельный файл */

/* ===== АНИМАЦИИ ===== */
@keyframes zoomForward {
    0% {
        transform: translateZ(0) scale(1) translate(0, 0);
    }
    100% {
        transform: translateZ(2000px) scale(2.5) translate(-35vw, -25vh);
    }
}

@-webkit-keyframes moveForward {
    from {
        -webkit-transform: translateZ(0px) translateX(0);
        transform: translateZ(0px) translateX(0);
    }
    to {
        -webkit-transform: translateZ(500px) translateX(0);
        transform: translateZ(500px) translateX(0);
    }
}

@keyframes moveForward {
    from {
        -webkit-transform: translateZ(0px) translateX(0);
        transform: translateZ(0px) translateX(0);
    }
    to {
        -webkit-transform: translateZ(500px) translateX(0);
        transform: translateZ(500px) translateX(0);
    }
}

/* 2D-версия анимации moveForward для старых планшетов */
@-webkit-keyframes moveForward-2d {
    from {
        -webkit-transform: scale(1) translateX(0);
        transform: scale(1) translateX(0);
    }
    to {
        -webkit-transform: scale(2.5) translateX(0);
        transform: scale(2.5) translateX(0);
    }
}

@keyframes moveForward-2d {
    from {
        -webkit-transform: scale(1) translateX(0);
        transform: scale(1) translateX(0);
    }
    to {
        -webkit-transform: scale(2.5) translateX(0);
        transform: scale(2.5) translateX(0);
    }
}

/* Класс для анимации перехода */
.zoom-transition {
    animation: zoomForward 1.5s ease-in forwards !important;
}

/* ===== ОСНОВНЫЕ ЭЛЕМЕНТЫ ===== */
.image {
    width: 100%;
    height: 100%;
    position: absolute;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-color: black;
    transition: opacity 0.1s ease-in;
    backface-visibility: hidden;
    will-change: transform;
    transform-style: preserve-3d;
    transform: translateZ(0);
    overflow: hidden;
    display: block;
    pointer-events: none;
}

.next-image-container {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-color: black;
    opacity: 0;
    transition: opacity 1.5s ease-in;
    z-index: 2;
    backface-visibility: hidden;
    will-change: transform;
    transform-style: preserve-3d;
    transform: translateZ(0);
    overflow: hidden;
    animation: moveForward 40s linear infinite;
}


/* ===== СТРЕЛКИ ===== */
/* Общие стили для всех стрелок */
.custom-cursor-area,
.custom-cursor-prostoarea,
.custom-cursor-prosto-leftarea,
.custom-cursor-backarea,
.custom-cursor-leftarea,
.custom-cursor-uparea {
    position: absolute;
    z-index: 999;
    cursor: none;
    transform-origin: center center;
    will-change: transform;
    transition: transform 0.3s ease-out;
}

/* Стрелка вправо */
.custom-cursor-area {
    right: auto;
    bottom: auto;
    width: 40%;
    height: 20%;
}

/* Стрелка прямо */
.custom-cursor-prostoarea {
    right: auto;
    bottom: auto;
    width: 40%;
    height: 15%;
}

/* Стрелка назад */
.custom-cursor-backarea {
    left: auto;
    bottom: auto;
    width: 60%;
    height: 25%;
}

/* Стрелка прямо влево */
.custom-cursor-prosto-leftarea {
    right: auto;
    bottom: auto;
    width: 40%;
    height: 15%;
}

/* Стрелка влево */
.custom-cursor-leftarea {
    position: absolute !important;
    z-index: 999 !important;
    cursor: none;
    display: block !important;
    visibility: visible !important;
    pointer-events: auto !important;
    left: auto;
    bottom: auto;
    width: 150px;
    height: 150px;
}

/* Стрелка вверх */
.custom-cursor-uparea {
    position: absolute;
    z-index: 999;
    cursor: none;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 50%;
    height: 20%;
}

/* Иконки стрелок */
.custom-cursor,
.custom-cursor-prosto,
.custom-cursor-prosto-left,
.custom-cursor-back,
.custom-cursor-left,
.custom-cursor-up {
    width: 64px;
    height: 64px;
    position: absolute;
    background-size: contain;
    background-repeat: no-repeat;
    filter: drop-shadow(3px 3px 2px rgba(0, 0, 0, 0.7));
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 1000;
    cursor: pointer;
    pointer-events: none;
    transform: translateX(-50%) translateY(-50%);
    left: 50%;
    top: 50%;
}

/* Источники изображений для стрелок */
.custom-cursor {
    background-image: url('media/strelka.png');
}

.custom-cursor-prosto {
    background-image: url('media/strelka_prosto.png');
}

.custom-cursor-prosto-left {
    background-image: url('media/strelka_prosto_l.png');
}

.custom-cursor-back {
    background-image: url('media/strelka_back.png');
}

.custom-cursor-left {
    background-image: url('media/strelka_rev.png');
}

.custom-cursor-up {
    background-image: url('media/strelka_v.png');
}

/* Показываем стрелки при наведении на область - теперь в медиа-запросах */

/* ===== ГЕОМЕТКИ ===== */
.map-mark-area {
    position: absolute !important;
    z-index: 10000;
    display: flex;
    align-items: center;
    gap: 10px;
    will-change: left, top, transform;
    transition: left 0.3s ease-out, top 0.3s ease-out;
    right: auto !important;
    top: auto !important;
    width: auto;
    height: auto;
    bottom: auto !important;
    left: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    /* Позиционирование относительно .scene */
    pointer-events: auto;
    /* Принудительное создание GPU-слоя для старых iOS */
    transform: translateZ(0) !important;
}

.map-mark {
    position: absolute !important;
    z-index: 10000;
    /* Принудительное создание GPU-слоя для старых iOS */
    transform: translateZ(0) !important;
    will-change: transform !important;
}

/* Расширенная область вокруг геометки */
.map-mark::before {
    content: '';
    position: absolute;
    top: -50px;
    left: -50px;
    right: -50px;
    bottom: -50px;
    background: transparent;
    border-radius: 50%;
    pointer-events: auto;
    z-index: 9999;
}

.map-mark:hover::before {
    background: rgba(255, 255, 255, 0.05);
    transition: background 0.3s ease;
}

/* Стили для JavaScript-созданных расширенных областей */
.extended-hover-area {
    position: absolute !important;
    z-index: 9999 !important;
    pointer-events: auto !important;
}

/* Принудительное применение позиционирования через JS */
.map-mark-area[style*="left"], .map-mark-area[style*="top"] {
    position: absolute !important;
    left: var(--js-left, auto) !important;
    top: var(--js-top, auto) !important;
}

/* ===== БУМАГА И ТЕКСТ ===== */
.papera-image {
    width: 100%;
    height: auto;
    max-width: 280px;
    opacity: 1 !important;
    transition: opacity 0.3s ease;
    object-fit: contain;
    filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.3));
    display: block;
}

.content-wrapper {
    width: fit-content !important;
    min-width: fit-content !important;
    max-width: none !important;
    overflow: visible !important;
    height: 100% !important;
    min-height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Показываем элементы при наведении - теперь в медиа-запросах */

/* Принудительно показываем papera-image - только если не определен тип ввода */
.papera-image:not([data-input-type]) {
    opacity: 1 !important;
    visibility: visible !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 100% !important;
    min-height: 100% !important;
    margin: 0 !important;
    top: 0 !important;
    position: relative !important;
    flex-shrink: 0 !important;
    z-index: 1 !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover !important;
}

/* Переопределяем базовые стили для десктопного режима */
html[data-input-type="desktop"] .papera-image {
    opacity: 0 !important;
    visibility: visible !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 100% !important;
    min-height: 100% !important;
    margin: 0 !important;
    top: 0 !important;
    position: relative !important;
    flex-shrink: 0 !important;
    z-index: 1 !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover !important;
    transition: opacity 0.3s ease !important;
}

html[data-input-type="desktop"] .tumski-text {
    opacity: 0 !important;
    visibility: visible !important;
    transition: opacity 0.3s ease !important;
}

html[data-input-type="desktop"] .map-mark {
    opacity: 0 !important;
    visibility: visible !important;
    transition: opacity 0.3s ease !important;
}

/* Переопределяем базовые стили стрелок для десктопного режима */
html[data-input-type="desktop"] .custom-cursor,
html[data-input-type="desktop"] .custom-cursor-prosto,
html[data-input-type="desktop"] .custom-cursor-prosto-left,
html[data-input-type="desktop"] .custom-cursor-back,
html[data-input-type="desktop"] .custom-cursor-left,
html[data-input-type="desktop"] .custom-cursor-up {
    width: 64px !important;
    height: 64px !important;
    position: absolute !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    filter: drop-shadow(3px 3px 2px rgba(0, 0, 0, 0.7)) !important;
    opacity: 0 !important;
    transition: opacity 0.3s ease !important;
    z-index: 1000 !important;
    cursor: pointer !important;
    pointer-events: none !important;
    transform: translateX(-50%) translateY(-50%) !important;
    left: 50% !important;
    top: 50% !important;
}

/* ===== ОПРЕДЕЛЕНИЕ ТИПА ВВОДА ===== */
/* Десктопные устройства с hover и точным указателем */
@media (hover: hover) and (pointer: fine) {
    /* Элементы управления по наведению */
    .custom-cursor,
    .custom-cursor-prosto,
    .custom-cursor-prosto-left,
    .custom-cursor-back,
    .custom-cursor-left,
    .custom-cursor-up {
        opacity: 0;
        pointer-events: none;
    }
    
    .custom-cursor-area:hover .custom-cursor,
    .custom-cursor-prostoarea:hover .custom-cursor-prosto,
    .custom-cursor-prosto-leftarea:hover .custom-cursor-prosto-left,
    .custom-cursor-backarea:hover .custom-cursor-back,
    .custom-cursor-leftarea:hover .custom-cursor-left,
    .custom-cursor-uparea:hover .custom-cursor-up {
        opacity: 1 !important;
        pointer-events: auto;
    }
    
    /* Геометки по наведению */
    .map-mark-area:hover .papera-image,
    .map-mark-area:hover .tumski-text {
        opacity: 1 !important;
        visibility: visible !important;
    }
    
    .papera-image,
    .tumski-text {
        opacity: 0;
        transition: opacity 0.3s ease;
    }
}

/* Тач-устройства без hover или с грубым указателем */
@media (hover: none), (pointer: coarse) {
    /* Элементы управления всегда видны */
    .custom-cursor,
    .custom-cursor-prosto,
    .custom-cursor-prosto-left,
    .custom-cursor-back,
    .custom-cursor-left,
    .custom-cursor-up,
    .custom-cursor-area,
    .custom-cursor-prostoarea,
    .custom-cursor-prosto-leftarea,
    .custom-cursor-backarea,
    .custom-cursor-leftarea,
    .custom-cursor-uparea {
        opacity: 1 !important;
        display: block !important;
        pointer-events: auto !important;
        visibility: visible !important;
    }
    
    /* Геометки всегда видны и имеют приоритет над стрелками */
    .map-mark-area,
    .map-mark,
    .papera-image,
    .tumski-text {
        opacity: 1 !important;
        display: block !important;
        pointer-events: auto !important;
        visibility: visible !important;
    }
    
    /* Убираем эффекты наведения */
    .custom-cursor-area:hover .custom-cursor,
    .custom-cursor-prostoarea:hover .custom-cursor-prosto,
    .custom-cursor-prosto-leftarea:hover .custom-cursor-prosto-left,
    .custom-cursor-backarea:hover .custom-cursor-back,
    .custom-cursor-leftarea:hover .custom-cursor-left,
    .custom-cursor-uparea:hover .custom-cursor-up {
        opacity: 1 !important;
    }
}

/* Планшеты - приоритет геометок над стрелками */
@media (hover: none) and (pointer: coarse) and (min-width: 768px) {
    /* Принудительно устанавливаем низкий z-index для image-container на планшетах */
    .image-container {
        z-index: 1 !important;
    }
}

/* Отключаем анимацию moveForward на старых планшетах (iPad 5-9 поколения) */
@media screen and (-webkit-min-device-pixel-ratio: 1) and (min-width: 768px) and (max-width: 1024px),
       screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 768px) and (max-width: 1024px) {
    .image-container {
        -webkit-animation: none !important;
        animation: none !important;
        /* 2D-версия анимации moveForward для старых планшетов с вендорными префиксами */
        -webkit-animation: moveForward-2d 40s linear infinite;
        animation: moveForward-2d 40s linear infinite;
    }
}

/* Планшеты - приоритет геометок над стрелками (продолжение) */
@media (hover: none) and (pointer: coarse) and (min-width: 768px) {
    /* Геометки должны быть выше стрелок на планшетах */
    .map-mark-area {
        z-index: 10000 !important;
    }
    
    .map-mark {
        z-index: 10000 !important;
    }
    
    .map-mark::before {
        z-index: 9999 !important;
    }
    
    .extended-hover-area {
        z-index: 9999 !important;
    }
    
    /* Квест-геометки должны быть еще выше */
    .map-mark-area:has([data-quest-number]) {
        z-index: 10001 !important;
    }
    
    .map-mark-area:has([data-quest-number]) .map-mark {
        z-index: 10001 !important;
    }
    
    .map-mark-area:has([data-quest-number]) .map-mark::before {
        z-index: 10001 !important;
    }
    
    .map-mark-area:has([data-quest-number]) .extended-hover-area {
        z-index: 10001 !important;
    }
    
    /* Quest-marker-glow должен быть выше всех стрелок */
    .quest-marker-glow {
        z-index: 10001 !important;
    }
    
    .quest-marker-glow::after {
        z-index: 10001 !important;
    }
}

/* Экраны меньше или равные 2000px - считаем тач-устройствами */
@media (max-width: 1000px) {
    /* Принудительно устанавливаем низкий z-index для image-container на мобильных устройствах */
    .image-container {
        z-index: 1 !important;
    }
    
    /* Элементы управления всегда видны */
    .custom-cursor,
    .custom-cursor-prosto,
    .custom-cursor-prosto-left,
    .custom-cursor-back,
    .custom-cursor-left,
    .custom-cursor-up,
    .custom-cursor-area,
    .custom-cursor-prostoarea,
    .custom-cursor-prosto-leftarea,
    .custom-cursor-backarea,
    .custom-cursor-leftarea,
    .custom-cursor-uparea {
        opacity: 1 !important;
        display: block !important;
        pointer-events: auto !important;
        visibility: visible !important;
    }
    
    /* Геометки всегда видны и имеют приоритет над стрелками */
    .map-mark-area,
    .map-mark,
    .papera-image,
    .tumski-text {
        opacity: 1 !important;
        display: block !important;
        pointer-events: auto !important;
        visibility: visible !important;
    }
    
    /* Убираем эффекты наведения */
    .custom-cursor-area:hover .custom-cursor,
    .custom-cursor-prostoarea:hover .custom-cursor-prosto,
    .custom-cursor-prosto-leftarea:hover .custom-cursor-prosto-left,
    .custom-cursor-backarea:hover .custom-cursor-back,
    .custom-cursor-leftarea:hover .custom-cursor-left,
    .custom-cursor-uparea:hover .custom-cursor-up {
        opacity: 1 !important;
    }
    
    /* Геометки должны быть выше стрелок */
    .map-mark-area {
        z-index: 10002 !important;
    }
    
    .map-mark {
        z-index: 10002 !important;
    }
    
    .map-mark::before {
        z-index: 10001 !important;
    }
    
    .extended-hover-area {
        z-index: 10001 !important;
    }
    
    /* Квест-геометки должны быть еще выше */
    .map-mark-area:has([data-quest-number]) {
        z-index: 10003 !important;
    }
    
    .map-mark-area:has([data-quest-number]) .map-mark {
        z-index: 10003 !important;
    }
    
    .map-mark-area:has([data-quest-number]) .map-mark::before {
        z-index: 10002 !important;
    }
    
    .map-mark-area:has([data-quest-number]) .extended-hover-area {
        z-index: 10002 !important;
    }
    
    /* Quest-marker-glow должен быть выше всех стрелок */
    .quest-marker-glow {
        z-index: 10003 !important;
    }
    
    .quest-marker-glow::after {
        z-index: 10003 !important;
    }
}

/* Квест-геометки на всех устройствах должны быть выше стрелок */
.map-mark-area:has([data-quest-number]) {
    z-index: 10001 !important;
}

.map-mark-area:has([data-quest-number]) .map-mark {
    z-index: 10001 !important;
}

.map-mark-area:has([data-quest-number]) .map-mark::before {
    z-index: 10000 !important;
}

.map-mark-area:has([data-quest-number]) .extended-hover-area {
    z-index: 10000 !important;
}

/* Quest-marker-glow на всех устройствах должен быть выше стрелок */
.quest-marker-glow {
    z-index: 10001 !important;
}

.quest-marker-glow::after {
    z-index: 10001 !important;
}

/* ===== ПРИОРИТЕТ ПО DATA-АТРИБУТУ ===== */
/* Если JavaScript определил тип ввода, используем его */

/* ДЕСКТОПНЫЙ РЕЖИМ - элементы по наведению */
html[data-input-type="desktop"] .custom-cursor,
html[data-input-type="desktop"] .custom-cursor-prosto,
html[data-input-type="desktop"] .custom-cursor-prosto-left,
html[data-input-type="desktop"] .custom-cursor-back,
html[data-input-type="desktop"] .custom-cursor-left,
html[data-input-type="desktop"] .custom-cursor-up {
    opacity: 0 !important;
    pointer-events: none !important;
    display: block !important;
    visibility: visible !important;
}

/* Более специфичные селекторы для десктопного режима */
html[data-input-type="desktop"] .custom-cursor-area:hover .custom-cursor,
html[data-input-type="desktop"] .custom-cursor-prostoarea:hover .custom-cursor-prosto,
html[data-input-type="desktop"] .custom-cursor-prosto-leftarea:hover .custom-cursor-prosto-left,
html[data-input-type="desktop"] .custom-cursor-backarea:hover .custom-cursor-back,
html[data-input-type="desktop"] .custom-cursor-leftarea:hover .custom-cursor-left,
html[data-input-type="desktop"] .custom-cursor-uparea:hover .custom-cursor-up {
    opacity: 1 !important;
    pointer-events: auto !important;
}

/* Дополнительная специфичность для переопределения других правил */
html[data-input-type="desktop"] body .custom-cursor-area:hover .custom-cursor,
html[data-input-type="desktop"] body .custom-cursor-prostoarea:hover .custom-cursor-prosto,
html[data-input-type="desktop"] body .custom-cursor-prosto-leftarea:hover .custom-cursor-prosto-left,
html[data-input-type="desktop"] body .custom-cursor-backarea:hover .custom-cursor-back,
html[data-input-type="desktop"] body .custom-cursor-leftarea:hover .custom-cursor-left,
html[data-input-type="desktop"] body .custom-cursor-uparea:hover .custom-cursor-up {
    opacity: 1 !important;
    pointer-events: auto !important;
}

html[data-input-type="desktop"] .papera-image,
html[data-input-type="desktop"] .tumski-text {
    opacity: 0 !important;
    transition: opacity 0.3s ease !important;
    visibility: visible !important;
    display: block !important;
}

html[data-input-type="desktop"] .map-mark-area:hover .papera-image,
html[data-input-type="desktop"] .map-mark-area:hover .tumski-text,
html[data-input-type="desktop"] .map-mark-area:hover .map-mark {
    opacity: 1 !important;
    visibility: visible !important;
}

/* ТАЧ-РЕЖИМ - элементы всегда видны */
html[data-input-type="touch"] .custom-cursor,
html[data-input-type="touch"] .custom-cursor-prosto,
html[data-input-type="touch"] .custom-cursor-prosto-left,
html[data-input-type="touch"] .custom-cursor-back,
html[data-input-type="touch"] .custom-cursor-left,
html[data-input-type="touch"] .custom-cursor-up,
html[data-input-type="touch"] .custom-cursor-area,
html[data-input-type="touch"] .custom-cursor-prostoarea,
html[data-input-type="touch"] .custom-cursor-prosto-leftarea,
html[data-input-type="touch"] .custom-cursor-backarea,
html[data-input-type="touch"] .custom-cursor-leftarea,
html[data-input-type="touch"] .custom-cursor-uparea {
    opacity: 1 !important;
    display: block !important;
    pointer-events: auto !important;
    visibility: visible !important;
}

html[data-input-type="touch"] .map-mark-area,
html[data-input-type="touch"] .map-mark,
html[data-input-type="touch"] .papera-image,
html[data-input-type="touch"] .tumski-text {
    opacity: 1 !important;
    display: block !important;
    pointer-events: auto !important;
    visibility: visible !important;
}

/* ===== ДОПОЛНИТЕЛЬНЫЕ СТИЛИ ЧЕРЕЗ КЛАССЫ ===== */
/* Десктопный режим через классы */
.desktop-mode.custom-cursor,
.desktop-mode.custom-cursor-prosto,
.desktop-mode.custom-cursor-prosto-left,
.desktop-mode.custom-cursor-back,
.desktop-mode.custom-cursor-left,
.desktop-mode.custom-cursor-up {
    opacity: 0 !important;
    pointer-events: none !important;
}

.desktop-mode.papera-image,
.desktop-mode.tumski-text {
    opacity: 0 !important;
    transition: opacity 0.3s ease !important;
}

/* Тач-режим через классы */
.touch-mode.custom-cursor,
.touch-mode.custom-cursor-prosto,
.touch-mode.custom-cursor-prosto-left,
.touch-mode.custom-cursor-back,
.touch-mode.custom-cursor-left,
.touch-mode.custom-cursor-up {
    opacity: 1 !important;
    pointer-events: auto !important;
}

.touch-mode.papera-image,
.touch-mode.tumski-text {
    opacity: 1 !important;
}

/* ===== МОБИЛЬНЫЕ СТИЛИ (для обратной совместимости) ===== */
@media (max-width: 700px) {
    /* Геометки и стрелки */
    .map-mark-area, .custom-cursor-area, .custom-cursor-prostoarea, .custom-cursor-prosto-leftarea, .custom-cursor-backarea, .custom-cursor-leftarea, .custom-cursor-uparea {
        position: absolute !important;
        z-index: 998 !important;
        right: auto !important;
        bottom: auto !important;
        width: 80px !important;
        height: 80px !important;
        display: block !important;
        pointer-events: auto !important;
        opacity: 1 !important;
        top: unset !important;
        right: unset !important;
        left: unset !important;
        bottom: unset !important;
        transform: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    .map-mark, .content-wrapper, .tumski-text {
        opacity: 1 !important;
        display: block !important;
        pointer-events: auto !important;
    }
    
    /* Скрыть подписи к геометкам */
    .tumski-text {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: hidden !important;
        opacity: 0 !important;
    }
    
    /* Адаптивные изображения papera */
    .papera-image {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        max-width: none !important;
        max-height: none !important;
        min-width: 100% !important;
        min-height: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: visible !important;
        opacity: 1 !important;
        visibility: visible !important;
        top: 0 !important;
        position: relative !important;
        flex-shrink: 0 !important;
        object-fit: cover !important;
    }
    
    /* Выравнивание текста */
    .tumski-text {
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        margin: 0 !important;
        flex-shrink: 0 !important;
        z-index: 2 !important;
    }
    
    /* Направление элементов */
    .content-wrapper {
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        height: 100% !important;
        min-height: 100% !important;
    }
    
    /* Расширенные области */
    .map-mark::before {
        top: -40px;
        left: -40px;
        right: -40px;
        bottom: -40px;
    }
    
    .extended-hover-area {
        top: -60px !important;
        left: -60px !important;
        right: -60px !important;
        bottom: -60px !important;
    }
    
    /* Стрелки всегда видимы */
    .custom-cursor,
    .custom-cursor-prosto,
    .custom-cursor-prosto-left,
    .custom-cursor-back,
    .custom-cursor-left,
    .custom-cursor-up,
    .custom-cursor-area,
    .custom-cursor-prosto-leftarea,
    .custom-cursor-backarea,
    .custom-cursor-leftarea,
    .custom-cursor-uparea,
    .custom-cursor-prostoarea {
        opacity: 1 !important;
        display: block !important;
        pointer-events: auto !important;
        visibility: visible !important;
        z-index: 9999 !important;
        position: absolute !important;
        width: 80px !important;
        height: 80px !important;
        transform: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* Отдельные стили для стрелки влево */
    .custom-cursor-left {
        opacity: 1 !important;
        width: 64px !important;
        height: 64px !important;
        display: block !important;
        pointer-events: auto !important;
        visibility: visible !important;
        position: absolute !important;
        z-index: 9999 !important;
        transform: translate(-50%, -50%) !important;
        left: 50% !important;
        top: 50% !important;
    }
    
    .custom-cursor-leftarea {
        width: 50px !important;
        height: 50px !important;
        position: absolute !important;
        display: block !important;
        pointer-events: auto !important;
        visibility: visible !important;
        z-index: 9999 !important;
        transform: translate(-50%, -50%) !important;
        left: 50% !important;
        top: 50% !important;
    }
    
    /* Отдельные стили для стрелки назад */
    .custom-cursor-back {
        opacity: 1 !important;
        width: 64px !important;
        height: 64px !important;
        display: block !important;
        pointer-events: auto !important;
        visibility: visible !important;
        position: absolute !important;
        z-index: 9999 !important;
        transform: translate(-50%, -50%) !important;
        left: 50% !important;
        top: 50% !important;
    }
    
    .custom-cursor-backarea {
        width: 80px !important;
        height: 80px !important;
        position: absolute !important;
        display: block !important;
        pointer-events: auto !important;
        visibility: visible !important;
        z-index: 9999 !important;
        transform: translate(-50%, -50%) !important;
        left: 50% !important;
        top: 50% !important;
    }
    
    /* Отдельные стили для стрелки прямо влево */
    .custom-cursor-prosto-left {
        opacity: 1 !important;
        width: 64px !important;
        height: 64px !important;
        display: block !important;
        pointer-events: auto !important;
        visibility: visible !important;
        position: absolute !important;
        z-index: 9999 !important;
        transform: translate(-50%, -50%) !important;
        left: 50% !important;
        top: 50% !important;
    }
    
    .custom-cursor-prosto-leftarea {
        width: 80px !important;
        height: 80px !important;
        position: absolute !important;
        display: block !important;
        pointer-events: auto !important;
        visibility: visible !important;
        z-index: 9999 !important;
        transform: translate(-50%, -50%) !important;
        left: 50% !important;
        top: 50% !important;
    }
    
    /* Убрать эффекты наведения */
    .custom-cursor-area:hover .custom-cursor,
    .custom-cursor-prostoarea:hover .custom-cursor-prosto,
    .custom-cursor-prosto-leftarea:hover .custom-cursor-prosto-left,
    .custom-cursor-backarea:hover .custom-cursor-back,
    .custom-cursor-leftarea:hover .custom-cursor-left,
    .custom-cursor-uparea:hover .custom-cursor-up {
        opacity: 1 !important;
    }
    
    /* Базовые стили для мобильной версии */
    html, body {
        margin: 0;
        padding: 0;
        height: 100vh;
        overflow-x: auto;
        overscroll-behavior-x: contain;
    }
    
    .scene {
        height: 100vh;
    }
    
    .image-container {
        height: 100vh;
        animation: moveForward 40s linear infinite;
    }
    
    .zoom-transition {
        animation: zoomForward 1.5s ease-in forwards !important;
    }

    .image-scroll-wrapper {
        width: 100vw;
        height: 100vh;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-x;
        white-space: nowrap;
    }
    
    .image {
        width: 300vw;
        height: 100vh;
        background-size: auto 100%;
        background-repeat: no-repeat;
        background-position: left top;
        display: block;
        position: relative;
        transition: opacity 0.1s ease-in;
        backface-visibility: hidden;
        will-change: transform;
        transform-style: preserve-3d;
        transform: translateZ(0);
        pointer-events: auto !important;
    }
    
    .image::after {
        content: '';
        display: block;
        width: 300vw;
        height: 1px;
    }
    
    .next-image-container {
        pointer-events: none;
        background-size: auto 100% !important;
        background-position: left top !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* Геометки всегда видимы */
    .map-mark {
        opacity: 1 !important;
        display: block !important;
        pointer-events: auto !important;
    }
    
    /* Скрываем content-wrapper для геометок */
    .map-mark-area .content-wrapper {
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
        width: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
        pointer-events: none !important;
    }
}

/* ===== ПЛАНШЕТЫ ===== */
/* Медиа-запрос для планшетов: устройства с touch-интерфейсом и шириной от 768px */
@media (hover: none) and (pointer: coarse) and (min-width: 768px) {
    /* Кастомные курсоры для планшетов */
    [data-x-mobile] {
        position: absolute !important;
        z-index: 10;
    }
    
    /* Все геометки для планшетов (включая квест-геометки) */
    .map-mark[data-x-mobile] {
        position: absolute !important;
        z-index: 5;
    }
    
    /* Обеспечиваем видимость элементов на планшетах */
    .map-mark,
    .map-mark-area,
    [data-x-mobile] {
        opacity: 1 !important;
        display: block !important;
        pointer-events: auto !important;
        visibility: visible !important;
    }
}