feat: recreate Debug Tab with modular debugging functions

- Add DebugTab.tsx as main container with collapsible sections
- Add 8 debug section components in DebugTab/ subdirectory:
  - GameStateDebugSection: reset, mana, time, pause controls
  - DisciplineDebugSection: activate/deactivate, add XP
  - AttunementDebugSection: unlock, add XP
  - ElementDebugSection: unlock all, add elemental mana
  - GolemDebugSection: enable/disable golems
  - PactDebugSection: force sign/clear pacts
  - SpireDebugSection: jump floors, toggle spire mode
  - AchievementDebugSection: unlock/reset achievements
- Add DebugTab to barrel export (tabs/index.ts)
- Add lazy-loaded Debug tab to page.tsx
- Add DebugTab.test.ts with 45 tests
- All files under 400 lines
- Uses existing debug context (DebugProvider, DebugName)
- Destructive actions require confirmation (double-click pattern)

src/components/game/tabs/DebugTab.tsx

@@ -0,0 +1,103 @@
+'use client';
+
+import { useState } from 'react';
+import { Card, CardContent } from '@/components/ui/card';
+import { AlertTriangle, ChevronDown, ChevronRight } from 'lucide-react';
+import { DebugName } from '@/components/game/debug/debug-context';
+import { GameStateDebugSection } from './DebugTab/GameStateDebugSection';
+import { DisciplineDebugSection } from './DebugTab/DisciplineDebugSection';
+import { AttunementDebugSection } from './DebugTab/AttunementDebugSection';
+import { ElementDebugSection } from './DebugTab/ElementDebugSection';
+import { GolemDebugSection } from './DebugTab/GolemDebugSection';
+import { PactDebugSection } from './DebugTab/PactDebugSection';
+import { SpireDebugSection } from './DebugTab/SpireDebugSection';
+import { AchievementDebugSection } from './DebugTab/AchievementDebugSection';
+
+interface DebugSectionProps {
+  title: string;
+  color: string;
+  children: React.ReactNode;
+  defaultOpen?: boolean;
+}
+
+function DebugSection({ title, color, children, defaultOpen = false }: DebugSectionProps) {
+  const [isOpen, setIsOpen] = useState(defaultOpen);
+
+  return (
+    <Card className="bg-gray-900/60 border-gray-700/50">
+      <button
+        onClick={() => setIsOpen(!isOpen)}
+        className="w-full px-4 py-3 flex items-center gap-2 text-left hover:bg-gray-800/30 transition-colors"
+      >
+        {isOpen ? (
+          <ChevronDown className="w-4 h-4 text-gray-400" />
+        ) : (
+          <ChevronRight className="w-4 h-4 text-gray-400" />
+        )}
+        <span className="font-semibold text-sm" style={{ color }}>{title}</span>
+      </button>
+      {isOpen && (
+        <CardContent className="pt-0 pb-4">
+          {children}
+        </CardContent>
+      )}
+    </Card>
+  );
+}
+
+export function DebugTab() {
+  return (
+    <DebugName name="DebugTab">
+      <div className="space-y-4">
+        {/* Warning Banner */}
+        <Card className="bg-amber-900/20 border-amber-600/50">
+          <CardContent className="pt-4">
+            <div className="flex items-center gap-2 text-amber-400">
+              <AlertTriangle className="w-5 h-5" />
+              <span className="font-semibold">Debug Mode</span>
+            </div>
+            <p className="text-sm text-amber-300/70 mt-1">
+              These tools are for development and testing. Using them may break game balance or save data.
+            </p>
+          </CardContent>
+        </Card>
+
+        <div className="space-y-3">
+          <DebugSection title="Game State" color="#60A5FA" defaultOpen={true}>
+            <GameStateDebugSection />
+          </DebugSection>
+
+          <DebugSection title="Spire" color="#2DD4BF">
+            <SpireDebugSection />
+          </DebugSection>
+
+          <DebugSection title="Disciplines" color="#818CF8">
+            <DisciplineDebugSection />
+          </DebugSection>
+
+          <DebugSection title="Attunements" color="#C084FC">
+            <AttunementDebugSection />
+          </DebugSection>
+
+          <DebugSection title="Elements" color="#4ADE80">
+            <ElementDebugSection />
+          </DebugSection>
+
+          <DebugSection title="Golems" color="#FB923C">
+            <GolemDebugSection />
+          </DebugSection>
+
+          <DebugSection title="Pacts" color="#F87171">
+            <PactDebugSection />
+          </DebugSection>
+
+          <DebugSection title="Achievements" color="#FACC15">
+            <AchievementDebugSection />
+          </DebugSection>
+        </div>
+      </div>
+    </DebugName>
+  );
+}
+
+DebugTab.displayName = "DebugTab";