components/Header.js

export default function Header() {
  return (
    <header className="border-b-4 border-black bg-comic-yellow py-4 px-4 shadow-comic-sm sticky top-0 z-50">
      <div className="max-w-6xl mx-auto flex items-center justify-between">
        <div className="flex items-center gap-3">
          <div className="w-12 h-12 bg-white border-4 border-black rounded-full flex items-center justify-center text-3xl shadow-comic-sm animate-pop">
            ♟️
          </div>
          <div>
            <h1 className="text-3xl sm:text-4xl font-black font-['Bangers'] tracking-tight text-black leading-none">
              COMIC CHESS
            </h1>
            <p className="text-xs font-bold uppercase tracking-widest mt-1">Arena of Kings</p>
          </div>
        </div>
        
        <div className="hidden sm:block">
          <div className="bg-white border-4 border-black px-4 py-1 transform rotate-2 shadow-comic-sm">
            <span className="font-['Bangers'] text-xl">SEASON 1</span>
          </div>
        </div>
      </div>
    </header>
  );
}