@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700;800;900&family=Montserrat:wght@400;500;600;700&family=Inter:wght@300;400;500;600;700&family=Open+Sans:wght@300;400;500;600;700&display=swap');

:root {
    --gaming-dark: hsl(220, 26%, 14%);
    --gaming-blue: hsl(217, 91%, 60%);
    --gaming-red: hsl(0, 84%, 60%);
    --gaming-lime: hsl(88, 50%, 53%);
    --gray-300: hsl(220, 9%, 77%);
    --gray-700: hsl(220, 13%, 46%);
    --gray-800: hsl(220, 13%, 32%);
    --gray-900: hsl(220, 26%, 18%);
}

body {
    background-color: #111827;
    color: #F9FAFB;
    font-family: 'Inter', 'Open Sans', system-ui, sans-serif;
}

.hero-glow {
    background: radial-gradient(circle at center, rgba(59, 130, 246, 0.1) 0%, transparent 70%);
}

.card-hover {
    transition: all 0.3s ease;
}

.card-hover:hover {
    transform: scale(1.05);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

.glow-effect {
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.3);
}

.text-glow {
    text-shadow: 0 0 10px rgba(59, 130, 246, 0.5);
}

.trainer-image {
    transition: transform 0.3s ease;
}

.trainer-image:hover {
    transform: rotate(2deg) scale(1.1);
}

/* Mobile Menu Styles - AGGRESSIVE OVERRIDE */
.mobile-menu {
    transform: translateX(100%);
    transition: transform 0.3s ease-in-out;
    background-color: #1F2937 !important; /* Force solid background */
    background: #1F2937 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.mobile-menu.active {
    transform: translateX(0);
    background-color: #1F2937 !important; /* Force solid background when active */
    background: #1F2937 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.mobile-menu-solid {
    background-color: #1F2937 !important; /* Solid gray-800 background */
    background: #1F2937 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: -10px 0 30px rgba(0, 0, 0, 0.5) !important;
}

/* NUCLEAR OPTION - Force solid background on mobile menu div */
#mobile-menu,
#mobile-menu.mobile-menu,
#mobile-menu.mobile-menu-solid,
div#mobile-menu {
    background-color: #1F2937 !important;
    background: #1F2937 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    opacity: 1 !important;
    filter: none !important;
}

#mobile-menu.active,
#mobile-menu.mobile-menu.active,
#mobile-menu.mobile-menu-solid.active,
div#mobile-menu.active {
    background-color: #1F2937 !important;
    background: #1F2937 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    opacity: 1 !important;
    filter: none !important;
}

/* Override ANY possible transparency */
[id="mobile-menu"] {
    background-color: #1F2937 !important;
    background: #1F2937 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    opacity: 1 !important;
    filter: none !important;
}

/* Ensure all mobile menu content is visible */
.mobile-menu-solid nav a,
.mobile-menu-solid nav p,
.mobile-menu-solid nav button,
.mobile-menu-solid span,
#mobile-menu nav a,
#mobile-menu nav p,
#mobile-menu nav button,
#mobile-menu span {
    color: #ffffff !important;
    opacity: 1 !important;
    background-color: transparent !important;
}

.mobile-menu-overlay {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
    background-color: rgba(0, 0, 0, 0.8) !important; /* Even darker overlay */
}

.mobile-menu-overlay.active {
    opacity: 1;
    visibility: visible;
    background-color: rgba(0, 0, 0, 0.8) !important;
}

/* Improved mobile responsive */
@media (max-width: 768px) {
    .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    
    .hero-section h1 {
        font-size: 2.5rem;
        line-height: 1.1;
    }
    
    .hero-section p {
        font-size: 1rem;
        line-height: 1.5;
    }
    
    .grid-cols-1.md\\:grid-cols-2,
    .grid-cols-1.md\\:grid-cols-3,
    .grid-cols-1.md\\:grid-cols-4 {
        gap: 1rem;
    }
    
    .py-20 {
        padding-top: 3rem;
        padding-bottom: 3rem;
    }
    
    .py-16 {
        padding-top: 2.5rem;
        padding-bottom: 2.5rem;
    }
}

/* Modal Styles */
.modal-backdrop {
    backdrop-filter: blur(4px);
    background-color: rgba(0, 0, 0, 0.5);
}

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

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

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

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

::-webkit-scrollbar-thumb:hover {
    background: #2563EB;
}

/* Loading animation */
@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

.animate-pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Button focus styles */
button:focus,
input:focus,
select:focus,
textarea:focus {
    outline: 2px solid #3B82F6;
    outline-offset: 2px;
}

/* Gradient text effect */
.gradient-text {
    background: linear-gradient(45deg, #3B82F6, #84CC16, #EF4444);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Glass effect */
.glass-effect {
    backdrop-filter: blur(10px);
    background-color: rgba(17, 24, 39, 0.8);
}

/* Override any Tailwind transparency for mobile menu */
div[id="mobile-menu"] {
    background-color: #1F2937 !important;
    background: #1F2937 !important;
    opacity: 1 !important;
}

div[id="mobile-menu"].active {
    background-color: #1F2937 !important;
    background: #1F2937 !important;
    opacity: 1 !important;
}

/* Ensure mobile menu is never transparent */
.md\\:hidden.mobile-menu {
    background-color: #1F2937 !important;
    background: #1F2937 !important;
    opacity: 1 !important;
}