```html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>楽しいクリックゲーム</title>
    <style>
        @keyframes pop {
            0% { transform: scale(1); }
            50% { transform: scale(1.2); }
            100% { transform: scale(1); }
        }
        @keyframes rotate {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        @keyframes fade {
            0% { opacity: 1; }
            100% { opacity: 0; }
        }
    </style>
</head>
<body>
    <div style="display: flex; flex-wrap: wrap; width: 400px; height: 400px; justify-content: center; align-items: center; position: relative;">
        <div id="circle1" onclick="handleClick(this)" style="width: 100px; height: 100px; border-radius: 50%; background-color: white; margin: 5px; display: flex; justify-content: center; align-items: center; font-size: 2em;"></div>
        <div id="circle2" onclick="handleClick(this)" style="width: 100px; height: 100px; border-radius: 50%; background-color: white; margin: 5px; display: flex; justify-content: center; align-items: center; font-size: 2em;"></div>
        <div id="circle3" onclick="handleClick(this)" style="width: 100px; height: 100px; border-radius: 50%; background-color: white; margin: 5px; display: flex; justify-content: center; align-items: center; font-size: 2em;"></div>
        <div id="circle4" onclick="handleClick(this)" style="width: 100px; height: 100px; border-radius: 50%; background-color: black; margin: 5px; display: flex; justify-content: center; align-items: center; font-size: 2em; color: white;">🔴</div>
        <div id="circle5" onclick="handleClick(this)" style="width: 100px; height: 100px; border-radius: 50%; background-color: white; margin: 5px; display: flex; justify-content: center; align-items: center; font-size: 2em;"></div>
        <div id="circle6" onclick="handleClick(this)" style="width: 100px; height: 100px; border-radius: 50%; background-color: white; margin: 5px; display: flex; justify-content: center; align-items: center; font-size: 2em;"></div>
        <div id="circle7" onclick="handleClick(this)" style="width: 100px; height: 100px; border-radius: 50%; background-color: white; margin: 5px; display: flex; justify-content: center; align-items: center; font-size: 2em;"></div>
        <div id="circle8" onclick="handleClick(this)" style="width: 100px; height: 100px; border-radius: 50%; background-color: white; margin: 5px; display: flex; justify-content: center; align-items: center; font-size: 2em;"></div>
        <div id="circle9" onclick="handleClick(this)" style="width: 100px; height: 100px; border-radius: 50%; background-color: white; margin: 5px; display: flex; justify-content: center; align-items: center; font-size: 2em;"></div>
    </div>

    <div id="score" style="position: absolute; top: 10px; left: 10px; font-size: 1.5em;">スコア: 0</div>
    <div id="timer" style="position: absolute; top: 10px; right: 10px; font-size: 1.5em;">タイマー: 30秒</div>

    <script>
        let score = 0;
        let timer = 30;
        let interval;

        function handleClick(element) {
            if (element.style.backgroundColor === "black") {
                element.style.backgroundColor = "white";
                element.innerText = '';
                score++;
                document.getElementById('score').innerText = `スコア: ${score}`;

                let whiteCircles = Array.from(document.querySelectorAll('div[style*="background-color: white"]'));
                let newBlackCircle = whiteCircles[Math.floor(Math.random() * whiteCircles.length)];
                newBlackCircle.style.backgroundColor = "black";
                newBlackCircle.innerHTML = '🔴';

                element.style.animation = "pop 0.5s";
                newBlackCircle.style.animation = "rotate 1s infinite linear";
                createEmojiBurst(element);
            }
        }

        function createEmojiBurst(element) {
            const emojis = ['🎉', '✨', '💥', '🎈', '🍭'];
            emojis.forEach(emoji => {
                let span = document.createElement('span');
                span.innerText = emoji;
                span.style.position = 'absolute';
                span.style.left = `${element.getBoundingClientRect().left + 20}px`;
                span.style.top = `${element.getBoundingClientRect().top + 20}px`;
                span.style.animation = `fade 0.5s`;
                document.body.appendChild(span);
                setTimeout(() => { document.body.removeChild(span); }, 500);
            });
        }

        function startTimer() {
            interval = setInterval(() => {
                timer--;
                document.getElementById('timer').innerText = `タイマー: ${timer}秒`;
                if (timer === 0) {
                    clearInterval(interval);
                    alert(`ゲーム終了！最終スコアは ${score} です！`);
                    document.showToast("再読み込みしてください");
                }
            }, 1000);
        }

        startTimer();
    </script>
</body>
</html>
```