レトロゲームのリアクションボタン

<div class="p-4 sm:p-6 lg:p-8 bg-gradient-to-br from-amber-200 to-amber-500 dark:from-gray-800 dark:to-gray-950 min-h-screen flex items-center justify-center font-['Press_Start_2P',_cursive] tracking-wide">
  <div class="w-full max-w-sm sm:max-w-md md:max-w-lg lg:max-w-xl xl:max-w-2xl bg-gradient-to-br from-red-800 to-red-900 border-4 border-solid border-red-950 dark:from-gray-700 dark:to-gray-900 dark:border-gray-950 rounded-lg p-3 sm:p-4 md:p-6 shadow-2xl transform rotate-0 hover:rotate-1 transition-all duration-300 ease-in-out relative overflow-hidden">
    <!-- Scanline Overlay for Retro Effect -->
    <div class="absolute inset-0 z-10 pointer-events-none opacity-20 dark:opacity-10">
      <div class="w-full h-full bg-repeat-y bg-[length:100%_4px] bg-[url('data:image/svg+xml;base264,PHN2ZyB2aWQ9J0xheWVyXzEnIGRhdGEtbmFtZT0nTGF5ZXIgMScgeG1sbnM9J2h0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnJyB2aWV3Qm94PScwIDAgNCA0Jz48ZGVmcz48c3R5bGU+LmNscy0xLHtmaWxsOm5vbmU7c3Ryb2tlOiNGRkY7c3Ryb2tlLXdpZHRoOjEuNjFweDtvcGFjaXR5OjAuNTA7fS5jbHMtMntmaWxsOiNGRkY7fTwvc3R5bGU+PC9kZWZzPjxyZWN0IGNsYXNzPSJjbHMtMSIgeD0iMC42NyIgYz0iMC42NyIgd2lkdGhcdX0iMy44OCIgaGVpZ2h0PSIyLjY2Ii8-PHJlY3QgY2xhc3M9ImNscy0yIiB5PSIyLjI4IiB3aWR0aD0iNC4xIiBoZWlnaHQ9IjEuMDUiLz48L3N2Zz4=')] bg-white"></div>
    </div>

    <div class="relative z-20">
      <div class="text-center mb-4 md:mb-6">
        <h2 class="text-xl sm:text-2xl md:text-3xl lg:text-4xl text-amber-300 dark:text-orange-400 mb-2 drop-shadow-[0_0_8px_rgba(255,200,0,0.8)] dark:drop-shadow-[0_0_8px_rgba(255,165,0,0.8)]">GAME OVER? NAY!</h2>
        <p class="text-sm sm:text-base text-amber-100 dark:text-gray-300">Rate this 'EPIC' moment!</p>
      </div>

      <div class="grid grid-cols-2 sm:grid-cols-3 gap-3 md:gap-4 lg:gap-5">
        <!-- Like Button -->
        <button class="flex flex-col items-center justify-center p-2 sm:p-3 bg-[#9b3a0f] dark:bg-red-800 rounded-md border-b-4 border-r-2 border-[#6f290b] dark:border-red-950 text-amber-200 dark:text-amber-100 font-bold uppercase text-xs sm:text-sm md:text-base shadow-xl transform active:translate-y-1 active:border-b-0 transition-all duration-150 ease-in-out group">
          <span class="block text-3xl sm:text-4xl mb-1 group-hover:animate-bounce-y drop-shadow-[0_0_6px_rgba(255,255,0,0.5)]">👍</span>
          <span class="block">Like</span>
          <span class="text-xs sm:text-sm mt-1 text-amber-50">1.2K</span>
        </button>

        <!-- Epic Button -->
        <button class="flex flex-col items-center justify-center p-2 sm:p-3 bg-[#9b3a0f] dark:bg-red-800 rounded-md border-b-4 border-r-2 border-[#6f290b] dark:border-red-950 text-amber-200 dark:text-amber-100 font-bold uppercase text-xs sm:text-sm md:text-base shadow-xl transform active:translate-y-1 active:border-b-0 transition-all duration-150 ease-in-out group">
          <span class="block text-3xl sm:text-4xl mb-1 group-hover:rotate-12 group-hover:scale-110 drop-shadow-[0_0_6px_rgba(255,255,0,0.5)]">🔥</span>
          <span class="block">Epic</span>
          <span class="text-xs sm:text-sm mt-1 text-amber-50">789</span>
        </button>

        <!-- LOL Button -->
        <button class="flex flex-col items-center justify-center p-2 sm:p-3 bg-[#9b3a0f] dark:bg-red-800 rounded-md border-b-4 border-r-2 border-[#6f290b] dark:border-red-950 text-amber-200 dark:text-amber-100 font-bold uppercase text-xs sm:text-sm md:text-base shadow-xl transform active:translate-y-1 active:border-b-0 transition-all duration-150 ease-in-out group">
          <span class="block text-3xl sm:text-4xl mb-1 group-hover:animate-spin-slow drop-shadow-[0_0_6px_rgba(255,255,0,0.5)]">😂</span>
          <span class="block">LOL</span>
          <span class="text-xs sm:text-sm mt-1 text-amber-50">543</span>
        </button>

        <!-- Sad Button -->
        <button class="flex flex-col items-center justify-center p-2 sm:p-3 bg-[#9b3a0f] dark:bg-red-800 rounded-md border-b-4 border-r-2 border-[#6f290b] dark:border-red-950 text-amber-200 dark:text-amber-100 font-bold uppercase text-xs sm:text-sm md:text-base shadow-xl transform active:translate-y-1 active:border-b-0 transition-all duration-150 ease-in-out group">
          <span class="block text-3xl sm:text-4xl mb-1 group-hover:animate-shake drop-shadow-[0_0_6px_rgba(255,255,0,0.5)]">😭</span>
          <span class="block">oof</span>
          <span class="text-xs sm:text-sm mt-1 text-amber-50">210</span>
        </button>

        <!-- Mind Blown Button -->
        <button class="flex flex-col items-center justify-center p-2 sm:p-3 bg-[#9b3a0f] dark:bg-red-800 rounded-md border-b-4 border-r-2 border-[#6f290b] dark:border-red-950 text-amber-200 dark:text-amber-100 font-bold uppercase text-xs sm:text-sm md:text-base shadow-xl transform active:translate-y-1 active:border-b-0 transition-all duration-150 ease-in-out group">
          <span class="block text-3xl sm:text-4xl mb-1 group-hover:scale-125 drop-shadow-[0_0_6px_rgba(255,255,0,0.5)]">🤯</span>
          <span class="block">WTF!</span>
          <span class="text-xs sm:text-sm mt-1 text-amber-50">99</span>
        </button>

        <!-- GG Button -->
        <button class="flex flex-col items-center justify-center p-2 sm:p-3 bg-[#9b3a0f] dark:bg-red-800 rounded-md border-b-4 border-r-2 border-[#6f290b] dark:border-red-950 text-amber-200 dark:text-amber-100 font-bold uppercase text-xs sm:text-sm md:text-base shadow-xl transform active:translate-y-1 active:border-b-0 transition-all duration-150 ease-in-out group">
          <span class="block text-3xl sm:text-4xl mb-1 group-hover:scale-110 drop-shadow-[0_0_6px_rgba(255,255,0,0.5)]">🏆</span>
          <span class="block">GG</span>
          <span class="text-xs sm:text-sm mt-1 text-amber-50">350</span>
        </button>
      </div>

      <div class="mt-6 md:mt-8 p-3 bg-red-900 border-2 border-red-950 dark:bg-gray-800 dark:border-gray-900 rounded-md shadow-inner text-amber-100 dark:text-gray-300">
        <p class="text-center text-sm md:text-base">Your reactions power up the leaderboard!</p>
      </div>
    </div>
  </div>

  <!-- Custom Animation Styles (would be in a <style> tag or CSS file) -->
  <style>
    @keyframes bounce-y {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-0.15em); }
    }
    .group-hover\:animate-bounce-y:hover {
      animation: bounce-y 0.6s ease-in-out infinite;
    }

    @keyframes spin-slow {
      from { transform: rotate(0deg); }
      to { transform: rotate(360deg); }
    }
    .group-hover\:animate-spin-slow:hover {
      animation: spin-slow 2s linear infinite;
    }

    @keyframes shake {
      0%, 100% { transform: translateX(0); }
      10%, 30%, 50%, 70%, 90% { transform: translateX(-0.1em); }
      20%, 40%, 60%, 80% { transform: translateX(0.1em); }
    }
    .group-hover\:animate-shake:hover {
      animation: shake 0.5s cubic-bezier(.36,.07,.19,.97) both;
    }

    /* To use 'Press Start 2P' font, link it from Google Fonts: */
    /* @import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap'); */
    /* Then apply: font-family: 'Press Start 2P', cursive; */
  </style>
</div>