Refactor large files into modular components

- Refactored page.tsx (613→252 lines) with GameOverScreen and LeftPanel extracted
- Refactored StatsTab.tsx (584→92 lines) with section components
- Refactored SkillsTab.tsx (434→54 lines) with sub-components
- Created modular structure for GameContext, LootInventory, and other components
- All extracted components organized into feature directories

src/components/game/crafting/EnchantmentDesigner/DesignForm.tsx

@@ -0,0 +1,52 @@
+'use client';
+
+import { ActionButton } from '@/components/ui/action-button';
+import { StatRow } from '@/components/ui/stat-row';
+import type { DesignFormProps } from './types';
+
+export function DesignForm({
+  designName,
+  setDesignName,
+  selectedEffects,
+  designCapacityCost,
+  selectedEquipmentCapacity,
+  isOverCapacity,
+  designTime,
+  selectedEquipmentType,
+  handleCreateDesign,
+}: DesignFormProps) {
+  return (
+    <div className="space-y-2">
+      <input
+        type="text"
+        placeholder="Design name..."
+        value={designName}
+        onChange={(e) => setDesignName(e.target.value)}
+        className="w-full bg-[var(--bg-sunken)] border border-[var(--border-default)] rounded px-3 py-2 text-sm text-[var(--text-primary)] placeholder:text-[var(--text-disabled)] focus:outline-none focus:border-[var(--border-focus)]"
+        aria-label="Design name"
+      />
+      <StatRow
+        label="Total Capacity:"
+        value={
+          <span className={isOverCapacity ? 'text-[var(--color-danger)]' : 'text-[var(--color-success)]'}>
+            {designCapacityCost.toFixed(0)} / {selectedEquipmentCapacity}
+          </span>
+        }
+      />
+      <StatRow
+        label="Design Time:"
+        value={`${designTime.toFixed(1)}h`}
+        highlight="default"
+      />
+      <ActionButton
+        className="w-full"
+        disabled={!designName || selectedEffects.length === 0 || isOverCapacity}
+        onClick={handleCreateDesign}
+      >
+        {isOverCapacity ? 'Over Capacity!' : `Start Design (${designTime.toFixed(1)}h)`}
+      </ActionButton>
+    </div>
+  );
+}
+
+DesignForm.displayName = 'DesignForm';