<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bubble Gum Stretch Game</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="/style.css">
</head>
<body class="bg-gray-100 flex justify-center items-center min-h-screen">
    <div id="game-container" class="w-full max-w-md bg-white rounded-lg shadow-lg p-6">
        <div id="level-info" class="text-center mb-4">
            <h2 class="text-2xl font-bold text-gray-800">Level <span id="current-level">1</span></h2>
            <p class="text-gray-600">Stretch the bubble gum longer than the house!</p>
        </div>

        <div id="game-stats" class="flex justify-between mb-4">
            <div>
                <span class="font-bold">House Length:</span>
                <span id="house-length" class="text-blue-600">100</span>
            </div>
            <div>
                <span class="font-bold">Bubble Gum:</span>
                <span id="gum-length" class="text-green-600">0</span>
            </div>
        </div>

        <div class="relative mb-4">
            <div id="house" class="bg-gray-300 h-4 w-full rounded"></div>
            <div id="gum" class="bg-green-500 h-4 w-0 rounded absolute top-0 left-0 transition-all"></div>
        </div>

        <button id="stretch-btn" class="w-full bg-blue-500 text-white py-2 rounded hover:bg-blue-600">
            Stretch Bubble Gum
        </button>

        <div id="hadif-event" class="mt-4 hidden text-red-500 text-center font-bold">
            Hadif is causing trouble!
        </div>

        <div id="hadif-progress" class="mt-2 hidden">
            <div class="w-full bg-gray-200 rounded-full h-2.5">
                <div id="hadif-bar" class="bg-red-600 h-2.5 rounded-full" style="width: 0%"></div>
            </div>
        </div>
    </div>
    <script src="/script.js"></script>
</body>
</html>
