/* ============================================================
       BOTTOM NAV
       ============================================================ */
    const BottomNav = ({ current, onNav }) => {
      const tabs = [
        { key: 'home', icon: 'home', label: 'War Room' },
        { key: 'miniatures', icon: 'helmet', label: 'Minis' },
        { key: 'warbands', icon: 'flag', label: 'Warbands' },
        { key: 'battle', icon: 'sword', label: 'Battle' },
        { key: 'armory', icon: 'book', label: 'Armory' }
      ];
      return (
        <div className="fixed bottom-0 inset-x-0 z-40 bg-panel/95 backdrop-blur border-t border-line panel-edge no-tap">
          <div className="grid grid-cols-5 max-w-md mx-auto">
            {tabs.map(t => {
              const active = current === t.key;
              return (
                <button
                  key={t.key}
                  onClick={() => onNav(t.key)}
                  className={`flex flex-col items-center gap-0.5 py-2.5 transition-colors ${
                    active ? 'text-goldBright' : 'text-muted hover:text-parchment'
                  }`}
                >
                  <Icon name={t.icon} className="w-5 h-5" />
                  <span className="text-[10px] uppercase tracking-wider font-semibold">{t.label}</span>
                  {active && <div className="absolute top-0 w-8 h-0.5 bg-gold rounded-b" />}
                </button>
              );
            })}
          </div>
        </div>
      );
    };