feat: recreate Attunements tab with detailed attunement cards

src/app/page.tsx

@@ -46,6 +46,7 @@ const SpellsTab = lazy(() => import('@/components/game/tabs').then(module => ({
 const StatsTab = lazy(() => import('@/components/game/tabs').then(module => ({ default: module.StatsTab })));
 const DebugTab = lazy(() => import('@/components/game/tabs').then(module => ({ default: module.DebugTab })));
 const AchievementsTab = lazy(() => import('@/components/game/tabs').then(module => ({ default: module.AchievementsTab })));
+const AttunementsTab = lazy(() => import('@/components/game/tabs').then(module => ({ default: module.AttunementsTab })));
 
 const TabLoadingFallback = () => <div className="p-4 text-center text-gray-400">Loading...</div>;
 
@@ -236,6 +237,7 @@ export default function ManaLoopGame() {
                   <TabsTrigger value="disciplines" className="text-xs px-2 py-1">📚 Disciplines</TabsTrigger>
                   <TabsTrigger value="grimoire" className="text-xs px-2 py-1">📖 Grimoire</TabsTrigger>
                   <TabsTrigger value="debug" className="text-xs px-2 py-1">🐛 Debug</TabsTrigger>
+                  <TabsTrigger value="attunements" className="text-xs px-2 py-1">⚗️ Attunements</TabsTrigger>
                   <TabsTrigger value="achievements" className="text-xs px-2 py-1">🏆 Achievements</TabsTrigger>
                 </TabsList>
 
@@ -275,6 +277,14 @@ export default function ManaLoopGame() {
                   </ErrorBoundary>
                 </TabsContent>
 
+                <TabsContent value="attunements">
+                  <ErrorBoundary fallback={<div className="p-4 text-red-400">attunements tab failed to load.</div>}>
+                    <Suspense fallback={<TabLoadingFallback />}>
+                      <AttunementsTab />
+                    </Suspense>
+                  </ErrorBoundary>
+                </TabsContent>
+
                 <TabsContent value="achievements">
                   <ErrorBoundary fallback={<div className="p-4 text-red-400">achievements tab failed to load.</div>}>
                     <Suspense fallback={<TabLoadingFallback />}>