👻 Spooky Catch 🎃

.halloween-game {
    text-align: center;
}

.instructions {
    max-width: 500px;
    margin: 0 auto 15px;
    font-size: 1em;
    color: #555;
}

.spooky-info {
    margin-bottom: 10px;
    font-size: 1.1em;
}

.spooky-area {
    position: relative;
    width: 320px;
    max-width: 100%;
    height: 320px;
    margin: 0 auto;
    overflow: hidden;
    border: 3px solid #ff7518;
    border-radius: 10px;
    background: radial-gradient(circle at 70% 20%, #3b2a5a 0%, #1a1025 60%, #0b0612 100%);
}

.spooky-item {
    position: absolute;
    border: none;
    background: none;
    font-size: 2.2em;
    line-height: 1;
    padding: 0;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    animation: spooky-pop 0.2s ease-out;
}

@keyframes spooky-pop {
    from { transform: scale(0); }
    to { transform: scale(1); }
}

.spooky-message {
    margin-top: 15px;
    font-weight: bold;
}

.start-btn {
    margin-top: 15px;
    padding: 10px 20px;
    font-size: 1em;
    background-color: #ff7518;
    color: #1a1025;
    font-weight: bold;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.start-btn:hover {
    background-color: #ff8f45;
}

.start-btn:disabled {
    background-color: #ccc;
    cursor: not-allowed;
}

<div class="halloween-game">
    <h1>👻 Spooky Catch 🎃</h1>
    <div class="instructions">
        Tap the ghosts 👻 and pumpkins 🎃 to score. Avoid the skulls 💀: three skulls and you're doomed!
    </div>
    <div class="spooky-info">
        Time: <span id="spookyTime">30</span>s &nbsp;|&nbsp; Score: <span id="spookyScore">0</span> &nbsp;|&nbsp; Lives: <span id="spookyLives">❤️❤️❤️</span>
    </div>
    <div class="spooky-area" id="spookyArea"></div>
    <div class="spooky-message" id="spookyMessage">Press "Start" if you dare...</div>
    <button class="start-btn" id="spookyStart">Start</button>
</div>

const area = document.getElementById('spookyArea');
    const timeDisplay = document.getElementById('spookyTime');
    const scoreDisplay = document.getElementById('spookyScore');
    const livesDisplay = document.getElementById('spookyLives');
    const message = document.getElementById('spookyMessage');
    const startButton = document.getElementById('spookyStart');
    const hiddenScore = document.getElementById('hiddenScore');

    const GAME_DURATION = 30;
    const MAX_LIVES = 3;
    const ITEM_SIZE = 44;
    const GOOD_ITEMS = ['👻', '🎃'];
    const BAD_ITEM = '💀';

    let score = 0;
    let lives = MAX_LIVES;
    let timeLeft = GAME_DURATION;
    let playing = false;
    let countdown;
    let spawner;

    function updateLives() {
        livesDisplay.textContent = '❤️'.repeat(lives) || '💔';
    }

    function spawnItem() {
        if (!playing) {
            return;
        }
        const isBad = Math.random() < 0.3;
        const item = document.createElement('button');
        item.className = 'spooky-item';
        item.textContent = isBad ? BAD_ITEM : GOOD_ITEMS[Math.floor(Math.random() * GOOD_ITEMS.length)];
        item.style.left = Math.random() * (area.clientWidth - ITEM_SIZE) + 'px';
        item.style.top = Math.random() * (area.clientHeight - ITEM_SIZE) + 'px';

        item.addEventListener('click', () => {
            if (!playing) {
                return;
            }
            item.remove();
            if (isBad) {
                lives--;
                updateLives();
                if (lives <= 0) {
                    endGame('The skulls got you! Final score: ' + score);
                }
            } else {
                score++;
                scoreDisplay.textContent = score;
                hiddenScore.value = score; // Update hidden score field
            }
        });

        area.appendChild(item);

        // Items vanish faster as the score grows
        const lifetime = Math.max(600, 1500 - score * 25);
        setTimeout(() => item.remove(), lifetime);

        const nextSpawn = Math.max(300, 800 - score * 12);
        spawner = setTimeout(spawnItem, nextSpawn);
    }

    function endGame(text) {
        playing = false;
        clearInterval(countdown);
        clearTimeout(spawner);
        area.innerHTML = '';
        startButton.disabled = false;
        message.textContent = text;
        document.querySelector('.share-buttons').style.display = 'flex'; // Show share buttons
    }

    function startGame() {
        score = 0;
        lives = MAX_LIVES;
        timeLeft = GAME_DURATION;
        playing = true;
        scoreDisplay.textContent = score;
        timeDisplay.textContent = timeLeft;
        hiddenScore.value = score;
        updateLives();
        area.innerHTML = '';
        message.textContent = 'Catch them all!';
        startButton.disabled = true;
        document.querySelector('.share-buttons').style.display = 'none';

        spawnItem();
        countdown = setInterval(() => {
            timeLeft--;
            timeDisplay.textContent = timeLeft;
            if (timeLeft <= 0) {
                endGame('Time’s up! Final score: ' + score);
            }
        }, 1000);
    }

    startButton.addEventListener('click', startGame);