feat: recreate Achievements tab with category sections, progress tracking, and hidden achievement logic

src/app/page.tsx

@@ -44,6 +44,7 @@ import { LeftPanel } from './components/LeftPanel';
 const DisciplinesTab = lazy(() => import('@/components/game/tabs').then(module => ({ default: module.DisciplinesTab })));
 const SpellsTab = lazy(() => import('@/components/game/tabs').then(module => ({ default: module.SpellsTab })));
 const StatsTab = lazy(() => import('@/components/game/tabs').then(module => ({ default: module.StatsTab })));
+const AchievementsTab = lazy(() => import('@/components/game/tabs').then(module => ({ default: module.AchievementsTab })));
 
 const TabLoadingFallback = () => <div className="p-4 text-center text-gray-400">Loading...</div>;
 
@@ -233,6 +234,7 @@ export default function ManaLoopGame() {
                   <TabsTrigger value="stats" className="text-xs px-2 py-1">📊 Stats</TabsTrigger>
                   <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="achievements" className="text-xs px-2 py-1">🏆 Achievements</TabsTrigger>
                 </TabsList>
 
                 <TabsContent value="spells">
@@ -262,6 +264,14 @@ export default function ManaLoopGame() {
                 <TabsContent value="grimoire">
                   <GrimoireTab />
                 </TabsContent>
+
+                <TabsContent value="achievements">
+                  <ErrorBoundary fallback={<div className="p-4 text-red-400">achievements tab failed to load.</div>}>
+                    <Suspense fallback={<TabLoadingFallback />}>
+                      <AchievementsTab />
+                    </Suspense>
+                  </ErrorBoundary>
+                </TabsContent>
               </Tabs>
             </div>
           </main>