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/ElementDebug.tsx

@@ -2,29 +2,22 @@
 
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
-import { ELEMENTS } from '@/lib/game/constants';
 import { Star, Lock } from 'lucide-react';
-import type { GameStore } from '@/lib/game/store';
+import { useGameStore } from '@/lib/game/store';
 
-interface ElementDebugProps {
-  store: GameStore;
-}
-
-export function ElementDebug({ store }: ElementDebugProps) {
+export function ElementDebug() {
+  const store = useGameStore((s) => s);
+  
   const handleUnlockElement = (element: string) => {
-    store.unlockElement(element);
+    useGameStore.getState().unlockElement(element);
   };
   
   const handleAddElementalMana = (element: string, amount: number) => {
-    const elem = store.elements[element];
-    if (elem?.unlocked) {
-      // Add directly to element pool - need to implement in store
-      if (store.debugAddElementalMana) {
-        store.debugAddElementalMana(element, amount);
-      }
+    if (useGameStore.getState().debugAddElementalMana) {
+      useGameStore.getState().debugAddElementalMana(element, amount);
     }
   };
-
+  
   return (
     <Card className="bg-gray-900/80 border-gray-700 md:col-span-2">
       <CardHeader className="pb-2">
@@ -35,47 +28,41 @@ export function ElementDebug({ store }: ElementDebugProps) {
       </CardHeader>
       <CardContent>
         <div className="grid grid-cols-3 sm:grid-cols-4 md:grid-cols-6 gap-2">
-          {Object.entries(ELEMENTS).map(([id, def]) => {
-            const elem = store.elements[id];
-            const isUnlocked = elem?.unlocked;
-            
+          {Object.entries(store.elements).map(([id, elem]) => {
+            const def = ELEMENTS[id];
             return (
-              <div
+              <div 
                 key={id}
-                className={`p-2 rounded border ${
-                  isUnlocked ? 'border-gray-600' : 'border-gray-800 opacity-60'
+                className={`p-2 rounded border text-center ${
+                  elem.unlocked ? 'border-gray-600 bg-gray-800/50' : 'border-gray-800 opacity-60'
                 }`}
                 style={{ 
-                  borderColor: isUnlocked ? def.color : undefined 
+                  borderColor: elem.unlocked ? def?.color : undefined 
                 }}
               >
-                <div className="flex items-center justify-between mb-1">
-                  <span style={{ color: def.color }}>{def.sym}</span>
-                  {!isUnlocked && (
-                    <Button
-                      size="sm"
-                      variant="ghost"
-                      className="h-5 w-5 p-0"
-                      onClick={() => handleUnlockElement(id)}
-                    >
-                      <Lock className="w-3 h-3" />
-                    </Button>
-                  )}
+                <div className="text-lg">{def?.sym}</div>
+                <div className="text-xs text-gray-400">{def?.name}</div>
+                <div className="text-xs text-gray-300 mt-1">
+                  {elem.current}/{elem.max}
                 </div>
-                <div className="text-xs" style={{ color: def.color }}>{def.name}</div>
-                {isUnlocked && (
-                  <div className="text-xs text-gray-400 mt-1">
-                    {elem.current.toFixed(0)}/{elem.max}
-                  </div>
-                )}
-                {isUnlocked && (
+                {!elem.unlocked && (
                   <Button
                     size="sm"
-                    variant="ghost"
-                    className="h-5 w-full mt-1 text-xs"
-                    onClick={() => handleAddElementalMana(id, 100)}
+                    variant="outline"
+                    className="mt-2"
+                    onClick={() => handleUnlockElement(id)}
                   >
-                    +100
+                    <Unlock className="w-3 h-3 mr-1" /> Unlock
+                  </Button>
+                )}
+                {elem.unlocked && (
+                  <Button
+                    size="sm"
+                    variant="outline"
+                    className="mt-2"
+                    onClick={() => handleAddElementalMana(id, 10)}
+                  >
+                    +10
                   </Button>
                 )}
               </div>