Neon_Glow_Gaming_Breadcrumb

<nav class="bg-black text-white py-4 px-6 sm:px-8 lg:px-12 dark:bg-gray-950" aria-label="Breadcrumb">
  <ol class="flex flex-wrap items-center space-x-2 sm:space-x-4 text-sm sm:text-base font-semibold">
    <li class="flex items-center group">
      <a href="#" class="text-gray-400 hover:text-cyan-400 transition-all duration-300 relative group-hover:drop-shadow-[0_0_8px_rgba(0,255,255,0.7)]">
        <svg class="w-4 h-4 sm:w-5 sm:h-5 inline-block mr-1 group-hover:animate-pulse" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-9v10a1 1 0 001 1h3M14 4v7h-6V4m6 0H9m7 0-.55-.55z"></path></svg>
        Home
      </a>
      <svg class="flex-shrink-0 w-4 h-4 sm:w-5 sm:h-5 text-gray-600 dark:text-gray-700 ml-2 sm:ml-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
    </li>

    <li class="flex items-center group">
      <a href="#" class="text-gray-400 hover:text-cyan-400 transition-all duration-300 relative group-hover:drop-shadow-[0_0_8px_rgba(0,255,255,0.7)]">
        <svg class="w-4 h-4 sm:w-5 sm:h-5 inline-block mr-1 group-hover:animate-bounce" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 4h2a2 2 0 012 2v12a2 2 0 01-2 2H6a2 2 0 01-2-2V6a2 2 0 012-2h2m4-2v4m0-4h.01M16 4h-4m-4 0H8m0 0v4m0-4h.01L14 10l-2 2h-4l-2 2h-4v4h16V6"></path></svg>
        Games
      </a>
      <svg class="flex-shrink-0 w-4 h-4 sm:w-5 sm:h-5 text-gray-600 dark:text-gray-700 ml-2 sm:ml-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
    </li>

    <li class="flex items-center group">
      <a href="#" class="text-gray-400 hover:text-cyan-400 transition-all duration-300 relative group-hover:drop-shadow-[0_0_8px_rgba(0,255,255,0.7)]">
        <svg class="w-4 h-4 sm:w-5 sm:h-5 inline-block mr-1 group-hover:animate-spin-slow" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path></svg>
        Genre: Action
      </a>
      <svg class="flex-shrink-0 w-4 h-4 sm:w-5 sm:h-5 text-gray-600 dark:text-gray-700 ml-2 sm:ml-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
    </li>

    <li class="flex items-center">
      <span class="text-cyan-400 drop-shadow-[0_0_8px_rgba(0,255,255,0.7)] relative transition-all duration-300">
        <svg class="w-4 h-4 sm:w-5 sm:h-5 inline-block mr-1 animate-pulse" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.01 12.01 0 002.92 14.93L12 21.05l9.08-6.12A12.01 12.01 0 0021.08 6.982z"></path></svg>
        Cyberpunk 2077
      </span>
    </li>
  </ol>
</nav>
<style>
  @keyframes spin-slow {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
  }
  .animate-spin-slow {
    animation: spin-slow 5s linear infinite;
  }
  @keyframes pulse {
    0%, 100% { opacity: 1; text-shadow: 0 0 5px rgba(0,255,255,0.5); }
    50% { opacity: 0.7; text-shadow: 0 0 15px rgba(0,255,255,1); }
  }
  .animate-pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  }
  @keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
  }
  .group-hover\:animate-bounce:hover {
    animation: bounce 0.6s infinite;
  }

  /* Dark mode specific glows */
  .dark .group-hover\:drop-shadow-\[0_0_8px_rgba\(0\,255\,255\,0\.7\)\]:hover {
    filter: drop-shadow(0 0 10px rgba(0,255,255,0.9));
  }
  .dark .text-cyan-400.drop-shadow-\[0_0_8px_rgba\(0\,255\,255\,0\.7\)\] {
    filter: drop-shadow(0 0 10px rgba(0,255,255,0.9));
  }
</style>