/* ================================================================ */
/* === СТИЛИ АДАПТАЦИИ ДЛЯ ЭКРАНА РУЛЕТКИ (ТЕЛЕФОНЫ И ПЛАНШЕТЫ) === */
/* ================================================================ */

/* ПРАВИЛА ДЛЯ ПЛАНШЕТОВ И ТЕЛЕФОНОВ (до 1024px) */
@media (max-width: 1024px) {

    #content.container {
        /* Убираем фон для мобильных, если он будет мешать */
        background-image: none;
        align-items: center; /* Центрируем по вертикали */
        padding-top: max(5px, env(safe-area-inset-top));
        padding-bottom: max(5px, env(safe-area-inset-bottom));
        padding-left: max(5px, env(safe-area-inset-left));
        padding-right: max(5px, env(safe-area-inset-right));
    }

    .hero-roulette-container {
        height: 80vh; /* Занимает 80% высоты экрана */
        margin-top: 0;
        align-items: center;
    }

    .button-container {
        position: fixed; /* Фиксируем контейнер внизу */
        bottom: 30px;
        left: 0;
        width: 100%; /* На всю ширину экрана */
        display: flex; /* Включаем Flexbox */
        justify-content: center; /* Центрируем по горизонтали */
        z-index: 10;
        pointer-events: none; /* Контейнер не должен ловить клики */
    }

    .button_stop {
        pointer-events: auto; /* А вот кнопка должна */
        margin-top: 0;
        padding: 15px 50px;
        font-size: 22px;
    }
}

/* ПРАВИЛА ТОЛЬКО ДЛЯ ТЕЛЕФОНОВ (до 768px) */
@media (max-width: 768px) {
    .hero-roulette-container {
        perspective: 800px; /* Уменьшаем глубину перспективы */
    }

    .roulette-hero-slot {
        /* Герой по центру занимает почти всю ширину */
        width: 80vw;
        height: 70vh;
    }

        .roulette-hero-slot.pos-left {
            /* Левый герой уезжает дальше и становится меньше */
            transform: translateX(-75%) scale(0.5);
            filter: drop-shadow(0 5px 15px rgba(0, 0, 0, 0.5)) blur(3px);
        }

        .roulette-hero-slot.pos-right {
            /* Правый герой уезжает дальше и становится меньше */
            transform: translateX(75%) scale(0.5);
            filter: drop-shadow(0 5px 15px rgba(0, 0, 0, 0.5)) blur(3px);
        }

        /* Для центрального героя на мобильных убираем Z-смещение, чтобы не было искажений */
        .roulette-hero-slot.pos-center {
            transform: translateZ(0) scale(1);
        }

    .button_stop {
        font-size: 20px;
        padding: 12px 40px;
        width: 80%;
        max-width: 300px;
    }
}