/* Google Fonts Import */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800;900&display=swap');

/* CSS Variables for Theme Colors */
:root {
    --neon-green: #39ff14;
    --gold: #FFD700;
    --urgency-red: #ff0000;
    --dark-bg: #0a0a0a;
    --whatsapp-green: #25D366;
}

/* Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Inter', sans-serif;
}

body {
    background-color: var(--dark-bg);
    color: #ffffff;
    overflow-x: hidden;
    line-height: 1.6;
}

/* Grain texture overlay */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        radial-gradient(circle at 20% 50%, rgba(57, 255, 20, 0.03) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(255, 215, 0, 0.03) 0%, transparent 50%);
    pointer-events: none;
    z-index: 0;
}

/* Smooth scroll */
html {
    scroll-behavior: smooth;
}


/* Pulse animation for CTA buttons */
@keyframes pulse-glow {
    0%, 100% {
        box-shadow: 0 0 20px rgba(57, 255, 20, 0.5), 0 0 40px rgba(57, 255, 20, 0.3);
        transform: scale(1);
    }
    50% {
        box-shadow: 0 0 30px rgba(57, 255, 20, 0.8), 0 0 60px rgba(57, 255, 20, 0.5);
        transform: scale(1.02);
    }
}

.btn-pulse {
    animation: pulse-glow 2s ease-in-out infinite;
}

/* Marquee animation */
@keyframes marquee {
    0% {
        transform: translateX(0%);
    }
    100% {
        transform: translateX(-50%);
    }
}

.marquee {
    display: flex;
    overflow: hidden;
    user-select: none;
}

.marquee-content {
    display: flex;
    animation: marquee 30s linear infinite;
    white-space: nowrap;
}

.marquee-item {
    padding: 0 2rem;
}

/* Hide scrollbar for marquee */
.marquee::-webkit-scrollbar {
    display: none;
}

/* Card overlay */
.card-overlay {
    background: linear-gradient(180deg, rgba(10, 10, 10, 0.7) 0%, rgba(10, 10, 10, 0.9) 100%);
}

/* Hero Card Glow Effects */
.hero-glow {
    background: radial-gradient(circle at 50% 50%, rgba(57, 255, 20, 0.15) 0%, transparent 70%);
    animation: heroGlow 4s ease-in-out infinite;
}

.hero-glow-casino {
    background: radial-gradient(circle at 50% 50%, rgba(255, 215, 0, 0.15) 0%, transparent 70%);
    animation: heroGlow 4s ease-in-out infinite;
}

@keyframes heroGlow {
    0%, 100% {
        opacity: 0.3;
        transform: scale(1);
    }
    50% {
        opacity: 0.6;
        transform: scale(1.1);
    }
}

/* Modal backdrop blur */
.modal-backdrop {
    backdrop-filter: blur(10px);
    background: rgba(0, 0, 0, 0.85);
}

/* Utility Classes */
.text-neon-green {
    color: var(--neon-green);
}

.text-gold {
    color: var(--gold);
}

.text-urgency-red {
    color: var(--urgency-red);
}

.bg-neon-green {
    background-color: var(--neon-green);
}

.bg-gold {
    background-color: var(--gold);
}

.bg-urgency-red {
    background-color: var(--urgency-red);
}

.bg-dark-bg {
    background-color: var(--dark-bg);
}

.bg-whatsapp-green {
    background-color: var(--whatsapp-green);
}

.border-neon-green {
    border-color: var(--neon-green);
}

/* Responsive Images */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Crop watermark from proof images */
.proof-image-wrapper {
    overflow: hidden;
    position: relative;
    height: 300px;
}

.proof-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    transform: scale(1.25);
    transform-origin: center 30%;
}

@media (min-width: 768px) {
    .proof-image-wrapper {
        height: 400px;
    }
}

/* Links */
a {
    text-decoration: none;
    color: inherit;
}

/* Buttons */
button {
    cursor: pointer;
    border: none;
    background: none;
    font-family: inherit;
}

button:focus,
a:focus {
    outline: 2px solid var(--neon-green);
    outline-offset: 2px;
}

/* Game Cards Animations */
.game-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    will-change: transform;
}

.game-card:hover {
    transform: translateY(-12px) scale(1.02);
    box-shadow: 0 15px 40px rgba(57, 255, 20, 0.4), 0 0 20px rgba(57, 255, 20, 0.3);
    z-index: 10;
}

.game-card:active {
    transform: translateY(-8px) scale(0.98);
}

/* Subtle breathing animation for game cards */
@keyframes cardBreath {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-3px);
    }
}

.game-card {
    animation: cardBreath 4s ease-in-out infinite;
}

.game-card:nth-child(1) { animation-delay: 0s; }
.game-card:nth-child(2) { animation-delay: 0.5s; }
.game-card:nth-child(3) { animation-delay: 1s; }
.game-card:nth-child(4) { animation-delay: 1.5s; }
.game-card:nth-child(5) { animation-delay: 2s; }
.game-card:nth-child(6) { animation-delay: 2.5s; }
.game-card:nth-child(7) { animation-delay: 3s; }
.game-card:nth-child(8) { animation-delay: 3.5s; }

/* Game card image styling */
.game-card img {
    transition: transform 0.5s ease;
}

.game-card:hover img {
    transform: scale(1.1);
}

/* Sport Cards Animations */
.sport-card {
    transition: all 0.3s ease;
}

.sport-card:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 25px rgba(57, 255, 20, 0.2);
}

.sport-card:active {
    transform: scale(0.98);
}

/* Hide Scrollbar */
.scrollbar-hide::-webkit-scrollbar {
    display: none;
}

.scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Smooth Scroll */
#gamesContainer {
    scroll-behavior: smooth;
}

/* Shimmer Effect for Cards */
@keyframes shimmer {
    0% {
        background-position: -1000px 0;
    }
    100% {
        background-position: 1000px 0;
    }
}

.game-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.1),
        transparent
    );
    transition: left 0.5s;
}

.game-card:hover::before {
    left: 100%;
}

/* Glowing Border Animation */
@keyframes glow-border {
    0%, 100% {
        box-shadow: 0 0 5px rgba(57, 255, 20, 0.5), 0 0 10px rgba(57, 255, 20, 0.3);
    }
    50% {
        box-shadow: 0 0 10px rgba(57, 255, 20, 0.8), 0 0 20px rgba(57, 255, 20, 0.5);
    }
}

/* Celebration Modal Animations */
.celebration-modal {
    animation: modalBounce 0.5s ease-out;
    box-shadow: 0 0 50px rgba(255, 215, 0, 0.5), 0 0 100px rgba(57, 255, 20, 0.3);
}

@keyframes modalBounce {
    0% {
        transform: scale(0.3) rotate(-10deg);
        opacity: 0;
    }
    50% {
        transform: scale(1.05) rotate(5deg);
    }
    100% {
        transform: scale(1) rotate(0deg);
        opacity: 1;
    }
}

.celebration-text {
    animation: rainbow 3s linear infinite;
    text-shadow: 0 0 20px rgba(255, 215, 0, 0.8);
}

@keyframes rainbow {
    0%, 100% { color: #FFD700; }
    33% { color: #39ff14; }
    66% { color: #FF6B6B; }
}

.celebration-btn {
    animation: btnGlow 2s ease-in-out infinite;
}

@keyframes btnGlow {
    0%, 100% {
        box-shadow: 0 0 20px rgba(255, 215, 0, 0.6), 0 0 40px rgba(57, 255, 20, 0.4);
    }
    50% {
        box-shadow: 0 0 40px rgba(255, 215, 0, 0.9), 0 0 60px rgba(57, 255, 20, 0.6);
    }
}

/* Confetti Animation */
.confetti {
    position: absolute;
    font-size: 2rem;
    animation: confettiFall 3s linear infinite;
    opacity: 0.8;
}

.confetti:nth-child(1) { left: 10%; animation-delay: 0s; }
.confetti:nth-child(2) { left: 30%; animation-delay: 0.5s; }
.confetti:nth-child(3) { left: 50%; animation-delay: 1s; }
.confetti:nth-child(4) { left: 70%; animation-delay: 1.5s; }
.confetti:nth-child(5) { left: 90%; animation-delay: 2s; }

@keyframes confettiFall {
    0% {
        top: -10%;
        transform: rotate(0deg);
    }
    100% {
        top: 110%;
        transform: rotate(720deg);
    }
}

/* Additional Game Card Animations */
@keyframes float {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-15px);
    }
}

@keyframes spin-slow {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.animate-spin-slow {
    animation: spin-slow 8s linear infinite;
}

@keyframes wave {
    0%, 100% {
        transform: translateY(0%);
    }
    50% {
        transform: translateY(-20%);
    }
}

/* Enhanced game card shadows */
.game-card .shadow-xl {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3), 0 10px 10px -5px rgba(0, 0, 0, 0.2);
}

.game-card:hover .shadow-xl {
    box-shadow: 0 25px 50px -12px rgba(57, 255, 20, 0.4), 0 0 30px rgba(57, 255, 20, 0.2);
}

/* Mobile Optimizations */
@media (max-width: 767px) {
    /* Improve mobile spacing */
    body {
        padding-bottom: 80px;
    }
    
    /* Mobile sticky footer enhancements */
    .mobile-footer {
        box-shadow: 0 -4px 20px rgba(57, 255, 20, 0.2);
        backdrop-filter: blur(10px);
        background: linear-gradient(180deg, rgba(10, 10, 10, 0.95) 0%, rgba(10, 10, 10, 0.98) 100%);
    }
    
    .mobile-footer a {
        transition: all 0.3s ease;
        position: relative;
    }
    
    .mobile-footer a:active {
        transform: scale(0.95);
    }
    
    /* Add subtle animation to mobile CTA */
    @keyframes mobile-pulse {
        0%, 100% {
            box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.2);
        }
        50% {
            box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.3), 0 0 15px rgba(57, 255, 20, 0.3);
        }
    }
    
    .mobile-cta-btn {
        animation: mobile-pulse 2s ease-in-out infinite;
    }
    
    /* Optimize hero cards for mobile */
    .hero-card-mobile {
        min-height: 450px !important;
    }
    
    /* Better touch targets */
    .touch-target {
        min-height: 48px;
        min-width: 48px;
    }
    
    /* Improve text readability on mobile */
    .mobile-text-optimize {
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    }
}