fix: update StatsTab, DebugTab and all child components to use modular stores

- Updated StatsTab to use hooks directly (useSkillStore, usePrestigeStore, etc.)
- Updated DebugTab to use hooks directly
- Updated all debug child components (GameStateDebug, SkillDebug, AttunementDebug, etc.)
- Updated all stats child components (ManaStatsSection, CombatStatsSection, etc.)
- Fixed UpgradeEffectsSection.tsx syntax errors
- Updated page.tsx to not pass store prop to StatsTab and DebugTab
- All components now use modular stores directly instead of receiving store prop

src/components/game/debug/AttunementDebug.tsx

@@ -2,28 +2,25 @@
 
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
-import { ATTUNEMENTS_DEF } from '@/lib/game/data/attunements';
 import { Sparkles, Unlock } from 'lucide-react';
-import type { GameStore } from '@/lib/game/store';
+import { ATTUNEMENTS_DEF } from '@/lib/game/data/attunements';
+import { useGameStore } from '@/lib/game/store';
 
-interface AttunementDebugProps {
-  store: GameStore;
-}
-
-export function AttunementDebug({ store }: AttunementDebugProps) {
+export function AttunementDebug() {
+  const store = useGameStore((s) => s);
+  
   const handleUnlockAttunement = (id: string) => {
-    // Debug action to unlock attunements
-    if (store.debugUnlockAttunement) {
-      store.debugUnlockAttunement(id);
+    if (useGameStore.getState().debugUnlockAttunement) {
+      useGameStore.getState().debugUnlockAttunement(id);
     }
   };
   
   const handleAddAttunementXP = (id: string, amount: number) => {
-    if (store.debugAddAttunementXP) {
-      store.debugAddAttunementXP(id, amount);
+    if (useGameStore.getState().debugAddAttunementXP) {
+      useGameStore.getState().debugAddAttunementXP(id, amount);
     }
   };
-
+  
   return (
     <Card className="bg-gray-900/80 border-gray-700">
       <CardHeader className="pb-2">
@@ -49,34 +46,21 @@ export function AttunementDebug({ store }: AttunementDebugProps) {
                   )}
                 </div>
               </div>
-              <div className="flex gap-1">
-                {!isActive && (
-                  <Button
-                    size="sm"
-                    variant="outline"
-                    onClick={() => handleUnlockAttunement(id)}
-                  >
-                    <Unlock className="w-3 h-3" />
-                  </Button>
-                )}
-                {isActive && (
-                  <>
-                    <Button
-                      size="sm"
-                      variant="outline"
-                      onClick={() => handleAddAttunementXP(id, 50)}
-                    >
-                      +50 XP
-                    </Button>
-                    <Button
-                      size="sm"
-                      variant="outline"
-                      onClick={() => handleAddAttunementXP(id, 500)}
-                    >
-                      +500 XP
-                    </Button>
-                  </>
-                )}
+              <div className="flex gap-2">
+                <Button
+                  size="sm"
+                  variant="outline"
+                  onClick={() => handleUnlockAttunement(id)}
+                >
+                  <Unlock className="w-3 h-3 mr-1" /> Unlock
+                </Button>
+                <Button
+                  size="sm"
+                  variant="outline"
+                  onClick={() => handleAddAttunementXP(id, 100)}
+                >
+                  +100 XP
+                </Button>
               </div>
             </div>
           );