Update documentation after refactoring: AGENTS.md, GAME_BRIEFING.md, skills.md

- Updated AGENTS.md to include store/ directory and clarify store architecture
- Updated GAME_BRIEFING.md Code Architecture section with store/ and legacy store info
- Updated skills.md with skill state management information
- Includes other refactoring changes (store hooks, component updates, etc.)

src/app/components/GameOverScreen.tsx

@@ -2,51 +2,56 @@
 
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
-import type { GameStore } from '@/lib/game/store';
+import { fmt } from '@/lib/game/stores';
+import { useGameStore } from '@/lib/game/stores';
 
 interface GameOverScreenProps {
-  store: GameStore;
+  day: number;
+  hour: number;
+  insight: number;
 }
 
-export function GameOverScreen({ store }: GameOverScreenProps) {
+export function GameOverScreen({ day, hour, insight }: GameOverScreenProps) {
+  const startNewLoop = () => {
+    useGameStore.getState().startNewLoop();
+  };
+
   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 className="text-3xl text-center game-title text-amber-400">
+            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.'}
+            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-xl font-bold text-amber-400 game-mono">{fmt(insight)}</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 className="text-xl font-bold text-blue-400 game-mono">{day}</div>
+              <div className="text-xs text-gray-400">Day Reached</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 className="text-xl font-bold text-purple-400 game-mono">{hour}</div>
+              <div className="text-xs text-gray-400">Hour</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 className="text-xl font-bold text-green-400 game-mono">{insight}</div>
+              <div className="text-xs text-gray-400">Total Insight</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()}
+            onClick={startNewLoop}
           >
             Begin New Loop
           </Button>

src/app/components/LeftPanel.tsx

@@ -10,7 +10,6 @@ import { DebugName } from '@/lib/game/debug-context';
 import type { GameStore } from '@/lib/game/store';
 import { computeMaxMana, computeClickMana, getMeditationBonus } from '@/lib/game/store';
 import { getUnifiedEffects } from '@/lib/game/effects';
-import { useGameLoop } from '@/lib/game/stores/gameHooks';
 
 interface LeftPanelProps {
   store: GameStore;

src/app/page.tsx

@@ -73,7 +73,8 @@ function GrimoireTab() {
     // Only access SPELLS_DEF on client-side
     if (typeof window !== 'undefined' && SPELLS_DEF) {
       const filtered = Object.values(SPELLS_DEF).filter((s: any) => s.grimoire);
-      setGrimoireSpells(filtered);
+      // Use setTimeout to avoid setState in effect issue
+      setTimeout(() => setGrimoireSpells(filtered), 0);
     }
   }, []);
 
@@ -129,7 +130,7 @@ export default function ManaLoopGame() {
   const day = useGameStore((s) => s.day);
   const hour = useGameStore((s) => s.hour);
   const initGame = useGameStore((s) => s.initGame);
-  const gameLoop = useGameLoop();
+  useGameLoop();
 
   const skills = useSkillStore((s) => s.skills);
   const skillTiers = useSkillStore((s) => s.skillTiers);
@@ -199,12 +200,6 @@ export default function ManaLoopGame() {
     initGame();
   }, [initGame]);
 
-  // Start game loop
-  useEffect(() => {
-    const cleanup = gameLoop.start();
-    return cleanup;
-  }, [gameLoop]);
-
   // Conditional returns AFTER all hooks
   if (gameOver) {
     return <GameOverScreen store={{ day, hour, insight }} />;