Unify search bar styles across components

pwa/src/components/GameHeader.tsx

@@ -9,6 +9,9 @@ import './Game.css'
 
 import { GameTooltip } from './common/GameTooltip'
 
+// Import the new specific header styles
+import './GameHeader.css'
+
 interface GameHeaderProps {
   className?: string
 }
@@ -61,43 +64,61 @@ export default function GameHeader({ className = '' }: GameHeaderProps) {
   return (
     <header className={`game-header ${className}`}>
       <div className="header-left">
-        <h1>Echoes of the Ash</h1>
+        <div className="header-title-container">
+          <h1>Echoes of the Ash</h1>
+          <span className="header-version">v0.9</span>
+        </div>
       </div>
+
       <nav className="nav-links">
         <button
           onClick={() => navigate('/game')}
           className={`nav-link ${isActive('/game') ? 'active' : ''}`}
         >
-          🎮 {t('common.game')}
+          <span style={{ fontSize: '1.1em' }}>🎮</span> {t('common.game')}
         </button>
         <button
           onClick={() => navigate('/leaderboards')}
           className={`nav-link ${isActive('/leaderboards') ? 'active' : ''}`}
         >
-          🏆 {t('common.leaderboards')}
+          <span style={{ fontSize: '1.1em' }}>🏆</span> {t('common.leaderboards')}
         </button>
       </nav>
+
       <div className="user-info">
-        <LanguageSelector />
         <GameTooltip content={t('game.onlineCount', { count: playerCount })}>
           <div className="player-count-badge">
             <span className="status-dot"></span>
-            <span className="count-text">{t('game.onlineCount', { count: playerCount })}</span>
+            <span className="count-text">{playerCount}</span>
           </div>
         </GameTooltip>
+
+        <LanguageSelector />
+
         <button
           onClick={() => navigate(`/profile/${currentCharacter?.id}`)}
           className={`username-link ${isOnOwnProfile ? 'active' : ''}`}
         >
           {currentCharacter?.name}
         </button>
-        <button
-          onClick={() => navigate('/account')}
-          className="button-secondary"
-        >
-          {t('common.account')}
-        </button>
-        <button onClick={logout} className="button-secondary">{t('auth.logout')}</button>
+
+        <div className="header-sep"></div>
+
+        <GameTooltip content={t('common.account')}>
+          <button
+            onClick={() => navigate('/account')}
+            className="header-icon-btn"
+            aria-label={t('common.account')}
+          >
+            ⚙️
+          </button>
+        </GameTooltip>
+
+        <GameTooltip content={t('auth.logout')}>
+          <button onClick={logout} className="header-icon-btn" aria-label={t('auth.logout')}>
+            🚪
+          </button>
+        </GameTooltip>
       </div>
     </header>
   )