<!DOCTYPE html>
<html>
<head>
  <style>
    @keyframes rotateHand {
      from { transform: rotate(0deg); }
      to { transform: rotate(360deg); }
    }
    @keyframes pop {
      0% { transform: scale(1); }
      50% { transform: scale(1.3); }
      100% { transform: scale(1); }
    }
    @keyframes sparkle {
      0%, 100% { opacity: 1; }
      50% { opacity: 0.5; }
    }
  </style>
</head>
<body>
  <div id="clock" style="width:400px; height:400px; position:relative; margin:auto; border:5px solid #FFD700; border-radius:50%; background: #FFF8DC; overflow:hidden;">

    <!-- Emojis around the clock face -->
    <div style="position:absolute; top:10%; left:50%; transform:translate(-50%, -50%); font-size:24px; animation: sparkle 2s infinite;">🌟</div>
    <div style="position:absolute; top:25%; left:75%; transform:translate(-50%, -50%); font-size:24px; animation: sparkle 2s infinite 0.2s;">🎈</div>
    <div style="position:absolute; top:50%; left:90%; transform:translate(-50%, -50%); font-size:24px; animation: sparkle 2s infinite 0.4s;">🎉</div>
    <div style="position:absolute; top:75%; left:75%; transform:translate(-50%, -50%); font-size:24px; animation: sparkle 2s infinite 0.6s;">✨</div>
    <div style="position:absolute; top:90%; left:50%; transform:translate(-50%, -50%); font-size:24px; animation: sparkle 2s infinite 0.8s;">🎁</div>
    <div style="position:absolute; top:75%; left:25%; transform:translate(-50%, -50%); font-size:24px; animation: sparkle 2s infinite 1s;">🎂</div>
    <div style="position:absolute; top:50%; left:10%; transform:translate(-50%, -50%); font-size:24px; animation: sparkle 2s infinite 1.2s;">🥳</div>
    <div style="position:absolute; top:25%; left:25%; transform:translate(-50%, -50%); font-size:24px; animation: sparkle 2s infinite 1.4s;">🎊</div>

    <!-- Second hand -->
    <div id="secondHand" style="position:absolute; width:4px; height:40%; background:red; top:50%; left:50%; transform-origin:bottom center; transform:rotate(0deg);">
      <span style="position:absolute; top:-20px; left:-8px; font-size:24px;">🕑</span>
    </div>

    <!-- Center emoji -->
    <div style="position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); font-size:32px; cursor:pointer;">⏰</div>

    <!-- Sparkle emojis -->
    <div style="position:absolute; top:20%; left:40%; transform:translate(-50%, -50%); font-size:20px; animation: sparkle 1.5s infinite;">✨✨</div>
    <div style="position:absolute; top:60%; left:60%; transform:translate(-50%, -50%); font-size:20px; animation: sparkle 1.5s infinite 0.5s;">🌟🎇</div>
  </div>

  <!-- Start button for smartphone -->
  <input type="button" value="🎮 Start" id="startButton" style="display:none; position:absolute; bottom:20px; left:50%; transform:translateX(-50%); padding:10px 20px; font-size:16px; cursor:pointer; border: none; background-color: #FFD700; border-radius:5px; box-shadow: 0 4px #999;">

  <script>
    const secondHand = document.getElementById('secondHand');
    const startButton = document.getElementById('startButton');
    const clock = document.getElementById('clock');
    const centerEmoji = clock.querySelector('div:nth-child(9)');

    // Detect if it's a touch device
    const isTouchDevice = 'ontouchstart' in window || navigator.maxTouchPoints;

    if(isTouchDevice){
      startButton.style.display = 'block';
      // Initial state: second hand not rotated
      secondHand.style.animation = 'none';
      // On click of start button, start the rotation
      startButton.addEventListener('click', () => {
        secondHand.style.animation = 'rotateHand 5s linear forwards, pop 0.5s';
      });
    } else {
      // For PC, start the rotation automatically
      secondHand.style.animation = 'rotateHand 5s linear forwards, pop 0.5s';
    }

    // Add click event to clock for animations
    clock.addEventListener('click', () => {
      // Trigger pop animation on center emoji
      centerEmoji.style.animation = 'pop 0.3s';
      // Remove animation after it completes to allow re-trigger
      centerEmoji.addEventListener('animationend', () => {
        centerEmoji.style.animation = '';
      }, { once: true });

      // Add a sparkle on click
      const sparkle = document.createElement('div');
      sparkle.textContent = '✨';
      sparkle.style.position = 'absolute';
      sparkle.style.top = Math.random() * 100 + '%';
      sparkle.style.left = Math.random() * 100 + '%';
      sparkle.style.fontSize = '20px';
      sparkle.style.animation = 'pop 0.5s forwards';
      clock.appendChild(sparkle);
      sparkle.addEventListener('animationend', () => {
        sparkle.remove();
      });
    });
  </script>
</body>
</html>