```html
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>ノバクエスト</title>
    <style>
        @keyframes pop {
            0% { transform: scale(1); }
            50% { transform: scale(1.3); }
            100% { transform: scale(1); }
        }
        @keyframes blink {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.5; }
        }
        @keyframes shake {
            0% { transform: translate(1px, 1px) rotate(0deg); }
            10% { transform: translate(-1px, -2px) rotate(-1deg); }
            20% { transform: translate(-3px, 0px) rotate(1deg); }
            30% { transform: translate(3px, 2px) rotate(0deg); }
            40% { transform: translate(1px, -1px) rotate(1deg); }
            50% { transform: translate(-1px, 2px) rotate(-1deg); }
            60% { transform: translate(-3px, 1px) rotate(0deg); }
            70% { transform: translate(3px, 1px) rotate(-1deg); }
            80% { transform: translate(-1px, -1px) rotate(1deg); }
            90% { transform: translate(1px, 2px) rotate(0deg); }
            100% { transform: translate(1px, -2px) rotate(-1deg); }
        }
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }
        @keyframes colorChange {
            0% { background-color: white; }
            100% { background-color: black; }
        }
    </style>
</head>
<body style="width: 400px; height: 400px; background-color: red; color: black; font-family: Arial, sans-serif; text-align: center; position: relative;">
    <div style="font-size: 24px; margin-top: 10px;">🌟✨ノバクエスト🎉🎈</div>
    <div id="grid" style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; width: 90%; margin: 20px auto;">
        <div class="circle" style="width: 80px; height: 80px; background-color: white; border-radius: 50%; cursor: pointer; position: relative;">
            🕳️
        </div>
        <div class="circle" style="width: 80px; height: 80px; background-color: white; border-radius: 50%; cursor: pointer; position: relative;">
            🕳️
        </div>
        <div class="circle" style="width: 80px; height: 80px; background-color: white; border-radius: 50%; cursor: pointer; position: relative;">
            🕳️
        </div>
        <div class="circle" style="width: 80px; height: 80px; background-color: white; border-radius: 50%; cursor: pointer; position: relative;">
            🕳️
        </div>
        <div class="circle" style="width: 80px; height: 80px; background-color: white; border-radius: 50%; cursor: pointer; position: relative;">
            🕳️
        </div>
        <div class="circle" style="width: 80px; height: 80px; background-color: white; border-radius: 50%; cursor: pointer; position: relative;">
            🕳️
        </div>
        <div class="circle" style="width: 80px; height: 80px; background-color: white; border-radius: 50%; cursor: pointer; position: relative;">
            🕳️
        </div>
        <div class="circle" style="width: 80px; height: 80px; background-color: white; border-radius: 50%; cursor: pointer; position: relative;">
            🕳️
        </div>
        <div class="circle" style="width: 80px; height: 80px; background-color: white; border-radius: 50%; cursor: pointer; position: relative;">
            🕳️
        </div>
    </div>
    <div style="margin-top: 10px;">
        <button id="startBtn" style="padding: 10px 20px; margin-right: 10px; background-color: white; color: black; border: 2px solid black; border-radius: 5px; cursor: pointer;">🎮スタート</button>
        <button id="resetBtn" style="padding: 10px 20px; background-color: white; color: black; border: 2px solid black; border-radius: 5px; cursor: pointer;">🔄リセット</button>
    </div>
    <div style="margin-top: 10px; font-size: 18px;">
        ⏰<span id="timer">30</span>秒 🏆<span id="score">0</span>点
    </div>
    <div id="emojiOverlay" style="position: absolute; top: 0; left: 0; width: 400px; height: 400px; pointer-events: none;"></div>
    <script>
        const circles = document.querySelectorAll('.circle');
        const startBtn = document.getElementById('startBtn');
        const resetBtn = document.getElementById('resetBtn');
        const timerDisplay = document.getElementById('timer');
        const scoreDisplay = document.getElementById('score');
        const emojiOverlay = document.getElementById('emojiOverlay');
        let activeCircle = null;
        let timer = 30;
        let score = 0;
        let interval = null;

        function getRandomCircle() {
            const index = Math.floor(Math.random() * circles.length);
            return circles[index];
        }

        function activateCircle() {
            if (activeCircle) {
                activeCircle.style.backgroundColor = 'white';
                activeCircle.innerHTML = '🕳️';
            }
            activeCircle = getRandomCircle();
            activeCircle.style.backgroundColor = 'black';
            activeCircle.innerHTML = '🐹';
            activeCircle.classList.add('active');
            activeCircle.style.animation = 'fadeIn 0.5s';
        }

        function startGame() {
            startBtn.disabled = true;
            resetBtn.disabled = false;
            timer = 30;
            score = 0;
            scoreDisplay.textContent = score;
            timerDisplay.textContent = timer;
            activateCircle();
            interval = setInterval(() => {
                timer--;
                timerDisplay.textContent = timer;
                if (timer === 0) {
                    clearInterval(interval);
                    alert('時間切れ！スコア: ' + score + '点');
                    startBtn.disabled = false;
                } else {
                    activateCircle();
                }
            }, 1000);
        }

        function resetGame() {
            clearInterval(interval);
            timer = 30;
            score = 0;
            timerDisplay.textContent = timer;
            scoreDisplay.textContent = score;
            if (activeCircle) {
                activeCircle.style.backgroundColor = 'white';
                activeCircle.innerHTML = '🕳️';
                activeCircle.classList.remove('active');
                activeCircle = null;
            }
            startBtn.disabled = false;
        }

        circles.forEach(circle => {
            circle.addEventListener('click', () => {
                if (circle === activeCircle) {
                    score++;
                    scoreDisplay.textContent = score;
                    circle.style.backgroundColor = 'white';
                    circle.innerHTML = '✨';
                    circle.style.animation = 'pop 0.3s';
                    showEmoji('👍');
                    activateCircle();
                } else {
                    showEmoji('❌');
                }
            });
        });

        function showEmoji(emoji) {
            const span = document.createElement('span');
            span.textContent = emoji;
            span.style.position = 'absolute';
            span.style.left = Math.random() * 350 + 'px';
            span.style.top = Math.random() * 350 + 'px';
            span.style.fontSize = '24px';
            span.style.animation = 'shake 0.5s';
            emojiOverlay.appendChild(span);
            setTimeout(() => {
                emojiOverlay.removeChild(span);
            }, 500);
        }

        startBtn.addEventListener('click', startGame);
        resetBtn.addEventListener('click', resetGame);
        resetBtn.disabled = true;
    </script>
</body>
</html>
```