/* Неонові рамки для елементів інтерфейсу */

/* Загальні стилі для неонових рамок */
.neon-border {
    border: 3px solid transparent;
    box-shadow: 0 0 15px rgba(255, 255, 0, 0.8);
    animation: neon-pulse 1.5s infinite alternate;
    position: relative;
    overflow: hidden;
}

/* Жовта неонова рамка (як на заголовку) */
.neon-border-yellow {
    border-color: #ffcc00;
    box-shadow: 0 0 15px rgba(255, 204, 0, 0.9);
    animation: neon-pulse-yellow 1.5s infinite alternate;
}

/* Червона неонова рамка (для кнопок режиму дебатів) */
.neon-border-red {
    border-color: #ff3333;
    box-shadow: 0 0 10px rgba(255, 51, 51, 0.7), 0 0 15px rgba(255, 51, 51, 0.4);
    animation: neon-pulse-red 2s infinite alternate;
}

/* Синя неонова рамка (для кнопок режиму розваг) */
.neon-border-blue {
    border-color: #3498db;
    box-shadow: 0 0 10px rgba(52, 152, 219, 0.7), 0 0 15px rgba(52, 152, 219, 0.4);
    animation: neon-pulse-blue 2s infinite alternate;
}

/* Зелена неонова рамка (для кнопок PVP режиму) */
.neon-border-green {
    border-color: #2ecc71;
    box-shadow: 0 0 10px rgba(46, 204, 113, 0.7), 0 0 15px rgba(46, 204, 113, 0.4);
    animation: neon-pulse-green 2s infinite alternate;
}

/* Анімація пульсації для жовтої рамки */
@keyframes neon-pulse-yellow {
    from {
        box-shadow: 0 0 8px rgba(255, 204, 0, 0.8);
    }
    to {
        box-shadow: 0 0 20px rgba(255, 204, 0, 1), 0 0 30px rgba(255, 204, 0, 0.7), 0 0 40px rgba(255, 204, 0, 0.4);
    }
}

/* Анімація пульсації для червоної рамки */
@keyframes neon-pulse-red {
    from {
        box-shadow: 0 0 5px rgba(255, 51, 51, 0.6), 0 0 8px rgba(255, 51, 51, 0.4);
    }
    to {
        box-shadow: 0 0 10px rgba(255, 51, 51, 0.8), 0 0 15px rgba(255, 51, 51, 0.5);
    }
}

/* Анімація пульсації для синьої рамки */
@keyframes neon-pulse-blue {
    from {
        box-shadow: 0 0 5px rgba(52, 152, 219, 0.6), 0 0 8px rgba(52, 152, 219, 0.4);
    }
    to {
        box-shadow: 0 0 10px rgba(52, 152, 219, 0.8), 0 0 15px rgba(52, 152, 219, 0.5);
    }
}

/* Анімація пульсації для зеленої рамки */
@keyframes neon-pulse-green {
    from {
        box-shadow: 0 0 5px rgba(46, 204, 113, 0.6), 0 0 8px rgba(46, 204, 113, 0.4);
    }
    to {
        box-shadow: 0 0 10px rgba(46, 204, 113, 0.8), 0 0 15px rgba(46, 204, 113, 0.5);
    }
}

/* Стилі для мобільної версії */
@media (max-width: 768px) {
    /* Чорний фон для мобільної версії */
    body {
        background-color: #000000 !important;
    }
    
    /* Приховуємо фонове зображення на мобільних пристроях */
    .loading-background img {
        display: none !important;
    }
    
    .loading-background .overlay {
        background-color: #000000 !important;
    }
    
    /* Зменшуємо інтенсивність світіння для економії ресурсів на мобільних пристроях */
    .neon-border {
        box-shadow: 0 0 8px rgba(255, 255, 0, 0.6);
    }
    
    /* Зменшуємо анімацію для мобільних пристроїв */
    @keyframes neon-pulse-yellow {
        from {
            box-shadow: 0 0 3px rgba(230, 184, 0, 0.6);
        }
        to {
            box-shadow: 0 0 10px rgba(230, 184, 0, 0.8), 0 0 15px rgba(230, 184, 0, 0.4);
        }
    }
    
    @keyframes neon-pulse-red {
        from {
            box-shadow: 0 0 3px rgba(231, 76, 60, 0.6);
        }
        to {
            box-shadow: 0 0 10px rgba(231, 76, 60, 0.8), 0 0 15px rgba(231, 76, 60, 0.4);
        }
    }
    
    @keyframes neon-pulse-blue {
        from {
            box-shadow: 0 0 3px rgba(92, 124, 161, 0.6);
        }
        to {
            box-shadow: 0 0 10px rgba(92, 124, 161, 0.8), 0 0 15px rgba(92, 124, 161, 0.4);
        }
    }
    
    @keyframes neon-pulse-green {
        from {
            box-shadow: 0 0 3px rgba(69, 97, 69, 0.6);
        }
        to {
            box-shadow: 0 0 10px rgba(69, 97, 69, 0.8), 0 0 15px rgba(69, 97, 69, 0.4);
        }
    }
    /* Неонові рамки для заголовка */
    .game-logo {
        border: 2px solid #e6b800 !important;
        border-radius: 8px !important;
        box-shadow: 0 0 10px rgba(230, 184, 0, 0.7) !important;
        animation: neon-pulse-yellow 2s infinite alternate !important;
    }
    
    /* Неонові рамки для кнопок режимів гри */
    #fun-mode-btn {
        border: 2px solid #3498db !important;
        box-shadow: 0 0 8px rgba(52, 152, 219, 0.7), 0 0 12px rgba(52, 152, 219, 0.4) !important;
        animation: neon-pulse-blue 2s infinite alternate !important;
    }
    
    #standard-mode-btn {
        border: 2px solid #ff3333 !important;
        box-shadow: 0 0 8px rgba(255, 51, 51, 0.7), 0 0 12px rgba(255, 51, 51, 0.4) !important;
        animation: neon-pulse-red 2s infinite alternate !important;
    }
    
    #pvp-mode-btn {
        border: 2px solid #2ecc71 !important;
        box-shadow: 0 0 8px rgba(46, 204, 113, 0.7), 0 0 12px rgba(46, 204, 113, 0.4) !important;
        animation: neon-pulse-green 2s infinite alternate !important;
    }
    
    /* Неонові рамки для лідерборду */
    .leaderboard-container {
        margin-top: 20px;
        margin-left: 10px;
        margin-right: 10px;
        border: 3px solid #ff3333 !important;
        border-radius: 8px !important;
        box-shadow: 0 0 20px rgba(255, 51, 51, 0.9) !important;
        animation: neon-pulse-red 1.5s infinite alternate !important;
        padding: 10px;
        background-color: rgba(0, 0, 0, 0.5);
    }
    
    .leaderboard-list {
        border: 2px solid #ff3333 !important;
        box-shadow: 0 0 15px rgba(255, 51, 51, 0.8) !important;
        animation: neon-pulse-red 1.5s infinite alternate !important;
    }
    
    /* Неонові рамки для селектора мови */
    #mobile-lang-select {
        border: 2px solid #e74c3c !important;
        box-shadow: 0 0 10px rgba(231, 76, 60, 0.7) !important;
        animation: neon-pulse-red 2s infinite alternate !important;
    }
    

    
    /* Покращення відображення на малих екранах */
    @media (max-width: 360px) {
        .game-logo {
            margin-left: 5px;
            margin-right: 5px;
        }
        
        .game-title {
            font-size: 20px !important;
        }
        
        .game-mode-btn {
            font-size: 10px !important;
            padding: 6px 0 !important;
        }
        
        .leaderboard-title {
            font-size: 20px !important;
        }
        
        #mobile-lang-select {
            width: 100px !important;
        }
    }

}