Refactor large files into modular components

- Refactored page.tsx (613→252 lines) with GameOverScreen and LeftPanel extracted
- Refactored StatsTab.tsx (584→92 lines) with section components
- Refactored SkillsTab.tsx (434→54 lines) with sub-components
- Created modular structure for GameContext, LootInventory, and other components
- All extracted components organized into feature directories

src/app/components/GameOverScreen.tsx

@@ -0,0 +1,57 @@
+'use client';
+
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import type { GameStore } from '@/lib/game/store';
+
+interface GameOverScreenProps {
+  store: GameStore;
+}
+
+export function GameOverScreen({ store }: GameOverScreenProps) {
+  return (
+    <div className="fixed inset-0 game-overlay flex items-center justify-center z-50">
+      <Card className="bg-gray-900 border-gray-600 max-w-md w-full mx-4 shadow-2xl">
+        <CardHeader>
+          <CardTitle className={`text-3xl text-center game-title ${store.victory ? 'text-amber-400' : 'text-red-400'}`}>
+            {store.victory ? 'VICTORY!' : 'LOOP ENDS'}
+          </CardTitle>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <p className="text-center text-gray-400">
+            {store.victory
+              ? 'The Awakened One falls! Your power echoes through eternity.'
+              : 'The time loop resets... but you remember.'}
+          </p>
+
+          <div className="grid grid-cols-2 gap-3">
+            <div className="p-3 bg-gray-800 rounded">
+              <div className="text-xl font-bold text-amber-400 game-mono">{store.fmt(store.loopInsight)}</div>
+              <div className="text-xs text-gray-400">Insight Gained</div>
+            </div>
+            <div className="p-3 bg-gray-800 rounded">
+              <div className="text-xl font-bold text-blue-400 game-mono">{store.maxFloorReached}</div>
+              <div className="text-xs text-gray-400">Best Floor</div>
+            </div>
+            <div className="p-3 bg-gray-800 rounded">
+              <div className="text-xl font-bold text-purple-400 game-mono">{store.signedPacts.length}</div>
+              <div className="text-xs text-gray-400">Pacts Signed</div>
+            </div>
+            <div className="p-3 bg-gray-800 rounded">
+              <div className="text-xl font-bold text-green-400 game-mono">{store.loopCount + 1}</div>
+              <div className="text-xs text-gray-400">Total Loops</div>
+            </div>
+          </div>
+
+          <Button
+            className="w-full bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700"
+            size="lg"
+            onClick={() => store.startNewLoop()}
+          >
+            Begin New Loop
+          </Button>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

src/app/components/LeftPanel.tsx

@@ -0,0 +1,107 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { Button } from '@/components/ui/button';
+import { Mountain } from 'lucide-react';
+import { ManaDisplay } from '@/components/game';
+import { ActionButtons } from '@/components/game';
+import { CalendarDisplay } from '@/components/game';
+import { DebugName } from '@/lib/game/debug-context';
+import type { GameStore } from '@/lib/game/store';
+import { computeMaxMana, computeClickMana, getMeditationBonus, getUnifiedEffects } from '@/lib/game/store';
+import { useGameLoop } from '@/lib/game/stores/gameHooks';
+
+interface LeftPanelProps {
+  store: GameStore;
+  effectiveRegen: number;
+  incursionStrength: number;
+}
+
+export function LeftPanel({ store, effectiveRegen, incursionStrength }: LeftPanelProps) {
+  const [isGathering, setIsGathering] = useState(false);
+
+  const handleGatherStart = () => {
+    setIsGathering(true);
+    store.gatherMana();
+  };
+
+  const handleGatherEnd = () => {
+    setIsGathering(false);
+  };
+
+  useEffect(() => {
+    if (!isGathering) return;
+
+    let lastGatherTime = 0;
+    const minGatherInterval = 100;
+    let animationFrameId: number;
+
+    const gatherLoop = (timestamp: number) => {
+      if (timestamp - lastGatherTime >= minGatherInterval) {
+        store.gatherMana();
+        lastGatherTime = timestamp;
+      }
+      animationFrameId = requestAnimationFrame(gatherLoop);
+    };
+
+    animationFrameId = requestAnimationFrame(gatherLoop);
+    return () => cancelAnimationFrame(animationFrameId);
+  }, [isGathering, store]);
+
+  const maxMana = computeMaxMana(store, getUnifiedEffects(store));
+  const clickMana = computeClickMana(store);
+  const meditationMultiplier = getMeditationBonus(store.meditateTicks, store.skills, getUnifiedEffects(store).meditationEfficiency);
+
+  return (
+    <div className="md:w-80 space-y-4 flex-shrink-0">
+      <DebugName name="ManaDisplay">
+        <ManaDisplay
+          rawMana={store.rawMana}
+          maxMana={maxMana}
+          effectiveRegen={effectiveRegen}
+          meditationMultiplier={meditationMultiplier}
+          clickMana={clickMana}
+          isGathering={isGathering}
+          onGatherStart={handleGatherStart}
+          onGatherEnd={handleGatherEnd}
+          elements={store.elements}
+        />
+      </DebugName>
+
+      {!store.spireMode && (
+        <DebugName name="ClimbSpireButton">
+          <Button
+            className="w-full bg-gradient-to-r from-amber-600 to-orange-600 hover:from-amber-700 hover:to-orange-700"
+            size="lg"
+            onClick={() => store.enterSpireMode()}
+          >
+            <Mountain className="w-5 h-5 mr-2" />
+            Climb the Spire
+          </Button>
+        </DebugName>
+      )}
+
+      {!store.spireMode && (
+        <DebugName name="ActionButtons">
+          <ActionButtons
+            currentAction={store.currentAction}
+            currentStudyTarget={store.currentStudyTarget}
+            designProgress={store.designProgress}
+            designProgress2={store.designProgress2}
+            preparationProgress={store.preparationProgress}
+            applicationProgress={store.applicationProgress}
+            equipmentCraftingProgress={store.equipmentCraftingProgress}
+          />
+        </DebugName>
+      )}
+
+      <DebugName name="CalendarDisplay">
+        <CalendarDisplay
+          day={store.day}
+          hour={store.hour}
+          incursionStrength={incursionStrength}
+        />
+      </DebugName>
+    </div>
+  );
+}