fix: split SpireTab.tsx to 395 lines, remove require() imports, import from data modules; complete store migration

src/components/game/tabs/AchievementsTab.tsx

@@ -1,26 +1,28 @@
 'use client';
 
-import type { GameStore } from '@/lib/game/store';
 import { AchievementsDisplay } from '@/components/game/AchievementsDisplay';
+import { useGameStore } from '@/lib/game/stores';
 
-export interface AchievementsTabProps {
-  store: GameStore;
-}
+export function AchievementsTab() {
+  const achievements = useGameStore((s) => s.achievements);
+  const maxFloorReached = useGameStore((s) => s.maxFloorReached);
+  const totalManaGathered = useGameStore((s) => s.totalManaGathered);
+  const signedPacts = useGameStore((s) => s.signedPacts);
+  const totalSpellsCast = useGameStore((s) => s.totalSpellsCast);
+  const totalDamageDealt = useGameStore((s) => s.totalDamageDealt);
+  const totalCraftsCompleted = useGameStore((s) => s.totalCraftsCompleted);
 
-export function AchievementsTab({ store }: AchievementsTabProps) {
-  const achievements = store.achievements;
-  
   return (
     <div className="space-y-4">
       <AchievementsDisplay
         achievements={achievements}
         gameState={{
-          maxFloorReached: store.maxFloorReached,
-          totalManaGathered: store.totalManaGathered,
-          signedPacts: store.signedPacts,
-          totalSpellsCast: store.totalSpellsCast,
-          totalDamageDealt: store.totalDamageDealt,
-          totalCraftsCompleted: store.totalCraftsCompleted,
+          maxFloorReached,
+          totalManaGathered,
+          signedPacts,
+          totalSpellsCast,
+          totalDamageDealt,
+          totalCraftsCompleted,
         }}
       />
     </div>