<!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: 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.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>
                <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">
            <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-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>

        <!-- 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="hero-card game-card card card--hover card--glow">
                        <div class="hero-card-header">
                            <h3>Learn Through Application</h3>
                        </div>
                        <div class="hero-card-footer">
                            <div class="card-action-text">Master blockchain fundamentals while competing in skill-based tournaments</div>
                        </div>
                    </div>
                    
                    <div class="hero-card game-card card card--hover card--glow">
                        <div class="hero-card-header">
                            <h3>Earn Real Value</h3>
                        </div>
                        <div class="hero-card-footer">
                            <div class="card-action-text">Tournament winnings in USDC prove your skills and expertise</div>
                        </div>
                    </div>
                    
                    <div class="hero-card game-card card card--hover card--glow">
                        <div class="hero-card-header">
                            <h3>Experience Real Infrastructure</h3>
                        </div>
                        <div class="hero-card-footer">
                            <div class="card-action-text">Interact with live smart contracts and DeFi mechanics</div>
                        </div>
                    </div>
                    
                    <div class="hero-card game-card card card--hover card--glow">
                        <div class="hero-card-header">
                            <h3>Structured Progression</h3>
                        </div>
                        <div class="hero-card-footer">
                            <div class="card-action-text">Curriculum from basics to advanced DeFi concepts</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 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> 