<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
    <title>BlockZone Lab - Web3 Gaming Hub</title>
    
    <!-- SEO Meta Tags -->
    <meta name="description" content="BlockZone Lab - Professional gaming tournaments with real USDC prizes and comprehensive blockchain education. FREE first game daily, $0.25 per game or $2.50 day pass until 11pm EST.">
    <meta name="keywords" content="blockchain gaming, USDC prizes, crypto education, skill-based games, neon drop, tournaments">
    
    <!-- Critical CSS - Inline for instant rendering -->
    <style>
        /* CRITICAL RENDERING PATH - Minimal styles for instant visual feedback */
        :root {
            --primary: #00ff41;
            --bg-primary: #0a0a0a;
            --text-primary: #ffffff;
            --text-secondary: #cccccc;
        }
        
        * { margin: 0; padding: 0; box-sizing: border-box; }
        
        body {
            background: var(--bg-primary);
            color: var(--text-primary);
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            line-height: 1.6;
            overflow-x: hidden;
        }
        
        /* INSTANT LOADING STATES */
        .loading-screen {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 9999;
            transition: opacity 0.5s ease-out;
        }
        
        .loading-screen.fade-out {
            opacity: 0;
            pointer-events: none;
        }
        
        .loading-content {
            text-align: center;
            color: var(--primary);
        }
        
        .loading-logo {
            font-size: 2rem;
            font-weight: bold;
            margin-bottom: 1rem;
        }
        
        .loading-progress {
            width: 200px;
            height: 4px;
            background: rgba(0, 255, 65, 0.2);
            border-radius: 2px;
            overflow: hidden;
            margin: 1rem auto;
        }
        
        .loading-bar {
            height: 100%;
            background: var(--primary);
            width: 0%;
            transition: width 0.3s ease;
            animation: shimmer 2s infinite;
        }
        
        @keyframes pulse {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.7; }
        }
        
        @keyframes shimmer {
            0% { transform: translateX(-100%); }
            100% { transform: translateX(100%); }
        }
        
        /* CRITICAL NAVIGATION */
        .navbar {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            background: rgba(10, 10, 10, 0.95);
            backdrop-filter: blur(10px);
            border-bottom: 1px solid rgba(0, 255, 65, 0.2);
            z-index: 1000;
            opacity: 0;
            transform: translateY(-100%);
            transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
        }
        
        .navbar.loaded {
            opacity: 1;
            transform: translateY(0);
        }
        
        .navbar-container {
            width: 100%;
            margin: 0;
            padding: 0 2rem;
            display: flex;
            align-items: center;
            justify-content: center;
            height: 64px; /* Back to original height */
        }
        
        .navbar-nav {
            display: flex;
            list-style: none;
            margin: 0;
            padding: 0;
            justify-content: space-between;
            width: 100%;
            align-items: center;
        }
        
        .nav-link {
            color: var(--text-secondary);
            text-decoration: none;
            font-weight: 500;
            transition: color 0.3s ease;
            font-size: 0.9rem;
        }
        
        .nav-link:hover,
        .nav-link.active {
            color: var(--primary);
        }
        
        .navbar-brand {
            color: var(--primary);
            font-size: 1.5rem; /* Back to original size */
            font-weight: bold;
            text-decoration: none;
            display: flex;
            align-items: center;
            gap: 1px;
        }
        
        .brand-letter {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 20px; /* Back to original size */
            height: 20px; /* Back to original size */
            border-radius: 3px; /* Back to original size */
            font-size: 14px; /* Back to original size */
            font-weight: bold;
            color: #000;
            background: #00ff41;
            border: 1px solid rgba(0, 255, 65, 0.3); /* Back to original size */
            box-shadow: 0 0 5px rgba(0, 255, 65, 0.2); /* Back to original size */
        }
        
        .brand-letter:nth-child(6) {
            /* The "Z" - make it look like the favicon */
            background: #FFFF00;
            border: 2px solid #ff4444; /* Back to original size */
            color: #ff4444;
            box-shadow: 0 0 8px rgba(255, 68, 68, 0.4); /* Back to original size */
        }
        
        .brand-letter:nth-child(10) {
            /* The space - make it invisible */
            background: transparent;
            border: none;
            box-shadow: none;
            width: 8px; /* Back to original size */
        }
        
        /* CRITICAL HERO SECTION */
        .hero-section {
            min-height: auto;
            display: flex;
            align-items: flex-start;
            justify-content: center;
            text-align: center;
            padding: 1rem 1rem;
            padding-top: 0; /* BlockZone Lab blocks touching the navbar */
            opacity: 0;
            transform: translateY(30px);
            transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
        }
        
        /* Large Hero Brand - EXACT same styling, 3x bigger */
        .hero-brand {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 3px; /* 3px gap between blocks */
            margin-bottom: 2rem;
            width: 100%;
            max-width: 100vw;
            overflow: hidden;
        }
        
        .hero-brand-letter {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 60px; /* 3x bigger (was 20px) */
            height: 60px; /* 3x bigger (was 20px) */
            border-radius: 3px;
            font-size: 72px; /* Even bigger - right to the edge */
            font-weight: bold;
            color: #000;
            background: #00ff41;
            border: 1px solid rgba(0, 255, 65, 0.3);
            box-shadow: 0 0 5px rgba(0, 255, 65, 0.2);
            transition: all 0.3s ease;
            font-family: 'Minion Pro', 'Minion Pro Bold', 'Times New Roman', serif;
        }
        
        .hero-brand-letter:nth-child(6) {
            /* The "Z" - make it look like the favicon */
            background: #FFFF00;
            border: 2px solid #ff4444;
            color: #ff4444;
            box-shadow: 0 0 8px rgba(255, 68, 68, 0.4);
        }
        
        .hero-brand-letter:nth-child(10) {
            /* The space - make it invisible but same size as letter blocks */
            background: transparent;
            border: none;
            box-shadow: none;
            width: 60px; /* Same size as letter blocks */
        }
        
        .hero-brand-letter:hover {
            transform: scale(1.05);
            box-shadow: 0 0 30px rgba(0, 255, 65, 0.4);
        }
        
        .hero-section.loaded {
            opacity: 1;
            transform: translateY(0);
        }
        
        .hero-title {
            font-size: clamp(2.5rem, 8vw, 4.5rem);
            font-weight: 900;
            color: var(--primary);
            margin-bottom: 1rem;
            text-shadow: 0 0 20px rgba(0, 255, 65, 0.5);
        }
        
        .hero-subtitle {
            font-size: clamp(1.2rem, 4vw, 1.8rem);
            color: var(--text-secondary);
            margin-bottom: 60px; /* One block width from hero brand */
            width: 100%;
            max-width: 100vw;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 2rem;
            overflow: visible;
        }
        
        .hero-subtitle span {
            font-size: clamp(1.2rem, 4vw, 1.8rem);
            color: var(--text-secondary);
        }
        
        /* HERO CARDS - 3-second gradual materialization */
        .hero-cards {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 6rem;
            max-width: 600px;
            margin: 0 auto;
            opacity: 0;
            transform: translateY(30px) scale(0.95);
            transition: all 3s cubic-bezier(0.4, 0, 0.2, 1);
        }
        
        /* Hero Cards Section - New section below yellow banner */
        .hero-cards-section {
            padding: 2.5rem 0;
            background: var(--bg-primary);
        }
        
        /* Academy Section - New Styling */
        .academy-section {
            padding: 3rem 0;
            background: var(--bg-secondary);
        }
        
        .academy-content {
            max-width: 800px;
            margin: 0 auto;
        }
        
        .academy-content h2 {
            font-size: var(--text-4xl);
            color: var(--primary);
            margin-bottom: 2rem;
            text-align: center;
            text-shadow: 0 0 20px rgba(0, 255, 65, 0.3);
        }
        
        .academy-text p {
            font-size: var(--text-lg);
            color: var(--text-secondary);
            line-height: 1.7;
            margin-bottom: 1.5rem;
        }
        
        .academy-intro {
            font-size: var(--text-xl);
            color: var(--text-primary);
            font-weight: var(--font-medium);
            margin-bottom: 2rem;
        }
        
        .web3-intro {
            background: rgba(0, 255, 65, 0.05);
            border: 1px solid rgba(0, 255, 65, 0.2);
            border-radius: var(--radius-xl);
            padding: 2rem;
            margin: 2rem 0;
        }
        
        .web3-intro h3 {
            color: var(--primary);
            font-size: var(--text-2xl);
            margin-bottom: 1rem;
        }
        
        .academy-cta {
            text-align: center;
            margin-top: 3rem;
            padding: 2rem;
            background: linear-gradient(135deg, rgba(0, 255, 65, 0.1), rgba(0, 212, 255, 0.1));
            border: 1px solid rgba(0, 255, 65, 0.3);
            border-radius: var(--radius-xl);
        }
        
        .academy-cta h3 {
            color: var(--primary);
            font-size: var(--text-3xl);
            margin-bottom: 1rem;
        }
        
        .academy-cta p {
            font-size: var(--text-lg);
            color: var(--text-secondary);
            margin-bottom: 2rem;
        }
        
        .academy-cta .btn {
            font-size: var(--text-lg);
            padding: 1rem 2rem;
        }
        
        /* Hot Links */
        .hot-link {
            color: var(--primary);
            text-decoration: underline;
            cursor: pointer;
            position: relative;
            transition: all 0.3s ease;
        }
        
        .hot-link:hover {
            color: var(--accent);
            text-shadow: 0 0 10px rgba(0, 255, 65, 0.5);
        }
        
        .hot-link::after {
            content: attr(data-tooltip);
            position: absolute;
            bottom: 100%;
            left: 50%;
            transform: translateX(-50%);
            background: var(--bg-primary);
            color: var(--text-primary);
            padding: 0.75rem 1rem;
            border-radius: var(--radius-md);
            font-size: var(--text-sm);
            white-space: normal;
            word-wrap: break-word;
            opacity: 0;
            visibility: hidden;
            transition: all 0.3s ease;
            border: 1px solid var(--primary);
            box-shadow: var(--shadow-lg);
            z-index: 1000;
            width: 280px;
            text-align: left;
            line-height: 1.4;
        }
        
        .hot-link:hover::after {
            opacity: 1;
            visibility: visible;
            transform: translateX(-50%) translateY(-8px);
        }
        
        /* Smart positioning for tooltips */
        .hot-link:nth-child(even)::after {
            top: 100%;
            bottom: auto;
        }
        
        .hot-link:nth-child(even):hover::after {
            transform: translateX(-50%) translateY(8px);
        }
        
        .hero-cards.loaded {
            opacity: 1;
            transform: translateY(0) scale(1);
        }
        
        .hero-card {
            background: linear-gradient(145deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
            border: 2px solid rgba(0, 255, 65, 0.3);
            border-radius: 20px;
            padding: 0;
            width: 200px; /* Fixed width for 2:3 ratio */
            height: 300px; /* Fixed height for 2:3 ratio */
            margin: 0 auto;
            position: relative;
            overflow: hidden;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }
        
        .hero-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(135deg, rgba(0, 255, 65, 0.1) 0%, rgba(0, 255, 65, 0.05) 100%);
            opacity: 0;
            transition: opacity 0.4s ease;
        }
        
        .hero-card:hover::before {
            opacity: 1;
        }
        
        .hero-card:hover {
            transform: translateY(-8px) scale(1.02);
            border-color: #00ff41;
            box-shadow: 
                0 20px 40px rgba(0, 255, 65, 0.3),
                0 0 30px rgba(0, 255, 65, 0.2);
        }
        
        .hero-card-header {
            padding: 1.5rem 1.5rem 1rem;
            text-align: center;
        }
        
        .hero-card-icon {
            font-size: 2.5rem;
            margin-bottom: 1rem;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        
        /* Pixel blocks for Neon Drop card */
        .pixel-blocks {
            display: flex;
            gap: 8px;
            justify-content: center;
            align-items: center;
        }
        
        .pixel-block {
            width: 16px;
            height: 16px;
            border-radius: 2px;
            position: relative;
        }
        
        .pixel-block.block-1 {
            background: #00ff41;
            box-shadow: 0 0 10px rgba(0, 255, 65, 0.5);
        }
        
        .pixel-block.block-2 {
            background: #ff6b35;
            box-shadow: 0 0 10px rgba(255, 107, 53, 0.5);
        }
        
        .pixel-block.block-3 {
            background: #4ecdc4;
            box-shadow: 0 0 10px rgba(78, 205, 196, 0.5);
        }
        
        /* Academy icons for Academy card */
        .academy-icons {
            font-size: 1.5rem;
            color: #00ff41;
            text-shadow: 0 0 15px rgba(0, 255, 65, 0.5);
            letter-spacing: 0.3rem;
        }
        
        .hero-card-header h3 {
            color: #00ff41;
            font-size: 1.5rem;
            font-weight: 700;
            margin-bottom: 0.5rem;
            text-shadow: 0 0 10px rgba(0, 255, 65, 0.5);
        }
        
        .hero-card-subtitle {
            color: #a0a0a0;
            font-size: 0.8rem;
            font-weight: 300;
            text-align: center;
            margin-top: 0.5rem;
            line-height: 1.3;
        }
        
        .hero-card-content {
            padding: 0 1.5rem 1.5rem;
        }
        
        .hero-card-content p {
            color: #cccccc;
            font-size: 0.9rem;
            line-height: 1.5;
            margin-bottom: 1rem;
        }
        
        .hero-card-features {
            display: flex;
            flex-wrap: wrap;
            gap: 0.5rem;
            margin-bottom: 1rem;
        }
        
        .hero-card-features span {
            background: rgba(0, 255, 65, 0.1);
            color: #00ff41;
            font-size: 0.75rem;
            padding: 0.25rem 0.5rem;
            border-radius: 12px;
            border: 1px solid rgba(0, 255, 65, 0.2);
        }
        
        .hero-card-footer {
            padding: 0 1.5rem 1.5rem;
        }
        
        .card-action-text {
            color: #00ff41;
            font-size: 0.9rem;
            font-weight: 600;
            text-align: center;
            text-shadow: 0 0 10px rgba(0, 255, 65, 0.5);
            margin-top: 20px; /* Move text down 20px total */
        }
        

        
        .btn {
            padding: 1rem 2rem;
            border: none;
            border-radius: 8px;
            font-size: 1rem;
            font-weight: 600;
            text-decoration: none;
            cursor: pointer;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }
        
        .btn-primary {
            background: var(--primary);
            color: #000;
        }
        
        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 25px rgba(0, 255, 65, 0.3);
        }
        
        .btn-outline {
            background: transparent;
            color: var(--primary);
            border: 2px solid var(--primary);
        }
        
        .btn-outline:hover {
            background: var(--primary);
            color: #000;
        }
        
        /* PROGRESSIVE ENHANCEMENT MARKERS */
        .enhancement-ready {
            opacity: 0;
            transform: translateY(20px);
            transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
        }
        
        .enhancement-ready.loaded {
            opacity: 1;
            transform: translateY(0);
        }
        
        /* PLAYING CARD SIZING - 25% smaller for real card feel */
        .action-card {
            max-width: 300px; /* Reduced from ~400px */
            min-height: 400px; /* Reduced from ~500px */
        }
        
        .action-cards-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 2rem;
            max-width: 800px;
            margin: 0 auto;
        }
        
        .action-card-header {
            padding: 1.5rem 1.5rem 1rem;
        }
        
        .action-card-content {
            padding: 0 1.5rem 1.5rem;
        }
        
        .action-card-footer {
            padding: 0 1.5rem 1.5rem;
        }
        
        .action-icon {
            font-size: 2rem; /* Reduced from ~2.5rem */
            margin-bottom: 0.75rem;
        }
        
        .action-card-header h3 {
            font-size: 1.25rem; /* Reduced from ~1.5rem */
            margin-bottom: 0.5rem;
        }
        
        .action-subtitle {
            font-size: 0.875rem; /* Reduced from ~1rem */
        }
        
        .action-features {
            gap: 0.5rem;
        }
        
        .action-features span {
            font-size: 0.75rem; /* Reduced from ~0.875rem */
            padding: 0.25rem 0.5rem;
        }
        
        /* RESPONSIVE */
        @media (max-width: 768px) {
            .hero-brand {
                gap: 2px; /* 2px gap on mobile */
                margin-bottom: 1.5rem;
            }
            
            .hero-brand-letter {
                width: 40px; /* Smaller on mobile but still large */
                height: 40px;
                font-size: 48px; /* Proportional increase for mobile */
                border-radius: 3px;
                border-width: 1px;
            }
            
            .hero-brand-letter:nth-child(10) {
                width: 40px; /* Same size as letter blocks on mobile */
            }
            
            .hero-section {
                padding-top: 80px; /* Normal padding on mobile */
            }
            
            .hero-cards {
                grid-template-columns: 1fr;
                gap: 1.5rem;
                max-width: 250px;
            }
            
            .hero-card {
                width: 200px;
                height: 300px;
            }
            
            .hero-card-icon {
                font-size: 2rem;
            }
            
            .hero-card-header h3 {
                font-size: 1.25rem;
            }
            
            .btn {
                width: 100%;
                max-width: 300px;
            }
        }
        
        /* Game Title Block Cutouts - Exact match from Neon Drop game */
        .game-title-blocks {
            display: flex;
            gap: 2px;
            justify-content: center;
            align-items: center;
            margin-bottom: 10px;
        }
        
        .title-block {
            width: 20px;
            height: 20px;
            border-radius: 3px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: 'Bungee', monospace;
            font-weight: bold;
            font-size: 14px;
            position: relative;
            color: #000;
            text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.8);
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
        }
        
        .title-block::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            border-radius: 3px;
            z-index: -1;
        }
        
        .title-neon {
            background: linear-gradient(135deg, #FFFF00, #FFD700);
        }
        
        .title-neon::before {
            background: linear-gradient(135deg, #FFFF00, #FFD700);
        }
        
        .title-drop {
            background: linear-gradient(135deg, #8A2BE2, #9370DB);
        }
        
        .title-drop::before {
            background: linear-gradient(135deg, #8A2BE2, #9370DB);
        }
        
        .title-block:hover {
            transform: scale(1.1);
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
        }
        
        .title-spacer {
            background: transparent !important;
            box-shadow: none !important;
            width: 20px !important;
        }
        
        .title-spacer::before {
            display: none !important;
        }
        
        /* Position icons at top of cards - mathematically calculated */
        .hero-card-icon {
            margin-top: -24px !important; /* Counteract the 24px header padding */
            margin-bottom: 20px !important; /* Consistent spacing to align titles */
        }
        
        /* Academy card specific positioning - higher up */
        .academy-card .hero-card-icon {
            margin-top: -47px !important; /* Counteract the 24px header padding + 23px additional lift */
        }
        
        .academy-icons {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 20px; /* Match the block spacer width */
            font-size: 1.8rem; /* Increase size to match visual weight of blocks */
            width: 100%;
        }
        
        .academy-icons {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 20px; /* Match the block spacer width */
            font-size: 1.8rem; /* Increase size to match visual weight of blocks */
            width: 100%;
        }
        
        .academy-icons {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 20px; /* Match the block spacer width */
            font-size: 1.8rem; /* Increase size to match visual weight of blocks */
            width: 100%;
        }
        
        .academy-icons span:first-child {
            font-size: 1.26rem; /* 30% smaller than 1.8rem */
        }
        
        .academy-icons span:nth-child(2) {
            font-size: 1.26rem; /* 30% smaller than 1.8rem */
        }
    </style>
    
    <!-- Preload critical resources -->
    <link rel="preload" href="assets/css/design-system.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
    <link rel="preload" href="assets/css/game-wrapper.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
    
    <!-- Google Fonts - Load asynchronously -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Bungee&display=swap" rel="stylesheet" media="print" onload="this.media='all'">
    
    <!-- Favicon -->
    <link rel="icon" href="public/favicon.svg" type="image/svg+xml">
    
    <!-- PWA Manifest -->
    <link rel="manifest" href="manifest.json">
    <meta name="theme-color" content="#00ff41">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-capable" content="yes">
    
    <!-- Web3 Dependencies - Load asynchronously -->
    <script>
        // Async Web3 loading with fallback
        (function() {
            const script = document.createElement('script');
            script.src = 'https://cdnjs.cloudflare.com/ajax/libs/ethers/6.8.1/ethers.umd.min.js';
            script.async = true;
            script.onload = function() {
                window.ethers = ethers;
                console.log('✅ Ethers.js loaded asynchronously');
                // Trigger Web3 enhancement phase
                if (window.enhancementPhase) {
                    window.enhancementPhase.triggerWeb3Enhancement();
                }
            };
            script.onerror = function() {
                console.warn('⚠️ Ethers.js failed to load - Web3 features disabled');
            };
            document.head.appendChild(script);
        })();
    </script>
    
    <!-- Instant Mobile Detection -->
    <script>
        // Mobile detection and CSS property setup for main landing page
        (function() {
            window.BlockZoneMobile = {
                _isMobile: window.innerWidth <= 768 || /Android|iPhone|iPad|iPod/i.test(navigator.userAgent),
                _isTablet: window.innerWidth > 768 && window.innerWidth <= 1024 && 'ontouchstart' in window,
                _hasTouch: 'ontouchstart' in window || navigator.maxTouchPoints > 0,
                _isPWA: window.matchMedia('(display-mode: standalone)').matches || window.navigator.standalone === true,
                isMobile() { return this._isMobile; },
                isTablet() { return this._isTablet; },
                hasTouch() { return this._hasTouch; },
                isPWA() { return this._isPWA; },
                hasPhysicalKeyboard() { 
                    return !/Android|iPhone|iPad|iPod/i.test(navigator.userAgent) || window.innerWidth > 1024;
                },
                needsMobileControls() {
                    return (this._isMobile || this._isTablet) && !this.hasPhysicalKeyboard();
                },
                getScreenSize() {
                    const w = window.innerWidth;
                    return w <= 480 ? 'small' : w <= 768 ? 'medium' : w <= 1024 ? 'large' : 'xlarge';
                }
            };
            document.documentElement.style.setProperty('--is-mobile', window.BlockZoneMobile._isMobile ? '1' : '0');
            document.documentElement.style.setProperty('--has-touch', window.BlockZoneMobile._hasTouch ? '1' : '0');
            document.documentElement.style.setProperty('--has-keyboard', window.BlockZoneMobile.hasPhysicalKeyboard() ? '1' : '0');
            document.documentElement.style.setProperty('--needs-mobile-controls', window.BlockZoneMobile.needsMobileControls() ? '1' : '0');
        })();
    </script>
</head>

<body class="landing-page">
    <!-- Loading Screen - Instant Visual Feedback -->
    <div class="loading-screen" id="loadingScreen">
        <div class="loading-content">
            <div class="loading-logo">✧ BlockZone Lab</div>
            <div class="loading-progress">
                <div class="loading-bar" id="loadingBar"></div>
            </div>
            <div>Loading Web3 Gaming Experience...</div>
        </div>
    </div>

    <!-- Navigation - Fixed and Optimized -->
    <nav class="navbar" id="navbar">
        <div class="navbar-container">
            <ul class="navbar-nav">
                <li><a href="/" class="nav-link active">Home</a></li>
                <li><a href="/games/" class="nav-link">Games</a></li>
                <li><a href="/academy/" class="nav-link">Academy</a></li>
                <li><a href="/pages/business-model.html" class="nav-link">Business</a></li>
                <li><a href="/pages/whitepaper.html" class="nav-link">Whitepaper</a></li>
                <li><a href="/pages/user-profile.html" class="nav-link">Support</a></li>
                <li><a href="/pages/user-profile.html" class="nav-link">Profile</a></li>
            </ul>
        </div>
    </nav>

    <!-- Hero Section - Critical Content First -->
    <section class="hero-section" id="heroSection">
        <div class="hero-content">
            <!-- Large Hero Brand -->
            <div class="hero-brand">
                <span class="hero-brand-letter">B</span>
                <span class="hero-brand-letter">l</span>
                <span class="hero-brand-letter">o</span>
                <span class="hero-brand-letter">c</span>
                <span class="hero-brand-letter">k</span>
                <span class="hero-brand-letter">Z</span>
                <span class="hero-brand-letter">o</span>
                <span class="hero-brand-letter">n</span>
                <span class="hero-brand-letter">e</span>
                <span class="hero-brand-letter"> </span>
                <span class="hero-brand-letter">L</span>
                <span class="hero-brand-letter">a</span>
                <span class="hero-brand-letter">b</span>
            </div>
            <div class="hero-subtitle">
                <span>Premium</span>
                <span>Crypto</span>
                <span>&</span>
                <span>Blockchain</span>
                <span>Edutainment</span>
            </div>

        </div>
    </section>

    <!-- Academy Section - New Content -->
    <section class="academy-section section">
        <div class="container">
            <div class="academy-content">
                <h2>Blockchain Academy: Explore as Deep as You Dare</h2>
                
                <div class="academy-text">
                    <p class="academy-intro">
                        At BlockZone Lab, our goal is to encourage exploration and answer questions—from the simplest "what is blockchain?" to the deepest theoretical discussions about decentralized technology and the philosophy behind it. Don't let jargon or confusing headlines about crypto scare you away. We're here to make complex ideas accessible, interesting, and genuinely fun to explore.
                    </p>
                    
                    <p>
                        Our academy lets you study the very foundations of the Web3-powered games you play—the concepts aren't theoretical exercises, they're the living infrastructure beneath every tournament.
                    </p>
                    
                    <p>
                        Every scoreboard entry, every tournament payout, every <span class="hot-link" data-tooltip="Think of them as our points system at BlockZone Lab—you'll learn more about them soon!">Quark tokens</span> you earn runs on <span class="hot-link" data-tooltip="Self-executing contracts with the terms directly written into code">smart contracts</span> that you can examine, dissect, and understand. Earn Quark tokens through coursework and tournament participation. Study their mechanics and earn even more through comprehension. Your tournament rankings are recorded on-chain, your progress tracked by the same distributed ledger technology you're learning about.
                    </p>
                    
                    <p>
                        Accumulate enough Quark tokens and unlock exclusive <span class="hot-link" data-tooltip="Unique digital art that's securely stored online and can provide benefits on the blockchain it's connected to—like extra free games or earning rewards">NFTs</span> that represent your achievements. Each NFT serves as both a trophy and a learning opportunity to understand how digital ownership works on decentralized networks.
                    </p>
                </div>
                
                <div class="web3-intro">
                    <h3>New to Web3?</h3>
                    <p>
                        <span class="hot-link" data-tooltip="Websites that can connect to crypto wallets for fast, secure transactions and keeping organized records of things like your scores and achievements">Web3</span> refers to websites that can connect to crypto wallets for fast, secure transactions and keeping organized records of things like your scores and achievements. Start with our complimentary foundational course that demystifies blockchain, cryptocurrency, and Web3 terminology. We'll guide you through the concepts that might seem intimidating at first, building your confidence before you dive into the deeper technical waters.
                    </p>
                </div>
                
                <div class="academy-cta">
                    <h3>Start Your Journey</h3>
                    <p>Join our academy today and receive 100 Quark tokens to begin your exploration into the future of decentralized technology.</p>
                    <a href="/academy/" class="btn btn--primary">Join Academy</a>
                </div>
            </div>
        </div>
    </section>

    <!-- Progressive Enhancement Content -->
    <div class="enhancement-ready" id="enhancementContent">
        <!-- Welcome System -->
        <div id="welcomeBanner" style="display: none;">
            <!-- Will be populated by JavaScript -->
        </div>

        <!-- Yellow Animated Banner for Daily Leaderboard -->
        <section class="daily-leaderboard-banner">
            <div class="banner-content">
                <div class="banner-layout">
                    <!-- Left side: Play link -->
                    <div class="banner-left">
                        <a href="/games/neondrop/" class="banner-link">Play Now</a>
                    </div>
                    
                    <!-- Center: NEON DROP -->
                    <div class="banner-center">
                        <div class="game-title-blocks banner-size">
                            <div class="title-block title-neon">N</div>
                            <div class="title-block title-neon">E</div>
                            <div class="title-block title-neon">O</div>
                            <div class="title-block title-neon">N</div>
                            <div class="title-block title-spacer"></div>
                            <div class="title-block title-drop">D</div>
                            <div class="title-block title-drop">R</div>
                            <div class="title-block title-drop">O</div>
                            <div class="title-block title-drop">P</div>
                        </div>
                    </div>
                    
                    <!-- Right side: Leaderboard link -->
                    <div class="banner-right">
                        <a href="#" class="banner-link" onclick="showLeaderboard()">Leaderboard</a>
                    </div>
                </div>
            </div>
        </section>

        <!-- Hero Cards Section - Moved down below yellow banner -->
        <section class="hero-cards-section section">
            <div class="container">
                <div class="hero-cards" id="heroCards">
                    <!-- Game Card -->
                    <div class="hero-card game-card card card--hover card--glow" onclick="handlePlayNowClick('neondrop')">
                        <div class="hero-card-header">
                            <div class="hero-card-icon">
                                <div class="game-title-blocks">
                                    <div class="title-block title-neon">N</div>
                                    <div class="title-block title-neon">E</div>
                                    <div class="title-block title-neon">O</div>
                                    <div class="title-block title-neon">N</div>
                                    <div class="title-block title-spacer"></div>
                                    <div class="title-block title-drop">D</div>
                                    <div class="title-block title-drop">R</div>
                                    <div class="title-block title-drop">O</div>
                                    <div class="title-block title-drop">P</div>
                                </div>
                            </div>
                            <h3>Daily Leaderboard Challenge</h3>
                        </div>
                        <div class="hero-card-footer">
                            <div class="card-action-text">Compete & Challenge</div>
                        </div>
                    </div>
                    
                    <!-- Academy Card -->
                    <div class="hero-card academy-card card card--hover card--glow" onclick="window.location.href='/academy/'">
                        <div class="hero-card-header">
                            <div class="hero-card-icon">
                                <div class="academy-icons">
                                    <span>⬜</span>
                                    <span>🔗</span>
                                    <span>🎓</span>
                                </div>
                            </div>
                            <h3>Crypto Academy</h3>
                        </div>
                        <div class="hero-card-footer">
                            <div class="card-action-text">Explore & Develop</div>
                        </div>
                    </div>
                </div>
            </div>
        </section>



        <!-- Footer -->
        <footer class="footer">
            <div class="container">
                <div class="footer-bottom">
                    <p>&copy; 2024 BlockZone Lab. All rights reserved.</p>
                </div>
            </div>
        </footer>
    </div>

    <!-- Instant Play Architecture Integration - Optimized -->
    <script type="module">
        // Initialize instant play platform with new loading sequence
        let blockZonePlatform;
        let gameStartInProgress = false;
        
        // Defensive play button handler - Enhanced for new architecture
        window.handlePlayNowClick = function(gameType = 'neondrop') {
            console.log('🎮 Play button clicked:', gameType);
            
            // Check if we're still in loading phase
            if (window.enhancementPhase && window.enhancementPhase.currentPhase < 3) {
                console.log('⏳ Waiting for full system load...');
                // Queue the action for when systems are ready
                window.enhancementPhase.queueAction(() => {
                    window.handlePlayNowClick(gameType);
                });
                return;
            }
            
            // Try instant play first (preferred)
            if (window.blockZoneInstantPlay && typeof window.blockZoneInstantPlay.startGame === 'function') {
                console.log('✅ Using instant play system');
                window.blockZoneInstantPlay.startGame(gameType);
                return;
            }
            
            // Fallback to paywall manager
            if (window.paywallManager && typeof window.paywallManager.interceptGameStart === 'function') {
                console.log('🔄 Using paywall manager');
                window.paywallManager.interceptGameStart(gameType);
                return;
            }
            
            // Final fallback - direct game start
            if (window.startGame && typeof window.startGame === 'function') {
                console.log('⚡ Direct game start');
                window.startGame();
                return;
            }
            
            console.error('❌ No game start method available');
            alert('Game system not ready. Please refresh the page.');
        };

        // Global instant play function - Enhanced
        window.blockZoneInstantPlay = {
            async startGame(gameType = 'neondrop') {
                // For NeonDrop, redirect to dedicated game page (Claude's recommended approach)
                if (gameType === 'neondrop') {
                    console.log('🎮 Launching NeonDrop in dedicated game environment...');
                    console.log('🎯 Preserving instant play context...');
                    
                    // Preserve instant play mode for the game page
                    sessionStorage.setItem('instant_play_mode', 'true');
                    
                    // Add loading state
                    this.showGameLoading();
                    
                    // Redirect to game page
                    setTimeout(() => {
                        window.location.href = '/games/neondrop/';
                    }, 500);
                }
            },
            
            showGameLoading() {
                // Create loading overlay
                const overlay = document.createElement('div');
                overlay.id = 'game-loading-overlay';
                overlay.style.cssText = `
                    position: fixed;
                    top: 0;
                    left: 0;
                    width: 100vw;
                    height: 100vh;
                    background: rgba(0, 0, 0, 0.9);
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    z-index: 9999;
                    color: #00ff41;
                    font-size: 1.2rem;
                `;
                overlay.innerHTML = `
                    <div style="text-align: center;">
                        <div style="font-size: 2rem; margin-bottom: 1rem;">🎮</div>
                        <div>Loading NeonDrop...</div>
                        <div style="margin-top: 1rem; font-size: 0.9rem; color: #888;">Preparing Web3 gaming experience</div>
                    </div>
                `;
                document.body.appendChild(overlay);
            },
            
            async showProfile() {
                try {
                    if (!blockZonePlatform) {
                        console.log('🚀 Initializing instant play platform...');
                        blockZonePlatform = new BlockZoneLab();
                        await blockZonePlatform.init();
                    }
                    
                    blockZonePlatform.showEnhancementOptions();
                    
                } catch (error) {
                    console.error('❌ Profile display failed:', error);
                    alert('Profile failed to load. Please refresh and try again.');
                }
            }
        };
        
        console.log('✅ Instant Play Architecture initialized with new loading sequence');
    </script>

    <!-- PaywallManager Debug Script - Enhanced -->
    <script>
        // Only show debug info in development
        const isDevelopment = window.location.hostname === 'localhost' || 
                             window.location.hostname.includes('127.0.0.1') ||
                             window.location.search.includes('debug=true');
        
        if (isDevelopment) {
            console.log('🔍 === PAYWALL DEBUG ===');
            console.log('🔍 Initial window.paywallManager:', window.paywallManager);

            // Check periodically
            const checkPaywallManager = () => {
                console.log('🔍 PaywallManager check:', {
                    exists: !!window.paywallManager,
                    type: typeof window.paywallManager,
                    hasInterceptMethod: !!(window.paywallManager && window.paywallManager.interceptGameStart),
                    methodType: window.paywallManager ? typeof window.paywallManager.interceptGameStart : 'N/A'
                });
            };

            // Check immediately and after DOM load
            checkPaywallManager();
            document.addEventListener('DOMContentLoaded', checkPaywallManager);

            // Check after 1 second (in case it's loaded later)
            setTimeout(checkPaywallManager, 1000);

            // Make debugging functions available
            window.debugPaywall = {
                check: checkPaywallManager,
                bypass: () => {
                    console.log('🚨 MANUAL BYPASS ACTIVATED');
                    window.DEVELOPMENT_BYPASS = true;
                },
                startGame: async () => {
                    if (window.blockZoneInstantPlay) {
                        await window.blockZoneInstantPlay.startGame('neondrop');
                    } else {
                        console.error('Instant play not available');
                    }
                },
                testPaywall: () => {
                    console.log('🧪 Testing paywall display...');
                    if (window.paywallManager) {
                        window.paywallManager.showPaymentOptions('neondrop');
                    } else {
                        console.error('PaywallManager not available');
                    }
                }
            };
        } else {
            // In production, just do a silent check for errors
            const silentCheck = () => {
                if (window.paywallManager && typeof window.paywallManager.interceptGameStart !== 'function') {
                    console.error('❌ PaywallManager missing required method');
                }
            };
            setTimeout(silentCheck, 2000);
        }
    </script>

    <!-- Real PaywallManager Initialization - Enhanced -->
    <script type="module">
        // Import and initialize REAL PaywallManager with new loading sequence
        import { PaywallManager } from './shared/components/PaywallManager.js';
        import { LeaderboardDisplay } from './shared/components/LeaderboardDisplay.js';
        
        // Initialize REAL PaywallManager
        window.paywallManager = new PaywallManager();
        console.log('✅ PaywallManager initialized:', window.paywallManager);
        
        // Initialize other components
        window.leaderboardDisplay = new LeaderboardDisplay();
        
        window.showLeaderboard = async function() {
            try {
                await window.leaderboardDisplay.show();
            } catch (error) {
                console.error('❌ Error showing leaderboard:', error);
                alert('Unable to load leaderboard. Please try again.');
            }
        };
        
        window.showPlayerProfile = function() {
            if (window.blockZoneInstantPlay) {
                window.blockZoneInstantPlay.showProfile();
            } else {
                console.error('Instant play system not ready');
            }
        };
    </script>

    <!-- Leaderboard Display Component - Enhanced -->
    <script type="module">
        import { LeaderboardDisplay } from './shared/components/LeaderboardDisplay.js';
        
        // Global leaderboard instance
        window.leaderboardDisplay = new LeaderboardDisplay();
        
        // Function to show leaderboard from banner
        window.showLeaderboard = async function() {
            try {
                console.log('🏆 Showing leaderboard from banner...');
                await window.leaderboardDisplay.show();
            } catch (error) {
                console.error('❌ Error showing leaderboard:', error);
                alert('Unable to load leaderboard. Please try again.');
            }
        };
    </script>
    
    <!-- Main Entry Point -->
    <script type="module" src="./shared/wrapper/GameRouter.js"></script>

    <!-- Optimized Loading Sequence - Progressive Enhancement Architecture -->
    <script>
        // 🚀 BLOCKZONE LAB - OPTIMIZED LOADING SEQUENCE
        // Phase 1: Critical Rendering (0-100ms)
        // Phase 2: Progressive Enhancement (100-500ms) 
        // Phase 3: Web3 Integration (500ms+)
        // Phase 4: Advanced Features (1s+)
        
        window.enhancementPhase = {
            currentPhase: 0,
            phases: ['critical', 'enhancement', 'web3', 'advanced'],
            
            // Phase 1: Critical Rendering (Instant)
            initCriticalPhase() {
                console.log('🚀 Phase 1: Critical Rendering');
                
                // Simulate loading progress
                const loadingBar = document.getElementById('loadingBar');
                const loadingScreen = document.getElementById('loadingScreen');
                
                let progress = 0;
                const progressInterval = setInterval(() => {
                    progress += Math.random() * 15;
                    if (progress >= 100) {
                        progress = 100;
                        clearInterval(progressInterval);
                        
                        // Hide loading screen with beautiful transition
                        setTimeout(() => {
                            loadingScreen.classList.add('fade-out');
                            setTimeout(() => {
                                loadingScreen.style.display = 'none';
                                this.initEnhancementPhase();
                            }, 500);
                        }, 200);
                    }
                    loadingBar.style.width = progress + '%';
                }, 50);
            },
            
            // Phase 2: Progressive Enhancement (100-500ms)
            initEnhancementPhase() {
                console.log('✨ Phase 2: Progressive Enhancement');
                
                // Animate critical elements in sequence
                const navbar = document.getElementById('navbar');
                const heroSection = document.getElementById('heroSection');
                const heroCards = document.getElementById('heroCards');
                
                // Navbar slides down
                setTimeout(() => navbar.classList.add('loaded'), 100);
                
                // Hero section fades in
                setTimeout(() => heroSection.classList.add('loaded'), 300);
                
                // Hero cards start 3-second materialization (buying time for other systems)
                setTimeout(() => {
                    heroCards.classList.add('loaded');
                    console.log('🎴 Hero cards starting 3-second materialization...');
                    
                    // Use this 3-second window to load everything else
                    this.loadNonCriticalCSS();
                    this.initBasicInteractions();
                    
                    // Start loading Web3 systems during card animation
                    setTimeout(() => this.initWeb3Phase(), 2000); // Start Web3 loading at 2s mark
                    
                }, 600);
            },
            
            // Phase 3: Web3 Integration (500ms+)
            initWeb3Phase() {
                console.log('🔗 Phase 3: Web3 Integration');
                
                // Show enhancement content
                const enhancementContent = document.getElementById('enhancementContent');
                enhancementContent.classList.add('loaded');
                
                // Initialize Web3 systems if available
                if (window.ethers) {
                    this.initWeb3Systems();
                } else {
                    // Wait for ethers to load
                    const checkEthers = setInterval(() => {
                        if (window.ethers) {
                            clearInterval(checkEthers);
                            this.initWeb3Systems();
                        }
                    }, 100);
                }
                
                // Move to advanced phase
                setTimeout(() => this.initAdvancedPhase(), 1000);
            },
            
            // Phase 4: Advanced Features (1s+)
            initAdvancedPhase() {
                console.log('🎮 Phase 4: Advanced Features');
                
                // Load game systems
                this.loadGameSystems();
                
                // Initialize analytics and tracking
                this.initAnalytics();
                
                // Final polish and optimizations
                this.finalPolish();
                
                console.log('✅ BlockZone Lab fully loaded and optimized');
            },
            
            // Load non-critical CSS asynchronously
            loadNonCriticalCSS() {
                const link = document.createElement('link');
                link.rel = 'stylesheet';
                link.href = 'assets/css/design-system.css';
                link.media = 'print';
                link.onload = () => {
                    link.media = 'all';
                    console.log('✅ Design system CSS loaded');
                };
                document.head.appendChild(link);
                
                const gameCSS = document.createElement('link');
                gameCSS.rel = 'stylesheet';
                gameCSS.href = 'assets/css/game-wrapper.css';
                gameCSS.media = 'print';
                gameCSS.onload = () => {
                    gameCSS.media = 'all';
                    console.log('✅ Game wrapper CSS loaded');
                };
                document.head.appendChild(gameCSS);
            },
            
            // Initialize basic interactions
            initBasicInteractions() {
                // Mobile menu toggle
                const navbarToggle = document.getElementById('navbarToggle');
                const navbarNavs = document.querySelectorAll('.navbar-nav');
                
                if (navbarToggle && navbarNavs.length > 0) {
                    navbarToggle.addEventListener('click', () => {
                        navbarNavs.forEach(nav => nav.classList.toggle('active'));
                    });
                }
                
                // Smooth scrolling for anchor links
                document.querySelectorAll('a[href^="#"]').forEach(anchor => {
                    anchor.addEventListener('click', function (e) {
                        e.preventDefault();
                        const target = document.querySelector(this.getAttribute('href'));
                        if (target) {
                            target.scrollIntoView({
                                behavior: 'smooth',
                                block: 'start'
                            });
                        }
                    });
                });
            },
            
            // Initialize Web3 systems
            initWeb3Systems() {
                console.log('🔗 Initializing Web3 systems...');
                
                // Check for Web3 wallet
                if (window.ethereum) {
                    console.log('✅ Web3 wallet detected');
                    this.initWalletConnection();
                } else {
                    console.log('⚠️ No Web3 wallet detected - Web3 features disabled');
                }
                
                // Initialize blockchain-aware components
                this.initBlockchainComponents();
            },
            
            // Initialize wallet connection
            initWalletConnection() {
                // Listen for account changes
                window.ethereum.on('accountsChanged', (accounts) => {
                    console.log('👛 Account changed:', accounts[0]);
                    this.updateWalletUI(accounts[0]);
                });
                
                // Check if already connected
                window.ethereum.request({ method: 'eth_accounts' })
                    .then(accounts => {
                        if (accounts.length > 0) {
                            this.updateWalletUI(accounts[0]);
                        }
                    })
                    .catch(err => console.log('No accounts found'));
            },
            
            // Update wallet UI
            updateWalletUI(address) {
                if (address) {
                    const shortAddress = address.slice(0, 6) + '...' + address.slice(-4);
                    console.log('👛 Connected:', shortAddress);
                    
                    // Update UI elements that show wallet status
                    const walletElements = document.querySelectorAll('[data-wallet-status]');
                    walletElements.forEach(el => {
                        el.textContent = shortAddress;
                        el.classList.add('connected');
                    });
                }
            },
            
            // Initialize blockchain components
            initBlockchainComponents() {
                // Add blockchain-aware features to existing components
                this.enhanceLeaderboard();
                this.enhanceGameCards();
            },
            
            // Enhance leaderboard with real-time data
            enhanceLeaderboard() {
                const leaderboardBtn = document.querySelector('.banner-btn');
                if (leaderboardBtn) {
                    leaderboardBtn.addEventListener('click', (e) => {
                        e.preventDefault();
                        this.showEnhancedLeaderboard();
                    });
                }
            },
            
            // Show enhanced leaderboard
            showEnhancedLeaderboard() {
                console.log('🏆 Showing enhanced leaderboard...');
                // This would integrate with your existing LeaderboardDisplay component
                if (window.showLeaderboard) {
                    window.showLeaderboard();
                }
            },
            
            // Enhance game cards with Web3 features
            enhanceGameCards() {
                const gameCards = document.querySelectorAll('.game-card');
                gameCards.forEach(card => {
                    // Add hover effects and Web3 context
                    card.addEventListener('mouseenter', () => {
                        card.style.transform = 'translateY(-5px) scale(1.02)';
                    });
                    
                    card.addEventListener('mouseleave', () => {
                        card.style.transform = 'translateY(0) scale(1)';
                    });
                });
            },
            
            // Load game systems
            loadGameSystems() {
                console.log('🎮 Loading game systems...');
                
                // Load PaywallManager and other game components
                this.loadGameComponents();
                
                // Initialize instant play architecture
                this.initInstantPlay();
            },
            
            // Load game components
            async loadGameComponents() {
                try {
                    // Dynamic import of game components
                    const { PaywallManager } = await import('./shared/components/PaywallManager.js');
                    const { LeaderboardDisplay } = await import('./shared/components/LeaderboardDisplay.js');
                    
                    // Initialize components
                    window.paywallManager = new PaywallManager();
                    window.leaderboardDisplay = new LeaderboardDisplay();
                    
                    console.log('✅ Game components loaded');
                } catch (error) {
                    console.warn('⚠️ Some game components failed to load:', error);
                }
            },
            
            // Initialize instant play
            initInstantPlay() {
                // Initialize your existing instant play architecture
                if (window.blockZoneInstantPlay) {
                    console.log('✅ Instant play architecture ready');
                }
            },
            
            // Initialize analytics
            initAnalytics() {
                // Performance monitoring
                if ('performance' in window) {
                    const perfData = performance.getEntriesByType('navigation')[0];
                    console.log('📊 Page load time:', perfData.loadEventEnd - perfData.loadEventStart, 'ms');
                }
                
                // User interaction tracking
                this.trackUserInteractions();
            },
            
            // Track user interactions
            trackUserInteractions() {
                // Track button clicks
                document.addEventListener('click', (e) => {
                    if (e.target.matches('.btn, button')) {
                        console.log('👆 User clicked:', e.target.textContent.trim());
                    }
                });
                
                // Track scroll depth
                let maxScroll = 0;
                window.addEventListener('scroll', () => {
                    const scrollPercent = (window.scrollY / (document.body.scrollHeight - window.innerHeight)) * 100;
                    if (scrollPercent > maxScroll) {
                        maxScroll = scrollPercent;
                        if (maxScroll > 50 && !this.scrollTracked) {
                            console.log('📊 User scrolled past 50%');
                            this.scrollTracked = true;
                        }
                    }
                });
            },
            
            // Final polish
            finalPolish() {
                // Add subtle animations
                this.addSubtleAnimations();
                
                // Optimize performance
                this.optimizePerformance();
                
                // Set up periodic health checks
                this.setupHealthChecks();
            },
            
            // Add subtle animations
            addSubtleAnimations() {
                // Parallax effect for hero section
                window.addEventListener('scroll', () => {
                    const scrolled = window.pageYOffset;
                    const hero = document.getElementById('heroSection');
                    if (hero) {
                        hero.style.transform = `translateY(${scrolled * 0.5}px)`;
                    }
                });
                
                // Floating animation for icons
                const icons = document.querySelectorAll('.action-icon, .pillar-icon, .benefit-icon');
                icons.forEach((icon, index) => {
                    icon.style.animationDelay = `${index * 0.1}s`;
                    icon.style.animation = 'float 3s ease-in-out infinite';
                });
            },
            
            // Optimize performance
            optimizePerformance() {
                // Lazy load images
                const images = document.querySelectorAll('img[data-src]');
                const imageObserver = new IntersectionObserver((entries) => {
                    entries.forEach(entry => {
                        if (entry.isIntersecting) {
                            const img = entry.target;
                            img.src = img.dataset.src;
                            img.classList.remove('lazy');
                            imageObserver.unobserve(img);
                        }
                    });
                });
                
                images.forEach(img => imageObserver.observe(img));
                
                // Preload critical resources
                this.preloadCriticalResources();
            },
            
            // Preload critical resources
            preloadCriticalResources() {
                const criticalResources = [
                    '/games/neondrop/',
                    '/academy/',
                    '/shared/components/PlayerProfile.js'
                ];
                
                criticalResources.forEach(resource => {
                    const link = document.createElement('link');
                    link.rel = 'prefetch';
                    link.href = resource;
                    document.head.appendChild(link);
                });
            },
            
            // Setup health checks
            setupHealthChecks() {
                // Monitor Web3 connection
                setInterval(() => {
                    if (window.ethereum && !window.ethereum.isConnected()) {
                        console.warn('⚠️ Web3 connection lost');
                    }
                }, 30000);
                
                // Monitor performance
                setInterval(() => {
                    if (performance.memory) {
                        const memoryUsage = performance.memory.usedJSHeapSize / 1048576; // MB
                        if (memoryUsage > 100) {
                            console.warn('⚠️ High memory usage:', memoryUsage.toFixed(2), 'MB');
                        }
                    }
                }, 60000);
            },
            
            // Trigger Web3 enhancement (called when ethers loads)
            triggerWeb3Enhancement() {
                if (this.currentPhase >= 2) {
                    this.initWeb3Systems();
                }
            },

            // Queue actions to run after current phase is complete
            queueAction(action) {
                setTimeout(action, 100); // Small delay to ensure DOM is ready
            }
        };
        
        // Start the loading sequence when DOM is ready
        if (document.readyState === 'loading') {
            document.addEventListener('DOMContentLoaded', () => {
                window.enhancementPhase.initCriticalPhase();
            });
        } else {
            window.enhancementPhase.initCriticalPhase();
        }
    </script>
</body>
</html> 