/* Global CSS Variables */
        :root {
            --font-size: 16px;
            --background: #ffffff;
            --foreground: oklch(0.145 0 0);
            --card: #ffffff;
            --card-foreground: oklch(0.145 0 0);
            --popover: oklch(1 0 0);
            --popover-foreground: oklch(0.145 0 0);
            --primary: #030213;
            --primary-foreground: oklch(1 0 0);
            --secondary: oklch(0.95 0.0058 264.53);
            --secondary-foreground: #030213;
            --muted: #ececf0;
            --muted-foreground: #717182;
            --accent: #e9ebef;
            --accent-foreground: #030213;
            --destructive: #d4183d;
            --destructive-foreground: #ffffff;
            --border: rgba(0, 0, 0, 0.1);
            --input: transparent;
            --input-background: #f3f3f5;
            --switch-background: #cbced4;
            --font-weight-medium: 500;
            --font-weight-normal: 400;
            --ring: oklch(0.708 0 0);
            --chart-1: oklch(0.646 0.222 41.116);
            --chart-2: oklch(0.6 0.118 184.704);
            --chart-3: oklch(0.398 0.07 227.392);
            --chart-4: oklch(0.828 0.189 84.429);
            --chart-5: oklch(0.769 0.188 70.08);
            --radius: 0.625rem;
        }

        /* Custom animations */
        @keyframes float {
            0%, 100% { 
                transform: translateY(0px) translateX(0px); 
                opacity: 0.7;
            }
            25% { 
                transform: translateY(-15px) translateX(10px); 
                opacity: 0.9;
            }
            50% { 
                transform: translateY(-8px) translateX(-8px); 
                opacity: 0.6;
            }
            75% { 
                transform: translateY(-20px) translateX(5px); 
                opacity: 0.8;
            }
        }
        
        @keyframes spin-slow {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }
        
        @keyframes pulse-scale {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.05); }
        }
        
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(50px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        @keyframes fadeInScale {
            from {
                opacity: 0;
                transform: scale(0.8);
            }
            to {
                opacity: 1;
                transform: scale(1);
            }
        }

        @keyframes fadeOut {
            to {
                opacity: 0;
                transform: scale(0);
            }
        }

        @keyframes glow {
            0%, 100% { box-shadow: 0 0 20px rgba(6, 182, 212, 0.3); }
            50% { box-shadow: 0 0 40px rgba(6, 182, 212, 0.6); }
        }
        
        /* Animation classes */
        .animate-float {
            animation: float 8s ease-in-out infinite;
        }
        
        .animate-spin-slow {
            animation: spin-slow 20s linear infinite;
        }
        
        .animate-pulse-scale {
            animation: pulse-scale 3s ease-in-out infinite;
        }
        
        .animate-fade-in-up {
            animation: fadeInUp 0.8s ease-out forwards;
        }
        
        .animate-fade-in-scale {
            animation: fadeInScale 0.8s ease-out forwards;
        }

        .animate-glow {
            animation: glow 2s ease-in-out infinite;
        }
        
        /* Particle styles */
        .particle {
            position: absolute;
            width: 6px;
            height: 6px;
            background: linear-gradient(45deg, #06b6d4, #8b5cf6);
            border-radius: 50%;
            opacity: 0.7;
            pointer-events: none;
            z-index: 1;
        }

        /* Fixed particles container to viewport */
        #particles-container {
            position: fixed;
            inset: 0;
            pointer-events: none;
            z-index: 1;
        }
        
        .particle:nth-child(odd) {
            background: linear-gradient(45deg, #f59e0b, #ef4444);
        }
        
        .particle:nth-child(3n) {
            background: linear-gradient(45deg, #10b981, #06b6d4);
        }
        
        /* Loading spinner */
        .loading-spinner {
            border: 2px solid transparent;
            border-top: 2px solid #ffffff;
            border-radius: 50%;
            width: 20px;
            height: 20px;
            animation: spin 1s linear infinite;
        }
        
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        
        /* Glowing ring */
        .glowing-ring {
            position: absolute;
            width: 320px;
            height: 320px;
            border: 3px solid rgba(6, 182, 212, 0.4);
            border-radius: 50%;
            left: -60px;
            top: -60px;
            animation: spin-slow 25s linear infinite, pulse-scale 4s ease-in-out infinite;
            pointer-events: none;
        }

        .glowing-ring::before {
            content: '';
            position: absolute;
            width: 100%;
            height: 100%;
            border: 2px solid rgba(139, 92, 246, 0.3);
            border-radius: 50%;
            animation: spin-slow 15s linear infinite reverse;
            pointer-events: none;
        }

        /* Backdrop blur support */
        .backdrop-blur-lg {
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
        }

        .backdrop-blur-xl {
            backdrop-filter: blur(24px);
            -webkit-backdrop-filter: blur(24px);
        }

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

        ::-webkit-scrollbar-track {
            background: rgba(255, 255, 255, 0.1);
        }

        ::-webkit-scrollbar-thumb {
            background: linear-gradient(180deg, #06b6d4, #8b5cf6);
            border-radius: 4px;
        }

        ::-webkit-scrollbar-thumb:hover {
            background: linear-gradient(180deg, #0891b2, #7c3aed);
        }

        /* Mouse trail */
        .mouse-trail {
            position: fixed;
            pointer-events: none;
            width: 4px;
            height: 4px;
            background: radial-gradient(circle, #06b6d4, transparent);
            border-radius: 50%;
            z-index: 9999;
            animation: fadeOut 1s ease-out forwards;
        }

        /* Improved button hover effects */
        .btn-hover:hover {
            transform: translateY(-2px) scale(1.02);
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
        }

        /* Enhanced scrolling experience */
        html {
            scroll-behavior: smooth;
        }

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

        ::-webkit-scrollbar-track {
            background: rgba(255, 255, 255, 0.1);
        }

        ::-webkit-scrollbar-thumb {
            background: linear-gradient(180deg, #06b6d4, #8b5cf6);
            border-radius: 4px;
        }

        ::-webkit-scrollbar-thumb:hover {
            background: linear-gradient(180deg, #0891b2, #7c3aed);
        }

        /* Ensure game world has proper min-height for scrolling */
        #game-world {
            min-height: 200vh; /* Ensure there's always content to scroll */
        }

        /* Card hover effects */
        .card-hover:hover {
            transform: translateY(-5px);
            transition: all 0.3s ease;
        }

        /* Hide page initially for smooth transition */
        .page-hidden {
            display: none;
        }

        /* Typewriter effect */
        .typewriter {
            overflow: hidden;
            border-right: 3px solid #06b6d4;
            white-space: nowrap;
            animation: typewriter 4s steps(40, end), blink 0.8s infinite;
        }

        @keyframes typewriter {
            from { width: 0; }
            to { width: 100%; }
        }

        @keyframes blink {
            50% { border-color: transparent; }
        }