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/lib/game/data/equipment/accessories.ts

@@ -0,0 +1,87 @@
+// ─── Accessories Equipment Types ──────────────────────────────────
+
+import type { EquipmentType } from './types';
+
+export const ACCESSORIES_EQUIPMENT: Record<string, EquipmentType> = {
+  // ─── Accessories ────────────────────────────────────────────────
+  copperRing: {
+    id: 'copperRing',
+    name: 'Copper Ring',
+    category: 'accessory',
+    slot: 'accessory1',
+    baseCapacity: 15,
+    description: 'A simple copper ring. Basic capacity for accessories.',
+  },
+  silverRing: {
+    id: 'silverRing',
+    name: 'Silver Ring',
+    category: 'accessory',
+    slot: 'accessory1',
+    baseCapacity: 25,
+    description: 'A silver ring with decent magical conductivity.',
+  },
+  goldRing: {
+    id: 'goldRing',
+    name: 'Gold Ring',
+    category: 'accessory',
+    slot: 'accessory1',
+    baseCapacity: 35,
+    description: 'A gold ring with excellent magical properties.',
+  },
+  signetRing: {
+    id: 'signetRing',
+    name: 'Signet Ring',
+    category: 'accessory',
+    slot: 'accessory1',
+    baseCapacity: 30,
+    description: 'A ring bearing a magical sigil.',
+  },
+  copperAmulet: {
+    id: 'copperAmulet',
+    name: 'Copper Amulet',
+    category: 'accessory',
+    slot: 'accessory1',
+    baseCapacity: 20,
+    description: 'A simple copper amulet on a leather cord.',
+  },
+  silverAmulet: {
+    id: 'silverAmulet',
+    name: 'Silver Amulet',
+    category: 'accessory',
+    slot: 'accessory1',
+    baseCapacity: 30,
+    description: 'A silver amulet with a small gem.',
+  },
+  crystalPendant: {
+    id: 'crystalPendant',
+    name: 'Crystal Pendant',
+    category: 'accessory',
+    slot: 'accessory1',
+    baseCapacity: 45,
+    description: 'A pendant with a mana-infused crystal.',
+  },
+  manaBrooch: {
+    id: 'manaBrooch',
+    name: 'Mana Brooch',
+    category: 'accessory',
+    slot: 'accessory1',
+    baseCapacity: 40,
+    description: 'A decorative brooch that can hold enchantments.',
+  },
+  arcanistPendant: {
+    id: 'arcanistPendant',
+    name: 'Arcanist Pendant',
+    category: 'accessory',
+    slot: 'accessory1',
+    baseCapacity: 55,
+    description: 'A powerful pendant worn by master arcanists.',
+  },
+  voidTouchedRing: {
+    id: 'voidTouchedRing',
+    name: 'Void-Touched Ring',
+    category: 'accessory',
+    slot: 'accessory1',
+    baseCapacity: 50,
+    description: 'A ring corrupted by void energy. High capacity but risky.',
+  },
+};

src/lib/game/data/equipment/body.ts

@@ -0,0 +1,47 @@
+// ─── Body Equipment Types ─────────────────────────────────────────
+
+import type { EquipmentType } from './types';
+
+export const BODY_EQUIPMENT: Record<string, EquipmentType> = {
+  // ─── Body ────────────────────────────────────────────────────────
+  civilianShirt: {
+    id: 'civilianShirt',
+    name: 'Civilian Shirt',
+    category: 'body',
+    slot: 'body',
+    baseCapacity: 30,
+    description: 'A plain shirt with minimal magical properties.',
+  },
+  apprenticeRobe: {
+    id: 'apprenticeRobe',
+    name: 'Apprentice Robe',
+    category: 'body',
+    slot: 'body',
+    baseCapacity: 45,
+    description: 'The standard robe for magic apprentices.',
+  },
+  scholarRobe: {
+    id: 'scholarRobe',
+    name: 'Scholar Robe',
+    category: 'body',
+    slot: 'body',
+    baseCapacity: 55,
+    description: 'A robe worn by scholars and researchers.',
+  },
+  battleRobe: {
+    id: 'battleRobe',
+    name: 'Battle Robe',
+    category: 'body',
+    slot: 'body',
+    baseCapacity: 65,
+    description: 'A reinforced robe designed for combat mages.',
+  },
+  arcanistRobe: {
+    id: 'arcanistRobe',
+    name: 'Arcanist Robe',
+    category: 'body',
+    slot: 'body',
+    baseCapacity: 80,
+    description: 'An ornate robe for master arcanists. High capacity for body armor.',
+  },
+};

src/lib/game/data/equipment/casters.ts

@@ -0,0 +1,59 @@
+// ─── Caster Equipment Types ────────────────────────────────────────────
+
+import type { EquipmentType } from './types';
+
+export const CASTER_EQUIPMENT: Record<string, EquipmentType> = {
+  // ─── Main Hand - Casters ─────────────────────────────────────────────────
+  basicStaff: {
+    id: 'basicStaff',
+    name: 'Basic Staff',
+    category: 'caster',
+    slot: 'mainHand',
+    baseCapacity: 50,
+    description: 'A simple wooden staff, basic but reliable for channeling mana.',
+    twoHanded: true,
+  },
+  apprenticeWand: {
+    id: 'apprenticeWand',
+    name: 'Apprentice Wand',
+    category: 'caster',
+    slot: 'mainHand',
+    baseCapacity: 35,
+    description: 'A lightweight wand favored by apprentices. Lower capacity but faster to prepare.',
+  },
+  oakStaff: {
+    id: 'oakStaff',
+    name: 'Oak Staff',
+    category: 'caster',
+    slot: 'mainHand',
+    baseCapacity: 65,
+    description: 'A sturdy oak staff with decent mana capacity.',
+    twoHanded: true,
+  },
+  crystalWand: {
+    id: 'crystalWand',
+    name: 'Crystal Wand',
+    category: 'caster',
+    slot: 'mainHand',
+    baseCapacity: 45,
+    description: 'A wand tipped with a small crystal. Excellent for elemental enchantments.',
+  },
+  arcanistStaff: {
+    id: 'arcanistStaff',
+    name: 'Arcanist Staff',
+    category: 'caster',
+    slot: 'mainHand',
+    baseCapacity: 80,
+    description: 'A staff designed for advanced spellcasters. High capacity for complex enchantments.',
+    twoHanded: true,
+  },
+  battlestaff: {
+    id: 'battlestaff',
+    name: 'Battlestaff',
+    category: 'caster',
+    slot: 'mainHand',
+    baseCapacity: 70,
+    description: 'A reinforced staff suitable for both casting and combat.',
+    twoHanded: true,
+  },
+};

src/lib/game/data/equipment/catalysts.ts

@@ -0,0 +1,31 @@
+// ─── Catalyst Equipment Types ───────────────────────────────────────────
+
+import type { EquipmentType } from './types';
+
+export const CATALYST_EQUIPMENT: Record<string, EquipmentType> = {
+  // ─── Main Hand - Catalysts ────────────────────────────────────────────────
+  basicCatalyst: {
+    id: 'basicCatalyst',
+    name: 'Basic Catalyst',
+    category: 'catalyst',
+    slot: 'mainHand',
+    baseCapacity: 40,
+    description: 'A simple catalyst for amplifying magical effects.',
+  },
+  fireCatalyst: {
+    id: 'fireCatalyst',
+    name: 'Fire Catalyst',
+    category: 'catalyst',
+    slot: 'mainHand',
+    baseCapacity: 55,
+    description: 'A catalyst attuned to fire magic. Enhances fire enchantments.',
+  },
+  voidCatalyst: {
+    id: 'voidCatalyst',
+    name: 'Void Catalyst',
+    category: 'catalyst',
+    slot: 'mainHand',
+    baseCapacity: 75,
+    description: 'A rare catalyst touched by void energy. High capacity but volatile.',
+  },
+};

src/lib/game/data/equipment/feet.ts

@@ -0,0 +1,39 @@
+// ─── Feet Equipment Types ─────────────────────────────────────────
+
+import type { EquipmentType } from './types';
+
+export const FEET_EQUIPMENT: Record<string, EquipmentType> = {
+  // ─── Feet ────────────────────────────────────────────────────────
+  civilianShoes: {
+    id: 'civilianShoes',
+    name: 'Civilian Shoes',
+    category: 'feet',
+    slot: 'feet',
+    baseCapacity: 15,
+    description: 'Simple leather shoes. No special properties.',
+  },
+  apprenticeBoots: {
+    id: 'apprenticeBoots',
+    name: 'Apprentice Boots',
+    category: 'feet',
+    slot: 'feet',
+    baseCapacity: 25,
+    description: 'Basic boots for magic students.',
+  },
+  travelerBoots: {
+    id: 'travelerBoots',
+    name: 'Traveler Boots',
+    category: 'feet',
+    slot: 'feet',
+    baseCapacity: 30,
+    description: 'Comfortable boots for long journeys.',
+  },
+  battleBoots: {
+    id: 'battleBoots',
+    name: 'Battle Boots',
+    category: 'feet',
+    slot: 'feet',
+    baseCapacity: 35,
+    description: 'Sturdy boots for combat situations.',
+  },
+};

src/lib/game/data/equipment/hands.ts

@@ -0,0 +1,39 @@
+// ─── Hands Equipment Types ─────────────────────────────────────────
+
+import type { EquipmentType } from './types';
+
+export const HANDS_EQUIPMENT: Record<string, EquipmentType> = {
+  // ─── Hands ───────────────────────────────────────────────────────
+  civilianGloves: {
+    id: 'civilianGloves',
+    name: 'Civilian Gloves',
+    category: 'hands',
+    slot: 'hands',
+    baseCapacity: 20,
+    description: 'Simple cloth gloves. Minimal magical capacity.',
+  },
+  apprenticeGloves: {
+    id: 'apprenticeGloves',
+    name: 'Apprentice Gloves',
+    category: 'hands',
+    slot: 'hands',
+    baseCapacity: 30,
+    description: 'Basic gloves for handling magical components.',
+  },
+  spellweaveGloves: {
+    id: 'spellweaveGloves',
+    name: 'Spellweave Gloves',
+    category: 'hands',
+    slot: 'hands',
+    baseCapacity: 40,
+    description: 'Gloves woven with mana-conductive threads.',
+  },
+  combatGauntlets: {
+    id: 'combatGauntlets',
+    name: 'Combat Gauntlets',
+    category: 'hands',
+    slot: 'hands',
+    baseCapacity: 35,
+    description: 'Armored gauntlets for battle mages.',
+  },
+};

src/lib/game/data/equipment/head.ts

@@ -0,0 +1,47 @@
+// ─── Head Equipment Types ────────────────────────────────────────────
+
+import type { EquipmentType } from './types';
+
+export const HEAD_EQUIPMENT: Record<string, EquipmentType> = {
+  // ─── Head ─────────────────────────────────────────────────────────
+  clothHood: {
+    id: 'clothHood',
+    name: 'Cloth Hood',
+    category: 'head',
+    slot: 'head',
+    baseCapacity: 25,
+    description: 'A simple cloth hood. Minimal protection but comfortable.',
+  },
+  apprenticeCap: {
+    id: 'apprenticeCap',
+    name: 'Apprentice Cap',
+    category: 'head',
+    slot: 'head',
+    baseCapacity: 30,
+    description: 'The traditional cap of magic apprentices.',
+  },
+  wizardHat: {
+    id: 'wizardHat',
+    name: 'Wizard Hat',
+    category: 'head',
+    slot: 'head',
+    baseCapacity: 45,
+    description: 'A classic pointed wizard hat. Decent capacity for headwear.',
+  },
+  arcanistCirclet: {
+    id: 'arcanistCirclet',
+    name: 'Arcanist Circlet',
+    category: 'head',
+    slot: 'head',
+    baseCapacity: 40,
+    description: 'A silver circlet worn by accomplished arcanists.',
+  },
+  battleHelm: {
+    id: 'battleHelm',
+    name: 'Battle Helm',
+    category: 'head',
+    slot: 'head',
+    baseCapacity: 50,
+    description: 'A sturdy helm for battle mages.',
+  },
+};

src/lib/game/data/equipment/index.ts

@@ -0,0 +1,28 @@
+// ─── Equipment Types Index ───────────────────────────────
+// Re-exports from all equipment type modules
+
+// Re-export types
+export type { 
+  EquipmentSlot, 
+  EquipmentCategory, 
+  EquipmentType 
+} from './types';
+
+export { 
+  EQUIPMENT_SLOTS, 
+  SLOT_NAMES 
+} from './types';
+
+// Re-export data
+export { EQUIPMENT_TYPES } from './data';
+
+// Re-export utility functions
+export {
+  getEquipmentType,
+  getEquipmentByCategory,
+  getEquipmentBySlot,
+  getAllEquipmentTypes,
+  getValidSlotsForCategory,
+  getValidSlotsForEquipmentType,
+  canEquipInSlot,
+} from './utils';

src/lib/game/data/equipment/shields.ts

@@ -0,0 +1,39 @@
+// ─── Shield Equipment Types ───────────────────────────────────────────
+
+import type { EquipmentType } from './types';
+
+export const SHIELD_EQUIPMENT: Record<string, EquipmentType> = {
+  // ─── Off Hand - Shields ───────────────────────────────────────────
+  basicShield: {
+    id: 'basicShield',
+    name: 'Basic Shield',
+    category: 'shield',
+    slot: 'offHand',
+    baseCapacity: 40,
+    description: 'A simple wooden shield. Provides basic protection.',
+  },
+  reinforcedShield: {
+    id: 'reinforcedShield',
+    name: 'Reinforced Shield',
+    category: 'shield',
+    slot: 'offHand',
+    baseCapacity: 55,
+    description: 'A metal-reinforced shield with enhanced durability and capacity.',
+  },
+  runicShield: {
+    id: 'runicShield',
+    name: 'Runic Shield',
+    category: 'shield',
+    slot: 'offHand',
+    baseCapacity: 70,
+    description: 'A shield engraved with protective runes. Excellent for defensive enchantments.',
+  },
+  manaShield: {
+    id: 'manaShield',
+    name: 'Mana Shield',
+    category: 'shield',
+    slot: 'offHand',
+    baseCapacity: 60,
+    description: 'A crystalline shield that can store and reflect mana.',
+  },
+};

src/lib/game/data/equipment/swords.ts

@@ -0,0 +1,59 @@
+// ─── Sword Equipment Types ───────────────────────────────────────────
+
+import type { EquipmentType } from './types';
+
+export const SWORD_EQUIPMENT: Record<string, EquipmentType> = {
+  // ─── Main Hand - Magic Swords ─────────────────────────────────────
+  // Magic swords have low base damage but high cast speed
+  // They can be enchanted with elemental effects that use mana over time
+  ironBlade: {
+    id: 'ironBlade',
+    name: 'Iron Blade',
+    category: 'sword',
+    slot: 'mainHand',
+    baseCapacity: 30,
+    baseDamage: 3,
+    baseCastSpeed: 4,
+    description: 'A simple iron sword. Can be enchanted with elemental effects.',
+  },
+  steelBlade: {
+    id: 'steelBlade',
+    name: 'Steel Blade',
+    category: 'sword',
+    slot: 'mainHand',
+    baseCapacity: 40,
+    baseDamage: 4,
+    baseCastSpeed: 4,
+    description: 'A well-crafted steel sword. Balanced for combat and enchanting.',
+  },
+  crystalBlade: {
+    id: 'crystalBlade',
+    name: 'Crystal Blade',
+    category: 'sword',
+    slot: 'mainHand',
+    baseCapacity: 55,
+    baseDamage: 3,
+    baseCastSpeed: 5,
+    description: 'A blade made of crystallized mana. Excellent for elemental enchantments.',
+  },
+  arcanistBlade: {
+    id: 'arcanistBlade',
+    name: 'Arcanist Blade',
+    category: 'sword',
+    slot: 'mainHand',
+    baseCapacity: 65,
+    baseDamage: 5,
+    baseCastSpeed: 4,
+    description: 'A sword forged for battle mages. High capacity for powerful enchantments.',
+  },
+  voidBlade: {
+    id: 'voidBlade',
+    name: 'Void-Touched Blade',
+    category: 'sword',
+    slot: 'mainHand',
+    baseCapacity: 50,
+    baseDamage: 6,
+    baseCastSpeed: 3,
+    description: 'A blade corrupted by void energy. Powerful but consumes more mana.',
+  },
+};

src/lib/game/data/equipment/types.ts

@@ -0,0 +1,31 @@
+// ─── Equipment Types ─────────────────────────────────────────────────
+
+export type EquipmentSlot = 'mainHand' | 'offHand' | 'head' | 'body' | 'hands' | 'feet' | 'accessory1' | 'accessory2';
+export type EquipmentCategory = 'caster' | 'shield' | 'catalyst' | 'sword' | 'head' | 'body' | 'hands' | 'feet' | 'accessory';
+
+// All equipment slots in order
+export const EQUIPMENT_SLOTS: EquipmentSlot[] = ['mainHand', 'offHand', 'head', 'body', 'hands', 'feet', 'accessory1', 'accessory2'];
+
+// Human-readable names for equipment slots
+export const SLOT_NAMES: Record<EquipmentSlot, string> = {
+  mainHand: 'Main Hand',
+  offHand: 'Off Hand',
+  head: 'Head',
+  body: 'Body',
+  hands: 'Hands',
+  feet: 'Feet',
+  accessory1: 'Accessory 1',
+  accessory2: 'Accessory 2',
+};
+
+export interface EquipmentType {
+  id: string;
+  name: string;
+  category: EquipmentCategory;
+  slot: EquipmentSlot;
+  baseCapacity: number;
+  description: string;
+  baseDamage?: number;         // For swords
+  baseCastSpeed?: number;      // For swords (higher = faster)
+  twoHanded?: boolean;         // If true, weapon occupies both main hand and offhand slots
+}

src/lib/game/data/equipment/utils.ts

@@ -0,0 +1,62 @@
+// ─── Equipment Helper Functions ─────────────────────────
+
+import type { EquipmentType, EquipmentSlot, EquipmentCategory } from './types';
+import { EQUIPMENT_TYPES } from './index';
+
+export function getEquipmentType(id: string): EquipmentType | undefined {
+  return EQUIPMENT_TYPES[id];
+}
+
+export function getEquipmentByCategory(category: EquipmentCategory): EquipmentType[] {
+  return Object.values(EQUIPMENT_TYPES).filter(e => e.category === category) as EquipmentType[];
+}
+
+export function getEquipmentBySlot(slot: EquipmentSlot): EquipmentType[] {
+  return Object.values(EQUIPMENT_TYPES).filter(e => e.slot === slot) as EquipmentType[];
+}
+
+export function getAllEquipmentTypes(): EquipmentType[] {
+  return Object.values(EQUIPMENT_TYPES) as EquipmentType[];
+}
+
+// Get valid slots for a category
+// Note: For 2-handed weapons, use getValidSlotsForEquipmentType instead
+export function getValidSlotsForCategory(category: EquipmentCategory): EquipmentSlot[] {
+  switch (category) {
+    case 'caster':
+    case 'catalyst':
+    case 'sword':
+      return ['mainHand'];
+    case 'shield':
+      return ['offHand'];
+    case 'head':
+      return ['head'];
+    case 'body':
+      return ['body'];
+    case 'hands':
+      return ['hands'];
+    case 'feet':
+      return ['feet'];
+    case 'accessory':
+      return ['accessory1', 'accessory2'];
+    default:
+      return [];
+  }
+}
+
+// Get valid slots for a specific equipment type (considers 2-handed weapons)
+export function getValidSlotsForEquipmentType(equipType: EquipmentType): EquipmentSlot[] {
+  // 2-handed weapons occupy both main hand and offhand
+  if (equipType.twoHanded) {
+    return ['mainHand', 'offHand'];
+  }
+  
+  // Otherwise use category-based slots
+  return getValidSlotsForCategory(equipType.category);
+}
+
+// Check if an equipment type can be equipped in a specific slot
+export function canEquipInSlot(equipmentType: EquipmentType, slot: EquipmentSlot): boolean {
+  const validSlots = getValidSlotsForEquipmentType(equipmentType);
+  return validSlots.includes(slot);
+}