<!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 {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 1rem;
            display: flex;
            align-items: center;
            justify-content: space-between;
            height: 64px;
        }
        
        .navbar-brand {
            color: var(--primary);
            font-size: 1.5rem;
            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;
            height: 20px;
            border-radius: 3px;
            font-size: 14px;
            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);
        }
        
        .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);
        }
        
        .brand-letter:nth-child(10) {
            /* The space - make it invisible */
            background: transparent;
            border: none;
            box-shadow: none;
            width: 8px;
        }
        
        /* CRITICAL HERO SECTION */
        .hero-section {
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            padding: 2rem 1rem;
            opacity: 0;
            transform: translateY(30px);
            transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
        }
        
        .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: 2rem;
        }
        
        /* HERO CARDS - 3-second gradual materialization */
        .hero-cards {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 3rem;
            max-width: 450px;
            margin: 0 auto;
            opacity: 0;
            transform: translateY(30px) scale(0.95);
            transition: all 3s cubic-bezier(0.4, 0, 0.2, 1);
        }
        
        .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-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">
            <a href="/" class="navbar-brand">
                <span class="brand-letter">B</span>
                <span class="brand-letter">l</span>
                <span class="brand-letter">o</span>
                <span class="brand-letter">c</span>
                <span class="brand-letter">k</span>
                <span class="brand-letter">Z</span>
                <span class="brand-letter">o</span>
                <span class="brand-letter">n</span>
                <span class="brand-letter">e</span>
                <span class="brand-letter"> </span>
                <span class="brand-letter">L</span>
                <span class="brand-letter">a</span>
                <span class="brand-letter">b</span>
            </a>
            
            <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>
            </ul>
            
            <div class="navbar-actions">
                <a href="/pages/user-profile.html" class="btn btn-secondary btn-sm">Profile</a>
                <a href="/games/" class="btn btn-secondary btn-sm">Play Now</a>
            </div>
        </div>
    </nav>

    <!-- Hero Section - Critical Content First -->
    <section class="hero-section" id="heroSection">
        <div class="hero-content">
            <h1 class="hero-title">BlockZone Lab</h1>
            <p class="hero-subtitle">Premium Blockchain Edutainment</p>
            <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>

    <!-- 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-icon">🏆</div>
                <div class="banner-text">
                    <h3>Neon Drop Daily Challenge</h3>
                    <p>USDC prizes, hyperbolic decay payouts, daily tournaments!</p>
                </div>
                <div class="banner-stats">
                    <div class="stat">
                        <span class="stat-number">USDC</span>
                        <span class="stat-label">Prizes</span>
                    </div>
                    <div class="stat">
                        <span class="stat-number">30%</span>
                        <span class="stat-label">1st Place</span>
                    </div>
                    <div class="stat">
                        <span class="stat-number">11pm</span>
                        <span class="stat-label">Daily Reset</span>
                    </div>
                </div>
                <a href="#" class="banner-btn" onclick="showLeaderboard()">View Leaderboard</a>
            </div>
        </section>

        <!-- Blockchain Academy Section -->
        <section class="academy-section section">
            <div class="container">
                <div class="academy-header">
                    <h2>Blockchain Academy: Where Learning Meets Competition</h2>
                    <p class="academy-intro">
                        At BlockZone Lab, we've reimagined blockchain education by integrating it directly into competitive gaming. 
                        Our academy demonstrates real-world blockchain applications through hands-on experience—every tournament payout, 
                        smart contract interaction, and USDC transaction becomes a practical lesson in decentralized technology.
                    </p>
                </div>
                
                <div class="academy-cards">
                    <div class="academy-card">
                        <div class="card-icon">
                            <svg width="48" height="48" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M12 2L2 7L12 12L22 7L12 2Z" stroke="#00ff41" stroke-width="2" stroke-linejoin="round"/>
                                <path d="M2 17L12 22L22 17" stroke="#00ff41" stroke-width="2" stroke-linejoin="round"/>
                                <path d="M2 12L12 17L22 12" stroke="#00ff41" stroke-width="2" stroke-linejoin="round"/>
                            </svg>
                        </div>
                        <h3>Learn Through Application</h3>
                        <p>Master blockchain fundamentals while competing in skill-based tournaments that utilize the very technologies you're studying.</p>
                    </div>
                    
                    <div class="academy-card">
                        <div class="card-icon">
                            <svg width="48" height="48" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M12 1V23" stroke="#00ff41" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                <path d="M17 5H9.5C8.57174 5 7.6815 5.36875 7.02513 6.02513C6.36875 6.6815 6 7.57174 6 8.5C6 9.42826 6.36875 10.3185 7.02513 10.9749C7.6815 11.6313 8.57174 12 9.5 12H14.5C15.4283 12 16.3185 12.3687 16.9749 13.0251C17.6313 13.6815 18 14.5717 18 15.5C18 16.4283 17.6313 17.3185 16.9749 17.9749C16.3185 18.6313 15.4283 19 14.5 19H6" stroke="#00ff41" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                            </svg>
                        </div>
                        <h3>Earn Real Value</h3>
                        <p>Tournament winnings in USDC provide tangible proof of both your gaming skills and growing blockchain expertise.</p>
                    </div>
                    
                    <div class="academy-card">
                        <div class="card-icon">
                            <svg width="48" height="48" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M21 16V8C20.9996 7.64928 20.9071 7.30481 20.7315 7.00116C20.556 6.69752 20.3037 6.44536 20 6.27L13 2.27C12.696 2.09446 12.3511 2.00205 12 2.00205C11.6489 2.00205 11.304 2.09446 11 2.27L4 6.27C3.69626 6.44536 3.44398 6.69752 3.26846 7.00116C3.09294 7.30481 3.00036 7.64928 3 8V16C3.00036 16.3507 3.09294 16.6952 3.26846 16.9988C3.44398 17.3025 3.69626 17.5546 4 17.73L11 21.73C11.304 21.9055 11.6489 21.998 12 21.998C12.3511 21.998 12.696 21.9055 13 21.73L20 17.73C20.3037 17.5546 20.556 17.3025 20.7315 16.9988C20.9071 16.6952 20.9996 16.3507 21 16Z" stroke="#00ff41" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                <path d="M3.27 6.96L12 12.01L20.73 6.96" stroke="#00ff41" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                <path d="M12 22.08V12" stroke="#00ff41" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                            </svg>
                        </div>
                        <h3>Experience Real Infrastructure</h3>
                        <p>Interact with live smart contracts, witness transparent payouts, and understand DeFi mechanics through actual participation rather than theoretical study.</p>
                    </div>
                    
                    <div class="academy-card">
                        <div class="card-icon">
                            <svg width="48" height="48" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M16 4H18C19.1046 4 20 4.89543 20 6V18C20 19.1046 19.1046 20 18 20H6C4.89543 20 4 19.1046 4 18V6C4 4.89543 4.89543 4 6 4H8" stroke="#00ff41" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                <rect x="8" y="2" width="8" height="4" rx="1" ry="1" stroke="#00ff41" stroke-width="2"/>
                                <path d="M9 14L12 11L15 14" stroke="#00ff41" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                <path d="M12 11V17" stroke="#00ff41" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                            </svg>
                        </div>
                        <h3>Structured Progression</h3>
                        <p>Our curriculum scales from blockchain basics to advanced DeFi concepts, with each gaming session reinforcing theoretical knowledge through practical application.</p>
                    </div>
                </div>
            </div>
        </section>

        <!-- Footer -->
        <footer class="footer">
            <div class="container">
                <div class="footer-content">
                    <div class="footer-brand">
                        <span>✧</span> BlockZone Lab
                        <p>Professional gaming meets blockchain education</p>
                    </div>
                    
                    <div class="footer-links">
                                            <div class="footer-section">
                        <h4>Platform</h4>
                        <ul>
                            <li><a href="/games/">Games</a></li>
                            <li><a href="/academy/">Academy</a></li>
                            <li><a href="/pages/user-profile.html">Profile</a></li>
                        </ul>
                    </div>
                        
                                            <div class="footer-section">
                        <h4>Business</h4>
                        <ul>
                            <li><a href="/pages/business-model.html">Business Model</a></li>
                            <li><a href="/pages/whitepaper.html">Whitepaper</a></li>
                        </ul>
                    </div>
                        
                        <div class="footer-section">
                            <h4>Support</h4>
                            <ul>
                                <li><a href="/pages/user-profile.html">Help Center</a></li>
                                <li><a href="/pages/business-model.html">Contact</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
                
                <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 navbarNav = document.querySelector('.navbar-nav');
                
                if (navbarToggle && navbarNav) {
                    navbarToggle.addEventListener('click', () => {
                        navbarNav.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> 