feat(ui): complete Task 4 UI redesign — all sub-tasks 1-10

- Implemented complete design system with 40+ CSS custom properties
- Created 9 UI primitives (GameCard, SectionHeader, StatRow, ManaBar, ElementBadge, ValueDisplay, ActionButton, SkillRow, TooltipInfo)
- Redesigned all tabs: Spire, Skills, Stats, Equipment, Crafting, Attunements, Golemancy, Spells, Loot, Achievements, Lab, Debug
- Added toast notification system (GameToast) with success/warning/error/info types
- Added confirmation dialogs for destructive actions
- Removed all dev artifacts and component name labels
- Added empty states to all tabs
- Replaced emoji icons with Lucide React icons
- Added enchantPower placeholder to StatsTab and EquipmentTab
- Mobile audit passed at 375px viewport
- Build passes with 0 errors, lint passes with 0 errors

Sub-tasks completed:
- ST1: Design System Implementation
- ST2: Global Layout & Header
- ST3: Left Panel (Mana Display & Action Area)
- ST4: Skills Tab
- ST5: Spire Tab & Spire Mode UI
- ST6: Stats Tab
- ST7: Equipment & Crafting Tabs
- ST8: Attunements Tab
- ST9: Remaining Tabs
- ST10: Toast System & Confirmation Dialogs

Documentation: 15+ files in docs/task4/

src/components/game/tabs/AchievementsTab.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { GameCard, ElementBadge } from '@/components/ui';
 import { Badge } from '@/components/ui/badge';
 import type { GameStore } from '@/lib/game/store';
 import { AchievementsDisplay } from '@/components/game/AchievementsDisplay';
@@ -15,16 +15,16 @@ export function AchievementsTab({ store }: AchievementsTabProps) {
   
   return (
     <div className="space-y-4">
-      <Card className="bg-gray-900/80 border-gray-700">
-        <CardHeader className="pb-2">
-          <CardTitle className="text-amber-400 text-sm flex items-center gap-2">
-            🏆 Achievements
-            <Badge className="ml-auto bg-amber-900/50 text-amber-300">
+      <GameCard>
+        <div className="pb-2">
+          <h2 className="text-lg font-[var(--font-heading)] font-semibold flex items-center gap-2 text-[var(--color-warning)]">
+            Achievements
+            <Badge className="ml-auto bg-[var(--bg-elevated)] text-[var(--color-warning)] border border-[var(--color-warning)]/30">
               {unlockedCount} unlocked
             </Badge>
-          </CardTitle>
-        </CardHeader>
-        <CardContent>
+          </h2>
+        </div>
+        <div>
           <AchievementsDisplay
             achievements={achievements}
             gameState={{
@@ -36,8 +36,8 @@ export function AchievementsTab({ store }: AchievementsTabProps) {
               totalCraftsCompleted: store.totalCraftsCompleted,
             }}
           />
-        </CardContent>
-      </Card>
+        </div>
+      </GameCard>
     </div>
   );
 }