/* Bonus Button Animation & Game Fullscreen Styles */

/* Равномерная медленная стальная анимация для кнопки Бонусные предложения */
.shimmer-button {
    position: relative;
    background: linear-gradient(
        90deg,
        #2d3748 0%,
        #4a5568 20%,
        #718096 40%,
        #a0aec0 50%,
        #e2e8f0 60%,
        #a0aec0 70%,
        #718096 80%,
        #4a5568 90%,
        #2d3748 100%
    );
    background-size: 300% 100%;
    animation: steelFlow 30s linear infinite;
    border: 1px solid #4a5568;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.15),
        0 1px 3px rgba(0, 0, 0, 0.2);
}

.shimmer-button span {
    position: relative;
    z-index: 2;
    background: linear-gradient(
        90deg,
        #ffffff 0%,
        #ffffff 20%,
        #ffffff 40%,
        #1a202c 50%,
        #000000 60%,
        #1a202c 70%,
        #ffffff 80%,
        #ffffff 90%,
        #ffffff 100%
    );
    background-size: 300% 100%;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: textFlow 30s linear infinite;
}

@keyframes steelFlow {
    0% {
        background-position: 300% 0;
    }
    100% {
        background-position: -300% 0;
    }
}

@keyframes textFlow {
    0% {
        background-position: 300% 0;
    }
    100% {
        background-position: -300% 0;
    }
}

/* Golden Tournament Button Animation */
.gold-shimmer-button {
    position: relative;
    background: linear-gradient(
        90deg,
        #6d4c14 0%,
        #8b6220 20%,
        #b8892c 40%,
        #f0c75e 50%,
        #ffd700 60%,
        #f0c75e 70%,
        #b8892c 80%,
        #8b6220 90%,
        #6d4c14 100%
    );
    background-size: 300% 100%;
    animation: goldFlow 30s linear infinite;
    border: 1px solid #d4af37;
    box-shadow:
        inset 0 1px 0 rgba(255, 215, 0, 0.3),
        0 1px 3px rgba(0, 0, 0, 0.3),
        0 0 15px rgba(255, 215, 0, 0.2);
}

.gold-shimmer-button span {
    position: relative;
    z-index: 2;
    background: linear-gradient(
        90deg,
        #ffffff 0%,
        #ffffff 20%,
        #ffffff 40%,
        #3d2a0a 50%,
        #1a120a 60%,
        #3d2a0a 70%,
        #ffffff 80%,
        #ffffff 90%,
        #ffffff 100%
    );
    background-size: 300% 100%;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: goldTextFlow 30s linear infinite;
    font-weight: 600;
}

@keyframes goldFlow {
    0% {
        background-position: 300% 0;
    }
    100% {
        background-position: -300% 0;
    }
}

@keyframes goldTextFlow {
    0% {
        background-position: 300% 0;
    }
    100% {
        background-position: -300% 0;
    }
}

/* iOS полноэкранный режим */
.ios-fullscreen-mode {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important; /* Dynamic viewport height для мобильных */
    z-index: 9999 !important;
    background: #000 !important;
}

.ios-fullscreen-active {
    overflow: hidden !important;
    position: fixed !important;
    width: 100% !important;
    height: 100% !important;
}

/* Дополнительные стили для iOS Safari */
@supports (-webkit-touch-callout: none) {
    .ios-fullscreen-mode {
        /* Поддержка safe area для iOS */
        padding-top: env(safe-area-inset-top);
        padding-bottom: env(safe-area-inset-bottom);
        padding-left: env(safe-area-inset-left);
        padding-right: env(safe-area-inset-right);
    }

    .ios-fullscreen-mode iframe {
        width: 100% !important;
        height: calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
        height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
    }
}

/* Скрытие элементов браузера на iOS в полноэкранном режиме */
.ios-fullscreen-active .header,
.ios-fullscreen-active #sidebar,
.ios-fullscreen-active #sidebarOverlay {
    display: none !important;
}

/* Дополнительные стили для мобильного полноэкранного режима */
.ios-fullscreen-mode {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    -webkit-overflow-scrolling: touch;
}

/* Принудительные стили для Android и других мобильных */
@media screen and (max-width: 1024px) {
    .ios-fullscreen-active #gameOverlayMobile iframe,
    .ios-fullscreen-active .ios-fullscreen-mode iframe {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        border: none !important;
        z-index: 10000 !important;
    }
}

/* Скрытие заголовка игры в полноэкранном режиме на iOS */
.ios-fullscreen-active #gameOverlayMobile .bg-gray-900,
.ios-fullscreen-active .ios-fullscreen-mode .bg-gray-900 {
    display: none !important;
}

/* Iframe занимает весь экран в iOS полноэкранном режиме */
.ios-fullscreen-active #gameOverlayMobile iframe,
.ios-fullscreen-active .ios-fullscreen-mode iframe {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    max-width: none !important;
    max-height: none !important;
    min-width: 100vw !important;
    min-height: 100vh !important;
    border: none !important;
    z-index: 10000 !important;
    display: block !important;
    visibility: visible !important;
    transform: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Контейнер iframe в полноэкранном режиме */
.ios-fullscreen-active #gameOverlayMobile .flex-1,
.ios-fullscreen-active .ios-fullscreen-mode .flex-1 {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
}

/* Контроль загрузчика в полноэкранном режиме */
.ios-fullscreen-active #gameLoadingIndicatorMobile {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 10001 !important;
    background: rgba(0, 0, 0, 0.9) !important;
}

/* Скрытие заголовка игры в полноэкранном режиме */
.game-fullscreen-active #gameOverlayMobile .bg-gray-900 {
    display: none !important;
}

/* Показ полноэкранного заголовка в фулскрине */
.game-fullscreen-active #fullscreenGameHeader {
    display: flex !important;
    z-index: 999999 !important;
    pointer-events: auto !important;
    position: fixed !important;
}

/* Iframe занимает весь экран в полноэкранном режиме */
.game-fullscreen-active #gameOverlayMobile .flex-1 {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
}

.game-fullscreen-active #gameOverlayMobile iframe {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    border: none !important;
    z-index: 9999 !important;
    pointer-events: auto !important;
}

/* Убеждаемся что заголовок поверх всего */
#fullscreenGameHeader {
    pointer-events: auto !important;
}

#fullscreenGameHeader button {
    pointer-events: auto !important;
    cursor: pointer !important;
}

/* Металлический лоадер с переливанием */
.metallic-logo-loader {
    position: relative;
    animation: pulse 2s ease-in-out infinite alternate;
}

.metallic-logo-loader img {
    filter:
        brightness(1.2)
        contrast(1.3)
        saturate(0.8)
        drop-shadow(0 0 20px rgba(255, 255, 255, 0.3));
    animation: metallicShine 3s ease-in-out infinite;
}

@keyframes metallicShine {
    0% {
        filter:
            brightness(1.2)
            contrast(1.3)
            saturate(0.8)
            hue-rotate(0deg)
            drop-shadow(0 0 20px rgba(255, 255, 255, 0.3));
    }
    25% {
        filter:
            brightness(1.5)
            contrast(1.5)
            saturate(1.2)
            hue-rotate(30deg)
            drop-shadow(0 0 30px rgba(255, 223, 0, 0.5));
    }
    50% {
        filter:
            brightness(1.8)
            contrast(1.7)
            saturate(1.5)
            hue-rotate(60deg)
            drop-shadow(0 0 40px rgba(255, 255, 255, 0.7));
    }
    75% {
        filter:
            brightness(1.5)
            contrast(1.5)
            saturate(1.2)
            hue-rotate(30deg)
            drop-shadow(0 0 30px rgba(255, 223, 0, 0.5));
    }
    100% {
        filter:
            brightness(1.2)
            contrast(1.3)
            saturate(0.8)
            hue-rotate(0deg)
            drop-shadow(0 0 20px rgba(255, 255, 255, 0.3));
    }
}

@keyframes pulse {
    0% {
        transform: scale(1);
    }
    100% {
        transform: scale(1.05);
    }
}

/* Дополнительный эффект - блеск поверх логотипа */
.metallic-logo-loader::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.4),
        transparent
    );
    animation: shine 2.5s ease-in-out infinite;
}

@keyframes shine {
    0% {
        left: -100%;
    }
    100% {
        left: 100%;
    }
}