<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-9L198NC26X"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'G-9L198NC26X');
</script>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Memory Challenge - Brain Training Game | Improve Your Memory Skills</title>

<!-- Favicon -->
<link rel="icon" type="image/png" href="favicon.png">
<link rel="shortcut icon" href="favicon.png" type="image/png">
<link rel="apple-touch-icon" href="favicon.png">

    <meta name="description" content="Play the Memory Challenge brain training game to improve your memory skills. Watch color sequences and repeat them back to advance through levels. Free online memory game for cognitive enhancement.">
    <meta name="keywords" content="memory game, brain training, cognitive enhancement, memory skills, sequence game, brain exercise, mental training, memory improvement">
    <meta name="author" content="Memory Challenge Game">
    <meta property="og:title" content="Memory Challenge - Brain Training Game">
    <meta property="og:description" content="Improve your memory skills with this engaging sequence-based brain training game">
    <meta property="og:type" content="website">
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="Memory Challenge - Brain Training Game">
    <meta name="twitter:description" content="Train your brain with our Memory Challenge game - watch sequences and repeat them back">
    
    <!-- Safe External Libraries (All Open Source) -->
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.4.0/css/all.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Nunito:wght@400;600;700&display=swap" rel="stylesheet">
    
    <style>
        :root {
            --primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            --secondary-gradient: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
            --success-gradient: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
            --warning-gradient: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
            --danger-gradient: linear-gradient(135deg, #ff6b6b 0%, #ee5a24 100%);
            --glass-bg: rgba(255, 255, 255, 0.95);
            --glass-border: rgba(102, 126, 234, 0.3);
            --shadow-soft: 0 20px 40px rgba(0, 0, 0, 0.1);
            --shadow-medium: 0 10px 30px rgba(0, 0, 0, 0.15);
            --shadow-hard: 0 5px 15px rgba(0, 0, 0, 0.2);
        }
        
        * {
            font-family: 'Inter', sans-serif;
        }
        
        body {
            background: white;
            min-height: 100vh;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }
        
        .glass-card {
            background: var(--glass-bg);
            backdrop-filter: blur(10px);
            border: 1px solid var(--glass-border);
            box-shadow: var(--shadow-soft);
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }
        
        .glass-card:hover {
            background: rgba(255, 255, 255, 0.98);
            transform: translateY(-2px);
            box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
        }
        
        .gradient-text {
            background: var(--primary-gradient);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        
        .btn-primary {
            background: var(--primary-gradient);
            color: white;
            border: none;
            padding: 12px 32px;
            border-radius: 12px;
            font-weight: 600;
            font-size: 14px;
            transition: all 0.3s ease;
            box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
            cursor: pointer;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }
        
        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(102, 126, 234, 0.6);
        }
        
        .btn-primary:disabled {
            opacity: 0.6;
            cursor: not-allowed;
            transform: none;
        }
        
        .btn-secondary {
            background: #e1f0ff;
            color: #3b82f6;
            border: 1px solid #bfdbfe;
            padding: 12px 32px;
            border-radius: 12px;
            font-weight: 500;
            font-size: 14px;
            transition: all 0.3s ease;
            cursor: pointer;
        }
        
        .btn-secondary:hover {
            background: #d0e4ff;
            transform: translateY(-2px);
            box-shadow: var(--shadow-medium);
        }
        
        .memory-button {
            width: 100px;
            height: 100px;
            border-radius: 20px;
            border: 4px solid rgba(255, 255, 255, 0.3);
            cursor: pointer;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            position: relative;
            overflow: hidden;
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
        }
        
        .memory-button:hover {
            transform: scale(1.05);
            box-shadow: 0 12px 35px rgba(0, 0, 0, 0.15);
        }
        
        .memory-button.active {
            transform: scale(1.1);
            box-shadow: 0 0 30px rgba(255, 255, 255, 0.6);
            border-color: rgba(0, 0, 0, 0.8);
        }
        
        .memory-button.correct {
            animation: correctPulse 0.6s ease-in-out;
        }
        
        .memory-button.wrong {
            animation: wrongShake 0.6s ease-in-out;
        }
        
        @keyframes correctPulse {
            0% { transform: scale(1); }
            50% { transform: scale(1.15); box-shadow: 0 0 40px rgba(76, 175, 80, 0.8); }
            100% { transform: scale(1); }
        }
        
        @keyframes wrongShake {
            0%, 20%, 40%, 60%, 80% { transform: translateX(0); }
            10%, 30%, 50%, 70%, 90% { transform: translateX(-10px); }
            100% { transform: translateX(0); }
        }
        
        .score-display {
            background: var(--success-gradient);
            color: white;
            padding: 12px 24px;
            border-radius: 20px;
            font-weight: 700;
            font-size: 18px;
            display: inline-block;
            margin: 8px;
            box-shadow: 0 4px 15px rgba(76, 175, 80, 0.3);
        }
        
        .level-display {
            background: var(--warning-gradient);
            color: white;
            padding: 12px 24px;
            border-radius: 20px;
            font-weight: 700;
            font-size: 18px;
            display: inline-block;
            margin: 8px;
            box-shadow: 0 4px 15px rgba(255, 193, 7, 0.3);
        }
        
        .lives-display {
            background: var(--danger-gradient);
            color: white;
            padding: 12px 24px;
            border-radius: 20px;
            font-weight: 700;
            font-size: 18px;
            display: inline-block;
            margin: 8px;
            box-shadow: 0 4px 15px rgba(255, 107, 107, 0.3);
        }
        
        .game-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 20px;
            max-width: 360px;
            margin: 0 auto;
            padding: 20px;
        }
        
        .progress-bar {
            width: 100%;
            height: 10px;
            background: rgba(0, 0, 0, 0.1);
            border-radius: 5px;
            overflow: hidden;
            margin: 20px 0;
        }
        
        .progress-fill {
            height: 100%;
            background: var(--primary-gradient);
            transition: width 0.3s ease;
            border-radius: 5px;
        }
        
        .game-status {
            text-align: center;
            padding: 10px;
            font-size: 18px;
            font-weight: 600;
            color: #4a5568;
        }
        
        .hero-section {
            text-align: center;
            padding: 10px 20px 10px;
            color: #4a5568;
        }
        
        .hero-title {
            font-size: 2.5rem;
            font-weight: 700;
            margin-bottom: 12px;
        }
        
        .hero-subtitle {
            font-size: 1.1rem;
            margin-bottom: 20px;
            opacity: 0.8;
        }
        
        .game-container {
            background: var(--glass-bg);
            backdrop-filter: blur(10px);
            border: 1px solid var(--glass-border);
            border-radius: 24px;
            margin: 0 auto;
            max-width: 600px;
            padding: 20px;
            box-shadow: var(--shadow-soft);
        }
        
        .page-container {
            display: flex;
            min-height: 100vh;
            padding: 10px 0;
        }
        
        .ad-container {
            width: 160px;
            height: 600px;
            background: #f5f5f5;
            border: 1px solid #e2e8f0;
            margin: 0 10px;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding-top: 10px;
            position: absolute;
            top: 80px;
        }
        
        .left-ad-container {
            left: 0;
        }
        
        .right-ad-container {
            right: 0;
        }
        
        .ad-image {
            width: 100px;
            height: 100px;
            margin-bottom: 20px;
            object-fit: cover;
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s ease;
        }
        
        .ad-image:hover {
            transform: scale(1.05);
        }
        
        .main-content {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            margin: 0 180px;
        }

        /* Angel Mascot Styles */
        .angel-mascot-container {
            position: absolute;
            top: 20px;
            left: 20px;
            z-index: 1000;
        }
        
        .angel-face {
            display: inline-block;
            width: 40px;
            height: 40px;
            position: relative;
            vertical-align: middle;
            margin: 0 4px;
            border-radius: 50%;
            background: linear-gradient(145deg, #ffecd1, #ffb88c);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), inset 0 2px 4px rgba(255, 255, 255, 0.3);
            transition: all 0.3s ease;
            overflow: visible;
        }

        /* Game Over Modal */
        .game-over-modal {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(0, 0, 0, 0.5);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 1000;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.3s ease;
        }

        .game-over-modal.active {
            opacity: 1;
            pointer-events: all;
        }

        .game-over-content {
            background-color: white;
            padding: 2rem;
            border-radius: 12px;
            text-align: center;
            max-width: 400px;
            width: 90%;
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
        }

        .game-over-content h3 {
            font-size: 1.5rem;
            margin-bottom: 1rem;
            color: #4a5568;
        }

        .game-over-content p {
            font-size: 1.1rem;
            margin-bottom: 1.5rem;
            color: #718096;
        }

        .game-over-btn {
            background: var(--primary-gradient);
            color: white;
            border: none;
            padding: 10px 24px;
            border-radius: 8px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .game-over-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(102, 126, 234, 0.6);
        }
        
        @media (max-width: 768px) {
            .hero-title {
                font-size: 2rem;
            }
            
            .memory-button {
                width: 80px;
                height: 80px;
            }
            
            .game-grid {
                gap: 15px;
                max-width: 280px;
            }
            
            .game-container {
                margin: 16px;
                padding: 20px;
            }
            
            .ad-container {
                display: none;
            }
            
            .main-content {
                margin: 0;
            }
        }
        
        @media (max-width: 480px) {
            .hero-title {
                font-size: 1.8rem;
            }
            
            .memory-button {
                width: 70px;
                height: 70px;
            }
            
            .game-grid {
                gap: 12px;
                max-width: 240px;
            }
            
            .score-display, .level-display, .lives-display {
                font-size: 16px;
                padding: 10px 20px;
            }

            .angel-mascot-container {
                top: 10px;
                left: 10px;
            }
        }
    </style>
</head>
<body>
    <!-- Angel Mascot with Home Link -->
    <a href="../index.html" class="angel-mascot-container">
        <div class="angel-face" id="angelFace">
            <!-- Hair -->
            <div style="
                content: '';
                position: absolute;
                top: -8px;
                left: -2px;
                right: -2px;
                height: 25px;
                background: linear-gradient(145deg, #d4af37, #ffd700);
                border-radius: 50% 50% 45% 45%;
                z-index: 2;
                box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
            "></div>
            
            <!-- Halo -->
            <div style="
                content: '';
                position: absolute;
                top: -15px;
                left: 50%;
                transform: translateX(-50%);
                width: 35px;
                height: 6px;
                border: 2px solid #ffd700;
                border-radius: 50%;
                background: transparent;
                box-shadow: 0 0 8px rgba(255, 215, 0, 0.4);
                z-index: 3;
            "></div>
            
            <!-- Left Eye -->
            <div class="left-eye" style="
                position: absolute;
                width: 8px;
                height: 8px;
                background: #fff;
                border-radius: 50%;
                top: 45%;
                left: 28%;
                border: 1px solid #e0e0e0;
                box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
                z-index: 1;
            ">
                <div class="left-pupil" id="leftPupil" style="
                    position: absolute;
                    width: 4px;
                    height: 4px;
                    background: #2563eb;
                    border-radius: 50%;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                    transition: all 0.1s ease;
                    z-index: 1;
                ">
                    <div style="
                        content: '';
                        position: absolute;
                        width: 1.5px;
                        height: 1.5px;
                        background: white;
                        border-radius: 50%;
                        top: 20%;
                        left: 30%;
                    "></div>
                </div>
            </div>
            
            <!-- Right Eye -->
            <div class="right-eye" style="
                position: absolute;
                width: 8px;
                height: 8px;
                background: #fff;
                border-radius: 50%;
                top: 45%;
                left: 64%;
                border: 1px solid #e0e0e0;
                box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
                z-index: 1;
            ">
                <div class="right-pupil" id="rightPupil" style="
                    position: absolute;
                    width: 4px;
                    height: 4px;
                    background: #2563eb;
                    border-radius: 50%;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                    transition: all 0.1s ease;
                    z-index: 1;
                ">
                    <div style="
                        content: '';
                        position: absolute;
                        width: 1.5px;
                        height: 1.5px;
                        background: white;
                        border-radius: 50%;
                        top: 20%;
                        left: 30%;
                    "></div>
                </div>
            </div>
            
            <!-- Nose -->
            <div class="nose" style="
                position: absolute;
                top: 55%;
                left: 50%;
                transform: translateX(-50%);
                width: 2px;
                height: 3px;
                background: #ffb88c;
                border-radius: 0 0 50% 50%;
                z-index: 1;
            "></div>
            
            <!-- Smile -->
            <div class="smile" style="
                position: absolute;
                top: 65%;
                left: 50%;
                transform: translateX(-50%);
                width: 12px;
                height: 6px;
                border: 1.5px solid #ff6b8a;
                border-top: none;
                border-radius: 0 0 12px 12px;
                background: transparent;
                z-index: 1;
            "></div>
            
            <!-- Cheeks -->
            <div class="left-cheek" style="
                position: absolute;
                width: 6px;
                height: 4px;
                background: rgba(255, 182, 193, 0.6);
                border-radius: 50%;
                top: 58%;
                left: 15%;
                z-index: 1;
            "></div>
            <div class="right-cheek" style="
                position: absolute;
                width: 6px;
                height: 4px;
                background: rgba(255, 182, 193, 0.6);
                border-radius: 50%;
                top: 58%;
                right: 15%;
                z-index: 1;
            "></div>
        </div>
    </a>

    <!-- Game Over Modal -->
    <div class="game-over-modal" id="gameOverModal">
        <div class="game-over-content">
            <h3>Game Over!</h3>
            <p id="finalScoreText">Your final score: 0</p>
            <button class="game-over-btn" onclick="closeGameOverModal()">OK</button>
        </div>
    </div>

    <div class="page-container">
        <!-- Left Ad Container -->
        <div class="ad-container left-ad-container">
            <a href="../balloonblast/balloonblast.html">
                <img src="../balloonblast/balloonblast.png" alt="Balloon Blast" class="ad-image">
            </a>
            <a href="../memorychallenge/memchal.html">
                <img src="../memorychallenge/memorychallenge.png" alt="Memory Challenge" class="ad-image">
            </a>
            <a href="../mergetiles/mergetiles.html">
                <img src="../mergetiles/mergetiles.png" alt="Merge Tiles" class="ad-image">
            </a>
            <a href="../multihorn/multihorn.html">
                <img src="../multihorn/multihorn.png" alt="Multi Horn" class="ad-image">
            </a>
            <a href="../zenbreath/zenbreath.html">
                <img src="../zenbreath/zenbreath.png" alt="Zen Breath" class="ad-image">
            </a>
        </div>
        
        <!-- Main Content -->
        <div class="main-content">
            <!-- Hero Section -->
            <div class="hero-section">
                <h1 class="hero-title"><i class="fas fa-brain gradient-text" style="margin-right: 10px;"></i>Memory Challenge</h1>
                <p class="hero-subtitle">Train your brain with sequence memorization</p>
            </div>
            
            <!-- Game Container -->
            <div class="game-container">
                <!-- Game Stats -->
                <div class="flex flex-wrap justify-center mb-4">
                    <div class="score-display">
                        <i class="fas fa-star mr-2"></i>
                        Score: <span id="score">0</span>
                    </div>
                    <div class="level-display">
                        <i class="fas fa-layer-group mr-2"></i>
                        Level: <span id="level">1</span>
                    </div>
                    <div class="lives-display">
                        <i class="fas fa-heart mr-2"></i>
                        Lives: <span id="lives">3</span>
                    </div>
                </div>
                
                <!-- Progress Bar -->
                <div class="progress-bar">
                    <div class="progress-fill" id="progressFill" style="width: 0%"></div>
                </div>
                
                <!-- Game Status -->
                <div class="game-status" id="gameStatus">
                    Ready to start? Click the button below!
                </div>
                
                <!-- Game Grid -->
                <div class="game-grid" id="gameGrid">
                    <!-- Memory buttons will be generated here -->
                </div>
                
                <!-- Game Controls -->
                <div class="flex flex-wrap justify-center gap-4 mt-6">
                    <button class="btn-primary" id="startBtn" onclick="startGame()">
                        <i class="fas fa-play mr-2"></i>
                        Start Game
                    </button>
                    <button class="btn-secondary" id="resetBtn" onclick="resetGame()" style="display: none;">
                        <i class="fas fa-redo mr-2"></i>
                        Reset
                    </button>
                    <button class="btn-secondary" onclick="showInstructions()">
                        <i class="fas fa-info-circle mr-2"></i>
                        How to Play
                    </button>
                </div>
            </div>
        </div>
        
        <!-- Right Ad Container -->
        <div class="ad-container right-ad-container">
            <a href="../numberflow/numberflowpro.html">
                <img src="../numberflow/numberflowpro.png" alt="NumberFlow Pro" class="ad-image">
            </a>
            <a href="../quickmath/quickmath.html">
                <img src="../quickmath/quickmath.png" alt="Quick Math" class="ad-image">
            </a>
            <a href="../aquarium/aquarium.html">
                <img src="../aquarium/aquarium.png" alt="Aquarium" class="ad-image">
            </a>
            <a href="../nexusgrid/nexusgrid.html">
                <img src="../nexusgrid/nexusgrid.png" alt="Nexus Grid" class="ad-image">
            </a>
            <a href="../interactivelights/interactivelights.html">
                <img src="../interactivelights/interactivelights.png" alt="Interactive Lights" class="ad-image">
            </a>
        </div>
    </div>
    
    <!-- Instructions Modal -->
    <div id="instructionsModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
        <div class="bg-white rounded-lg p-8 max-w-md mx-4">
            <h3 class="text-2xl font-bold mb-4 text-gray-800">How to Play</h3>
            <div class="text-gray-600 space-y-3">
                <p><strong>1.</strong> Watch the sequence of colors light up</p>
                <p><strong>2.</strong> Repeat the sequence by clicking the buttons in the same order</p>
                <p><strong>3.</strong> Each level adds one more color to the sequence</p>
                <p><strong>4.</strong> You have 3 lives - lose all lives and the game ends</p>
                <p><strong>5.</strong> Try to achieve the highest score possible!</p>
            </div>
            <div class="mt-6 text-center">
                <button class="btn-primary" onclick="closeInstructions()">
                    <i class="fas fa-check mr-2"></i>
                    Got it!
                </button>
            </div>
        </div>
    </div>
    
    <script>
        // Game State
        let gameState = {
            sequence: [],
            playerSequence: [],
            level: 1,
            score: 0,
            lives: 3,
            isPlaying: false,
            isShowingSequence: false,
            currentStep: 0
        };
        
        // Game Colors
        const colors = [
            '#ff6b6b', '#4ecdc4', '#45b7d1', 
            '#96ceb4', '#ffeaa7', '#dda0dd'
        ];

        // Game Over Modal Functions
        function showGameOverModal() {
            document.getElementById('finalScoreText').textContent = `Your final score: ${gameState.score}`;
            document.getElementById('gameOverModal').classList.add('active');
        }

        function closeGameOverModal() {
            document.getElementById('gameOverModal').classList.remove('active');
        }
        
        // Initialize Game
        function initGame() {
            createGameGrid();
            updateDisplay();
            
            // Initialize progress bar
            document.getElementById('progressFill').style.width = '0%';
        }
        
        // Create Game Grid
        function createGameGrid() {
            const gameGrid = document.getElementById('gameGrid');
            gameGrid.innerHTML = '';
            
            colors.forEach((color, index) => {
                const button = document.createElement('button');
                button.className = 'memory-button';
                button.style.backgroundColor = color;
                button.dataset.index = index;
                button.addEventListener('click', () => handlePlayerInput(index));
                gameGrid.appendChild(button);
            });
        }
        
        // Update Display
        function updateDisplay() {
            document.getElementById('score').textContent = gameState.score;
            document.getElementById('level').textContent = gameState.level;
            document.getElementById('lives').textContent = gameState.lives;
            
            // Update progress bar (5% per level)
            const progress = Math.min((gameState.level - 1) * 5, 100);
            document.getElementById('progressFill').style.width = progress + '%';
        }
        
        // Start Game
        function startGame() {
            if (gameState.isPlaying) return;
            
            gameState.isPlaying = true;
            gameState.sequence = [];
            gameState.playerSequence = [];
            gameState.level = 1;
            gameState.score = 0;
            gameState.lives = 3;
            
            document.getElementById('startBtn').style.display = 'none';
            document.getElementById('resetBtn').style.display = 'inline-block';
            
            updateDisplay();
            nextLevel();
        }
        
        // Reset Game
        function resetGame() {
            gameState.isPlaying = false;
            gameState.isShowingSequence = false;
            gameState.sequence = [];
            gameState.playerSequence = [];
            gameState.level = 1;
            gameState.score = 0;
            gameState.lives = 3;
            
            document.getElementById('startBtn').style.display = 'inline-block';
            document.getElementById('resetBtn').style.display = 'none';
            document.getElementById('gameStatus').textContent = 'Ready to start? Click the button below!';
            
            // Reset all buttons
            const buttons = document.querySelectorAll('.memory-button');
            buttons.forEach(button => {
                button.classList.remove('active', 'correct', 'wrong');
            });
            
            updateDisplay();
        }
        
        // Next Level
        function nextLevel() {
            gameState.playerSequence = [];
            gameState.currentStep = 0;
            
            // Add new color to sequence
            const newColor = Math.floor(Math.random() * colors.length);
            gameState.sequence.push(newColor);
            
            document.getElementById('gameStatus').textContent = `Level ${gameState.level} - Watch the sequence!`;
            
            setTimeout(() => {
                showSequence();
            }, 800);
        }
        
        // Show Sequence
        function showSequence() {
            gameState.isShowingSequence = true;
            let sequenceIndex = 0;
            
            function showNext() {
                if (sequenceIndex < gameState.sequence.length) {
                    const colorIndex = gameState.sequence[sequenceIndex];
                    const button = document.querySelector(`[data-index="${colorIndex}"]`);
                    
                    // Light up button
                    button.classList.add('active');
                    
                    // Play sound effect (visual feedback)
                    setTimeout(() => {
                        button.classList.remove('active');
                        sequenceIndex++;
                        
                        if (sequenceIndex < gameState.sequence.length) {
                            setTimeout(showNext, 300);
                        } else {
                            gameState.isShowingSequence = false;
                            document.getElementById('gameStatus').textContent = 'Now repeat the sequence!';
                        }
                    }, 500);
                } else {
                    gameState.isShowingSequence = false;
                    document.getElementById('gameStatus').textContent = 'Now repeat the sequence!';
                }
            }
            
            setTimeout(showNext, 300);
        }
        
        // Handle Player Input
        function handlePlayerInput(colorIndex) {
            if (!gameState.isPlaying || gameState.isShowingSequence) return;
            
            const button = document.querySelector(`[data-index="${colorIndex}"]`);
            button.classList.add('active');
            
            setTimeout(() => {
                button.classList.remove('active');
            }, 150);
            
            gameState.playerSequence.push(colorIndex);
            
            // Check if current input is correct
            const currentIndex = gameState.playerSequence.length - 1;
            if (gameState.playerSequence[currentIndex] !== gameState.sequence[currentIndex]) {
                // Wrong input
                handleWrongInput(button);
                return;
            }
            
            // Check if sequence is complete
            if (gameState.playerSequence.length === gameState.sequence.length) {
                handleCorrectSequence();
            }
        }
        
        // Handle Wrong Input
        function handleWrongInput(button) {
            button.classList.add('wrong');
            gameState.lives--;
            
            setTimeout(() => {
                button.classList.remove('wrong');
            }, 500);
            
            if (gameState.lives <= 0) {
                gameState.lives = 0; // Ensure lives shows 0
                updateDisplay();
                gameOver();
            } else {
                document.getElementById('gameStatus').textContent = `Wrong! ${gameState.lives} lives remaining. Try again!`;
                updateDisplay();
                
                // Reset player sequence and try again
                gameState.playerSequence = [];
                setTimeout(() => {
                    showSequence();
                }, 1000);
            }
        }
        
        // Handle Correct Sequence
        function handleCorrectSequence() {
            // Calculate score
            const levelBonus = gameState.level * 100;
            const speedBonus = Math.max(0, 50 - (gameState.playerSequence.length * 5));
            gameState.score += levelBonus + speedBonus;
            
            // Show correct feedback
            const buttons = document.querySelectorAll('.memory-button');
            gameState.sequence.forEach(colorIndex => {
                buttons[colorIndex].classList.add('correct');
            });
            
            setTimeout(() => {
                buttons.forEach(button => {
                    button.classList.remove('correct');
                });
            }, 800);
            
            gameState.level++;
            updateDisplay();
            
            document.getElementById('gameStatus').textContent = `Excellent! Level ${gameState.level - 1} complete!`;
            
            // Check for victory condition
            if (gameState.level > 20) {
                gameWon();
            } else {
                setTimeout(() => {
                    nextLevel();
                }, 1500);
            }
        }
        
        // Game Over
        function gameOver() {
            gameState.isPlaying = false;
            document.getElementById('gameStatus').textContent = `Game Over! Final Score: ${gameState.score}`;
            
            document.getElementById('startBtn').style.display = 'inline-block';
            document.getElementById('resetBtn').style.display = 'none';

            // Show game over modal
            showGameOverModal();
        }
        
        // Game Won
        function gameWon() {
            gameState.isPlaying = false;
            gameState.score += 1000; // Victory bonus
            updateDisplay();
            
            document.getElementById('gameStatus').textContent = `Congratulations! You've mastered all levels! Final Score: ${gameState.score}`;
            
            document.getElementById('startBtn').style.display = 'inline-block';
            document.getElementById('resetBtn').style.display = 'none';
        }
        
        // Show Instructions
        function showInstructions() {
            document.getElementById('instructionsModal').classList.remove('hidden');
        }
        
        // Close Instructions
        function closeInstructions() {
            document.getElementById('instructionsModal').classList.add('hidden');
        }
        
        // Keyboard Controls
        document.addEventListener('keydown', function(e) {
            if (e.key === 'Escape') {
                closeInstructions();
                closeGameOverModal();
            }
            
            if (e.key === ' ' && !gameState.isPlaying) {
                e.preventDefault();
                startGame();
            }
            
            if (e.key === 'r' && gameState.isPlaying) {
                resetGame();
            }
        });

        // Angel Mascot Eye Tracking
        document.addEventListener('DOMContentLoaded', function() {
            const angelFace = document.getElementById('angelFace');
            const leftPupil = document.getElementById('leftPupil');
            const rightPupil = document.getElementById('rightPupil');
            
            if (angelFace && leftPupil && rightPupil) {
                document.addEventListener('mousemove', function(e) {
                    const rect = angelFace.getBoundingClientRect();
                    const faceCenterX = rect.left + rect.width / 2;
                    const faceCenterY = rect.top + rect.height / 2;
                    
                    const angle = Math.atan2(e.clientY - faceCenterY, e.clientX - faceCenterX);
                    
                    const maxMovement = 1.5;
                    const pupilX = Math.cos(angle) * maxMovement;
                    const pupilY = Math.sin(angle) * maxMovement;
                    
                    leftPupil.style.transform = `translate(calc(-50% + ${pupilX}px), calc(-50% + ${pupilY}px)`;
                    rightPupil.style.transform = `translate(calc(-50% + ${pupilX}px), calc(-50% + ${pupilY}px)`;
                });
                
                document.addEventListener('mouseleave', function() {
                    leftPupil.style.transform = 'translate(-50%, -50%)';
                    rightPupil.style.transform = 'translate(-50%, -50%)';
                });
            }
        });
        
        // Initialize when page loads
        document.addEventListener('DOMContentLoaded', initGame);
    </script>
</body>
</html>