components/game-header.js

class GameHeader extends HTMLElement {
  connectedCallback() {
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        header {
          background: linear-gradient(90deg, rgba(76, 29, 149, 0.8) 0%, rgba(49, 46, 129, 0.8) 100%);
          backdrop-filter: blur(10px);
          border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        .logo {
          background: linear-gradient(45deg, #8B5CF6, #6366F1);
          -webkit-background-clip: text;
          background-clip: text;
          color: transparent;
        }
        
        .nav-link {
          transition: all 0.3s ease;
        }
        
        .nav-link:hover {
          color: #A78BFA;
          transform: translateY(-2px);
        }
      </style>
      <header class="w-full py-4 px-6 shadow-lg">
        <div class="container mx-auto flex justify-between items-center">
          <div class="flex items-center space-x-2">
            <i data-feather="target" class="text-purple-400"></i>
            <h1 class="text-2xl font-bold logo">Ring Runner Odyssey</h1>
          </div>
          <nav class="hidden md:flex space-x-6">
            <a href="#" class="nav-link text-white font-medium">Home</a>
            <a href="#" class="nav-link text-gray-300 font-medium">How to Play</a>
            <a href="#" class="nav-link text-gray-300 font-medium">Leaderboard</a>
          </nav>
          <button class="md:hidden text-white">
            <i data-feather="menu"></i>
          </button>
        </div>
      </header>
    `;
  }
}

customElements.define('game-header', GameHeader);