fix: resolve runtime issues with game loop, tabs, and error handling

- Fix game loop store mismatch (page.tsx now uses modular stores matching gameHooks.ts)
- Fix StatsTab.tsx type errors (signedPacts now from usePrestigeStore)
- Fix React hooks violations (all hooks called before conditional returns)
- Add ErrorBoundary to page.tsx for better error handling
- Fix getStudySpeedMultiplier called with correct arguments
- Build succeeds consistently

src/app/page.tsx

@@ -107,70 +107,60 @@ function GrimoireTab() {
 // ============================================================================
 
 export default function ManaLoopGame() {
-  // Disable prerendering - this is a client-only game
-  if (typeof window === 'undefined') {
-    return <div>Loading...</div>;
-  }
-  
   const [selectedManaType, setSelectedManaType] = useState<string>('');
   const [activeTab, setActiveTab] = useState('spire');
 
-  // Game stores - using new modular stores
+  // ALL hooks must be called before any conditional returns
   const day = useGameStore((s) => s.day);
   const hour = useGameStore((s) => s.hour);
   const initGame = useGameStore((s) => s.initGame);
-  
   const gameLoop = useGameLoop();
 
-  // Get state from modular stores for computed values
   const skills = useSkillStore((s) => s.skills);
   const skillTiers = useSkillStore((s) => s.skillTiers);
   const skillUpgrades = useSkillStore((s) => s.skillUpgrades);
+
   const prestigeUpgrades = usePrestigeStore((s) => s.prestigeUpgrades);
-  const meditateTicks = useManaStore((s) => s.meditateTicks);
+  const insight = usePrestigeStore((s) => s.insight);
+
   const rawMana = useManaStore((s) => s.rawMana);
-  const totalManaGathered = useManaStore((s) => s.totalManaGathered);
-  const elements = useManaStore((s) => s.elements);
+  const meditateTicks = useManaStore((s) => s.meditateTicks);
 
   const maxFloorReached = useCombatStore((s) => s.maxFloorReached);
-  const signedPacts = useCombatStore((s) => s.signedPacts);
   const spells = useCombatStore((s) => s.spells);
 
-  const loopCount = usePrestigeStore((s) => s.loopCount);
-  const insight = usePrestigeStore((s) => s.insight);
-  const totalInsight = usePrestigeStore((s) => s.totalInsight);
-  const memorySlots = usePrestigeStore((s) => s.memorySlots);
+  const gameOver = useUIStore((s) => s.gameOver);
 
   // Computed effects from upgrades and equipment
-  const upgradeEffects = getUnifiedEffects({ 
-    skillUpgrades, 
-    skillTiers, 
-    equippedInstances: {}, 
-    equipmentInstances: {} 
+  const upgradeEffects = getUnifiedEffects({
+    skillUpgrades,
+    skillTiers,
+    equippedInstances: {},
+    equipmentInstances: {}
   });
 
   // Derived stats
-  const maxMana = computeMaxMana({ 
-    skills, 
-    prestigeUpgrades, 
-    skillUpgrades, 
-    skillTiers 
+  const maxMana = computeMaxMana({
+    skills,
+    prestigeUpgrades,
+    skillUpgrades,
+    skillTiers
   }, upgradeEffects);
-  
-  const baseRegen = computeRegen({ 
-    skills, 
-    prestigeUpgrades, 
-    skillUpgrades, 
-    skillTiers 
+
+  const baseRegen = computeRegen({
+    skills,
+    prestigeUpgrades,
+    skillUpgrades,
+    skillTiers
   }, upgradeEffects);
-  
-  const clickMana = computeClickMana({ 
-    skills, 
-    prestigeUpgrades, 
-    skillUpgrades, 
-    skillTiers 
+
+  const clickMana = computeClickMana({
+    skills,
+    prestigeUpgrades,
+    skillUpgrades,
+    skillTiers
   });
-    
+
   const meditationMultiplier = getMeditationBonus(meditateTicks, skills, upgradeEffects.meditationEfficiency);
   const incursionStrength = getIncursionStrength(day, hour);
 
@@ -190,25 +180,26 @@ export default function ManaLoopGame() {
   // Effective regen
   const effectiveRegen = (effectiveRegenWithSpecials + manaCascadeBonus + manaWaterfallBonus) * meditationMultiplier;
 
-  // Game Over check from UI store
-  const gameOver = useUIStore((s) => s.gameOver);
-  
   // Initialize game on mount
   useEffect(() => {
     initGame();
   }, [initGame]);
 
-  // Game Over Screen
-  if (gameOver) {
-    return <GameOverScreen store={{ day, hour, insight }} />;
-  }
-
   // Start game loop
   useEffect(() => {
     const cleanup = gameLoop.start();
     return cleanup;
   }, [gameLoop]);
 
+  // Conditional returns AFTER all hooks
+  if (typeof window === 'undefined') {
+    return <div>Loading...</div>;
+  }
+
+  if (gameOver) {
+    return <GameOverScreen store={{ day, hour, insight }} />;
+  }
+
   return (
     <ErrorBoundary>
       <TooltipProvider>
@@ -225,10 +216,10 @@ export default function ManaLoopGame() {
 
           {/* Main Content */}
           <main className="flex-1 flex flex-col md:flex-row gap-4 p-4">
-            <LeftPanel 
-              store={{ rawMana, maxMana, day, hour }} 
-              effectiveRegen={effectiveRegen} 
-              incursionStrength={incursionStrength} 
+            <LeftPanel
+              store={{ rawMana, maxMana, day, hour }}
+              effectiveRegen={effectiveRegen}
+              incursionStrength={incursionStrength}
             />
 
             <div className="flex-1 min-w-0">
@@ -257,13 +248,13 @@ export default function ManaLoopGame() {
 
                 <TabsContent value="attunements">
                   <Suspense fallback={<TabLoadingFallback />}>
-                    <AttunementsTab store={{}} />
+                    <AttunementsTab />
                   </Suspense>
                 </TabsContent>
 
                 <TabsContent value="golemancy">
                   <Suspense fallback={<TabLoadingFallback />}>
-                    <GolemancyTab store={{}} />
+                    <GolemancyTab />
                   </Suspense>
                 </TabsContent>
 
@@ -287,25 +278,25 @@ export default function ManaLoopGame() {
 
                 <TabsContent value="crafting">
                   <Suspense fallback={<TabLoadingFallback />}>
-                    <CraftingTab store={{}} />
+                    <CraftingTab />
                   </Suspense>
                 </TabsContent>
 
                 <TabsContent value="loot">
                   <Suspense fallback={<TabLoadingFallback />}>
-                    <LootTab store={{}} />
+                    <LootTab />
                   </Suspense>
                 </TabsContent>
 
                 <TabsContent value="achievements">
                   <Suspense fallback={<TabLoadingFallback />}>
-                    <AchievementsTab store={{}} />
+                    <AchievementsTab />
                   </Suspense>
                 </TabsContent>
 
                 <TabsContent value="lab">
                   <Suspense fallback={<TabLoadingFallback />}>
-                    <LabTab store={{}} />
+                    <LabTab />
                   </Suspense>
                 </TabsContent>