Lotties dance battle

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Lottie Brooks: Dance Battle!</title>
    <style>
        body { background: #ffdef2; font-family: 'Comic Sans MS', cursive; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; margin: 0; overflow: hidden; }
        #game-container { width: 400px; height: 600px; background: white; border: 5px solid #ff69b4; border-radius: 20px; position: relative; text-align: center; box-shadow: 0 10px 30px rgba(0,0,0,0.1); }
        #stage { height: 300px; display: flex; flex-direction: column; justify-content: center; align-items: center; background: #fff0f9; }
        #character { font-size: 80px; transition: transform 0.1s; }
        #health-bar { width: 80%; height: 20px; background: #ddd; border-radius: 10px; margin: 10px auto; overflow: hidden; }
        #health-fill { width: 100%; height: 100%; background: #ff69b4; transition: width 0.3s; }
        #arrows { display: flex; justify-content: center; gap: 10px; margin-top: 40px; }
        .arrow { width: 60px; height: 60px; border: 3px solid #ff69b4; border-radius: 10px; line-height: 60px; font-size: 30px; color: #ff69b4; font-weight: bold; }
        .active { background: #ff69b4 !important; color: white !important; transform: scale(1.1); }
        #message { margin-top: 20px; font-weight: bold; color: #d02090; min-height: 24px; }
        #ui { padding: 20px; }
        .hidden { display: none; }
    </style>
</head>
<body>

    <div id="game-container">
        <div id="ui">
            <h2 id="enemy-name">Lottie's Minion: Richie</h2>
            <div id="health-bar"><div id="health-fill"></div></div>
            <p id="score">Score: 0</p>
        </div>

        <div id="stage">
            <div id="character">👦</div>
            <div id="message">Press Any Key to Start!</div>
        </div>

        <div id="arrows">
            <div id="arrow-Left" class="arrow">←</div>
            <div id="arrow-Up" class="arrow">↑</div>
            <div id="arrow-Down" class="arrow">↓</div>
            <div id="arrow-Right" class="arrow">→</div>
        </div>
    </div>

<script>
    const enemies = [
        { name: "Richie (The Annoying Brother)", emoji: "👦", health: 3 },
        { name: "Molly (The BFF)", emoji: "👧", health: 5 },
        { name: "LOTTIE BROOKS", emoji: "👸", health: 10 }
    ];

    let currentEnemyIndex = 0;
    let enemyHealth = enemies[0].health;
    let maxHealth = enemies[0].health;
    let score = 0;
    let sequence = [];
    let playerIndex = 0;
    let gameState = 'START'; // START, WATCHING, PLAYING, GAMEOVER

    const charEl = document.getElementById('character');
    const msgEl = document.getElementById('message');
    const healthEl = document.getElementById('health-fill');
    const enemyNameEl = document.getElementById('enemy-name');
    const scoreEl = document.getElementById('score');

    function updateUI() {
        enemyNameEl.innerText = enemies[currentEnemyIndex].name;
        charEl.innerText = enemies[currentEnemyIndex].emoji;
        healthEl.style.width = (enemyHealth / maxHealth * 100) + "%";
        scoreEl.innerText = "Score: " + score;
    }

    async function startTurn() {
        gameState = 'WATCHING';
        playerIndex = 0;
        sequence = [];
        msgEl.innerText = "Watch Lottie's Moves!";
        
        // Build sequence based on enemy difficulty
        const length = 3 + currentEnemyIndex;
        const keys = ['Left', 'Up', 'Down', 'Right'];
        
        for(let i=0; i<length; i++) {
            const move = keys[Math.floor(Math.random() * keys.length)];
            sequence.push(move);
            await flashArrow(move);
        }
        
        gameState = 'PLAYING';
        msgEl.innerText = "YOUR TURN! DANCE!";
    }

    function flashArrow(key) {
        return new Promise(resolve => {
            const el = document.getElementById('arrow-' + key);
            el.classList.add('active');
            charEl.style.transform = "translateX(" + (Math.random()*20-10) + "px) rotate(10deg)";
            setTimeout(() => {
                el.classList.remove('active');
                charEl.style.transform = "rotate(0deg)";
                setTimeout(resolve, 300);
            }, 400);
        });
    }

    window.addEventListener('keydown', (e) => {
        if(gameState === 'START') {
            startTurn();
            return;
        }

        if(gameState !== 'PLAYING') return;

        const keyMap = { "ArrowLeft": "Left", "ArrowUp": "Up", "ArrowDown": "Down", "ArrowRight": "Right" };
        const move = keyMap[e.key];

        if(!move) return;

        const expected = sequence[playerIndex];
        const el = document.getElementById('arrow-' + move);
        el.classList.add('active');
        setTimeout(() => el.classList.remove('active'), 200);

        if(move === expected) {
            playerIndex++;
            score += 10;
            if(playerIndex === sequence.length) {
                enemyHealth--;
                score += 50;
                msgEl.innerText = "SICK MOVES!";
                checkWin();
            }
        } else {
            msgEl.innerText = "OOPS! Embarrassing!";
            setTimeout(startTurn, 1000);
        }
        updateUI();
    });

    function checkWin() {
        if(enemyHealth <= 0) {
            currentEnemyIndex++;
            if(currentEnemyIndex >= enemies.length) {
                msgEl.innerText = "YOU ARE THE DANCE QUEEN!";
                gameState = 'GAMEOVER';
                charEl.innerText = "🏆";
            } else {
                enemyHealth = enemies[currentEnemyIndex].health;
                maxHealth = enemyHealth;
                msgEl.innerText = "New Challenger!";
                setTimeout(startTurn, 1500);
            }
        } else {
            setTimeout(startTurn, 1000);
        }
    }

    updateUI();
</script>
</body>
</html>