fix: complete store migration — fix all tab crashes and ghost field reads

src/components/game/debug/ElementDebug.tsx

@@ -3,21 +3,24 @@
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { Star, Lock } from 'lucide-react';
-import { useGameStore } from '@/lib/game/store';
+import { useManaStore } from '@/lib/game/stores';
+import { ELEMENTS } from '@/lib/game/constants';
 
 export function ElementDebug() {
-  const store = useGameStore((s) => s);
-  
+  const elements = useManaStore((s) => s.elements);
+  const unlockElement = useManaStore((s) => s.unlockElement);
+  const debugAddElementalMana = useManaStore((s) => s.debugAddElementalMana);
+
   const handleUnlockElement = (element: string) => {
-    useGameStore.getState().unlockElement(element);
+    unlockElement(element, 500);
   };
-  
+
   const handleAddElementalMana = (element: string, amount: number) => {
-    if (useGameStore.getState().debugAddElementalMana) {
-      useGameStore.getState().debugAddElementalMana(element, amount);
+    if (debugAddElementalMana) {
+      debugAddElementalMana(element, amount);
     }
   };
-  
+
   return (
     <Card className="bg-gray-900/80 border-gray-700 md:col-span-2">
       <CardHeader className="pb-2">
@@ -28,16 +31,16 @@ export function ElementDebug() {
       </CardHeader>
       <CardContent>
         <div className="grid grid-cols-3 sm:grid-cols-4 md:grid-cols-6 gap-2">
-          {Object.entries(store.elements).map(([id, elem]) => {
+          {Object.entries(elements).map(([id, elem]) => {
             const def = ELEMENTS[id];
             return (
-              <div 
+              <div
                 key={id}
                 className={`p-2 rounded border text-center ${
                   elem.unlocked ? 'border-gray-600 bg-gray-800/50' : 'border-gray-800 opacity-60'
                 }`}
-                style={{ 
-                  borderColor: elem.unlocked ? def?.color : undefined 
+                style={{
+                  borderColor: elem.unlocked ? def?.color : undefined
                 }}
               >
                 <div className="text-lg">{def?.sym}</div>