```html
<!DOCTYPE html>
<html>
<head>
  <style>
    @keyframes pop {
      0% { transform: scale(1); }
      50% { transform: scale(1.3); }
      100% { transform: scale(1); }
    }
    @keyframes wiggle {
      0% { transform: rotate(0deg); }
      25% { transform: rotate(5deg); }
      50% { transform: rotate(0deg); }
      75% { transform: rotate(-5deg); }
      100% { transform: rotate(0deg); }
    }
    .pop-animation {
      animation: pop 0.3s forwards;
    }
    .wiggle-animation {
      animation: wiggle 0.5s forwards;
    }
  </style>
</head>
<body>
  <div style="width: 400px; height: 400px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; background-color: #f0f8ff; position: relative;">
    <div style="display: grid; grid-template-columns: repeat(3, 80px); grid-gap: 10px; margin-bottom: 20px;">
      <div class="circle" data-index="0" style="width: 80px; height: 80px; border-radius: 50%; background-color: white; display: flex; align-items: center; justify-content: center; font-size: 24px; cursor: pointer; user-select: none;">🙂</div>
      <div class="circle" data-index="1" style="width: 80px; height: 80px; border-radius: 50%; background-color: white; display: flex; align-items: center; justify-content: center; font-size: 24px; cursor: pointer; user-select: none;">😎</div>
      <div class="circle" data-index="2" style="width: 80px; height: 80px; border-radius: 50%; background-color: white; display: flex; align-items: center; justify-content: center; font-size: 24px; cursor: pointer; user-select: none;">🤩</div>
      <div class="circle" data-index="3" style="width: 80px; height: 80px; border-radius: 50%; background-color: white; display: flex; align-items: center; justify-content: center; font-size: 24px; cursor: pointer; user-select: none;">🥳</div>
      <div class="circle" data-index="4" style="width: 80px; height: 80px; border-radius: 50%; background-color: white; display: flex; align-items: center; justify-content: center; font-size: 24px; cursor: pointer; user-select: none;">😇</div>
      <div class="circle" data-index="5" style="width: 80px; height: 80px; border-radius: 50%; background-color: white; display: flex; align-items: center; justify-content: center; font-size: 24px; cursor: pointer; user-select: none;">🙃</div>
      <div class="circle" data-index="6" style="width: 80px; height: 80px; border-radius: 50%; background-color: white; display: flex; align-items: center; justify-content: center; font-size: 24px; cursor: pointer; user-select: none;">😜</div>
      <div class="circle" data-index="7" style="width: 80px; height: 80px; border-radius: 50%; background-color: white; display: flex; align-items: center; justify-content: center; font-size: 24px; cursor: pointer; user-select: none;">🤪</div>
      <div class="circle" data-index="8" style="width: 80px; height: 80px; border-radius: 50%; background-color: white; display: flex; align-items: center; justify-content: center; font-size: 24px; cursor: pointer; user-select: none;">🤑</div>
    </div>
    <div style="display: flex; gap: 20px;">
      <button id="startBtn" style="padding: 10px 20px; font-size: 16px; cursor: pointer; border: none; border-radius: 5px; background-color: #4CAF50; color: white;">🚀 Start</button>
      <button id="resetBtn" style="padding: 10px 20px; font-size: 16px; cursor: pointer; border: none; border-radius: 5px; background-color: #f44336; color: white;">🔄 Reset</button>
    </div>
    <div id="score" style="position: absolute; top: 10px; right: 10px; font-size: 18px;">Score: 0</div>
  </div>
  <script>
    const circles = document.querySelectorAll('.circle');
    const startBtn = document.getElementById('startBtn');
    const resetBtn = document.getElementById('resetBtn');
    const scoreDisplay = document.getElementById('score');
    let activeIndex = -1;
    let score = 0;
    let gameInterval;
    let countdown;
    let timeLeft = 30;
    let gameActive = false;

    function startGame() {
      if (gameActive) return;
      gameActive = true;
      score = 0;
      timeLeft = 30;
      scoreDisplay.textContent = `Score: ${score}`;
      activateRandomCircle();
      gameInterval = setInterval(activateRandomCircle, 1000);
      countdown = setInterval(() => {
        timeLeft--;
        if (timeLeft <= 0) {
          endGame();
        }
      }, 1000);
    }

    function endGame() {
      clearInterval(gameInterval);
      clearInterval(countdown);
      gameActive = false;
      deactivateCurrentCircle();
      alert(`Game Over! Your score: ${score}`);
    }

    function resetGame() {
      clearInterval(gameInterval);
      clearInterval(countdown);
      gameActive = false;
      score = 0;
      timeLeft = 30;
      scoreDisplay.textContent = `Score: ${score}`;
      deactivateCurrentCircle();
    }

    function activateRandomCircle() {
      deactivateCurrentCircle();
      const randomIndex = Math.floor(Math.random() * circles.length);
      activeIndex = randomIndex;
      circles[randomIndex].style.backgroundColor = 'black';
      circles[randomIndex].classList.add('pop-animation');
      setTimeout(() => {
        circles[randomIndex].classList.remove('pop-animation');
      }, 300);
    }

    function deactivateCurrentCircle() {
      if (activeIndex !== -1) {
        circles[activeIndex].style.backgroundColor = 'white';
        activeIndex = -1;
      }
    }

    circles.forEach(circle => {
      circle.addEventListener('click', () => {
        if (!gameActive || parseInt(timeLeft) <= 0) return;
        if (parseInt(timeLeft) <= 0) return;
        if (parseInt(timeLeft) <= 0) return;
        if (circle.dataset.index == activeIndex) {
          score++;
          scoreDisplay.textContent = `Score: ${score}`;
          circle.classList.add('wiggle-animation');
          setTimeout(() => {
            circle.classList.remove('wiggle-animation');
          }, 500);
          activateRandomCircle();
        }
      });
    });

    startBtn.addEventListener('click', startGame);
    resetBtn.addEventListener('click', resetGame);

    // Keyboard controls
    document.addEventListener('keydown', (e) => {
      if (!gameActive || parseInt(timeLeft) <= 0) return;
      const key = e.key;
      const index = parseInt(key) - 1;
      if (index >= 0 && index < circles.length) {
        const circle = circles[index];
        if (circle.dataset.index == activeIndex) {
          score++;
          scoreDisplay.textContent = `Score: ${score}`;
          circle.classList.add('wiggle-animation');
          setTimeout(() => {
            circle.classList.remove('wiggle-animation');
          }, 500);
          activateRandomCircle();
        }
      }
    });
  </script>
</body>
</html>
```