/* Custom styles for Verdad o Reto Picante */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&display=swap');

body {
    font-family: 'Montserrat', sans-serif;
    background: linear-gradient(135deg, #121212 0%, #262626 100%);
    overflow-x: hidden;
}

/* Custom card styling */
#card-container {
    background: linear-gradient(145deg, #1e1e1e 0%, #262626 100%);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
    transform-style: preserve-3d;
    transition: all 0.5s ease-in-out;
}

#card-container:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.6);
}

/* Level selection cards */
.level-card {
    border-left: 4px solid #ff0000;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.level-card:hover {
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
}

/* Fancy button hover effect */
button.bg-accent:hover {
    box-shadow: 0 0 15px rgba(255, 0, 0, 0.5);
}

/* Animations */
@keyframes cardFlip {
    0% {
        transform: rotateY(0deg);
        opacity: 1;
    }
    50% {
        transform: rotateY(90deg);
        opacity: 0;
    }
    100% {
        transform: rotateY(0deg);
        opacity: 1;
    }
}

.card-flip {
    animation: cardFlip 0.6s ease-in-out;
}

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #1a1a1a;
}

::-webkit-scrollbar-thumb {
    background: #ff0000;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #cc0000;
}