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

body {
    font-family: 'Kanit', sans-serif;
    background-color: #0a0a1a;
    color: white;
    overflow-x: hidden;
}

.neon-text {
    color: white;
    text-shadow: 
        0 0 5px #00f0ff,
        0 0 10px #00f0ff,
        0 0 20px rgba(0, 240, 255, 0.5);
    font-family: 'Orbitron', sans-serif;
}

.neon-text-alt {
    color: white;
    text-shadow: 
        0 0 5px #ff00f0,
        0 0 10px #ff00f0,
        0 0 20px rgba(255, 0, 240, 0.5);
}

.neon-text-magenta {
    color: white;
    text-shadow: 
        0 0 5px #ff00f0,
        0 0 10px #ff00f0;
}

.glass-panel {
    background: rgba(10, 10, 26, 0.6);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(0, 240, 255, 0.3);
    box-shadow: 
        0 0 15px rgba(0, 240, 255, 0.3),
        inset 0 0 15px rgba(0, 240, 255, 0.1);
}

.neon-glow-blue {
    filter: drop-shadow(0 0 5px #00f0ff);
}

.neon-glow-magenta {
    filter: drop-shadow(0 0 5px #ff00f0);
}

.neon-input-glow {
    box-shadow: 0 0 10px rgba(0, 240, 255, 0.5);
}

.neon-button-glow {
    box-shadow: 0 0 15px rgba(0, 240, 255, 0.7), 0 0 10px rgba(255, 0, 240, 0.5);
    transition: all 0.3s ease;
}

.neon-button-glow:hover {
    box-shadow: 0 0 20px rgba(0, 240, 255, 0.9), 0 0 15px rgba(255, 0, 240, 0.7);
    transform: translateY(-2px);
}
.game-thumbnail {
    width: 100px;
    height: 100px;
    border: 2px solid #00f0ff;
    border-radius: 8px;
    background: rgba(0, 240, 255, 0.05);
    box-shadow: 0 0 10px rgba(0, 240, 255, 0.3);
    transition: all 0.3s ease;
    background-image: url('http://static.photos/casino/200x200');
    background-size: cover;
    background-position: center;
    flex-shrink: 0;
}
.game-thumbnail-sm {
    width: 80px;
    height: 80px;
    border: 2px solid #00f0ff;
    border-radius: 8px;
    background: rgba(0, 240, 255, 0.05);
    box-shadow: 0 0 8px rgba(0, 240, 255, 0.3);
    background-image: url('http://static.photos/casino/200x200');
    background-size: cover;
    background-position: center;
    flex-shrink: 0;
}
.casino-chip, .slot-reel, .dice {
    position: absolute;
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0.2;
    z-index: 0;
}

.casino-chip {
    width: 60px;
    height: 60px;
    background-image: url('https://cdn-icons-png.flaticon.com/512/3132/3132693.png');
}

.slot-reel {
    width: 80px;
    height: 80px;
    background-image: url('https://cdn-icons-png.flaticon.com/512/3236/3236962.png');
}

.dice {
    width: 50px;
    height: 50px;
    background-image: url('https://cdn-icons-png.flaticon.com/512/3236/3236975.png');
}

.floating-1 {
    top: 20%;
    left: 10%;
    animation: float 6s ease-in-out infinite;
}

.floating-2 {
    top: 60%;
    right: 15%;
    animation: float 8s ease-in-out infinite reverse;
}

.floating-3 {
    bottom: 20%;
    left: 20%;
    animation: float 7s ease-in-out infinite 2s;
}

.floating-4 {
    top: 30%;
    right: 10%;
    animation: float 9s ease-in-out infinite reverse 1s;
}

@keyframes float {
    0% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-20px) rotate(5deg); }
    100% { transform: translateY(0) rotate(0deg); }
}

.countdown-number {
    color: white;
    text-shadow: 
        0 0 10px #00f0ff,
        0 0 20px rgba(0, 240, 255, 0.7);
}

@media (max-width: 768px) {
    .game-thumbnail {
        width: 80px;
        height: 80px;
    }
    .game-thumbnail-sm {
        width: 60px;
        height: 60px;
    }
}