refactor: complete error handling standardization (issue #101)

Prestige Store:
- Convert doPrestige() to return Result<void> with specific error codes
  (INVALID_PRESTIGE_ID, PRESTIGE_MAX_LEVEL, INSUFFICIENT_INSIGHT)
- Convert startPactRitual() to return Result<void> with specific error codes
  (GUARDIAN_NOT_DEFEATED, PACT_ALREADY_SIGNED, PACT_SLOTS_FULL,
   INSUFFICIENT_MANA, RITUAL_IN_PROGRESS)

Combat Actions:
- Add try/catch wrapper inside processCombatTick with safe fallback defaults
- Add makeDefaultCombatTickResult helper for error recovery

LocalStorage Error Handling:
- Create safe-persist.ts utility wrapping localStorage with error handling
  (corrupted JSON, quota exceeded, unexpected failures)
- Update all 8 Zustand stores to use createSafeStorage() in persist middleware

UI Updates:
- Update GuardianPactsTab to use Result pattern for ritual error messages

Tests:
- Update store-actions-combat-prestige.test.ts for Result return types
- Update store-actions.test.ts ManaStore tests for Result pattern
- Remove duplicate Prestige/Discipline sections from store-actions.test.ts
- All files under 400 line limit

601 tests pass (3 pre-existing failures in spire-utils.test.ts)

.gitignore

@@ -48,4 +48,4 @@ prompt
 
 server.log
 # Skills directory
-/.zscripts/
+.desloppify/

.husky/pre-commit

@@ -16,6 +16,7 @@ fi
 # Generate project structure
 echo "🗺️ Updating project structure..."
 node .husky/scripts/generate-project-tree.js
+node .husky/scripts/generate-dependency-graph.js
 if [ $? -ne 0 ]; then
   exit 1
 fi

.husky/scripts/check-file-size.js

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-require-imports */
 const fs = require('fs');
 const path = require('path');
 const MAX_LINES = 400;
@@ -13,6 +14,7 @@ const IGNORE_PATTERNS = [
   /\.md$/,  // Markdown documentation files
   /context\.md$/,  // Context files for sub-agents
   /project-structure\.txt$/,  // Generated project structure
+  /dependency-graph\.json$/,
 ];
 
 function shouldIgnore(filePath) {

.husky/scripts/generate-dependency-graph.js

@@ -0,0 +1,119 @@
+#!/usr/bin/env node
+/**
+ * generate-dependency-graph.js
+ *
+ * Generates two files in docs/ on every commit:
+ *
+ *   docs/dependency-graph.json   — full import graph for src/lib/game/
+ *   docs/circular-deps.txt       — list of circular dependency chains (empty = clean)
+ *
+ * Run manually:  node .husky/scripts/generate-dependency-graph.js
+ * Requires:      bun add -d madge
+ */
+
+const path = require('path');
+const fs = require('fs');
+const { execSync } = require('child_process');
+
+const ROOT = path.resolve(__dirname, '../../');
+const DOCS_DIR = path.join(ROOT, 'docs');
+const GRAPH_OUT = path.join(DOCS_DIR, 'dependency-graph.json');
+const CIRCULAR_OUT = path.join(DOCS_DIR, 'circular-deps.txt');
+
+// Check madge is available
+function madgeAvailable() {
+  try {
+    execSync('bunx madge --version', { stdio: 'ignore', cwd: ROOT });
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+function run(cmd) {
+  return execSync(cmd, { cwd: ROOT, encoding: 'utf8' });
+}
+
+if (!madgeAvailable()) {
+  console.error('madge not found. Install with: bun add -d madge');
+  process.exit(1);
+}
+
+if (!fs.existsSync(DOCS_DIR)) {
+  fs.mkdirSync(DOCS_DIR, { recursive: true });
+}
+
+// ── 1. Full dependency graph for the game library ─────────────────────────
+try {
+  const graphJson = run(
+    'bunx madge --json --extensions ts,tsx --exclude "\\.test\\.|__tests__" src/lib/game'
+  );
+  // Parse and re-serialize with readable formatting
+  const graph = JSON.parse(graphJson);
+
+  // Annotate with metadata for AI agents
+  const output = {
+    _meta: {
+      generated: new Date().toISOString(),
+      description:
+        'Import dependency graph for src/lib/game. Keys are files, values are arrays of files they import.',
+      usage:
+        'To find what a file affects, search for its path in the VALUES. To find what a file depends on, look at its KEY entry.',
+    },
+    graph,
+  };
+
+  fs.writeFileSync(GRAPH_OUT, JSON.stringify(output, null, 2));
+  const nodeCount = Object.keys(graph).length;
+  console.log(`✅ Dependency graph: ${nodeCount} modules → docs/dependency-graph.json`);
+} catch (err) {
+  console.error('Failed to generate dependency graph:', err.message);
+  process.exit(1);
+}
+
+// ── 2. Circular dependency report ─────────────────────────────────────────
+try {
+  let circularOutput = '';
+  try {
+    // madge exits with code 1 when circulars are found; capture stdout anyway
+    circularOutput = run(
+      'bunx madge --circular --extensions ts,tsx --exclude "\\.test\\.|__tests__" src/lib/game'
+    );
+  } catch (e) {
+    // exitCode 1 = circulars found; stdout contains the list
+    circularOutput = e.stdout || '';
+  }
+
+  const lines = circularOutput.trim().split('\n').filter(Boolean);
+  // madge circular output starts with "Found N circular dependencies!"
+  const circularLines = lines.filter(
+    (l) => !l.startsWith('Found') && !l.startsWith('✔') && l.trim()
+  );
+
+  let content;
+  if (circularLines.length === 0) {
+    content = `# Circular Dependencies\nGenerated: ${new Date().toISOString()}\n\nNo circular dependencies found. ✅\n`;
+    console.log('✅ No circular dependencies found');
+  } else {
+    content = [
+      `# Circular Dependencies`,
+      `Generated: ${new Date().toISOString()}`,
+      `Found: ${circularLines.length} circular chain(s) — these MUST be fixed before modifying involved files.`,
+      '',
+      ...circularLines.map((l, i) => `${i + 1}. ${l.trim()}`),
+      '',
+      '## How to fix',
+      '1. Identify which import in the chain can be extracted to a shared types/utils file.',
+      '2. Move the shared type or function there.',
+      '3. Both files import from the new shared module instead of each other.',
+      '4. Run: bunx madge --circular src/lib/game  (should return clean)',
+    ].join('\n');
+    console.warn(`⚠️  Found ${circularLines.length} circular dependency chain(s) — see docs/circular-deps.txt`);
+  }
+
+  fs.writeFileSync(CIRCULAR_OUT, content);
+} catch (err) {
+  console.error('Failed to check circular dependencies:', err.message);
+  // Non-fatal: write a note to the file and continue
+  fs.writeFileSync(CIRCULAR_OUT, `# Circular Dependencies\nError running check: ${err.message}\n`);
+}

.husky/scripts/generate-project-tree.js

@@ -1,6 +1,7 @@
+/* eslint-disable @typescript-eslint/no-require-imports */
 const fs = require('fs');
 const path = require('path');
-const { execSync } = require('child_process');
+const { execSync } = require('node:child_process');
 
 // Directory to start from (project root)
 const ROOT_DIR = process.cwd();
@@ -45,6 +46,14 @@ function generateTree(dir, prefix = '', isRoot = true) {
   items.forEach(item => {
     const itemPath = path.join(dir, item);
     
+    // Explicitly skip .git directory and husky internal directory
+    if (item === '.git' && dir === ROOT_DIR) {
+      return;
+    }
+    if (item === '_' && path.basename(dir) === '.husky') {
+      return;
+    }
+    
     // Skip if ignored by git
     if (isGitIgnored(itemPath)) {
       return;

3001

@@ -1,11 +0,0 @@
-⨯ Failed to start server
-Error: listen EADDRINUSE: address already in use :::3000
-    at <unknown> (Error: listen EADDRINUSE: address already in use :::3000)
-    at new Promise (<anonymous>) {
-  code: 'EADDRINUSE',
-  errno: -98,
-  syscall: 'listen',
-  address: '::',
-  port: 3000
-}
-[?25h

AGENTS.md

@@ -1,493 +1,96 @@
-# Mana Loop - Project Architecture Guide
+# Mana Loop — Agent Guide
 
-This document provides a comprehensive overview of the project architecture for AI agents working on this codebase.
+Browser incremental/idle game. Next.js 16 + Zustand, no backend.
 
----
+## 🔑 Git
 
-## 🔑 Git Credentials (SAVE THESE)
-
-**Repository:** `git@gitea.tailf367e3.ts.net:Anexim/Mana-Loop.git`
-
-**HTTPS URL with credentials:**
 ```
-https://zhipu:5LlnutmdsC2WirDwWgnZuRH7@gitea.tailf367e3.ts.net/Anexim/Mana-Loop.git
+https://n8n-gitea:tkF9HFgxL2k4cmT@gitea.tailf367e3.ts.net/Anexim/Mana-Loop.git
 ```
-
-**Credentials:**
-- **User:** zhipu
-- **Email:** zhipu@local.local
-- **Password:** 5LlnutmdsC2WirDwWgnZuRH7
-
-**To configure git:**
 ```bash
-git config --global user.name "zhipu"
-git config --global user.email "zhipu@local.local"
+git config --global user.name "n8n-gitea"
+git config --global user.email "n8n-gitea@anexim.local"
 ```
 
----
+## Workflow
 
-## ⚠️ MANDATORY GIT WORKFLOW - MUST BE FOLLOWED
-
-**Before starting ANY work, you MUST:**
-
-1. **Pull the latest changes:**
-   ```bash
-   cd /home/z/my-project && git pull origin master
-   ```
-
-2. **Do your task** - Make all necessary code changes
-
-3. **Before finishing, commit and push:**
-   ```bash
-   cd /home/z/my-project
-   git add -A
-   git commit -m "descriptive message about changes"
-   git push origin master
-   ```
-
-**This workflow is ENFORCED and NON-NEGOTIABLE.** Every agent session must:
-- Start with `git pull`
-- End with `git add`, `git commit`, `git push`
-
-**Git Remote:** `git@gitea.tailf367e3.ts.net:Anexim/Mana-Loop.git`
-
----
-
-## Project Overview
-
-**Mana Loop** is an incremental/idle game built with:
-- **Framework**: Next.js 16 with App Router
-- **Language**: TypeScript 5
-- **Styling**: Tailwind CSS 4 with shadcn/ui components
-- **State Management**: Zustand with persist middleware
-- **Database**: Prisma ORM with SQLite (for persistence features)
-
-## Core Game Loop
-
-1. **Mana Gathering**: Click or auto-generate mana over time
-2. **Studying**: Spend mana to learn skills and spells
-3. **Combat**: Climb the Spire, defeat guardians, sign pacts
-4. **Crafting**: Enchant equipment with spell effects
-5. **Prestige**: Reset progress for permanent bonuses (Insight)
-
-## Directory Structure
-
-```
-src/
-├── app/
-│   ├── page.tsx          # Main game UI (~548 lines, reduced via component extraction)
-│   ├── layout.tsx        # Root layout with providers
-│   └── api/              # API routes (minimal use)
-├── components/
-│   ├── ui/               # shadcn/ui components (auto-generated)
-│   └── game/
-│       ├── index.ts      # Barrel exports
-│       ├── ActionButtons.tsx    # Current action display with progress indicator
-│       ├── CalendarDisplay.tsx  # Day calendar with incursion indicators
-│       ├── CraftingProgress.tsx # Design/preparation/application progress bars
-│       ├── StudyProgress.tsx    # Current study progress with cancel button
-│       ├── ManaDisplay.tsx      # Mana/gathering section with progress bar
-│       ├── TimeDisplay.tsx      # Day/hour display with pause toggle
-│       └── tabs/                # Tab-specific components (Task 2: all tabs refactored)
-│           ├── index.ts         # Tab component exports
-│           ├── CraftingTab.tsx  # Enchantment crafting UI (~164 lines)
-│           ├── LabTab.tsx       # Skill upgrade and lab features
-│           ├── SpellsTab.tsx    # Spell management and equipment spells
-│           ├── SpireTab.tsx     # Combat with Spire Mode (~354 lines, Task 2 overhaul)
-│           ├── StatsTab.tsx     # Player statistics (~251 lines, Task 2: elements locked)
-│           ├── SkillsTab.tsx    # Skill tree display (~371 lines, Task 2: Ascension deleted)
-│           ├── EquipmentTab.tsx # Gear management (~435 lines)
-│           ├── DebugTab.tsx     # Debug tools (~34 lines, Task 2: added Pact buttons)
-│           └── LootTab.tsx      # Loot display (~48 lines, Task 2: Transference removed)
-└── lib/
-    ├── game/
-    │   ├── store.ts              # Zustand store (~2812 lines, main state + tick logic)
-    │   ├── crafting-slice.ts     # Equipment/enchantment logic (~1100 lines, from store.ts)
-    │   ├── computed-stats.ts     # Computed stats functions (~12 lines, simplified)
-    │   ├── navigation-slice.ts   # Floor navigation actions (~75 lines)
-    │   ├── study-slice.ts        # Study system actions (~210 lines)
-    │   ├── familiar-slice.ts     # Familiar system actions
-    │   ├── effects.ts            # Unified effect computation
-    │   ├── upgrade-effects.ts    # Skill upgrade effect definitions
-    │   ├── constants.ts          # Game definitions (spells, skills, etc.)
-    │   ├── skill-evolution.ts    # Skill tier progression paths (~3400 lines)
-    │   ├── types.ts              # TypeScript interfaces
-    │   ├── formatting.ts         # Display formatters
-    │   ├── utils.ts              # Utility functions
-    │   └── data/
-    │       ├── equipment.ts      # Equipment type definitions
-    │       └── enchantment-effects.ts  # Enchantment effect catalog
-    └── utils.ts                  # General utilities (cn function)
+```bash
+cd /home/user/repos/Mana-Loop && git pull origin master
+# ... work ...
+git add -A && git commit -m "type: desc" && git push origin master
 ```
 
-*Note: A complete, up-to-date project tree is automatically generated on each commit and saved to `docs/project-structure.txt`. This file is generated by the pre-commit hook using `.husky/scripts/generate-project-tree.js` and respects `.gitignore` rules.*
+## Session Start
 
-## Key Systems
+1. `docs/project-structure.txt`
+2. `docs/dependency-graph.json`
+3. `get_repo_summary` → resume in-progress or pick top todo
+4. `update_issue_status` → `ai:in-progress`
+5. Work, log with `add_comment`, then `update_issue_status` → `ai:done`
 
-### 0. Task 2 Completion Summary
+## Labels
 
-**Task 2 has been completed successfully (12/12 tasks done)!**
+`ai:todo` | `ai:in-progress` | `ai:review` | `ai:blocked` | `ai:done`
 
-Key changes made in Task 2:
-- **ActionButtons Rework**: Removed manual selection, auto-transition to Meditate after actions
-- **SpireTab Overhaul**: Added "Climb the Spire" button, implemented Spire Mode with exit condition
-- **Equipment System**: Added support for 2-Handed Weapons, Staves now block offhand slot
-- **Research Locking**: Prevent switching topics while study in progress
-- **DebugTab Update**: Added Invoker Debugging Buttons for Pacts
-- **Combat UI Fix**: Fixed Casting Bar progress animation
-- **Crafting Limits**: Disabled Prepare for non-enchanted items, limited Design to owned gear types
-- **System Integrity**: Fixed Show Component Names debug option for all components
-- **StatsTab**: Locked Fire/Water/Air/Earth at start, only Transference unlocked
-- **LootTab**: Removed Transference from essence list (not lootable)
-- **Ascension Skills**: Deleted all Ascension skills
-- **Mana Well Fix**: Fixed Deep Basin upgrade multiplier values
+## Terminal Tool
 
-**Context File Approach for Sub-Agents:**
-During Task 2, context files were created in `docs/` to guide sub-agents:
-- `update_agents_context.md` - Context for updating AGENTS.md
-- `update_game_briefing_context.md` - Context for updating GAME_BRIEFING.md  
-- `update_skills_context.md` - Context for updating skills.md
+Always pair `run_command` → `get_process_status` in same turn. Use `wait: 120` for long tasks.
 
-This approach proved effective for delegating documentation updates to sub-agents.
+## Sub-Agents
 
-### 1. State Management (`store.ts`)
+Use for 3+ sequential independent calls. Zero context from parent — paste everything needed.
 
-The game uses a Zustand store organized with **slice pattern** for better maintainability:
+## Architecture
 
-#### Store Slices
-- **Main Store** (`store.ts`): Core state, tick logic, and main actions (~2812 lines)
-- **Navigation Slice** (`navigation-slice.ts`): Floor navigation (setClimbDirection, changeFloor) (~75 lines)
-- **Study Slice** (`study-slice.ts`): Study system (startStudyingSkill, startStudyingSpell, cancelStudy) (~210 lines)
-- **Crafting Slice** (`crafting-slice.ts`): Equipment/enchantment (createEquipmentInstance, startDesigningEnchantment) (~1100 lines)
-- **Familiar Slice** (`familiar-slice.ts`): Familiar system (addFamiliar, removeFamiliar) - **NOTE: File does not currently exist**
+- **Stack:** Next.js 16, TS 5, Tailwind 4 + shadcn/ui, Zustand+persist, Vitest/Playwright, Bun
+- **Active stores:** `src/lib/game/stores/{game,mana,combat,prestige,discipline,ui}Store.ts`
+- **Legacy (migrating):** `src/lib/game/store/` and `store-modules/`
+- **Crafting:** 3-step flow — Design → Prepare → Apply via `crafting-actions/`
+- **Disciplines:** `data/disciplines/` + `stores/discipline-slice.ts` + `utils/discipline-math.ts`
+- **Effects:** All stat mods through `getUnifiedEffects()` — discipline bonuses enter via `computeDisciplineEffects()`
 
-#### Computed Stats (`computed-stats.ts`)
-Extracted utility functions for stat calculations:
-- `computeMaxMana()`, `computeRegen()`, `computeEffectiveRegen()`
-- `calcDamage()`, `calcInsight()`, `getElementalBonus()`
-- `getFloorMaxHP()`, `getFloorElement()`, `getMeditationBonus()`
-- `canAffordSpellCost()`, `deductSpellCost()`
+### Adding Effects
+1. `data/enchantment-effects.ts`
+2. `effects.ts` → `computeEquipmentEffects()`
+3. Access via `getUnifiedEffects(state)`
 
-```typescript
-interface GameState {
-  // Time
-  day: number;
-  hour: number;
-  paused: boolean;
+### Adding Disciplines
+1. Choose the correct data file under `data/disciplines/`:
+   - `base.ts` — available to all attunements
+   - `enchanter.ts` — requires Enchanter attunement
+   - `invoker.ts` — requires Invoker attunement
+   - `fabricator.ts` — requires Fabricator attunement
+2. Define a `DisciplineDefinition` (see `types/disciplines.ts`):
+   - `statBonus.stat` must match a key consumed by `computeDisciplineEffects()`
+   - Set `difficultyFactor` and `scalingFactor` to control growth rate
+   - Add perks (`once`, `capped`, or `infinite`)
+3. Re-export from `data/disciplines/index.ts` so it appears in `ALL_DISCIPLINES`
+4. Add any new `statBonus.stat` keys to `discipline-effects.ts` → `computeDisciplineEffects()`
 
-  // Mana
-  rawMana: number;
-  elements: Record<string, ElementState>;
-  
-  // Combat
-  currentFloor: number;
-  floorHP: number;
-  activeSpell: string;
-  castProgress: number;
-  
-  // Progression
-  skills: Record<string, number>;
-  spells: Record<string, SpellState>;
-  skillUpgrades: Record<string, string[]>;
-  skillTiers: Record<string, number>;
-  
-  // Equipment
-  equipmentInstances: Record<string, EquipmentInstance>;
-  equippedInstances: Record<string, string | null>;
-  enchantmentDesigns: EnchantmentDesign[];
-  
-  // Prestige
-  insight: number;
-  prestigeUpgrades: Record<string, number>;
-  signedPacts: number[];
-}
+### Discipline Math (quick reference)
 ```
-
-### 2. Effect System (`effects.ts`)
-
-**CRITICAL**: All stat modifications flow through the unified effect system.
-
-```typescript
-// Effects come from two sources:
-// 1. Skill Upgrades (milestone bonuses)
-// 2. Equipment Enchantments (crafted bonuses)
-
-getUnifiedEffects(state) => UnifiedEffects {
-  maxManaBonus, maxManaMultiplier,
-  regenBonus, regenMultiplier,
-  clickManaBonus, clickManaMultiplier,
-  baseDamageBonus, baseDamageMultiplier,
-  attackSpeedMultiplier,
-  critChanceBonus, critDamageMultiplier,
-  studySpeedMultiplier,
-  specials: Set<string>,  // Special effect IDs
-}
+StatBonus     = baseValue  × (XP / scalingFactor)^0.65
+ManaDrainPerTick = drainBase × (1 + (XP / difficultyFactor)^0.4)
 ```
+- XP accrues every tick the discipline is active and mana drain is met
+- `concurrentLimit` starts at 1 and expands by 1 per 500 total XP (max +3)
 
-**When adding new stats**:
-1. Add to `ComputedEffects` interface in `upgrade-effects.ts`
-2. Add mapping in `computeEquipmentEffects()` in `effects.ts`
-3. Apply in the relevant game logic (tick, damage calc, etc.)
+### Adding Spells
+1. `constants/spells.ts`
+2. `data/enchantment-effects.ts`
+3. `EFFECT_RESEARCH_MAPPING`
 
-### 3. Combat System
+## Banned
 
-Combat uses a **cast speed** system:
-- Each spell has `castSpeed` (casts per hour)
-- Cast progress accumulates: `progress += castSpeed * attackSpeedMultiplier * HOURS_PER_TICK`
-- When `progress >= 1`, spell is cast (cost deducted, damage dealt)
-- DPS = `damagePerCast * castsPerSecond`
+Lifesteal/healing, scroll crafting, ascension skills, LabTab, pause, mana types: `life`, `blood`, `wood`, `mental`, `force`
 
-Damage calculation order:
-1. Base spell damage
-2. Skill bonuses (combatTrain, arcaneFury, etc.)
-3. Upgrade effects (multipliers, bonuses)
-4. Special effects (Overpower, Berserker, etc.)
-5. Elemental modifiers (same element +25%, super effective +50%)
+## File Limit
 
-### 4. Crafting/Enchantment System
+400 lines max (pre-commit hook enforces).
 
-Three-stage process:
-1. **Design**: Select effects, takes time based on complexity
-2. **Prepare**: Pay mana to prepare equipment, takes time
-3. **Apply**: Apply design to equipment, costs mana per hour
+## Mana Types
 
-Equipment has **capacity** that limits total enchantment power.
-
-### 5. Skill Evolution System
-
-Skills have 5 tiers of evolution:
-- At level 5: Choose 2 of 4 milestone upgrades
-- At level 10: Choose 2 more upgrades, then tier up
-- Each tier multiplies the skill's base effect by 10x
-
-## Important Patterns
-
-### Adding a New Effect
-
-1. **Define in `enchantment-effects.ts`**:
-```typescript
-my_new_effect: {
-  id: 'my_new_effect',
-  name: 'Effect Name',
-  description: '+10% something',
-  category: 'combat',
-  baseCapacityCost: 30,
-  maxStacks: 3,
-  allowedEquipmentCategories: ['caster', 'hands'],
-  effect: { type: 'multiplier', stat: 'attackSpeed', value: 1.10 }
-}
-```
-
-2. **Add stat mapping in `effects.ts`** (if new stat):
-```typescript
-// In computeEquipmentEffects()
-if (effect.stat === 'myNewStat') {
-  bonuses.myNewStat = (bonuses.myNewStat || 0) + effect.value;
-}
-```
-
-3. **Apply in game logic**:
-```typescript
-const effects = getUnifiedEffects(state);
-damage *= effects.myNewStatMultiplier;
-```
-
-### Adding a New Skill
-
-1. **Define in `constants.ts` SKILLS_DEF**
-2. **Add evolution path in `skill-evolution.ts`**
-3. **Add prerequisite checks in `store.ts`**
-4. **Update UI in `page.tsx`**
-
-### Adding a New Spell
-
-1. **Define in `constants.ts` SPELLS_DEF**
-2. **Add spell enchantment in `enchantment-effects.ts`**
-3. **Add research skill in `constants.ts`**
-4. **Map research to effect in `EFFECT_RESEARCH_MAPPING`**
-
-## Git Hooks (Husky)
-
-This project uses **Husky** to manage git hooks for automated checks and agent assistance:
-
-### Pre-Commit Hook (`.husky/pre-commit`)
-Runs automatically before each commit:
-1. **File Size Check**: Ensures no staged file exceeds 400 lines (improves AI agent readability)
-2. **Project Structure Generation**: Updates `docs/project-structure.txt` with current tree (respects `.gitignore`)
-
-### Post-Merge Hook (`.husky/post-merge`)
-Runs after merging branches:
-- Checks if `package.json` or `package-lock.json` changed
-- Automatically runs `npm install` to sync dependencies
-
-### Implementation Files
-- Hook scripts: `.husky/` directory
-- File size check: `.husky/scripts/check-file-size.js`
-- Tree generator: `.husky/scripts/generate-project-tree.js`
-
----
-
-## Common Pitfalls
-
-1. **Forgetting to call `getUnifiedEffects()`**: Always use unified effects for stat calculations
-2. **Direct stat modification**: Never modify stats directly; use effect system
-3. **Missing tier multiplier**: Use `getTierMultiplier(skillId)` for tiered skills
-4. **Ignoring special effects**: Check `hasSpecial(effects, SPECIAL_EFFECTS.X)` for special abilities
-
-## Testing Guidelines
-
-- Run `bun run lint` after changes
-- Check dev server logs at `/home/z/my-project/dev.log`
-- Test with fresh game state (clear localStorage)
-
-## Slice Pattern for Store Organization
-
-The store uses a **slice pattern** to organize related actions into separate files. This improves maintainability and makes the codebase more modular.
-
-### Creating a New Slice
-
-1. **Create the slice file** (e.g., `my-feature-slice.ts`):
-```typescript
-// Define the actions interface
-export interface MyFeatureActions {
-  doSomething: (param: string) => void;
-  undoSomething: () => void;
-}
-
-// Create the slice factory
-export function createMyFeatureSlice(
-  set: StoreApi<GameStore>['setState'],
-  get: StoreApi<GameStore>['getState']
-): MyFeatureActions {
-  return {
-    doSomething: (param: string) => {
-      set((state) => {
-        // Update state
-      });
-    },
-    undoSomething: () => {
-      set((state) => {
-        // Update state
-      });
-    },
-  };
-}
-```
-
-2. **Add to main store** (`store.ts`):
-```typescript
-import { createMyFeatureSlice, MyFeatureActions } from './my-feature-slice';
-
-// Extend GameStore interface
-interface GameStore extends GameState, MyFeatureActions, /* other slices */ {}
-
-// Spread into store creation
-const useGameStore = create<GameStore>()(
-  persist(
-    (set, get) => ({
-      ...createMyFeatureSlice(set, get),
-      // other slices and state
-    }),
-    // persist config
-  )
-);
-```
-
-### Existing Slices
-
-| Slice | File | Lines | Purpose |
-|-------|------|-------|----------|
-| Navigation | `navigation-slice.ts` | ~75 | Floor navigation (setClimbDirection, changeFloor) |
-| Study | `study-slice.ts` | ~210 | Study system (startStudyingSkill, startStudyingSpell, cancelStudy) |
-| Crafting | `crafting-slice.ts` | ~1100 | Equipment/enchantment (createEquipmentInstance, startDesigningEnchantment) |
-| Familiar | `familiar-slice.ts` | N/A | Familiar system - **File not found in current codebase** |
-
-## File Size Guidelines
-
-### Current File Sizes (After Task 2)
-| File | Lines | Size (bytes) | Notes |
-|------|-------|--------------|-------|
-| `store.ts` | ~2812 | ~103KB | Core state + tick logic, crafting-slice extracted |
-| `page.tsx` | ~548 | ~22KB | Main UI (heavily reduced through component extraction) |
-| `crafting-slice.ts` | ~1100 | ~35KB | Equipment/enchantment logic (extracted from store.ts) |
-| `skill-evolution.ts` | ~3400 | ~120KB | Skill tier progression paths |
-| `study-slice.ts` | ~210 | ~8KB | Study system actions |
-| `navigation-slice.ts` | ~75 | ~3KB | Navigation actions |
-| `computed-stats.ts` | ~12 | ~1KB | Extracted utility functions (some moved to slices) |
-| `components/game/tabs/*.tsx` | ~3000 | ~95KB | Tab-specific components (SpireTab, CraftingTab, etc.) |
-
-### Guidelines
-- Keep `page.tsx` under 600 lines by extracting to components (ActionButtons, ManaDisplay, tabs, etc.)
-- Keep `store.ts` under 3000 lines by extracting to slices (navigation, study, crafting, familiar)
-- Extract computed stats and utility functions to appropriate slices or utils when >100 lines
-- Use barrel exports (`index.ts`) for clean imports
-- Follow the slice pattern for store organization (see below)
-- **After Task 2**: `page.tsx` reduced from ~2554 to ~548 lines (78% reduction)
-- **After Task 2**: `store.ts` increased due to crafting-slice integration, but better organized
-
-### Automated File Size Check
-A pre-commit hook automatically checks all staged files. Files exceeding **400 lines** will be rejected. The hook runs via Husky and uses `.husky/scripts/check-file-size.js`. If your file is too large, refactor it into smaller modules before committing.
-
----
-
-## 🚫 BANNED CONTENT - NEVER ADD THESE
-
-### Lifesteal and Healing are BANNED
-**DO NOT add lifesteal or healing mechanics to player abilities.**
-
-This includes:
-- `lifesteal` spell effects
-- `heal` or `regeneration` abilities for the player
-- Any mechanic that restores player HP or mana based on damage dealt
-- Life-stealing weapons or enchantments
-
-**Rationale**: The game's core design is that the player cannot take damage - only floors can. Healing/lifesteal mechanics are unnecessary and would create confusing gameplay.
-
-### Banned Mana Types
-The following mana types have been **removed** and should **never be re-added**:
-- `life` - Healing/lifesteal themed (banned)
-- `blood` - Life + Water compound (banned due to lifesteal theme)
-- `wood` - Life + Earth compound (banned due to life connection)
-- `mental` - Mind/psionic themed (removed for design consistency)
-- `force` - Telekinetic themed (removed for design consistency)
-
----
-
-## 🔮 Mana Types Overview
-
-### Base Mana Types (7)
-| Element | Symbol | Color | Theme |
-|---------|--------|-------|-------|
-| Fire | 🔥 | #FF6B35 | Destruction, burn damage |
-| Water | 💧 | #4ECDC4 | Flow, freeze effects |
-| Air | 🌬️ | #00D4FF | Speed, wind damage |
-| Earth | ⛰️ | #F4A261 | Stability, armor pierce |
-| Light | ☀️ | #FFD700 | Radiance, holy damage |
-| Dark | 🌑 | #9B59B6 | Shadows, void damage |
-| Death | 💀 | #778CA3 | Decay, rot damage |
-
-### Utility Mana Types (1)
-| Element | Symbol | Color | Theme |
-|---------|--------|-------|-------|
-| Transference | 🔗 | #1ABC9C | Mana transfer, Enchanter attunement |
-
-### Compound Mana Types (3)
-| Element | Recipe | Theme |
-|---------|--------|-------|
-| Metal | Fire + Earth | Armor piercing, forged weapons |
-| Sand | Earth + Water | AOE damage, desert winds |
-| Lightning | Fire + Air | Fast damage, armor pierce, chain effects |
-
-### Exotic Mana Types (3)
-| Element | Recipe | Theme |
-|---------|--------|-------|
-| Crystal | Sand + Sand + Light | Prismatic, high damage |
-| Stellar | Fire + Fire + Light | Cosmic, ultimate fire/light |
-| Void | Dark + Dark + Death | Oblivion, ultimate dark/death |
-
-### Mana Type Hierarchy
-```
-Base Elements (7) → Compound (3) → Exotic (3)
-                      ↓
-              Utility (1) ← Special attunement-based
-```
+**Base (7):** Fire 🔥 Water 💧 Air 🌬️ Earth ⛰️ Light ☀️ Dark 🌑 Death 💀  
+**Utility (1):** Transference 🔗  
+**Compound (3):** Fire+Earth=Metal, Earth+Water=Sand, Fire+Air=Lightning  
+**Exotic (3):** Sand+Sand+Light=Crystal, Fire+Fire+Light=Stellar, Dark+Dark+Death=Void

Dockerfile

@@ -1,66 +1,20 @@
-# Mana Loop - Next.js Game Docker Image
-
-FROM node:20-alpine AS builder
+FROM node:20-alpine AS base
 WORKDIR /app
-
-# Install dependencies
 RUN apk add --no-cache libc6-compat openssl
-
-# Install bun
 RUN npm install -g bun
-
-# Copy package files first for better caching
-COPY package.json bun.lockb* ./
-COPY prisma ./prisma/
-
 # Install dependencies
+COPY package.json bun.lock* bun.lockb* ./
 RUN bun install --frozen-lockfile
-
-# Copy the rest of the application
+# Copy source
 COPY . .
-
-# Set environment variables for build
-ENV NEXT_TELEMETRY_DISABLED=1
-ENV NODE_ENV=production
-ENV DATABASE_URL="file:./dev.db"
-
 # Generate Prisma client
-RUN bunx prisma generate --schema=./prisma/schema.prisma
-
 # Build the application
-RUN bun run build
-
-# Production image
-FROM node:20-alpine AS runner
-WORKDIR /app
-
-# Install openssl for Prisma
-RUN apk add --no-cache openssl
-
 ENV NODE_ENV=production
 ENV NEXT_TELEMETRY_DISABLED=1
-ENV DATABASE_URL="file:./data/dev.db"
-
-# Create data directory for SQLite
-RUN mkdir -p /app/data
-
-# Copy necessary files from builder
-COPY --from=builder /app/public ./public
-COPY --from=builder /app/.next/standalone ./
-COPY --from=builder /app/.next/static ./.next/static
-COPY --from=builder /app/prisma ./prisma
-COPY --from=builder /app/node_modules/.prisma ./node_modules/.prisma
-COPY --from=builder /app/node_modules/@prisma ./node_modules/@prisma
-
-# Expose port
+RUN bun run build
 EXPOSE 3000
-
 ENV PORT=3000
-ENV HOSTNAME="0.0.0.0"
-
-# Health check
-HEALTHCHECK --interval=30s --timeout=10s --start-period=5s --retries=3 \
+ENV HOSTNAME=0.0.0.0
+HEALTHCHECK --interval=30s --timeout=10s --start-period=60s --retries=3 \
   CMD wget --no-verbose --tries=1 --spider http://localhost:3000 || exit 1
-
-# Start the server (running as root)
-CMD ["node", "server.js"]
+CMD ["bun", "run", "start"]

bunfig.toml

@@ -0,0 +1,3 @@
+[test]
+dir = "./src/test"
+preload = ["./src/test/setup.ts"]

docs/circular-deps.txt

@@ -0,0 +1,14 @@
+# Circular Dependencies
+Generated: 2026-05-20T19:05:27.642Z
+Found: 4 circular chain(s) — these MUST be fixed before modifying involved files.
+
+1. Processed 126 files (1.3s) (3 warnings)
+2. 1) stores/gameStore.ts > stores/gameActions.ts
+3. 2) stores/gameStore.ts > stores/gameLoopActions.ts
+4. 3) stores/gameStore.ts > stores/tick-pipeline.ts
+
+## How to fix
+1. Identify which import in the chain can be extracted to a shared types/utils file.
+2. Move the shared type or function there.
+3. Both files import from the new shared module instead of each other.
+4. Run: bunx madge --circular src/lib/game  (should return clean)

docs/dependency-graph.json

@@ -0,0 +1,624 @@
+{
+  "_meta": {
+    "generated": "2026-05-20T19:05:26.102Z",
+    "description": "Import dependency graph for src/lib/game. Keys are files, values are arrays of files they import.",
+    "usage": "To find what a file affects, search for its path in the VALUES. To find what a file depends on, look at its KEY entry."
+  },
+  "graph": {
+    "constants.ts": [
+      "constants/index.ts"
+    ],
+    "constants/core.ts": [],
+    "constants/elements.ts": [
+      "types.ts"
+    ],
+    "constants/guardians.ts": [
+      "types.ts"
+    ],
+    "constants/index.ts": [
+      "constants/core.ts",
+      "constants/elements.ts",
+      "constants/guardians.ts",
+      "constants/prestige.ts",
+      "constants/rooms.ts",
+      "constants/spells.ts",
+      "types/game.ts"
+    ],
+    "constants/prestige.ts": [
+      "types.ts"
+    ],
+    "constants/rooms.ts": [
+      "types/game.ts"
+    ],
+    "constants/spells-modules/advanced-spells.ts": [
+      "constants/elements.ts",
+      "types.ts"
+    ],
+    "constants/spells-modules/aoe-spells.ts": [
+      "constants/elements.ts",
+      "types.ts"
+    ],
+    "constants/spells-modules/basic-elemental-spells.ts": [
+      "constants/elements.ts",
+      "types.ts"
+    ],
+    "constants/spells-modules/compound-spells.ts": [
+      "constants/elements.ts",
+      "types.ts"
+    ],
+    "constants/spells-modules/enchantment-spells.ts": [
+      "constants/elements.ts",
+      "types.ts"
+    ],
+    "constants/spells-modules/legendary-spells.ts": [
+      "constants/elements.ts",
+      "types.ts"
+    ],
+    "constants/spells-modules/lightning-spells.ts": [
+      "constants/elements.ts",
+      "types.ts"
+    ],
+    "constants/spells-modules/master-spells.ts": [
+      "constants/elements.ts",
+      "types.ts"
+    ],
+    "constants/spells-modules/raw-spells.ts": [
+      "constants/elements.ts",
+      "types.ts"
+    ],
+    "constants/spells-modules/utility-spells.ts": [
+      "constants/elements.ts",
+      "types.ts"
+    ],
+    "constants/spells.ts": [
+      "constants/spells-modules/advanced-spells.ts",
+      "constants/spells-modules/aoe-spells.ts",
+      "constants/spells-modules/basic-elemental-spells.ts",
+      "constants/spells-modules/compound-spells.ts",
+      "constants/spells-modules/enchantment-spells.ts",
+      "constants/spells-modules/legendary-spells.ts",
+      "constants/spells-modules/lightning-spells.ts",
+      "constants/spells-modules/master-spells.ts",
+      "constants/spells-modules/raw-spells.ts",
+      "constants/spells-modules/utility-spells.ts",
+      "types.ts"
+    ],
+    "crafting-actions/application-actions.ts": [
+      "crafting-apply.ts",
+      "stores/craftingStore.types.ts",
+      "types.ts"
+    ],
+    "crafting-actions/computed-getters.ts": [
+      "data/enchantment-effects.ts",
+      "stores/craftingStore.types.ts"
+    ],
+    "crafting-actions/crafting-equipment-actions.ts": [
+      "crafting-equipment.ts",
+      "stores/craftingStore.types.ts",
+      "types.ts"
+    ],
+    "crafting-actions/design-actions.ts": [
+      "crafting-design.ts",
+      "crafting-utils.ts",
+      "effects/special-effects.ts",
+      "effects/upgrade-effects.ts",
+      "stores/craftingStore.types.ts",
+      "types.ts"
+    ],
+    "crafting-actions/disenchant-actions.ts": [
+      "stores/craftingStore.types.ts"
+    ],
+    "crafting-actions/equipment-actions.ts": [
+      "crafting-utils.ts",
+      "stores/craftingStore.types.ts",
+      "types.ts"
+    ],
+    "crafting-actions/index.ts": [
+      "crafting-actions/application-actions.ts",
+      "crafting-actions/computed-getters.ts",
+      "crafting-actions/crafting-equipment-actions.ts",
+      "crafting-actions/design-actions.ts",
+      "crafting-actions/disenchant-actions.ts",
+      "crafting-actions/equipment-actions.ts",
+      "crafting-actions/preparation-actions.ts"
+    ],
+    "crafting-actions/preparation-actions.ts": [
+      "crafting-prep.ts",
+      "stores/craftingStore.types.ts"
+    ],
+    "crafting-apply.ts": [
+      "crafting-utils.ts",
+      "data/attunements.ts",
+      "data/enchantment-effects.ts",
+      "effects/special-effects.ts",
+      "effects/upgrade-effects.types.ts",
+      "types.ts"
+    ],
+    "crafting-attunements.ts": [
+      "data/attunements.ts",
+      "types.ts"
+    ],
+    "crafting-design.ts": [
+      "data/attunements.ts",
+      "data/enchantment-effects.ts",
+      "data/equipment/index.ts",
+      "effects/special-effects.ts",
+      "effects/upgrade-effects.types.ts",
+      "types.ts"
+    ],
+    "crafting-equipment.ts": [
+      "crafting-utils.ts",
+      "data/crafting-recipes.ts",
+      "data/equipment/index.ts",
+      "types.ts"
+    ],
+    "crafting-loot.ts": [
+      "data/crafting-recipes.ts",
+      "types.ts"
+    ],
+    "crafting-prep.ts": [
+      "crafting-utils.ts",
+      "types.ts"
+    ],
+    "crafting-utils.ts": [
+      "data/crafting-recipes.ts",
+      "data/equipment/index.ts",
+      "types.ts"
+    ],
+    "data/achievements.ts": [
+      "types.ts"
+    ],
+    "data/attunements.ts": [
+      "types.ts"
+    ],
+    "data/crafting-recipes.ts": [
+      "data/equipment/types.ts"
+    ],
+    "data/disciplines/base.ts": [
+      "types/disciplines.ts"
+    ],
+    "data/disciplines/enchanter.ts": [
+      "types/disciplines.ts"
+    ],
+    "data/disciplines/fabricator.ts": [
+      "types/disciplines.ts"
+    ],
+    "data/disciplines/index.ts": [
+      "data/disciplines/base.ts",
+      "data/disciplines/enchanter.ts",
+      "data/disciplines/fabricator.ts",
+      "data/disciplines/invoker.ts",
+      "types/disciplines.ts"
+    ],
+    "data/disciplines/invoker.ts": [
+      "types/disciplines.ts"
+    ],
+    "data/enchantment-effects.ts": [
+      "data/enchantments/index.ts"
+    ],
+    "data/enchantment-types.ts": [
+      "data/equipment/index.ts"
+    ],
+    "data/enchantments/combat-effects.ts": [
+      "data/enchantment-types.ts",
+      "data/equipment/index.ts"
+    ],
+    "data/enchantments/defense-effects.ts": [
+      "data/enchantment-types.ts",
+      "data/equipment/index.ts"
+    ],
+    "data/enchantments/elemental-effects.ts": [
+      "data/enchantment-types.ts",
+      "data/equipment/index.ts"
+    ],
+    "data/enchantments/index.ts": [
+      "data/enchantment-types.ts",
+      "data/enchantments/combat-effects.ts",
+      "data/enchantments/defense-effects.ts",
+      "data/enchantments/elemental-effects.ts",
+      "data/enchantments/mana-effects.ts",
+      "data/enchantments/special-effects.ts",
+      "data/enchantments/spell-effects/index.ts",
+      "data/enchantments/utility-effects.ts",
+      "data/equipment/index.ts"
+    ],
+    "data/enchantments/mana-effects.ts": [
+      "constants.ts",
+      "data/enchantment-types.ts",
+      "data/equipment/index.ts"
+    ],
+    "data/enchantments/special-effects.ts": [
+      "data/enchantment-types.ts",
+      "data/equipment/index.ts"
+    ],
+    "data/enchantments/spell-effects/basic-spells.ts": [
+      "data/enchantments/spell-effects/types.ts"
+    ],
+    "data/enchantments/spell-effects/index.ts": [
+      "data/enchantment-types.ts",
+      "data/enchantments/spell-effects/basic-spells.ts",
+      "data/enchantments/spell-effects/legendary-spells.ts",
+      "data/enchantments/spell-effects/lightning-spells.ts",
+      "data/enchantments/spell-effects/metal-spells.ts",
+      "data/enchantments/spell-effects/sand-spells.ts",
+      "data/enchantments/spell-effects/tier2-spells.ts",
+      "data/enchantments/spell-effects/tier3-spells.ts",
+      "data/enchantments/spell-effects/types.ts"
+    ],
+    "data/enchantments/spell-effects/legendary-spells.ts": [
+      "data/enchantments/spell-effects/types.ts"
+    ],
+    "data/enchantments/spell-effects/lightning-spells.ts": [
+      "data/enchantments/spell-effects/types.ts"
+    ],
+    "data/enchantments/spell-effects/metal-spells.ts": [
+      "data/enchantments/spell-effects/types.ts"
+    ],
+    "data/enchantments/spell-effects/sand-spells.ts": [
+      "data/enchantments/spell-effects/types.ts"
+    ],
+    "data/enchantments/spell-effects/tier2-spells.ts": [
+      "data/enchantments/spell-effects/types.ts"
+    ],
+    "data/enchantments/spell-effects/tier3-spells.ts": [
+      "data/enchantments/spell-effects/types.ts"
+    ],
+    "data/enchantments/spell-effects/types.ts": [
+      "data/enchantment-types.ts",
+      "data/equipment/index.ts"
+    ],
+    "data/enchantments/utility-effects.ts": [
+      "data/enchantment-types.ts",
+      "data/equipment/index.ts"
+    ],
+    "data/equipment/accessories.ts": [
+      "data/equipment/types.ts"
+    ],
+    "data/equipment/body.ts": [
+      "data/equipment/types.ts"
+    ],
+    "data/equipment/casters.ts": [
+      "data/equipment/types.ts"
+    ],
+    "data/equipment/catalysts.ts": [
+      "data/equipment/types.ts"
+    ],
+    "data/equipment/equipment-types-data.ts": [
+      "data/equipment/accessories.ts",
+      "data/equipment/body.ts",
+      "data/equipment/casters.ts",
+      "data/equipment/catalysts.ts",
+      "data/equipment/feet.ts",
+      "data/equipment/hands.ts",
+      "data/equipment/head.ts",
+      "data/equipment/shields.ts",
+      "data/equipment/swords.ts"
+    ],
+    "data/equipment/feet.ts": [
+      "data/equipment/types.ts"
+    ],
+    "data/equipment/hands.ts": [
+      "data/equipment/types.ts"
+    ],
+    "data/equipment/head.ts": [
+      "data/equipment/types.ts"
+    ],
+    "data/equipment/index.ts": [
+      "data/equipment/accessories.ts",
+      "data/equipment/body.ts",
+      "data/equipment/casters.ts",
+      "data/equipment/catalysts.ts",
+      "data/equipment/equipment-types-data.ts",
+      "data/equipment/feet.ts",
+      "data/equipment/hands.ts",
+      "data/equipment/head.ts",
+      "data/equipment/shields.ts",
+      "data/equipment/swords.ts",
+      "data/equipment/types.ts",
+      "data/equipment/utils.ts"
+    ],
+    "data/equipment/shields.ts": [
+      "data/equipment/types.ts"
+    ],
+    "data/equipment/swords.ts": [
+      "data/equipment/types.ts"
+    ],
+    "data/equipment/types.ts": [
+      "types/equipmentSlot.ts"
+    ],
+    "data/equipment/utils.ts": [
+      "data/equipment/equipment-types-data.ts",
+      "data/equipment/types.ts"
+    ],
+    "data/fabricator-recipes.ts": [
+      "data/equipment/types.ts"
+    ],
+    "data/golems/base-golems.ts": [
+      "data/golems/types.ts"
+    ],
+    "data/golems/elemental-golems.ts": [
+      "data/golems/types.ts"
+    ],
+    "data/golems/golems-data.ts": [
+      "data/golems/base-golems.ts",
+      "data/golems/elemental-golems.ts",
+      "data/golems/hybrid-golems.ts"
+    ],
+    "data/golems/hybrid-golems.ts": [
+      "data/golems/types.ts"
+    ],
+    "data/golems/index.ts": [
+      "data/golems/golems-data.ts",
+      "data/golems/types.ts",
+      "data/golems/utils.ts"
+    ],
+    "data/golems/types.ts": [],
+    "data/golems/utils.ts": [
+      "data/golems/golems-data.ts",
+      "data/golems/types.ts"
+    ],
+    "data/guardian-encounters.ts": [
+      "types.ts"
+    ],
+    "data/loot-drops.ts": [
+      "types.ts"
+    ],
+    "effects.ts": [
+      "data/enchantment-effects.ts",
+      "effects/discipline-effects.ts",
+      "effects/special-effects.ts",
+      "effects/upgrade-effects.ts",
+      "effects/upgrade-effects.types.ts",
+      "types.ts"
+    ],
+    "effects/discipline-effects.ts": [
+      "data/disciplines/index.ts",
+      "stores/discipline-slice.ts",
+      "types/disciplines.ts",
+      "utils/discipline-math.ts"
+    ],
+    "effects/dynamic-compute.ts": [
+      "effects/special-effects.ts",
+      "effects/upgrade-effects.types.ts"
+    ],
+    "effects/special-effects.ts": [
+      "effects/upgrade-effects.types.ts"
+    ],
+    "effects/upgrade-effects.ts": [
+      "effects/upgrade-effects.types.ts"
+    ],
+    "effects/upgrade-effects.types.ts": [],
+    "hooks/useGameDerived.ts": [
+      "constants.ts",
+      "effects/special-effects.ts",
+      "effects/upgrade-effects.ts",
+      "stores/combatStore.ts",
+      "stores/gameStore.ts",
+      "stores/manaStore.ts",
+      "stores/prestigeStore.ts",
+      "utils/index.ts",
+      "utils/pact-utils.ts"
+    ],
+    "stores/attunementStore.ts": [
+      "data/attunements.ts",
+      "types.ts"
+    ],
+    "stores/combat-actions.ts": [
+      "constants.ts",
+      "effects/discipline-effects.ts",
+      "stores/combat-state.types.ts",
+      "types.ts",
+      "utils/index.ts"
+    ],
+    "stores/combat-state.types.ts": [
+      "types.ts"
+    ],
+    "stores/combatStore.ts": [
+      "stores/combat-actions.ts",
+      "stores/combat-state.types.ts",
+      "stores/prestigeStore.ts",
+      "types.ts",
+      "utils/activity-log.ts",
+      "utils/index.ts",
+      "utils/room-utils.ts"
+    ],
+    "stores/craftingStore.ts": [
+      "crafting-actions/application-actions.ts",
+      "crafting-actions/preparation-actions.ts",
+      "crafting-design.ts",
+      "crafting-equipment.ts",
+      "crafting-utils.ts",
+      "stores/combatStore.ts",
+      "stores/craftingStore.types.ts",
+      "stores/manaStore.ts",
+      "stores/uiStore.ts",
+      "types.ts",
+      "types/equipmentSlot.ts"
+    ],
+    "stores/craftingStore.types.ts": [
+      "types.ts"
+    ],
+    "stores/discipline-slice.ts": [
+      "data/disciplines/base.ts",
+      "data/disciplines/enchanter.ts",
+      "data/disciplines/fabricator.ts",
+      "data/disciplines/invoker.ts",
+      "types/disciplines.ts",
+      "utils/discipline-math.ts"
+    ],
+    "stores/gameActions.ts": [
+      "effects/discipline-effects.ts",
+      "stores/combatStore.ts",
+      "stores/discipline-slice.ts",
+      "stores/gameStore.ts",
+      "stores/manaStore.ts",
+      "stores/prestigeStore.ts",
+      "stores/uiStore.ts",
+      "utils/index.ts"
+    ],
+    "stores/gameHooks.ts": [
+      "constants.ts",
+      "effects.ts",
+      "effects/discipline-effects.ts",
+      "stores/combatStore.ts",
+      "stores/craftingStore.ts",
+      "stores/discipline-slice.ts",
+      "stores/gameStore.ts",
+      "stores/manaStore.ts",
+      "stores/prestigeStore.ts",
+      "stores/uiStore.ts",
+      "utils/index.ts"
+    ],
+    "stores/gameLoopActions.ts": [
+      "constants.ts",
+      "effects/discipline-effects.ts",
+      "stores/combatStore.ts",
+      "stores/discipline-slice.ts",
+      "stores/gameStore.ts",
+      "stores/manaStore.ts",
+      "stores/prestigeStore.ts",
+      "stores/uiStore.ts",
+      "utils/index.ts"
+    ],
+    "stores/gameStore.ts": [
+      "constants.ts",
+      "data/attunements.ts",
+      "effects.ts",
+      "effects/discipline-effects.ts",
+      "effects/special-effects.ts",
+      "effects/upgrade-effects.types.ts",
+      "stores/attunementStore.ts",
+      "stores/combatStore.ts",
+      "stores/craftingStore.ts",
+      "stores/discipline-slice.ts",
+      "stores/gameActions.ts",
+      "stores/gameLoopActions.ts",
+      "stores/manaStore.ts",
+      "stores/prestigeStore.ts",
+      "stores/tick-pipeline.ts",
+      "stores/uiStore.ts",
+      "utils/index.ts"
+    ],
+    "stores/index.ts": [
+      "constants.ts",
+      "stores/attunementStore.ts",
+      "stores/combat-state.types.ts",
+      "stores/combatStore.ts",
+      "stores/craftingStore.ts",
+      "stores/craftingStore.types.ts",
+      "stores/discipline-slice.ts",
+      "stores/gameHooks.ts",
+      "stores/gameStore.ts",
+      "stores/manaStore.ts",
+      "stores/prestigeStore.ts",
+      "stores/uiStore.ts",
+      "utils/index.ts"
+    ],
+    "stores/manaStore.ts": [
+      "constants.ts",
+      "types.ts"
+    ],
+    "stores/prestigeStore.ts": [
+      "constants.ts",
+      "types.ts"
+    ],
+    "stores/tick-pipeline.ts": [
+      "stores/attunementStore.ts",
+      "stores/combat-state.types.ts",
+      "stores/craftingStore.types.ts",
+      "stores/discipline-slice.ts",
+      "stores/gameStore.ts",
+      "stores/manaStore.ts",
+      "stores/prestigeStore.ts",
+      "stores/uiStore.ts"
+    ],
+    "stores/uiStore.ts": [],
+    "types.ts": [
+      "data/equipment/types.ts",
+      "types/attunements.ts",
+      "types/elements.ts",
+      "types/equipment.ts",
+      "types/equipmentSlot.ts",
+      "types/game.ts",
+      "types/spells.ts"
+    ],
+    "types/attunements.ts": [],
+    "types/disciplines.ts": [
+      "types/elements.ts"
+    ],
+    "types/elements.ts": [],
+    "types/equipment.ts": [
+      "types/equipmentSlot.ts"
+    ],
+    "types/equipmentSlot.ts": [],
+    "types/game.ts": [
+      "types/attunements.ts",
+      "types/elements.ts",
+      "types/equipment.ts",
+      "types/spells.ts"
+    ],
+    "types/index.ts": [
+      "types/attunements.ts",
+      "types/elements.ts",
+      "types/equipment.ts",
+      "types/equipmentSlot.ts",
+      "types/game.ts",
+      "types/spells.ts"
+    ],
+    "types/spells.ts": [],
+    "utils/activity-log.ts": [
+      "types.ts"
+    ],
+    "utils/combat-utils.ts": [
+      "constants.ts",
+      "data/enchantment-effects.ts",
+      "types.ts",
+      "utils/mana-utils.ts"
+    ],
+    "utils/discipline-math.ts": [
+      "types/disciplines.ts"
+    ],
+    "utils/enemy-generator.ts": [
+      "types.ts",
+      "utils/enemy-utils.ts",
+      "utils/floor-utils.ts"
+    ],
+    "utils/enemy-utils.ts": [
+      "constants.ts",
+      "types.ts",
+      "utils/floor-utils.ts"
+    ],
+    "utils/floor-utils.ts": [
+      "constants.ts"
+    ],
+    "utils/formatting.ts": [],
+    "utils/index.ts": [
+      "utils/combat-utils.ts",
+      "utils/floor-utils.ts",
+      "utils/formatting.ts",
+      "utils/mana-utils.ts"
+    ],
+    "utils/mana-utils.ts": [
+      "constants.ts",
+      "data/attunements.ts",
+      "effects/upgrade-effects.types.ts",
+      "types.ts"
+    ],
+    "utils/pact-utils.ts": [
+      "constants.ts"
+    ],
+    "utils/room-utils.ts": [
+      "constants.ts",
+      "types.ts",
+      "utils/enemy-utils.ts",
+      "utils/floor-utils.ts"
+    ],
+    "utils/spire-utils.ts": [
+      "constants.ts",
+      "data/guardian-encounters.ts",
+      "types.ts",
+      "utils/enemy-utils.ts",
+      "utils/floor-utils.ts"
+    ]
+  }
+}

docs/skills.md

@@ -1,639 +0,0 @@
-# Mana Loop - Complete Skill System Documentation
-
-## Table of Contents
-1. [Overview](#overview)
-2. [Core Mechanics](#core-mechanics)
-3. [Skill Categories](#skill-categories)
-4. [All Skills Reference](#all-skills-reference)
-5. [Upgrade Trees](#upgrade-trees)
-6. [Tier System](#tier-system)
-7. [Banned Content](#banned-content)
-
----
-
-## Overview
-
-The skill system in Mana Loop provides deep character customization through a branching upgrade tree system. Skills are organized by attunement, with each attunement granting access to specific skill categories.
-
-### Skill Level Types
-
-| Max Level | Description | Example Skills |
-|-----------|-------------|----------------|
-| 10 | Standard skills with full upgrade trees | Mana Well, Mana Flow, Enchanting |
-| 5 | Specialized skills with limited upgrades | Efficient Enchant, Golem Mastery |
-| 3 | Focused skills with no upgrades | Knowledge Retention, Golem Longevity |
-| 1 | Effect research skills (unlock only) | All research skills |
-
----
-
-## Core Mechanics
-
-### Study System
-
-Leveling skills requires:
-1. **Mana cost** - Paid upfront to begin study
-2. **Study time** - Hours required to complete
-3. **Active studying** - Must be in "study" action mode
-
-#### Study Cost Formula
-```
-cost = baseCost × (currentLevel + 1) × tier × costMultiplier
-```
-
-#### Study Time Formula
-```
-time = baseStudyTime × tier / studySpeedMultiplier
-```
-
-### Milestone Upgrades
-
-At **levels 5 and 10**, you choose **1 upgrade** from an upgrade tree:
-- Each skill has its own unique upgrade tree
-- Trees have branching paths with prerequisites
-- Choices are permanent for that tier
-- Upgrades persist when tiering up
-
----
-
-## Skill Categories
-
-### Core Categories (No Attunement Required)
-
-| Category | Icon | Description |
-|----------|------|-------------|
-| Mana | 💧 | Mana pool and regeneration |
-| Study | 📚 | Learning speed and efficiency |
-| Research | 🔮 | Permanent bonuses |
-
-
-### Attunement Categories
-
-| Category | Icon | Attunement | Description | Status |
-|----------|------|------------|-------------|-------|
-| Enchanting | ✨ | Enchanter | Enchantment design and efficiency | ✅ Implemented (T1-T5) |
-| Effect Research | 🔬 | Enchanter | Unlock spell enchantments | ✅ Implemented (max:1) |
-| Invocation | 💜 | Invoker | Pact-based abilities | ✅ Implemented (T1-T5) |
-| Pact Mastery | 🤝 | Invoker | Guardian pact bonuses | ✅ Implemented (T1-T5) |
-| Fabrication | ⚒️ | Fabricator | Crafting and construction | ✅ Implemented (T1-T5) |
-| Golemancy | 🗿 | Fabricator | Golem summoning and control | ✅ Implemented (T1-T5) |
-| Hybrid Skills | 🔮 | Dual Attunement | Cross-attunement powers | ✅ Implemented (T1-T5) |
-
----
-
-## All Skills Reference
-
-### Mana Skills (Core)
-
-| Skill | Max | Effect | Base Cost | Study Time |
-|-------|-----|--------|-----------|------------|
-| Mana Well | 10 | +100 max mana/level | 100 | 4h |
-| Mana Flow | 10 | +1 regen/hour/level | 150 | 5h |
-| Elemental Attunement | 10 | +50 element cap/level | 200 | 4h |
-| Mana Overflow | 5 | +25% click mana/level | 400 | 6h |
-
-**Prerequisites:**
-- Mana Overflow: Mana Well 3
-
-### Study Skills (Core)
-
-| Skill | Max | Effect | Base Cost | Study Time |
-|-------|-----|--------|-----------|------------|
-| Quick Learner | 10 | +10% study speed/level | 250 | 4h |
-| Focused Mind | 10 | -5% study cost/level | 300 | 5h |
-| Meditation Focus | 1 | Up to 2.5x regen after 4hrs | 400 | 6h |
-| Knowledge Retention | 3 | +20% progress saved on cancel/level | 350 | 5h |
-
-### Research Skills (Core)
-
-| Skill | Max | Effect | Base Cost | Study Time |
-|-------|-----|--------|-----------|------------|
-| Mana Tap | 1 | +1 mana/click | 300 | 12h |
-| Mana Surge | 1 | +3 mana/click | 800 | 36h |
-| Mana Spring | 1 | +2 mana regen | 600 | 24h |
-| Deep Trance | 1 | 6hr meditation = 3x regen | 900 | 48h |
-| Void Meditation | 1 | 8hr meditation = 5x regen | 1500 | 72h |
-
-**Prerequisites:**
-- Mana Surge: Mana Tap 1
-- Deep Trance: Meditation 1
-- Void Meditation: Deep Trance 1
-
-### Enchanting Skills (Enchanter)
-
-| Skill | Max | Effect | Base Cost | Study Time | Attunement Req |
-|-------|-----|--------|-----------|------------|----------------|
-| Enchanting | 10 | Unlocks enchantment design | 200 | 5h | Enchanter 1 |
-| Efficient Enchant | 5 | -5% capacity cost/level | 350 | 6h | Enchanter 2 |
-| Disenchanting | 3 | +20% mana recovery/level | 400 | 6h | Enchanter 1 |
-| Enchant Speed | 5 | -10% enchant time/level | 300 | 4h | Enchanter 1 |
-| Essence Refining | 1 | +10% effect power | 450 | 7h | Enchanter 2 |
-
-**Prerequisites:**
-- Efficient Enchant: Enchanting 3
-- Disenchanting: Enchanting 2
-- Enchant Speed: Enchanting 2
-- Essence Refining: Enchanting 4
-
-### Golemancy Skills (Fabricator)
-
-| Skill | Max | Effect | Base Cost | Study Time | Attunement Req |
-|-------|-----|--------|-----------|------------|----------------|
-| Golem Mastery | 5 | +10% golem damage/level | 300 | 6h | Fabricator 2 |
-| Golem Efficiency | 5 | +5% attack speed/level | 350 | 6h | Fabricator 2 |
-| Golem Longevity | 3 | +1 floor duration/level | 500 | 8h | Fabricator 3 |
-| Golem Siphon | 3 | -10% maintenance/level | 400 | 8h | Fabricator 3 |
-| Advanced Golemancy | 1 | Unlock hybrid recipes | 800 | 16h | Fabricator 5 |
-| Golem Resonance | 1 | +1 golem slot | 1200 | 24h | Fabricator 8 |
-
-**Prerequisites:**
-- Advanced Golemancy: Golem Mastery 3
-- Golem Resonance: Golem Mastery 5
-
----
-
-## Hybrid Skills
-
-Hybrid Skills require two attunements and combine their powers into advanced abilities.
-
-### Pact-Weaving (Invoker + Enchanter)
-
-**Requirement:** Invoker 3 + Enchanter 3  
-**Max Level:** 5 (with Elite Perk at Level 5)
-
-**Paths:**
-- **Path A: The Weaver** - Enhanced enchantment power through pact bonuses
-- **Path B: The Warp** - Unpredictable magic blending pacts and enchantments  
-- **Path C: The World-Weaver** - Ultimate hybrid combining all powers
-
-**5-Tier Talent Tree:**
-
-| Tier | Level | Effect |
-|------|-------|--------|
-| 1 | 1-2 | +10% enchantment power when pact active |
-| 2 | 3-4 | +25% enchantment power when pact active |
-| 3 | 5-6 | Pact boons apply to enchanted equipment |
-| 4 | 7-8 | +50% enchantment power when pact active |
-| 5 | 9-10 | Elite Perk: Choose one |
-
-**Elite Perks (Choose at Tier 5 Level 10):**
-- **Eternal Weave:** Enchantments persist through loops
-- **Pactbound Power:** All pact multipliers doubled for enchanted items
-- **Weaver's Boon:** 25% chance to double enchantment effect
-
-**Level 5 Upgrade Choices:**
-- +50% enchantment power when pact active
-- Pact boons apply to all equipment slots
-- 10% chance to trigger pact effect on enchant
-
-**Level 10 Upgrade Choices:**
-- Elite Perk (choose one from above)
-- +100% enchantment power when pact active
-- All pacts active simultaneously
-
----
-
-### Guardian Constructs (Fabricator + Invoker)
-
-**Requirement:** Fabricator 3 + Invoker 3  
-**Max Level:** 5 (with Elite Perk at Level 5)
-
-**Paths:**
-- **Path A: The Architect** - Durable constructs with enhanced defenses
-- **Path B: The Monumentalist** - Massive single construct with supreme power
-- **Path C: The Eternal** - Constructs that never expire
-
-**Special Rules:**
-- Only **1 active at a time** (replaces golems)
-- **More durable** than golems (2x HP, 1.5x duration)
-- Uses both Earth and Pact mana for summoning
-
-**5-Tier Talent Tree:**
-
-| Tier | Level | Effect |
-|------|-------|--------|
-| 1 | 1-2 | +25% construct HP |
-| 2 | 3-4 | Construct lasts +2 floors |
-| 3 | 5-6 | Construct gains pact bonuses |
-| 4 | 7-8 | +50% construct damage |
-| 5 | 9-10 | Elite Perk: Choose one |
-
-**Elite Perks (Choose at Tier 5 Level 10):**
-- **Living Monument:** Construct HP +500%, never expires
-- **Guardian's Might:** Construct gains all pact multipliers
-- **Architect's Dream:** Can have 2 constructs (reduces HP by 50% each)
-
-**Level 5 Upgrade Choices:**
-- +50% construct HP
-- Construct immune to floor effects
-- +25% construct damage
-
-**Level 10 Upgrade Choices:**
-- Elite Perk (choose one from above)
-- Construct gains 100% of your pact multipliers
-- +500% construct HP
-
----
-
-### Enchanted Golemancy (Fabricator + Enchanter)
-
-**Requirement:** Fabricator 3 + Enchanter 3  
-**Max Level:** 5 (with Elite Perk at Level 5)
-
-**Paths:**
-- **Path A: The Battle-Smith** - Combat-focused enchanted golems
-- **Path B: The Enchanter-Smith** - Golems with powerful enchantments
-- **Path C: The Spell-Smith** - Golems that cast elemental spells
-
-**Special Rules:**
-- Imbues golems with **elemental spell logic**
-- Golems gain spell abilities from enchantments
-- Combines golem durability with spell power
-
-**5-Tier Talent Tree:**
-
-| Tier | Level | Effect |
-|------|-------|--------|
-| 1 | 1-2 | Golems gain 1 spell slot |
-| 2 | 3-4 | +25% golem spell damage |
-| 3 | 5-6 | Golems gain 2 spell slots |
-| 4 | 7-8 | +50% golem spell damage |
-| 5 | 9-10 | Elite Perk: Choose one |
-
-**Elite Perks (Choose at Tier 5 Level 10):**
-- **Arcane Golem:** Golems cast spells at 3x speed
-- **Elemental Master:** Golem spells gain +100% elemental bonus
-- **Living Spellforge:** Golems create temporary enchantments
-
-**Level 5 Upgrade Choices:**
-- +50% golem spell damage
-- Golems gain 3 spell slots
-- Golem spells gain pact bonuses
-
-**Level 10 Upgrade Choices:**
-- Elite Perk (choose one from above)
-- Golem spells deal +200% damage
-- Golems permanently enchanted
-
----
-
-### Effect Research Skills (Enchanter)
-
-All effect research skills are **max level 1** and unlock specific enchantment effects.
-
-#### Tier 1 Research (Basic Spells)
-| Skill | Unlocks | Study Time |
-|-------|---------|------------|
-| Mana Spell Research | Mana Strike enchantment | 4h |
-| Fire Spell Research | Ember Shot, Fireball | 6h |
-| Water Spell Research | Water Jet, Ice Shard | 6h |
-| Air Spell Research | Gust, Wind Slash | 6h |
-| Earth Spell Research | Stone Bullet, Rock Spike | 6h |
-| Light Spell Research | Light Lance, Radiance | 8h |
-| Dark Spell Research | Shadow Bolt, Dark Pulse | 8h |
-| Death Research | Drain enchantment | 8h |
-
-#### Tier 2 Research (Advanced Spells)
-Requires Enchanter 3+ and parent element research.
-
-| Skill | Unlocks | Study Time |
-|-------|---------|------------|
-| Advanced Fire Research | Inferno, Flame Wave | 12h |
-| Advanced Water Research | Tidal Wave, Ice Storm | 12h |
-| Advanced Air Research | Hurricane, Wind Blade | 12h |
-| Advanced Earth Research | Earthquake, Stone Barrage | 12h |
-| Advanced Light Research | Solar Flare, Divine Smite | 14h |
-| Advanced Dark Research | Void Rift, Shadow Storm | 14h |
-
-#### Tier 3 Research (Master Spells)
-Requires Enchanter 5+ and advanced research.
-
-| Skill | Unlocks | Study Time |
-|-------|---------|------------|
-| Master Fire Research | Pyroclasm | 24h |
-| Master Water Research | Tsunami | 24h |
-| Master Earth Research | Meteor Strike | 26h |
-
-#### Compound Element Research
-Requires parent element research + Enchanter 3+.
-
-| Skill | Unlocks | Study Time |
-|-------|---------|------------|
-| Metal Spell Research | Metal Shard, Iron Fist | 6h |
-| Sand Spell Research | Sand Blast, Sandstorm | 6h |
-| Lightning Spell Research | Spark, Lightning Bolt | 6h |
-| Advanced Metal Research | Steel Tempest | 12h |
-| Advanced Sand Research | Desert Wind | 12h |
-| Advanced Lightning Research | Chain Lightning, Storm Call | 12h |
-| Master Metal Research | Furnace Blast | 26h |
-| Master Sand Research | Dune Collapse | 26h |
-| Master Lightning Research | Thunder Strike | 26h |
-
-#### Utility Research
-
-| Skill | Unlocks | Study Time |
-|-------|---------|------------|
-| Transference Spell Research | Transfer Strike, Mana Rip | 5h |
-| Advanced Transference Research | Essence Drain | 12h |
-| Master Transference Research | Soul Transfer | 26h |
-
-#### Effect Research
-
-| Skill | Unlocks | Study Time |
-|-------|---------|------------|
-| Damage Effect Research | Minor/Moderate Power, Amplification | 5h |
-| Combat Effect Research | Sharp Edge, Swift Casting | 6h |
-| Mana Effect Research | Mana Reserve, Trickle, Mana Tap | 4h |
-| Advanced Mana Research | Mana Reservoir, Stream, River | 8h |
-| Utility Effect Research | Meditative Focus, Quick Study | 6h |
-| Special Effect Research | Echo Chamber, Siphoning, Bane | 10h |
-| Overpower Research | Overpower effect | 12h |
-
----
-
-## Upgrade Trees
-
-### Mana Well Upgrade Tree
-
-#### Tier 1 Upgrades
-
-**Level 5 Choices:**
-```
-├── Expanded Capacity (+25% max mana)
-│   └── Level 10: Deep Reservoir (+50% max mana) [replaces]
-│
-├── Natural Spring (+0.5 regen/hour)
-│   └── Level 10: Flowing Spring (+1.5 regen) [replaces]
-│
-├── Mana Threshold (+30% max mana, -10% regen)
-│   └── Level 10: Mana Conversion (5% max → click bonus)
-│
-└── Desperate Wells (+50% regen when below 25% mana)
-    └── Level 10: Panic Reserve (+100% regen below 10%)
-```
-
-**Level 10 Additional Choices:**
-- Mana Echo (10% chance double mana from clicks)
-- Emergency Reserve (Keep 10% mana on loop reset)
-- Deep Wellspring (+50% meditation efficiency)
-
-#### Tier 2 Upgrades (Deep Reservoir)
-- Abyssal Depth (+50% max mana)
-- Ancient Well (+500 starting mana per loop)
-- Mana Condense (+1% max per 1000 gathered)
-- Deep Reserve (+0.5 regen per 100 max mana)
-- Ocean of Mana (+1000 max mana)
-- Mana Tide (Regen pulses ±50%)
-- Void Storage (Store 150% max temporarily)
-- Mana Core (0.5% max mana as regen)
-
----
-
-### Mana Flow Upgrade Tree
-
-#### Tier 1 Upgrades
-
-**Level 5 Choices:**
-```
-├── Rapid Flow (+25% regen speed)
-│   └── Level 10: Mana Torrent (+50% regen above 75% mana)
-│
-├── Steady Stream (Immune to incursion penalty)
-│   └── Level 10: Eternal Flow (Immune to all penalties)
-│
-├── Mana Cascade (+0.1 regen per 100 max mana)
-│   └── Level 10: Mana Waterfall (+0.25 per 100 max) [replaces]
-│
-└── Mana Overflow (Raw mana can exceed max by 20%)
-```
-
-**Level 10 Additional Choices:**
-- Ambient Absorption (+1 permanent regen)
-- Flow Surge (Clicks boost regen for 1 hour)
-- Flow Mastery (+10% mana from all sources)
-
----
-
-### Elemental Attunement Upgrade Tree
-
-#### Tier 1 Upgrades
-
-**Level 5 Choices:**
-```
-├── Expanded Attunement (+25% element cap)
-│   └── Level 10: Element Master (+50% element cap) [replaces]
-│
-├── Elemental Surge (+15% elemental spell damage)
-│   └── Level 10: Elemental Power (+30% damage) [replaces]
-│
-└── Elemental Affinity (New elements start with 10 capacity)
-```
-
-**Level 10 Additional Choices:**
-- Elemental Resonance (Spell use restores element)
-- Exotic Mastery (+20% exotic element damage)
-
----
-
-### Quick Learner Upgrade Tree
-
-#### Tier 1 Upgrades
-
-**Level 5 Choices:**
-```
-├── Deep Focus (+25% study speed)
-│   └── Level 10: Deep Concentration (+50% speed) [replaces]
-│
-├── Quick Grasp (5% chance double study progress)
-│   └── Level 10: Knowledge Echo (15% instant complete)
-│
-├── Parallel Study (Study 2 things at 50% speed each)
-│
-└── Quick Mastery (-20% time for final 3 levels)
-```
-
-**Level 10 Additional Choices:**
-- Study Momentum (+5% speed per hour, max 50%)
-- Knowledge Transfer (New skills start at 10% progress)
-
----
-
-### Focused Mind Upgrade Tree
-
-#### Tier 1 Upgrades
-
-**Level 5 Choices:**
-```
-├── Mind Efficiency (+25% cost reduction)
-│   └── Level 10: Efficient Learning (-15% study cost) [replaces]
-│
-├── Mental Clarity (+10% speed when mana > 75%)
-│   └── Level 10: Study Rush (First hour 2x speed)
-│
-└── Study Refund (25% mana back on completion)
-    └── Level 10: Deep Understanding (+10% skill bonuses)
-```
-
-**Level 10 Additional Choices:**
-- Chain Study (-5% cost per maxed skill)
-
----
-
-### Enchanting Upgrade Tree
-
-#### Tier 1 Upgrades
-
-**Level 5 Choices:**
-```
-├── Enchantment Capacity (+20% equipment capacity)
-├── Swift Enchanting (-15% design time)
-│
-└── Quality Control (+10% effect power)
-    └── Level 10: Perfect Refinement (+25% power) [replaces]
-```
-
-**Level 10 Additional Choices:**
-- Enchantment Mastery (2 designs in progress)
-- Mana Preservation (25% chance free enchant)
-
----
-
-### Golem Mastery Upgrade Tree
-
-#### Tier 1 Upgrades
-
-**Level 5 Choices:**
-```
-├── Golem Power (+25% golem damage)
-├── Golem Durability (+1 floor duration)
-│
-└── Efficient Summons (-20% summon cost)
-    └── Level 10: Golem Siphon (-30% maintenance)
-```
-
-**Level 10 Additional Choices:**
-- Golem Fury (+50% attack speed for first 2 floors)
-- Golem Resonance (Golems share 10% damage)
-
----
-
-### Other Skill Upgrade Trees
-
-#### Mana Overflow (Max 5)
-- **Level 5:** Click Surge (+50% click mana above 90% mana)
-- **Tier 2 Level 5:** Mana Flood (+75% click mana above 75% mana)
-
-#### Efficient Enchant (Max 5)
-- **Level 5:** Thrifty Enchanter (+10% free enchant chance)
-- **Tier 2 Level 5:** Optimized Enchanting (+25% free chance)
-
-#### Enchant Speed (Max 5)
-- **Level 5:** Hasty Enchanter (+25% speed for repeat designs)
-- **Tier 2 Level 5:** Instant Designs (10% instant completion)
-
-#### Essence Refining (Max 1)
-- Research skill (max level 1, no upgrades)
-
-#### Efficient Crafting (Max 5)
-- **Level 5:** Batch Crafting (2 items at 75% speed each)
-- **Tier 2 Level 5:** Mass Production (3 items at full speed)
-
-#### Field Repair (Max 5)
-- **Level 5:** Scavenge (Recover 10% materials from broken items)
-- **Tier 2 Level 5:** Reclaim (Recover 25% materials)
-
-#### Golem Efficiency (Max 5)
-- **Level 5:** Rapid Strikes (+25% speed for first 3 floors)
-- **Tier 2 Level 5:** Blitz Attack (+50% speed for first 5 floors)
-
----
-
-## Tier System
-
-### How Tiers Work
-
-1. **Reach max level** (10 for most skills, 5 for specialized)
-2. **Meet attunement requirements**
-3. **Tier up** - Skill resets to level 1 with 10x power multiplier
-
-### Tier Power Scaling
-
-| Tier | Multiplier | Level 1 Power = |
-|------|------------|-----------------|
-| 1 | 1x | Base |
-| 2 | 10x | Tier 1 Level 10 |
-| 3 | 100x | Tier 2 Level 10 |
-| 4 | 1000x | Tier 3 Level 10 |
-| 5 | 10000x | Tier 4 Level 10 |
-
-### Tier Up Requirements
-
-#### Core Skills (Mana, Study)
-| Tier | Requirement |
-|------|-------------|
-| 1→2 | Any attunement level 3 |
-| 2→3 | Any attunement level 5 |
-| 3→4 | Any attunement level 7 |
-| 4→5 | Any attunement level 10 |
-
-#### Enchanter Skills
-| Tier | Requirement |
-|------|-------------|
-| 1→2 | Enchanter level 3 |
-| 2→3 | Enchanter level 5 |
-| 3→4 | Enchanter level 7 |
-| 4→5 | Enchanter level 10 |
-
-#### Fabricator Skills (Golemancy)
-| Tier | Requirement |
-|------|-------------|
-| 1→2 | Fabricator level 3 |
-| 2→3 | Fabricator level 5 |
-| 3→4 | Fabricator level 7 |
-| 4→5 | Fabricator level 10 |
-
----
-
-## Banned Content
-
-The following effects/mechanics are **NOT allowed** in skill upgrades:
-
-| Banned Effect | Reason |
-|---------------|--------|
-| Lifesteal | Player cannot take damage |
-| Healing (for player) | Player cannot take damage |
-| Life/Blood/Wood/Mental/Force mana | Removed elements |
-| Execution effects | Bypasses gameplay mechanics |
-| Instant finishing | Skips mechanics |
-| Direct spell damage bonuses | Spells only via weapons |
-| Familiar system | Replaced by golemancy |
-
-### Design Philosophy
-
-1. **Player cannot take damage** - Only floors/enemies have HP
-2. **No healing needed** - Player health doesn't exist
-3. **Weapons matter** - Player attacks through enchanted weapons
-4. **Golems fight** - Fabricator's constructs do the combat
-5. **Enchantments empower** - Enchanter enhances equipment
-6. **Pacts grant power** - Invoker makes deals with guardians
-
----
-
-## Example Progression
-
-### Mana Well Complete Journey
-
-1. **Level 1-4:** +400 max mana (100 per level)
-2. **Level 5:** Choose "Expanded Capacity" (+25% max)
-   - Total: 500 base + 125 bonus = 625 max mana
-3. **Level 6-9:** +400 more max mana
-4. **Level 10:** Choose "Deep Reservoir" (replaces to +50%)
-   - Total: 1000 base + 500 bonus = 1500 max mana
-5. **Tier Up to Tier 2:** Mana Well becomes "Deep Reservoir"
-6. **Tier 2 Level 1:** 100 × 10 = 1000 base (same as T1 L10)
-7. **Tier 2 Level 5:** Choose "Abyssal Depth" (+50% max)
-8. **Continue progression...**
-
-### Total Power at Tier 2 Level 5:
-- Base: 500 × 10 = 5000 max mana
-- Upgrades: +50% from Tier 1 +50% from Tier 2 = +100%
-- Total: 5000 × 2 = **10,000 max mana**

docs/task5.md

@@ -1,71 +0,0 @@
-# Task 5 — Bug Fixes, UI Restructuring & Feature Additions Progress
-
-## Status Overview
-- **Start Date**: 2025-05-19
-- **Current Phase**: PRIORITY 3 (UI/UX Restructuring)
-- **Overall Progress**: 42% complete (8/19 tasks done)
-
----
-
-## PRIORITY 0 — Crashes (Fix First, Parallel) ✅ COMPLETED
-| Task | Status | Notes |
-|------|--------|-------|
-| SpellsTab crash diagnosis/fix | Completed | Fixed unprotected ENCHANTMENT_EFFECTS access |
-| LabTab crash diagnosis/fix | Completed | Added safe access to store.elements |
-| DebugTab crash diagnosis/fix | Completed | Moved Toaster/GameToaster inside DebugProvider |
-
----
-
-## PRIORITY 1 — Mana Conversion Mechanic Fix ✅ COMPLETED
-| Task | Status | Notes |
-|------|--------|-------|
-| Wire conversion drain to effectiveRegen | Completed | Removed redundant rawMana -= actualConversion |
-
----
-
-## PRIORITY 2 — Spire Mode Fixes
-| Task | Status | Notes |
-|------|--------|-------|
-| 2a. Floor Rendering & Identity | Pending | Context gathering next |
-| 2b. Swarm Floors | ✅ Completed | Verified by check sub-agent |
-| 2c. HP Bar Live Updates | ✅ Completed | floorHP synced to enemy HP |
-| 2d. Casting Progress Overflow | Pending | Context gathering next |
-| 2e. Climb/Descend Controls | Pending | Context gathering next |
-| 2f. Activity Log Implementation | Pending | Context gathering next |
-| 2g. Spell Info Display Fix | Pending | Context gathering next |
-
----
-
-## PRIORITY 3 — UI/UX Restructuring
-| Task | Status | Notes |
-|------|--------|-------|
-| 3a. CraftingTab Restructure | ✅ Completed | Removed stepper, added Fabricate/Enchant tabs |
-| 3b. LootTab Nesting Fix | ✅ Completed | Removed redundant LootTab wrapper |
-| 3c. AchievementsTab Nesting Fix | In Progress | Context gathering → execution |
-
----
-
-## PRIORITY 4 — Enchantment Effects & Research
-| Task | Status | Notes |
-|------|--------|-------|
-| 4a. Mana-Type Capacity Enchantment Effects | Pending | Context gathering next |
-| 4b. Mana Capacity Research Visibility Gate | Pending | Context gathering next |
-| 4c. Skill Requirement Display Bug Fix | Pending | Context gathering next |
-| 4d. Enchantment Power Effect Implementation | Pending | Partially done |
-
----
-
-## PRIORITY 5 — Insight Upgrade Analysis
-| Task | Status | Notes |
-|------|--------|-------|
-| 5a. Create design proposal | Pending | Context gathering next |
-
----
-
-## Workflow Log
-- ✅ PRIORITY 0 crashes fixed via parallel sub-agents
-- ✅ PRIORITY 1 mana conversion fix applied
-- ✅ PRIORITY 2b, 2c verified completed
-- ✅ Task 12 (CraftingTab) completed
-- ✅ Task 13 (LootTab) completed
-- ⏳ Current: Task 14 (AchievementsTab) context gathering

docs/task5/subtask_12_context.md

@@ -1,451 +0,0 @@
-# Task 12 Context: Restructure CraftingTab
-
-## Task Description
-Restructure CraftingTab (remove 1-4 progress bar, split Fabricate/Enchant, top sub-tabs) (PRIORITY 3a)
-
-## Source Files
-
-### 1. `/src/components/game/tabs/CraftingTab.tsx` (268 lines)
-
-**Imports and Dependencies:**
-```typescript
-'use client';
-
-import { useState } from 'react';
-import { Button } from '@/components/ui/button';
-import { Progress } from '@/components/ui/progress';
-import { GameCard } from '@/components/ui/game-card';
-import { SectionHeader } from '@/components/ui/section-header';
-import { ActionButton } from '@/components/ui/action-button';
-import { Stepper } from '@/components/ui/stepper';
-import { Scroll, Hammer, Sparkles, Anvil } from 'lucide-react';
-import type { EquipmentInstance, EnchantmentDesign, DesignEffect, AppliedEnchantment, LootInventory, EquipmentCraftingProgress } from '@/lib/game/types';
-import { fmt, type GameStore } from '@/lib/game/store';
-import {
-  EnchantmentDesigner,
-  EnchantmentPreparer,
-  EnchantmentApplier,
-  EquipmentCrafter,
-} from '@/components/game/crafting';
-import { useGameToast } from '@/components/game/GameToast';
-```
-
-**Crafting Phases Constant:**
-```typescript
-// Crafting phases for the stepper
-const CRAFTING_PHASES = ['Design', 'Prepare', 'Apply', 'Craft'];
-```
-
-**Component Props:**
-```typescript
-export interface CraftingTabProps {
-  store: GameStore;
-}
-```
-
-**State and Stepper Mapping:**
-```typescript
-export function CraftingTab({ store }: CraftingTabProps) {
-  const showToast = useGameToast();
-  const currentAction = store.currentAction;
-  const designProgress = store.designProgress;
-  const preparationProgress = store.preparationProgress;
-  const applicationProgress = store.applicationProgress;
-  const equipmentCraftingProgress = store.equipmentCraftingProgress;
-  const pauseApplication = store.pauseApplication;
-  const resumeApplication = store.resumeApplication;
-
-  const [craftingStage, setCraftingStage] = useState<'design' | 'prepare' | 'apply' | 'craft'>('craft');
-
-  // Map crafting stage to stepper index
-  const getStepperIndex = (stage: string): number => {
-    switch (stage) {
-      case 'design': return 0;
-      case 'prepare': return 1;
-      case 'apply': return 2;
-      case 'craft': return 3;
-      default: return 0;
-    }
-  };
-```
-
-**Stepper Component (lines 58-68):**
-```tsx
-{/* Visual Stepper - Requirement: show Design, Prepare, Apply phases as visual stepper */}
-<GameCard variant="default" className="p-4">
-  <Stepper
-    steps={CRAFTING_PHASES}
-    currentStep={getStepperIndex(craftingStage)}
-    className="px-4"
-  />
-</GameCard>
-```
-
-**Stage Content Conditional Rendering (lines 71-97):**
-```tsx
-{/* Stage Content - Without unlabeled Tabs, using conditional rendering instead */}
-<div className="mt-4">
-  {craftingStage === 'craft' && (
-    <EquipmentCrafter store={store} />
-  )}
-  {craftingStage === 'design' && (
-    <EnchantmentDesigner
-      store={store}
-      selectedEquipmentType={null}
-      setSelectedEquipmentType={() => {}}
-      selectedEffects={[]}
-      setSelectedEffects={() => {}}
-      designName={''}
-      setDesignName={() => {}}
-      selectedDesign={null}
-      setSelectedDesign={() => {}}
-    />
-  )}
-  {craftingStage === 'prepare' && (
-    <EnchantmentPreparer
-      store={store}
-      selectedEquipmentInstance={null}
-      setSelectedEquipmentInstance={() => {}}
-    />
-  )}
-  {craftingStage === 'apply' && (
-    <EnchantmentApplier
-      store={store}
-      selectedEquipmentInstance={null}
-      setSelectedEquipmentInstance={() => {}}
-      selectedDesign={null}
-      setSelectedDesign={() => {}}
-      onEnchantmentApplied={handleEnchantmentApplied}
-      onCapacityExceeded={handleCapacityExceeded}
-    />
-  )}
-</div>
-```
-
-**Stage Navigation Buttons (lines 99-131):**
-```tsx
-{/* Stage Navigation Buttons */}
-<GameCard variant="default" className="p-4">
-  <div className="flex justify-center gap-2 flex-wrap">
-    <ActionButton
-      variant={craftingStage === 'craft' ? 'primary' : 'secondary'}
-      size="sm"
-      onClick={() => setCraftingStage('craft')}
-      className={craftingStage === 'craft' ? 'ring-2 ring-[var(--interactive-primary)]' : ''}
-    >
-      <Anvil size={14} className="mr-1" />
-      Craft
-    </ActionButton>
-    <ActionButton
-      variant={craftingStage === 'design' ? 'primary' : 'secondary'}
-      size="sm"
-      onClick={() => setCraftingStage('design')}
-      className={craftingStage === 'design' ? 'ring-2 ring-[var(--interactive-primary)]' : ''}
-    >
-      <Scroll size={14} className="mr-1" />
-      Design
-    </ActionButton>
-    <ActionButton
-      variant={craftingStage === 'prepare' ? 'primary' : 'secondary'}
-      size="sm"
-      onClick={() => setCraftingStage('prepare')}
-      className={craftingStage === 'prepare' ? 'ring-2 ring-[var(--interactive-primary)]' : ''}
-    >
-      <Hammer size={14} className="mr-1" />
-      Prepare
-    </ActionButton>
-    <ActionButton
-      variant={craftingStage === 'apply' ? 'primary' : 'secondary'}
-      size="sm"
-      onClick={() => setCraftingStage('apply')}
-      className={craftingStage === 'apply' ? 'ring-2 ring-[var(--interactive-primary)]' : ''}
-    >
-      <Sparkles size={14} className="mr-1" />
-      Apply
-    </ActionButton>
-  </div>
-</GameCard>
-```
-
-**Current Activity Indicators (Progress Bars to be removed - lines 133-236):**
-```tsx
-{/* Current Activity Indicator */}
-{currentAction === 'craft' && equipmentCraftingProgress && (
-  <GameCard variant="default" className="border-[var(--mana-water)]/60 bg-[var(--mana-water)]/10">
-    <SectionHeader
-      title="Crafting Equipment"
-      action={
-        <span className="text-sm text-[var(--text-muted)]">
-          {safeToFixed(calcPercent(equipmentCraftingProgress.progress, equipmentCraftingProgress.required), 0)}%
-        </span>
-      }
-    />
-    <Progress
-      value={calcPercent(equipmentCraftingProgress.progress, equipmentCraftingProgress.required)}
-      className="h-3 bg-[var(--bg-sunken)]"
-    />
-    {/* ... more content ... */}
-  </GameCard>
-)}
-
-{currentAction === 'design' && designProgress && (
-  <GameCard variant="default" className="border-[var(--mana-stellar)]/60 bg-[var(--mana-stellar)]/10">
-    {/* ... Progress bar and content ... */}
-  </GameCard>
-)}
-
-{currentAction === 'prepare' && preparationProgress && (
-  <GameCard variant="default" className="border-[var(--color-warning)]/60 bg-[var(--color-warning)]/10">
-    {/* ... Progress bar and content ... */}
-  </GameCard>
-)}
-
-{currentAction === 'enchant' && applicationProgress && (
-  <GameCard variant="default" className="border-[var(--mana-light)]/60 bg-[var(--mana-light)]/10">
-    {/* ... Progress bar and content ... */}
-  </GameCard>
-)}
-```
-
----
-
-### 2. Files in `/src/components/game/crafting/` Directory
-
-| File | Size | Last Modified |
-|------|------|---------------|
-| `EnchantmentApplier.tsx` | 12,206 bytes | 1777364523 |
-| `EnchantmentDesigner.tsx` | 19,568 bytes | 1777361558 |
-| `EnchantmentPreparer.tsx` | 14,816 bytes | 1777365343 |
-| `EquipmentCrafter.tsx` | 9,121 bytes | 1777205526 |
-| `index.tsx` | 396 bytes | 1777028644 |
-
-**Barrel File (`index.tsx`):**
-```typescript
-// Barrel file for crafting components
-
-export { EnchantmentDesigner, type EnchantmentDesignerProps } from './EnchantmentDesigner';
-export { EnchantmentPreparer, type EnchantmentPreparerProps } from './EnchantmentPreparer';
-export { EnchantmentApplier, type EnchantmentApplierProps } from './EnchantmentApplier';
-export { EquipmentCrafter, type EquipmentCrafterProps } from './EquipmentCrafter';
-```
-
----
-
-### 3. Stepper Component (`/src/components/ui/stepper.tsx`)
-
-**Interface:**
-```typescript
-interface StepperProps extends React.HTMLAttributes<HTMLDivElement> {
-  steps: string[];
-  currentStep: number; // 0-indexed
-  orientation?: "horizontal" | "vertical";
-}
-```
-
-**Full Implementation (100 lines):**
-```typescript
-import * as React from "react";
-import { cn } from "@/lib/utils";
-import { Check, Circle, ArrowRight } from "lucide-react";
-
-interface StepperProps extends React.HTMLAttributes<HTMLDivElement> {
-  steps: string[];
-  currentStep: number; // 0-indexed
-  orientation?: "horizontal" | "vertical";
-}
-
-interface StepProps {
-  label: string;
-  stepNumber: number;
-  isActive: boolean;
-  isCompleted: boolean;
-  isLast: boolean;
-  orientation?: "horizontal" | "vertical";
-}
-
-const Step = ({ label, stepNumber, isActive, isCompleted, isLast, orientation = "horizontal" }: StepProps) => {
-  return (
-    <div
-      className={cn(
-        "flex items-center",
-        orientation === "vertical" ? "flex-col" : "flex-row",
-        orientation === "vertical" && "w-full"
-      )}
-    >
-      <div className="flex flex-col items-center">
-        <div
-          className={cn(
-            "flex items-center justify-center w-8 h-8 rounded-full border-2 transition-all duration-200",
-            isActive && "border-[var(--interactive-primary)] bg-[var(--interactive-primary)]/20 text-[var(--interactive-primary)]",
-            isCompleted && "border-[var(--color-success)] bg-[var(--color-success)]/20 text-[var(--color-success)]",
-            !isActive && !isCompleted && "border-[var(--border-default)] bg-[var(--bg-sunken)] text-[var(--text-muted)]"
-          )}
-          aria-current={isActive ? "step" : undefined}
-        >
-          {isCompleted ? (
-            <Check size={16} />
-          ) : (
-            <span className="text-xs font-semibold">{stepNumber}</span>
-          )}
-        </div>
-        <span
-          className={cn(
-            "text-xs mt-1 font-medium",
-            isActive && "text-[var(--interactive-primary)]",
-            isCompleted && "text-[var(--color-success)]",
-            !isActive && !isCompleted && "text-[var(--text-muted)]"
-          )}
-        >
-          {label}
-        </span>
-      </div>
-      {!isLast && (
-        <div
-          className={cn(
-            "flex-1 mx-2",
-            orientation === "vertical" ? "h-8 w-px my-1" : "h-px",
-            isCompleted ? "bg-[var(--color-success)]" : "bg-[var(--border-default)]"
-          )}
-        />
-      )}
-    </div>
-  );
-};
-
-export function Stepper({ steps, currentStep, orientation = "horizontal", className, ...props }: StepperProps) {
-  return (
-    <div
-      data-slot="stepper"
-      className={cn(
-        "flex w-full",
-        orientation === "horizontal" ? "flex-row items-center" : "flex-col",
-        className
-      )}
-      role="list"
-      aria-label="Progress steps"
-      {...props}
-    >
-      {steps.map((step, index) => (
-        <div
-          key={step}
-          className={cn("flex items-center", orientation === "vertical" && "w-full")}
-          role="listitem"
-        >
-          <Step
-            label={step}
-            stepNumber={index + 1}
-            isActive={index === currentStep}
-            isCompleted={index < currentStep}
-            isLast={index === steps.length - 1}
-            orientation={orientation}
-          />
-        </div>
-      ))}
-    </div>
-  );
-}
-```
-
----
-
-### 4. Current Sub-Tab/Navigation Implementation Details
-
-**Current Structure:**
-The CraftingTab currently uses a **4-stage linear workflow** with:
-1. A visual Stepper component showing phases: Design → Prepare → Apply → Craft
-2. Navigation buttons at the bottom to switch between stages
-3. Conditional rendering of content based on `craftingStage` state
-
-**Current Stages:**
-- `design` - EnchantmentDesigner component (Design enchantments)
-- `prepare` - EnchantmentPreparer component (Prepare equipment)
-- `apply` - EnchantmentApplier component (Apply enchantments)
-- `craft` - EquipmentCrafter component (Craft equipment)
-
-**Issues to Address (Task Requirements):**
-1. **Remove 1-4 progress bar** - The Stepper component (lines 58-68) needs to be removed
-2. **Split Fabricate/Enchant** - Currently "Craft" (EquipmentCrafter) is mixed in with enchantment workflow. Need to split into:
-   - "Fabricate" tab - for EquipmentCrafter (crafting equipment)
-   - "Enchant" tab - for the Design → Prepare → Apply workflow
-3. **Top sub-tabs** - Replace the bottom navigation buttons with proper top-level sub-tabs
-
-**Current Navigation Pattern:**
-- State: `craftingStage` (useState with 4 possible values)
-- Navigation: 4 ActionButtons at the bottom of the tab
-- Visual indicator: Stepper at the top showing progress through phases
-
-**Suggested New Structure (for implementation):**
-```
-CraftingTab
-├── Top Sub-Tabs: [Fabricate] [Enchant]
-├── Fabricate Content: EquipmentCrafter
-└── Enchant Content:
-    ├── Sub-Navigation: [Design] [Prepare] [Apply]
-    ├── Design: EnchantmentDesigner
-    ├── Prepare: EnchantmentPreparer
-    └── Apply: EnchantmentApplier
-```
-
----
-
-### 5. Component Props Signatures
-
-**EquipmentCrafterProps:**
-```typescript
-export interface EquipmentCrafterProps {
-  store: GameStore;
-}
-```
-
-**EnchantmentDesignerProps:**
-```typescript
-export interface EnchantmentDesignerProps {
-  store: GameStore;
-  selectedEquipmentType: string | null;
-  setSelectedEquipmentType: (type: string | null) => void;
-  selectedEffects: DesignEffect[];
-  setSelectedEffects: (effects: DesignEffect[]) => void;
-  designName: string;
-  setDesignName: (name: string) => void;
-  selectedDesign: string | null;
-  setSelectedDesign: (id: string | null) => void;
-}
-```
-
-**EnchantmentPreparerProps:**
-```typescript
-export interface EnchantmentPreparerProps {
-  store: GameStore;
-  selectedEquipmentInstance: string | null;
-  setSelectedEquipmentInstance: (id: string | null) => void;
-}
-```
-
-**EnchantmentApplierProps:**
-```typescript
-export interface EnchantmentApplierProps {
-  store: GameStore;
-  selectedEquipmentInstance: string | null;
-  setSelectedEquipmentInstance: (id: string | null) => void;
-  selectedDesign: string | null;
-  setSelectedDesign: (id: string | null) => void;
-  onEnchantmentApplied?: () => void;
-  onCapacityExceeded?: (itemName: string, used: number, total: number) => void;
-}
-```
-
----
-
-### 6. Key Observations for Restructuring
-
-1. **Stepper Removal**: The `CRAFTING_PHASES` constant and `Stepper` component usage must be removed from CraftingTab
-
-2. **State Management**: The `craftingStage` state will need to be replaced with:
-   - A top-level tab state (`fabricate` | `enchant`)
-   - An enchant sub-stage state (`design` | `prepare` | `apply`) when in enchant mode
-
-3. **Progress Bars**: The activity indicators with Progress components (lines 133-236) should potentially be moved into their respective components (EquipmentCrafter, EnchantmentDesigner, etc.) rather than being in CraftingTab
-
-4. **No Tab Component**: Currently, the app doesn't use a Tab component - it uses conditional rendering with ActionButtons. The restructured version should implement proper tabs at the top level
-
-5. **Helper Functions**: The `safeToFixed` and `calcPercent` helpers are used for progress bars - these may no longer be needed in CraftingTab after restructuring

docs/task5/subtask_13_context.md

@@ -1,282 +0,0 @@
-# Task 13 Context: Fix LootTab Nesting (Remove Redundant Layers)
-
-## Task Description
-Fix LootTab nesting (remove redundant layers) (PRIORITY 3b)
-
-## Source Files
-
-### 1. `/src/components/game/tabs/LootTab.tsx` (48 lines)
-
-**Full Content:**
-```typescript
-'use client';
-
-import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
-import { Badge } from '@/components/ui/badge';
-import type { GameStore } from '@/lib/game/store';
-import { LootInventoryDisplay } from '@/components/game/LootInventory';
-
-export interface LootTabProps {
-  store: GameStore;
-}
-
-export function LootTab({ store }: LootTabProps) {
-  const inventory = store.lootInventory;
-  const elements = store.elements;
-  const equipmentInstances = store.equipmentInstances;
-  
-  // Count items for badge
-  const materialCount = Object.values(inventory.materials).reduce((a, b) => a + b, 0);
-  const blueprintCount = inventory.blueprints.length;
-  const equipmentCount = Object.keys(equipmentInstances).length;
-  const totalItems = materialCount + blueprintCount + equipmentCount;
-  
-  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">
-            💎 Loot Inventory
-            <Badge className="ml-auto bg-gray-800 text-gray-300">
-              {totalItems} items
-            </Badge>
-          </CardTitle>
-        </CardHeader>
-        <CardContent>
-          <LootInventoryDisplay
-            inventory={inventory}
-            elements={elements}
-            equipmentInstances={equipmentInstances}
-            onDeleteMaterial={store.deleteMaterial}
-            onDeleteEquipment={store.deleteEquipmentInstance}
-          />
-        </CardContent>
-      </Card>
-    </div>
-  );
-}
-
-LootTab.displayName = "LootTab";
-```
-
-**Key Observations - LootTab Redundant Wrapper:**
-- Uses `Card` component from `@/components/ui/card` with header "💎 Loot Inventory"
-- Shows a badge with total items count
-- Wraps `LootInventoryDisplay` inside `CardContent`
-- **This creates the outer layer of nesting**
-
----
-
-### 2. `/src/components/game/LootInventory.tsx` (499 lines)
-
-**Component Interface:**
-```typescript
-interface LootInventoryProps {
-  inventory: LootInventoryType;
-  elements?: Record<string, ElementState>;
-  equipmentInstances?: Record<string, EquipmentInstance>;
-  onDeleteMaterial?: (materialId: string, amount: number) => void;
-  onDeleteEquipment?: (instanceId: string) => void;
-}
-```
-
-**Main Component Export:**
-```typescript
-export function LootInventoryDisplay({ 
-  inventory, 
-  elements,
-  equipmentInstances = {},
-  onDeleteMaterial,
-  onDeleteEquipment,
-}: LootInventoryProps) {
-  // ... state and handlers ...
-  
-  // Check if we have anything to show
-  const hasItems = totalItems > 0 || essenceCount > 0;
-
-  if (!hasItems) {
-    return (
-      <GameCard variant="default" className="w-full">
-        <div className="flex items-center gap-2 mb-2">
-          <Gem className="w-4 h-4 text-[var(--mana-light)]" />
-          <h3 className="text-[var(--mana-light)] game-panel-title text-xs uppercase tracking-wider">
-            Inventory
-          </h3>
-        </div>
-        <div className="text-[var(--text-muted)] text-sm text-center py-4">
-          No items collected yet. Defeat floors and guardians to find loot!
-        </div>
-      </GameCard>
-    );
-  }
-  
-  // ... handlers ...
-  
-  return (
-    <>
-      <GameCard variant="default" className="w-full">
-        <div className="flex items-center gap-2 mb-3">
-          <Gem className="w-4 h-4 text-[var(--mana-light)]" />
-          <h3 className="text-[var(--mana-light)] game-panel-title text-xs uppercase tracking-wider">
-            Inventory
-          </h3>
-          <Badge 
-            className="ml-auto bg-[var(--bg-sunken)] text-[var(--text-secondary)] text-xs border-[var(--border-subtle)]"
-            aria-label={`${totalItems} items in inventory`}
-          >
-            {totalItems} items
-          </Badge>
-        </div>
-        
-        {/* Search and Filter Controls */}
-        {/* ... */}
-        
-        {/* Filter Tabs */}
-        {/* ... */}
-        
-        <Separator className="bg-[var(--border-subtle)] mb-3" />
-        
-        <ScrollArea className="h-64 w-full">
-          {/* Materials, Essence, Blueprints, Equipment sections */}
-          {/* ... */}
-        </ScrollArea>
-      </GameCard>
-      
-      {/* Delete Confirmation Dialog */}
-      <AlertDialog open={!!deleteConfirm} onOpenChange={() => setDeleteConfirm(null)}>
-        {/* ... */}
-      </AlertDialog>
-    </>
-  );
-}
-```
-
-**Key Observations - LootInventory Redundant Wrapper:**
-- Uses `GameCard` component (from `@/components/ui/game-card`)
-- Has its own header with "Inventory" title and `Gem` icon
-- Shows a badge with total items count (duplicating LootTab's badge)
-- Contains all the actual content: search, filters, items display
-- **This creates the inner layer of nesting**
-
----
-
-## 3. Duplicate Headings/Wrappers Issue
-
-### Redundant Card Nesting:
-```
-LootTab (Outer Card)
-├── CardHeader: "💎 Loot Inventory" + Badge: "{totalItems} items"
-└── CardContent
-    └── LootInventoryDisplay (Inner GameCard)
-        ├── Header: "Inventory" + Badge: "{totalItems} items"  ← DUPLICATE
-        ├── Search/Filter Controls
-        ├── Items Display
-        └── Delete Dialog
-```
-
-### Specific Code Duplication:
-
-**LootTab.tsx (lines 24-33) - Outer Header:**
-```tsx
-<CardHeader className="pb-2">
-  <CardTitle className="text-amber-400 text-sm flex items-center gap-2">
-    💎 Loot Inventory
-    <Badge className="ml-auto bg-gray-800 text-gray-300">
-      {totalItems} items
-    </Badge>
-  </CardTitle>
-</CardHeader>
-```
-
-**LootInventory.tsx (lines 191-202) - Inner Header (DUPLICATE):**
-```tsx
-<div className="flex items-center gap-2 mb-3">
-  <Gem className="w-4 h-4 text-[var(--mana-light)]" />
-  <h3 className="text-[var(--mana-light)] game-panel-title text-xs uppercase tracking-wider">
-    Inventory
-  </h3>
-  <Badge 
-    className="ml-auto bg-[var(--bg-sunken)] text-[var(--text-secondary)] text-xs border-[var(--border-subtle)]"
-    aria-label={`${totalItems} items in inventory`}
-  >
-    {totalItems} items
-  </Badge>
-</div>
-```
-
-### Redundant Badge Count:
-- LootTab shows: `{totalItems} items` 
-- LootInventoryDisplay also shows: `{totalItems} items`
-- Both calculate the same `totalItems` value
-
----
-
-## 4. Current Component Hierarchy
-
-```
-Game.tsx / Main Game Layout
-    │
-    └── Tabs Component (renders active tab)
-            │
-            └── LootTab ({ store })
-                    │
-                    ├── Card (bg-gray-900/80 border-gray-700)
-                    │   ├── CardHeader
-                    │   │   └── CardTitle: "💎 Loot Inventory" + Badge
-                    │   └── CardContent
-                    │       │
-                    │       └── LootInventoryDisplay ({ inventory, elements, equipmentInstances, ... })
-                    │               │
-                    │               ├── GameCard (variant="default" className="w-full")
-                    │               │   ├── Header: "Inventory" + Badge + Search/Filter
-                    │               │   ├── Separator
-                    │               │   ├── ScrollArea
-                    │               │   │   ├── Materials Section
-                    │               │   │   ├── Essence Section
-                    │               │   │   ├── Blueprints Section
-                    │               │   │   └── Equipment Section
-                    │               │   └── (content)
-                    │               │
-                    │               └── AlertDialog (Delete Confirmation)
-                    │
-                    └── (end Card)
-```
-
----
-
-## 5. Comparison with Other Tabs
-
-Looking at other tabs in `/src/components/game/tabs/`:
-
-- **EquipmentTab.tsx**: Uses `GameCard` directly without an outer `Card` wrapper
-- **CraftingTab.tsx**: Uses multiple `GameCard` components for different sections, no outer `Card`
-- **GolemancyTab.tsx**: Uses `GameCard` directly
-- **LabTab.tsx**: Uses `GameCard` directly
-
-**Pattern**: Most tabs render their content directly using `GameCard` components without an additional `Card` wrapper from the tab itself.
-
----
-
-## 6. Summary of Issues to Fix
-
-1. **Redundant Card Wrapper in LootTab**: The `Card` + `CardHeader` + `CardContent` wrapper in LootTab.tsx is unnecessary since LootInventoryDisplay already provides its own `GameCard` wrapper.
-
-2. **Duplicate Header**: Both LootTab and LootInventoryDisplay show similar headers with:
-   - Title text ("Loot Inventory" vs "Inventory")
-   - Item count badge
-   - Icon (emoji 💎 vs Gem icon)
-
-3. **Double Wrapping**: Content is wrapped in two card-like components:
-   - Outer: `Card` from `@/components/ui/card`
-   - Inner: `GameCard` from `@/components/ui/game-card`
-
-4. **Solution Direction**: Remove the outer `Card` wrapper from LootTab.tsx and let LootInventoryDisplay handle the card styling, OR remove the inner `GameCard` from LootInventoryDisplay and keep only the outer wrapper.
-
----
-
-## 7. Files That Would Need Modification
-
-1. **`/src/components/game/tabs/LootTab.tsx`** - Remove outer Card wrapper, pass props directly to LootInventoryDisplay
-2. **`/src/components/game/LootInventory.tsx`** - Potentially remove GameCard wrapper if keeping LootTab's Card, or keep as-is if removing LootTab's Card
-
-**Recommended Approach**: Remove the outer `Card` wrapper from `LootTab.tsx` and let `LootInventoryDisplay` handle the full display (since it already has a complete GameCard wrapper with header, controls, and content).

download/README.md

@@ -1 +0,0 @@
-Here are all the generated files.

examples/websocket/frontend.tsx

@@ -1,196 +0,0 @@
-'use client';
-
-import { useEffect, useState } from 'react';
-import { io } from 'socket.io-client';
-import { Button } from '@/components/ui/button';
-import { Input } from '@/components/ui/input';
-import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
-import { ScrollArea } from '@/components/ui/scroll-area';
-
-type User = {
-  id: string;
-  username: string;
-}
-
-type Message = {
-  id: string;
-  username: string;
-  content: string;
-  timestamp: Date | string;
-  type: 'user' | 'system';
-}
-
-export default function SocketDemo() {
-  const [messages, setMessages] = useState<Message[]>([]);
-  const [inputMessage, setInputMessage] = useState('');
-  const [username, setUsername] = useState('');
-  const [isUsernameSet, setIsUsernameSet] = useState(false);
-  const [socket, setSocket] = useState<any>(null);
-  const [isConnected, setIsConnected] = useState(false);
-  const [users, setUsers] = useState<User[]>([]);
-
-  useEffect(() => {
-    // Connect to websocket server
-    // Never use PORT in the URL, alyways use XTransformPort
-    // DO NOT change the path, it is used by Caddy to forward the request to the correct port
-    const socketInstance = io('/?XTransformPort=3003', {
-      transports: ['websocket', 'polling'],
-      forceNew: true,
-      reconnection: true,
-      reconnectionAttempts: 5,
-      reconnectionDelay: 1000,
-      timeout: 10000
-    })
-
-    setSocket(socketInstance);
-
-    socketInstance.on('connect', () => {
-      setIsConnected(true);
-    });
-
-    socketInstance.on('disconnect', () => {
-      setIsConnected(false);
-    });
-
-    socketInstance.on('message', (msg: Message) => {
-      setMessages(prev => [...prev, msg]);
-    });
-
-    socketInstance.on('user-joined', (data: { user: User; message: Message }) => {
-      setMessages(prev => [...prev, data.message]);
-      setUsers(prev => {
-        if (!prev.find(u => u.id === data.user.id)) {
-          return [...prev, data.user];
-        }
-        return prev;
-      });
-    });
-
-    socketInstance.on('user-left', (data: { user: User; message: Message }) => {
-      setMessages(prev => [...prev, data.message]);
-      setUsers(prev => prev.filter(u => u.id !== data.user.id));
-    });
-
-    socketInstance.on('users-list', (data: { users: User[] }) => {
-      setUsers(data.users);
-    });
-
-    return () => {
-      socketInstance.disconnect();
-    };
-  }, []);
-
-  const handleJoin = () => {
-    if (socket && username.trim() && isConnected) {
-      socket.emit('join', { username: username.trim() });
-      setIsUsernameSet(true);
-    }
-  };
-
-  const sendMessage = () => {
-    if (socket && inputMessage.trim() && username.trim()) {
-      socket.emit('message', {
-        content: inputMessage.trim(),
-        username: username.trim()
-      });
-      setInputMessage('');
-    }
-  };
-
-  const handleKeyPress = (e: React.KeyboardEvent) => {
-    if (e.key === 'Enter') {
-      sendMessage();
-    }
-  };
-
-  return (
-    <div className="container mx-auto p-4 max-w-2xl">
-      <Card>
-        <CardHeader>
-          <CardTitle className="flex items-center justify-between">
-            WebSocket Demo
-            <span className={`text-sm px-2 py-1 rounded ${isConnected ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'}`}>
-              {isConnected ? 'Connected' : 'Disconnected'}
-            </span>
-          </CardTitle>
-        </CardHeader>
-        <CardContent className="space-y-4">
-          {!isUsernameSet ? (
-            <div className="space-y-2">
-              <Input
-                value={username}
-                onChange={(e) => setUsername(e.target.value)}
-                onKeyPress={(e) => {
-                  if (e.key === 'Enter') {
-                    handleJoin();
-                  }
-                }}
-                placeholder="Enter your username..."
-                disabled={!isConnected}
-                className="flex-1"
-              />
-              <Button
-                onClick={handleJoin}
-                disabled={!isConnected || !username.trim()}
-                className="w-full"
-              >
-                Join Chat
-              </Button>
-            </div>
-          ) : (
-            <>
-              <ScrollArea className="h-80 w-full border rounded-md p-4">
-                <div className="space-y-2">
-                  {messages.length === 0 ? (
-                    <p className="text-gray-500 text-center">No messages yet</p>
-                  ) : (
-                    messages.map((msg) => (
-                      <div key={msg.id} className="border-b pb-2 last:border-b-0">
-                        <div className="flex justify-between items-start">
-                          <div className="flex-1">
-                            <p className={`text-sm font-medium ${msg.type === 'system'
-                                ? 'text-blue-600 italic'
-                                : 'text-gray-700'
-                              }`}>
-                              {msg.username}
-                            </p>
-                            <p className={`${msg.type === 'system'
-                                ? 'text-blue-500 italic'
-                                : 'text-gray-900'
-                              }`}>
-                              {msg.content}
-                            </p>
-                          </div>
-                          <span className="text-xs text-gray-500">
-                            {new Date(msg.timestamp).toLocaleTimeString()}
-                          </span>
-                        </div>
-                      </div>
-                    ))
-                  )}
-                </div>
-              </ScrollArea>
-
-              <div className="flex space-x-2">
-                <Input
-                  value={inputMessage}
-                  onChange={(e) => setInputMessage(e.target.value)}
-                  onKeyPress={handleKeyPress}
-                  placeholder="Type a message..."
-                  disabled={!isConnected}
-                  className="flex-1"
-                />
-                <Button
-                  onClick={sendMessage}
-                  disabled={!isConnected || !inputMessage.trim()}
-                >
-                  Send
-                </Button>
-              </div>
-            </>
-          )}
-        </CardContent>
-      </Card>
-    </div>
-  );
-}

examples/websocket/server.ts

@@ -1,138 +0,0 @@
-import { createServer } from 'http'
-import { Server } from 'socket.io'
-
-const httpServer = createServer()
-const io = new Server(httpServer, {
-  // DO NOT change the path, it is used by Caddy to forward the request to the correct port
-  path: '/',
-  cors: {
-    origin: "*",
-    methods: ["GET", "POST"]
-  },
-  pingTimeout: 60000,
-  pingInterval: 25000,
-})
-
-interface User {
-  id: string
-  username: string
-}
-
-interface Message {
-  id: string
-  username: string
-  content: string
-  timestamp: Date
-  type: 'user' | 'system'
-}
-
-const users = new Map<string, User>()
-
-const generateMessageId = () => Math.random().toString(36).substr(2, 9)
-
-const createSystemMessage = (content: string): Message => ({
-  id: generateMessageId(),
-  username: 'System',
-  content,
-  timestamp: new Date(),
-  type: 'system'
-})
-
-const createUserMessage = (username: string, content: string): Message => ({
-  id: generateMessageId(),
-  username,
-  content,
-  timestamp: new Date(),
-  type: 'user'
-})
-
-io.on('connection', (socket) => {
-  console.log(`User connected: ${socket.id}`)
-
-  // Add test event handler
-  socket.on('test', (data) => {
-    console.log('Received test message:', data)
-    socket.emit('test-response', { 
-      message: 'Server received test message', 
-      data: data,
-      timestamp: new Date().toISOString()
-    })
-  })
-
-  socket.on('join', (data: { username: string }) => {
-    const { username } = data
-    
-    // Create user object
-    const user: User = {
-      id: socket.id,
-      username
-    }
-    
-    // Add to user list
-    users.set(socket.id, user)
-    
-    // Send join message to all users
-    const joinMessage = createSystemMessage(`${username} joined the chat room`)
-    io.emit('user-joined', { user, message: joinMessage })
-    
-    // Send current user list to new user
-    const usersList = Array.from(users.values())
-    socket.emit('users-list', { users: usersList })
-    
-    console.log(`${username} joined the chat room, current online users: ${users.size}`)
-  })
-
-  socket.on('message', (data: { content: string; username: string }) => {
-    const { content, username } = data
-    const user = users.get(socket.id)
-    
-    if (user && user.username === username) {
-      const message = createUserMessage(username, content)
-      io.emit('message', message)
-      console.log(`${username}: ${content}`)
-    }
-  })
-
-  socket.on('disconnect', () => {
-    const user = users.get(socket.id)
-    
-    if (user) {
-      // Remove from user list
-      users.delete(socket.id)
-      
-      // Send leave message to all users
-      const leaveMessage = createSystemMessage(`${user.username} left the chat room`)
-      io.emit('user-left', { user: { id: socket.id, username: user.username }, message: leaveMessage })
-      
-      console.log(`${user.username} left the chat room, current online users: ${users.size}`)
-    } else {
-      console.log(`User disconnected: ${socket.id}`)
-    }
-  })
-
-  socket.on('error', (error) => {
-    console.error(`Socket error (${socket.id}):`, error)
-  })
-})
-
-const PORT = 3003
-httpServer.listen(PORT, () => {
-  console.log(`WebSocket server running on port ${PORT}`)
-})
-
-// Graceful shutdown
-process.on('SIGTERM', () => {
-  console.log('Received SIGTERM signal, shutting down server...')
-  httpServer.close(() => {
-    console.log('WebSocket server closed')
-    process.exit(0)
-  })
-})
-
-process.on('SIGINT', () => {
-  console.log('Received SIGINT signal, shutting down server...')
-  httpServer.close(() => {
-    console.log('WebSocket server closed')
-    process.exit(0)
-  })
-})

package.json

@@ -3,100 +3,95 @@
   "version": "0.2.0",
   "private": true,
   "scripts": {
-    "dev": "next dev -p 3000 2>&1 | tee dev.log",
+    "dev": "next dev -p 3000 --hostname 0.0.0.0 2>&1 | tee dev.log",
     "build": "next build && cp -r .next/static .next/standalone/.next/ && cp -r public .next/standalone/",
     "start": "NODE_ENV=production bun .next/standalone/server.js 2>&1 | tee server.log",
+    "typecheck": "tsc --noEmit",
     "lint": "eslint .",
     "test": "vitest",
+    "test:e2e": "playwright test",
     "test:coverage": "vitest --coverage",
-    "db:push": "prisma db push",
-    "db:generate": "prisma generate",
-    "db:migrate": "prisma migrate dev",
-    "db:reset": "prisma migrate reset",
     "prepare": "husky"
   },
   "dependencies": {
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/sortable": "^10.0.0",
     "@dnd-kit/utilities": "^3.2.2",
-    "@hookform/resolvers": "^5.1.1",
-    "@mdxeditor/editor": "^3.39.1",
-    "@prisma/client": "^6.11.1",
-    "@radix-ui/react-accordion": "^1.2.11",
-    "@radix-ui/react-alert-dialog": "^1.1.14",
-    "@radix-ui/react-aspect-ratio": "^1.1.7",
-    "@radix-ui/react-avatar": "^1.1.10",
-    "@radix-ui/react-checkbox": "^1.3.2",
-    "@radix-ui/react-collapsible": "^1.1.11",
-    "@radix-ui/react-context-menu": "^2.2.15",
-    "@radix-ui/react-dialog": "^1.1.14",
-    "@radix-ui/react-dropdown-menu": "^2.1.15",
-    "@radix-ui/react-hover-card": "^1.1.14",
-    "@radix-ui/react-label": "^2.1.7",
-    "@radix-ui/react-menubar": "^1.1.15",
-    "@radix-ui/react-navigation-menu": "^1.2.13",
-    "@radix-ui/react-popover": "^1.1.14",
-    "@radix-ui/react-progress": "^1.1.7",
-    "@radix-ui/react-radio-group": "^1.3.7",
-    "@radix-ui/react-scroll-area": "^1.2.9",
-    "@radix-ui/react-select": "^2.2.5",
-    "@radix-ui/react-separator": "^1.1.7",
-    "@radix-ui/react-slider": "^1.3.5",
-    "@radix-ui/react-slot": "^1.2.3",
-    "@radix-ui/react-switch": "^1.2.5",
-    "@radix-ui/react-tabs": "^1.1.12",
-    "@radix-ui/react-toast": "^1.2.14",
-    "@radix-ui/react-toggle": "^1.1.9",
-    "@radix-ui/react-toggle-group": "^1.1.10",
-    "@radix-ui/react-tooltip": "^1.2.7",
-    "@reactuses/core": "^6.0.5",
-    "@tanstack/react-query": "^5.82.0",
+    "@hookform/resolvers": "^5.2.2",
+    "@radix-ui/react-accordion": "^1.2.12",
+    "@radix-ui/react-alert-dialog": "^1.1.15",
+    "@radix-ui/react-aspect-ratio": "^1.1.8",
+    "@radix-ui/react-avatar": "^1.1.11",
+    "@radix-ui/react-checkbox": "^1.3.3",
+    "@radix-ui/react-collapsible": "^1.1.12",
+    "@radix-ui/react-context-menu": "^2.2.16",
+    "@radix-ui/react-dialog": "^1.1.15",
+    "@radix-ui/react-dropdown-menu": "^2.1.16",
+    "@radix-ui/react-hover-card": "^1.1.15",
+    "@radix-ui/react-label": "^2.1.8",
+    "@radix-ui/react-menubar": "^1.1.16",
+    "@radix-ui/react-navigation-menu": "^1.2.14",
+    "@radix-ui/react-popover": "^1.1.15",
+    "@radix-ui/react-progress": "^1.1.8",
+    "@radix-ui/react-radio-group": "^1.3.8",
+    "@radix-ui/react-scroll-area": "^1.2.10",
+    "@radix-ui/react-select": "^2.2.6",
+    "@radix-ui/react-separator": "^1.1.8",
+    "@radix-ui/react-slider": "^1.3.6",
+    "@radix-ui/react-slot": "^1.2.4",
+    "@radix-ui/react-switch": "^1.2.6",
+    "@radix-ui/react-tabs": "^1.1.13",
+    "@radix-ui/react-toast": "^1.2.15",
+    "@radix-ui/react-toggle": "^1.1.10",
+    "@radix-ui/react-toggle-group": "^1.1.11",
+    "@radix-ui/react-tooltip": "^1.2.8",
+    "@reactuses/core": "^6.3.1",
+    "@tanstack/react-query": "^5.100.10",
     "@tanstack/react-table": "^8.21.3",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",
     "date-fns": "^4.1.0",
     "embla-carousel-react": "^8.6.0",
-    "framer-motion": "^12.23.2",
+    "framer-motion": "^12.38.0",
+    "husky": "^9.1.7",
     "input-otp": "^1.4.2",
     "lucide-react": "^0.525.0",
-    "next": "^16.1.1",
-    "next-auth": "^4.24.11",
-    "next-intl": "^4.3.4",
+    "next": "^16.2.6",
     "next-themes": "^0.4.6",
-    "prisma": "^6.11.1",
-    "react": "^19.0.0",
-    "react-day-picker": "^9.8.0",
-    "react-dom": "^19.0.0",
-    "react-hook-form": "^7.60.0",
+    "react": "^19.2.6",
+    "react-day-picker": "^9.14.0",
+    "react-dom": "^19.2.6",
+    "react-hook-form": "^7.76.0",
     "react-markdown": "^10.1.0",
-    "react-resizable-panels": "^3.0.3",
-    "react-syntax-highlighter": "^15.6.1",
+    "react-resizable-panels": "^3.0.6",
+    "react-syntax-highlighter": "^15.6.6",
     "recharts": "^2.15.4",
-    "sharp": "^0.34.3",
-    "sonner": "^2.0.6",
-    "tailwind-merge": "^3.3.1",
+    "sharp": "^0.34.5",
+    "sonner": "^2.0.7",
+    "tailwind-merge": "^3.6.0",
     "tailwindcss-animate": "^1.0.7",
-    "uuid": "^11.1.0",
+    "uuid": "^11.1.1",
     "vaul": "^1.1.2",
-    "z-ai-web-dev-sdk": "^0.0.17",
-    "zod": "^4.0.2",
-    "zustand": "^5.0.6"
+    "zod": "^4.4.3",
+    "zustand": "^5.0.13"
   },
   "devDependencies": {
-    "@tailwindcss/postcss": "^4",
+    "@playwright/test": "^1.60.0",
+    "@tailwindcss/postcss": "^4.3.0",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.2",
-    "@types/react": "^19",
-    "@types/react-dom": "^19",
-    "bun-types": "^1.3.4",
-    "eslint": "^9",
-    "eslint-config-next": "^16.1.1",
-    "husky": "^9.1.7",
-    "jsdom": "^29.0.1",
-    "tailwindcss": "^4",
-    "tw-animate-css": "^1.3.5",
-    "typescript": "^5",
-    "vitest": "^4.1.2"
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "bun-types": "^1.3.14",
+    "eslint": "^9.39.4",
+    "eslint-config-next": "^16.2.6",
+    "jsdom": "^29.1.1",
+    "lint-staged": "^17.0.5",
+    "madge": "^8.0.0",
+    "tailwindcss": "^4.3.0",
+    "tw-animate-css": "^1.4.0",
+    "typescript": "^5.9.3",
+    "vitest": "^4.1.6"
   }
 }

playwright-report/data/23eb0c541b68af33d962c3ac20ba74eb9ba477b3.md

@@ -0,0 +1,285 @@
+# Instructions
+
+- Following Playwright test failed.
+- Explain why, be concise, respect Playwright best practices.
+- Provide a snippet of code with the fix, if possible.
+
+# Test info
+
+- Name: combat.spec.ts >> Combat System >> shows floor information in spire mode
+- Location: e2e/combat.spec.ts:65:7
+
+# Error details
+
+```
+Error: expect(locator).toBeVisible() failed
+
+Locator: locator('text="Floor"').first()
+Expected: visible
+Timeout: 5000ms
+Error: element(s) not found
+
+Call log:
+  - Expect "toBeVisible" with timeout 5000ms
+  - waiting for locator('text="Floor"').first()
+
+```
+
+# Page snapshot
+
+```yaml
+- generic [active] [ref=e1]:
+  - generic [ref=e2]:
+    - banner [ref=e3]:
+      - generic [ref=e4]:
+        - heading "MANA LOOP" [level=1] [ref=e5]
+        - generic [ref=e7]:
+          - generic [ref=e8]:
+            - generic [ref=e9]: Day 1
+            - generic [ref=e10]: 02:04
+          - generic [ref=e11]:
+            - generic [ref=e12]: "0"
+            - generic [ref=e13]: Insight
+    - main [ref=e14]:
+      - generic [ref=e15]:
+        - generic [ref=e17]:
+          - generic [ref=e18]:
+            - generic [ref=e19]:
+              - generic [ref=e20]: "15"
+              - generic [ref=e21]: / 100
+            - generic [ref=e22]:
+              - text: +3.0 mana/hr
+              - generic [ref=e23]: (1.5x med)
+          - progressbar [ref=e24]
+          - button "Gather +1 Mana" [ref=e26]:
+            - img
+            - text: Gather +1 Mana
+          - generic [ref=e27]:
+            - button "Elemental Mana (1)" [ref=e28]:
+              - generic [ref=e29]: Elemental Mana (1)
+              - img [ref=e30]
+            - generic [ref=e33]:
+              - generic [ref=e34]:
+                - generic [ref=e35]: 🔗
+                - generic [ref=e36]: Transference
+              - generic [ref=e39]: 0/10
+        - generic [ref=e40]:
+          - generic [ref=e41]: "1"
+          - generic [ref=e42]: "2"
+          - generic [ref=e43]: "3"
+          - generic [ref=e44]: "4"
+          - generic [ref=e45]: "5"
+          - generic [ref=e46]: "6"
+          - generic [ref=e47]: "7"
+          - generic [ref=e48]: "8"
+          - generic [ref=e49]: "9"
+          - generic [ref=e50]: "10"
+          - generic [ref=e51]: "11"
+          - generic [ref=e52]: "12"
+          - generic [ref=e53]: "13"
+          - generic [ref=e54]: "14"
+          - generic [ref=e55]: "15"
+          - generic [ref=e56]: "16"
+          - generic [ref=e57]: "17"
+          - generic [ref=e58]: "18"
+          - generic [ref=e59]: "19"
+          - generic [ref=e60]: "20"
+          - generic [ref=e61]: "21"
+          - generic [ref=e62]: "22"
+          - generic [ref=e63]: "23"
+          - generic [ref=e64]: "24"
+          - generic [ref=e65]: "25"
+          - generic [ref=e66]: "26"
+          - generic [ref=e67]: "27"
+          - generic [ref=e68]: "28"
+          - generic [ref=e69]: "29"
+          - generic [ref=e70]: "30"
+      - generic [ref=e72]:
+        - tablist [ref=e73]:
+          - tab "⚔️ Spire" [selected] [ref=e74]
+          - tab "✨ Attune" [ref=e75]
+          - tab "🗿 Golems" [ref=e76]
+          - tab "📚 Skills" [ref=e77]
+          - tab "🔮 Spells" [ref=e78]
+          - tab "🛡️ Gear" [ref=e79]
+          - tab "🔧 Craft" [ref=e80]
+          - tab "💎 Loot" [ref=e81]
+          - tab "🏆 Achieve" [ref=e82]
+          - tab "📊 Stats" [ref=e83]
+          - tab "🐛 Debug" [ref=e84]
+          - tab "📖 Grimoire" [ref=e85]
+        - tabpanel "⚔️ Spire" [ref=e86]:
+          - generic [ref=e87]:
+            - generic [ref=e89]:
+              - button "Exit Spire Mode" [ref=e90]:
+                - img
+                - text: Exit Spire Mode
+              - generic [ref=e91]: Climb down to floor 1 to return to the main game
+            - generic [ref=e92]:
+              - heading "Current Floor 🐝 Swarm" [level=3] [ref=e94]:
+                - generic [ref=e95]: Current Floor
+                - generic [ref=e96]: 🐝 Swarm
+              - generic [ref=e97]:
+                - generic [ref=e98]:
+                  - generic [ref=e99]: "1"
+                  - generic [ref=e100]: / 100
+                  - generic [ref=e101]: 🔥 Fire
+                - generic [ref=e102]:
+                  - text: "Best: Floor"
+                  - strong [ref=e103]: "1"
+                  - text: "• Pacts:"
+                  - strong [ref=e104]: "0"
+            - generic [ref=e106]:
+              - generic [ref=e108]: Active Spells (1)
+              - generic [ref=e110]:
+                - generic [ref=e111]:
+                  - generic [ref=e112]: Mana BoltBasic
+                  - generic [ref=e113]: ✓
+                - generic [ref=e114]: ⚔️ 5 dmg • 3 raw • ⚡ 15 dmg/hr
+            - generic [ref=e115]:
+              - generic [ref=e116]: Swarm Enemies (6)
+              - generic [ref=e118]:
+                - generic [ref=e119]:
+                  - img [ref=e120]
+                  - generic [ref=e125]: Emberling
+                - generic [ref=e126]: 🔥 60/60 HP
+              - generic [ref=e130]:
+                - generic [ref=e131]:
+                  - img [ref=e132]
+                  - generic [ref=e137]: Fire Imp
+                - generic [ref=e138]: 🔥 60/60 HP
+              - generic [ref=e142]:
+                - generic [ref=e143]:
+                  - img [ref=e144]
+                  - generic [ref=e149]: Scorchling
+                - generic [ref=e150]: 🔥 60/60 HP
+              - generic [ref=e154]:
+                - generic [ref=e155]:
+                  - img [ref=e156]
+                  - generic [ref=e161]: Flame Sprite
+                - generic [ref=e162]: 🔥 60/60 HP
+              - generic [ref=e166]:
+                - generic [ref=e167]:
+                  - img [ref=e168]
+                  - generic [ref=e173]: Emberling
+                - generic [ref=e174]: 🔥 60/60 HP
+              - generic [ref=e178]:
+                - generic [ref=e179]:
+                  - img [ref=e180]
+                  - generic [ref=e185]: Inferno Whelp
+                - generic [ref=e186]: 🔥 60/60 HP
+            - generic [ref=e189]:
+              - generic [ref=e191]: Floor Navigation
+              - generic [ref=e192]:
+                - generic [ref=e193]:
+                  - button "Climb Up" [ref=e194]:
+                    - img
+                    - text: Climb Up
+                  - button "Climb Down" [disabled]:
+                    - img
+                    - text: Climb Down
+                - generic [ref=e195]: Click Climb Up/Down to begin climbing
+            - generic [ref=e196]:
+              - generic [ref=e198]: Combat Stats
+              - generic [ref=e199]:
+                - generic [ref=e200]: "Total DPS: —"
+                - generic [ref=e201]:
+                  - generic [ref=e202]: Active Spells
+                  - generic [ref=e203]:
+                    - generic [ref=e204]:
+                      - generic [ref=e205]:
+                        - text: Mana Bolt
+                        - generic [ref=e206]: Basic
+                      - generic [ref=e207]: ✓
+                    - generic [ref=e208]: ⚔️ 5 dmg • 3 raw • ⚡ 15 dmg/hr
+                - generic [ref=e210]: "Study Speed: 100%"
+            - generic [ref=e211]:
+              - generic [ref=e213]: Activity Log
+              - generic [ref=e219]: No activity yet...
+  - region "Notifications (F8)":
+    - list
+  - region "Notifications (F8)":
+    - list
+  - button "Open Next.js Dev Tools" [ref=e225] [cursor=pointer]:
+    - img [ref=e226]
+  - alert [ref=e229]
+```
+
+# Test source
+
+```ts
+  1  | import { test, expect } from '@playwright/test';
+  2  | 
+  3  | /**
+  4  |  * E2E tests for combat system:
+  5  |  * - Entering spire mode (climbing)
+  6  |  * - Casting spells and seeing progress
+  7  |  * - Enemy HP reduction
+  8  |  * - Floor advancement
+  9  |  */
+  10 | 
+  11 | test.describe('Combat System', () => {
+  12 |   test.beforeEach(async ({ page }) => {
+  13 |     await page.goto('/');
+  14 |     // Clear game state to ensure a fresh start
+  15 |     await page.evaluate(() => {
+  16 |       Object.keys(localStorage)
+  17 |         .filter((k) => k.startsWith('mana-loop-'))
+  18 |         .forEach((k) => localStorage.removeItem(k));
+  19 |     });
+  20 |     await page.reload();
+  21 |     await page.waitForLoadState('networkidle');
+  22 |   });
+  23 | 
+  24 |   test('can see the Spire tab and "Climb the Spire" button', async ({ page }) => {
+  25 |     // The Spire tab uses an icon + text, so match by the tab role
+  26 |     const spireTab = page.getByRole('tab', { name: /⚔️ Spire/ });
+  27 |     await expect(spireTab).toBeVisible();
+  28 | 
+  29 |     // Main page should show "Climb the Spire" button
+  30 |     const climbBtn = page.getByRole('button', { name: 'Climb the Spire' });
+  31 |     await expect(climbBtn).toBeVisible();
+  32 |   });
+  33 | 
+  34 |   test('can enter Spire mode by clicking Climb button', async ({ page }) => {
+  35 |     // Click "Climb the Spire" button on the main page (via left panel)
+  36 |     await page.getByRole('button', { name: 'Climb the Spire' }).click();
+  37 | 
+  38 |     // Should now see Spire mode UI elements
+  39 |     // The "Enter Spire Mode" button appears when on the Spire tab
+  40 |     const enterBtn = page.getByRole('button', { name: 'Enter Spire Mode' });
+  41 |     await expect(enterBtn).toBeVisible({ timeout: 5000 });
+  42 |   });
+  43 | 
+  44 |   test('can navigate to Spire tab', async ({ page }) => {
+  45 |     // Click the Spire tab specifically (using role=tab to disambiguate)
+  46 |     await page.getByRole('tab', { name: /⚔️ Spire/ }).click();
+  47 | 
+  48 |     // Should see Spire-specific UI
+  49 |     const enterSpireBtn = page.getByRole('button', { name: 'Enter Spire Mode' });
+  50 |     await expect(enterSpireBtn).toBeVisible({ timeout: 5000 });
+  51 |   });
+  52 | 
+  53 |   test('can enter spire mode from the Spire tab', async ({ page }) => {
+  54 |     await page.getByRole('tab', { name: /⚔️ Spire/ }).click();
+  55 | 
+  56 |     const enterBtn = page.getByRole('button', { name: 'Enter Spire Mode' });
+  57 |     await expect(enterBtn).toBeEnabled();
+  58 |     await enterBtn.click();
+  59 | 
+  60 |     // After entering, should see exit button
+  61 |     const exitBtn = page.getByRole('button', { name: 'Exit Spire Mode' });
+  62 |     await expect(exitBtn).toBeVisible({ timeout: 5000 });
+  63 |   });
+  64 | 
+  65 |   test('shows floor information in spire mode', async ({ page }) => {
+  66 |     await page.getByRole('tab', { name: /⚔️ Spire/ }).click();
+  67 |     await page.getByRole('button', { name: 'Enter Spire Mode' }).click();
+  68 | 
+  69 |     // Should display floor number - look for "Floor" label or the floor counter
+  70 |     const floorDisplay = page.locator('text="Floor"').first();
+> 71 |     await expect(floorDisplay).toBeVisible({ timeout: 5000 });
+     |                                ^ Error: expect(locator).toBeVisible() failed
+  72 |   });
+  73 | });
+```

playwright-report/data/4f22caa1a2b454f813b4c68c510a2ef0b340a248.md

@@ -0,0 +1,348 @@
+# Instructions
+
+- Following Playwright test failed.
+- Explain why, be concise, respect Playwright best practices.
+- Provide a snippet of code with the fix, if possible.
+
+# Test info
+
+- Name: equipment.spec.ts >> Equipment Management >> can unequip an item from a slot
+- Location: e2e/equipment.spec.ts:113:7
+
+# Error details
+
+```
+Error: expect(locator).toBeVisible() failed
+
+Locator: locator('text=Hands').locator('..').locator('button').first()
+Expected: visible
+Timeout: 5000ms
+Error: element(s) not found
+
+Call log:
+  - Expect "toBeVisible" with timeout 5000ms
+  - waiting for locator('text=Hands').locator('..').locator('button').first()
+
+```
+
+# Page snapshot
+
+```yaml
+- generic [ref=e1]:
+  - generic [ref=e2]:
+    - banner [ref=e3]:
+      - generic [ref=e4]:
+        - heading "MANA LOOP" [level=1] [ref=e5]
+        - generic [ref=e7]:
+          - generic [ref=e8]:
+            - generic [ref=e9]: Day 1
+            - generic [ref=e10]: 01:55
+          - generic [ref=e11]:
+            - generic [ref=e12]: "0"
+            - generic [ref=e13]: Insight
+    - main [ref=e14]:
+      - generic [ref=e15]:
+        - generic [ref=e17]:
+          - generic [ref=e18]:
+            - generic [ref=e19]:
+              - generic [ref=e20]: "14"
+              - generic [ref=e21]: / 100
+            - generic [ref=e22]:
+              - text: +2.8 mana/hr
+              - generic [ref=e23]: (1.4x med)
+          - progressbar [ref=e24]
+          - button "Gather +1 Mana" [ref=e26]:
+            - img
+            - text: Gather +1 Mana
+          - generic [ref=e27]:
+            - button "Elemental Mana (1)" [ref=e28]:
+              - generic [ref=e29]: Elemental Mana (1)
+              - img [ref=e30]
+            - generic [ref=e33]:
+              - generic [ref=e34]:
+                - generic [ref=e35]: 🔗
+                - generic [ref=e36]: Transference
+              - generic [ref=e39]: 0/10
+        - button "Climb the Spire" [ref=e40]:
+          - img
+          - text: Climb the Spire
+        - generic [ref=e42]:
+          - generic [ref=e43]:
+            - img [ref=e44]
+            - generic [ref=e46]: Current Activity
+          - generic [ref=e47]: Meditating
+        - generic [ref=e48]:
+          - generic [ref=e49]: "1"
+          - generic [ref=e50]: "2"
+          - generic [ref=e51]: "3"
+          - generic [ref=e52]: "4"
+          - generic [ref=e53]: "5"
+          - generic [ref=e54]: "6"
+          - generic [ref=e55]: "7"
+          - generic [ref=e56]: "8"
+          - generic [ref=e57]: "9"
+          - generic [ref=e58]: "10"
+          - generic [ref=e59]: "11"
+          - generic [ref=e60]: "12"
+          - generic [ref=e61]: "13"
+          - generic [ref=e62]: "14"
+          - generic [ref=e63]: "15"
+          - generic [ref=e64]: "16"
+          - generic [ref=e65]: "17"
+          - generic [ref=e66]: "18"
+          - generic [ref=e67]: "19"
+          - generic [ref=e68]: "20"
+          - generic [ref=e69]: "21"
+          - generic [ref=e70]: "22"
+          - generic [ref=e71]: "23"
+          - generic [ref=e72]: "24"
+          - generic [ref=e73]: "25"
+          - generic [ref=e74]: "26"
+          - generic [ref=e75]: "27"
+          - generic [ref=e76]: "28"
+          - generic [ref=e77]: "29"
+          - generic [ref=e78]: "30"
+      - generic [ref=e80]:
+        - tablist [ref=e81]:
+          - tab "⚔️ Spire" [ref=e82]
+          - tab "✨ Attune" [ref=e83]
+          - tab "🗿 Golems" [ref=e84]
+          - tab "📚 Skills" [ref=e85]
+          - tab "🔮 Spells" [ref=e86]
+          - tab "🛡️ Gear" [active] [selected] [ref=e87]
+          - tab "🔧 Craft" [ref=e88]
+          - tab "💎 Loot" [ref=e89]
+          - tab "🏆 Achieve" [ref=e90]
+          - tab "📊 Stats" [ref=e91]
+          - tab "🐛 Debug" [ref=e92]
+          - tab "📖 Grimoire" [ref=e93]
+        - tabpanel "🛡️ Gear" [ref=e94]:
+          - generic [ref=e95]:
+            - generic [ref=e96]:
+              - generic [ref=e97]:
+                - heading "Equipped Gear" [level=3] [ref=e98]
+                - generic [ref=e100]: 4 / 8 slots filled
+              - generic [ref=e101]:
+                - generic [ref=e102]:
+                  - heading "Weapon & Shield" [level=4] [ref=e103]
+                  - generic [ref=e104]:
+                    - 'button "Main Hand slot: Basic Staff" [ref=e106]':
+                      - generic [ref=e107]:
+                        - generic [ref=e108]:
+                          - img [ref=e109]
+                          - generic [ref=e114]: Main Hand
+                        - button "Unequip Basic Staff" [ref=e115]:
+                          - img [ref=e116]
+                      - generic [ref=e119]:
+                        - generic [ref=e120]:
+                          - text: Basic Staff
+                          - generic [ref=e121]: 2-Handed
+                        - generic [ref=e122]: "Enchantments: 1/50"
+                        - generic [ref=e124]: Mana Bolt
+                    - button "Off Hand slot (blocked by 2-handed weapon) (empty)" [ref=e125]:
+                      - generic [ref=e127]:
+                        - img [ref=e128]
+                        - generic [ref=e130]: Off Hand
+                        - generic [ref=e131]:
+                          - img
+                          - text: Occupied — 2H Weapon
+                      - generic [ref=e132]:
+                        - img [ref=e133]
+                        - text: Blocked by 2-handed weapon
+                - generic [ref=e135]:
+                  - heading "Armor" [level=4] [ref=e136]
+                  - generic [ref=e137]:
+                    - button "Head slot (empty)" [ref=e139]:
+                      - generic [ref=e141]:
+                        - img [ref=e142]
+                        - generic [ref=e147]: Head
+                      - generic [ref=e148]: Head
+                    - 'button "Body slot: Civilian Shirt" [ref=e150]':
+                      - generic [ref=e151]:
+                        - generic [ref=e152]:
+                          - img [ref=e153]
+                          - generic [ref=e155]: Body
+                        - button "Unequip Civilian Shirt" [ref=e156]:
+                          - img [ref=e157]
+                      - generic [ref=e160]:
+                        - generic [ref=e161]: Civilian Shirt
+                        - generic [ref=e162]: "Enchantments: 0/30"
+                    - 'button "Hands slot: Civilian Gloves" [ref=e164]':
+                      - generic [ref=e165]:
+                        - generic [ref=e166]:
+                          - img [ref=e167]
+                          - generic [ref=e172]: Hands
+                        - button "Unequip Civilian Gloves" [ref=e173]:
+                          - img [ref=e174]
+                      - generic [ref=e177]:
+                        - generic [ref=e178]: Civilian Gloves
+                        - generic [ref=e179]: "Enchantments: 0/20"
+                    - 'button "Feet slot: Civilian Shoes" [ref=e181]':
+                      - generic [ref=e182]:
+                        - generic [ref=e183]:
+                          - img [ref=e184]
+                          - generic [ref=e187]: Feet
+                        - button "Unequip Civilian Shoes" [ref=e188]:
+                          - img [ref=e189]
+                      - generic [ref=e192]:
+                        - generic [ref=e193]: Civilian Shoes
+                        - generic [ref=e194]: "Enchantments: 0/15"
+                - generic [ref=e195]:
+                  - heading "Accessories" [level=4] [ref=e196]
+                  - generic [ref=e197]:
+                    - button "Accessory 1 slot (empty)" [ref=e199]:
+                      - generic [ref=e201]:
+                        - img [ref=e202]
+                        - generic [ref=e205]: Accessory 1
+                      - generic [ref=e206]: Accessory 1
+                    - button "Accessory 2 slot (empty)" [ref=e208]:
+                      - generic [ref=e210]:
+                        - img [ref=e211]
+                        - generic [ref=e214]: Accessory 2
+                      - generic [ref=e215]: Accessory 2
+            - generic [ref=e216]:
+              - heading "Equipment Inventory (0 items)" [level=3] [ref=e218]
+              - status [ref=e219]: No unequipped items. Craft new gear in the Crafting tab.
+            - generic [ref=e220]:
+              - heading "Equipment Stats Summary" [level=3] [ref=e222]
+              - generic [ref=e223]:
+                - generic [ref=e224]:
+                  - generic [ref=e225]: "4"
+                  - generic [ref=e226]: Total Items
+                - generic [ref=e227]:
+                  - generic [ref=e228]: "4"
+                  - generic [ref=e229]: Equipped
+                - generic [ref=e230]:
+                  - generic [ref=e231]: "0"
+                  - generic [ref=e232]: In Inventory
+                - generic [ref=e233]:
+                  - generic [ref=e234]: "1"
+                  - generic [ref=e235]: Total Enchantments
+              - generic [ref=e236]:
+                - heading "✨ Enchantment Power" [level=3] [ref=e238]
+                - generic [ref=e239]:
+                  - generic [ref=e240]:
+                    - generic [ref=e241]: "Enchantment Power:"
+                    - generic [ref=e242]: 1.00×
+                  - paragraph [ref=e243]: Increases the power of all enchantments by 0%. Multiplier applied to all enchantment effects.
+              - generic [ref=e244]:
+                - generic [ref=e245]: "Active Effects from Equipment:"
+                - generic [ref=e247]: No active effects
+  - region "Notifications (F8)":
+    - list
+  - region "Notifications (F8)":
+    - list
+  - button "Open Next.js Dev Tools" [ref=e253] [cursor=pointer]:
+    - img [ref=e254]
+  - alert [ref=e257]
+```
+
+# Test source
+
+```ts
+  28  | 
+  29  |     // Verify equipment UI elements
+  30  |     const equippedGearHeading = page.locator('text="Equipped Gear"');
+  31  |     await expect(equippedGearHeading).toBeVisible({ timeout: 5000 });
+  32  |   });
+  33  | 
+  34  |   test('shows equipment slots with labels', async ({ page }) => {
+  35  |     await page.goto('/');
+  36  |     await page.evaluate(() => {
+  37  |       Object.keys(localStorage)
+  38  |         .filter((k) => k.startsWith('mana-loop-'))
+  39  |         .forEach((k) => localStorage.removeItem(k));
+  40  |     });
+  41  |     await page.reload();
+  42  |     await page.waitForLoadState('networkidle');
+  43  | 
+  44  |     await page.getByRole('tab', { name: /🛡️ Gear/ }).click();
+  45  | 
+  46  |     // Check for expected slot labels - use role=heading or more specific selectors
+  47  |     // Main Hand slot
+  48  |     const mainHandSection = page.locator('text=Main Hand');
+  49  |     await expect(mainHandSection.first()).toBeVisible();
+  50  | 
+  51  |     // Off Hand
+  52  |     const offHandSection = page.locator('text=Off Hand');
+  53  |     await expect(offHandSection.first()).toBeVisible();
+  54  | 
+  55  |     // Head
+  56  |     const headSection = page.locator('text=Head');
+  57  |     await expect(headSection.first()).toBeVisible();
+  58  | 
+  59  |     // Body
+  60  |     const bodySection = page.locator('text=Body');
+  61  |     await expect(bodySection.first()).toBeVisible();
+  62  | 
+  63  |     // Hands
+  64  |     const handsSection = page.locator('text=Hands');
+  65  |     await expect(handsSection.first()).toBeVisible();
+  66  | 
+  67  |     // Feet
+  68  |     const feetSection = page.locator('text=Feet');
+  69  |     await expect(feetSection.first()).toBeVisible();
+  70  | 
+  71  |     // Accessory 1 and 2
+  72  |     const acc1Section = page.locator('text=Accessory 1');
+  73  |     await expect(acc1Section.first()).toBeVisible();
+  74  |     const acc2Section = page.locator('text=Accessory 2');
+  75  |     await expect(acc2Section.first()).toBeVisible();
+  76  |   });
+  77  | 
+  78  |   test('shows starting equipment already equipped', async ({ page }) => {
+  79  |     await page.goto('/');
+  80  |     await page.evaluate(() => {
+  81  |       Object.keys(localStorage)
+  82  |         .filter((k) => k.startsWith('mana-loop-'))
+  83  |         .forEach((k) => localStorage.removeItem(k));
+  84  |     });
+  85  |     await page.reload();
+  86  |     await page.waitForLoadState('networkidle');
+  87  | 
+  88  |     await page.getByRole('tab', { name: /🛡️ Gear/ }).click();
+  89  | 
+  90  |     // The player starts with a Basic Staff in main hand (as an equipped item)
+  91  |     const mainHandSlot = page.locator('text=Main Hand >> .. >> text=Basic Staff');
+  92  |     await expect(mainHandSlot).toBeVisible({ timeout: 5000 });
+  93  |   });
+  94  | 
+  95  |   test('2-handed weapon blocks offhand slot', async ({ page }) => {
+  96  |     await page.goto('/');
+  97  |     await page.evaluate(() => {
+  98  |       Object.keys(localStorage)
+  99  |         .filter((k) => k.startsWith('mana-loop-'))
+  100 |         .forEach((k) => localStorage.removeItem(k));
+  101 |     });
+  102 |     await page.reload();
+  103 |     await page.waitForLoadState('networkidle');
+  104 | 
+  105 |     await page.getByRole('tab', { name: /🛡️ Gear/ }).click();
+  106 | 
+  107 |     // The starting basic staff is 2-handed
+  108 |     // The offhand slot should show as blocked with "Occupied — 2H Weapon"
+  109 |     const offHandBlocked = page.locator('text=Occupied').first();
+  110 |     await expect(offHandBlocked).toBeVisible({ timeout: 5000 });
+  111 |   });
+  112 | 
+  113 |   test('can unequip an item from a slot', async ({ page }) => {
+  114 |     await page.goto('/');
+  115 |     await page.evaluate(() => {
+  116 |       Object.keys(localStorage)
+  117 |         .filter((k) => k.startsWith('mana-loop-'))
+  118 |         .forEach((k) => localStorage.removeItem(k));
+  119 |     });
+  120 |     await page.reload();
+  121 |     await page.waitForLoadState('networkidle');
+  122 | 
+  123 |     await page.getByRole('tab', { name: /🛡️ Gear/ }).click();
+  124 | 
+  125 |     // Find an equiped slot with an unequip button (the X button)
+  126 |     // The hands slot has civilian gloves equipped
+  127 |     const handsSlot = page.locator('text=Hands >> .. >> button').first();
+> 128 |     await expect(handsSlot).toBeVisible({ timeout: 5000 });
+      |                             ^ Error: expect(locator).toBeVisible() failed
+  129 |     // Note: exact behavior of unequip depends on implementation state
+  130 |   });
+  131 | });
+```

playwright-report/data/6408809a17a0a92b06e5cc75fcee95e9778138c4.md

@@ -0,0 +1,285 @@
+# Instructions
+
+- Following Playwright test failed.
+- Explain why, be concise, respect Playwright best practices.
+- Provide a snippet of code with the fix, if possible.
+
+# Test info
+
+- Name: enchanting.spec.ts >> Enchanting Flow >> can navigate to Crafting tab
+- Location: e2e/enchanting.spec.ts:28:7
+
+# Error details
+
+```
+Error: expect(locator).toBeVisible() failed
+
+Locator: getByRole('button')
+Expected: visible
+Error: strict mode violation: getByRole('button') resolved to 6 elements:
+    1) <button data-slot="button" class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive text-primary-foreground shad…>…</button> aka getByRole('button', { name: 'Gather +1 Mana' })
+    2) <button class="flex items-center justify-between w-full text-xs text-gray-400 hover:text-gray-300 mb-2">…</button> aka getByRole('button', { name: 'Elemental Mana (1)' })
+    3) <button data-slot="button" class="inline-flex items-center justify-center gap-2 whitespace-nowrap text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive text-primary-foreground shadow-xs hover…>…</button> aka getByRole('button', { name: 'Climb the Spire' })
+    4) <button data-slot="action-button" class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-[var(--radius)] text-sm font-medium transition-all duration-100 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:ring-2 focus-visible:ring-[var(--border-focus)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--bg-base)] bg-[var(--interactive-primary)] text-white …>…</button> aka getByRole('button', { name: 'Fabricate' })
+    5) <button data-slot="action-button" class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-[var(--radius)] text-sm font-medium transition-all duration-100 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:ring-2 focus-visible:ring-[var(--border-focus)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--bg-base)] bg-[var(--interactive-secondary)] text-[var…>…</button> aka getByRole('button', { name: 'Enchant' })
+    6) <button id="next-logo" aria-haspopup="menu" data-next-mark="true" aria-expanded="false" aria-label="Open Next.js Dev Tools" data-nextjs-dev-tools-button="true" aria-controls="nextjs-dev-tools-menu">…</button> aka getByRole('button', { name: 'Open Next.js Dev Tools' })
+
+Call log:
+  - Expect "toBeVisible" with timeout 5000ms
+  - waiting for getByRole('button')
+
+```
+
+# Page snapshot
+
+```yaml
+- generic [ref=e1]:
+  - generic [ref=e2]:
+    - banner [ref=e3]:
+      - generic [ref=e4]:
+        - heading "MANA LOOP" [level=1] [ref=e5]
+        - generic [ref=e7]:
+          - generic [ref=e8]:
+            - generic [ref=e9]: Day 1
+            - generic [ref=e10]: 00:55
+          - generic [ref=e11]:
+            - generic [ref=e12]: "0"
+            - generic [ref=e13]: Insight
+    - main [ref=e14]:
+      - generic [ref=e15]:
+        - generic [ref=e17]:
+          - generic [ref=e18]:
+            - generic [ref=e19]:
+              - generic [ref=e20]: "11"
+              - generic [ref=e21]: / 100
+            - generic [ref=e22]:
+              - text: +2.4 mana/hr
+              - generic [ref=e23]: (1.2x med)
+          - progressbar [ref=e24]
+          - button "Gather +1 Mana" [ref=e26]:
+            - img
+            - text: Gather +1 Mana
+          - generic [ref=e27]:
+            - button "Elemental Mana (1)" [ref=e28]:
+              - generic [ref=e29]: Elemental Mana (1)
+              - img [ref=e30]
+            - generic [ref=e33]:
+              - generic [ref=e34]:
+                - generic [ref=e35]: 🔗
+                - generic [ref=e36]: Transference
+              - generic [ref=e39]: 0/10
+        - button "Climb the Spire" [ref=e40]:
+          - img
+          - text: Climb the Spire
+        - generic [ref=e42]:
+          - generic [ref=e43]:
+            - img [ref=e44]
+            - generic [ref=e46]: Current Activity
+          - generic [ref=e47]: Meditating
+        - generic [ref=e48]:
+          - generic [ref=e49]: "1"
+          - generic [ref=e50]: "2"
+          - generic [ref=e51]: "3"
+          - generic [ref=e52]: "4"
+          - generic [ref=e53]: "5"
+          - generic [ref=e54]: "6"
+          - generic [ref=e55]: "7"
+          - generic [ref=e56]: "8"
+          - generic [ref=e57]: "9"
+          - generic [ref=e58]: "10"
+          - generic [ref=e59]: "11"
+          - generic [ref=e60]: "12"
+          - generic [ref=e61]: "13"
+          - generic [ref=e62]: "14"
+          - generic [ref=e63]: "15"
+          - generic [ref=e64]: "16"
+          - generic [ref=e65]: "17"
+          - generic [ref=e66]: "18"
+          - generic [ref=e67]: "19"
+          - generic [ref=e68]: "20"
+          - generic [ref=e69]: "21"
+          - generic [ref=e70]: "22"
+          - generic [ref=e71]: "23"
+          - generic [ref=e72]: "24"
+          - generic [ref=e73]: "25"
+          - generic [ref=e74]: "26"
+          - generic [ref=e75]: "27"
+          - generic [ref=e76]: "28"
+          - generic [ref=e77]: "29"
+          - generic [ref=e78]: "30"
+      - generic [ref=e80]:
+        - tablist [ref=e81]:
+          - tab "⚔️ Spire" [ref=e82]
+          - tab "✨ Attune" [ref=e83]
+          - tab "🗿 Golems" [ref=e84]
+          - tab "📚 Skills" [ref=e85]
+          - tab "🔮 Spells" [ref=e86]
+          - tab "🛡️ Gear" [ref=e87]
+          - tab "🔧 Craft" [active] [selected] [ref=e88]
+          - tab "💎 Loot" [ref=e89]
+          - tab "🏆 Achieve" [ref=e90]
+          - tab "📊 Stats" [ref=e91]
+          - tab "🐛 Debug" [ref=e92]
+          - tab "📖 Grimoire" [ref=e93]
+        - tabpanel "🔧 Craft" [ref=e94]:
+          - generic [ref=e95]:
+            - generic [ref=e97]:
+              - button "Fabricate" [ref=e98]:
+                - img
+                - text: Fabricate
+              - button "Enchant" [ref=e99]:
+                - img
+                - text: Enchant
+            - generic [ref=e100]:
+              - generic [ref=e101]:
+                - generic [ref=e103]:
+                  - img [ref=e104]
+                  - text: Available Blueprints
+                - generic [ref=e113]:
+                  - img [ref=e114]
+                  - paragraph [ref=e118]: No blueprints discovered yet.
+                  - paragraph [ref=e119]: Defeat guardians to find blueprints!
+              - generic [ref=e120]:
+                - generic [ref=e122]:
+                  - img [ref=e123]
+                  - text: Materials (0)
+                - generic [ref=e131]:
+                  - img [ref=e132]
+                  - paragraph [ref=e134]: No materials collected yet.
+                  - paragraph [ref=e135]: Defeat floors to gather materials!
+  - region "Notifications (F8)":
+    - list
+  - region "Notifications (F8)":
+    - list
+  - button "Open Next.js Dev Tools" [ref=e141] [cursor=pointer]:
+    - img [ref=e142]
+  - alert [ref=e145]
+```
+
+# Test source
+
+```ts
+  1   | import { test, expect } from '@playwright/test';
+  2   | 
+  3   | /**
+  4   |  * E2E tests for the 3-step enchantment flow:
+  5   |  * Design → Prepare → Apply
+  6   |  *
+  7   |  * These tests validate the core crafting loop works end-to-end.
+  8   |  */
+  9   | 
+  10  | test.describe('Enchanting Flow', () => {
+  11  |   /**
+  12  |    * Before each test, ensure we start with a clean state.
+  13  |    * The game persists state in localStorage, so we clear it.
+  14  |    */
+  15  |   test.beforeEach(async ({ page }) => {
+  16  |     await page.goto('/');
+  17  |     // Clear game state to ensure a fresh start
+  18  |     await page.evaluate(() => {
+  19  |       Object.keys(localStorage)
+  20  |         .filter((k) => k.startsWith('mana-loop-'))
+  21  |         .forEach((k) => localStorage.removeItem(k));
+  22  |     });
+  23  |     await page.reload();
+  24  |     // Wait for the game to initialize
+  25  |     await page.waitForLoadState('networkidle');
+  26  |   });
+  27  | 
+  28  |   test('can navigate to Crafting tab', async ({ page }) => {
+  29  |     // The tab bar contains a "Craft" tab
+  30  |     const craftTab = page.getByRole('tab', { name: /🔧 Craft/ });
+  31  |     await expect(craftTab).toBeVisible();
+  32  |     await craftTab.click();
+  33  | 
+  34  |     // Verify we're on the crafting tab by checking for sub-tabs
+  35  |     const fabricateBtn = page.getByRole('button', { hasText: 'Fabricate' });
+  36  |     const enchantBtn = page.getByRole('button', { hasText: 'Enchant' });
+> 37  |     await expect(fabricateBtn).toBeVisible();
+      |                                ^ Error: expect(locator).toBeVisible() failed
+  38  |     await expect(enchantBtn).toBeVisible();
+  39  |   });
+  40  | 
+  41  |   test('can switch to Enchant sub-tab and see design UI', async ({ page }) => {
+  42  |     await page.goto('/');
+  43  |     await page.evaluate(() => {
+  44  |       Object.keys(localStorage)
+  45  |         .filter((k) => k.startsWith('mana-loop-'))
+  46  |         .forEach((k) => localStorage.removeItem(k));
+  47  |     });
+  48  |     await page.reload();
+  49  |     await page.waitForLoadState('networkidle');
+  50  | 
+  51  |     // Navigate to Crafting tab
+  52  |     await page.getByRole('tab', { name: /🔧 Craft/ }).click();
+  53  | 
+  54  |     // Click Enchant sub-tab
+  55  |     const enchantBtn = page.getByRole('button', { hasText: 'Enchant' });
+  56  |     await enchantBtn.click();
+  57  | 
+  58  |     // Should see the design stage UI
+  59  |     const designBtn = page.getByRole('button', { hasText: 'Design' });
+  60  |     const prepareBtn = page.getByRole('button', { hasText: 'Prepare' });
+  61  |     const applyBtn = page.getByRole('button', { hasText: 'Apply' });
+  62  |     await expect(designBtn).toBeVisible();
+  63  |     await expect(prepareBtn).toBeVisible();
+  64  |     await expect(applyBtn).toBeVisible();
+  65  |   });
+  66  | 
+  67  |   test('can select equipment type and effect in Design stage', async ({ page }) => {
+  68  |     await page.goto('/');
+  69  |     await page.evaluate(() => {
+  70  |       Object.keys(localStorage)
+  71  |         .filter((k) => k.startsWith('mana-loop-'))
+  72  |         .forEach((k) => localStorage.removeItem(k));
+  73  |     });
+  74  |     await page.reload();
+  75  |     await page.waitForLoadState('networkidle');
+  76  | 
+  77  |     // Navigate to Crafting > Enchant > Design
+  78  |     await page.getByRole('tab', { name: /🔧 Craft/ }).click();
+  79  |     await page.getByRole('button', { hasText: 'Enchant' }).click();
+  80  | 
+  81  |     // The design section should show effect selectors once an equipment type is chosen
+  82  |     // Look for any element matching equipment type buttons and effect-related content
+  83  |     const equipmentButtons = page.locator('button:has-text("Basic Staff"), button:has-text("Apprentice Wand"), button:has-text("Oak Staff"), button:has-text("Crystal Wand")');
+  84  |     const count = await equipmentButtons.count();
+  85  |     expect(count).toBeGreaterThan(0);
+  86  |   });
+  87  | 
+  88  |   test('can navigate through all 3 enchant stages', async ({ page }) => {
+  89  |     await page.goto('/');
+  90  |     await page.evaluate(() => {
+  91  |       Object.keys(localStorage)
+  92  |         .filter((k) => k.startsWith('mana-loop-'))
+  93  |         .forEach((k) => localStorage.removeItem(k));
+  94  |     });
+  95  |     await page.reload();
+  96  |     await page.waitForLoadState('networkidle');
+  97  | 
+  98  |     // Navigate to Crafting > Enchant
+  99  |     await page.getByRole('tab', { name: /🔧 Craft/ }).click();
+  100 |     await page.getByRole('button', { hasText: 'Enchant' }).click();
+  101 | 
+  102 |     // Verify Design stage is active
+  103 |     const designBtn = page.getByRole('button', { hasText: 'Design' });
+  104 |     await expect(designBtn).toBeVisible();
+  105 | 
+  106 |     // Switch to Prepare stage
+  107 |     const prepareBtn = page.getByRole('button', { hasText: 'Prepare' });
+  108 |     await prepareBtn.click();
+  109 | 
+  110 |     // Should see preparation UI
+  111 |     const prepareHeading = page.locator('text=Select Equipment to Prepare');
+  112 |     await expect(prepareHeading).toBeVisible({ timeout: 5000 });
+  113 | 
+  114 |     // Switch to Apply stage
+  115 |     const applyBtn = page.getByRole('button', { hasText: 'Apply' });
+  116 |     await applyBtn.click();
+  117 | 
+  118 |     // Should see application UI
+  119 |     const applyHeading = page.locator('text=Select Equipment & Design');
+  120 |     await expect(applyHeading).toBeVisible({ timeout: 5000 });
+  121 |   });
+  122 | });
+```

playwright-report/data/66a1f85e1e6a655dfb90f10bd1a60887cffa87da.md

@@ -0,0 +1,260 @@
+# Instructions
+
+- Following Playwright test failed.
+- Explain why, be concise, respect Playwright best practices.
+- Provide a snippet of code with the fix, if possible.
+
+# Test info
+
+- Name: combat.spec.ts >> Combat System >> can enter Spire mode by clicking Climb button
+- Location: e2e/combat.spec.ts:34:7
+
+# Error details
+
+```
+Error: expect(locator).toBeVisible() failed
+
+Locator: getByRole('button', { name: 'Enter Spire Mode' })
+Expected: visible
+Timeout: 5000ms
+Error: element(s) not found
+
+Call log:
+  - Expect "toBeVisible" with timeout 5000ms
+  - waiting for getByRole('button', { name: 'Enter Spire Mode' })
+
+```
+
+# Page snapshot
+
+```yaml
+- generic [active] [ref=e1]:
+  - generic [ref=e2]:
+    - banner [ref=e3]:
+      - generic [ref=e4]:
+        - heading "MANA LOOP" [level=1] [ref=e5]
+        - generic [ref=e7]:
+          - generic [ref=e8]:
+            - generic [ref=e9]: Day 1
+            - generic [ref=e10]: 01:43
+          - generic [ref=e11]:
+            - generic [ref=e12]: "0"
+            - generic [ref=e13]: Insight
+    - main [ref=e14]:
+      - generic [ref=e15]:
+        - generic [ref=e17]:
+          - generic [ref=e18]:
+            - generic [ref=e19]:
+              - generic [ref=e20]: "14"
+              - generic [ref=e21]: / 100
+            - generic [ref=e22]:
+              - text: +2.9 mana/hr
+              - generic [ref=e23]: (1.4x med)
+          - progressbar [ref=e24]
+          - button "Gather +1 Mana" [ref=e26]:
+            - img
+            - text: Gather +1 Mana
+          - generic [ref=e27]:
+            - button "Elemental Mana (1)" [ref=e28]:
+              - generic [ref=e29]: Elemental Mana (1)
+              - img [ref=e30]
+            - generic [ref=e33]:
+              - generic [ref=e34]:
+                - generic [ref=e35]: 🔗
+                - generic [ref=e36]: Transference
+              - generic [ref=e39]: 0/10
+        - generic [ref=e40]:
+          - generic [ref=e41]: "1"
+          - generic [ref=e42]: "2"
+          - generic [ref=e43]: "3"
+          - generic [ref=e44]: "4"
+          - generic [ref=e45]: "5"
+          - generic [ref=e46]: "6"
+          - generic [ref=e47]: "7"
+          - generic [ref=e48]: "8"
+          - generic [ref=e49]: "9"
+          - generic [ref=e50]: "10"
+          - generic [ref=e51]: "11"
+          - generic [ref=e52]: "12"
+          - generic [ref=e53]: "13"
+          - generic [ref=e54]: "14"
+          - generic [ref=e55]: "15"
+          - generic [ref=e56]: "16"
+          - generic [ref=e57]: "17"
+          - generic [ref=e58]: "18"
+          - generic [ref=e59]: "19"
+          - generic [ref=e60]: "20"
+          - generic [ref=e61]: "21"
+          - generic [ref=e62]: "22"
+          - generic [ref=e63]: "23"
+          - generic [ref=e64]: "24"
+          - generic [ref=e65]: "25"
+          - generic [ref=e66]: "26"
+          - generic [ref=e67]: "27"
+          - generic [ref=e68]: "28"
+          - generic [ref=e69]: "29"
+          - generic [ref=e70]: "30"
+      - generic [ref=e72]:
+        - tablist [ref=e73]:
+          - tab "⚔️ Spire" [selected] [ref=e74]
+          - tab "✨ Attune" [ref=e75]
+          - tab "🗿 Golems" [ref=e76]
+          - tab "📚 Skills" [ref=e77]
+          - tab "🔮 Spells" [ref=e78]
+          - tab "🛡️ Gear" [ref=e79]
+          - tab "🔧 Craft" [ref=e80]
+          - tab "💎 Loot" [ref=e81]
+          - tab "🏆 Achieve" [ref=e82]
+          - tab "📊 Stats" [ref=e83]
+          - tab "🐛 Debug" [ref=e84]
+          - tab "📖 Grimoire" [ref=e85]
+        - tabpanel "⚔️ Spire" [ref=e86]:
+          - generic [ref=e87]:
+            - generic [ref=e89]:
+              - button "Exit Spire Mode" [ref=e90]:
+                - img
+                - text: Exit Spire Mode
+              - generic [ref=e91]: Climb down to floor 1 to return to the main game
+            - generic [ref=e92]:
+              - heading "Current Floor ⚔️ Combat" [level=3] [ref=e94]:
+                - generic [ref=e95]: Current Floor
+                - generic [ref=e96]: ⚔️ Combat
+              - generic [ref=e97]:
+                - generic [ref=e98]:
+                  - generic [ref=e99]: "1"
+                  - generic [ref=e100]: / 100
+                  - generic [ref=e101]: 🔥 Fire
+                - generic [ref=e102]:
+                  - text: "Best: Floor"
+                  - strong [ref=e103]: "1"
+                  - text: "• Pacts:"
+                  - strong [ref=e104]: "0"
+            - generic [ref=e106]:
+              - generic [ref=e108]: Active Spells (1)
+              - generic [ref=e110]:
+                - generic [ref=e111]:
+                  - generic [ref=e112]: Mana BoltBasic
+                  - generic [ref=e113]: ✓
+                - generic [ref=e114]: ⚔️ 5 dmg • 3 raw • ⚡ 15 dmg/hr
+            - generic [ref=e115]:
+              - generic [ref=e116]:
+                - generic [ref=e117]:
+                  - img [ref=e118]
+                  - generic [ref=e123]: Inferno Whelp
+                - generic [ref=e124]: 🔥 Fire
+              - generic [ref=e129]: 151 / 151 HP
+            - generic [ref=e130]:
+              - generic [ref=e132]: Floor Navigation
+              - generic [ref=e133]:
+                - generic [ref=e134]:
+                  - button "Climb Up" [ref=e135]:
+                    - img
+                    - text: Climb Up
+                  - button "Climb Down" [disabled]:
+                    - img
+                    - text: Climb Down
+                - generic [ref=e136]: Click Climb Up/Down to begin climbing
+            - generic [ref=e137]:
+              - generic [ref=e139]: Combat Stats
+              - generic [ref=e140]:
+                - generic [ref=e141]: "Total DPS: —"
+                - generic [ref=e142]:
+                  - generic [ref=e143]: Active Spells
+                  - generic [ref=e144]:
+                    - generic [ref=e145]:
+                      - generic [ref=e146]:
+                        - text: Mana Bolt
+                        - generic [ref=e147]: Basic
+                      - generic [ref=e148]: ✓
+                    - generic [ref=e149]: ⚔️ 5 dmg • 3 raw • ⚡ 15 dmg/hr
+                - generic [ref=e151]: "Study Speed: 100%"
+            - generic [ref=e152]:
+              - generic [ref=e154]: Activity Log
+              - generic [ref=e160]: No activity yet...
+  - region "Notifications (F8)":
+    - list
+  - region "Notifications (F8)":
+    - list
+  - button "Open Next.js Dev Tools" [ref=e166] [cursor=pointer]:
+    - img [ref=e167]
+  - alert [ref=e170]
+```
+
+# Test source
+
+```ts
+  1  | import { test, expect } from '@playwright/test';
+  2  | 
+  3  | /**
+  4  |  * E2E tests for combat system:
+  5  |  * - Entering spire mode (climbing)
+  6  |  * - Casting spells and seeing progress
+  7  |  * - Enemy HP reduction
+  8  |  * - Floor advancement
+  9  |  */
+  10 | 
+  11 | test.describe('Combat System', () => {
+  12 |   test.beforeEach(async ({ page }) => {
+  13 |     await page.goto('/');
+  14 |     // Clear game state to ensure a fresh start
+  15 |     await page.evaluate(() => {
+  16 |       Object.keys(localStorage)
+  17 |         .filter((k) => k.startsWith('mana-loop-'))
+  18 |         .forEach((k) => localStorage.removeItem(k));
+  19 |     });
+  20 |     await page.reload();
+  21 |     await page.waitForLoadState('networkidle');
+  22 |   });
+  23 | 
+  24 |   test('can see the Spire tab and "Climb the Spire" button', async ({ page }) => {
+  25 |     // The Spire tab uses an icon + text, so match by the tab role
+  26 |     const spireTab = page.getByRole('tab', { name: /⚔️ Spire/ });
+  27 |     await expect(spireTab).toBeVisible();
+  28 | 
+  29 |     // Main page should show "Climb the Spire" button
+  30 |     const climbBtn = page.getByRole('button', { name: 'Climb the Spire' });
+  31 |     await expect(climbBtn).toBeVisible();
+  32 |   });
+  33 | 
+  34 |   test('can enter Spire mode by clicking Climb button', async ({ page }) => {
+  35 |     // Click "Climb the Spire" button on the main page (via left panel)
+  36 |     await page.getByRole('button', { name: 'Climb the Spire' }).click();
+  37 | 
+  38 |     // Should now see Spire mode UI elements
+  39 |     // The "Enter Spire Mode" button appears when on the Spire tab
+  40 |     const enterBtn = page.getByRole('button', { name: 'Enter Spire Mode' });
+> 41 |     await expect(enterBtn).toBeVisible({ timeout: 5000 });
+     |                            ^ Error: expect(locator).toBeVisible() failed
+  42 |   });
+  43 | 
+  44 |   test('can navigate to Spire tab', async ({ page }) => {
+  45 |     // Click the Spire tab specifically (using role=tab to disambiguate)
+  46 |     await page.getByRole('tab', { name: /⚔️ Spire/ }).click();
+  47 | 
+  48 |     // Should see Spire-specific UI
+  49 |     const enterSpireBtn = page.getByRole('button', { name: 'Enter Spire Mode' });
+  50 |     await expect(enterSpireBtn).toBeVisible({ timeout: 5000 });
+  51 |   });
+  52 | 
+  53 |   test('can enter spire mode from the Spire tab', async ({ page }) => {
+  54 |     await page.getByRole('tab', { name: /⚔️ Spire/ }).click();
+  55 | 
+  56 |     const enterBtn = page.getByRole('button', { name: 'Enter Spire Mode' });
+  57 |     await expect(enterBtn).toBeEnabled();
+  58 |     await enterBtn.click();
+  59 | 
+  60 |     // After entering, should see exit button
+  61 |     const exitBtn = page.getByRole('button', { name: 'Exit Spire Mode' });
+  62 |     await expect(exitBtn).toBeVisible({ timeout: 5000 });
+  63 |   });
+  64 | 
+  65 |   test('shows floor information in spire mode', async ({ page }) => {
+  66 |     await page.getByRole('tab', { name: /⚔️ Spire/ }).click();
+  67 |     await page.getByRole('button', { name: 'Enter Spire Mode' }).click();
+  68 | 
+  69 |     // Should display floor number - look for "Floor" label or the floor counter
+  70 |     const floorDisplay = page.locator('text="Floor"').first();
+  71 |     await expect(floorDisplay).toBeVisible({ timeout: 5000 });
+  72 |   });
+  73 | });
+```

playwright-report/data/6c1c7d873c0c5262ffca286974649ec3bf1eb3f4.md

@@ -0,0 +1,280 @@
+# Instructions
+
+- Following Playwright test failed.
+- Explain why, be concise, respect Playwright best practices.
+- Provide a snippet of code with the fix, if possible.
+
+# Test info
+
+- Name: enchanting.spec.ts >> Enchanting Flow >> can switch to Enchant sub-tab and see design UI
+- Location: e2e/enchanting.spec.ts:41:7
+
+# Error details
+
+```
+Error: locator.click: Error: strict mode violation: getByRole('button') resolved to 6 elements:
+    1) <button data-slot="button" class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive text-primary-foreground shad…>…</button> aka getByRole('button', { name: 'Gather +1 Mana' })
+    2) <button class="flex items-center justify-between w-full text-xs text-gray-400 hover:text-gray-300 mb-2">…</button> aka getByRole('button', { name: 'Elemental Mana (1)' })
+    3) <button data-slot="button" class="inline-flex items-center justify-center gap-2 whitespace-nowrap text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive text-primary-foreground shadow-xs hover…>…</button> aka getByRole('button', { name: 'Climb the Spire' })
+    4) <button data-slot="action-button" class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-[var(--radius)] text-sm font-medium transition-all duration-100 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:ring-2 focus-visible:ring-[var(--border-focus)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--bg-base)] bg-[var(--interactive-primary)] text-white …>…</button> aka getByRole('button', { name: 'Fabricate' })
+    5) <button data-slot="action-button" class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-[var(--radius)] text-sm font-medium transition-all duration-100 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:ring-2 focus-visible:ring-[var(--border-focus)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--bg-base)] bg-[var(--interactive-secondary)] text-[var…>…</button> aka getByRole('button', { name: 'Enchant' })
+    6) <button id="next-logo" aria-haspopup="menu" data-next-mark="true" aria-expanded="false" aria-label="Open Next.js Dev Tools" data-nextjs-dev-tools-button="true" aria-controls="nextjs-dev-tools-menu">…</button> aka getByRole('button', { name: 'Open Next.js Dev Tools' })
+
+Call log:
+  - waiting for getByRole('button')
+
+```
+
+# Page snapshot
+
+```yaml
+- generic [ref=e1]:
+  - generic [ref=e2]:
+    - banner [ref=e3]:
+      - generic [ref=e4]:
+        - heading "MANA LOOP" [level=1] [ref=e5]
+        - generic [ref=e7]:
+          - generic [ref=e8]:
+            - generic [ref=e9]: Day 1
+            - generic [ref=e10]: 01:04
+          - generic [ref=e11]:
+            - generic [ref=e12]: "0"
+            - generic [ref=e13]: Insight
+    - main [ref=e14]:
+      - generic [ref=e15]:
+        - generic [ref=e17]:
+          - generic [ref=e18]:
+            - generic [ref=e19]:
+              - generic [ref=e20]: "12"
+              - generic [ref=e21]: / 100
+            - generic [ref=e22]:
+              - text: +2.3 mana/hr
+              - generic [ref=e23]: (1.1x med)
+          - progressbar [ref=e24]
+          - button "Gather +1 Mana" [ref=e26]:
+            - img
+            - text: Gather +1 Mana
+          - generic [ref=e27]:
+            - button "Elemental Mana (1)" [ref=e28]:
+              - generic [ref=e29]: Elemental Mana (1)
+              - img [ref=e30]
+            - generic [ref=e33]:
+              - generic [ref=e34]:
+                - generic [ref=e35]: 🔗
+                - generic [ref=e36]: Transference
+              - generic [ref=e39]: 0/10
+        - button "Climb the Spire" [ref=e40]:
+          - img
+          - text: Climb the Spire
+        - generic [ref=e42]:
+          - generic [ref=e43]:
+            - img [ref=e44]
+            - generic [ref=e46]: Current Activity
+          - generic [ref=e47]: Meditating
+        - generic [ref=e48]:
+          - generic [ref=e49]: "1"
+          - generic [ref=e50]: "2"
+          - generic [ref=e51]: "3"
+          - generic [ref=e52]: "4"
+          - generic [ref=e53]: "5"
+          - generic [ref=e54]: "6"
+          - generic [ref=e55]: "7"
+          - generic [ref=e56]: "8"
+          - generic [ref=e57]: "9"
+          - generic [ref=e58]: "10"
+          - generic [ref=e59]: "11"
+          - generic [ref=e60]: "12"
+          - generic [ref=e61]: "13"
+          - generic [ref=e62]: "14"
+          - generic [ref=e63]: "15"
+          - generic [ref=e64]: "16"
+          - generic [ref=e65]: "17"
+          - generic [ref=e66]: "18"
+          - generic [ref=e67]: "19"
+          - generic [ref=e68]: "20"
+          - generic [ref=e69]: "21"
+          - generic [ref=e70]: "22"
+          - generic [ref=e71]: "23"
+          - generic [ref=e72]: "24"
+          - generic [ref=e73]: "25"
+          - generic [ref=e74]: "26"
+          - generic [ref=e75]: "27"
+          - generic [ref=e76]: "28"
+          - generic [ref=e77]: "29"
+          - generic [ref=e78]: "30"
+      - generic [ref=e80]:
+        - tablist [ref=e81]:
+          - tab "⚔️ Spire" [ref=e82]
+          - tab "✨ Attune" [ref=e83]
+          - tab "🗿 Golems" [ref=e84]
+          - tab "📚 Skills" [ref=e85]
+          - tab "🔮 Spells" [ref=e86]
+          - tab "🛡️ Gear" [ref=e87]
+          - tab "🔧 Craft" [active] [selected] [ref=e88]
+          - tab "💎 Loot" [ref=e89]
+          - tab "🏆 Achieve" [ref=e90]
+          - tab "📊 Stats" [ref=e91]
+          - tab "🐛 Debug" [ref=e92]
+          - tab "📖 Grimoire" [ref=e93]
+        - tabpanel "🔧 Craft" [ref=e94]:
+          - generic [ref=e95]:
+            - generic [ref=e97]:
+              - button "Fabricate" [ref=e98]:
+                - img
+                - text: Fabricate
+              - button "Enchant" [ref=e99]:
+                - img
+                - text: Enchant
+            - generic [ref=e100]:
+              - generic [ref=e101]:
+                - generic [ref=e103]:
+                  - img [ref=e104]
+                  - text: Available Blueprints
+                - generic [ref=e113]:
+                  - img [ref=e114]
+                  - paragraph [ref=e118]: No blueprints discovered yet.
+                  - paragraph [ref=e119]: Defeat guardians to find blueprints!
+              - generic [ref=e120]:
+                - generic [ref=e122]:
+                  - img [ref=e123]
+                  - text: Materials (0)
+                - generic [ref=e131]:
+                  - img [ref=e132]
+                  - paragraph [ref=e134]: No materials collected yet.
+                  - paragraph [ref=e135]: Defeat floors to gather materials!
+  - region "Notifications (F8)":
+    - list
+  - region "Notifications (F8)":
+    - list
+  - button "Open Next.js Dev Tools" [ref=e141] [cursor=pointer]:
+    - img [ref=e142]
+  - alert [ref=e145]
+```
+
+# Test source
+
+```ts
+  1   | import { test, expect } from '@playwright/test';
+  2   | 
+  3   | /**
+  4   |  * E2E tests for the 3-step enchantment flow:
+  5   |  * Design → Prepare → Apply
+  6   |  *
+  7   |  * These tests validate the core crafting loop works end-to-end.
+  8   |  */
+  9   | 
+  10  | test.describe('Enchanting Flow', () => {
+  11  |   /**
+  12  |    * Before each test, ensure we start with a clean state.
+  13  |    * The game persists state in localStorage, so we clear it.
+  14  |    */
+  15  |   test.beforeEach(async ({ page }) => {
+  16  |     await page.goto('/');
+  17  |     // Clear game state to ensure a fresh start
+  18  |     await page.evaluate(() => {
+  19  |       Object.keys(localStorage)
+  20  |         .filter((k) => k.startsWith('mana-loop-'))
+  21  |         .forEach((k) => localStorage.removeItem(k));
+  22  |     });
+  23  |     await page.reload();
+  24  |     // Wait for the game to initialize
+  25  |     await page.waitForLoadState('networkidle');
+  26  |   });
+  27  | 
+  28  |   test('can navigate to Crafting tab', async ({ page }) => {
+  29  |     // The tab bar contains a "Craft" tab
+  30  |     const craftTab = page.getByRole('tab', { name: /🔧 Craft/ });
+  31  |     await expect(craftTab).toBeVisible();
+  32  |     await craftTab.click();
+  33  | 
+  34  |     // Verify we're on the crafting tab by checking for sub-tabs
+  35  |     const fabricateBtn = page.getByRole('button', { hasText: 'Fabricate' });
+  36  |     const enchantBtn = page.getByRole('button', { hasText: 'Enchant' });
+  37  |     await expect(fabricateBtn).toBeVisible();
+  38  |     await expect(enchantBtn).toBeVisible();
+  39  |   });
+  40  | 
+  41  |   test('can switch to Enchant sub-tab and see design UI', async ({ page }) => {
+  42  |     await page.goto('/');
+  43  |     await page.evaluate(() => {
+  44  |       Object.keys(localStorage)
+  45  |         .filter((k) => k.startsWith('mana-loop-'))
+  46  |         .forEach((k) => localStorage.removeItem(k));
+  47  |     });
+  48  |     await page.reload();
+  49  |     await page.waitForLoadState('networkidle');
+  50  | 
+  51  |     // Navigate to Crafting tab
+  52  |     await page.getByRole('tab', { name: /🔧 Craft/ }).click();
+  53  | 
+  54  |     // Click Enchant sub-tab
+  55  |     const enchantBtn = page.getByRole('button', { hasText: 'Enchant' });
+> 56  |     await enchantBtn.click();
+      |                      ^ Error: locator.click: Error: strict mode violation: getByRole('button') resolved to 6 elements:
+  57  | 
+  58  |     // Should see the design stage UI
+  59  |     const designBtn = page.getByRole('button', { hasText: 'Design' });
+  60  |     const prepareBtn = page.getByRole('button', { hasText: 'Prepare' });
+  61  |     const applyBtn = page.getByRole('button', { hasText: 'Apply' });
+  62  |     await expect(designBtn).toBeVisible();
+  63  |     await expect(prepareBtn).toBeVisible();
+  64  |     await expect(applyBtn).toBeVisible();
+  65  |   });
+  66  | 
+  67  |   test('can select equipment type and effect in Design stage', async ({ page }) => {
+  68  |     await page.goto('/');
+  69  |     await page.evaluate(() => {
+  70  |       Object.keys(localStorage)
+  71  |         .filter((k) => k.startsWith('mana-loop-'))
+  72  |         .forEach((k) => localStorage.removeItem(k));
+  73  |     });
+  74  |     await page.reload();
+  75  |     await page.waitForLoadState('networkidle');
+  76  | 
+  77  |     // Navigate to Crafting > Enchant > Design
+  78  |     await page.getByRole('tab', { name: /🔧 Craft/ }).click();
+  79  |     await page.getByRole('button', { hasText: 'Enchant' }).click();
+  80  | 
+  81  |     // The design section should show effect selectors once an equipment type is chosen
+  82  |     // Look for any element matching equipment type buttons and effect-related content
+  83  |     const equipmentButtons = page.locator('button:has-text("Basic Staff"), button:has-text("Apprentice Wand"), button:has-text("Oak Staff"), button:has-text("Crystal Wand")');
+  84  |     const count = await equipmentButtons.count();
+  85  |     expect(count).toBeGreaterThan(0);
+  86  |   });
+  87  | 
+  88  |   test('can navigate through all 3 enchant stages', async ({ page }) => {
+  89  |     await page.goto('/');
+  90  |     await page.evaluate(() => {
+  91  |       Object.keys(localStorage)
+  92  |         .filter((k) => k.startsWith('mana-loop-'))
+  93  |         .forEach((k) => localStorage.removeItem(k));
+  94  |     });
+  95  |     await page.reload();
+  96  |     await page.waitForLoadState('networkidle');
+  97  | 
+  98  |     // Navigate to Crafting > Enchant
+  99  |     await page.getByRole('tab', { name: /🔧 Craft/ }).click();
+  100 |     await page.getByRole('button', { hasText: 'Enchant' }).click();
+  101 | 
+  102 |     // Verify Design stage is active
+  103 |     const designBtn = page.getByRole('button', { hasText: 'Design' });
+  104 |     await expect(designBtn).toBeVisible();
+  105 | 
+  106 |     // Switch to Prepare stage
+  107 |     const prepareBtn = page.getByRole('button', { hasText: 'Prepare' });
+  108 |     await prepareBtn.click();
+  109 | 
+  110 |     // Should see preparation UI
+  111 |     const prepareHeading = page.locator('text=Select Equipment to Prepare');
+  112 |     await expect(prepareHeading).toBeVisible({ timeout: 5000 });
+  113 | 
+  114 |     // Switch to Apply stage
+  115 |     const applyBtn = page.getByRole('button', { hasText: 'Apply' });
+  116 |     await applyBtn.click();
+  117 | 
+  118 |     // Should see application UI
+  119 |     const applyHeading = page.locator('text=Select Equipment & Design');
+  120 |     await expect(applyHeading).toBeVisible({ timeout: 5000 });
+  121 |   });
+  122 | });
+```

playwright-report/data/a69b7491fd34ee0580bc0153a90dc146b509aac3.md

@@ -0,0 +1,375 @@
+# Instructions
+
+- Following Playwright test failed.
+- Explain why, be concise, respect Playwright best practices.
+- Provide a snippet of code with the fix, if possible.
+
+# Test info
+
+- Name: equipment.spec.ts >> Equipment Management >> shows starting equipment already equipped
+- Location: e2e/equipment.spec.ts:78:7
+
+# Error details
+
+```
+Error: expect(locator).toBeVisible() failed
+
+Locator: locator('text=Main Hand').locator('..').locator('text=Basic Staff')
+Expected: visible
+Timeout: 5000ms
+Error: element(s) not found
+
+Call log:
+  - Expect "toBeVisible" with timeout 5000ms
+  - waiting for locator('text=Main Hand').locator('..').locator('text=Basic Staff')
+
+```
+
+# Page snapshot
+
+```yaml
+- generic [ref=e1]:
+  - generic [ref=e2]:
+    - banner [ref=e3]:
+      - generic [ref=e4]:
+        - heading "MANA LOOP" [level=1] [ref=e5]
+        - generic [ref=e7]:
+          - generic [ref=e8]:
+            - generic [ref=e9]: Day 1
+            - generic [ref=e10]: 01:52
+          - generic [ref=e11]:
+            - generic [ref=e12]: "0"
+            - generic [ref=e13]: Insight
+    - main [ref=e14]:
+      - generic [ref=e15]:
+        - generic [ref=e17]:
+          - generic [ref=e18]:
+            - generic [ref=e19]:
+              - generic [ref=e20]: "14"
+              - generic [ref=e21]: / 100
+            - generic [ref=e22]:
+              - text: +2.7 mana/hr
+              - generic [ref=e23]: (1.4x med)
+          - progressbar [ref=e24]
+          - button "Gather +1 Mana" [ref=e26]:
+            - img
+            - text: Gather +1 Mana
+          - generic [ref=e27]:
+            - button "Elemental Mana (1)" [ref=e28]:
+              - generic [ref=e29]: Elemental Mana (1)
+              - img [ref=e30]
+            - generic [ref=e33]:
+              - generic [ref=e34]:
+                - generic [ref=e35]: 🔗
+                - generic [ref=e36]: Transference
+              - generic [ref=e39]: 0/10
+        - button "Climb the Spire" [ref=e40]:
+          - img
+          - text: Climb the Spire
+        - generic [ref=e42]:
+          - generic [ref=e43]:
+            - img [ref=e44]
+            - generic [ref=e46]: Current Activity
+          - generic [ref=e47]: Meditating
+        - generic [ref=e48]:
+          - generic [ref=e49]: "1"
+          - generic [ref=e50]: "2"
+          - generic [ref=e51]: "3"
+          - generic [ref=e52]: "4"
+          - generic [ref=e53]: "5"
+          - generic [ref=e54]: "6"
+          - generic [ref=e55]: "7"
+          - generic [ref=e56]: "8"
+          - generic [ref=e57]: "9"
+          - generic [ref=e58]: "10"
+          - generic [ref=e59]: "11"
+          - generic [ref=e60]: "12"
+          - generic [ref=e61]: "13"
+          - generic [ref=e62]: "14"
+          - generic [ref=e63]: "15"
+          - generic [ref=e64]: "16"
+          - generic [ref=e65]: "17"
+          - generic [ref=e66]: "18"
+          - generic [ref=e67]: "19"
+          - generic [ref=e68]: "20"
+          - generic [ref=e69]: "21"
+          - generic [ref=e70]: "22"
+          - generic [ref=e71]: "23"
+          - generic [ref=e72]: "24"
+          - generic [ref=e73]: "25"
+          - generic [ref=e74]: "26"
+          - generic [ref=e75]: "27"
+          - generic [ref=e76]: "28"
+          - generic [ref=e77]: "29"
+          - generic [ref=e78]: "30"
+      - generic [ref=e80]:
+        - tablist [ref=e81]:
+          - tab "⚔️ Spire" [ref=e82]
+          - tab "✨ Attune" [ref=e83]
+          - tab "🗿 Golems" [ref=e84]
+          - tab "📚 Skills" [ref=e85]
+          - tab "🔮 Spells" [ref=e86]
+          - tab "🛡️ Gear" [active] [selected] [ref=e87]
+          - tab "🔧 Craft" [ref=e88]
+          - tab "💎 Loot" [ref=e89]
+          - tab "🏆 Achieve" [ref=e90]
+          - tab "📊 Stats" [ref=e91]
+          - tab "🐛 Debug" [ref=e92]
+          - tab "📖 Grimoire" [ref=e93]
+        - tabpanel "🛡️ Gear" [ref=e94]:
+          - generic [ref=e95]:
+            - generic [ref=e96]:
+              - generic [ref=e97]:
+                - heading "Equipped Gear" [level=3] [ref=e98]
+                - generic [ref=e100]: 4 / 8 slots filled
+              - generic [ref=e101]:
+                - generic [ref=e102]:
+                  - heading "Weapon & Shield" [level=4] [ref=e103]
+                  - generic [ref=e104]:
+                    - 'button "Main Hand slot: Basic Staff" [ref=e106]':
+                      - generic [ref=e107]:
+                        - generic [ref=e108]:
+                          - img [ref=e109]
+                          - generic [ref=e114]: Main Hand
+                        - button "Unequip Basic Staff" [ref=e115]:
+                          - img [ref=e116]
+                      - generic [ref=e119]:
+                        - generic [ref=e120]:
+                          - text: Basic Staff
+                          - generic [ref=e121]: 2-Handed
+                        - generic [ref=e122]: "Enchantments: 1/50"
+                        - generic [ref=e124]: Mana Bolt
+                    - button "Off Hand slot (blocked by 2-handed weapon) (empty)" [ref=e125]:
+                      - generic [ref=e127]:
+                        - img [ref=e128]
+                        - generic [ref=e130]: Off Hand
+                        - generic [ref=e131]:
+                          - img
+                          - text: Occupied — 2H Weapon
+                      - generic [ref=e132]:
+                        - img [ref=e133]
+                        - text: Blocked by 2-handed weapon
+                - generic [ref=e135]:
+                  - heading "Armor" [level=4] [ref=e136]
+                  - generic [ref=e137]:
+                    - button "Head slot (empty)" [ref=e139]:
+                      - generic [ref=e141]:
+                        - img [ref=e142]
+                        - generic [ref=e147]: Head
+                      - generic [ref=e148]: Head
+                    - 'button "Body slot: Civilian Shirt" [ref=e150]':
+                      - generic [ref=e151]:
+                        - generic [ref=e152]:
+                          - img [ref=e153]
+                          - generic [ref=e155]: Body
+                        - button "Unequip Civilian Shirt" [ref=e156]:
+                          - img [ref=e157]
+                      - generic [ref=e160]:
+                        - generic [ref=e161]: Civilian Shirt
+                        - generic [ref=e162]: "Enchantments: 0/30"
+                    - 'button "Hands slot: Civilian Gloves" [ref=e164]':
+                      - generic [ref=e165]:
+                        - generic [ref=e166]:
+                          - img [ref=e167]
+                          - generic [ref=e172]: Hands
+                        - button "Unequip Civilian Gloves" [ref=e173]:
+                          - img [ref=e174]
+                      - generic [ref=e177]:
+                        - generic [ref=e178]: Civilian Gloves
+                        - generic [ref=e179]: "Enchantments: 0/20"
+                    - 'button "Feet slot: Civilian Shoes" [ref=e181]':
+                      - generic [ref=e182]:
+                        - generic [ref=e183]:
+                          - img [ref=e184]
+                          - generic [ref=e187]: Feet
+                        - button "Unequip Civilian Shoes" [ref=e188]:
+                          - img [ref=e189]
+                      - generic [ref=e192]:
+                        - generic [ref=e193]: Civilian Shoes
+                        - generic [ref=e194]: "Enchantments: 0/15"
+                - generic [ref=e195]:
+                  - heading "Accessories" [level=4] [ref=e196]
+                  - generic [ref=e197]:
+                    - button "Accessory 1 slot (empty)" [ref=e199]:
+                      - generic [ref=e201]:
+                        - img [ref=e202]
+                        - generic [ref=e205]: Accessory 1
+                      - generic [ref=e206]: Accessory 1
+                    - button "Accessory 2 slot (empty)" [ref=e208]:
+                      - generic [ref=e210]:
+                        - img [ref=e211]
+                        - generic [ref=e214]: Accessory 2
+                      - generic [ref=e215]: Accessory 2
+            - generic [ref=e216]:
+              - heading "Equipment Inventory (0 items)" [level=3] [ref=e218]
+              - status [ref=e219]: No unequipped items. Craft new gear in the Crafting tab.
+            - generic [ref=e220]:
+              - heading "Equipment Stats Summary" [level=3] [ref=e222]
+              - generic [ref=e223]:
+                - generic [ref=e224]:
+                  - generic [ref=e225]: "4"
+                  - generic [ref=e226]: Total Items
+                - generic [ref=e227]:
+                  - generic [ref=e228]: "4"
+                  - generic [ref=e229]: Equipped
+                - generic [ref=e230]:
+                  - generic [ref=e231]: "0"
+                  - generic [ref=e232]: In Inventory
+                - generic [ref=e233]:
+                  - generic [ref=e234]: "1"
+                  - generic [ref=e235]: Total Enchantments
+              - generic [ref=e236]:
+                - heading "✨ Enchantment Power" [level=3] [ref=e238]
+                - generic [ref=e239]:
+                  - generic [ref=e240]:
+                    - generic [ref=e241]: "Enchantment Power:"
+                    - generic [ref=e242]: 1.00×
+                  - paragraph [ref=e243]: Increases the power of all enchantments by 0%. Multiplier applied to all enchantment effects.
+              - generic [ref=e244]:
+                - generic [ref=e245]: "Active Effects from Equipment:"
+                - generic [ref=e247]: No active effects
+  - region "Notifications (F8)":
+    - list
+  - region "Notifications (F8)":
+    - list
+  - button "Open Next.js Dev Tools" [ref=e253] [cursor=pointer]:
+    - img [ref=e254]
+  - alert [ref=e257]
+```
+
+# Test source
+
+```ts
+  1   | import { test, expect } from '@playwright/test';
+  2   | 
+  3   | /**
+  4   |  * E2E tests for equipment management:
+  5   |  * - Equipping items to slots
+  6   |  * - 2-handed weapon blocking offhand slot
+  7   |  * - Unequipping items back to inventory
+  8   |  */
+  9   | 
+  10  | test.describe('Equipment Management', () => {
+  11  |   test.beforeEach(async ({ page }) => {
+  12  |     await page.goto('/');
+  13  |     // Clear game state for a fresh start
+  14  |     await page.evaluate(() => {
+  15  |       Object.keys(localStorage)
+  16  |         .filter((k) => k.startsWith('mana-loop-'))
+  17  |         .forEach((k) => localStorage.removeItem(k));
+  18  |     });
+  19  |     await page.reload();
+  20  |     await page.waitForLoadState('networkidle');
+  21  |   });
+  22  | 
+  23  |   test('can navigate to Equipment tab', async ({ page }) => {
+  24  |     // Use the tab with the shield icon to disambiguate
+  25  |     const gearTab = page.getByRole('tab', { name: /🛡️ Gear/ });
+  26  |     await expect(gearTab).toBeVisible();
+  27  |     await gearTab.click();
+  28  | 
+  29  |     // Verify equipment UI elements
+  30  |     const equippedGearHeading = page.locator('text="Equipped Gear"');
+  31  |     await expect(equippedGearHeading).toBeVisible({ timeout: 5000 });
+  32  |   });
+  33  | 
+  34  |   test('shows equipment slots with labels', async ({ page }) => {
+  35  |     await page.goto('/');
+  36  |     await page.evaluate(() => {
+  37  |       Object.keys(localStorage)
+  38  |         .filter((k) => k.startsWith('mana-loop-'))
+  39  |         .forEach((k) => localStorage.removeItem(k));
+  40  |     });
+  41  |     await page.reload();
+  42  |     await page.waitForLoadState('networkidle');
+  43  | 
+  44  |     await page.getByRole('tab', { name: /🛡️ Gear/ }).click();
+  45  | 
+  46  |     // Check for expected slot labels - use role=heading or more specific selectors
+  47  |     // Main Hand slot
+  48  |     const mainHandSection = page.locator('text=Main Hand');
+  49  |     await expect(mainHandSection.first()).toBeVisible();
+  50  | 
+  51  |     // Off Hand
+  52  |     const offHandSection = page.locator('text=Off Hand');
+  53  |     await expect(offHandSection.first()).toBeVisible();
+  54  | 
+  55  |     // Head
+  56  |     const headSection = page.locator('text=Head');
+  57  |     await expect(headSection.first()).toBeVisible();
+  58  | 
+  59  |     // Body
+  60  |     const bodySection = page.locator('text=Body');
+  61  |     await expect(bodySection.first()).toBeVisible();
+  62  | 
+  63  |     // Hands
+  64  |     const handsSection = page.locator('text=Hands');
+  65  |     await expect(handsSection.first()).toBeVisible();
+  66  | 
+  67  |     // Feet
+  68  |     const feetSection = page.locator('text=Feet');
+  69  |     await expect(feetSection.first()).toBeVisible();
+  70  | 
+  71  |     // Accessory 1 and 2
+  72  |     const acc1Section = page.locator('text=Accessory 1');
+  73  |     await expect(acc1Section.first()).toBeVisible();
+  74  |     const acc2Section = page.locator('text=Accessory 2');
+  75  |     await expect(acc2Section.first()).toBeVisible();
+  76  |   });
+  77  | 
+  78  |   test('shows starting equipment already equipped', async ({ page }) => {
+  79  |     await page.goto('/');
+  80  |     await page.evaluate(() => {
+  81  |       Object.keys(localStorage)
+  82  |         .filter((k) => k.startsWith('mana-loop-'))
+  83  |         .forEach((k) => localStorage.removeItem(k));
+  84  |     });
+  85  |     await page.reload();
+  86  |     await page.waitForLoadState('networkidle');
+  87  | 
+  88  |     await page.getByRole('tab', { name: /🛡️ Gear/ }).click();
+  89  | 
+  90  |     // The player starts with a Basic Staff in main hand (as an equipped item)
+  91  |     const mainHandSlot = page.locator('text=Main Hand >> .. >> text=Basic Staff');
+> 92  |     await expect(mainHandSlot).toBeVisible({ timeout: 5000 });
+      |                                ^ Error: expect(locator).toBeVisible() failed
+  93  |   });
+  94  | 
+  95  |   test('2-handed weapon blocks offhand slot', async ({ page }) => {
+  96  |     await page.goto('/');
+  97  |     await page.evaluate(() => {
+  98  |       Object.keys(localStorage)
+  99  |         .filter((k) => k.startsWith('mana-loop-'))
+  100 |         .forEach((k) => localStorage.removeItem(k));
+  101 |     });
+  102 |     await page.reload();
+  103 |     await page.waitForLoadState('networkidle');
+  104 | 
+  105 |     await page.getByRole('tab', { name: /🛡️ Gear/ }).click();
+  106 | 
+  107 |     // The starting basic staff is 2-handed
+  108 |     // The offhand slot should show as blocked with "Occupied — 2H Weapon"
+  109 |     const offHandBlocked = page.locator('text=Occupied').first();
+  110 |     await expect(offHandBlocked).toBeVisible({ timeout: 5000 });
+  111 |   });
+  112 | 
+  113 |   test('can unequip an item from a slot', async ({ page }) => {
+  114 |     await page.goto('/');
+  115 |     await page.evaluate(() => {
+  116 |       Object.keys(localStorage)
+  117 |         .filter((k) => k.startsWith('mana-loop-'))
+  118 |         .forEach((k) => localStorage.removeItem(k));
+  119 |     });
+  120 |     await page.reload();
+  121 |     await page.waitForLoadState('networkidle');
+  122 | 
+  123 |     await page.getByRole('tab', { name: /🛡️ Gear/ }).click();
+  124 | 
+  125 |     // Find an equiped slot with an unequip button (the X button)
+  126 |     // The hands slot has civilian gloves equipped
+  127 |     const handsSlot = page.locator('text=Hands >> .. >> button').first();
+  128 |     await expect(handsSlot).toBeVisible({ timeout: 5000 });
+  129 |     // Note: exact behavior of unequip depends on implementation state
+  130 |   });
+  131 | });
+```

playwright-report/data/e3d1abb209771785e7247c38fd372d8fd61b7ea4.md

@@ -0,0 +1,280 @@
+# Instructions
+
+- Following Playwright test failed.
+- Explain why, be concise, respect Playwright best practices.
+- Provide a snippet of code with the fix, if possible.
+
+# Test info
+
+- Name: enchanting.spec.ts >> Enchanting Flow >> can select equipment type and effect in Design stage
+- Location: e2e/enchanting.spec.ts:67:7
+
+# Error details
+
+```
+Error: locator.click: Error: strict mode violation: getByRole('button') resolved to 6 elements:
+    1) <button data-slot="button" class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive text-primary-foreground shad…>…</button> aka getByRole('button', { name: 'Gather +1 Mana' })
+    2) <button class="flex items-center justify-between w-full text-xs text-gray-400 hover:text-gray-300 mb-2">…</button> aka getByRole('button', { name: 'Elemental Mana (1)' })
+    3) <button data-slot="button" class="inline-flex items-center justify-center gap-2 whitespace-nowrap text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive text-primary-foreground shadow-xs hover…>…</button> aka getByRole('button', { name: 'Climb the Spire' })
+    4) <button data-slot="action-button" class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-[var(--radius)] text-sm font-medium transition-all duration-100 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:ring-2 focus-visible:ring-[var(--border-focus)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--bg-base)] bg-[var(--interactive-primary)] text-white …>…</button> aka getByRole('button', { name: 'Fabricate' })
+    5) <button data-slot="action-button" class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-[var(--radius)] text-sm font-medium transition-all duration-100 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:ring-2 focus-visible:ring-[var(--border-focus)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--bg-base)] bg-[var(--interactive-secondary)] text-[var…>…</button> aka getByRole('button', { name: 'Enchant' })
+    6) <button id="next-logo" aria-haspopup="menu" data-next-mark="true" aria-expanded="false" aria-label="Open Next.js Dev Tools" data-nextjs-dev-tools-button="true" aria-controls="nextjs-dev-tools-menu">…</button> aka getByRole('button', { name: 'Open Next.js Dev Tools' })
+
+Call log:
+  - waiting for getByRole('button')
+
+```
+
+# Page snapshot
+
+```yaml
+- generic [ref=e1]:
+  - generic [ref=e2]:
+    - banner [ref=e3]:
+      - generic [ref=e4]:
+        - heading "MANA LOOP" [level=1] [ref=e5]
+        - generic [ref=e7]:
+          - generic [ref=e8]:
+            - generic [ref=e9]: Day 1
+            - generic [ref=e10]: 01:02
+          - generic [ref=e11]:
+            - generic [ref=e12]: "0"
+            - generic [ref=e13]: Insight
+    - main [ref=e14]:
+      - generic [ref=e15]:
+        - generic [ref=e17]:
+          - generic [ref=e18]:
+            - generic [ref=e19]:
+              - generic [ref=e20]: "12"
+              - generic [ref=e21]: / 100
+            - generic [ref=e22]:
+              - text: +2.3 mana/hr
+              - generic [ref=e23]: (1.1x med)
+          - progressbar [ref=e24]
+          - button "Gather +1 Mana" [ref=e26]:
+            - img
+            - text: Gather +1 Mana
+          - generic [ref=e27]:
+            - button "Elemental Mana (1)" [ref=e28]:
+              - generic [ref=e29]: Elemental Mana (1)
+              - img [ref=e30]
+            - generic [ref=e33]:
+              - generic [ref=e34]:
+                - generic [ref=e35]: 🔗
+                - generic [ref=e36]: Transference
+              - generic [ref=e39]: 0/10
+        - button "Climb the Spire" [ref=e40]:
+          - img
+          - text: Climb the Spire
+        - generic [ref=e42]:
+          - generic [ref=e43]:
+            - img [ref=e44]
+            - generic [ref=e46]: Current Activity
+          - generic [ref=e47]: Meditating
+        - generic [ref=e48]:
+          - generic [ref=e49]: "1"
+          - generic [ref=e50]: "2"
+          - generic [ref=e51]: "3"
+          - generic [ref=e52]: "4"
+          - generic [ref=e53]: "5"
+          - generic [ref=e54]: "6"
+          - generic [ref=e55]: "7"
+          - generic [ref=e56]: "8"
+          - generic [ref=e57]: "9"
+          - generic [ref=e58]: "10"
+          - generic [ref=e59]: "11"
+          - generic [ref=e60]: "12"
+          - generic [ref=e61]: "13"
+          - generic [ref=e62]: "14"
+          - generic [ref=e63]: "15"
+          - generic [ref=e64]: "16"
+          - generic [ref=e65]: "17"
+          - generic [ref=e66]: "18"
+          - generic [ref=e67]: "19"
+          - generic [ref=e68]: "20"
+          - generic [ref=e69]: "21"
+          - generic [ref=e70]: "22"
+          - generic [ref=e71]: "23"
+          - generic [ref=e72]: "24"
+          - generic [ref=e73]: "25"
+          - generic [ref=e74]: "26"
+          - generic [ref=e75]: "27"
+          - generic [ref=e76]: "28"
+          - generic [ref=e77]: "29"
+          - generic [ref=e78]: "30"
+      - generic [ref=e80]:
+        - tablist [ref=e81]:
+          - tab "⚔️ Spire" [ref=e82]
+          - tab "✨ Attune" [ref=e83]
+          - tab "🗿 Golems" [ref=e84]
+          - tab "📚 Skills" [ref=e85]
+          - tab "🔮 Spells" [ref=e86]
+          - tab "🛡️ Gear" [ref=e87]
+          - tab "🔧 Craft" [active] [selected] [ref=e88]
+          - tab "💎 Loot" [ref=e89]
+          - tab "🏆 Achieve" [ref=e90]
+          - tab "📊 Stats" [ref=e91]
+          - tab "🐛 Debug" [ref=e92]
+          - tab "📖 Grimoire" [ref=e93]
+        - tabpanel "🔧 Craft" [ref=e94]:
+          - generic [ref=e95]:
+            - generic [ref=e97]:
+              - button "Fabricate" [ref=e98]:
+                - img
+                - text: Fabricate
+              - button "Enchant" [ref=e99]:
+                - img
+                - text: Enchant
+            - generic [ref=e100]:
+              - generic [ref=e101]:
+                - generic [ref=e103]:
+                  - img [ref=e104]
+                  - text: Available Blueprints
+                - generic [ref=e113]:
+                  - img [ref=e114]
+                  - paragraph [ref=e118]: No blueprints discovered yet.
+                  - paragraph [ref=e119]: Defeat guardians to find blueprints!
+              - generic [ref=e120]:
+                - generic [ref=e122]:
+                  - img [ref=e123]
+                  - text: Materials (0)
+                - generic [ref=e131]:
+                  - img [ref=e132]
+                  - paragraph [ref=e134]: No materials collected yet.
+                  - paragraph [ref=e135]: Defeat floors to gather materials!
+  - region "Notifications (F8)":
+    - list
+  - region "Notifications (F8)":
+    - list
+  - button "Open Next.js Dev Tools" [ref=e141] [cursor=pointer]:
+    - img [ref=e142]
+  - alert [ref=e145]
+```
+
+# Test source
+
+```ts
+  1   | import { test, expect } from '@playwright/test';
+  2   | 
+  3   | /**
+  4   |  * E2E tests for the 3-step enchantment flow:
+  5   |  * Design → Prepare → Apply
+  6   |  *
+  7   |  * These tests validate the core crafting loop works end-to-end.
+  8   |  */
+  9   | 
+  10  | test.describe('Enchanting Flow', () => {
+  11  |   /**
+  12  |    * Before each test, ensure we start with a clean state.
+  13  |    * The game persists state in localStorage, so we clear it.
+  14  |    */
+  15  |   test.beforeEach(async ({ page }) => {
+  16  |     await page.goto('/');
+  17  |     // Clear game state to ensure a fresh start
+  18  |     await page.evaluate(() => {
+  19  |       Object.keys(localStorage)
+  20  |         .filter((k) => k.startsWith('mana-loop-'))
+  21  |         .forEach((k) => localStorage.removeItem(k));
+  22  |     });
+  23  |     await page.reload();
+  24  |     // Wait for the game to initialize
+  25  |     await page.waitForLoadState('networkidle');
+  26  |   });
+  27  | 
+  28  |   test('can navigate to Crafting tab', async ({ page }) => {
+  29  |     // The tab bar contains a "Craft" tab
+  30  |     const craftTab = page.getByRole('tab', { name: /🔧 Craft/ });
+  31  |     await expect(craftTab).toBeVisible();
+  32  |     await craftTab.click();
+  33  | 
+  34  |     // Verify we're on the crafting tab by checking for sub-tabs
+  35  |     const fabricateBtn = page.getByRole('button', { hasText: 'Fabricate' });
+  36  |     const enchantBtn = page.getByRole('button', { hasText: 'Enchant' });
+  37  |     await expect(fabricateBtn).toBeVisible();
+  38  |     await expect(enchantBtn).toBeVisible();
+  39  |   });
+  40  | 
+  41  |   test('can switch to Enchant sub-tab and see design UI', async ({ page }) => {
+  42  |     await page.goto('/');
+  43  |     await page.evaluate(() => {
+  44  |       Object.keys(localStorage)
+  45  |         .filter((k) => k.startsWith('mana-loop-'))
+  46  |         .forEach((k) => localStorage.removeItem(k));
+  47  |     });
+  48  |     await page.reload();
+  49  |     await page.waitForLoadState('networkidle');
+  50  | 
+  51  |     // Navigate to Crafting tab
+  52  |     await page.getByRole('tab', { name: /🔧 Craft/ }).click();
+  53  | 
+  54  |     // Click Enchant sub-tab
+  55  |     const enchantBtn = page.getByRole('button', { hasText: 'Enchant' });
+  56  |     await enchantBtn.click();
+  57  | 
+  58  |     // Should see the design stage UI
+  59  |     const designBtn = page.getByRole('button', { hasText: 'Design' });
+  60  |     const prepareBtn = page.getByRole('button', { hasText: 'Prepare' });
+  61  |     const applyBtn = page.getByRole('button', { hasText: 'Apply' });
+  62  |     await expect(designBtn).toBeVisible();
+  63  |     await expect(prepareBtn).toBeVisible();
+  64  |     await expect(applyBtn).toBeVisible();
+  65  |   });
+  66  | 
+  67  |   test('can select equipment type and effect in Design stage', async ({ page }) => {
+  68  |     await page.goto('/');
+  69  |     await page.evaluate(() => {
+  70  |       Object.keys(localStorage)
+  71  |         .filter((k) => k.startsWith('mana-loop-'))
+  72  |         .forEach((k) => localStorage.removeItem(k));
+  73  |     });
+  74  |     await page.reload();
+  75  |     await page.waitForLoadState('networkidle');
+  76  | 
+  77  |     // Navigate to Crafting > Enchant > Design
+  78  |     await page.getByRole('tab', { name: /🔧 Craft/ }).click();
+> 79  |     await page.getByRole('button', { hasText: 'Enchant' }).click();
+      |                                                            ^ Error: locator.click: Error: strict mode violation: getByRole('button') resolved to 6 elements:
+  80  | 
+  81  |     // The design section should show effect selectors once an equipment type is chosen
+  82  |     // Look for any element matching equipment type buttons and effect-related content
+  83  |     const equipmentButtons = page.locator('button:has-text("Basic Staff"), button:has-text("Apprentice Wand"), button:has-text("Oak Staff"), button:has-text("Crystal Wand")');
+  84  |     const count = await equipmentButtons.count();
+  85  |     expect(count).toBeGreaterThan(0);
+  86  |   });
+  87  | 
+  88  |   test('can navigate through all 3 enchant stages', async ({ page }) => {
+  89  |     await page.goto('/');
+  90  |     await page.evaluate(() => {
+  91  |       Object.keys(localStorage)
+  92  |         .filter((k) => k.startsWith('mana-loop-'))
+  93  |         .forEach((k) => localStorage.removeItem(k));
+  94  |     });
+  95  |     await page.reload();
+  96  |     await page.waitForLoadState('networkidle');
+  97  | 
+  98  |     // Navigate to Crafting > Enchant
+  99  |     await page.getByRole('tab', { name: /🔧 Craft/ }).click();
+  100 |     await page.getByRole('button', { hasText: 'Enchant' }).click();
+  101 | 
+  102 |     // Verify Design stage is active
+  103 |     const designBtn = page.getByRole('button', { hasText: 'Design' });
+  104 |     await expect(designBtn).toBeVisible();
+  105 | 
+  106 |     // Switch to Prepare stage
+  107 |     const prepareBtn = page.getByRole('button', { hasText: 'Prepare' });
+  108 |     await prepareBtn.click();
+  109 | 
+  110 |     // Should see preparation UI
+  111 |     const prepareHeading = page.locator('text=Select Equipment to Prepare');
+  112 |     await expect(prepareHeading).toBeVisible({ timeout: 5000 });
+  113 | 
+  114 |     // Switch to Apply stage
+  115 |     const applyBtn = page.getByRole('button', { hasText: 'Apply' });
+  116 |     await applyBtn.click();
+  117 | 
+  118 |     // Should see application UI
+  119 |     const applyHeading = page.locator('text=Select Equipment & Design');
+  120 |     await expect(applyHeading).toBeVisible({ timeout: 5000 });
+  121 |   });
+  122 | });
+```

playwright-report/data/f5ba77f8b20c452bd2c31718b44897276882a465.md

@@ -0,0 +1,280 @@
+# Instructions
+
+- Following Playwright test failed.
+- Explain why, be concise, respect Playwright best practices.
+- Provide a snippet of code with the fix, if possible.
+
+# Test info
+
+- Name: enchanting.spec.ts >> Enchanting Flow >> can navigate through all 3 enchant stages
+- Location: e2e/enchanting.spec.ts:88:7
+
+# Error details
+
+```
+Error: locator.click: Error: strict mode violation: getByRole('button') resolved to 6 elements:
+    1) <button data-slot="button" class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive text-primary-foreground shad…>…</button> aka getByRole('button', { name: 'Gather +1 Mana' })
+    2) <button class="flex items-center justify-between w-full text-xs text-gray-400 hover:text-gray-300 mb-2">…</button> aka getByRole('button', { name: 'Elemental Mana (1)' })
+    3) <button data-slot="button" class="inline-flex items-center justify-center gap-2 whitespace-nowrap text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive text-primary-foreground shadow-xs hover…>…</button> aka getByRole('button', { name: 'Climb the Spire' })
+    4) <button data-slot="action-button" class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-[var(--radius)] text-sm font-medium transition-all duration-100 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:ring-2 focus-visible:ring-[var(--border-focus)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--bg-base)] bg-[var(--interactive-primary)] text-white …>…</button> aka getByRole('button', { name: 'Fabricate' })
+    5) <button data-slot="action-button" class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-[var(--radius)] text-sm font-medium transition-all duration-100 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:ring-2 focus-visible:ring-[var(--border-focus)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--bg-base)] bg-[var(--interactive-secondary)] text-[var…>…</button> aka getByRole('button', { name: 'Enchant' })
+    6) <button id="next-logo" aria-haspopup="menu" data-next-mark="true" aria-expanded="false" aria-label="Open Next.js Dev Tools" data-nextjs-dev-tools-button="true" aria-controls="nextjs-dev-tools-menu">…</button> aka getByRole('button', { name: 'Open Next.js Dev Tools' })
+
+Call log:
+  - waiting for getByRole('button')
+
+```
+
+# Page snapshot
+
+```yaml
+- generic [ref=e1]:
+  - generic [ref=e2]:
+    - banner [ref=e3]:
+      - generic [ref=e4]:
+        - heading "MANA LOOP" [level=1] [ref=e5]
+        - generic [ref=e7]:
+          - generic [ref=e8]:
+            - generic [ref=e9]: Day 1
+            - generic [ref=e10]: 00:55
+          - generic [ref=e11]:
+            - generic [ref=e12]: "0"
+            - generic [ref=e13]: Insight
+    - main [ref=e14]:
+      - generic [ref=e15]:
+        - generic [ref=e17]:
+          - generic [ref=e18]:
+            - generic [ref=e19]:
+              - generic [ref=e20]: "11"
+              - generic [ref=e21]: / 100
+            - generic [ref=e22]:
+              - text: +2.2 mana/hr
+              - generic [ref=e23]: (1.1x med)
+          - progressbar [ref=e24]
+          - button "Gather +1 Mana" [ref=e26]:
+            - img
+            - text: Gather +1 Mana
+          - generic [ref=e27]:
+            - button "Elemental Mana (1)" [ref=e28]:
+              - generic [ref=e29]: Elemental Mana (1)
+              - img [ref=e30]
+            - generic [ref=e33]:
+              - generic [ref=e34]:
+                - generic [ref=e35]: 🔗
+                - generic [ref=e36]: Transference
+              - generic [ref=e39]: 0/10
+        - button "Climb the Spire" [ref=e40]:
+          - img
+          - text: Climb the Spire
+        - generic [ref=e42]:
+          - generic [ref=e43]:
+            - img [ref=e44]
+            - generic [ref=e46]: Current Activity
+          - generic [ref=e47]: Meditating
+        - generic [ref=e48]:
+          - generic [ref=e49]: "1"
+          - generic [ref=e50]: "2"
+          - generic [ref=e51]: "3"
+          - generic [ref=e52]: "4"
+          - generic [ref=e53]: "5"
+          - generic [ref=e54]: "6"
+          - generic [ref=e55]: "7"
+          - generic [ref=e56]: "8"
+          - generic [ref=e57]: "9"
+          - generic [ref=e58]: "10"
+          - generic [ref=e59]: "11"
+          - generic [ref=e60]: "12"
+          - generic [ref=e61]: "13"
+          - generic [ref=e62]: "14"
+          - generic [ref=e63]: "15"
+          - generic [ref=e64]: "16"
+          - generic [ref=e65]: "17"
+          - generic [ref=e66]: "18"
+          - generic [ref=e67]: "19"
+          - generic [ref=e68]: "20"
+          - generic [ref=e69]: "21"
+          - generic [ref=e70]: "22"
+          - generic [ref=e71]: "23"
+          - generic [ref=e72]: "24"
+          - generic [ref=e73]: "25"
+          - generic [ref=e74]: "26"
+          - generic [ref=e75]: "27"
+          - generic [ref=e76]: "28"
+          - generic [ref=e77]: "29"
+          - generic [ref=e78]: "30"
+      - generic [ref=e80]:
+        - tablist [ref=e81]:
+          - tab "⚔️ Spire" [ref=e82]
+          - tab "✨ Attune" [ref=e83]
+          - tab "🗿 Golems" [ref=e84]
+          - tab "📚 Skills" [ref=e85]
+          - tab "🔮 Spells" [ref=e86]
+          - tab "🛡️ Gear" [ref=e87]
+          - tab "🔧 Craft" [active] [selected] [ref=e88]
+          - tab "💎 Loot" [ref=e89]
+          - tab "🏆 Achieve" [ref=e90]
+          - tab "📊 Stats" [ref=e91]
+          - tab "🐛 Debug" [ref=e92]
+          - tab "📖 Grimoire" [ref=e93]
+        - tabpanel "🔧 Craft" [ref=e94]:
+          - generic [ref=e95]:
+            - generic [ref=e97]:
+              - button "Fabricate" [ref=e98]:
+                - img
+                - text: Fabricate
+              - button "Enchant" [ref=e99]:
+                - img
+                - text: Enchant
+            - generic [ref=e100]:
+              - generic [ref=e101]:
+                - generic [ref=e103]:
+                  - img [ref=e104]
+                  - text: Available Blueprints
+                - generic [ref=e113]:
+                  - img [ref=e114]
+                  - paragraph [ref=e118]: No blueprints discovered yet.
+                  - paragraph [ref=e119]: Defeat guardians to find blueprints!
+              - generic [ref=e120]:
+                - generic [ref=e122]:
+                  - img [ref=e123]
+                  - text: Materials (0)
+                - generic [ref=e131]:
+                  - img [ref=e132]
+                  - paragraph [ref=e134]: No materials collected yet.
+                  - paragraph [ref=e135]: Defeat floors to gather materials!
+  - region "Notifications (F8)":
+    - list
+  - region "Notifications (F8)":
+    - list
+  - button "Open Next.js Dev Tools" [ref=e141] [cursor=pointer]:
+    - img [ref=e142]
+  - alert [ref=e145]
+```
+
+# Test source
+
+```ts
+  1   | import { test, expect } from '@playwright/test';
+  2   | 
+  3   | /**
+  4   |  * E2E tests for the 3-step enchantment flow:
+  5   |  * Design → Prepare → Apply
+  6   |  *
+  7   |  * These tests validate the core crafting loop works end-to-end.
+  8   |  */
+  9   | 
+  10  | test.describe('Enchanting Flow', () => {
+  11  |   /**
+  12  |    * Before each test, ensure we start with a clean state.
+  13  |    * The game persists state in localStorage, so we clear it.
+  14  |    */
+  15  |   test.beforeEach(async ({ page }) => {
+  16  |     await page.goto('/');
+  17  |     // Clear game state to ensure a fresh start
+  18  |     await page.evaluate(() => {
+  19  |       Object.keys(localStorage)
+  20  |         .filter((k) => k.startsWith('mana-loop-'))
+  21  |         .forEach((k) => localStorage.removeItem(k));
+  22  |     });
+  23  |     await page.reload();
+  24  |     // Wait for the game to initialize
+  25  |     await page.waitForLoadState('networkidle');
+  26  |   });
+  27  | 
+  28  |   test('can navigate to Crafting tab', async ({ page }) => {
+  29  |     // The tab bar contains a "Craft" tab
+  30  |     const craftTab = page.getByRole('tab', { name: /🔧 Craft/ });
+  31  |     await expect(craftTab).toBeVisible();
+  32  |     await craftTab.click();
+  33  | 
+  34  |     // Verify we're on the crafting tab by checking for sub-tabs
+  35  |     const fabricateBtn = page.getByRole('button', { hasText: 'Fabricate' });
+  36  |     const enchantBtn = page.getByRole('button', { hasText: 'Enchant' });
+  37  |     await expect(fabricateBtn).toBeVisible();
+  38  |     await expect(enchantBtn).toBeVisible();
+  39  |   });
+  40  | 
+  41  |   test('can switch to Enchant sub-tab and see design UI', async ({ page }) => {
+  42  |     await page.goto('/');
+  43  |     await page.evaluate(() => {
+  44  |       Object.keys(localStorage)
+  45  |         .filter((k) => k.startsWith('mana-loop-'))
+  46  |         .forEach((k) => localStorage.removeItem(k));
+  47  |     });
+  48  |     await page.reload();
+  49  |     await page.waitForLoadState('networkidle');
+  50  | 
+  51  |     // Navigate to Crafting tab
+  52  |     await page.getByRole('tab', { name: /🔧 Craft/ }).click();
+  53  | 
+  54  |     // Click Enchant sub-tab
+  55  |     const enchantBtn = page.getByRole('button', { hasText: 'Enchant' });
+  56  |     await enchantBtn.click();
+  57  | 
+  58  |     // Should see the design stage UI
+  59  |     const designBtn = page.getByRole('button', { hasText: 'Design' });
+  60  |     const prepareBtn = page.getByRole('button', { hasText: 'Prepare' });
+  61  |     const applyBtn = page.getByRole('button', { hasText: 'Apply' });
+  62  |     await expect(designBtn).toBeVisible();
+  63  |     await expect(prepareBtn).toBeVisible();
+  64  |     await expect(applyBtn).toBeVisible();
+  65  |   });
+  66  | 
+  67  |   test('can select equipment type and effect in Design stage', async ({ page }) => {
+  68  |     await page.goto('/');
+  69  |     await page.evaluate(() => {
+  70  |       Object.keys(localStorage)
+  71  |         .filter((k) => k.startsWith('mana-loop-'))
+  72  |         .forEach((k) => localStorage.removeItem(k));
+  73  |     });
+  74  |     await page.reload();
+  75  |     await page.waitForLoadState('networkidle');
+  76  | 
+  77  |     // Navigate to Crafting > Enchant > Design
+  78  |     await page.getByRole('tab', { name: /🔧 Craft/ }).click();
+  79  |     await page.getByRole('button', { hasText: 'Enchant' }).click();
+  80  | 
+  81  |     // The design section should show effect selectors once an equipment type is chosen
+  82  |     // Look for any element matching equipment type buttons and effect-related content
+  83  |     const equipmentButtons = page.locator('button:has-text("Basic Staff"), button:has-text("Apprentice Wand"), button:has-text("Oak Staff"), button:has-text("Crystal Wand")');
+  84  |     const count = await equipmentButtons.count();
+  85  |     expect(count).toBeGreaterThan(0);
+  86  |   });
+  87  | 
+  88  |   test('can navigate through all 3 enchant stages', async ({ page }) => {
+  89  |     await page.goto('/');
+  90  |     await page.evaluate(() => {
+  91  |       Object.keys(localStorage)
+  92  |         .filter((k) => k.startsWith('mana-loop-'))
+  93  |         .forEach((k) => localStorage.removeItem(k));
+  94  |     });
+  95  |     await page.reload();
+  96  |     await page.waitForLoadState('networkidle');
+  97  | 
+  98  |     // Navigate to Crafting > Enchant
+  99  |     await page.getByRole('tab', { name: /🔧 Craft/ }).click();
+> 100 |     await page.getByRole('button', { hasText: 'Enchant' }).click();
+      |                                                            ^ Error: locator.click: Error: strict mode violation: getByRole('button') resolved to 6 elements:
+  101 | 
+  102 |     // Verify Design stage is active
+  103 |     const designBtn = page.getByRole('button', { hasText: 'Design' });
+  104 |     await expect(designBtn).toBeVisible();
+  105 | 
+  106 |     // Switch to Prepare stage
+  107 |     const prepareBtn = page.getByRole('button', { hasText: 'Prepare' });
+  108 |     await prepareBtn.click();
+  109 | 
+  110 |     // Should see preparation UI
+  111 |     const prepareHeading = page.locator('text=Select Equipment to Prepare');
+  112 |     await expect(prepareHeading).toBeVisible({ timeout: 5000 });
+  113 | 
+  114 |     // Switch to Apply stage
+  115 |     const applyBtn = page.getByRole('button', { hasText: 'Apply' });
+  116 |     await applyBtn.click();
+  117 | 
+  118 |     // Should see application UI
+  119 |     const applyHeading = page.locator('text=Select Equipment & Design');
+  120 |     await expect(applyHeading).toBeVisible({ timeout: 5000 });
+  121 |   });
+  122 | });
+```

playwright.config.ts

@@ -0,0 +1,22 @@
+import { defineConfig, devices } from '@playwright/test';
+
+export default defineConfig({
+  testDir: 'e2e',
+  fullyParallel: true,
+  forbidOnly: !!process.env.CI,
+  retries: process.env.CI ? 2 : 0,
+  workers: process.env.CI ? 1 : undefined,
+  reporter: 'html',
+  use: {
+    baseURL: 'http://localhost:3000',
+    trace: 'on-first-retry',
+    screenshot: 'only-on-failure',
+    video: 'retain-on-failure',
+  },
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] },
+    },
+  ],
+});

prisma/schema.prisma

@@ -1,32 +0,0 @@
-// This is your Prisma schema file,
-// learn more about it in the docs: https://pris.ly/d/prisma-schema
-
-// Looking for ways to speed up your queries, or scale easily with your serverless or edge functions?
-// Try Prisma Accelerate: https://pris.ly/cli/accelerate-init
-
-generator client {
-  provider = "prisma-client-js"
-}
-
-datasource db {
-  provider = "sqlite"
-  url      = env("DATABASE_URL")
-}
-
-model User {
-  id        String   @id @default(cuid())
-  email     String   @unique
-  name      String?
-  createdAt DateTime @default(now())
-  updatedAt DateTime @updatedAt
-}
-
-model Post {
-  id        String   @id @default(cuid())
-  title     String
-  content   String?
-  published Boolean  @default(false)
-  authorId  String
-  createdAt DateTime @default(now())
-  updatedAt DateTime @updatedAt
-}

src/app/api/route.ts

@@ -1,5 +0,0 @@
-import { NextResponse } from "next/server";
-
-export async function GET() {
-  return NextResponse.json({ message: "Hello, world!" });
-}

src/app/components/GameOverScreen.tsx

@@ -0,0 +1,63 @@
+'use client';
+
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { fmt } from '@/lib/game/stores';
+import { useGameStore } from '@/lib/game/stores';
+
+interface GameOverScreenProps {
+  day: number;
+  hour: number;
+  insightGained: number;
+  totalInsight: number;
+}
+
+export function GameOverScreen({ day, hour, insightGained, totalInsight }: GameOverScreenProps) {
+  const startNewLoop = () => {
+    useGameStore.getState().startNewLoop();
+  };
+
+  return (
+    <div className="fixed inset-0 game-overlay flex items-center justify-center z-50">
+      <Card className="bg-gray-900 border-gray-600 max-w-md w-full mx-4 shadow-2xl">
+        <CardHeader>
+          <CardTitle className="text-3xl text-center game-title text-amber-400">
+            LOOP ENDS
+          </CardTitle>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <p className="text-center text-gray-400">
+            The time loop resets... but you remember.
+          </p>
+
+          <div className="grid grid-cols-2 gap-3">
+            <div className="p-3 bg-gray-800 rounded">
+              <div className="text-xl font-bold text-amber-400 game-mono">{fmt(insightGained)}</div>
+              <div className="text-xs text-gray-400">Insight Gained</div>
+            </div>
+            <div className="p-3 bg-gray-800 rounded">
+              <div className="text-xl font-bold text-blue-400 game-mono">{day}</div>
+              <div className="text-xs text-gray-400">Day Reached</div>
+            </div>
+            <div className="p-3 bg-gray-800 rounded">
+              <div className="text-xl font-bold text-purple-400 game-mono">{hour}</div>
+              <div className="text-xs text-gray-400">Hour</div>
+            </div>
+            <div className="p-3 bg-gray-800 rounded">
+              <div className="text-xl font-bold text-green-400 game-mono">{fmt(totalInsight)}</div>
+              <div className="text-xs text-gray-400">Total Insight</div>
+            </div>
+          </div>
+
+          <Button
+            className="w-full bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700"
+            size="lg"
+            onClick={startNewLoop}
+          >
+            Begin New Loop
+          </Button>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

src/app/components/GrimoireTab.tsx

@@ -0,0 +1,77 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { ScrollArea } from '@/components/ui/scroll-area';
+import { Badge } from '@/components/ui/badge';
+import { DebugName } from '@/components/game/debug/debug-context';
+import { SPELLS_DEF } from '@/lib/game/constants';
+import type { SpellDef } from '@/lib/game/types';
+
+export function GrimoireTab() {
+  const [grimoireSpells, setGrimoireSpells] = useState<[string, SpellDef][]>([]);
+  const [loaded, setLoaded] = useState(false);
+
+  useEffect(() => {
+    if (typeof window !== 'undefined' && SPELLS_DEF) {
+      setGrimoireSpells(
+        Object.entries(SPELLS_DEF).filter((entry): entry is [string, SpellDef] => !!entry[1].grimoire)
+      );
+    }
+    setLoaded(true);
+  }, []);
+
+  if (!loaded) {
+    return <div className="p-4 text-center text-gray-400">Loading grimoire...</div>;
+  }
+
+  if (grimoireSpells.length === 0) {
+    return (
+      <div className="p-4 text-center text-gray-400">
+        No grimoire spells available yet. Defeat guardians to unlock spells.
+      </div>
+    );
+  }
+
+  const availablePages = Math.ceil(grimoireSpells.length / 12);
+
+  return (
+    <DebugName name="GrimoireTab">
+      <div className="space-y-4">
+        <div className="text-sm text-gray-400">
+          <p className="mb-2">A vast tome of arcane knowledge. Study carefully — each spell costs insight to transcribe into your repertoire.</p>
+          <p>Available pages: {availablePages}. Spells in grimoire: {grimoireSpells.length}.</p>
+        </div>
+
+        <ScrollArea className="h-[600px] rounded border border-gray-700 p-4">
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+            {grimoireSpells.map(([id, spell]) => (
+              <div
+                key={id}
+                className="p-4 bg-gray-800/50 rounded border border-gray-600 hover:border-gray-500 transition-colors"
+              >
+                <div className="flex items-start justify-between mb-2">
+                  <span className="font-bold text-gray-100">{spell.name}</span>
+                  <Badge variant="outline" className="border-gray-600">
+                    {spell.elem}
+                  </Badge>
+                </div>
+                {spell.desc && <p className="text-sm text-gray-400 mb-3">{spell.desc}</p>}
+                <div className="text-xs text-gray-500 space-y-1">
+                  <div>Cost: {spell.cost.amount} {
+                    spell.cost.type === 'element'
+                      ? spell.cost.element
+                      : 'raw mana'
+                  }</div>
+                  <div>Power: {spell.dmg}</div>
+                  {spell.effects && spell.effects.length > 0 && (
+                    <div>Effects: {spell.effects.map(e => e.type).join(', ')}</div>
+                  )}
+                </div>
+              </div>
+            ))}
+          </div>
+        </ScrollArea>
+      </div>
+    </DebugName>
+  );
+}

src/app/components/LeftPanel.tsx

@@ -0,0 +1,126 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { Button } from '@/components/ui/button';
+import { Mountain } from 'lucide-react';
+import { Card, CardContent } from '@/components/ui/card';
+import { ManaDisplay } from '@/components/game';
+import { ActionButtons } from '@/components/game';
+import { AttunementStatus } from '@/components/game/AttunementStatus';
+import { ActivityLogPanel } from '@/components/game/ActivityLogPanel';
+import { DebugName } from '@/components/game/debug/debug-context';
+import { useGameStore, useManaStore, useCombatStore, useCraftingStore, usePrestigeStore } from '@/lib/game/stores';
+import { computeDisciplineEffects } from '@/lib/game/effects/discipline-effects';
+import { getUnifiedEffects } from '@/lib/game/effects';
+import { getMeditationBonus, getIncursionStrength } from '@/lib/game/stores';
+import { computeTotalMaxMana, computeTotalRegen, computeTotalClickMana } from '@/lib/game/effects';
+
+export function LeftPanel() {
+  const [isGathering, setIsGathering] = useState(false);
+
+  const rawMana = useManaStore((s) => s.rawMana);
+  const elements = useManaStore((s) => s.elements);
+  const meditateTicks = useManaStore((s) => s.meditateTicks);
+  const prestigeUpgrades = usePrestigeStore((s) => s.prestigeUpgrades);
+  const equippedInstances = useCraftingStore((s) => s.equippedInstances);
+  const equipmentInstances = useCraftingStore((s) => s.equipmentInstances);
+  const gatherMana = useGameStore((s) => s.gatherMana);
+  const spireMode = useCombatStore((s) => s.spireMode);
+  const enterSpireMode = useCombatStore((s) => s.enterSpireMode);
+  const currentAction = useCombatStore((s) => s.currentAction);
+  const designProgress = useCraftingStore((s) => s.designProgress);
+  const designProgress2 = useCraftingStore((s) => s.designProgress2);
+  const preparationProgress = useCraftingStore((s) => s.preparationProgress);
+  const applicationProgress = useCraftingStore((s) => s.applicationProgress);
+  const equipmentCraftingProgress = useCraftingStore((s) => s.equipmentCraftingProgress);
+
+  const handleGatherStart = () => { setIsGathering(true); gatherMana(); };
+  const handleGatherEnd = () => { setIsGathering(false); };
+
+  useEffect(() => {
+    if (!isGathering) return;
+    let lastGatherTime = 0;
+    const minGatherInterval = 100;
+    let animationFrameId: number;
+    const gatherLoop = (timestamp: number) => {
+      if (timestamp - lastGatherTime >= minGatherInterval) {
+        gatherMana();
+        lastGatherTime = timestamp;
+      }
+      animationFrameId = requestAnimationFrame(gatherLoop);
+    };
+    animationFrameId = requestAnimationFrame(gatherLoop);
+    return () => cancelAnimationFrame(animationFrameId);
+  }, [isGathering, gatherMana]);
+
+  const upgradeEffects = getUnifiedEffects({ skillUpgrades: {}, skillTiers: {}, equippedInstances, equipmentInstances });
+  const maxMana = computeTotalMaxMana({ skills: {}, prestigeUpgrades, skillUpgrades: {}, skillTiers: {}, equippedInstances, equipmentInstances }, upgradeEffects);
+  const baseRegen = computeTotalRegen({ skills: {}, prestigeUpgrades, skillUpgrades: {}, skillTiers: {}, equippedInstances, equipmentInstances }, upgradeEffects);
+  const clickMana = computeTotalClickMana({ skills: {}, skillUpgrades: {}, skillTiers: {}, equippedInstances, equipmentInstances }, upgradeEffects);
+  const meditationMultiplier = getMeditationBonus(meditateTicks, {}, upgradeEffects.meditationEfficiency);
+  const incursionStrength = getIncursionStrength(useGameStore((s) => s.day), useGameStore((s) => s.hour));
+  const effectiveRegen = baseRegen * (1 - incursionStrength) * meditationMultiplier;
+
+  return (
+    <div className="md:w-80 space-y-3 flex-shrink-0 p-1">
+      {/* 1. Mana Display */}
+      <DebugName name="ManaDisplay">
+        <ManaDisplay
+          rawMana={rawMana}
+          maxMana={maxMana}
+          effectiveRegen={effectiveRegen}
+          meditationMultiplier={meditationMultiplier}
+          clickMana={clickMana}
+          isGathering={isGathering}
+          onGatherStart={handleGatherStart}
+          onGatherEnd={handleGatherEnd}
+          elements={elements}
+        />
+      </DebugName>
+
+      {/* 2. Spire Entry */}
+      {!spireMode && (
+        <DebugName name="ClimbSpireButton">
+          <Button className="w-full bg-gradient-to-r from-amber-600 to-orange-600 hover:from-amber-700 hover:to-orange-600 text-white" size="lg" onClick={enterSpireMode}>
+            <Mountain className="w-5 h-5 mr-2" />
+            Climb the Spire
+          </Button>
+        </DebugName>
+      )}
+
+      {/* 3. Current Action */}
+      {!spireMode && (
+        <DebugName name="ActionButtons">
+          <Card className="bg-[var(--bg-surface)] border-[var(--border-subtle)]">
+            <CardContent className="pt-3">
+              <ActionButtons
+                currentAction={currentAction}
+                designProgress={designProgress}
+                designProgress2={designProgress2}
+                preparationProgress={preparationProgress}
+                applicationProgress={applicationProgress}
+                equipmentCraftingProgress={equipmentCraftingProgress}
+              />
+            </CardContent>
+          </Card>
+        </DebugName>
+      )}
+
+      {/* 4. Attunement Status */}
+      {!spireMode && (
+        <DebugName name="AttunementStatus">
+          <Card className="bg-[var(--bg-surface)] border-[var(--border-subtle)]">
+            <CardContent className="pt-3">
+              <AttunementStatus />
+            </CardContent>
+          </Card>
+        </DebugName>
+      )}
+
+      {/* 5. Activity Log */}
+      <DebugName name="ActivityLogPanel">
+        <ActivityLogPanel />
+      </DebugName>
+    </div>
+  );
+}

src/app/globals.css

@@ -1,48 +1,24 @@
-@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700;900&family=Crimson+Text:ital,wght@0,400;0,600;1,400&family=JetBrains+Mono:wght@400;500&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700;900&family=Crimson+Text:ital,wght@0,400;0,600;1,400&family=JetBrains+Mono:wght@400;500&family=Source+Serif+4:ital,wght@0,400;0,600;1,400&display=swap');
 
 @import "tailwindcss";
 @import "tw-animate-css";
 
-@custom-variant dark (&:is(.dark *));
-
 @theme inline {
   --color-background: var(--background);
   --color-foreground: var(--foreground);
-  --font-sans: var(--font-geist-sans);
-  --font-mono: var(--font-geist-mono);
-  --color-sidebar-ring: var(--sidebar-ring);
-  --color-sidebar-border: var(--sidebar-border);
-  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
-  --color-sidebar-accent: var(--sidebar-accent);
-  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
-  --color-sidebar-primary: var(--sidebar-primary);
-  --color-sidebar-foreground: var(--sidebar-foreground);
-  --color-sidebar: var(--sidebar);
-  --color-chart-5: var(--chart-5);
-  --color-chart-4: var(--chart-4);
-  --color-chart-3: var(--chart-3);
-  --color-chart-2: var(--chart-2);
-  --color-chart-1: var(--chart-1);
-  --color-ring: var(--ring);
-  --color-input: var(--input);
-  --color-border: var(--border);
-  --color-destructive: var(--destructive);
-  --color-accent-foreground: var(--accent-foreground);
-  --color-accent: var(--accent);
-  --color-muted-foreground: var(--muted-foreground);
-  --color-muted: var(--muted);
-  --color-secondary-foreground: var(--secondary-foreground);
-  --color-secondary: var(--secondary);
-  --color-primary-foreground: var(--primary-foreground);
-  --color-primary: var(--primary);
-  --color-popover-foreground: var(--popover-foreground);
-  --color-popover: var(--popover);
-  --color-card-foreground: var(--card-foreground);
   --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-destructive: var(--destructive);
   --radius-sm: calc(var(--radius) - 4px);
   --radius-md: calc(var(--radius) - 2px);
   --radius-lg: var(--radius);
-  --radius-xl: calc(var(--radius) + 4px);
 }
 
 :root {
@@ -111,9 +87,9 @@
   --interactive-disabled: #1e2a45;
   
   /* === Typography === */
-  --font-heading: 'Cinzel', serif;
-  --font-body: 'Crimson Text', Georgia, serif;
-  --font-mono: 'JetBrains Mono', monospace;
+  --font-display: 'Cinzel', serif;
+  --font-body: 'Source Serif 4', 'Crimson Text', Georgia, serif;
+  --font-ui: 'JetBrains Mono', monospace;
   
   /* === Shadow System === */
   --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
@@ -123,6 +99,14 @@
   --shadow-glow-purple: 0 0 15px rgba(124, 92, 191, 0.4);
   --shadow-glow-accent: 0 0 15px rgba(60, 111, 232, 0.4);
   
+  /* === Mana Loop Design Tokens (Strategy Spec) === */
+  --bg-void: #0d0d0f;
+  --bg-panel: #141418;
+  --bg-raised: #242430;
+  --mana-raw: #8b7fd4;
+  --mana-transference: #1abc9c;
+  --border-accent: rgba(255, 255, 255, 0.22);
+
   /* === Legacy Shadcn Variables (mapped to new system) === */
   --background: var(--bg-base);
   --foreground: var(--text-primary);
@@ -176,128 +160,19 @@
   --game-success: var(--color-success);
 }
 
-.dark {
-  /* Same as :root - we're always in dark mode for this game */
-  --bg-base: #060811;
-  --bg-surface: #0C1020;
-  --bg-elevated: #111628;
-  --bg-sunken: #181f35;
-  --border-subtle: #1e2a45;
-  --border-default: #2a3a60;
-  --border-focus: #5B8FFF;
-  --text-primary: #c8d8f8;
-  --text-secondary: #7a92c0;
-  --text-muted: #4a5f8a;
-  --text-disabled: #2a3a60;
-  --mana-fire: #E8734A;
-  --mana-water: #3BAFDA;
-  --mana-air: #C8D8F8;
-  --mana-earth: #B8860B;
-  --mana-light: #D4A843;
-  --mana-dark: #4B0082;
-  --mana-death: #8B7D8B;
-  --mana-transfer: #00CED1;
-  --mana-metal: #708090;
-  --mana-sand: #C2B280;
-  --mana-lightning: #FFD700;
-  --mana-crystal: #B0E0E6;
-  --mana-stellar: #FF8C00;
-  --mana-void: #1A0A2E;
-  --color-success: #27AE60;
-  --color-warning: #F39C12;
-  --color-danger: #C0392B;
-  --color-info: #3B6FE8;
-  --rarity-common: #9CA3AF;
-  --rarity-common-glow: rgba(156, 163, 175, 0.25);
-  --rarity-uncommon: #22C55E;
-  --rarity-uncommon-glow: rgba(34, 197, 94, 0.25);
-  --rarity-rare: #3B82F6;
-  --rarity-rare-glow: rgba(59, 130, 246, 0.25);
-  --rarity-epic: #A855F7;
-  --rarity-epic-glow: rgba(168, 85, 247, 0.25);
-  --rarity-legendary: #F59E0B;
-  --rarity-legendary-glow: rgba(245, 158, 11, 0.375);
-  --rarity-mythic: #E8734A;
-  --rarity-mythic-glow: rgba(232, 115, 74, 0.25);
-  --interactive-primary: #5B8FFF;
-  --interactive-primary-hover: #7BAFFF;
-  --interactive-secondary: #2a3a60;
-  --interactive-secondary-hover: #3a4a70;
-  --interactive-danger: #C0392B;
-  --interactive-danger-hover: #E74C3C;
-  --interactive-disabled: #1e2a45;
-  --font-heading: 'Cinzel', serif;
-  --font-body: 'Crimson Text', Georgia, serif;
-  --font-mono: 'JetBrains Mono', monospace;
-  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
-  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4);
-  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.5);
-  --shadow-glow-gold: 0 0 15px rgba(212, 168, 67, 0.4);
-  --shadow-glow-purple: 0 0 15px rgba(124, 92, 191, 0.4);
-  --shadow-glow-accent: 0 0 15px rgba(60, 111, 232, 0.4);
-  --background: var(--bg-base);
-  --foreground: var(--text-primary);
-  --card: var(--bg-surface);
-  --card-foreground: var(--text-primary);
-  --popover: var(--bg-elevated);
-  --popover-foreground: var(--text-primary);
-  --primary: var(--interactive-primary);
-  --primary-foreground: #ffffff;
-  --secondary: var(--bg-sunken);
-  --secondary-foreground: var(--text-primary);
-  --muted: var(--bg-sunken);
-  --muted-foreground: var(--text-secondary);
-  --accent: var(--interactive-secondary);
-  --accent-foreground: var(--text-primary);
-  --destructive: var(--color-danger);
-  --border: var(--border-subtle);
-  --input: var(--border-subtle);
-  --ring: var(--border-focus);
-  --chart-1: var(--mana-fire);
-  --chart-2: var(--mana-water);
-  --chart-3: var(--mana-light);
-  --chart-4: var(--color-success);
-  --chart-5: var(--mana-lightning);
-  --sidebar: var(--bg-surface);
-  --sidebar-foreground: var(--text-primary);
-  --sidebar-primary: var(--mana-light);
-  --sidebar-primary-foreground: #0C1020;
-  --sidebar-accent: var(--interactive-secondary);
-  --sidebar-accent-foreground: var(--text-primary);
-  --sidebar-border: var(--border-subtle);
-  --sidebar-ring: var(--mana-light);
-  --game-bg: var(--bg-base);
-  --game-bg1: var(--bg-surface);
-  --game-bg2: var(--bg-elevated);
-  --game-bg3: var(--bg-sunken);
-  --game-border: var(--border-subtle);
-  --game-border2: var(--border-default);
-  --game-text: var(--text-primary);
-  --game-text2: var(--text-secondary);
-  --game-text3: var(--text-muted);
-  --game-gold: var(--mana-light);
-  --game-gold2: #A87830;
-  --game-purple: #7C5CBF;
-  --game-purpleL: #A07EE0;
-  --game-accent: var(--interactive-primary);
-  --game-accentL: var(--interactive-primary-hover);
-  --game-danger: var(--color-danger);
-  --game-success: var(--color-success);
-}
-
 @layer base {
   * {
     @apply border-border outline-ring/50;
   }
   body {
     @apply bg-background text-foreground;
-    font-family: 'Crimson Text', Georgia, serif;
+    font-family: var(--font-body);
   }
 }
 
 /* Game-specific styles */
 .game-root {
-  font-family: 'Crimson Text', Georgia, serif;
+  font-family: var(--font-body);
   background: var(--game-bg);
   color: var(--game-text);
   min-height: 100vh;
@@ -311,7 +186,7 @@
 }
 
 .game-title {
-  font-family: 'Cinzel', serif;
+  font-family: var(--font-display);
   background: linear-gradient(135deg, var(--game-gold) 0%, var(--game-purpleL) 50%, var(--game-accentL) 100%);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
@@ -319,13 +194,13 @@
 }
 
 .game-panel-title {
-  font-family: 'Cinzel', serif;
+  font-family: var(--font-display);
   letter-spacing: 2px;
   text-transform: uppercase;
 }
 
 .game-mono {
-  font-family: 'JetBrains Mono', monospace;
+  font-family: var(--font-ui);
 }
 
 /* Scrollbar */

src/app/layout.tsx

@@ -1,18 +1,18 @@
 import type { Metadata } from "next";
-import { Geist, Geist_Mono } from "next/font/google";
+import localFont from "next/font/local";
 import "./globals.css";
 import { Toaster } from "@/components/ui/toaster";
 import { GameToaster } from "@/components/game/GameToast";
-import { DebugProvider } from "@/lib/game/debug-context";
+import { DebugProvider } from "@/components/game/debug/debug-context";
 
-const geistSans = Geist({
-  variable: "--font-geist-sans",
-  subsets: ["latin"],
+const geistSans = localFont({
+  src: '../../public/fonts/GeistVF.woff',
+  variable: '--font-geist-sans',
 });
 
-const geistMono = Geist_Mono({
-  variable: "--font-geist-mono",
-  subsets: ["latin"],
+const geistMono = localFont({
+  src: '../../public/fonts/GeistMonoVF.woff',
+  variable: '--font-geist-mono',
 });
 
 export const metadata: Metadata = {

src/app/page.tsx

@@ -1,620 +1,237 @@
 'use client';
 
 import { useEffect, useState, lazy, Suspense } from 'react';
-import { useGameStore, useGameLoop, fmt, getFloorElement, computeMaxMana, computeRegen, computeClickMana, getMeditationBonus, getIncursionStrength, canAffordSpellCost } from '@/lib/game/store';
-import { ActivityLogEntry } from '@/lib/game/types';
-import { getActiveEquipmentSpells, getTotalDPS } from '@/lib/game/computed-stats';
+import { useShallow } from 'zustand/react/shallow';
 
-import { ELEMENTS, GUARDIANS, SPELLS_DEF, PRESTIGE_DEF, getStudySpeedMultiplier, getStudyCostMultiplier } from '@/lib/game/constants';
+import {
+  useGameStore,
+  useUIStore,
+  useManaStore,
+  useCombatStore,
+  usePrestigeStore,
+  useCraftingStore,
+  fmt,
+  computeMaxMana,
+  computeRegen,
+  computeClickMana,
+  getMeditationBonus,
+  getIncursionStrength,
+} from '@/lib/game/stores';
+import { computeDisciplineEffects } from '@/lib/game/effects/discipline-effects';
+import { useGameLoop } from '@/lib/game/stores/gameHooks';
+import { getUnifiedEffects } from '@/lib/game/effects';
+import { hasSpecial, SPECIAL_EFFECTS } from '@/lib/game/effects';
+import { TimeDisplay } from '@/components/game';
 
-import { getUnifiedEffects, hasSpecial, SPECIAL_EFFECTS } from '@/lib/game/effects';
-
-import { Button } from '@/components/ui/button';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
-import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
-import { Badge } from '@/components/ui/badge';
-import { ScrollArea } from '@/components/ui/scroll-area';
-import { RotateCcw, Mountain, ChevronDown } from 'lucide-react';
 import { TooltipProvider } from '@/components/ui/tooltip';
-import { DebugName } from '@/lib/game/debug-context';
-// Non-tab component imports
-import { ActionButtons, CalendarDisplay, ManaDisplay, TimeDisplay } from '@/components/game';
-// Loot and Achievements moved to separate tabs
+import { ErrorBoundary } from '@/components/ErrorBoundary';
+import { DebugName } from '@/components/game/debug/debug-context';
+
+import { GameOverScreen } from './components/GameOverScreen';
+import { LeftPanel } from './components/LeftPanel';
+import { GrimoireTab } from './components/GrimoireTab';
 
 // Lazy load tab components
-const SpireTab = lazy(() => import('@/components/game/tabs').then(module => ({ default: module.SpireTab })));
-const SkillsTab = lazy(() => import('@/components/game/tabs').then(module => ({ default: module.SkillsTab })));
-const SpellsTab = lazy(() => import('@/components/game/tabs').then(module => ({ default: module.SpellsTab })));
-const LabTab = lazy(() => import('@/components/game/tabs').then(module => ({ default: module.LabTab })));
-const StatsTab = lazy(() => import('@/components/game/tabs').then(module => ({ default: module.StatsTab })));
-const EquipmentTab = lazy(() => import('@/components/game/tabs').then(module => ({ default: module.EquipmentTab })));
-const AttunementsTab = lazy(() => import('@/components/game/tabs').then(module => ({ default: module.AttunementsTab })));
-const DebugTab = lazy(() => import('@/components/game/tabs').then(module => ({ default: module.DebugTab })));
-const LootTab = lazy(() => import('@/components/game/tabs').then(module => ({ default: module.LootTab })));
-const AchievementsTab = lazy(() => import('@/components/game/tabs').then(module => ({ default: module.AchievementsTab })));
-const GolemancyTab = lazy(() => import('@/components/game/tabs').then(module => ({ default: module.GolemancyTab })));
-const CraftingTab = lazy(() => import('@/components/game/tabs').then(module => ({ default: module.CraftingTab })));
+const DisciplinesTab = lazy(() => import('@/components/game/tabs').then(m => ({ default: m.DisciplinesTab })));
+const SpellsTab = lazy(() => import('@/components/game/tabs').then(m => ({ default: m.SpellsTab })));
+const StatsTab = lazy(() => import('@/components/game/tabs').then(m => ({ default: m.StatsTab })));
+const DebugTab = lazy(() => import('@/components/game/tabs').then(m => ({ default: m.DebugTab })));
+const AchievementsTab = lazy(() => import('@/components/game/tabs').then(m => ({ default: m.AchievementsTab })));
+const AttunementsTab = lazy(() => import('@/components/game/tabs').then(m => ({ default: m.AttunementsTab })));
+const PrestigeTab = lazy(() => import('@/components/game/tabs').then(m => ({ default: m.PrestigeTab })));
+const EquipmentTab = lazy(() => import('@/components/game/tabs').then(m => ({ default: m.EquipmentTab })));
+const GolemancyTab = lazy(() => import('@/components/game/tabs').then(m => ({ default: m.GolemancyTab })));
+const GuardianPactsTab = lazy(() => import('@/components/game/tabs').then(m => ({ default: m.GuardianPactsTab })));
+const SpireSummaryTab = lazy(() => import('@/components/game/tabs').then(m => ({ default: m.SpireSummaryTab })));
+const CraftingTab = lazy(() => import('@/components/game/tabs').then(m => ({ default: m.CraftingTab })));
+const SpireCombatPage = lazy(() => import('@/components/game/tabs/SpireCombatPage').then(m => ({ default: m.SpireCombatPage })));
 
-// Loading fallback component
-const TabLoadingFallback = () => <div className="p-4 text-center text-gray-400">Loading...</div>;
+const TabFallback = () => <div className="p-4 text-center text-gray-400">Loading...</div>;
 
-export default function ManaLoopGame() {
-  const [activeTab, setActiveTab] = useState('spire');
-  const [isGathering, setIsGathering] = useState(false);
+function TabErrorFallback({ name }: { name: string }) {
+  return <div className="p-4 text-red-400">{name} tab failed to load.</div>;
+}
 
-  // Game store
-  const store = useGameStore();
-  const gameLoop = useGameLoop();
+// ─── Derived Stats Hook ──────────────────────────────────────────────────────
 
-  // Computed effects from upgrades and equipment
-  const upgradeEffects = getUnifiedEffects(store);
+function useGameDerivedStats() {
+  const { prestigeUpgrades } = usePrestigeStore(useShallow(s => ({
+    prestigeUpgrades: s.prestigeUpgrades,
+  })));
+  const { meditateTicks } = useManaStore(useShallow(s => ({
+    meditateTicks: s.meditateTicks,
+  })));
+  const equippedInstances = useCraftingStore((s) => s.equippedInstances);
+  const equipmentInstances = useCraftingStore((s) => s.equipmentInstances);
+  const day = useGameStore((s) => s.day);
+  const hour = useGameStore((s) => s.hour);
 
-  // Derived stats
-  const maxMana = computeMaxMana(store, upgradeEffects);
-  const baseRegen = computeRegen(store, upgradeEffects);
-  const clickMana = computeClickMana(store);
-  const floorElem = getFloorElement(store.currentFloor);
-  const floorElemDef = ELEMENTS[floorElem];
-  const isGuardianFloor = !!GUARDIANS[store.currentFloor];
-  const currentGuardian = GUARDIANS[store.currentFloor];
-  const meditationMultiplier = getMeditationBonus(store.meditateTicks, store.skills, upgradeEffects.meditationEfficiency);
-  const incursionStrength = getIncursionStrength(store.day, store.hour);
-  const studySpeedMult = getStudySpeedMultiplier(store.skills);
-  const studyCostMult = getStudyCostMultiplier(store.skills);
+  const upgradeEffects = getUnifiedEffects({
+    skillUpgrades: {},
+    skillTiers: {},
+    equippedInstances,
+    equipmentInstances,
+  });
+
+  const disciplineEffects = computeDisciplineEffects();
+
+  const maxMana = computeMaxMana({
+    skills: {},
+    prestigeUpgrades,
+    skillUpgrades: {},
+    skillTiers: {},
+  }, upgradeEffects, disciplineEffects);
+
+  const baseRegen = computeRegen({
+    skills: {},
+    prestigeUpgrades,
+    skillUpgrades: {},
+    skillTiers: {},
+    attunements: {},
+  }, upgradeEffects, disciplineEffects);
+
+  const clickMana = computeClickMana({ skills: {} }, disciplineEffects);
+  const meditationMultiplier = getMeditationBonus(meditateTicks, {}, upgradeEffects.meditationEfficiency);
+  const incursionStrength = getIncursionStrength(day, hour);
 
-  // Effective regen with incursion penalty
   const effectiveRegenWithSpecials = baseRegen * (1 - incursionStrength);
 
-  // Mana Cascade bonus
   const manaCascadeBonus = hasSpecial(upgradeEffects, SPECIAL_EFFECTS.MANA_CASCADE)
     ? Math.floor(maxMana / 100) * 0.1
     : 0;
 
-  // Effective regen
-  const effectiveRegen = (effectiveRegenWithSpecials + manaCascadeBonus) * meditationMultiplier;
+  const manaWaterfallBonus = hasSpecial(upgradeEffects, SPECIAL_EFFECTS.MANA_WATERFALL)
+    ? Math.floor(maxMana / 100) * 0.25
+    : 0;
 
-  // Get all active spells from equipment
-  const activeEquipmentSpells = getActiveEquipmentSpells(store.equippedInstances, store.equipmentInstances);
+  const effectiveRegen = (effectiveRegenWithSpecials + manaCascadeBonus + manaWaterfallBonus) * meditationMultiplier;
 
-  // Compute total DPS
-  const totalDPS = getTotalDPS(store, upgradeEffects, floorElem);
+  return { maxMana, effectiveRegen, clickMana, meditationMultiplier };
+}
+
+// ─── Tab Triggers ────────────────────────────────────────────────────────────
+
+function TabTriggers() {
+  return (
+    <TabsList className="flex flex-wrap gap-1 w-full mb-4 h-auto">
+      <TabsTrigger value="spells" className="text-xs px-2 py-1">🔮 Spells</TabsTrigger>
+      <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="debug" className="text-xs px-2 py-1">🐛 Debug</TabsTrigger>
+      <TabsTrigger value="attunements" className="text-xs px-2 py-1">⚗️ Attunements</TabsTrigger>
+      <TabsTrigger value="achievements" className="text-xs px-2 py-1">🏆 Achievements</TabsTrigger>
+      <TabsTrigger value="prestige" className="text-xs px-2 py-1">✨ Prestige</TabsTrigger>
+      <TabsTrigger value="equipment" className="text-xs px-2 py-1">⚔️ Equipment</TabsTrigger>
+      <TabsTrigger value="golemancy" className="text-xs px-2 py-1">🗿 Golemancy</TabsTrigger>
+      <TabsTrigger value="pacts" className="text-xs px-2 py-1">📜 Pacts</TabsTrigger>
+      <TabsTrigger value="spire" className="text-xs px-2 py-1">🏔️ Spire</TabsTrigger>
+      <TabsTrigger value="crafting" className="text-xs px-2 py-1">⚒️ Crafting</TabsTrigger>
+    </TabsList>
+  );
+}
+
+// ─── Lazy Tab Content ────────────────────────────────────────────────────────
+
+function LazyTab({ name, children }: { name: string; children: React.ReactNode }) {
+  return (
+    <ErrorBoundary fallback={<TabErrorFallback name={name} />}>
+      <Suspense fallback={<TabFallback />}>
+        {children}
+      </Suspense>
+    </ErrorBoundary>
+  );
+}
+
+// ─── Main Game Component ─────────────────────────────────────────────────────
+
+export default function ManaLoopGame() {
+  const [activeTab, setActiveTab] = useState('spells');
+
+  useGameLoop();
+
+  const { day, hour, initGame } = useGameStore(useShallow(s => ({
+    day: s.day,
+    hour: s.hour,
+    initGame: s.initGame,
+  })));
+  const { insight, loopInsight } = usePrestigeStore(useShallow(s => ({
+    insight: s.insight,
+    loopInsight: s.loopInsight,
+  })));
+  const spireMode = useCombatStore((s) => s.spireMode);
+  const gameOver = useUIStore((s) => s.gameOver);
+
+  useGameDerivedStats();
 
-  // Auto-gather while holding
   useEffect(() => {
-    if (!isGathering) return;
+    initGame();
+  }, [initGame]);
 
-    let lastGatherTime = 0;
-    const minGatherInterval = 100;
-    let animationFrameId: number;
+  const [mounted, setMounted] = useState(false);
+  useEffect(() => { setMounted(true); }, []); // eslint-disable-line react-hooks/set-state-in-effect
 
-    const gatherLoop = (timestamp: number) => {
-      if (timestamp - lastGatherTime >= minGatherInterval) {
-        store.gatherMana();
-        lastGatherTime = timestamp;
-      }
-      animationFrameId = requestAnimationFrame(gatherLoop);
-    };
-    
-    animationFrameId = requestAnimationFrame(gatherLoop);
-    return () => cancelAnimationFrame(animationFrameId);
-  }, [isGathering, store]);
-  
-  // Handle gather button events
-  const handleGatherStart = () => {
-    setIsGathering(true);
-    store.gatherMana();
-  };
-  
-  const handleGatherEnd = () => {
-    setIsGathering(false);
-  };
-  
-  // Start game loop
   useEffect(() => {
-    const cleanup = gameLoop.start();
-    return cleanup;
-  }, [gameLoop]);
+    if (spireMode) {
+      setActiveTab('spells'); // eslint-disable-line react-hooks/set-state-in-effect
+    }
+  }, [spireMode]);
 
-  // Check if spell can be cast
-  const canCastSpell = (spellId: string): boolean => {
-    const spell = SPELLS_DEF[spellId];
-    if (!spell) return false;
-    return canAffordSpellCost(spell.cost, store.rawMana, store.elements);
-  };
+  if (gameOver) {
+    return <GameOverScreen day={day} hour={hour} insightGained={loopInsight} totalInsight={insight} />;
+  }
 
-  // Game Over Screen
-  if (store.gameOver) {
+  if (!mounted) return <div className="p-4 text-center text-gray-400">Loading...</div>;
+
+  if (spireMode) {
     return (
-      <div className="fixed inset-0 game-overlay flex items-center justify-center z-50">
-        <Card className="bg-gray-900 border-gray-600 max-w-md w-full mx-4 shadow-2xl">
-          <CardHeader>
-            <CardTitle className={`text-3xl text-center game-title ${store.victory ? 'text-amber-400' : 'text-red-400'}`}>
-              {store.victory ? 'VICTORY!' : 'LOOP ENDS'}
-            </CardTitle>
-          </CardHeader>
-          <CardContent className="space-y-4">
-            <p className="text-center text-gray-400">
-              {store.victory
-                ? 'The Awakened One falls! Your power echoes through eternity.'
-                : 'The time loop resets... but you remember.'}
-            </p>
-            
-            <div className="grid grid-cols-2 gap-3">
-              <div className="p-3 bg-gray-800 rounded">
-                <div className="text-xl font-bold text-amber-400 game-mono">{fmt(store.loopInsight)}</div>
-                <div className="text-xs text-gray-400">Insight Gained</div>
-              </div>
-              <div className="p-3 bg-gray-800 rounded">
-                <div className="text-xl font-bold text-blue-400 game-mono">{store.maxFloorReached}</div>
-                <div className="text-xs text-gray-400">Best Floor</div>
-              </div>
-              <div className="p-3 bg-gray-800 rounded">
-                <div className="text-xl font-bold text-purple-400 game-mono">{store.signedPacts.length}</div>
-                <div className="text-xs text-gray-400">Pacts Signed</div>
-              </div>
-              <div className="p-3 bg-gray-800 rounded">
-                <div className="text-xl font-bold text-green-400 game-mono">{store.loopCount + 1}</div>
-                <div className="text-xs text-gray-400">Total Loops</div>
-              </div>
-            </div>
-            
-            <Button
-              className="w-full bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700"
-              size="lg"
-              onClick={() => store.startNewLoop()}
-            >
-              Begin New Loop
-            </Button>
-          </CardContent>
-        </Card>
-      </div>
+      <ErrorBoundary>
+        <Suspense fallback={<div className="p-4 text-center text-gray-400">Loading spire...</div>}>
+          <SpireCombatPage />
+        </Suspense>
+      </ErrorBoundary>
     );
   }
 
   return (
-    <TooltipProvider>
-      <div className="game-root min-h-screen flex flex-col">
-        {/* Header */}
-        <header className="sticky top-0 z-50 bg-gradient-to-b from-gray-900 to-gray-900/80 border-b border-gray-700 px-4 py-2">
-          <div className="flex items-center justify-between">
-            <h1 className="text-xl font-bold game-title tracking-wider">MANA LOOP</h1>
-            
-            <div className="flex items-center gap-4">
-              <TimeDisplay
-                day={store.day}
-                hour={store.hour}
-                insight={store.insight}
-              />
+    <ErrorBoundary>
+      <TooltipProvider>
+        <div className="game-root min-h-screen flex flex-col">
+          <header className="sticky top-0 z-50 bg-gradient-to-b from-gray-900 to-gray-900/80 border-b border-gray-700 px-4 py-2">
+            <div className="flex items-center justify-between">
+              <h1 className="text-xl font-bold game-title tracking-wider">MANA LOOP</h1>
+              <div className="flex items-center gap-4">
+                <TimeDisplay day={day} hour={hour} insight={insight} />
+              </div>
             </div>
-          </div>
-        </header>
+          </header>
 
-        {/* Main Content */}
-        <main className="flex-1 flex flex-col md:flex-row gap-4 p-4">
-          {/* Left Panel - Mana & Actions */}
-          <div className="md:w-80 space-y-4 flex-shrink-0">
-            {/* Mana Display */}
-            <DebugName name="ManaDisplay">
-              <ManaDisplay
-                rawMana={store.rawMana}
-                maxMana={maxMana}
-                effectiveRegen={effectiveRegen}
-                meditationMultiplier={meditationMultiplier}
-                clickMana={clickMana}
-                isGathering={isGathering}
-                onGatherStart={handleGatherStart}
-                onGatherEnd={handleGatherEnd}
-                elements={store.elements}
-              />
-            </DebugName>
+          <main className="flex-1 flex flex-col md:flex-row gap-4 p-4">
+            <LeftPanel />
 
-            {/* Climb the Spire Button - only show when not in Spire Mode */}
-            {!store.spireMode && (
-              <DebugName name="ClimbSpireButton">
-                <Button
-                  className="w-full bg-gradient-to-r from-amber-600 to-orange-600 hover:from-amber-700 hover:to-orange-700"
-                  size="lg"
-                  onClick={() => store.enterSpireMode()}
-                >
-                  <Mountain className="w-5 h-5 mr-2" />
-                  Climb the Spire
-                </Button>
-              </DebugName>
-            )}
-
-            {/* Action Buttons - only show when not in Spire Mode */}
-            {!store.spireMode && (
-              <DebugName name="ActionButtons">
-                <ActionButtons
-                  currentAction={store.currentAction}
-                  currentStudyTarget={store.currentStudyTarget}
-                  designProgress={store.designProgress}
-                  designProgress2={store.designProgress2}
-                  preparationProgress={store.preparationProgress}
-                  applicationProgress={store.applicationProgress}
-                  equipmentCraftingProgress={store.equipmentCraftingProgress}
-                />
-              </DebugName>
-            )}
-
-            {/* Calendar */}
-            <DebugName name="CalendarDisplay">
-              <CalendarDisplay
-                day={store.day}
-                hour={store.hour}
-                incursionStrength={incursionStrength}
-              />
-            </DebugName>
-
-            {/* Loot and Achievements moved to tabs */}
-          </div>
-
-          {/* Right Panel - Conditional rendering based on Spire Mode */}
-          {store.spireMode ? (
-            /* Spire Mode - Simplified UI */
-            <div className="flex-1 min-w-0 space-y-4">
-              <DebugName name="SpireModeUI">
-                <div className="flex items-center justify-between mb-4">
-                  <h2 className="text-2xl font-bold game-title text-amber-400">
-                    🏔️ Spire Mode - Floor {store.currentFloor}
-                  </h2>
-                  <div className="flex gap-2 items-center">
-                    {/* Show Climbing indicator when actively climbing */}
-                    {store.currentAction === 'climb' && !store.isDescending && (
-                      <Badge className="bg-green-900/50 text-green-300 border-green-600">
-                        Climbing
-                      </Badge>
-                    )}
-                    <Button
-                      variant="outline"
-                      className="border-blue-600/50 text-blue-400 hover:bg-blue-900/20"
-                      onClick={() => store.climbDownFloor()}
-                      disabled={store.isDescending}
-                    >
-                      <ChevronDown className="w-4 h-4 mr-2" />
-                      {store.isDescending ? 'Descending…' : 
-                       store.currentAction === 'climb' ? 'Climbing' : 
-                       'Begin Descent'}
-                    </Button>
-                    <Button
-                      variant="default"
-                      className="bg-green-600 hover:bg-green-700"
-                      onClick={() => store.exitSpireMode()}
-                    >
-                      Exit Spire
-                    </Button>
-                  </div>
-                </div>
-                
-                <Suspense fallback={<TabLoadingFallback />}>
-                  <SpireTab store={store} simpleMode={true} />
-                </Suspense>
-                
-                {/* Activity Log for Spire Mode */}
-                <Card className="bg-gray-900/80 border-gray-700">
-                  <CardHeader className="pb-2">
-                    <CardTitle className="text-amber-400 game-panel-title text-xs">Activity Log</CardTitle>
-                  </CardHeader>
-                  <CardContent>
-                    <ScrollArea className="h-48">
-                      <div className="space-y-1">
-                        {(store.activityLog || []).slice(0, 50).map((entry: ActivityLogEntry, i) => {
-                          // Style based on event type
-                          const getEventStyle = (eventType: string) => {
-                            switch (eventType) {
-                              case 'enemy_defeated':
-                              case 'floor_cleared':
-                                return 'text-green-400';
-                              case 'damage_dealt':
-                                return 'text-red-400';
-                              case 'dodge':
-                                return 'text-yellow-400';
-                              case 'armor_proc':
-                                return 'text-blue-400';
-                              case 'special_effect':
-                                return 'text-purple-400';
-                              case 'floor_transition':
-                                return 'text-cyan-400';
-                              case 'spell_cast':
-                                return 'text-amber-400';
-                              case 'golem_attack':
-                                return 'text-orange-400';
-                              case 'puzzle_solved':
-                                return 'text-pink-400';
-                              default:
-                                return 'text-gray-300';
-                            }
-                          };
-                          
-                          return (
-                            <div
-                              key={entry.id}
-                              className={`text-xs ${i === 0 ? 'text-gray-200 font-semibold' : getEventStyle(entry.eventType)}`}
-                            >
-                              {entry.message}
-                            </div>
-                          );
-                        })}
-                        {(store.activityLog || []).length === 0 && (
-                          <div className="text-xs text-gray-500 italic">No activity yet...</div>
-                        )}
-                      </div>
-                    </ScrollArea>
-                  </CardContent>
-                </Card>
-              </DebugName>
-            </div>
-          ) : (
-            /* Normal Mode - Tabs */
             <div className="flex-1 min-w-0">
               <Tabs value={activeTab} onValueChange={setActiveTab}>
-                <TabsList className="flex flex-wrap gap-1 w-full mb-4 h-auto">
-                  <TabsTrigger value="spire" className="text-xs px-2 py-1">⚔️ Spire</TabsTrigger>
-                  <TabsTrigger value="attunements" className="text-xs px-2 py-1">✨ Attune</TabsTrigger>
-                  <TabsTrigger value="golemancy" className="text-xs px-2 py-1">🗿 Golems</TabsTrigger>
-                  <TabsTrigger value="skills" className="text-xs px-2 py-1">📚 Skills</TabsTrigger>
-                  <TabsTrigger value="spells" className="text-xs px-2 py-1">🔮 Spells</TabsTrigger>
-                  <TabsTrigger value="equipment" className="text-xs px-2 py-1">🛡️ Gear</TabsTrigger>
-                  <TabsTrigger value="crafting" className="text-xs px-2 py-1">🔧 Craft</TabsTrigger>
-                  <TabsTrigger value="loot" className="text-xs px-2 py-1">💎 Loot</TabsTrigger>
-                  <TabsTrigger value="achievements" className="text-xs px-2 py-1">🏆 Achieve</TabsTrigger>
-                  <TabsTrigger value="lab" className="text-xs px-2 py-1">🔬 Lab</TabsTrigger>
-                  <TabsTrigger value="stats" className="text-xs px-2 py-1">📊 Stats</TabsTrigger>
-                  <TabsTrigger value="debug" className="text-xs px-2 py-1">🔧 Debug</TabsTrigger>
-                  <TabsTrigger value="grimoire" className="text-xs px-2 py-1">📖 Grimoire</TabsTrigger>
-                </TabsList>
+                <TabTriggers />
 
-                <TabsContent value="spire">
-                  <DebugName name="SpireTab">
-                    <Suspense fallback={<TabLoadingFallback />}>
-                      <SpireTab store={store} />
-                    </Suspense>
-                  </DebugName>
-                </TabsContent>
-
-                <TabsContent value="attunements">
-                  <DebugName name="AttunementsTab">
-                    <Suspense fallback={<TabLoadingFallback />}>
-                      <AttunementsTab store={store} />
-                    </Suspense>
-                  </DebugName>
-                </TabsContent>
-
-                <TabsContent value="golemancy">
-                  <DebugName name="GolemancyTab">
-                    <Suspense fallback={<TabLoadingFallback />}>
-                      <GolemancyTab store={store} />
-                    </Suspense>
-                  </DebugName>
-                </TabsContent>
-
-                <TabsContent value="skills">
-                  <DebugName name="SkillsTab">
-                    <Suspense fallback={<TabLoadingFallback />}>
-                      <SkillsTab store={store} />
-                    </Suspense>
-                  </DebugName>
-                </TabsContent>
-
-                <TabsContent value="spells">
-                  <DebugName name="SpellsTab">
-                    <Suspense fallback={<TabLoadingFallback />}>
-                      <SpellsTab store={store} />
-                    </Suspense>
-                  </DebugName>
-                </TabsContent>
-
-                <TabsContent value="equipment">
-                  <DebugName name="EquipmentTab">
-                    <Suspense fallback={<TabLoadingFallback />}>
-                      <EquipmentTab store={store} />
-                    </Suspense>
-                  </DebugName>
-                </TabsContent>
-
-                <TabsContent value="crafting">
-                  <DebugName name="CraftingTab">
-                    <Suspense fallback={<TabLoadingFallback />}>
-                      <CraftingTab store={store} />
-                    </Suspense>
-                  </DebugName>
-                </TabsContent>
-                
-                <TabsContent value="loot">
-                  <DebugName name="LootTab">
-                    <Suspense fallback={<TabLoadingFallback />}>
-                      <LootTab store={store} />
-                    </Suspense>
-                  </DebugName>
-                </TabsContent>
-
-                <TabsContent value="achievements">
-                  <DebugName name="AchievementsTab">
-                    <Suspense fallback={<TabLoadingFallback />}>
-                      <AchievementsTab store={store} />
-                    </Suspense>
-                  </DebugName>
-                </TabsContent>
-
-                <TabsContent value="lab">
-                  <DebugName name="LabTab">
-                    <Suspense fallback={<TabLoadingFallback />}>
-                      <LabTab store={store} />
-                    </Suspense>
-                  </DebugName>
-                </TabsContent>
-
-                <TabsContent value="stats">
-                  <DebugName name="StatsTab">
-                    <Suspense fallback={<TabLoadingFallback />}>
-                      <StatsTab
-                        store={store}
-                        upgradeEffects={upgradeEffects}
-                        maxMana={maxMana}
-                        baseRegen={baseRegen}
-                        clickMana={clickMana}
-                        meditationMultiplier={meditationMultiplier}
-                        effectiveRegen={effectiveRegen}
-                        incursionStrength={incursionStrength}
-                        manaCascadeBonus={manaCascadeBonus}
-                        studySpeedMult={studySpeedMult}
-                        studyCostMult={studyCostMult}
-                      />
-                    </Suspense>
-                  </DebugName>
-                </TabsContent>
-
-                <TabsContent value="grimoire">
-                  <DebugName name="GrimoireTab">
-                    {renderGrimoireTab()}
-                  </DebugName>
-                </TabsContent>
-
-                <TabsContent value="debug">
-                  <DebugName name="DebugTab">
-                    <Suspense fallback={<TabLoadingFallback />}>
-                      <DebugTab store={store} />
-                    </Suspense>
-                  </DebugName>
-                </TabsContent>
+                <TabsContent value="spells"><LazyTab name="spells"><SpellsTab /></LazyTab></TabsContent>
+                <TabsContent value="stats"><LazyTab name="stats"><StatsTab /></LazyTab></TabsContent>
+                <TabsContent value="disciplines"><LazyTab name="disciplines"><DisciplinesTab /></LazyTab></TabsContent>
+                <TabsContent value="grimoire"><GrimoireTab /></TabsContent>
+                <TabsContent value="debug"><LazyTab name="debug"><DebugTab /></LazyTab></TabsContent>
+                <TabsContent value="attunements"><LazyTab name="attunements"><AttunementsTab /></LazyTab></TabsContent>
+                <TabsContent value="achievements"><LazyTab name="achievements"><AchievementsTab /></LazyTab></TabsContent>
+                <TabsContent value="prestige"><LazyTab name="prestige"><PrestigeTab /></LazyTab></TabsContent>
+                <TabsContent value="equipment"><LazyTab name="equipment"><EquipmentTab /></LazyTab></TabsContent>
+                <TabsContent value="golemancy"><LazyTab name="golemancy"><GolemancyTab /></LazyTab></TabsContent>
+                <TabsContent value="pacts"><LazyTab name="pacts"><GuardianPactsTab /></LazyTab></TabsContent>
+                <TabsContent value="spire"><LazyTab name="spire"><SpireSummaryTab /></LazyTab></TabsContent>
+                <TabsContent value="crafting"><LazyTab name="crafting"><CraftingTab /></LazyTab></TabsContent>
               </Tabs>
             </div>
-          )}
-        </main>
-      </div>
-    </TooltipProvider>
+          </main>
+        </div>
+      </TooltipProvider>
+    </ErrorBoundary>
   );
-  
-  // Grimoire Tab (Prestige)
-  function renderGrimoireTab() {
-    return (
-      <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
-        {/* Current Status */}
-        <Card className="bg-gray-900/80 border-gray-700">
-          <CardHeader className="pb-2">
-            <CardTitle className="text-amber-400 game-panel-title text-xs">Loop Status</CardTitle>
-          </CardHeader>
-          <CardContent className="space-y-3">
-            <div className="grid grid-cols-2 gap-3">
-              <div className="p-3 bg-gray-800/50 rounded">
-                <div className="text-2xl font-bold text-amber-400 game-mono">{store.loopCount}</div>
-                <div className="text-xs text-gray-400">Loops Completed</div>
-              </div>
-              <div className="p-3 bg-gray-800/50 rounded">
-                <div className="text-2xl font-bold text-purple-400 game-mono">{fmt(store.insight)}</div>
-                <div className="text-xs text-gray-400">Current Insight</div>
-              </div>
-              <div className="p-3 bg-gray-800/50 rounded">
-                <div className="text-2xl font-bold text-blue-400 game-mono">{fmt(store.totalInsight)}</div>
-                <div className="text-xs text-gray-400">Total Insight</div>
-              </div>
-              <div className="p-3 bg-gray-800/50 rounded">
-                <div className="text-2xl font-bold text-green-400 game-mono">{store.memorySlots}</div>
-                <div className="text-xs text-gray-400">Memory Slots</div>
-              </div>
-            </div>
-          </CardContent>
-        </Card>
-
-        {/* Signed Pacts */}
-        <Card className="bg-gray-900/80 border-gray-700">
-          <CardHeader className="pb-2">
-            <CardTitle className="text-amber-400 game-panel-title text-xs">Signed Pacts</CardTitle>
-          </CardHeader>
-          <CardContent>
-            {store.signedPacts.length === 0 ? (
-              <div className="text-gray-500 text-sm">No pacts signed yet. Defeat guardians to earn pacts.</div>
-            ) : (
-              <div className="space-y-2">
-                {store.signedPacts.map((floor) => {
-                  const guardian = GUARDIANS[floor];
-                  if (!guardian) return null;
-                  return (
-                    <div
-                      key={floor}
-                      className="flex items-center justify-between p-2 rounded border"
-                      style={{ borderColor: guardian.color, backgroundColor: `${guardian.color}15` }}
-                    >
-                      <div>
-                        <div className="font-semibold text-sm" style={{ color: guardian.color }}>
-                          {guardian.name}
-                        </div>
-                        <div className="text-xs text-gray-400">Floor {floor}</div>
-                      </div>
-                      <Badge className="bg-amber-900/50 text-amber-300">
-                        {guardian.pact}x multiplier
-                      </Badge>
-                    </div>
-                  );
-                })}
-              </div>
-            )}
-          </CardContent>
-        </Card>
-
-        {/* Prestige Upgrades */}
-        <Card className="bg-gray-900/80 border-gray-700 lg:col-span-2">
-          <CardHeader className="pb-2">
-            <CardTitle className="text-amber-400 game-panel-title text-xs">Insight Upgrades (Permanent)</CardTitle>
-          </CardHeader>
-          <CardContent>
-            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3">
-              {Object.entries(PRESTIGE_DEF).map(([id, def]) => {
-                const level = store.prestigeUpgrades[id] || 0;
-                const maxed = level >= def.max;
-                const canBuy = !maxed && store.insight >= def.cost;
-                
-                return (
-                  <div
-                    key={id}
-                    className="p-3 rounded border border-gray-700 bg-gray-800/50"
-                  >
-                    <div className="flex items-center justify-between mb-2">
-                      <div className="font-semibold text-amber-400 text-sm">{def.name}</div>
-                      <Badge variant="outline" className="text-xs">
-                        {level}/{def.max}
-                      </Badge>
-                    </div>
-                    <div className="text-xs text-gray-400 italic mb-2">{def.desc}</div>
-                    <Button
-                      size="sm"
-                      variant={canBuy ? 'default' : 'outline'}
-                      className="w-full"
-                      disabled={!canBuy}
-                      onClick={() => store.doPrestige(id)}
-                    >
-                      {maxed ? 'Maxed' : `Upgrade (${fmt(def.cost)} insight)`}
-                    </Button>
-                  </div>
-                );
-              })}
-            </div>
-            
-            {/* Reset Game Button */}
-            <div className="mt-4 pt-4 border-t border-gray-700">
-              <div className="flex items-center justify-between">
-                <div>
-                  <div className="text-sm text-gray-400">Reset All Progress</div>
-                  <div className="text-xs text-gray-500">Clear all data and start fresh</div>
-                </div>
-                <Button
-                  size="sm"
-                  variant="outline"
-                  className="border-red-600/50 text-red-400 hover:bg-red-900/20"
-                  onClick={() => {
-                    if (confirm('Are you sure you want to reset ALL progress? This cannot be undone!')) {
-                      store.resetGame();
-                    }
-                  }}
-                >
-                  <RotateCcw className="w-4 h-4 mr-1" />
-                  Reset
-                </Button>
-              </div>
-            </div>
-          </CardContent>
-        </Card>
-      </div>
-    );
-  }
 }

src/components/ErrorBoundary.tsx

@@ -0,0 +1,38 @@
+'use client';
+
+import { Component, ReactNode } from 'react';
+
+interface ErrorBoundaryProps {
+  children: ReactNode;
+  fallback?: ReactNode;
+}
+
+interface ErrorBoundaryState {
+  hasError: boolean;
+  error?: Error;
+}
+
+export class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
+  constructor(props: ErrorBoundaryProps) {
+    super(props);
+    this.state = { hasError: false };
+  }
+
+  static getDerivedStateFromError(error: Error): ErrorBoundaryState {
+    return { hasError: true, error };
+  }
+
+  render() {
+    if (this.state.hasError) {
+      return this.props.fallback || (
+        <div className="p-4 bg-red-900/20 border border-red-600/50 rounded">
+          <h3 className="text-red-400 font-bold mb-2">Something went wrong:</h3>
+          <pre className="text-xs text-red-300">{this.state.error?.message}</pre>
+          <pre className="text-xs text-gray-500 mt-2">{this.state.error?.stack}</pre>
+        </div>
+      );
+    }
+
+    return this.props.children;
+  }
+}

src/components/game/AchievementsDisplay.tsx

@@ -1,205 +0,0 @@
-'use client';
-
-import { useState } from 'react';
-import { GameCard } from '@/components/ui/game-card';
-import { Badge } from '@/components/ui/badge';
-import { ActionButton } from '@/components/ui/action-button';
-import { ScrollArea } from '@/components/ui/scroll-area';
-import { ManaBar } from '@/components/ui/mana-bar';
-import { Trophy, Lock, CheckCircle, ChevronDown, ChevronUp } from 'lucide-react';
-import type { AchievementState } from '@/lib/game/types';
-import { ACHIEVEMENTS, getAchievementsByCategory, isAchievementRevealed } from '@/lib/game/data/achievements';
-import { GameState } from '@/lib/game/types';
-
-// Map achievement categories to CSS variables for colors
-const CATEGORY_COLOR_MAP: Record<string, string> = {
-  combat: 'var(--color-danger)',
-  progression: 'var(--rarity-legendary)',
-  crafting: 'var(--mana-dark)',
-  magic: 'var(--mana-water)',
-  special: 'var(--mana-stellar)',
-};
-
-interface AchievementsProps {
-  achievements: AchievementState;
-  gameState: Pick<GameState, 'maxFloorReached' | 'totalManaGathered' | 'signedPacts' | 'totalSpellsCast' | 'totalDamageDealt' | 'totalCraftsCompleted'>;
-}
-
-export function AchievementsDisplay({ achievements, gameState }: AchievementsProps) {
-  const [expandedCategory, setExpandedCategory] = useState<string | null>('combat');
-  
-  const categories = getAchievementsByCategory();
-  const unlockedCount = achievements.unlocked.length;
-  const totalCount = Object.keys(ACHIEVEMENTS).length;
-  
-  // Calculate progress for each achievement
-  const getProgress = (achievementId: string): number => {
-    const achievement = ACHIEVEMENTS[achievementId];
-    if (!achievement) return 0;
-    if (achievements.unlocked.includes(achievementId)) return achievement.requirement.value;
-    
-    const { type, subType } = achievement.requirement;
-    
-    switch (type) {
-      case 'floor':
-        if (subType === 'noPacts') {
-          return gameState.maxFloorReached >= achievement.requirement.value && gameState.signedPacts.length === 0
-            ? achievement.requirement.value
-            : gameState.maxFloorReached;
-        }
-        return gameState.maxFloorReached;
-      case 'spells':
-        return gameState.totalSpellsCast || 0;
-      case 'damage':
-        return gameState.totalDamageDealt || 0;
-      case 'mana':
-        return gameState.totalManaGathered || 0;
-      case 'pact':
-        return gameState.signedPacts.length;
-      case 'craft':
-        return gameState.totalCraftsCompleted || 0;
-      default:
-        return achievements.progress[achievementId] || 0;
-    }
-  };
-  
-  return (
-    <GameCard variant="default" className="w-full">
-      <div className="flex items-center gap-2 mb-3">
-        <Trophy className="w-4 h-4 text-[var(--mana-light)]" />
-        <h3 className="text-[var(--mana-light)] game-panel-title text-xs uppercase tracking-wider">
-          Achievements
-        </h3>
-        <Badge 
-          className="ml-auto bg-[var(--bg-sunken)] text-[var(--text-secondary)] border-[var(--border-subtle)]"
-          aria-label={`${unlockedCount} out of ${totalCount} achievements unlocked`}
-        >
-          {unlockedCount} / {totalCount}
-        </Badge>
-      </div>
-
-      <ScrollArea className="h-64 w-full">
-        <div className="space-y-2 pr-2">
-          {Object.entries(categories).map(([category, categoryAchievements]) => (
-            <div key={category} className="space-y-1">
-              <ActionButton
-                variant="ghost"
-                size="sm"
-                className="w-full justify-between text-xs hover:bg-[var(--bg-sunken)]"
-                onClick={() => setExpandedCategory(expandedCategory === category ? null : category)}
-                aria-expanded={expandedCategory === category}
-                aria-label={`${category} category - ${categoryAchievements.filter(a => achievements.unlocked.includes(a.id)).length} of ${categoryAchievements.length} unlocked`}
-              >
-                <span style={{ color: CATEGORY_COLOR_MAP[category] || 'var(--text-primary)' }}>
-                  {category.charAt(0).toUpperCase() + category.slice(1)}
-                </span>
-                <span className="text-[var(--text-muted)]">
-                  {categoryAchievements.filter(a => achievements.unlocked.includes(a.id)).length} / {categoryAchievements.length}
-                </span>
-                {expandedCategory === category ? (
-                  <ChevronUp className="w-4 h-4 text-[var(--text-muted)]" />
-                ) : (
-                  <ChevronDown className="w-4 h-4 text-[var(--text-muted)]" />
-                )}
-              </ActionButton>
-              
-              {expandedCategory === category && (
-                <div className="pl-2 space-y-2">
-                  {categoryAchievements.map((achievement) => {
-                    const isUnlocked = achievements.unlocked.includes(achievement.id);
-                    const progress = getProgress(achievement.id);
-                    const isRevealed = isAchievementRevealed(achievement, progress);
-                    const progressPercent = Math.min(100, (progress / achievement.requirement.value) * 100);
-                    
-                    if (!isRevealed && !isUnlocked) {
-                      return (
-                        <div 
-                          key={achievement.id} 
-                          className="p-2 rounded bg-[var(--bg-sunken)] border border-[var(--border-subtle)]"
-                          aria-label="Locked achievement - details hidden"
-                        >
-                          <div className="flex items-center gap-2 text-[var(--text-muted)]">
-                            <Lock className="w-4 h-4" aria-hidden="true" />
-                            <span className="text-sm">???</span>
-                          </div>
-                        </div>
-                      );
-                    }
-                    
-                    return (
-                      <div
-                        key={achievement.id}
-                        className={`p-2 rounded border ${
-                          isUnlocked
-                            ? 'bg-[var(--rarity-legendary-glow)] border-[var(--rarity-legendary)]/50'
-                            : 'bg-[var(--bg-sunken)] border-[var(--border-subtle)]'
-                        }`}
-                      >
-                        <div className="flex items-start justify-between mb-1">
-                          <div className="flex items-center gap-2">
-                            {isUnlocked ? (
-                              <CheckCircle className="w-4 h-4 text-[var(--mana-light)]" aria-hidden="true" />
-                            ) : (
-                              <Trophy className="w-4 h-4 text-[var(--text-muted)]" aria-hidden="true" />
-                            )}
-                            <span 
-                              className={`text-sm font-semibold ${
-                                isUnlocked ? 'text-[var(--mana-light)]' : 'text-[var(--text-secondary)]'
-                              }`}
-                            >
-                              {achievement.name}
-                            </span>
-                          </div>
-                          {achievement.reward.title && isUnlocked && (
-                            <Badge 
-                              className="text-xs bg-[var(--mana-dark)]/20 text-[var(--mana-dark)] border-[var(--mana-dark)]/40"
-                              aria-label="Title reward"
-                            >
-                              Title
-                            </Badge>
-                          )}
-                        </div>
-                        
-                        <div className="text-xs text-[var(--text-muted)] mb-2">
-                          {achievement.desc}
-                        </div>
-                        
-                        {!isUnlocked && (
-                          <div className="space-y-1">
-                            <ManaBar 
-                              value={progress} 
-                              max={achievement.requirement.value} 
-                              manaType="light"
-                              className="h-1.5"
-                              aria-label={`Progress: ${Math.round(progressPercent)}%`}
-                            />
-                            <div className="flex justify-between text-xs text-[var(--text-muted)]">
-                              <span>{progress.toLocaleString()} / {achievement.requirement.value.toLocaleString()}</span>
-                              <span>{progressPercent.toFixed(0)}%</span>
-                            </div>
-                          </div>
-                        )}
-                        
-                        {isUnlocked && achievement.reward && (
-                          <div className="text-xs text-[var(--mana-light)]/70">
-                            Reward: 
-                            {achievement.reward.insight && ` +${achievement.reward.insight} Insight`}
-                            {achievement.reward.manaBonus && ` +${achievement.reward.manaBonus} Max Mana`}
-                            {achievement.reward.damageBonus && ` +${(achievement.reward.damageBonus * 100).toFixed(0)}% Damage`}
-                            {achievement.reward.title && ` "${achievement.reward.title}"`}
-                          </div>
-                        )}
-                      </div>
-                    );
-                  })}
-                </div>
-              )}
-            </div>
-          ))}
-        </div>
-      </ScrollArea>
-    </GameCard>
-  );
-}
-
-AchievementsDisplay.displayName = "AchievementsDisplay";

src/components/game/ActionButtons.tsx.backup

@@ -1,152 +0,0 @@
-'use client';
-
-import { Sparkles, Swords, BookOpen, Target, FlaskConical, Cog, Hammer } from 'lucide-react';
-import type { GameAction } from '@/lib/game/types';
-
-interface ActionButtonsProps {
-  currentAction: GameAction;
-  currentStudyTarget: { type: 'skill' | 'spell'; id: string; progress: number; required: number } | null;
-  designProgress: { progress: number; required: number } | null;
-  designProgress2: { progress: number; required: number } | null;
-  preparationProgress: { progress: number; required: number } | null;
-  applicationProgress: { progress: number; required: number } | null;
-  equipmentCraftingProgress: { progress: number; required: number } | null;
-}
-
-// Map action IDs to labels and icons
-const ACTION_CONFIG: Record<string, { label: string; icon: typeof Sparkles; color: string }> = {
-  meditate: { label: 'Meditating', icon: Sparkles, color: 'text-blue-400' },
-  climb: { label: 'Climbing', icon: Swords, color: 'text-green-400' },
-  study: { label: 'Studying', icon: BookOpen, color: 'text-yellow-400' },
-  design: { label: 'Designing Enchantment', icon: Target, color: 'text-purple-400' },
-  prepare: { label: 'Preparing Equipment', icon: FlaskConical, color: 'text-purple-400' },
-  enchant: { label: 'Enchanting', icon: Sparkles, color: 'text-purple-400' },
-  craft: { label: 'Crafting Equipment', icon: Hammer, color: 'text-orange-400' },
-  convert: { label: 'Converting Mana', icon: Cog, color: 'text-cyan-400' },
-};
-
-function ProgressBar({ progress, required, label }: { progress: number; required: number; label?: string }) {
-  const percentage = Math.min(100, (progress / required) * 100);
-  return (
-    <div className="mt-1">
-      {label && <div className="text-xs text-gray-400 mb-0.5">{label}</div>}
-      <div className="w-full bg-gray-700 rounded-full h-1.5">
-        <div 
-          className="bg-blue-500 h-1.5 rounded-full transition-all duration-300" 
-          style={{ width: `${percentage}%` }}
-        />
-      </div>
-    </div>
-  );
-}
-
-export function ActionButtons({
-  currentAction,
-  currentStudyTarget,
-  designProgress,
-  designProgress2,
-  preparationProgress,
-  applicationProgress,
-  equipmentCraftingProgress,
-}: ActionButtonsProps) {
-  const config = ACTION_CONFIG[currentAction] || { label: currentAction, icon: Sparkles, color: 'text-gray-400' };
-  const Icon = config.icon;
-
-  // Calculate additional info for specific actions
-  const getActionDetails = () => {
-    switch (currentAction) {
-      case 'study':
-        if (currentStudyTarget) {
-          const progress = currentStudyTarget.progress;
-          const required = currentStudyTarget.required;
-          const percentage = Math.min(100, (progress / required) * 100);
-          return (
-            <ProgressBar 
-              progress={progress} 
-              required={required} 
-              label={`${currentStudyTarget.type === 'skill' ? 'Skill' : 'Spell'}: ${percentage.toFixed(0)}%`}
-            />
-          );
-        }
-        break;
-      case 'design':
-        if (designProgress) {
-          return (
-            <ProgressBar 
-              progress={designProgress.progress} 
-              required={designProgress.required}
-              label="Design progress"
-            />
-          );
-        }
-        break;
-      case 'prepare':
-        if (preparationProgress) {
-          return (
-            <ProgressBar 
-              progress={preparationProgress.progress} 
-              required={preparationProgress.required}
-              label="Preparation progress"
-            />
-          );
-        }
-        break;
-      case 'enchant':
-        if (applicationProgress) {
-          return (
-            <ProgressBar 
-              progress={applicationProgress.progress} 
-              required={applicationProgress.required}
-              label="Enchantment progress"
-            />
-          );
-        }
-        break;
-      case 'craft':
-        if (equipmentCraftingProgress) {
-          return (
-            <ProgressBar 
-              progress={equipmentCraftingProgress.progress} 
-              required={equipmentCraftingProgress.required}
-              label="Crafting progress"
-            />
-          );
-        }
-        break;
-    }
-    return null;
-  };
-
-  return (
-    <div className="space-y-2">
-      <div className="bg-gray-800/50 rounded-lg p-3 border border-gray-700">
-        <div className="flex items-center gap-2">
-          <Icon className={`w-4 h-4 ${config.color}`} />
-          <span className="text-sm font-medium text-gray-200">Current Activity</span>
-        </div>
-        <div className={`text-lg font-semibold mt-1 ${config.color}`}>
-          {config.label}
-        </div>
-        {getActionDetails()}
-        
-        {/* Show second design slot if active */}
-        {designProgress2 && (
-          <div className="mt-2 pt-2 border-t border-gray-700">
-            <div className="flex items-center gap-2">
-              <Target className="w-3 h-3 text-purple-400" />
-              <span className="text-xs text-gray-400">Second Design Slot</span>
-            </div>
-            <ProgressBar 
-              progress={designProgress2.progress} 
-              required={designProgress2.required}
-              label="Design progress"
-            />
-          </div>
-        )}
-      </div>
-    </div>
-  );
-}
-
-ActionButtons.displayName = "ActionButtons";
-ProgressBar.displayName = "ProgressBar";

src/components/game/ActivityLogPanel.tsx

@@ -0,0 +1,19 @@
+'use client';
+
+import { useCombatStore } from '@/lib/game/stores';
+import { ActivityLog } from './tabs/ActivityLog';
+
+/**
+ * Activity log panel for the left sidebar.
+ * Wraps the existing ActivityLog tab component with store integration,
+ * showing only the most recent 20 entries.
+ */
+export function ActivityLogPanel() {
+  const activityLog = useCombatStore((s) => s.activityLog);
+
+  return (
+    <ActivityLog activityLog={activityLog} maxEntries={20} />
+  );
+}
+
+ActivityLogPanel.displayName = 'ActivityLogPanel';

src/components/game/AttunementStatus.tsx

@@ -0,0 +1,103 @@
+'use client';
+
+import { useAttunementStore } from '@/lib/game/stores';
+import { ATTUNEMENTS_DEF } from '@/lib/game/data/attunements';
+import { Separator } from '@/components/ui/separator';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
+
+const SLOT_LABELS: Record<string, string> = {
+  rightHand: 'R. Hand',
+  leftHand: 'L. Hand',
+  head: 'Head',
+  back: 'Back',
+  chest: 'Chest',
+  leftLeg: 'L. Leg',
+  rightLeg: 'R. Leg',
+};
+
+export function AttunementStatus() {
+  const attunements = useAttunementStore((s) => s.attunements);
+
+  const activeAttunements = Object.entries(attunements)
+    .filter(([, state]) => state.active)
+    .sort(([, a], [, b]) => {
+      const orderA = Object.values(ATTUNEMENTS_DEF).findIndex(d => d.id === a.id);
+      const orderB = Object.values(ATTUNEMENTS_DEF).findIndex(d => d.id === b.id);
+      return orderA - orderB;
+    });
+
+  const xpForNext = (level: number) => {
+    if (level <= 1) return 0;
+    if (level === 2) return 1000;
+    return Math.floor(1000 * Math.pow(2, level - 2) * (level >= 3 ? 1.25 : 1));
+  };
+
+  return (
+    <div className="space-y-1">
+      <div className="flex items-center justify-between">
+        <span className="text-[10px] uppercase tracking-wider text-[var(--text-muted)] font-bold">Attunements</span>
+        <span className="text-[10px] text-[var(--text-muted)]">{activeAttunements.length} active</span>
+      </div>
+      <Separator className="bg-[var(--border-subtle)]" />
+      <div className="space-y-1.5">
+        {activeAttunements.length === 0 ? (
+          <div className="text-[10px] text-[var(--text-muted)] italic">No attunements active</div>
+        ) : (
+          activeAttunements.map(([id, state]) => {
+            const def = ATTUNEMENTS_DEF[id];
+            if (!def) return null;
+            const nextXp = xpForNext(state.level);
+            const xpProgress = nextXp > 0 ? (state.experience / nextXp) * 100 : 0;
+
+            return (
+              <TooltipProvider key={id}>
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <div className="flex items-center gap-2 p-1.5 rounded bg-[var(--bg-sunken)]/50 border border-[var(--border-subtle)]">
+                      <span className="text-sm">{def.icon}</span>
+                      <div className="flex-1 min-w-0">
+                        <div className="flex items-center gap-1.5">
+                          <span className="text-[11px] font-medium text-[var(--text-primary)] truncate">
+                            {def.name}
+                          </span>
+                          <span className="text-[10px] text-[var(--text-secondary)] font-mono">
+                            Lv.{state.level}
+                          </span>
+                        </div>
+                        <div className="text-[10px] text-[var(--text-muted)]">
+                          <span className="capitalize">{SLOT_LABELS[def.slot] || def.slot}</span>
+                          {nextXp > 0 && (
+                            <span className="ml-1.5 font-mono">
+                              {Math.floor(state.experience).toLocaleString()}/{nextXp.toLocaleString()} XP
+                            </span>
+                          )}
+                        </div>
+                        {nextXp > 0 && (
+                          <div className="w-full h-0.5 bg-[var(--border-subtle)] rounded-full mt-0.5 overflow-hidden">
+                            <div
+                              className="h-full transition-all duration-500"
+                              style={{
+                                width: `${Math.min(100, xpProgress)}%`,
+                                backgroundColor: def.color,
+                                opacity: 0.7,
+                              }}
+                            />
+                          </div>
+                        )}
+                      </div>
+                    </div>
+                  </TooltipTrigger>
+                  <TooltipContent side="right">
+                    <p className="text-xs max-w-[220px]">{def.desc}</p>
+                  </TooltipContent>
+                </Tooltip>
+              </TooltipProvider>
+            );
+          })
+        )}
+      </div>
+    </div>
+  );
+}
+
+AttunementStatus.displayName = 'AttunementStatus';

src/components/game/CalendarDisplay.tsx

@@ -1,53 +0,0 @@
-'use client';
-
-import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
-import { MAX_DAY, INCURSION_START_DAY } from '@/lib/game/constants';
-
-interface CalendarDisplayProps {
-  day: number;
-  hour: number;
-  incursionStrength?: number;
-}
-
-export function CalendarDisplay({ day }: CalendarDisplayProps) {
-  const days: React.ReactElement[] = [];
-  
-  for (let d = 1; d <= MAX_DAY; d++) {
-    let dayClass = 'w-6 h-6 sm:w-7 sm:h-7 rounded text-xs flex items-center justify-center font-mono border transition-all ';
-    
-    if (d < day) {
-      dayClass += 'bg-blue-900/30 border-blue-800/50 text-blue-400';
-    } else if (d === day) {
-      dayClass += 'bg-blue-600/40 border-blue-500 text-blue-300 shadow-lg shadow-blue-500/30';
-    } else {
-      dayClass += 'bg-gray-800/30 border-gray-700/50 text-gray-500';
-    }
-    
-    if (d >= INCURSION_START_DAY) {
-      dayClass += ' border-red-600/50';
-    }
-    
-    days.push(
-      <Tooltip key={d}>
-        <TooltipTrigger asChild>
-          <div className={dayClass}>
-            {d}
-          </div>
-        </TooltipTrigger>
-        <TooltipContent>
-          <p>Day {d}</p>
-          {d >= INCURSION_START_DAY && <p className="text-red-400">Incursion Active</p>}
-        </TooltipContent>
-      </Tooltip>
-    );
-  }
-  
-  return (
-    <div className="grid grid-cols-7 sm:grid-cols-7 md:grid-cols-14 gap-1">
-      {days}
-    </div>
-  );
-}
-
-CalendarDisplay.displayName = "CalendarDisplay";
-CalendarDisplay.displayName = "CalendarDisplay";

src/components/game/ConfirmDialog.tsx

@@ -1,184 +0,0 @@
-'use client';
-
-import { useState, type ReactNode } from 'react';
-import {
-  AlertDialog,
-  AlertDialogAction,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogTitle,
-} from '@/components/ui/alert-dialog';
-import { AlertTriangle, AlertCircle, Info, CheckCircle } from 'lucide-react';
-import { cn } from '@/lib/utils';
-
-export type ConfirmDialogVariant = 'danger' | 'warning' | 'info' | 'success';
-
-interface ConfirmDialogProps {
-  /** Whether the dialog is open */
-  open: boolean;
-  /** Callback when open state changes */
-  onOpenChange: (open: boolean) => void;
-  /** Dialog title */
-  title: string;
-  /** Dialog description/content */
-  description: ReactNode;
-  /** Cancel button text (default: "Cancel") */
-  cancelText?: string;
-  /** Confirm button text (default: "Confirm") */
-  confirmText?: string;
-  /** Dialog variant/type */
-  variant?: ConfirmDialogVariant;
-  /** Callback when user confirms */
-  onConfirm: () => void | Promise<void>;
-  /** Callback when user cancels */
-  onCancel?: () => void;
-  /** Whether the confirm action is destructive */
-  destructive?: boolean;
-}
-
-const VARIANT_ICONS = {
-  danger: AlertTriangle,
-  warning: AlertCircle,
-  info: Info,
-  success: CheckCircle,
-};
-
-const VARIANT_TITLE_COLORS = {
-  danger: 'text-[var(--color-danger)]',
-  warning: 'text-[var(--color-warning)]',
-  info: 'text-[var(--color-info)]',
-  success: 'text-[var(--color-success)]',
-};
-
-const VARIANT_ACTION_COLORS = {
-  danger: 'bg-[var(--color-danger)] hover:bg-[var(--interactive-danger-hover)] text-white',
-  warning: 'bg-[var(--color-warning)] hover:opacity-90 text-black',
-  info: 'bg-[var(--color-info)] hover:opacity-90 text-white',
-  success: 'bg-[var(--color-success)] hover:opacity-90 text-white',
-};
-
-/**
- * Reusable confirmation dialog component.
- * Uses the existing shadcn/ui AlertDialog.
- * 
- * @example
- * <ConfirmDialog
- *   open={showDialog}
- *   onOpenChange={setShowDialog}
- *   title="Delete Item"
- *   description="Are you sure you want to delete this item? This action cannot be undone."
- *   variant="danger"
- *   onConfirm={handleDelete}
- * />
- */
-export function ConfirmDialog({
-  open,
-  onOpenChange,
-  title,
-  description,
-  cancelText = 'Cancel',
-  confirmText = 'Confirm',
-  variant = 'warning',
-  onConfirm,
-  onCancel,
-  destructive = false,
-}: ConfirmDialogProps) {
-  const [isLoading, setIsLoading] = useState(false);
-
-  const Icon = VARIANT_ICONS[variant];
-  const titleColor = VARIANT_TITLE_COLORS[variant];
-  const actionClass = destructive ? VARIANT_ACTION_COLORS.danger : VARIANT_ACTION_COLORS[variant];
-
-  const handleConfirm = async () => {
-    setIsLoading(true);
-    try {
-      await onConfirm();
-      onOpenChange(false);
-    } finally {
-      setIsLoading(false);
-    }
-  };
-
-  const handleCancel = () => {
-    onCancel?.();
-    onOpenChange(false);
-  };
-
-  return (
-    <AlertDialog open={open} onOpenChange={onOpenChange}>
-      <AlertDialogContent className="bg-[var(--bg-elevated)] border-[var(--border-default)] text-[var(--text-primary)]">
-        <AlertDialogHeader>
-          <AlertDialogTitle className={cn('flex items-center gap-2', titleColor)}>
-            <Icon className="h-5 w-5" />
-            {title}
-          </AlertDialogTitle>
-          <AlertDialogDescription className="text-[var(--text-secondary)]">
-            {description}
-          </AlertDialogDescription>
-        </AlertDialogHeader>
-        <AlertDialogFooter>
-          <AlertDialogCancel
-            className="bg-[var(--bg-sunken)] border-[var(--border-default)] text-[var(--text-primary)] hover:bg-[var(--bg-elevated)]"
-            onClick={handleCancel}
-          >
-            {cancelText}
-          </AlertDialogCancel>
-          <AlertDialogAction
-            className={cn(actionClass, isLoading && 'opacity-50 cursor-not-allowed')}
-            onClick={handleConfirm}
-            disabled={isLoading}
-          >
-            {isLoading ? 'Processing...' : confirmText}
-          </AlertDialogAction>
-        </AlertDialogFooter>
-      </AlertDialogContent>
-    </AlertDialog>
-  );
-}
-
-/**
- * Hook to easily manage a confirmation dialog state.
- * 
- * @example
- * const { dialogProps, showConfirm } = useConfirmDialog();
- * 
- * showConfirm({
- *   title: "Delete Item",
- *   description: "Are you sure?",
- *   onConfirm: () => deleteItem(),
- * });
- */
-export function useConfirmDialog() {
-  const [dialogState, setDialogState] = useState<{
-    open: boolean;
-    props: Omit<ConfirmDialogProps, 'open' | 'onOpenChange'>;
-  }>({
-    open: false,
-    props: {
-      title: '',
-      description: '',
-      onConfirm: () => {},
-    },
-  });
-
-  const showConfirm = (props: Omit<ConfirmDialogProps, 'open' | 'onOpenChange'>) => {
-    setDialogState({ open: true, props });
-  };
-
-  const dialogProps: ConfirmDialogProps = {
-    open: dialogState.open,
-    onOpenChange: (open: boolean) => setDialogState(prev => ({ ...prev, open })),
-    ...dialogState.props,
-  };
-
-  return {
-    dialogProps,
-    showConfirm,
-    ConfirmDialogComponent: <ConfirmDialog {...dialogProps} />,
-  };
-}
-
-export default ConfirmDialog;

src/components/game/CraftingProgress.tsx

@@ -1,163 +0,0 @@
-'use client';
-
-import { Button } from '@/components/ui/button';
-import { Progress } from '@/components/ui/progress';
-import { Target, FlaskConical, Sparkles, Play, Pause, X } from 'lucide-react';
-import { fmt } from '@/lib/game/store';
-import { formatStudyTime } from '@/lib/game/formatting';
-import type { EquipmentInstance, EnchantmentDesign } from '@/lib/game/types';
-
-interface CraftingProgressProps {
-  designProgress: { designId: string; progress: number; required: number } | null;
-  preparationProgress: { equipmentInstanceId: string; progress: number; required: number; manaCostPaid: number } | null;
-  applicationProgress: { equipmentInstanceId: string; designId: string; progress: number; required: number; manaPerHour: number; paused: boolean } | null;
-  equipmentInstances: Record<string, EquipmentInstance>;
-  enchantmentDesigns: EnchantmentDesign[];
-  cancelDesign: () => void;
-  cancelPreparation: () => void;
-  pauseApplication: () => void;
-  resumeApplication: () => void;
-  cancelApplication: () => void;
-}
-
-export function CraftingProgress({
-  designProgress,
-  preparationProgress,
-  applicationProgress,
-  equipmentInstances,
-  enchantmentDesigns,
-  cancelDesign,
-  cancelPreparation,
-  pauseApplication,
-  resumeApplication,
-  cancelApplication,
-}: CraftingProgressProps) {
-  const progressSections: React.ReactNode[] = [];
-
-  // Design progress
-  if (designProgress) {
-    const progressPct = Math.min(100, (designProgress.progress / designProgress.required) * 100);
-    progressSections.push(
-      <div key="design" className="p-3 rounded border border-cyan-600/50 bg-cyan-900/20">
-        <div className="flex items-center justify-between mb-2">
-          <div className="flex items-center gap-2">
-            <Target className="w-4 h-4 text-cyan-400" />
-            <span className="text-sm font-semibold text-cyan-300">
-              Designing Enchantment
-            </span>
-          </div>
-          <Button
-            variant="ghost"
-            size="sm"
-            className="h-6 w-6 p-0 text-gray-400 hover:text-white"
-            onClick={cancelDesign}
-          >
-            <X className="w-4 h-4" />
-          </Button>
-        </div>
-        <Progress value={progressPct} className="h-2 bg-gray-800" />
-        <div className="flex justify-between text-xs text-gray-400 mt-1">
-          <span>{formatStudyTime(designProgress.progress)} / {formatStudyTime(designProgress.required)}</span>
-          <span>Design Time</span>
-        </div>
-      </div>
-    );
-  }
-
-  // Preparation progress
-  if (preparationProgress) {
-    const progressPct = Math.min(100, (preparationProgress.progress / preparationProgress.required) * 100);
-    const instance = equipmentInstances[preparationProgress.equipmentInstanceId];
-    progressSections.push(
-      <div key="prepare" className="p-3 rounded border border-green-600/50 bg-green-900/20">
-        <div className="flex items-center justify-between mb-2">
-          <div className="flex items-center gap-2">
-            <FlaskConical className="w-4 h-4 text-green-400" />
-            <span className="text-sm font-semibold text-green-300">
-              Preparing {instance?.name || 'Equipment'}
-            </span>
-          </div>
-          <Button
-            variant="ghost"
-            size="sm"
-            className="h-6 w-6 p-0 text-gray-400 hover:text-white"
-            onClick={cancelPreparation}
-          >
-            <X className="w-4 h-4" />
-          </Button>
-        </div>
-        <Progress value={progressPct} className="h-2 bg-gray-800" />
-        <div className="flex justify-between text-xs text-gray-400 mt-1">
-          <span>{formatStudyTime(preparationProgress.progress)} / {formatStudyTime(preparationProgress.required)}</span>
-          <span>Mana spent: {fmt(preparationProgress.manaCostPaid)}</span>
-        </div>
-      </div>
-    );
-  }
-
-  // Application progress
-  if (applicationProgress) {
-    const progressPct = Math.min(100, (applicationProgress.progress / applicationProgress.required) * 100);
-    const instance = equipmentInstances[applicationProgress.equipmentInstanceId];
-    const design = enchantmentDesigns.find(d => d.id === applicationProgress.designId);
-    progressSections.push(
-      <div key="enchant" className="p-3 rounded border border-amber-600/50 bg-amber-900/20">
-        <div className="flex items-center justify-between mb-2">
-          <div className="flex items-center gap-2">
-            <Sparkles className="w-4 h-4 text-amber-400" />
-            <span className="text-sm font-semibold text-amber-300">
-              Enchanting {instance?.name || 'Equipment'}
-            </span>
-          </div>
-          <div className="flex gap-1">
-            {applicationProgress.paused ? (
-              <Button
-                variant="ghost"
-                size="sm"
-                className="h-6 w-6 p-0 text-green-400 hover:text-green-300"
-                onClick={resumeApplication}
-              >
-                <Play className="w-4 h-4" />
-              </Button>
-            ) : (
-              <Button
-                variant="ghost"
-                size="sm"
-                className="h-6 w-6 p-0 text-yellow-400 hover:text-yellow-300"
-                onClick={pauseApplication}
-              >
-                <Pause className="w-4 h-4" />
-              </Button>
-            )}
-            <Button
-              variant="ghost"
-              size="sm"
-              className="h-6 w-6 p-0 text-gray-400 hover:text-white"
-              onClick={cancelApplication}
-            >
-              <X className="w-4 h-4" />
-            </Button>
-          </div>
-        </div>
-        <Progress value={progressPct} className="h-2 bg-gray-800" />
-        <div className="flex justify-between text-xs text-gray-400 mt-1">
-          <span>{formatStudyTime(applicationProgress.progress)} / {formatStudyTime(applicationProgress.required)}</span>
-          <span>Mana/hr: {fmt(applicationProgress.manaPerHour)}</span>
-        </div>
-        {design && (
-          <div className="text-xs text-amber-400/70 mt-1">
-            Applying: {design.name}
-          </div>
-        )}
-      </div>
-    );
-  }
-
-  return progressSections.length > 0 ? (
-    <div className="space-y-2">
-      {progressSections}
-    </div>
-  ) : null;
-}
-
-CraftingProgress.displayName = "CraftingProgress";

src/components/game/GameContext.tsx

@@ -1,428 +0,0 @@
-'use client';
-
-import { createContext, useContext, useMemo, type ReactNode } from 'react';
-import { useSkillStore } from '@/lib/game/stores/skillStore';
-import { useManaStore } from '@/lib/game/stores/manaStore';
-import { usePrestigeStore } from '@/lib/game/stores/prestigeStore';
-import { useUIStore } from '@/lib/game/stores/uiStore';
-import { useCombatStore } from '@/lib/game/stores/combatStore';
-import { useGameStore, useGameLoop } from '@/lib/game/stores/gameStore';
-import { computeEffects, hasSpecial, SPECIAL_EFFECTS } from '@/lib/game/upgrade-effects';
-import { getStudySpeedMultiplier, getStudyCostMultiplier } from '@/lib/game/constants';
-import {
-  computeMaxMana,
-  computeRegen,
-  computeClickMana,
-  getMeditationBonus,
-  canAffordSpellCost,
-  calcDamage,
-  getFloorElement,
-  getBoonBonuses,
-  getIncursionStrength,
-} from '@/lib/game/utils';
-import {
-  ELEMENTS,
-  GUARDIANS,
-  SPELLS_DEF,
-  HOURS_PER_TICK,
-  TICK_MS,
-} from '@/lib/game/constants';
-import type { ElementDef, GuardianDef, SpellDef, GameAction } from '@/lib/game/types';
-
-// Define a unified store type that combines all stores
-interface UnifiedStore {
-  // From gameStore (coordinator)
-  day: number;
-  hour: number;
-  incursionStrength: number;
-  containmentWards: number;
-  initialized: boolean;
-  tick: () => void;
-  resetGame: () => void;
-  gatherMana: () => void;
-  startNewLoop: () => void;
-  
-  // From manaStore
-  rawMana: number;
-  meditateTicks: number;
-  totalManaGathered: number;
-  elements: Record<string, { current: number; max: number; unlocked: boolean }>;
-  setRawMana: (amount: number) => void;
-  addRawMana: (amount: number, max: number) => void;
-  spendRawMana: (amount: number) => boolean;
-  convertMana: (element: string, amount: number) => boolean;
-  unlockElement: (element: string, cost: number) => boolean;
-  craftComposite: (target: string, recipe: string[]) => boolean;
-  
-  // From skillStore
-  skills: Record<string, number>;
-  skillProgress: Record<string, number>;
-  skillUpgrades: Record<string, string[]>;
-  skillTiers: Record<string, number>;
-  paidStudySkills: Record<string, number>;
-  currentStudyTarget: { type: 'skill' | 'spell' | 'blueprint'; id: string; progress: number; required: number } | null;
-  parallelStudyTarget: { type: 'skill' | 'spell' | 'blueprint'; id: string; progress: number; required: number } | null;
-  setSkillLevel: (skillId: string, level: number) => void;
-  startStudyingSkill: (skillId: string, rawMana: number) => { started: boolean; cost: number };
-  startStudyingSpell: (spellId: string, rawMana: number, studyTime: number) => { started: boolean; cost: number };
-  cancelStudy: (retentionBonus: number) => void;
-  selectSkillUpgrade: (skillId: string, upgradeId: string) => void;
-  deselectSkillUpgrade: (skillId: string, upgradeId: string) => void;
-  commitSkillUpgrades: (skillId: string, upgradeIds: string[]) => void;
-  tierUpSkill: (skillId: string) => void;
-  getSkillUpgradeChoices: (skillId: string, milestone: 5 | 10) => { available: Array<{ id: string; name: string; desc: string; milestone: 5 | 10; effect: { type: string; stat?: string; value?: number; specialId?: string } }>; selected: string[] };
-  
-  // From prestigeStore
-  loopCount: number;
-  insight: number;
-  totalInsight: number;
-  loopInsight: number;
-  prestigeUpgrades: Record<string, number>;
-  memorySlots: number;
-  pactSlots: number;
-  memories: Array<{ skillId: string; level: number; tier: number; upgrades: string[] }>;
-  defeatedGuardians: number[];
-  signedPacts: number[];
-  pactRitualFloor: number | null;
-  pactRitualProgress: number;
-  doPrestige: (id: string) => void;
-  addMemory: (memory: { skillId: string; level: number; tier: number; upgrades: string[] }) => void;
-  removeMemory: (skillId: string) => void;
-  clearMemories: () => void;
-  startPactRitual: (floor: number, rawMana: number) => boolean;
-  cancelPactRitual: () => void;
-  removePact: (floor: number) => void;
-  defeatGuardian: (floor: number) => void;
-  
-  // From combatStore
-  currentFloor: number;
-  floorHP: number;
-  floorMaxHP: number;
-  maxFloorReached: number;
-  activeSpell: string;
-  currentAction: GameAction;
-  castProgress: number;
-  spells: Record<string, { learned: boolean; level: number; studyProgress?: number }>;
-  setAction: (action: GameAction) => void;
-  setSpell: (spellId: string) => void;
-  learnSpell: (spellId: string) => void;
-  advanceFloor: () => void;
-  
-  // From uiStore
-  log: string[];
-  paused: boolean;
-  gameOver: boolean;
-  victory: boolean;
-  addLog: (message: string) => void;
-  togglePause: () => void;
-  setPaused: (paused: boolean) => void;
-  setGameOver: (gameOver: boolean, victory?: boolean) => void;
-}
-
-interface GameContextValue {
-  // Unified store for backward compatibility
-  store: UnifiedStore;
-  
-  // Individual stores for direct access if needed
-  skillStore: ReturnType<typeof useSkillStore.getState>;
-  manaStore: ReturnType<typeof useManaStore.getState>;
-  prestigeStore: ReturnType<typeof usePrestigeStore.getState>;
-  uiStore: ReturnType<typeof useUIStore.getState>;
-  combatStore: ReturnType<typeof useCombatStore.getState>;
-  
-  // Computed effects from upgrades
-  upgradeEffects: ReturnType<typeof computeEffects>;
-  
-  // Derived stats
-  maxMana: number;
-  baseRegen: number;
-  clickMana: number;
-  floorElem: string;
-  floorElemDef: ElementDef | undefined;
-  isGuardianFloor: boolean;
-  currentGuardian: GuardianDef | undefined;
-  activeSpellDef: SpellDef | undefined;
-  meditationMultiplier: number;
-  incursionStrength: number;
-  studySpeedMult: number;
-  studyCostMult: number;
-  
-  // Effective regen calculations
-  effectiveRegenWithSpecials: number;
-  manaCascadeBonus: number;
-  manaWaterfallBonus: number;
-  effectiveRegen: number;
-  
-  // Has special flags
-  hasManaWaterfall: boolean;
-  hasFlowSurge: boolean;
-  hasManaOverflow: boolean;
-  hasEternalFlow: boolean;
-  
-  // DPS calculation
-  dps: number;
-  
-  // Boons
-  activeBoons: ReturnType<typeof getBoonBonuses>;
-  
-  // Helpers
-  canCastSpell: (spellId: string) => boolean;
-  hasSpecial: (effects: ReturnType<typeof computeEffects>, specialId: string) => boolean;
-  SPECIAL_EFFECTS: typeof SPECIAL_EFFECTS;
-}
-
-const GameContext = createContext<GameContextValue | null>(null);
-
-export function GameProvider({ children }: { children: ReactNode }) {
-  // Get all individual stores
-  const gameStore = useGameStore();
-  const skillState = useSkillStore();
-  const manaState = useManaStore();
-  const prestigeState = usePrestigeStore();
-  const uiState = useUIStore();
-  const combatState = useCombatStore();
-  
-  // Create unified store object for backward compatibility
-  const unifiedStore = useMemo<UnifiedStore>(() => ({
-    // From gameStore
-    day: gameStore.day,
-    hour: gameStore.hour,
-    incursionStrength: gameStore.incursionStrength,
-    containmentWards: gameStore.containmentWards,
-    initialized: gameStore.initialized,
-    tick: gameStore.tick,
-    resetGame: gameStore.resetGame,
-    gatherMana: gameStore.gatherMana,
-    startNewLoop: gameStore.startNewLoop,
-    
-    // From manaStore
-    rawMana: manaState.rawMana,
-    meditateTicks: manaState.meditateTicks,
-    totalManaGathered: manaState.totalManaGathered,
-    elements: manaState.elements,
-    setRawMana: manaState.setRawMana,
-    addRawMana: manaState.addRawMana,
-    spendRawMana: manaState.spendRawMana,
-    convertMana: manaState.convertMana,
-    unlockElement: manaState.unlockElement,
-    craftComposite: manaState.craftComposite,
-    
-    // From skillStore
-    skills: skillState.skills,
-    skillProgress: skillState.skillProgress,
-    skillUpgrades: skillState.skillUpgrades,
-    skillTiers: skillState.skillTiers,
-    paidStudySkills: skillState.paidStudySkills,
-    currentStudyTarget: skillState.currentStudyTarget,
-    parallelStudyTarget: skillState.parallelStudyTarget,
-    setSkillLevel: skillState.setSkillLevel,
-    startStudyingSkill: skillState.startStudyingSkill,
-    startStudyingSpell: skillState.startStudyingSpell,
-    cancelStudy: skillState.cancelStudy,
-    selectSkillUpgrade: skillState.selectSkillUpgrade,
-    deselectSkillUpgrade: skillState.deselectSkillUpgrade,
-    commitSkillUpgrades: skillState.commitSkillUpgrades,
-    tierUpSkill: skillState.tierUpSkill,
-    getSkillUpgradeChoices: skillState.getSkillUpgradeChoices,
-    
-    // From prestigeStore
-    loopCount: prestigeState.loopCount,
-    insight: prestigeState.insight,
-    totalInsight: prestigeState.totalInsight,
-    loopInsight: prestigeState.loopInsight,
-    prestigeUpgrades: prestigeState.prestigeUpgrades,
-    memorySlots: prestigeState.memorySlots,
-    pactSlots: prestigeState.pactSlots,
-    memories: prestigeState.memories,
-    defeatedGuardians: prestigeState.defeatedGuardians,
-    signedPacts: prestigeState.signedPacts,
-    pactRitualFloor: prestigeState.pactRitualFloor,
-    pactRitualProgress: prestigeState.pactRitualProgress,
-    doPrestige: prestigeState.doPrestige,
-    addMemory: prestigeState.addMemory,
-    removeMemory: prestigeState.removeMemory,
-    clearMemories: prestigeState.clearMemories,
-    startPactRitual: prestigeState.startPactRitual,
-    cancelPactRitual: prestigeState.cancelPactRitual,
-    removePact: prestigeState.removePact,
-    defeatGuardian: prestigeState.defeatGuardian,
-    
-    // From combatStore
-    currentFloor: combatState.currentFloor,
-    floorHP: combatState.floorHP,
-    floorMaxHP: combatState.floorMaxHP,
-    maxFloorReached: combatState.maxFloorReached,
-    activeSpell: combatState.activeSpell,
-    currentAction: combatState.currentAction,
-    castProgress: combatState.castProgress,
-    spells: combatState.spells,
-    setAction: combatState.setAction,
-    setSpell: combatState.setSpell,
-    learnSpell: combatState.learnSpell,
-    advanceFloor: combatState.advanceFloor,
-    
-    // From uiStore
-    log: uiState.logs,
-    paused: uiState.paused,
-    gameOver: uiState.gameOver,
-    victory: uiState.victory,
-    addLog: uiState.addLog,
-    togglePause: uiState.togglePause,
-    setPaused: uiState.setPaused,
-    setGameOver: uiState.setGameOver,
-  }), [gameStore, skillState, manaState, prestigeState, uiState, combatState]);
-  
-  // Computed effects from upgrades
-  const upgradeEffects = useMemo(
-    () => computeEffects(skillState.skillUpgrades || {}, skillState.skillTiers || {}),
-    [skillState.skillUpgrades, skillState.skillTiers]
-  );
-  
-  // Create a minimal state object for compute functions
-  const stateForCompute = useMemo(() => ({
-    skills: skillState.skills,
-    prestigeUpgrades: prestigeState.prestigeUpgrades,
-    skillUpgrades: skillState.skillUpgrades,
-    skillTiers: skillState.skillTiers,
-    signedPacts: prestigeState.signedPacts,
-    rawMana: manaState.rawMana,
-    meditateTicks: manaState.meditateTicks,
-    incursionStrength: gameStore.incursionStrength,
-  }), [skillState, prestigeState, manaState, gameStore.incursionStrength]);
-  
-  // Derived stats
-  const maxMana = useMemo(
-    () => computeMaxMana(stateForCompute, upgradeEffects),
-    [stateForCompute, upgradeEffects]
-  );
-  
-  const baseRegen = useMemo(
-    () => computeRegen(stateForCompute, upgradeEffects),
-    [stateForCompute, upgradeEffects]
-  );
-  
-  const clickMana = useMemo(() => computeClickMana(stateForCompute), [stateForCompute]);
-  
-  // Floor element from combat store
-  const floorElem = useMemo(() => getFloorElement(combatState.currentFloor), [combatState.currentFloor]);
-  const floorElemDef = ELEMENTS[floorElem];
-  const isGuardianFloor = !!GUARDIANS[combatState.currentFloor];
-  const currentGuardian = GUARDIANS[combatState.currentFloor];
-  const activeSpellDef = SPELLS_DEF[combatState.activeSpell];
-  
-  const meditationMultiplier = useMemo(
-    () => getMeditationBonus(manaState.meditateTicks, skillState.skills, upgradeEffects.meditationEfficiency),
-    [manaState.meditateTicks, skillState.skills, upgradeEffects.meditationEfficiency]
-  );
-  
-  const incursionStrength = useMemo(
-    () => getIncursionStrength(gameStore.day, gameStore.hour),
-    [gameStore.day, gameStore.hour]
-  );
-  
-  const studySpeedMult = useMemo(
-    () => getStudySpeedMultiplier(skillState.skills),
-    [skillState.skills]
-  );
-  
-  const studyCostMult = useMemo(
-    () => getStudyCostMultiplier(skillState.skills),
-    [skillState.skills]
-  );
-  
-  // Effective regen calculations
-  const effectiveRegenWithSpecials = baseRegen * (1 - incursionStrength);
-  
-  const manaCascadeBonus = hasSpecial(upgradeEffects, SPECIAL_EFFECTS.MANA_CASCADE)
-    ? Math.floor(maxMana / 100) * 0.1
-    : 0;
-  
-  const manaWaterfallBonus = hasSpecial(upgradeEffects, SPECIAL_EFFECTS.MANA_WATERFALL)
-    ? Math.floor(maxMana / 100) * 0.25
-    : 0;
-  
-  const effectiveRegen = (effectiveRegenWithSpecials + manaCascadeBonus + manaWaterfallBonus) * meditationMultiplier;
-  
-  // Has special flags for UI
-  const hasManaWaterfall = hasSpecial(upgradeEffects, SPECIAL_EFFECTS.MANA_WATERFALL);
-  const hasFlowSurge = hasSpecial(upgradeEffects, SPECIAL_EFFECTS.FLOW_SURGE);
-  const hasManaOverflow = hasSpecial(upgradeEffects, SPECIAL_EFFECTS.MANA_OVERFLOW);
-  const hasEternalFlow = hasSpecial(upgradeEffects, SPECIAL_EFFECTS.ETERNAL_FLOW);
-  
-  // Active boons
-  const activeBoons = useMemo(
-    () => getBoonBonuses(prestigeState.signedPacts),
-    [prestigeState.signedPacts]
-  );
-  
-  // DPS calculation - based on active spell, attack speed, and damage
-  const dps = useMemo(() => {
-    if (!activeSpellDef) return 0;
-    const baseDmg = calcDamage(
-      { skills: skillState.skills, signedPacts: prestigeState.signedPacts },
-      combatState.activeSpell,
-      floorElem
-    );
-    const dmgWithEffects = baseDmg * upgradeEffects.baseDamageMultiplier + upgradeEffects.baseDamageBonus;
-    const attackSpeed = (1 + (skillState.skills.quickCast || 0) * 0.05) * upgradeEffects.attackSpeedMultiplier;
-    const castSpeed = activeSpellDef.castSpeed || 1;
-    return dmgWithEffects * attackSpeed * castSpeed;
-  }, [activeSpellDef, skillState.skills, prestigeState.signedPacts, floorElem, upgradeEffects, combatState.activeSpell]);
-  
-  // Helper functions
-  const canCastSpell = (spellId: string): boolean => {
-    const spell = SPELLS_DEF[spellId];
-    if (!spell) return false;
-    return canAffordSpellCost(spell.cost, manaState.rawMana, manaState.elements);
-  };
-  
-  const value: GameContextValue = {
-    store: unifiedStore,
-    skillStore: skillState,
-    manaStore: manaState,
-    prestigeStore: prestigeState,
-    uiStore: uiState,
-    combatStore: combatState,
-    upgradeEffects,
-    maxMana,
-    baseRegen,
-    clickMana,
-    floorElem,
-    floorElemDef,
-    isGuardianFloor,
-    currentGuardian,
-    activeSpellDef,
-    meditationMultiplier,
-    incursionStrength,
-    studySpeedMult,
-    studyCostMult,
-    effectiveRegenWithSpecials,
-    manaCascadeBonus,
-    manaWaterfallBonus,
-    effectiveRegen,
-    hasManaWaterfall,
-    hasFlowSurge,
-    hasManaOverflow,
-    hasEternalFlow,
-    dps,
-    activeBoons,
-    canCastSpell,
-    hasSpecial,
-    SPECIAL_EFFECTS,
-  };
-
-  return <GameContext.Provider value={value}>{children}</GameContext.Provider>;
-}
-
-export function useGameContext() {
-  const context = useContext(GameContext);
-  if (!context) {
-    throw new Error('useGameContext must be used within a GameProvider');
-  }
-  return context;
-}
-
-GameProvider.displayName = "GameProvider";
-
-// Re-export useGameLoop for convenience
-export { useGameLoop };

src/components/game/LabTab.tsx

@@ -1,173 +0,0 @@
-'use client';
-
-import { useState } from 'react';
-import { useGameStore } from '@/lib/game/store';
-import { ELEMENTS, MANA_PER_ELEMENT } from '@/lib/game/constants';
-import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
-import { Button } from '@/components/ui/button';
-
-export function LabTab() {
-  const store = useGameStore();
-  const [convertTarget, setConvertTarget] = useState('fire');
-  
-  return (
-    <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
-      {/* Elemental Mana Display */}
-      <Card className="bg-gray-900/80 border-gray-700 lg:col-span-2">
-        <CardHeader className="pb-2">
-          <CardTitle className="text-amber-400 game-panel-title text-xs">Elemental Mana</CardTitle>
-        </CardHeader>
-        <CardContent>
-          <div className="grid grid-cols-3 sm:grid-cols-4 md:grid-cols-6 lg:grid-cols-8 gap-2">
-            {Object.entries(store.elements)
-              .filter(([, state]) => state.unlocked && state.current >= 1)
-              .map(([id, state]) => {
-                const def = ELEMENTS[id];
-                const isSelected = convertTarget === id;
-                return (
-                  <div
-                    key={id}
-                    className={`p-2 rounded border cursor-pointer transition-all ${isSelected ? 'border-blue-500 bg-blue-900/20' : 'border-gray-700 bg-gray-800/50 hover:border-gray-600'}`}
-                    style={{ borderColor: isSelected ? def?.color : undefined }}
-                    onClick={() => setConvertTarget(id)}
-                  >
-                    <div className="text-lg text-center">{def?.sym}</div>
-                    <div className="text-xs font-semibold text-center" style={{ color: def?.color }}>{def?.name}</div>
-                    <div className="text-xs text-gray-400 game-mono text-center">{state.current}/{state.max}</div>
-                  </div>
-                );
-              })}
-          </div>
-        </CardContent>
-      </Card>
-
-      {/* Element Conversion */}
-      <Card className="bg-gray-900/80 border-gray-700">
-        <CardHeader className="pb-2">
-          <CardTitle className="text-amber-400 game-panel-title text-xs">Element Conversion</CardTitle>
-        </CardHeader>
-        <CardContent>
-          <p className="text-sm text-gray-400 mb-3">
-            Convert raw mana to elemental mana (100:1 ratio)
-          </p>
-          
-          <div className="flex gap-2 flex-wrap">
-            <Button
-              size="sm"
-              variant="outline"
-              onClick={() => store.convertMana(convertTarget, 1)}
-              disabled={!store.elements[convertTarget]?.unlocked || store.rawMana < MANA_PER_ELEMENT}
-            >
-              +1 ({MANA_PER_ELEMENT})
-            </Button>
-            <Button
-              size="sm"
-              variant="outline"
-              onClick={() => store.convertMana(convertTarget, 10)}
-              disabled={!store.elements[convertTarget]?.unlocked || store.rawMana < MANA_PER_ELEMENT * 10}
-            >
-              +10 ({MANA_PER_ELEMENT * 10})
-            </Button>
-            <Button
-              size="sm"
-              variant="outline"
-              onClick={() => store.convertMana(convertTarget, 100)}
-              disabled={!store.elements[convertTarget]?.unlocked || store.rawMana < MANA_PER_ELEMENT * 100}
-            >
-              +100 ({MANA_PER_ELEMENT * 100})
-            </Button>
-          </div>
-        </CardContent>
-      </Card>
-
-      {/* Unlock Elements */}
-      <Card className="bg-gray-900/80 border-gray-700">
-        <CardHeader className="pb-2">
-          <CardTitle className="text-amber-400 game-panel-title text-xs">Unlock Elements</CardTitle>
-        </CardHeader>
-        <CardContent>
-          <p className="text-sm text-gray-400 mb-3">
-            Unlock new elemental affinities (500 mana each)
-          </p>
-          
-          <div className="grid grid-cols-2 sm:grid-cols-3 gap-2">
-            {Object.entries(store.elements)
-              .filter(([id, state]) => !state.unlocked && ELEMENTS[id]?.cat !== 'exotic')
-              .map(([id]) => {
-                const def = ELEMENTS[id];
-                return (
-                  <div
-                    key={id}
-                    className="p-2 rounded border border-gray-700 bg-gray-800/50"
-                  >
-                    <div className="text-lg opacity-50">{def?.sym}</div>
-                    <div className="text-xs font-semibold text-gray-500">{def?.name}</div>
-                    <Button
-                      size="sm"
-                      variant="outline"
-                      className="mt-1 w-full"
-                      disabled={store.rawMana < 500}
-                      onClick={() => store.unlockElement(id)}
-                    >
-                      Unlock
-                    </Button>
-                  </div>
-                );
-              })}
-          </div>
-        </CardContent>
-      </Card>
-
-      {/* Composite Crafting */}
-      <Card className="bg-gray-900/80 border-gray-700 lg:col-span-2">
-        <CardHeader className="pb-2">
-          <CardTitle className="text-amber-400 game-panel-title text-xs">Composite & Exotic Crafting</CardTitle>
-        </CardHeader>
-        <CardContent>
-          <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-3">
-            {Object.entries(ELEMENTS)
-              .filter(([, def]) => def.recipe)
-              .map(([id, def]) => {
-                const state = store.elements[id];
-                const recipe = def.recipe!;
-                const canCraft = recipe.every(
-                  (r) => (store.elements[r]?.current || 0) >= recipe.filter((x) => x === r).length
-                );
-                
-                return (
-                  <div
-                    key={id}
-                    className={`p-3 rounded border ${canCraft ? 'border-gray-600 bg-gray-800/50' : 'border-gray-700 bg-gray-800/30 opacity-50'}`}
-                  >
-                    <div className="flex items-center gap-2 mb-2">
-                      <span className="text-2xl">{def.sym}</span>
-                      <div>
-                        <div className="text-sm font-semibold" style={{ color: def.color }}>
-                          {def.name}
-                        </div>
-                        <div className="text-xs text-gray-500">{def.cat}</div>
-                      </div>
-                    </div>
-                    <div className="text-xs text-gray-400 mb-2">
-                      {recipe.map((r) => ELEMENTS[r]?.sym).join(' + ')}
-                    </div>
-                    <Button
-                      size="sm"
-                      variant={canCraft ? 'default' : 'outline'}
-                      className="w-full"
-                      disabled={!canCraft}
-                      onClick={() => store.craftComposite(id)}
-                    >
-                      Craft
-                    </Button>
-                  </div>
-                );
-              })}
-          </div>
-        </CardContent>
-      </Card>
-    </div>
-  );
-}
-
-LabTab.displayName = "LabTab";

src/components/game/LootInventory.tsx

@@ -1,499 +0,0 @@
-'use client';
-
-import { useState } from 'react';
-import { GameCard } from '@/components/ui/game-card';
-import { Badge } from '@/components/ui/badge';
-import { ActionButton } from '@/components/ui/action-button';
-import { ScrollArea } from '@/components/ui/scroll-area';
-import { Separator } from '@/components/ui/separator';
-import { Input } from '@/components/ui/input';
-import { 
-  Gem, Sparkles, Scroll, Droplet, Trash2, Search, 
-  Package, Sword, Shield, Shirt, Crown, ArrowUpDown,
-  Wrench, AlertTriangle
-} from 'lucide-react';
-import { ElementBadge } from '@/components/ui/element-badge';
-import type { LootInventory as LootInventoryType, EquipmentInstance, ElementState } from '@/lib/game/types';
-import { LOOT_DROPS, RARITY_COLORS } from '@/lib/game/data/loot-drops';
-import { EQUIPMENT_TYPES } from '@/lib/game/data/equipment';
-import { ELEMENTS } from '@/lib/game/constants';
-import { useGameToast } from '@/components/game/GameToast';
-import {
-  AlertDialog,
-  AlertDialogAction,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogTitle,
-} from '@/components/ui/alert-dialog';
-
-interface LootInventoryProps {
-  inventory: LootInventoryType;
-  elements?: Record<string, ElementState>;
-  equipmentInstances?: Record<string, EquipmentInstance>;
-  onDeleteMaterial?: (materialId: string, amount: number) => void;
-  onDeleteEquipment?: (instanceId: string) => void;
-}
-
-type SortMode = 'name' | 'rarity' | 'count';
-type FilterMode = 'all' | 'materials' | 'essence' | 'blueprints' | 'equipment';
-
-const RARITY_ORDER = {
-  common: 0,
-  uncommon: 1,
-  rare: 2,
-  epic: 3,
-  legendary: 4,
-  mythic: 5,
-};
-
-// Map rarity to CSS variable for colors
-const RARITY_CSS_VAR: Record<string, string> = {
-  common: 'var(--rarity-common)',
-  uncommon: 'var(--rarity-uncommon)',
-  rare: 'var(--rarity-rare)',
-  epic: 'var(--rarity-epic)',
-  legendary: 'var(--rarity-legendary)',
-  mythic: 'var(--rarity-mythic)',
-};
-
-// Map rarity to CSS variable for glow/background
-const RARITY_GLOW_CSS_VAR: Record<string, string> = {
-  common: 'var(--rarity-common-glow)',
-  uncommon: 'var(--rarity-uncommon-glow)',
-  rare: 'var(--rarity-rare-glow)',
-  epic: 'var(--rarity-epic-glow)',
-  legendary: 'var(--rarity-legendary-glow)',
-  mythic: 'var(--rarity-mythic-glow)',
-};
-
-const CATEGORY_ICONS: Record<string, typeof Sword> = {
-  caster: Sword,
-  shield: Shield,
-  catalyst: Sparkles,
-  head: Crown,
-  body: Shirt,
-  hands: Wrench,
-  feet: Package,
-  accessory: Gem,
-};
-
-export function LootInventoryDisplay({ 
-  inventory, 
-  elements,
-  equipmentInstances = {},
-  onDeleteMaterial,
-  onDeleteEquipment,
-}: LootInventoryProps) {
-  const showToast = useGameToast();
-  const [searchTerm, setSearchTerm] = useState('');
-  const [sortMode, setSortMode] = useState<SortMode>('rarity');
-  const [filterMode, setFilterMode] = useState<FilterMode>('all');
-  const [deleteConfirm, setDeleteConfirm] = useState<{ type: 'material' | 'equipment'; id: string; name: string } | null>(null);
-
-  // Count items
-  const materialCount = Object.values(inventory.materials).reduce((a, b) => a + b, 0);
-  const essenceCount = elements ? Object.entries(elements).reduce((a, [id, e]) => id === 'transference' ? a : a + e.current, 0) : 0;
-  const blueprintCount = inventory.blueprints.length;
-  const equipmentCount = Object.keys(equipmentInstances).length;
-  const totalItems = materialCount + blueprintCount + equipmentCount;
-
-  // Filter and sort materials
-  const filteredMaterials = Object.entries(inventory.materials)
-    .filter(([id, count]) => {
-      if (count <= 0) return false;
-      const drop = LOOT_DROPS[id];
-      if (!drop) return false;
-      if (searchTerm && !drop.name.toLowerCase().includes(searchTerm.toLowerCase())) return false;
-      return true;
-    })
-    .sort(([aId, aCount], [bId, bCount]) => {
-      const aDrop = LOOT_DROPS[aId];
-      const bDrop = LOOT_DROPS[bId];
-      if (!aDrop || !bDrop) return 0;
-      
-      switch (sortMode) {
-        case 'name':
-          return aDrop.name.localeCompare(bDrop.name);
-        case 'rarity':
-          return RARITY_ORDER[bDrop.rarity] - RARITY_ORDER[aDrop.rarity];
-        case 'count':
-          return bCount - aCount;
-        default:
-          return 0;
-      }
-    });
-
-  // Filter and sort essence
-  const filteredEssence = elements 
-    ? Object.entries(elements)
-        .filter(([id, state]) => {
-          if (!state.unlocked || state.current <= 0) return false;
-          if (id === 'transference') return false; // Transference is not loot
-          if (searchTerm && !ELEMENTS[id]?.name.toLowerCase().includes(searchTerm.toLowerCase())) return false;
-          return true;
-        })
-        .sort(([aId, aState], [bId, bState]) => {
-          switch (sortMode) {
-            case 'name':
-              return (ELEMENTS[aId]?.name || aId).localeCompare(ELEMENTS[bId]?.name || bId);
-            case 'count':
-              return bState.current - aState.current;
-            default:
-              return 0;
-          }
-        })
-    : [];
-
-  // Filter and sort equipment
-  const filteredEquipment = Object.entries(equipmentInstances)
-    .filter(([id, instance]) => {
-      if (searchTerm && !instance.name.toLowerCase().includes(searchTerm.toLowerCase())) return false;
-      return true;
-    })
-    .sort(([aId, aInst], [bId, bInst]) => {
-      switch (sortMode) {
-        case 'name':
-          return aInst.name.localeCompare(bInst.name);
-        case 'rarity':
-          return RARITY_ORDER[bInst.rarity] - RARITY_ORDER[aInst.rarity];
-        default:
-          return 0;
-      }
-    });
-
-  // Check if we have anything to show
-  const hasItems = totalItems > 0 || essenceCount > 0;
-
-  if (!hasItems) {
-    return (
-      <GameCard variant="default" className="w-full">
-        <div className="flex items-center gap-2 mb-2">
-          <Gem className="w-4 h-4 text-[var(--mana-light)]" />
-          <h3 className="text-[var(--mana-light)] game-panel-title text-xs uppercase tracking-wider">
-            Inventory
-          </h3>
-        </div>
-        <div className="text-[var(--text-muted)] text-sm text-center py-4">
-          No items collected yet. Defeat floors and guardians to find loot!
-        </div>
-      </GameCard>
-    );
-  }
-
-  const handleDeleteMaterial = (materialId: string) => {
-    const drop = LOOT_DROPS[materialId];
-    if (drop) {
-      setDeleteConfirm({ type: 'material', id: materialId, name: drop.name });
-    }
-  };
-
-  const handleDeleteEquipment = (instanceId: string) => {
-    const instance = equipmentInstances[instanceId];
-    if (instance) {
-      setDeleteConfirm({ type: 'equipment', id: instanceId, name: instance.name });
-    }
-  };
-
-  const confirmDelete = () => {
-    if (!deleteConfirm) return;
-    
-    if (deleteConfirm.type === 'material' && onDeleteMaterial) {
-      const amount = inventory.materials[deleteConfirm.id] || 0;
-      onDeleteMaterial(deleteConfirm.id, amount);
-      showToast('success', 'Material Deleted', `${deleteConfirm.name} removed from inventory`);
-    } else if (deleteConfirm.type === 'equipment' && onDeleteEquipment) {
-      onDeleteEquipment(deleteConfirm.id);
-      showToast('success', 'Item Discarded', `${deleteConfirm.name} has been removed from inventory`);
-    }
-    
-    setDeleteConfirm(null);
-  };
-
-  return (
-    <>
-      <GameCard variant="default" className="w-full">
-        <div className="flex items-center gap-2 mb-3">
-          <Gem className="w-4 h-4 text-[var(--mana-light)]" />
-          <h3 className="text-[var(--mana-light)] game-panel-title text-xs uppercase tracking-wider">
-            Inventory
-          </h3>
-          <Badge 
-            className="ml-auto bg-[var(--bg-sunken)] text-[var(--text-secondary)] text-xs border-[var(--border-subtle)]"
-            aria-label={`${totalItems} items in inventory`}
-          >
-            {totalItems} items
-          </Badge>
-        </div>
-
-        {/* Search and Filter Controls */}
-        <div className="flex gap-2 mb-3">
-          <div className="relative flex-1">
-            <Search className="absolute left-2 top-1/2 -translate-y-1/2 w-3 h-3 text-[var(--text-muted)]" />
-            <Input
-              placeholder="Search..."
-              value={searchTerm}
-              onChange={(e) => setSearchTerm(e.target.value)}
-              className="h-7 pl-7 bg-[var(--bg-sunken)] border-[var(--border-subtle)] text-xs text-[var(--text-primary)] placeholder:text-[var(--text-disabled)]"
-              aria-label="Search inventory"
-            />
-          </div>
-          <ActionButton
-            variant="secondary"
-            size="sm"
-            className="h-7 px-2"
-            onClick={() => setSortMode(sortMode === 'rarity' ? 'name' : sortMode === 'name' ? 'count' : 'rarity')}
-            aria-label={`Sort by ${sortMode === 'rarity' ? 'name' : sortMode === 'name' ? 'count' : 'rarity'}`}
-          >
-            <ArrowUpDown className="w-3 h-3" />
-          </ActionButton>
-        </div>
-
-        {/* Filter Tabs */}
-        <div className="flex gap-1 flex-wrap mb-3">
-          {[
-            { mode: 'all' as FilterMode, label: 'All' },
-            { mode: 'materials' as FilterMode, label: `Materials (${materialCount})` },
-            { mode: 'essence' as FilterMode, label: `Essence (${essenceCount})` },
-            { mode: 'blueprints' as FilterMode, label: `Blueprints (${blueprintCount})` },
-            { mode: 'equipment' as FilterMode, label: `Equipment (${equipmentCount})` },
-          ].map(({ mode, label }) => (
-            <ActionButton
-              key={mode}
-              variant={filterMode === mode ? 'primary' : 'secondary'}
-              size="sm"
-              className={`h-6 px-2 text-xs ${filterMode === mode ? '' : 'bg-[var(--bg-sunken)]'}`}
-              onClick={() => setFilterMode(mode)}
-              aria-pressed={filterMode === mode}
-              aria-label={`Filter by ${label}`}
-            >
-              {label}
-            </ActionButton>
-          ))}
-        </div>
-
-        <Separator className="bg-[var(--border-subtle)] mb-3" />
-
-        <ScrollArea className="h-64 w-full">
-          <div className="space-y-3 pr-2">
-            {/* Materials */}
-            {(filterMode === 'all' || filterMode === 'materials') && filteredMaterials.length > 0 && (
-              <div>
-                <div className="text-xs text-[var(--text-muted)] mb-2 flex items-center gap-1">
-                  <Sparkles className="w-3 h-3" />
-                  Materials
-                </div>
-                <div className="grid grid-cols-2 gap-2">
-                  {filteredMaterials.map(([id, count]) => {
-                    const drop = LOOT_DROPS[id];
-                    if (!drop) return null;
-                    const rarityColor = RARITY_CSS_VAR[drop.rarity] || 'var(--rarity-common)';
-                    const rarityGlow = RARITY_GLOW_CSS_VAR[drop.rarity] || 'var(--rarity-common-glow)';
-                    return (
-                      <div
-                        key={id}
-                        className="p-2 rounded border bg-[var(--bg-sunken)] group relative"
-                        style={{
-                          borderColor: rarityColor,
-                          backgroundColor: rarityGlow,
-                        }}
-                      >
-                        <div className="flex items-start justify-between">
-                          <div>
-                            <div className="text-xs font-semibold" style={{ color: rarityColor }}>
-                              {drop.name}
-                            </div>
-                            <div className="text-xs text-[var(--text-secondary)]">
-                              x{count}
-                            </div>
-                            <div className="text-xs text-[var(--text-muted)] capitalize">
-                              {drop.rarity}
-                            </div>
-                          </div>
-                          {onDeleteMaterial && (
-                            <ActionButton
-                              variant="ghost"
-                              size="sm"
-                              className="h-5 w-5 p-0 opacity-0 group-hover:opacity-100 text-[var(--color-danger)] hover:text-[var(--interactive-danger-hover)] hover:bg-[var(--interactive-danger)]/20"
-                              onClick={() => handleDeleteMaterial(id)}
-                              aria-label={`Delete ${drop.name}`}
-                            >
-                              <Trash2 className="w-3 h-3" />
-                            </ActionButton>
-                          )}
-                        </div>
-                      </div>
-                    );
-                  })}
-                </div>
-              </div>
-            )}
-
-            {/* Essence */}
-            {(filterMode === 'all' || filterMode === 'essence') && filteredEssence.length > 0 && (
-              <div>
-                <div className="text-xs text-[var(--text-muted)] mb-2 flex items-center gap-1">
-                  <Droplet className="w-3 h-3" />
-                  Elemental Essence
-                </div>
-                <div className="grid grid-cols-2 gap-2">
-                  {filteredEssence.map(([id, state]) => {
-                    const elem = ELEMENTS[id];
-                    if (!elem) return null;
-                    return (
-                      <div
-                        key={id}
-                        className="p-2 rounded border bg-[var(--bg-sunken)]"
-                        style={{
-                          borderColor: `var(--mana-${id})`,
-                          backgroundColor: `var(--mana-${id})20`,
-                        }}
-                      >
-                        <div className="flex items-center gap-1">
-                          <ElementBadge element={id} showIcon={true} size="sm" />
-                        </div>
-                        <div className="text-xs text-[var(--text-secondary)] mt-1">
-                          {state.current} / {state.max}
-                        </div>
-                      </div>
-                    );
-                  })}
-                </div>
-              </div>
-            )}
-
-            {/* Blueprints */}
-            {(filterMode === 'all' || filterMode === 'blueprints') && inventory.blueprints.length > 0 && (
-              <div>
-                <div className="text-xs text-[var(--text-muted)] mb-2 flex items-center gap-1">
-                  <Scroll className="w-3 h-3" />
-                  Blueprints (permanent)
-                </div>
-                <div className="flex flex-wrap gap-1">
-                  {inventory.blueprints.map((id) => {
-                    const drop = LOOT_DROPS[id];
-                    if (!drop) return null;
-                    const rarityColor = RARITY_CSS_VAR[drop.rarity] || 'var(--rarity-common)';
-                    return (
-                      <Badge
-                        key={id}
-                        className="text-xs"
-                        style={{
-                          backgroundColor: `${RARITY_GLOW_CSS_VAR[drop.rarity] || 'var(--rarity-common-glow)'}`,
-                          color: rarityColor,
-                          borderColor: rarityColor,
-                        }}
-                      >
-                        {drop.name}
-                      </Badge>
-                    );
-                  })}
-                </div>
-                <div className="text-xs text-[var(--text-muted)] mt-1 italic">
-                  Blueprints are permanent unlocks - use them to craft equipment
-                </div>
-              </div>
-            )}
-
-            {/* Equipment */}
-            {(filterMode === 'all' || filterMode === 'equipment') && filteredEquipment.length > 0 && (
-              <div>
-                <div className="text-xs text-[var(--text-muted)] mb-2 flex items-center gap-1">
-                  <Package className="w-3 h-3" />
-                  Equipment
-                </div>
-                <div className="space-y-2">
-                  {filteredEquipment.map(([id, instance]) => {
-                    const type = EQUIPMENT_TYPES[instance.typeId];
-                    const Icon = type ? CATEGORY_ICONS[type.category] || Package : Package;
-                    const rarityColor = RARITY_CSS_VAR[instance.rarity] || 'var(--rarity-common)';
-                    const rarityGlow = RARITY_GLOW_CSS_VAR[instance.rarity] || 'var(--rarity-common-glow)';
-                    
-                    return (
-                      <div
-                        key={id}
-                        className="p-2 rounded border bg-[var(--bg-sunken)] group"
-                        style={{
-                          borderColor: rarityColor,
-                          backgroundColor: rarityGlow,
-                        }}
-                      >
-                        <div className="flex items-start justify-between">
-                          <div className="flex items-start gap-2">
-                            <Icon className="w-4 h-4 mt-0.5" style={{ color: rarityColor }} />
-                            <div>
-                              <div className="text-xs font-semibold" style={{ color: rarityColor }}>
-                                {instance.name}
-                              </div>
-                              <div className="text-xs text-[var(--text-secondary)]">
-                                {type?.name} • {instance.usedCapacity}/{instance.totalCapacity} cap
-                              </div>
-                              <div className="text-xs text-[var(--text-muted)] capitalize">
-                                {instance.rarity} • {instance.enchantments.length} enchants
-                              </div>
-                            </div>
-                          </div>
-                          {onDeleteEquipment && (
-                            <ActionButton
-                              variant="ghost"
-                              size="sm"
-                              className="h-5 w-5 p-0 opacity-0 group-hover:opacity-100 text-[var(--color-danger)] hover:text-[var(--interactive-danger-hover)] hover:bg-[var(--interactive-danger)]/20"
-                              onClick={() => handleDeleteEquipment(id)}
-                              aria-label={`Delete ${instance.name}`}
-                            >
-                              <Trash2 className="w-3 h-3" />
-                            </ActionButton>
-                          )}
-                        </div>
-                      </div>
-                    );
-                  })}
-                </div>
-              </div>
-            )}
-          </div>
-        </ScrollArea>
-      </GameCard>
-
-      {/* Delete Confirmation Dialog */}
-      <AlertDialog open={!!deleteConfirm} onOpenChange={() => setDeleteConfirm(null)}>
-        <AlertDialogContent className="bg-[var(--bg-surface)] border-[var(--border-default)]">
-          <AlertDialogHeader>
-            <AlertDialogTitle className="text-[var(--mana-light)] flex items-center gap-2">
-              <AlertTriangle className="w-5 h-5" />
-              Delete Item
-            </AlertDialogTitle>
-            <AlertDialogDescription className="text-[var(--text-secondary)]">
-              Are you sure you want to delete <strong className="text-[var(--text-primary)]">{deleteConfirm?.name}</strong>?
-              {deleteConfirm?.type === 'material' && (
-                <span className="block mt-2 text-[var(--color-danger)]">
-                  This will delete ALL {inventory.materials[deleteConfirm?.id || ''] || 0} of this material!
-                </span>
-              )}
-              {deleteConfirm?.type === 'equipment' && (
-                <span className="block mt-2 text-[var(--color-danger)]">
-                  This equipment and all its enchantments will be permanently lost!
-                </span>
-              )}
-            </AlertDialogDescription>
-          </AlertDialogHeader>
-          <AlertDialogFooter>
-            <AlertDialogCancel className="bg-[var(--bg-sunken)] border-[var(--border-default)] text-[var(--text-primary)] hover:bg-[var(--bg-elevated)]">
-              Cancel
-            </AlertDialogCancel>
-            <AlertDialogAction 
-              className="bg-[var(--interactive-danger)] hover:bg-[var(--interactive-danger-hover)] text-white"
-              onClick={confirmDelete}
-            >
-              Delete
-            </AlertDialogAction>
-          </AlertDialogFooter>
-        </AlertDialogContent>
-      </AlertDialog>
-    </>
-  );
-}
-
-LootInventoryDisplay.displayName = "LootInventoryDisplay";

src/components/game/LootInventory/BlueprintsSection.tsx

@@ -0,0 +1,46 @@
+'use client';
+
+import { Scroll } from 'lucide-react';
+import { Badge } from '@/components/ui/badge';
+import { LOOT_DROPS } from '@/lib/game/data/loot-drops';
+import { RARITY_CSS_VAR, RARITY_GLOW_CSS_VAR } from './types';
+
+interface BlueprintsSectionProps {
+  blueprints: string[];
+}
+
+export function BlueprintsSection({ blueprints }: BlueprintsSectionProps) {
+  if (blueprints.length === 0) return null;
+  
+  return (
+    <div>
+      <div className="text-xs text-[var(--text-muted)] mb-2 flex items-center gap-1">
+        <Scroll className="w-3 h-3" />
+        Blueprints (permanent)
+      </div>
+      <div className="flex flex-wrap gap-1">
+        {blueprints.map((id) => {
+          const drop = LOOT_DROPS[id];
+          if (!drop) return null;
+          const rarityColor = RARITY_CSS_VAR[drop.rarity] || 'var(--rarity-common)';
+          return (
+            <Badge
+              key={id}
+              className="text-xs"
+              style={{
+                backgroundColor: `${RARITY_GLOW_CSS_VAR[drop.rarity] || 'var(--rarity-common-glow)'}`,
+                color: rarityColor,
+                borderColor: rarityColor,
+              }}
+            >
+              {drop.name}
+            </Badge>
+          );
+        })}
+      </div>
+      <div className="text-xs text-[var(--text-muted)] mt-1 italic">
+        Blueprints are permanent unlocks - use them to craft equipment
+      </div>
+    </div>
+  );
+}

src/components/game/LootInventory/EquipmentItem.tsx

@@ -0,0 +1,87 @@
+'use client';
+
+import { Package, Trash2 } from 'lucide-react';
+import type { EquipmentInstance } from '@/lib/game/types';
+import { EQUIPMENT_TYPES } from '@/lib/game/data/equipment';
+import { CATEGORY_ICONS } from './icons';
+import { RARITY_CSS_VAR, RARITY_GLOW_CSS_VAR } from './types';
+import { ActionButton } from '@/components/ui/action-button';
+
+interface EquipmentItemProps {
+  instanceId: string;
+  instance: EquipmentInstance;
+  onDelete?: (instanceId: string) => void;
+}
+
+export function EquipmentItem({ instanceId, instance, onDelete }: EquipmentItemProps) {
+  const type = EQUIPMENT_TYPES[instance.typeId];
+  const Icon = type ? CATEGORY_ICONS[type.category] || Package : Package;
+  const rarityColor = RARITY_CSS_VAR[instance.rarity] || 'var(--rarity-common)';
+  const rarityGlow = RARITY_GLOW_CSS_VAR[instance.rarity] || 'var(--rarity-common-glow)';
+  
+  return (
+    <div
+      className="p-2 rounded border bg-[var(--bg-sunken)] group"
+      style={{
+        borderColor: rarityColor,
+        backgroundColor: rarityGlow,
+      }}
+    >
+      <div className="flex items-start justify-between">
+        <div className="flex items-start gap-2">
+          <Icon className="w-4 h-4 mt-0.5" style={{ color: rarityColor }} />
+          <div>
+            <div className="text-xs font-semibold" style={{ color: rarityColor }}>
+              {instance.name}
+            </div>
+            <div className="text-xs text-[var(--text-secondary)]">
+              {type?.name} • {instance.usedCapacity}/{instance.totalCapacity} cap
+            </div>
+            <div className="text-xs text-[var(--text-muted)] capitalize">
+              {instance.rarity} • {instance.enchantments.length} enchants
+            </div>
+          </div>
+        </div>
+        {onDelete && (
+          <ActionButton
+            variant="ghost"
+            size="sm"
+            className="h-5 w-5 p-0 opacity-0 group-hover:opacity-100 text-[var(--color-danger)] hover:text-[var(--interactive-danger-hover)] hover:bg-[var(--interactive-danger)]/20"
+            onClick={() => onDelete(instanceId)}
+            aria-label={`Delete ${instance.name}`}
+          >
+            <Trash2 className="w-3 h-3" />
+          </ActionButton>
+        )}
+      </div>
+    </div>
+  );
+}
+
+interface EquipmentSectionProps {
+  equipment: [string, EquipmentInstance][];
+  onDeleteEquipment?: (instanceId: string) => void;
+}
+
+export function EquipmentSection({ equipment, onDeleteEquipment }: EquipmentSectionProps) {
+  if (equipment.length === 0) return null;
+  
+  return (
+    <div>
+      <div className="text-xs text-[var(--text-muted)] mb-2 flex items-center gap-1">
+        <Package className="w-3 h-3" />
+        Equipment
+      </div>
+      <div className="space-y-2">
+        {equipment.map(([id, instance]) => (
+          <EquipmentItem
+            key={id}
+            instanceId={id}
+            instance={instance}
+            onDelete={onDeleteEquipment}
+          />
+        ))}
+      </div>
+    </div>
+  );
+}

src/components/game/LootInventory/EssenceItem.tsx

@@ -0,0 +1,55 @@
+'use client';
+
+import { Droplet } from 'lucide-react';
+import { ElementBadge } from '@/components/ui/element-badge';
+import type { ElementState } from '@/lib/game/types';
+import { ELEMENTS } from '@/lib/game/constants';
+
+interface EssenceItemProps {
+  elementId: string;
+  state: ElementState;
+}
+
+export function EssenceItem({ elementId, state }: EssenceItemProps) {
+  const elem = ELEMENTS[elementId];
+  if (!elem) return null;
+  
+  return (
+    <div
+      className="p-2 rounded border bg-[var(--bg-sunken)]"
+      style={{
+        borderColor: `var(--mana-${elementId})`,
+        backgroundColor: `var(--mana-${elementId})20`,
+      }}
+    >
+      <div className="flex items-center gap-1">
+        <ElementBadge element={elementId} showIcon={true} size="sm" />
+      </div>
+      <div className="text-xs text-[var(--text-secondary)] mt-1">
+        {state.current} / {state.max}
+      </div>
+    </div>
+  );
+}
+
+interface EssenceSectionProps {
+  essence: [string, ElementState][];
+}
+
+export function EssenceSection({ essence }: EssenceSectionProps) {
+  if (essence.length === 0) return null;
+  
+  return (
+    <div>
+      <div className="text-xs text-[var(--text-muted)] mb-2 flex items-center gap-1">
+        <Droplet className="w-3 h-3" />
+        Elemental Essence
+      </div>
+      <div className="grid grid-cols-2 gap-2">
+        {essence.map(([id, state]) => (
+          <EssenceItem key={id} elementId={id} state={state} />
+        ))}
+      </div>
+    </div>
+  );
+}

src/components/game/LootInventory/MaterialItem.tsx

@@ -0,0 +1,86 @@
+'use client';
+
+import type { LootInventory } from '@/lib/game/types';
+// For backward compatibility
+type LootInventoryType = LootInventory;
+import { LOOT_DROPS } from '@/lib/game/data/loot-drops';
+import { RARITY_CSS_VAR, RARITY_GLOW_CSS_VAR } from './types';
+import { Sparkles, Trash2 } from 'lucide-react';
+import { ActionButton } from '@/components/ui/action-button';
+
+interface MaterialItemProps {
+  materialId: string;
+  count: number;
+  onDelete?: (materialId: string) => void;
+}
+
+export function MaterialItem({ materialId, count, onDelete }: MaterialItemProps) {
+  const drop = LOOT_DROPS[materialId];
+  if (!drop) return null;
+  
+  const rarityColor = RARITY_CSS_VAR[drop.rarity] || 'var(--rarity-common)';
+  const rarityGlow = RARITY_GLOW_CSS_VAR[drop.rarity] || 'var(--rarity-common-glow)';
+  
+  return (
+    <div
+      className="p-2 rounded border bg-[var(--bg-sunken)] group relative"
+      style={{
+        borderColor: rarityColor,
+        backgroundColor: rarityGlow,
+      }}
+    >
+      <div className="flex items-start justify-between">
+        <div>
+          <div className="text-xs font-semibold" style={{ color: rarityColor }}>
+            {drop.name}
+          </div>
+          <div className="text-xs text-[var(--text-secondary)]">
+            x{count}
+          </div>
+          <div className="text-xs text-[var(--text-muted)] capitalize">
+            {drop.rarity}
+          </div>
+        </div>
+        {onDelete && (
+          <ActionButton
+            variant="ghost"
+            size="sm"
+            className="h-5 w-5 p-0 opacity-0 group-hover:opacity-100 text-[var(--color-danger)] hover:text-[var(--interactive-danger-hover)] hover:bg-[var(--interactive-danger)]/20"
+            onClick={() => onDelete(materialId)}
+            aria-label={`Delete ${drop.name}`}
+          >
+            <Trash2 className="w-3 h-3" />
+          </ActionButton>
+        )}
+      </div>
+    </div>
+  );
+}
+
+interface MaterialsSectionProps {
+  materials: [string, number][];
+  onDeleteMaterial?: (materialId: string) => void;
+}
+
+export function MaterialsSection({ materials, onDeleteMaterial }: MaterialsSectionProps) {
+  if (materials.length === 0) return null;
+  
+  return (
+    <div>
+      <div className="text-xs text-[var(--text-muted)] mb-2 flex items-center gap-1">
+        <Sparkles className="w-3 h-3" />
+        Materials
+      </div>
+      <div className="grid grid-cols-2 gap-2">
+        {materials.map(([id, count]) => (
+          <MaterialItem
+            key={id}
+            materialId={id}
+            count={count}
+            onDelete={onDeleteMaterial}
+          />
+        ))}
+      </div>
+    </div>
+  );
+}

src/components/game/LootInventory/icons.ts

@@ -0,0 +1,15 @@
+import { Gem, Sparkles, Scroll, Droplet, Trash2, Search, 
+  Package, Sword, Shield, Shirt, Crown, ArrowUpDown,
+  Wrench, AlertTriangle } from 'lucide-react';
+import type { EquipmentCategory } from '@/lib/game/data/equipment';
+
+export const CATEGORY_ICONS: Record<string, typeof Sword> = {
+  caster: Sword,
+  shield: Shield,
+  catalyst: Sparkles,
+  head: Crown,
+  body: Shirt,
+  hands: Wrench,
+  feet: Package,
+  accessory: Gem,
+};

src/components/game/LootInventory/types.ts

@@ -0,0 +1,39 @@
+'use client';
+
+import { useState } from 'react';
+import type { LootInventory as LootInventoryType, EquipmentInstance, ElementState } from '@/lib/game/types';
+import { LOOT_DROPS } from '@/lib/game/data/loot-drops';
+import { EQUIPMENT_TYPES } from '@/lib/game/data/equipment';
+import { ELEMENTS } from '@/lib/game/constants';
+
+export type SortMode = 'name' | 'rarity' | 'count';
+export type FilterMode = 'all' | 'materials' | 'essence' | 'blueprints' | 'equipment';
+
+export const RARITY_ORDER = {
+  common: 0,
+  uncommon: 1,
+  rare: 2,
+  epic: 3,
+  legendary: 4,
+  mythic: 5,
+};
+
+// Map rarity to CSS variable for colors
+export const RARITY_CSS_VAR: Record<string, string> = {
+  common: 'var(--rarity-common)',
+  uncommon: 'var(--rarity-uncommon)',
+  rare: 'var(--rarity-rare)',
+  epic: 'var(--rarity-epic)',
+  legendary: 'var(--rarity-legendary)',
+  mythic: 'var(--rarity-mythic)',
+};
+
+// Map rarity to CSS variable for glow/background
+export const RARITY_GLOW_CSS_VAR: Record<string, string> = {
+  common: 'var(--rarity-common-glow)',
+  uncommon: 'var(--rarity-uncommon-glow)',
+  rare: 'var(--rarity-rare-glow)',
+  epic: 'var(--rarity-epic-glow)',
+  legendary: 'var(--rarity-legendary-glow)',
+  mythic: 'var(--rarity-mythic-glow)',
+};

src/components/game/ManaDisplay.tsx

@@ -4,7 +4,7 @@ import { Button } from '@/components/ui/button';
 import { Progress } from '@/components/ui/progress';
 import { Card, CardContent } from '@/components/ui/card';
 import { Zap, ChevronDown, ChevronUp } from 'lucide-react';
-import { fmt, fmtDec } from '@/lib/game/store';
+import { fmt, fmtDec } from '@/lib/game/stores';
 import { ELEMENTS } from '@/lib/game/constants';
 import { useState } from 'react';
 
@@ -39,26 +39,37 @@ export function ManaDisplay({
     .sort((a, b) => b[1].current - a[1].current);
 
   return (
-    <Card className="bg-gray-900/80 border-gray-700">
+    <Card className="bg-[var(--bg-panel)] border-[var(--border-subtle)]">
       <CardContent className="pt-4 space-y-3">
         {/* Raw Mana - Main Display */}
         <div>
           <div className="flex items-baseline gap-1">
-            <span className="text-3xl font-bold game-mono text-blue-400">{fmt(rawMana)}</span>
-            <span className="text-sm text-gray-400">/ {fmt(maxMana)}</span>
+            <span className="text-3xl font-bold game-mono" style={{ color: 'var(--mana-raw)' }}>{fmt(rawMana)}</span>
+            <span className="text-sm" style={{ color: 'var(--text-muted)' }}>/ {fmt(maxMana)}</span>
           </div>
-          <div className="text-xs text-gray-400">
-            +{fmtDec(effectiveRegen)} mana/hr {meditationMultiplier > 1.01 && <span className="text-purple-400">({fmtDec(meditationMultiplier, 1)}x med)</span>}
+          <div className="text-xs" style={{ color: 'var(--text-muted)' }}>
+            +{fmtDec(effectiveRegen)} mana/hr {meditationMultiplier > 1.01 && <span style={{ color: 'var(--mana-light)' }}>({fmtDec(meditationMultiplier, 1)}x med)</span>}
           </div>
         </div>
         
         <Progress
           value={(rawMana / maxMana) * 100}
-          className="h-2 bg-gray-800"
+          className="h-2 bg-[var(--bg-sunken)]"
+          style={{ '--progress-bg': 'var(--mana-raw)' } as React.CSSProperties}
         />
         
         <Button
-          className={`w-full bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700 ${isGathering ? 'animate-pulse' : ''}`}
+          className={`w-full transition-all text-[var(--font-display)] tracking-wider 
+            ${isGathering 
+              ? 'animate-gather-glow' 
+              : 'hover:scale-[1.02]'}
+          `}
+          style={{
+            background: 'var(--mana-raw)',
+            border: '1px solid var(--border-accent)',
+            color: '#0C1020',
+            fontWeight: 600,
+          }}
           onMouseDown={onGatherStart}
           onMouseUp={onGatherEnd}
           onMouseLeave={onGatherEnd}
@@ -67,22 +78,23 @@ export function ManaDisplay({
         >
           <Zap className="w-4 h-4 mr-2" />
           Gather +{clickMana} Mana
-          {isGathering && <span className="ml-2 text-xs">(Holding...)</span>}
+          {isGathering && <span className="ml-2 text-xs" style={{ opacity: 0.8 }}>(Holding...)</span>}
         </Button>
         
         {/* Elemental Mana Pools */}
         {unlockedElements.length > 0 && (
-          <div className="border-t border-gray-700 pt-3 mt-3">
+          <div className="border-t border-[var(--border-subtle)] pt-3 mt-3">
             <button
               onClick={() => setExpanded(!expanded)}
-              className="flex items-center justify-between w-full text-xs text-gray-400 hover:text-gray-300 mb-2"
+              className="flex items-center justify-between w-full text-xs transition-colors"
+              style={{ color: 'var(--text-muted)' }}
             >
-              <span>Elemental Mana ({unlockedElements.length})</span>
+              <span style={{ fontFamily: 'var(--font-display)', letterSpacing: '0.5px' }}>ELEMENTAL MANA ({unlockedElements.length})</span>
               {expanded ? <ChevronUp className="w-3 h-3" /> : <ChevronDown className="w-3 h-3" />}
             </button>
             
             {expanded && (
-              <div className="grid grid-cols-2 gap-2">
+              <div className="grid grid-cols-2 gap-2 mt-2">
                 {unlockedElements.map(([id, state]) => {
                   const elem = ELEMENTS[id];
                   if (!elem) return null;
@@ -90,7 +102,11 @@ export function ManaDisplay({
                   return (
                     <div 
                       key={id} 
-                      className="p-2 rounded bg-gray-800/50 border border-gray-700"
+                      className="p-2 transition-all border rounded-sm"
+                      style={{ 
+                        background: 'var(--bg-sunken)/30',
+                        borderColor: `${elem.color}30`,
+                      }}
                     >
                       <div className="flex items-center gap-1 mb-1">
                         <span style={{ color: elem.color }}>{elem.sym}</span>
@@ -98,16 +114,16 @@ export function ManaDisplay({
                           {elem.name}
                         </span>
                       </div>
-                      <div className="h-1.5 bg-gray-700 rounded-full overflow-hidden mb-1">
+                      <div className="h-1.5 rounded-full overflow-hidden" style={{ background: 'var(--bg-void)' }}>
                         <div 
-                          className="h-full rounded-full transition-all"
+                          className="h-full transition-all rounded-full"
                           style={{ 
                             width: `${Math.min(100, (state.current / state.max) * 100)}%`,
                             backgroundColor: elem.color 
                           }}
                         />
                       </div>
-                      <div className="text-xs text-gray-400 game-mono">
+                      <div className="text-xs game-mono" style={{ color: 'var(--text-muted)' }}>
                         {fmt(state.current)}/{fmt(state.max)}
                       </div>
                     </div>

src/components/game/SkillsTab.tsx

@@ -1,434 +0,0 @@
-'use client';
-
-import { useState } from 'react';
-import { useGameStore, fmt, fmtDec } from '@/lib/game/store';
-import { SKILLS_DEF, SKILL_CATEGORIES } from '@/lib/game/constants';
-import { SKILL_EVOLUTION_PATHS, getUpgradesForSkillAtMilestone, getNextTierSkill, getTierMultiplier } from '@/lib/game/skill-evolution';
-import { computeEffects } from '@/lib/game/upgrade-effects';
-import { useStudyStats } from '@/lib/game/hooks/useGameDerived';
-import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
-import { Badge } from '@/components/ui/badge';
-import { Button } from '@/components/ui/button';
-import { Progress } from '@/components/ui/progress';
-import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from '@/components/ui/dialog';
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
-import { BookOpen, X } from 'lucide-react';
-import type { SkillUpgradeChoice } from '@/lib/game/types';
-
-// Format study time
-function formatStudyTime(hours: number): string {
-  if (hours < 1) return `${Math.round(hours * 60)}m`;
-  return `${hours.toFixed(1)}h`;
-}
-
-export function SkillsTab() {
-  const store = useGameStore();
-  const { studySpeedMult, studyCostMult, hasParallelStudy } = useStudyStats();
-  
-  const [upgradeDialogSkill, setUpgradeDialogSkill] = useState<string | null>(null);
-  const [upgradeDialogMilestone, setUpgradeDialogMilestone] = useState<5 | 10>(5);
-  const [pendingUpgradeSelections, setPendingUpgradeSelections] = useState<string[]>([]);
-  
-  const upgradeEffects = computeEffects(store.skillUpgrades || {}, store.skillTiers || {});
-  
-  // Check if skill has milestone available
-  const hasMilestoneUpgrade = (skillId: string, level: number): { milestone: 5 | 10; hasUpgrades: boolean; selectedCount: number } | null => {
-    const baseSkillId = skillId.includes('_t') ? skillId.split('_t')[0] : skillId;
-    const path = SKILL_EVOLUTION_PATHS[baseSkillId];
-    if (!path) return null;
-    
-    if (level >= 5) {
-      const upgrades5 = getUpgradesForSkillAtMilestone(skillId, 5, store.skillTiers);
-      const selected5 = (store.skillUpgrades[skillId] || []).filter(id => id.includes('_l5'));
-      if (upgrades5.length > 0 && selected5.length < 2) {
-        return { milestone: 5, hasUpgrades: true, selectedCount: selected5.length };
-      }
-    }
-    
-    if (level >= 10) {
-      const upgrades10 = getUpgradesForSkillAtMilestone(skillId, 10, store.skillTiers);
-      const selected10 = (store.skillUpgrades[skillId] || []).filter(id => id.includes('_l10'));
-      if (upgrades10.length > 0 && selected10.length < 2) {
-        return { milestone: 10, hasUpgrades: true, selectedCount: selected10.length };
-      }
-    }
-    
-    return null;
-  };
-  
-  // Render upgrade selection dialog
-  const renderUpgradeDialog = () => {
-    if (!upgradeDialogSkill) return null;
-    
-    const skillDef = SKILLS_DEF[upgradeDialogSkill];
-    const level = store.skills[upgradeDialogSkill] || 0;
-    const { available, selected: alreadySelected } = store.getSkillUpgradeChoices(upgradeDialogSkill, upgradeDialogMilestone);
-    
-    const currentSelections = pendingUpgradeSelections.length > 0 ? pendingUpgradeSelections : alreadySelected;
-    
-    const toggleUpgrade = (upgradeId: string) => {
-      if (currentSelections.includes(upgradeId)) {
-        setPendingUpgradeSelections(currentSelections.filter(id => id !== upgradeId));
-      } else if (currentSelections.length < 2) {
-        setPendingUpgradeSelections([...currentSelections, upgradeId]);
-      }
-    };
-    
-    const handleDone = () => {
-      if (currentSelections.length === 2 && upgradeDialogSkill) {
-        store.commitSkillUpgrades(upgradeDialogSkill, currentSelections, upgradeDialogMilestone);
-      }
-      setPendingUpgradeSelections([]);
-      setUpgradeDialogSkill(null);
-    };
-    
-    const handleCancel = () => {
-      setPendingUpgradeSelections([]);
-      setUpgradeDialogSkill(null);
-    };
-    
-    return (
-      <Dialog open={!!upgradeDialogSkill} onOpenChange={(open) => {
-        if (!open) {
-          setPendingUpgradeSelections([]);
-          setUpgradeDialogSkill(null);
-        }
-      }}>
-        <DialogContent className="bg-gray-900 border-gray-700 max-w-lg">
-          <DialogHeader>
-            <DialogTitle className="text-amber-400">
-              Choose Upgrade - {skillDef?.name || upgradeDialogSkill}
-            </DialogTitle>
-            <DialogDescription className="text-gray-400">
-              Level {upgradeDialogMilestone} Milestone - Select 2 upgrades ({currentSelections.length}/2 chosen)
-            </DialogDescription>
-          </DialogHeader>
-          
-          <div className="space-y-2 mt-4">
-            {available.map((upgrade) => {
-              const isSelected = currentSelections.includes(upgrade.id);
-              const canToggle = currentSelections.length < 2 || isSelected;
-              
-              return (
-                <div
-                  key={upgrade.id}
-                  className={`p-3 rounded border cursor-pointer transition-all ${
-                    isSelected 
-                      ? 'border-amber-500 bg-amber-900/30' 
-                      : canToggle 
-                        ? 'border-gray-600 bg-gray-800/50 hover:border-amber-500/50 hover:bg-gray-800' 
-                        : 'border-gray-700 bg-gray-800/30 opacity-50 cursor-not-allowed'
-                  }`}
-                  onClick={() => {
-                    if (canToggle) {
-                      toggleUpgrade(upgrade.id);
-                    }
-                  }}
-                >
-                  <div className="flex items-center justify-between">
-                    <div className="font-semibold text-sm text-amber-300">{upgrade.name}</div>
-                    {isSelected && <Badge className="bg-amber-600 text-amber-100">Selected</Badge>}
-                  </div>
-                  <div className="text-xs text-gray-400 mt-1">{upgrade.desc}</div>
-                  {upgrade.effect.type === 'multiplier' && (
-                    <div className="text-xs text-green-400 mt-1">
-                      +{Math.round((upgrade.effect.value! - 1) * 100)}% {upgrade.effect.stat}
-                    </div>
-                  )}
-                  {upgrade.effect.type === 'bonus' && (
-                    <div className="text-xs text-blue-400 mt-1">
-                      +{upgrade.effect.value} {upgrade.effect.stat}
-                    </div>
-                  )}
-                  {upgrade.effect.type === 'special' && (
-                    <div className="text-xs text-cyan-400 mt-1">
-                      ⚡ {upgrade.effect.specialDesc || 'Special effect'}
-                    </div>
-                  )}
-                </div>
-              );
-            })}
-          </div>
-          
-          <div className="flex justify-end gap-2 mt-4">
-            <Button 
-              variant="outline" 
-              onClick={handleCancel}
-            >
-              Cancel
-            </Button>
-            <Button 
-              variant="default"
-              onClick={handleDone}
-              disabled={currentSelections.length !== 2}
-            >
-              {currentSelections.length < 2 ? `Select ${2 - currentSelections.length} more` : 'Confirm'}
-            </Button>
-          </div>
-        </DialogContent>
-      </Dialog>
-    );
-  };
-  
-  // Render study progress
-  const renderStudyProgress = () => {
-    if (!store.currentStudyTarget) return null;
-    
-    const target = store.currentStudyTarget;
-    const progressPct = Math.min(100, (target.progress / target.required) * 100);
-    const def = SKILLS_DEF[target.id] || SKILLS_DEF[target.id.split('_t')[0]];
-    
-    return (
-      <div className="p-3 rounded border border-purple-600/50 bg-purple-900/20">
-        <div className="flex items-center justify-between mb-2">
-          <div className="flex items-center gap-2">
-            <BookOpen className="w-4 h-4 text-purple-400" />
-            <span className="text-sm font-semibold text-purple-300">
-              {def?.name}
-            </span>
-          </div>
-          <Button
-            variant="ghost"
-            size="sm"
-            className="h-6 w-6 p-0 text-gray-400 hover:text-white"
-            onClick={() => store.cancelStudy()}
-          >
-            <X className="w-4 h-4" />
-          </Button>
-        </div>
-        <Progress value={progressPct} className="h-2 bg-gray-800" />
-        <div className="flex justify-between text-xs text-gray-400 mt-1">
-          <span>{formatStudyTime(target.progress)} / {formatStudyTime(target.required)}</span>
-          <span>{studySpeedMult.toFixed(1)}x speed</span>
-        </div>
-      </div>
-    );
-  };
-  
-  return (
-    <div className="space-y-4">
-      {/* Upgrade Selection Dialog */}
-      {renderUpgradeDialog()}
-      
-      {/* Current Study Progress */}
-      {store.currentStudyTarget && store.currentStudyTarget.type === 'skill' && (
-        <Card className="bg-gray-900/80 border-purple-600/50">
-          <CardContent className="pt-4">
-            {renderStudyProgress()}
-          </CardContent>
-        </Card>
-      )}
-      
-      {SKILL_CATEGORIES.map((cat) => {
-        const skillsInCat = Object.entries(SKILLS_DEF).filter(([, def]) => def.cat === cat.id);
-        if (skillsInCat.length === 0) return null;
-        
-        return (
-          <Card key={cat.id} className="bg-gray-900/80 border-gray-700">
-            <CardHeader className="pb-2">
-              <CardTitle className="text-amber-400 game-panel-title text-xs">
-                {cat.icon} {cat.name}
-              </CardTitle>
-            </CardHeader>
-            <CardContent>
-              <div className="space-y-2">
-                {skillsInCat.map(([id, def]) => {
-                  const currentTier = store.skillTiers?.[id] || 1;
-                  const tieredSkillId = currentTier > 1 ? `${id}_t${currentTier}` : id;
-                  const tierMultiplier = getTierMultiplier(tieredSkillId);
-                  
-                  const level = store.skills[tieredSkillId] || store.skills[id] || 0;
-                  const maxed = level >= def.max;
-                  
-                  const isStudying = (store.currentStudyTarget?.id === id || store.currentStudyTarget?.id === tieredSkillId) && store.currentStudyTarget?.type === 'skill';
-                  const savedProgress = store.skillProgress[tieredSkillId] || store.skillProgress[id] || 0;
-                  
-                  const tierDef = SKILL_EVOLUTION_PATHS[id]?.tiers.find(t => t.tier === currentTier);
-                  const skillDisplayName = tierDef?.name || def.name;
-                  
-                  // Check prerequisites
-                  let prereqMet = true;
-                  if (def.req) {
-                    for (const [r, rl] of Object.entries(def.req)) {
-                      if ((store.skills[r] || 0) < rl) {
-                        prereqMet = false;
-                        break;
-                      }
-                    }
-                  }
-                  
-                  // Apply skill modifiers
-                  const studyEffects = computeEffects(store.skillUpgrades || {}, store.skillTiers || {});
-                  const effectiveSpeedMult = studySpeedMult * studyEffects.studySpeedMultiplier;
-                  
-                  const tierStudyTime = def.studyTime * currentTier;
-                  const effectiveStudyTime = tierStudyTime / effectiveSpeedMult;
-                  
-                  const baseCost = def.base * (level + 1) * currentTier;
-                  const cost = Math.floor(baseCost * studyCostMult);
-                  
-                  // Check if any study is in progress (prevent switching topics)
-                  const isAnyStudyInProgress = store.currentAction === 'study' && store.currentStudyTarget;
-                  // Can only study if: not maxed, prereqs met, has mana, and either no study in progress or already studying this skill
-                  const canStudy = !maxed && prereqMet && store.rawMana >= cost && (!isAnyStudyInProgress || isStudying);
-                  
-                  const milestoneInfo = hasMilestoneUpgrade(tieredSkillId, level);
-                  const nextTierSkill = getNextTierSkill(tieredSkillId);
-                  const canTierUp = maxed && nextTierSkill;
-                  
-                  const selectedUpgrades = store.skillUpgrades[tieredSkillId] || [];
-                  const selectedL5 = selectedUpgrades.filter(u => u.includes('_l5'));
-                  const selectedL10 = selectedUpgrades.filter(u => u.includes('_l10'));
-                  
-                  return (
-                    <div
-                      key={id}
-                      className={`flex flex-col sm:flex-row sm:items-center justify-between p-3 rounded border gap-2 ${
-                        isStudying ? 'border-purple-500 bg-purple-900/20' : 
-                        milestoneInfo ? 'border-amber-500/50 bg-amber-900/10' :
-                        'border-gray-700 bg-gray-800/30'
-                      }`}
-                    >
-                      <div className="flex-1 min-w-0">
-                        <div className="flex items-center gap-2 flex-wrap">
-                          <span className="font-semibold text-sm">{skillDisplayName}</span>
-                          {currentTier > 1 && (
-                            <Badge className="bg-purple-600/50 text-purple-200 text-xs">Tier {currentTier} ({fmtDec(tierMultiplier, 0)}x)</Badge>
-                          )}
-                          {level > 0 && <span className="text-purple-400 text-sm">Lv.{level}</span>}
-                          {selectedUpgrades.length > 0 && (
-                            <div className="flex gap-1">
-                              {selectedL5.length > 0 && (
-                                <Badge className="bg-amber-700/50 text-amber-200 text-xs">L5: {selectedL5.length}</Badge>
-                              )}
-                              {selectedL10.length > 0 && (
-                                <Badge className="bg-purple-700/50 text-purple-200 text-xs">L10: {selectedL10.length}</Badge>
-                              )}
-                            </div>
-                          )}
-                        </div>
-                        <div className="text-xs text-gray-400 italic">{def.desc}{currentTier > 1 && ` (Tier ${currentTier}: ${fmtDec(tierMultiplier, 0)}x effect)`}</div>
-                        {!prereqMet && def.req && (
-                          <div className="text-xs text-red-400 mt-1">
-                            Requires: {Object.entries(def.req).map(([r, rl]) => `${SKILLS_DEF[r]?.name} Lv.${rl}`).join(', ')}
-                          </div>
-                        )}
-                        <div className="text-xs text-gray-500 mt-1">
-                          <span className={effectiveSpeedMult > 1 ? 'text-green-400' : ''}>
-                            Study: {formatStudyTime(effectiveStudyTime)}{effectiveSpeedMult > 1 && <span className="text-xs ml-1">({Math.round(effectiveSpeedMult * 100)}% speed)</span>}
-                          </span>
-                          {' • '}
-                          <span className={studyCostMult < 1 ? 'text-green-400' : ''}>
-                            Cost: {fmt(cost)} mana{studyCostMult < 1 && <span className="text-xs ml-1">({Math.round(studyCostMult * 100)}% cost)</span>}
-                          </span>
-                        </div>
-                        
-                        {milestoneInfo && (
-                          <div className="text-xs text-amber-400 mt-1 flex items-center gap-1">
-                            ⭐ Level {milestoneInfo.milestone} milestone: {milestoneInfo.selectedCount}/2 upgrades selected
-                          </div>
-                        )}
-                      </div>
-                      
-                      <div className="flex items-center gap-3 flex-wrap sm:flex-nowrap">
-                        {/* Level dots */}
-                        <div className="flex gap-1 shrink-0">
-                          {Array.from({ length: def.max }).map((_, i) => (
-                            <div
-                              key={i}
-                              className={`w-2 h-2 rounded-full border ${
-                                i < level ? 'bg-purple-500 border-purple-400' : 
-                                i === 4 || i === 9 ? 'border-amber-500' : 
-                                'border-gray-600'
-                              }`}
-                            />
-                          ))}
-                        </div>
-                        
-                        {isStudying ? (
-                          <div className="text-xs text-purple-400">
-                            {formatStudyTime(store.currentStudyTarget?.progress || 0)}/{formatStudyTime(tierStudyTime)}
-                          </div>
-                        ) : milestoneInfo ? (
-                          <Button
-                            size="sm"
-                            className="bg-amber-600 hover:bg-amber-700"
-                            onClick={() => {
-                              setUpgradeDialogSkill(tieredSkillId);
-                              setUpgradeDialogMilestone(milestoneInfo.milestone);
-                            }}
-                          >
-                            Choose Upgrades
-                          </Button>
-                        ) : canTierUp ? (
-                          <Button
-                            size="sm"
-                            className="bg-purple-600 hover:bg-purple-700"
-                            onClick={() => store.tierUpSkill(tieredSkillId)}
-                          >
-                            ⬆️ Tier Up
-                          </Button>
-                        ) : maxed ? (
-                          <Badge className="bg-green-900/50 text-green-300">Maxed</Badge>
-                        ) : (
-                          <div className="flex gap-1">
-                            <TooltipProvider>
-                              <Tooltip>
-                                <TooltipTrigger asChild>
-                                  <Button
-                                    size="sm"
-                                    variant={canStudy ? 'default' : 'outline'}
-                                    disabled={!canStudy}
-                                    className={canStudy ? 'bg-purple-600 hover:bg-purple-700' : 'opacity-50'}
-                                    onClick={() => store.startStudyingSkill(tieredSkillId)}
-                                  >
-                                    Study ({fmt(cost)})
-                                  </Button>
-                                </TooltipTrigger>
-                                {!canStudy && isAnyStudyInProgress && !isStudying && (
-                                  <TooltipContent>
-                                    <p>Cannot switch topics while studying {SKILLS_DEF[store.currentStudyTarget?.id || '']?.name || 'another skill'}</p>
-                                  </TooltipContent>
-                                )}
-                              </Tooltip>
-                            </TooltipProvider>
-                            {/* Parallel Study button */}
-                            {hasParallelStudy && 
-                             store.currentStudyTarget && 
-                             !store.parallelStudyTarget &&
-                             store.currentStudyTarget.id !== tieredSkillId &&
-                             canStudy && (
-                              <TooltipProvider>
-                                <Tooltip>
-                                  <TooltipTrigger asChild>
-                                    <Button
-                                      size="sm"
-                                      variant="outline"
-                                      className="border-cyan-500 text-cyan-400 hover:bg-cyan-900/30"
-                                      onClick={() => store.startParallelStudySkill(tieredSkillId)}
-                                    >
-                                      ⚡
-                                    </Button>
-                                  </TooltipTrigger>
-                                  <TooltipContent>
-                                    <p>Study in parallel (50% speed)</p>
-                                  </TooltipContent>
-                                </Tooltip>
-                              </TooltipProvider>
-                            )}
-                          </div>
-                        )}
-                      </div>
-                    </div>
-                  );
-                })}
-              </div>
-            </CardContent>
-          </Card>
-        );
-      })}
-    </div>
-  );
-}
-
-SkillsTab.displayName = "SkillsTab";

src/components/game/SpellsTab.tsx

@@ -1,168 +0,0 @@
-'use client';
-
-import { useGameStore, canAffordSpellCost } from '@/lib/game/store';
-import { ELEMENTS, SPELLS_DEF } from '@/lib/game/constants';
-import { useStudyStats } from '@/lib/game/hooks/useGameDerived';
-import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
-import { Badge } from '@/components/ui/badge';
-import { Button } from '@/components/ui/button';
-import { Progress } from '@/components/ui/progress';
-
-// Format spell cost for display
-function formatSpellCost(cost: { type: 'raw' | 'element'; element?: string; amount: number }): string {
-  if (cost.type === 'raw') {
-    return `${cost.amount} raw`;
-  }
-  const elemDef = ELEMENTS[cost.element || ''];
-  return `${cost.amount} ${elemDef?.sym || '?'}`;
-}
-
-// Get cost color
-function getSpellCostColor(cost: { type: 'raw' | 'element'; element?: string; amount: number }): string {
-  if (cost.type === 'raw') {
-    return '#60A5FA';
-  }
-  return ELEMENTS[cost.element || '']?.color || '#9CA3AF';
-}
-
-// Format study time
-function formatStudyTime(hours: number): string {
-  if (hours < 1) return `${Math.round(hours * 60)}m`;
-  return `${hours.toFixed(1)}h`;
-}
-
-export function SpellsTab() {
-  const store = useGameStore();
-  const { studySpeedMult, studyCostMult } = useStudyStats();
-  
-  const spellTiers = [0, 1, 2, 3, 4];
-  
-  return (
-    <div className="space-y-6">
-      {spellTiers.map(tier => {
-        const spellsInTier = Object.entries(SPELLS_DEF).filter(([, def]) => def.tier === tier);
-        if (spellsInTier.length === 0) return null;
-        
-        const tierNames = ['Basic Spells (Raw Mana)', 'Tier 1 - Elemental', 'Tier 2 - Advanced', 'Tier 3 - Master', 'Tier 4 - Legendary'];
-        const tierColors = ['text-gray-400', 'text-green-400', 'text-blue-400', 'text-purple-400', 'text-amber-400'];
-        
-        return (
-          <div key={tier}>
-            <h3 className={`text-lg font-semibold mb-3 ${tierColors[tier]}`}>{tierNames[tier]}</h3>
-            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-              {spellsInTier.map(([id, def]) => {
-                const state = store.spells[id];
-                const learned = state?.learned;
-                const isStudying = store.currentStudyTarget?.id === id;
-                const elemDef = def.elem === 'raw' ? null : ELEMENTS[def.elem];
-                const baseStudyTime = def.studyTime || (def.tier * 4);
-                const isActive = store.activeSpell === id;
-                const canCast = learned && canAffordSpellCost(def.cost, store.rawMana, store.elements);
-                
-                // Apply skill modifiers
-                const studyTime = baseStudyTime / studySpeedMult;
-                const unlockCost = Math.floor(def.unlock * studyCostMult);
-                
-                // Can start studying?
-                const canStudy = !learned && !isStudying && store.rawMana >= unlockCost;
-                
-                return (
-                  <Card
-                    key={id}
-                    className={`bg-gray-900/80 border-gray-700 ${learned ? '' : 'opacity-75'} ${isStudying ? 'border-purple-500' : ''} ${canCast ? 'ring-1 ring-green-500/30' : ''}`}
-                  >
-                    <CardHeader className="pb-2">
-                      <div className="flex items-center justify-between">
-                        <CardTitle className="text-sm game-panel-title" style={{ color: def.elem === 'raw' ? '#60A5FA' : elemDef?.color }}>
-                          {def.name}
-                        </CardTitle>
-                        {def.tier > 0 && (
-                          <Badge variant="outline" className="text-xs">
-                            T{def.tier}
-                          </Badge>
-                        )}
-                      </div>
-                    </CardHeader>
-                    <CardContent className="space-y-2">
-                      <div className="text-xs text-gray-400">
-                        {def.elem !== 'raw' && <span className="mr-2">{elemDef?.sym} {elemDef?.name}</span>}
-                        <span className="mr-2">⚔️ {def.dmg} dmg</span>
-                      </div>
-                      
-                      {/* Cost display */}
-                      <div className="text-xs game-mono" style={{ color: getSpellCostColor(def.cost) }}>
-                        Cost: {formatSpellCost(def.cost)}
-                      </div>
-                      
-                      {def.desc && (
-                        <div className="text-xs text-gray-500 italic">{def.desc}</div>
-                      )}
-                      
-                      {def.effects && def.effects.length > 0 && (
-                        <div className="flex gap-1 flex-wrap">
-                          {def.effects.map((eff, i) => (
-                            <Badge key={i} variant="outline" className="text-xs">
-                              {eff.type === 'burn' && `🔥 Burn`}
-                              {eff.type === 'stun' && `⚡ Stun`}
-                              {eff.type === 'pierce' && `🎯 Pierce`}
-                              {eff.type === 'multicast' && `✨ Multicast`}
-                            </Badge>
-                          ))}
-                        </div>
-                      )}
-                      
-                      {learned ? (
-                        <div className="flex gap-2">
-                          <Badge className="bg-green-900/50 text-green-300">Learned</Badge>
-                          {isActive && <Badge className="bg-amber-900/50 text-amber-300">Active</Badge>}
-                          {!isActive && (
-                            <Button size="sm" variant="outline" onClick={() => store.setSpell(id)}>
-                              Set Active
-                            </Button>
-                          )}
-                        </div>
-                      ) : isStudying ? (
-                        <div className="space-y-1">
-                          <Progress 
-                            value={Math.min(100, ((state?.studyProgress || 0) / studyTime) * 100)} 
-                            className="h-2 bg-gray-800" 
-                          />
-                          <div className="text-xs text-purple-400">
-                            Studying... {formatStudyTime(state?.studyProgress || 0)}/{formatStudyTime(studyTime)}
-                          </div>
-                        </div>
-                      ) : (
-                        <div className="space-y-2">
-                          <div className="text-xs text-gray-500">
-                            <span className={studySpeedMult > 1 ? 'text-green-400' : ''}>
-                              Study: {formatStudyTime(studyTime)}{studySpeedMult > 1 && <span className="text-xs ml-1">({Math.round(studySpeedMult * 100)}% speed)</span>}
-                            </span>
-                            {' • '}
-                            <span className={studyCostMult < 1 ? 'text-green-400' : ''}>
-                              Cost: {fmt(unlockCost)} mana{studyCostMult < 1 && <span className="text-xs ml-1">({Math.round(studyCostMult * 100)}% cost)</span>}
-                            </span>
-                          </div>
-                          <Button
-                            size="sm"
-                            variant={canStudy ? 'default' : 'outline'}
-                            disabled={!canStudy}
-                            className={canStudy ? 'bg-purple-600 hover:bg-purple-700' : 'opacity-50'}
-                            onClick={() => store.startStudyingSpell(id)}
-                          >
-                            Start Study ({fmt(unlockCost)} mana)
-                          </Button>
-                        </div>
-                      )}
-                    </CardContent>
-                  </Card>
-                );
-              })}
-            </div>
-          </div>
-        );
-      })}
-    </div>
-  );
-}
-
-SpellsTab.displayName = "SpellsTab";

src/components/game/StatsTab.tsx

@@ -1,584 +0,0 @@
-'use client';
-
-import { useGameStore, fmt, fmtDec } from '@/lib/game/store';
-import { ELEMENTS } from '@/lib/game/constants';
-import { SKILL_EVOLUTION_PATHS, getTierMultiplier } from '@/lib/game/skill-evolution';
-import { useManaStats, useCombatStats, useStudyStats } from '@/lib/game/hooks/useGameDerived';
-import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
-import { Badge } from '@/components/ui/badge';
-import { Separator } from '@/components/ui/separator';
-import { Droplet, Swords, BookOpen, FlaskConical, RotateCcw, Trophy, Star } from 'lucide-react';
-import type { SkillUpgradeChoice } from '@/lib/game/types';
-
-export function StatsTab() {
-  const store = useGameStore();
-  const { 
-    upgradeEffects, maxMana, baseRegen, clickMana, 
-    meditationMultiplier, incursionStrength, manaCascadeBonus, manaWaterfallBonus, effectiveRegen,
-    hasSteadyStream, hasManaTorrent, hasDesperateWells,
-    hasManaWaterfall, hasFlowSurge, hasManaOverflow, hasEternalFlow
-  } = useManaStats();
-  const { activeSpellDef, pactMultiplier, pactInsightMultiplier } = useCombatStats();
-  const { studySpeedMult, studyCostMult } = useStudyStats();
-  
-  // Compute element max
-  const elemMax = (() => {
-    const ea = store.skillTiers?.elemAttune || 1;
-    const tieredSkillId = ea > 1 ? `elemAttune_t${ea}` : 'elemAttune';
-    const level = store.skills[tieredSkillId] || store.skills.elemAttune || 0;
-    const tierMult = getTierMultiplier(tieredSkillId);
-    return 10 + level * 50 * tierMult + (store.prestigeUpgrades.elementalAttune || 0) * 25;
-  })();
-  
-  // Get all selected skill upgrades
-  const getAllSelectedUpgrades = () => {
-    const upgrades: { skillId: string; upgrade: SkillUpgradeChoice }[] = [];
-    for (const [skillId, selectedIds] of Object.entries(store.skillUpgrades)) {
-      const baseSkillId = skillId.includes('_t') ? skillId.split('_t')[0] : skillId;
-      const path = SKILL_EVOLUTION_PATHS[baseSkillId];
-      if (!path) continue;
-      for (const tier of path.tiers) {
-        if (tier.skillId === skillId) {
-          for (const upgradeId of selectedIds) {
-            const upgrade = tier.upgrades.find(u => u.id === upgradeId);
-            if (upgrade) {
-              upgrades.push({ skillId, upgrade });
-            }
-          }
-        }
-      }
-    }
-    return upgrades;
-  };
-  
-  const selectedUpgrades = getAllSelectedUpgrades();
-  
-  return (
-    <div className="space-y-4">
-      {/* Mana Stats */}
-      <Card className="bg-gray-900/80 border-gray-700">
-        <CardHeader className="pb-2">
-          <CardTitle className="text-blue-400 game-panel-title text-xs flex items-center gap-2">
-            <Droplet className="w-4 h-4" />
-            Mana Stats
-          </CardTitle>
-        </CardHeader>
-        <CardContent>
-          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-            <div className="space-y-2">
-              <div className="flex justify-between text-sm">
-                <span className="text-gray-400">Base Max Mana:</span>
-                <span className="text-gray-200">100</span>
-              </div>
-              <div className="flex justify-between text-sm">
-                <span className="text-gray-400">Mana Well Bonus:</span>
-                <span className="text-blue-300">
-                  {(() => {
-                    const mw = store.skillTiers?.manaWell || 1;
-                    const tieredSkillId = mw > 1 ? `manaWell_t${mw}` : 'manaWell';
-                    const level = store.skills[tieredSkillId] || store.skills.manaWell || 0;
-                    const tierMult = getTierMultiplier(tieredSkillId);
-                    return `+${fmt(level * 100 * tierMult)} (${level} lvl × 100 × ${tierMult}x tier)`;
-                  })()}
-                </span>
-              </div>
-              <div className="flex justify-between text-sm">
-                <span className="text-gray-400">Prestige Mana Well:</span>
-                <span className="text-blue-300">+{fmt((store.prestigeUpgrades.manaWell || 0) * 500)}</span>
-              </div>
-              {upgradeEffects.maxManaBonus > 0 && (
-                <div className="flex justify-between text-sm">
-                  <span className="text-amber-400">Upgrade Mana Bonus:</span>
-                  <span className="text-amber-300">+{fmt(upgradeEffects.maxManaBonus)}</span>
-                </div>
-              )}
-              {upgradeEffects.maxManaMultiplier > 1 && (
-                <div className="flex justify-between text-sm">
-                  <span className="text-amber-400">Upgrade Mana Multiplier:</span>
-                  <span className="text-amber-300">×{fmtDec(upgradeEffects.maxManaMultiplier, 2)}</span>
-                </div>
-              )}
-              <div className="flex justify-between text-sm font-semibold border-t border-gray-700 pt-2">
-                <span className="text-gray-300">Total Max Mana:</span>
-                <span className="text-blue-400">{fmt(maxMana)}</span>
-              </div>
-            </div>
-            <div className="space-y-2">
-              <div className="flex justify-between text-sm">
-                <span className="text-gray-400">Base Regen:</span>
-                <span className="text-gray-200">2/hr</span>
-              </div>
-              <div className="flex justify-between text-sm">
-                <span className="text-gray-400">Mana Flow Bonus:</span>
-                <span className="text-blue-300">
-                  {(() => {
-                    const mf = store.skillTiers?.manaFlow || 1;
-                    const tieredSkillId = mf > 1 ? `manaFlow_t${mf}` : 'manaFlow';
-                    const level = store.skills[tieredSkillId] || store.skills.manaFlow || 0;
-                    const tierMult = getTierMultiplier(tieredSkillId);
-                    return `+${fmtDec(level * 1 * tierMult)}/hr (${level} lvl × 1 × ${tierMult}x tier)`;
-                  })()}
-                </span>
-              </div>
-              <div className="flex justify-between text-sm">
-                <span className="text-gray-400">Mana Spring Bonus:</span>
-                <span className="text-blue-300">+{(store.skills.manaSpring || 0) * 2}/hr</span>
-              </div>
-              <div className="flex justify-between text-sm">
-                <span className="text-gray-400">Prestige Mana Flow:</span>
-                <span className="text-blue-300">+{fmtDec((store.prestigeUpgrades.manaFlow || 0) * 0.5)}/hr</span>
-              </div>
-              <div className="flex justify-between text-sm">
-                <span className="text-gray-400">Temporal Echo:</span>
-                <span className="text-blue-300">×{fmtDec(1 + (store.prestigeUpgrades.temporalEcho || 0) * 0.1, 2)}</span>
-              </div>
-              <div className="flex justify-between text-sm font-semibold border-t border-gray-700 pt-2">
-                <span className="text-gray-300">Base Regen:</span>
-                <span className="text-blue-400">{fmtDec(baseRegen, 2)}/hr</span>
-              </div>
-              {upgradeEffects.regenBonus > 0 && (
-                <div className="flex justify-between text-sm">
-                  <span className="text-amber-400">Upgrade Regen Bonus:</span>
-                  <span className="text-amber-300">+{fmtDec(upgradeEffects.regenBonus, 2)}/hr</span>
-                </div>
-              )}
-              {upgradeEffects.permanentRegenBonus > 0 && (
-                <div className="flex justify-between text-sm">
-                  <span className="text-amber-400">Permanent Regen Bonus:</span>
-                  <span className="text-amber-300">+{fmtDec(upgradeEffects.permanentRegenBonus, 2)}/hr</span>
-                </div>
-              )}
-              {upgradeEffects.regenMultiplier > 1 && (
-                <div className="flex justify-between text-sm">
-                  <span className="text-amber-400">Upgrade Regen Multiplier:</span>
-                  <span className="text-amber-300">×{fmtDec(upgradeEffects.regenMultiplier, 2)}</span>
-                </div>
-              )}
-            </div>
-          </div>
-          <Separator className="bg-gray-700 my-3" />
-          {/* Skill Upgrade Effects Summary */}
-          {upgradeEffects.activeUpgrades.length > 0 && (
-            <>
-              <div className="mb-2">
-                <span className="text-xs text-amber-400 game-panel-title">Active Skill Upgrades</span>
-              </div>
-              <div className="grid grid-cols-1 md:grid-cols-2 gap-2 mb-3">
-                {upgradeEffects.activeUpgrades.map((upgrade, idx) => (
-                  <div key={idx} className="flex justify-between text-xs bg-gray-800/50 rounded px-2 py-1">
-                    <span className="text-gray-300">{upgrade.name}</span>
-                    <span className="text-gray-400">{upgrade.desc}</span>
-                  </div>
-                ))}
-              </div>
-              <Separator className="bg-gray-700 my-3" />
-            </>
-          )}
-          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-            <div className="space-y-2">
-              <div className="flex justify-between text-sm">
-                <span className="text-gray-400">Click Mana Value:</span>
-                <span className="text-purple-300">+{clickMana}</span>
-              </div>
-              <div className="flex justify-between text-sm">
-                <span className="text-gray-400">Mana Tap Bonus:</span>
-                <span className="text-purple-300">+{store.skills.manaTap || 0}</span>
-              </div>
-              <div className="flex justify-between text-sm">
-                <span className="text-gray-400">Mana Surge Bonus:</span>
-                <span className="text-purple-300">+{(store.skills.manaSurge || 0) * 3}</span>
-              </div>
-              <div className="flex justify-between text-sm">
-                <span className="text-gray-400">Mana Overflow:</span>
-                <span className="text-purple-300">×{fmtDec(1 + (store.skills.manaOverflow || 0) * 0.25, 2)}</span>
-              </div>
-            </div>
-            <div className="space-y-2">
-              <div className="flex justify-between text-sm">
-                <span className="text-gray-400">Meditation Multiplier:</span>
-                <span className={`font-semibold ${meditationMultiplier > 1.5 ? 'text-purple-400' : 'text-gray-300'}`}>
-                  {fmtDec(meditationMultiplier, 2)}x
-                </span>
-              </div>
-              <div className="flex justify-between text-sm">
-                <span className="text-gray-400">Effective Regen:</span>
-                <span className="text-green-400 font-semibold">{fmtDec(effectiveRegen, 2)}/hr</span>
-              </div>
-              {incursionStrength > 0 && !hasSteadyStream && (
-                <div className="flex justify-between text-sm">
-                  <span className="text-red-400">Incursion Penalty:</span>
-                  <span className="text-red-400">-{Math.round(incursionStrength * 100)}%</span>
-                </div>
-              )}
-              {hasSteadyStream && incursionStrength > 0 && (
-                <div className="flex justify-between text-sm">
-                  <span className="text-green-400">Steady Stream:</span>
-                  <span className="text-green-400">Immune to incursion</span>
-                </div>
-              )}
-              {manaCascadeBonus > 0 && (
-                <div className="flex justify-between text-sm">
-                  <span className="text-cyan-400">Mana Cascade Bonus:</span>
-                  <span className="text-cyan-400">+{fmtDec(manaCascadeBonus, 2)}/hr</span>
-                </div>
-              )}
-              {manaWaterfallBonus > 0 && (
-                <div className="flex justify-between text-sm">
-                  <span className="text-cyan-400">Mana Waterfall Bonus:</span>
-                  <span className="text-cyan-400">+{fmtDec(manaWaterfallBonus, 2)}/hr</span>
-                </div>
-              )}
-              {hasManaWaterfall && (
-                <div className="flex justify-between text-sm">
-                  <span className="text-cyan-400">Mana Waterfall:</span>
-                  <span className="text-cyan-400">+0.25 regen per 100 max mana</span>
-                </div>
-              )}
-              {hasFlowSurge && (
-                <div className="flex justify-between text-sm">
-                  <span className="text-cyan-400">Flow Surge:</span>
-                  <span className="text-cyan-400">Clicks activate +100% regen for 1hr</span>
-                </div>
-              )}
-              {hasManaOverflow && (
-                <div className="flex justify-between text-sm">
-                  <span className="text-cyan-400">Mana Overflow:</span>
-                  <span className="text-cyan-400">Raw mana can exceed max by 20%</span>
-                </div>
-              )}
-              {hasEternalFlow && (
-                <div className="flex justify-between text-sm">
-                  <span className="text-green-400">Eternal Flow:</span>
-                  <span className="text-green-400">Regen immune to ALL penalties</span>
-                </div>
-              )}
-              {hasManaTorrent && store.rawMana > maxMana * 0.75 && (
-                <div className="flex justify-between text-sm">
-                  <span className="text-cyan-400">Mana Torrent:</span>
-                  <span className="text-cyan-400">+50% regen (high mana)</span>
-                </div>
-              )}
-              {hasDesperateWells && store.rawMana < maxMana * 0.25 && (
-                <div className="flex justify-between text-sm">
-                  <span className="text-cyan-400">Desperate Wells:</span>
-                  <span className="text-cyan-400">+50% regen (low mana)</span>
-                </div>
-              )}
-            </div>
-          </div>
-        </CardContent>
-      </Card>
-
-      {/* Combat Stats */}
-      <Card className="bg-gray-900/80 border-gray-700">
-        <CardHeader className="pb-2">
-          <CardTitle className="text-red-400 game-panel-title text-xs flex items-center gap-2">
-            <Swords className="w-4 h-4" />
-            Combat Stats
-          </CardTitle>
-        </CardHeader>
-        <CardContent>
-          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-            <div className="space-y-2">
-              <div className="flex justify-between text-sm">
-                <span className="text-gray-400">Active Spell Base Damage:</span>
-                <span className="text-gray-200">{activeSpellDef?.dmg || 5}</span>
-              </div>
-              <div className="flex justify-between text-sm">
-                <span className="text-gray-400">Combat Training Bonus:</span>
-                <span className="text-red-300">+{(store.skills.combatTrain || 0) * 5}</span>
-              </div>
-              <div className="flex justify-between text-sm">
-                <span className="text-gray-400">Arcane Fury Multiplier:</span>
-                <span className="text-red-300">×{fmtDec(1 + (store.skills.arcaneFury || 0) * 0.1, 2)}</span>
-              </div>
-              <div className="flex justify-between text-sm">
-                <span className="text-gray-400">Elemental Mastery:</span>
-                <span className="text-red-300">×{fmtDec(1 + (store.skills.elementalMastery || 0) * 0.15, 2)}</span>
-              </div>
-              <div className="flex justify-between text-sm">
-                <span className="text-gray-400">Guardian Bane:</span>
-                <span className="text-red-300">×{fmtDec(1 + (store.skills.guardianBane || 0) * 0.2, 2)} (vs guardians)</span>
-              </div>
-            </div>
-            <div className="space-y-2">
-              <div className="flex justify-between text-sm">
-                <span className="text-gray-400">Critical Hit Chance:</span>
-                <span className="text-amber-300">{((store.skills.precision || 0) * 5)}%</span>
-              </div>
-              <div className="flex justify-between text-sm">
-                <span className="text-gray-400">Critical Multiplier:</span>
-                <span className="text-amber-300">1.5x</span>
-              </div>
-              <div className="flex justify-between text-sm">
-                <span className="text-gray-400">Spell Echo Chance:</span>
-                <span className="text-amber-300">{((store.skills.spellEcho || 0) * 10)}%</span>
-              </div>
-              <div className="flex justify-between text-sm">
-                <span className="text-gray-400">Pact Multiplier:</span>
-                <span className="text-amber-300">×{fmtDec(pactMultiplier, 2)}</span>
-              </div>
-              <div className="flex justify-between text-sm font-semibold border-t border-gray-700 pt-2">
-                <span className="text-gray-300">Total Damage:</span>
-                <span className="text-red-400">{fmt(calcDamage(store, store.activeSpell))}</span>
-              </div>
-            </div>
-          </div>
-        </CardContent>
-      </Card>
-
-      {/* Pact Status */}
-      <Card className="bg-gray-900/80 border-gray-700">
-        <CardHeader className="pb-2">
-          <CardTitle className="text-amber-400 game-panel-title text-xs flex items-center gap-2">
-            <Trophy className="w-4 h-4" />
-            Pact Status
-          </CardTitle>
-        </CardHeader>
-        <CardContent>
-          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-            <div className="space-y-2">
-              <div className="flex justify-between text-sm">
-                <span className="text-gray-400">Pact Slots:</span>
-                <span className="text-amber-300">{store.signedPacts.length} / {1 + (store.prestigeUpgrades.pactCapacity || 0)}</span>
-              </div>
-              <div className="flex justify-between text-sm">
-                <span className="text-gray-400">Damage Multiplier:</span>
-                <span className="text-amber-300">×{fmtDec(pactMultiplier, 2)}</span>
-              </div>
-              <div className="flex justify-between text-sm">
-                <span className="text-gray-400">Insight Multiplier:</span>
-                <span className="text-purple-300">×{fmtDec(pactInsightMultiplier, 2)}</span>
-              </div>
-              {store.signedPacts.length > 1 && (
-                <>
-                  <div className="flex justify-between text-sm">
-                    <span className="text-gray-400">Interference Mitigation:</span>
-                    <span className="text-green-300">{Math.min(store.pactInterferenceMitigation || 0, 5) * 10}%</span>
-                  </div>
-                  {(store.pactInterferenceMitigation || 0) >= 5 && (
-                    <div className="flex justify-between text-sm">
-                      <span className="text-cyan-400">Synergy Bonus:</span>
-                      <span className="text-cyan-300">+{((store.pactInterferenceMitigation || 0) - 5) * 10}%</span>
-                    </div>
-                  )}
-                </>
-              )}
-            </div>
-            <div className="space-y-2">
-              <div className="text-sm text-gray-400 mb-2">Unlocked Mana Types:</div>
-              <div className="flex flex-wrap gap-1">
-                {Object.entries(store.elements)
-                  .filter(([, state]) => state.unlocked)
-                  .map(([id]) => {
-                    const elem = ELEMENTS[id];
-                    return (
-                      <Badge key={id} variant="outline" className="text-xs" style={{ borderColor: elem?.color, color: elem?.color }}>
-                        {elem?.sym} {elem?.name}
-                      </Badge>
-                    );
-                  })}
-              </div>
-            </div>
-          </div>
-        </CardContent>
-      </Card>
-
-      {/* Study Stats */}
-      <Card className="bg-gray-900/80 border-gray-700">
-        <CardHeader className="pb-2">
-          <CardTitle className="text-purple-400 game-panel-title text-xs flex items-center gap-2">
-            <BookOpen className="w-4 h-4" />
-            Study Stats
-          </CardTitle>
-        </CardHeader>
-        <CardContent>
-          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
-            <div className="space-y-2">
-              <div className="flex justify-between text-sm">
-                <span className="text-gray-400">Study Speed:</span>
-                <span className="text-purple-300">×{fmtDec(studySpeedMult, 2)}</span>
-              </div>
-              <div className="flex justify-between text-sm">
-                <span className="text-gray-400">Quick Learner Bonus:</span>
-                <span className="text-purple-300">+{((store.skills.quickLearner || 0) * 10)}%</span>
-              </div>
-            </div>
-            <div className="space-y-2">
-              <div className="flex justify-between text-sm">
-                <span className="text-gray-400">Study Cost:</span>
-                <span className="text-purple-300">{Math.round(studyCostMult * 100)}%</span>
-              </div>
-              <div className="flex justify-between text-sm">
-                <span className="text-gray-400">Focused Mind Bonus:</span>
-                <span className="text-purple-300">-{((store.skills.focusedMind || 0) * 5)}%</span>
-              </div>
-            </div>
-            <div className="space-y-2">
-              <div className="flex justify-between text-sm">
-                <span className="text-gray-400">Progress Retention:</span>
-                <span className="text-purple-300">{Math.round((1 + (store.skills.knowledgeRetention || 0) * 0.2) * 100)}%</span>
-              </div>
-            </div>
-          </div>
-        </CardContent>
-      </Card>
-
-      {/* Element Stats */}
-      <Card className="bg-gray-900/80 border-gray-700">
-        <CardHeader className="pb-2">
-          <CardTitle className="text-green-400 game-panel-title text-xs flex items-center gap-2">
-            <FlaskConical className="w-4 h-4" />
-            Element Stats
-          </CardTitle>
-        </CardHeader>
-        <CardContent>
-          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-            <div className="space-y-2">
-              <div className="flex justify-between text-sm">
-                <span className="text-gray-400">Element Capacity:</span>
-                <span className="text-green-300">{elemMax}</span>
-              </div>
-              <div className="flex justify-between text-sm">
-                <span className="text-gray-400">Elem. Attunement Bonus:</span>
-                <span className="text-green-300">
-                  {(() => {
-                    const ea = store.skillTiers?.elemAttune || 1;
-                    const tieredSkillId = ea > 1 ? `elemAttune_t${ea}` : 'elemAttune';
-                    const level = store.skills[tieredSkillId] || store.skills.elemAttune || 0;
-                    const tierMult = getTierMultiplier(tieredSkillId);
-                    return `+${level * 50 * tierMult}`;
-                  })()}
-                </span>
-              </div>
-              <div className="flex justify-between text-sm">
-                <span className="text-gray-400">Prestige Attunement:</span>
-                <span className="text-green-300">+{(store.prestigeUpgrades.elementalAttune || 0) * 25}</span>
-              </div>
-            </div>
-            <div className="space-y-2">
-              <div className="flex justify-between text-sm">
-                <span className="text-gray-400">Unlocked Elements:</span>
-                <span className="text-green-300">{Object.values(store.elements).filter(e => e.unlocked).length} / {Object.keys(ELEMENTS).length}</span>
-              </div>
-              <div className="flex justify-between text-sm">
-                <span className="text-gray-400">Elem. Crafting Bonus:</span>
-                <span className="text-green-300">×{fmtDec(1 + (store.skills.elemCrafting || 0) * 0.25, 2)}</span>
-              </div>
-            </div>
-          </div>
-          <Separator className="bg-gray-700 my-3" />
-          <div className="text-xs text-gray-400 mb-2">Elemental Mana Pools:</div>
-          <div className="grid grid-cols-4 sm:grid-cols-6 md:grid-cols-8 gap-2">
-            {Object.entries(store.elements)
-              .filter(([, state]) => state.unlocked)
-              .map(([id, state]) => {
-                const def = ELEMENTS[id];
-                return (
-                  <div key={id} className="p-2 rounded border border-gray-700 bg-gray-800/50 text-center">
-                    <div className="text-lg">{def?.sym}</div>
-                    <div className="text-xs text-gray-400">{state.current}/{state.max}</div>
-                  </div>
-                );
-              })}
-          </div>
-        </CardContent>
-      </Card>
-
-      {/* Active Upgrades */}
-      <Card className="bg-gray-900/80 border-gray-700">
-        <CardHeader className="pb-2">
-          <CardTitle className="text-amber-400 game-panel-title text-xs flex items-center gap-2">
-            <Star className="w-4 h-4" />
-            Active Skill Upgrades ({selectedUpgrades.length})
-          </CardTitle>
-        </CardHeader>
-        <CardContent>
-          {selectedUpgrades.length === 0 ? (
-            <div className="text-gray-500 text-sm">No skill upgrades selected yet. Level skills to 5 or 10 to choose upgrades.</div>
-          ) : (
-            <div className="grid grid-cols-1 md:grid-cols-2 gap-2">
-              {selectedUpgrades.map(({ skillId, upgrade }) => (
-                <div key={upgrade.id} className="p-2 rounded border border-amber-600/30 bg-amber-900/10">
-                  <div className="flex items-center justify-between">
-                    <span className="text-amber-300 text-sm font-semibold">{upgrade.name}</span>
-                    <Badge variant="outline" className="text-xs text-gray-400">
-                      {SKILLS_DEF[skillId]?.name || skillId}
-                    </Badge>
-                  </div>
-                  <div className="text-xs text-gray-400 mt-1">{upgrade.desc}</div>
-                  {upgrade.effect.type === 'multiplier' && (
-                    <div className="text-xs text-green-400 mt-1">
-                      +{Math.round((upgrade.effect.value! - 1) * 100)}% {upgrade.effect.stat}
-                    </div>
-                  )}
-                  {upgrade.effect.type === 'bonus' && (
-                    <div className="text-xs text-blue-400 mt-1">
-                      +{upgrade.effect.value} {upgrade.effect.stat}
-                    </div>
-                  )}
-                  {upgrade.effect.type === 'special' && (
-                    <div className="text-xs text-cyan-400 mt-1">
-                      ⚡ {upgrade.effect.specialDesc || 'Special effect active'}
-                    </div>
-                  )}
-                </div>
-              ))}
-            </div>
-          )}
-        </CardContent>
-      </Card>
-
-      {/* Loop Stats */}
-      <Card className="bg-gray-900/80 border-gray-700">
-        <CardHeader className="pb-2">
-          <CardTitle className="text-purple-400 game-panel-title text-xs flex items-center gap-2">
-            <RotateCcw className="w-4 h-4" />
-            Loop Stats
-          </CardTitle>
-        </CardHeader>
-        <CardContent>
-          <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
-            <div className="p-3 bg-gray-800/50 rounded text-center">
-              <div className="text-2xl font-bold text-amber-400 game-mono">{store.loopCount}</div>
-              <div className="text-xs text-gray-400">Loops Completed</div>
-            </div>
-            <div className="p-3 bg-gray-800/50 rounded text-center">
-              <div className="text-2xl font-bold text-purple-400 game-mono">{fmt(store.insight)}</div>
-              <div className="text-xs text-gray-400">Current Insight</div>
-            </div>
-            <div className="p-3 bg-gray-800/50 rounded text-center">
-              <div className="text-2xl font-bold text-blue-400 game-mono">{fmt(store.totalInsight)}</div>
-              <div className="text-xs text-gray-400">Total Insight</div>
-            </div>
-            <div className="p-3 bg-gray-800/50 rounded text-center">
-              <div className="text-2xl font-bold text-green-400 game-mono">{store.maxFloorReached}</div>
-              <div className="text-xs text-gray-400">Max Floor</div>
-            </div>
-          </div>
-          <Separator className="bg-gray-700 my-3" />
-          <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
-            <div className="p-3 bg-gray-800/50 rounded text-center">
-              <div className="text-xl font-bold text-gray-300 game-mono">{Object.values(store.spells).filter(s => s.learned).length}</div>
-              <div className="text-xs text-gray-400">Spells Learned</div>
-            </div>
-            <div className="p-3 bg-gray-800/50 rounded text-center">
-              <div className="text-xl font-bold text-gray-300 game-mono">{Object.values(store.skills).reduce((a, b) => a + b, 0)}</div>
-              <div className="text-xs text-gray-400">Total Skill Levels</div>
-            </div>
-            <div className="p-3 bg-gray-800/50 rounded text-center">
-              <div className="text-xl font-bold text-gray-300 game-mono">{fmt(store.totalManaGathered)}</div>
-              <div className="text-xs text-gray-400">Total Mana Gathered</div>
-            </div>
-            <div className="p-3 bg-gray-800/50 rounded text-center">
-              <div className="text-xl font-bold text-gray-300 game-mono">{store.memorySlots}</div>
-              <div className="text-xs text-gray-400">Memory Slots</div>
-            </div>
-          </div>
-        </CardContent>
-      </Card>
-    </div>
-  );
-}
-
-StatsTab.displayName = "StatsTab";

src/components/game/StudyProgress.tsx

@@ -1,59 +0,0 @@
-'use client';
-
-import { Button } from '@/components/ui/button';
-import { Progress } from '@/components/ui/progress';
-import { BookOpen, X } from 'lucide-react';
-import { SKILLS_DEF, SPELLS_DEF } from '@/lib/game/constants';
-import { formatStudyTime } from '@/lib/game/formatting';
-import type { StudyTarget } from '@/lib/game/types';
-
-interface StudyProgressProps {
-  currentStudyTarget: StudyTarget | null;
-  skills: Record<string, number>;
-  studySpeedMult: number;
-  cancelStudy: () => void;
-}
-
-export function StudyProgress({
-  currentStudyTarget,
-  skills,
-  studySpeedMult,
-  cancelStudy,
-}: StudyProgressProps) {
-  if (!currentStudyTarget) return null;
-  
-  const target = currentStudyTarget;
-  const progressPct = Math.min(100, (target.progress / target.required) * 100);
-  const isSkill = target.type === 'skill';
-  const def = isSkill ? SKILLS_DEF[target.id] : SPELLS_DEF[target.id];
-  const currentLevel = isSkill ? (skills[target.id] || 0) : 0;
-  
-  return (
-    <div className="p-3 rounded border border-purple-600/50 bg-purple-900/20">
-      <div className="flex items-center justify-between mb-2">
-        <div className="flex items-center gap-2">
-          <BookOpen className="w-4 h-4 text-purple-400" />
-          <span className="text-sm font-semibold text-purple-300">
-            {def?.name}
-            {isSkill && ` Lv.${currentLevel + 1}`}
-          </span>
-        </div>
-        <Button
-          variant="ghost"
-          size="sm"
-          className="h-6 w-6 p-0 text-gray-400 hover:text-white"
-          onClick={cancelStudy}
-        >
-          <X className="w-4 h-4" />
-        </Button>
-      </div>
-      <Progress value={progressPct} className="h-2 bg-gray-800" />
-      <div className="flex justify-between text-xs text-gray-400 mt-1">
-        <span>{formatStudyTime(target.progress)} / {formatStudyTime(target.required)}</span>
-        <span>{studySpeedMult.toFixed(1)}x speed</span>
-      </div>
-    </div>
-  );
-}
-
-StudyProgress.displayName = "StudyProgress";

src/components/game/TimeDisplay.tsx

@@ -1,7 +1,7 @@
 'use client';
 
-import { fmt } from '@/lib/game/store';
-import { formatHour } from '@/lib/game/formatting';
+import { fmt } from '@/lib/game/stores';
+import { formatHour } from '@/lib/game/utils/formatting';
 
 interface TimeDisplayProps {
   day: number;

src/components/game/UpgradeDialog.tsx

@@ -1,6 +1,5 @@
 'use client';
 
-import { SKILLS_DEF } from '@/lib/game/constants';
 import type { SkillUpgradeChoice } from '@/lib/game/types';
 import { Button } from '@/components/ui/button';
 import { Badge } from '@/components/ui/badge';
@@ -33,7 +32,6 @@ export function UpgradeDialog({
 }: UpgradeDialogProps) {
   if (!skillId) return null;
 
-  const skillDef = SKILLS_DEF[skillId];
   const currentSelections = pendingSelections.length > 0 ? pendingSelections : alreadySelected;
 
   return (
@@ -41,7 +39,7 @@ export function UpgradeDialog({
       <DialogContent className="bg-gray-900 border-gray-700 max-w-lg">
         <DialogHeader>
           <DialogTitle className="text-amber-400">
-            Choose Upgrade - {skillDef?.name || skillId}
+            Choose Upgrade - {skillId}
           </DialogTitle>
           <DialogDescription className="text-gray-400">
             Level {milestone} Milestone - Select 2 upgrades ({currentSelections.length}/2 chosen)

src/components/game/crafting/EnchantmentApplier.tsx

@@ -9,12 +9,13 @@ import { Badge } from '@/components/ui/badge';
 import { ScrollArea } from '@/components/ui/scroll-area';
 import { Separator } from '@/components/ui/separator';
 import { ENCHANTMENT_EFFECTS } from '@/lib/game/data/enchantment-effects';
-import type { EquipmentInstance, EnchantmentDesign, AppliedEnchantment, LootInventory, EquipmentCraftingProgress, EquipmentSlot } from '@/lib/game/types';
-import { fmt, type GameStore } from '@/lib/game/store';
+import type { EquipmentInstance, EnchantmentDesign, AppliedEnchantment, LootInventory, EquipmentCraftingProgress } from '@/lib/game/types';
+import type { EquipmentSlot } from '@/lib/game/data/equipment';
+import { fmt } from '@/lib/game/stores';
 import { CheckCircle, Sparkles } from 'lucide-react';
+import { useGameStore, useCraftingStore, useManaStore } from '@/lib/game/stores';
 
 export interface EnchantmentApplierProps {
-  store: GameStore;
   selectedEquipmentInstance: string | null;
   setSelectedEquipmentInstance: (id: string | null) => void;
   selectedDesign: string | null;
@@ -24,7 +25,6 @@ export interface EnchantmentApplierProps {
 }
 
 export function EnchantmentApplier({
-  store,
   selectedEquipmentInstance,
   setSelectedEquipmentInstance,
   selectedDesign,
@@ -32,15 +32,15 @@ export function EnchantmentApplier({
   onEnchantmentApplied,
   onCapacityExceeded,
 }: EnchantmentApplierProps) {
-  const equippedInstances = store.equippedInstances;
-  const equipmentInstances = store.equipmentInstances;
-  const enchantmentDesigns = store.enchantmentDesigns;
-  const applicationProgress = store.applicationProgress;
-  const rawMana = store.rawMana;
-  const startApplying = store.startApplying;
-  const pauseApplication = store.pauseApplication;
-  const resumeApplication = store.resumeApplication;
-  const cancelApplication = store.cancelApplication;
+  const equippedInstances = useCraftingStore((s) => s.equippedInstances);
+  const equipmentInstances = useCraftingStore((s) => s.equipmentInstances);
+  const enchantmentDesigns = useCraftingStore((s) => s.enchantmentDesigns);
+  const applicationProgress = useCraftingStore((s) => s.applicationProgress);
+  const rawMana = useManaStore((s) => s.rawMana);
+  const startApplying = useCraftingStore((s) => s.startApplying);
+  const pauseApplication = useCraftingStore((s) => s.pauseApplication);
+  const resumeApplication = useCraftingStore((s) => s.resumeApplication);
+  const cancelApplication = useCraftingStore((s) => s.cancelApplication);
 
   // Get equipped items as array - ONLY show items tagged 'Ready for Enchantment' (requirement cr5)
   const equippedItems = Object.entries(equippedInstances)
@@ -95,7 +95,7 @@ export function EnchantmentApplier({
                 <ActionButton size="sm" onClick={resumeApplication}>Resume</ActionButton>
               ) : (
                 <>
-                  <ActionButton variant="outline" size="sm" onClick={pauseApplication}>Pause</ActionButton>
+                  <ActionButton variant="secondary" size="sm" onClick={pauseApplication}>Pause</ActionButton>
                   <ActionButton variant="ghost" size="sm" onClick={() => {
                     cancelApplication();
                     onEnchantmentApplied?.(); // This will trigger the cancel toast via parent
@@ -119,7 +119,8 @@ export function EnchantmentApplier({
                         ${selectedEquipmentInstance === instance.instanceId
                           ? 'border-[var(--mana-light)] bg-[var(--mana-light)]/10'
                           : 'border-[var(--border-default)] bg-[var(--bg-sunken)]/50 hover:border-[var(--border-default)]'
-                        }`}
+                        }
+                      `}
                       onClick={() => setSelectedEquipmentInstance(instance.instanceId)}
                       role="button"
                       tabIndex={0}
@@ -159,7 +160,8 @@ export function EnchantmentApplier({
                         ${selectedDesign === design.id
                           ? 'border-[var(--mana-stellar)] bg-[var(--mana-stellar)]/10'
                           : 'border-[var(--border-default)] bg-[var(--bg-sunken)]/50 hover:border-[var(--border-default)]'
-                        }`}
+                        }
+                      `}
                       onClick={() => setSelectedDesign(design.id)}
                       role="button"
                       tabIndex={0}

src/components/game/crafting/EnchantmentDesigner.tsx

@@ -1,36 +1,30 @@
 'use client';
 
 import { useState, useMemo } from 'react';
-import { Button } from '@/components/ui/button';
-import { Progress } from '@/components/ui/progress';
 import { GameCard } from '@/components/ui/game-card';
-import { SectionHeader } from '@/components/ui/section-header';
-import { StatRow } from '@/components/ui/stat-row';
-import { ActionButton } from '@/components/ui/action-button';
-import { Badge } from '@/components/ui/badge';
-import { ScrollArea } from '@/components/ui/scroll-area';
 import { Separator } from '@/components/ui/separator';
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
-import { AlertCircle, Wand2, Scroll, Trash2, Plus, Minus, Check } from 'lucide-react';
 import { EQUIPMENT_TYPES } from '@/lib/game/data/equipment';
-import { ENCHANTMENT_EFFECTS, calculateEffectCapacityCost } from '@/lib/game/data/enchantment-effects';
+import { ENCHANTMENT_EFFECTS } from '@/lib/game/data/enchantment-effects';
 import type { EquipmentInstance, EnchantmentDesign, DesignEffect, EquipmentCraftingProgress, EquipmentCategory } from '@/lib/game/types';
-import { fmt, type GameStore } from '@/lib/game/store';
-
-export interface EnchantmentDesignerProps {
-  store: GameStore;
-  selectedEquipmentType: string | null;
-  setSelectedEquipmentType: (type: string | null) => void;
-  selectedEffects: DesignEffect[];
-  setSelectedEffects: (effects: DesignEffect[]) => void;
-  designName: string;
-  setDesignName: (name: string) => void;
-  selectedDesign: string | null;
-  setSelectedDesign: (id: string | null) => void;
-}
+import type { EnchantmentDesignerProps } from './EnchantmentDesigner/types';
+import { EquipmentTypeSelector } from './EnchantmentDesigner/EquipmentTypeSelector';
+import { EffectSelector } from './EnchantmentDesigner/EffectSelector';
+import { SavedDesigns } from './EnchantmentDesigner/SavedDesigns';
+import { DesignForm } from './EnchantmentDesigner/DesignForm';
+import {
+  getAvailableEffects,
+  getIncompatibleEffects,
+  getOwnedEquipmentTypes,
+  getIncompatibilityReason,
+  calculateDesignCapacityCost,
+  getEquipmentCapacity,
+  calculateDesignTime,
+  addEffectToDesign,
+  removeEffectFromDesign,
+} from './EnchantmentDesigner/utils';
+import { useCraftingStore } from '@/lib/game/stores';
 
 export function EnchantmentDesigner({
-  store,
   selectedEquipmentType,
   setSelectedEquipmentType,
   selectedEffects,
@@ -40,67 +34,32 @@ export function EnchantmentDesigner({
   selectedDesign,
   setSelectedDesign,
 }: EnchantmentDesignerProps) {
-  const enchantmentDesigns = store.enchantmentDesigns;
-  const designProgress = store.designProgress;
-  const startDesigningEnchantment = store.startDesigningEnchantment;
-  const cancelDesign = store.cancelDesign;
-  const deleteDesign = store.deleteDesign;
-  const unlockedEffects = store.unlockedEffects;
-  const skills = store.skills;
-
-  const enchantingLevel = skills.enchanting || 0;
-  const efficiencyBonus = (skills.efficientEnchant || 0) * 0.05;
+  // Crafting store selectors
+  const enchantmentDesigns = useCraftingStore((s) => s.enchantmentDesigns);
+  const designProgress = useCraftingStore((s) => s.designProgress);
+  const startDesigningEnchantment = useCraftingStore((s) => s.startDesigningEnchantment);
+  const cancelDesign = useCraftingStore((s) => s.cancelDesign);
+  const deleteDesign = useCraftingStore((s) => s.deleteDesign);
+  const unlockedEffects = useCraftingStore((s) => s.unlockedEffects);
+  const equipmentInstances = useCraftingStore((s) => s.equipmentInstances);
 
   // Calculate total capacity cost for current design
-  const designCapacityCost = selectedEffects.reduce(
-    (total, eff) => total + calculateEffectCapacityCost(eff.effectId, eff.stacks, efficiencyBonus),
-    0
-  );
+  const designCapacityCost = calculateDesignCapacityCost(selectedEffects, 0);
 
   // Get capacity limit for selected equipment type
-  const selectedEquipmentCapacity = selectedEquipmentType ? EQUIPMENT_TYPES[selectedEquipmentType]?.baseCapacity || 0 : 0;
-  const isOverCapacity = selectedEquipmentType ? designCapacityCost > selectedEquipmentCapacity : false;
+  const selectedEquipmentCapacity = getEquipmentCapacity(selectedEquipmentType);
 
   // Calculate design time
-  const designTime = selectedEffects.reduce((total, eff) => total + 0.5 * eff.stacks, 1);
+  const designTime = calculateDesignTime(selectedEffects);
 
   // Add effect to design
   const addEffect = (effectId: string) => {
-    const existing = selectedEffects.find(e => e.effectId === effectId);
-    const effectDef = ENCHANTMENT_EFFECTS[effectId];
-    if (!effectDef) return;
-
-    if (existing) {
-      if (existing.stacks < effectDef.maxStacks) {
-        setSelectedEffects(selectedEffects.map(e =>
-          e.effectId === effectId
-            ? { ...e, stacks: e.stacks + 1 }
-            : e
-        ));
-      }
-    } else {
-      setSelectedEffects([...selectedEffects, {
-        effectId,
-        stacks: 1,
-        capacityCost: calculateEffectCapacityCost(effectId, 1, efficiencyBonus),
-      }]);
-    }
+    addEffectToDesign(effectId, selectedEffects, 0, setSelectedEffects);
   };
 
   // Remove effect from design
   const removeEffect = (effectId: string) => {
-    const existing = selectedEffects.find(e => e.effectId === effectId);
-    if (!existing) return;
-
-    if (existing.stacks > 1) {
-      setSelectedEffects(selectedEffects.map(e =>
-        e.effectId === effectId
-          ? { ...e, stacks: e.stacks - 1 }
-          : e
-      ));
-    } else {
-      setSelectedEffects(selectedEffects.filter(e => e.effectId !== effectId));
-    }
+    removeEffectFromDesign(effectId, selectedEffects, setSelectedEffects);
   };
 
   // Create design
@@ -117,331 +76,73 @@ export function EnchantmentDesigner({
   };
 
   // Get available effects for selected equipment type (only unlocked ones)
-  const getAvailableEffects = () => {
-    if (!selectedEquipmentType) return [];
-    const type = EQUIPMENT_TYPES[selectedEquipmentType];
-    if (!type) return [];
-
-    return Object.values(ENCHANTMENT_EFFECTS).filter(
-      effect =>
-        effect.allowedEquipmentCategories.includes(type.category) &&
-        unlockedEffects.includes(effect.id)
-    );
-  };
+  const availableEffects = getAvailableEffects(selectedEquipmentType, unlockedEffects);
 
   // Get incompatible effects (unlocked but not for this equipment type)
-  // Requirement (task3 bug #7): Show incompatible enchantments in greyed-out "Unavailable" section
-  const getIncompatibleEffects = () => {
-    if (!selectedEquipmentType) return [];
-    const type = EQUIPMENT_TYPES[selectedEquipmentType];
-    if (!type) return [];
-
-    return Object.values(ENCHANTMENT_EFFECTS).filter(
-      effect =>
-        !effect.allowedEquipmentCategories.includes(type.category) &&
-        unlockedEffects.includes(effect.id)
-    );
-  };
+  const incompatibleEffects = getIncompatibleEffects(selectedEquipmentType, unlockedEffects);
 
   // Get equipment types that the player actually owns (has instances of)
-  // This ensures enchantment compatibility is based on owned items, not just blueprints
-  const getOwnedEquipmentTypes = () => {
-    // Get all unique equipment type IDs from owned instances
-    const ownedEquipmentTypeIds = new Set<string>();
-
-    // Check all equipment instances the player owns
-    for (const instance of Object.values(store.equipmentInstances)) {
-      ownedEquipmentTypeIds.add(instance.typeId);
-    }
-
-    // Filter EQUIPMENT_TYPES to only include types the player owns
-    return Object.values(EQUIPMENT_TYPES).filter(type => ownedEquipmentTypeIds.has(type.id));
-  };
-
-  const ownedEquipmentTypes = getOwnedEquipmentTypes();
-  const availableEffects = getAvailableEffects();
-  const incompatibleEffects = getIncompatibleEffects();
+  const ownedEquipmentTypes = getOwnedEquipmentTypes(equipmentInstances);
 
   // Get the reason why an effect is incompatible
-  const getIncompatibilityReason = (effect: typeof ENCHANTMENT_EFFECTS[string]): string => {
-    if (!selectedEquipmentType) return 'No equipment selected';
-    const type = EQUIPMENT_TYPES[selectedEquipmentType];
-    if (!type) return 'Unknown equipment type';
-
-    // Check what categories this effect is allowed for
-    const allowedCategories = effect.allowedEquipmentCategories;
-    const equipmentCategory = type.category;
-
-    if (allowedCategories.includes(equipmentCategory)) {
-      return 'Compatible';
-    }
-
-    // Provide specific reasons
-    if (allowedCategories.includes('weapon' as EquipmentCategory) && equipmentCategory !== 'sword' && equipmentCategory !== 'caster' && equipmentCategory !== 'catalyst') {
-      return `Requires a weapon (${allowedCategories.filter(c => ['sword', 'caster', 'catalyst'].includes(c)).join(', ')})`;
-    }
-
-    return `Requires ${allowedCategories.join(' or ')} equipment`;
+  const getIncompatibilityReasonWrapper = (effect: { id: string; name: string; description: string; allowedEquipmentCategories: EquipmentCategory[] }) => {
+    return getIncompatibilityReason(effect, selectedEquipmentType);
   };
 
   // Render stage
   return (
     <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
       {/* Equipment Type Selection */}
-      <GameCard variant="default">
-        <SectionHeader title="1. Select Equipment Type" />
-        {designProgress ? (
-          <div className="space-y-3">
-            <div className="text-sm text-[var(--text-secondary)]">
-              Designing for: {EQUIPMENT_TYPES[designProgress.equipmentType]?.name}
-            </div>
-            <div className="text-sm font-semibold text-[var(--mana-light)]">{designProgress.name}</div>
-            <Progress
-              value={(designProgress.progress / designProgress.required) * 100}
-              className="h-3 bg-[var(--bg-sunken)]"
-            />
-            <div className="flex justify-between text-xs text-[var(--text-muted)]">
-              <span>{designProgress.progress.toFixed(1)}h / {designProgress.required.toFixed(1)}h</span>
-              <ActionButton size="sm" variant="outline" onClick={cancelDesign}>Cancel</ActionButton>
-            </div>
-          </div>
-        ) : (
-          <ScrollArea className="h-64">
-            <div className="grid grid-cols-2 gap-2">
-              {ownedEquipmentTypes.map(type => (
-                <div
-                  key={type.id}
-                  className={`p-2 rounded border cursor-pointer transition-all
-                    ${selectedEquipmentType === type.id
-                      ? 'border-[var(--mana-light)] bg-[var(--mana-light)]/10'
-                      : 'border-[var(--border-default)] bg-[var(--bg-sunken)]/50 hover:border-[var(--border-default)]'
-                    }`}
-                  onClick={() => setSelectedEquipmentType(type.id)}
-                  role="button"
-                  tabIndex={0}
-                  aria-label={`Select ${type.name}`}
-                >
-                  <div className="text-sm font-semibold text-[var(--text-primary)]">{type.name}</div>
-                  <div className="text-xs text-[var(--text-muted)]">Cap: {type.baseCapacity}</div>
-                </div>
-              ))}
-            </div>
-            {ownedEquipmentTypes.length === 0 && (
-              <div className="text-center text-[var(--text-muted)] py-4 text-sm">
-                No equipment blueprints owned. Craft or find equipment blueprints first.
-              </div>
-            )}
-          </ScrollArea>
-        )}
-      </GameCard>
+      <EquipmentTypeSelector
+        ownedEquipmentTypes={ownedEquipmentTypes}
+        selectedEquipmentType={selectedEquipmentType}
+        setSelectedEquipmentType={setSelectedEquipmentType}
+        designProgress={designProgress}
+        cancelDesign={cancelDesign}
+      />
 
       {/* Effect Selection */}
       <GameCard variant="default">
-        <SectionHeader title="2. Select Effects" />
-        {enchantingLevel < 1 ? (
-          <div className="text-center text-[var(--text-muted)] py-8">
-            <Wand2 className="w-12 h-12 mx-auto mb-2 opacity-50 text-[var(--text-disabled)]" />
-            <p>Learn Enchanting skill to design enchantments</p>
-          </div>
-        ) : designProgress ? (
-          <div className="space-y-2">
-            <div className="text-sm text-[var(--text-secondary)]">Design in progress...</div>
-            {designProgress.effects.map(eff => {
-              const def = ENCHANTMENT_EFFECTS[eff.effectId];
-              return (
-                <div key={eff.effectId} className="flex justify-between text-sm text-[var(--text-primary)]">
-                  <span>{def?.name} x{eff.stacks}</span>
-                  <span className="text-[var(--text-muted)]">{eff.capacityCost} cap</span>
-                </div>
-              );
-            })}
-          </div>
-        ) : !selectedEquipmentType ? (
-          <div className="text-center text-[var(--text-muted)] py-8">
-            Select an equipment type first
-          </div>
-        ) : (
+        <EffectSelector
+          selectedEquipmentType={selectedEquipmentType}
+          selectedEffects={selectedEffects}
+          setSelectedEffects={setSelectedEffects}
+          availableEffects={availableEffects}
+          incompatibleEffects={incompatibleEffects}
+          enchantingLevel={0}
+          efficiencyBonus={0}
+          designProgress={designProgress}
+          addEffect={addEffect}
+          removeEffect={removeEffect}
+          getIncompatibilityReason={getIncompatibilityReasonWrapper}
+        />
+
+        {/* Selected effects summary - only show when not in design progress and equipment type is selected */}
+        {!designProgress && selectedEquipmentType && (
           <>
-            <ScrollArea className="h-48 mb-4">
-              <div className="space-y-2">
-                {/* Compatible Effects */}
-                {availableEffects.map(effect => {
-                  const selected = selectedEffects.find(e => e.effectId === effect.id);
-                  const cost = calculateEffectCapacityCost(effect.id, (selected?.stacks || 0) + 1, efficiencyBonus);
-
-                  return (
-                    <div
-                      key={effect.id}
-                      className={`p-2 rounded border transition-all
-                        ${selected
-                          ? 'border-[var(--mana-stellar)] bg-[var(--mana-stellar)]/10'
-                          : 'border-[var(--border-default)] bg-[var(--bg-sunken)]/50'
-                        }`}
-                    >
-                      <div className="flex justify-between items-start">
-                        <div className="flex-1">
-                          <div className="text-sm font-semibold text-[var(--text-primary)]">{effect.name}</div>
-                          <div className="text-xs text-[var(--text-muted)]">{effect.description}</div>
-                          <div className="text-xs text-[var(--text-disabled)] mt-1">
-                            Cost: {effect.baseCapacityCost} cap | Max: {effect.maxStacks}
-                          </div>
-                        </div>
-                        <div className="flex gap-1">
-                          {selected && (
-                            <ActionButton
-                              size="sm"
-                              variant="outline"
-                              className="h-6 w-6 p-0"
-                              onClick={() => removeEffect(effect.id)}
-                            >
-                              <Minus className="w-3 h-3" />
-                            </ActionButton>
-                          )}
-                          <ActionButton
-                            size="sm"
-                            variant="outline"
-                            className="h-6 w-6 p-0"
-                            onClick={() => addEffect(effect.id)}
-                            disabled={!selected && selectedEffects.length >= 5}
-                          >
-                            <Plus className="w-3 h-3" />
-                          </ActionButton>
-                        </div>
-                      </div>
-                      {selected && (
-                        <Badge variant="outline" className="mt-1 text-xs border-[var(--mana-stellar)] text-[var(--mana-stellar)]">
-                          {selected.stacks}/{effect.maxStacks}
-                        </Badge>
-                      )}
-                    </div>
-                  );
-                })}
-
-                {/* Incompatible Effects - Requirement: greyed-out "Unavailable" section with tooltips */}
-                {incompatibleEffects.length > 0 && (
-                  <>
-                    <Separator className="bg-[var(--border-subtle)] my-2" />
-                    <div className="text-xs font-semibold text-[var(--text-disabled)] uppercase tracking-wider mb-2">
-                      Unavailable
-                    </div>
-                    {incompatibleEffects.map(effect => {
-                      const reason = getIncompatibilityReason(effect);
-
-                      return (
-                        <TooltipProvider key={effect.id}>
-                          <Tooltip>
-                            <TooltipTrigger asChild>
-                              <div
-                                className="p-2 rounded border border-[var(--border-subtle)] bg-[var(--bg-sunken)]/30 opacity-50 cursor-not-allowed"
-                              >
-                                <div className="flex justify-between items-start">
-                                  <div className="flex-1">
-                                    <div className="text-sm font-semibold text-[var(--text-disabled)]">{effect.name}</div>
-                                    <div className="text-xs text-[var(--text-disabled)]">{effect.description}</div>
-                                  </div>
-                                  <AlertCircle size={14} className="text-[var(--text-disabled)]" />
-                                </div>
-                              </div>
-                            </TooltipTrigger>
-                            <TooltipContent className="bg-[var(--bg-elevated)] border-[var(--border-default)] text-[var(--text-primary)]">
-                              <p className="font-semibold">Incompatible Effect</p>
-                              <p className="text-xs text-[var(--text-muted)] mt-1">{reason}</p>
-                            </TooltipContent>
-                          </Tooltip>
-                        </TooltipProvider>
-                      );
-                    })}
-                  </>
-                )}
-              </div>
-            </ScrollArea>
-
-            {/* Selected effects summary */}
             <Separator className="bg-[var(--border-subtle)] my-2" />
-            <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
+              designName={designName}
+              setDesignName={setDesignName}
+              selectedEffects={selectedEffects}
+              designCapacityCost={designCapacityCost}
+              selectedEquipmentCapacity={selectedEquipmentCapacity}
+              isOverCapacity={designCapacityCost > selectedEquipmentCapacity}
+              designTime={designTime}
+              selectedEquipmentType={selectedEquipmentType}
+              handleCreateDesign={handleCreateDesign}
+            />
           </>
         )}
       </GameCard>
 
       {/* Saved Designs */}
-      <GameCard variant="default" className="lg:col-span-2">
-        <SectionHeader title={`Saved Designs (${enchantmentDesigns.length})`} />
-        {enchantmentDesigns.length === 0 ? (
-          <div className="text-center text-[var(--text-muted)] py-4">
-            No saved designs yet
-          </div>
-        ) : (
-          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
-            {enchantmentDesigns.map(design => (
-              <div
-                key={design.id}
-                className={`p-3 rounded border cursor-pointer transition-all
-                  ${selectedDesign === design.id
-                    ? 'border-[var(--mana-light)] bg-[var(--mana-light)]/10'
-                    : 'border-[var(--border-default)] bg-[var(--bg-sunken)]/50 hover:border-[var(--border-default)]'
-                  }`}
-                onClick={() => setSelectedDesign(design.id)}
-                role="button"
-                tabIndex={0}
-                aria-label={`Select design: ${design.name}`}
-              >
-                <div className="flex justify-between items-start">
-                  <div>
-                    <div className="font-semibold text-[var(--text-primary)]">{design.name}</div>
-                    <div className="text-xs text-[var(--text-muted)]">
-                      {EQUIPMENT_TYPES[design.equipmentType]?.name}
-                    </div>
-                  </div>
-                  <ActionButton
-                    size="sm"
-                    variant="ghost"
-                    className="h-6 w-6 p-0 text-[var(--text-muted)] hover:text-[var(--color-danger)]"
-                    onClick={(e) => {
-                      e.stopPropagation();
-                      deleteDesign(design.id);
-                    }}
-                    aria-label={`Delete design: ${design.name}`}
-                  >
-                    <Trash2 className="w-4 h-4" />
-                  </ActionButton>
-                </div>
-                <div className="mt-2 text-xs text-[var(--text-muted)]">
-                  {design.effects.length} effects | {design.totalCapacityUsed} cap
-                </div>
-              </div>
-            ))}
-          </div>
-        )}
-      </GameCard>
+      <SavedDesigns
+        enchantmentDesigns={enchantmentDesigns}
+        selectedDesign={selectedDesign}
+        setSelectedDesign={setSelectedDesign}
+        deleteDesign={deleteDesign}
+      />
     </div>
   );
 }

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';

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

@@ -0,0 +1,152 @@
+'use client';
+
+import { GameCard } from '@/components/ui/game-card';
+import { SectionHeader } from '@/components/ui/section-header';
+import { ActionButton } from '@/components/ui/action-button';
+import { Badge } from '@/components/ui/badge';
+import { ScrollArea } from '@/components/ui/scroll-area';
+import { Separator } from '@/components/ui/separator';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
+import { AlertCircle, Wand2, Plus, Minus } from 'lucide-react';
+import { ENCHANTMENT_EFFECTS, calculateEffectCapacityCost } from '@/lib/game/data/enchantment-effects';
+import type { EffectSelectorProps } from './types';
+
+export function EffectSelector({
+  selectedEquipmentType,
+  selectedEffects,
+  setSelectedEffects,
+  availableEffects,
+  incompatibleEffects,
+  enchantingLevel,
+  efficiencyBonus,
+  designProgress,
+  addEffect,
+  removeEffect,
+  getIncompatibilityReason,
+}: EffectSelectorProps) {
+  return (
+    <>
+      {enchantingLevel < 1 ? (
+        <div className="text-center text-[var(--text-muted)] py-8">
+          <Wand2 className="w-12 h-12 mx-auto mb-2 opacity-50 text-[var(--text-disabled)]" />
+          <p>Learn Enchanting skill to design enchantments</p>
+        </div>
+      ) : designProgress ? (
+        <div className="space-y-2">
+          <div className="text-sm text-[var(--text-secondary)]">Design in progress...</div>
+          {designProgress.effects.map(eff => {
+            const def = ENCHANTMENT_EFFECTS[eff.effectId];
+            return (
+              <div key={eff.effectId} className="flex justify-between text-sm text-[var(--text-primary)]">
+                <span>{def?.name} x{eff.stacks}</span>
+                <span className="text-[var(--text-muted)]">{eff.capacityCost} cap</span>
+              </div>
+            );
+          })}
+        </div>
+      ) : !selectedEquipmentType ? (
+        <div className="text-center text-[var(--text-muted)] py-8">
+          Select an equipment type first
+        </div>
+      ) : (
+        <>
+          <ScrollArea className="h-48 mb-4">
+            <div className="space-y-2">
+              {/* Compatible Effects */}
+              {availableEffects.map(effect => {
+                const selected = selectedEffects.find(e => e.effectId === effect.id);
+                const cost = calculateEffectCapacityCost(effect.id, (selected?.stacks || 0) + 1, efficiencyBonus);
+
+                return (
+                  <div
+                    key={effect.id}
+                    className={`p-2 rounded border transition-all
+                      ${selected
+                        ? 'border-[var(--mana-stellar)] bg-[var(--mana-stellar)]/10'
+                        : 'border-[var(--border-default)] bg-[var(--bg-sunken)]/50'
+                      }`}
+                  >
+                    <div className="flex justify-between items-start">
+                      <div className="flex-1">
+                        <div className="text-sm font-semibold text-[var(--text-primary)]">{effect.name}</div>
+                        <div className="text-xs text-[var(--text-muted)]">{effect.description}</div>
+                        <div className="text-xs text-[var(--text-disabled)] mt-1">
+                          Cost: {effect.baseCapacityCost} cap | Max: {effect.maxStacks}
+                        </div>
+                      </div>
+                      <div className="flex gap-1">
+                        {selected && (
+                          <ActionButton
+                            size="sm"
+                            variant="outline"
+                            className="h-6 w-6 p-0"
+                            onClick={() => removeEffect(effect.id)}
+                          >
+                            <Minus className="w-3 h-3" />
+                          </ActionButton>
+                        )}
+                        <ActionButton
+                          size="sm"
+                          variant="outline"
+                          className="h-6 w-6 p-0"
+                          onClick={() => addEffect(effect.id)}
+                          disabled={!selected && selectedEffects.length >= 5}
+                        >
+                          <Plus className="w-3 h-3" />
+                        </ActionButton>
+                      </div>
+                    </div>
+                    {selected && (
+                      <Badge variant="outline" className="mt-1 text-xs border-[var(--mana-stellar)] text-[var(--mana-stellar)]">
+                        {selected.stacks}/{effect.maxStacks}
+                      </Badge>
+                    )}
+                  </div>
+                );
+              })}
+
+              {/* Incompatible Effects - Requirement: greyed-out "Unavailable" section with tooltips */}
+              {incompatibleEffects.length > 0 && (
+                <>
+                  <Separator className="bg-[var(--border-subtle)] my-2" />
+                  <div className="text-xs font-semibold text-[var(--text-disabled)] uppercase tracking-wider mb-2">
+                    Unavailable
+                  </div>
+                  {incompatibleEffects.map(effect => {
+                    const reason = getIncompatibilityReason(effect);
+
+                    return (
+                      <TooltipProvider key={effect.id}>
+                        <Tooltip>
+                          <TooltipTrigger asChild>
+                            <div
+                              className="p-2 rounded border border-[var(--border-subtle)] bg-[var(--bg-sunken)]/30 opacity-50 cursor-not-allowed"
+                            >
+                              <div className="flex justify-between items-start">
+                                <div className="flex-1">
+                                  <div className="text-sm font-semibold text-[var(--text-disabled)]">{effect.name}</div>
+                                  <div className="text-xs text-[var(--text-disabled)]">{effect.description}</div>
+                                </div>
+                                <AlertCircle size={14} className="text-[var(--text-disabled)]" />
+                              </div>
+                            </div>
+                          </TooltipTrigger>
+                          <TooltipContent className="bg-[var(--bg-elevated)] border-[var(--border-default)] text-[var(--text-primary)]">
+                            <p className="font-semibold">Incompatible Effect</p>
+                            <p className="text-xs text-[var(--text-muted)] mt-1">{reason}</p>
+                          </TooltipContent>
+                        </Tooltip>
+                      </TooltipProvider>
+                    );
+                  })}
+                </>
+              )}
+            </div>
+          </ScrollArea>
+        </>
+      )}
+    </>
+  );
+}
+
+EffectSelector.displayName = 'EffectSelector';

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

@@ -0,0 +1,67 @@
+'use client';
+
+import { GameCard } from '@/components/ui/game-card';
+import { SectionHeader } from '@/components/ui/section-header';
+import { ActionButton } from '@/components/ui/action-button';
+import { Progress } from '@/components/ui/progress';
+import { ScrollArea } from '@/components/ui/scroll-area';
+import type { EquipmentTypeSelectorProps } from './types';
+
+export function EquipmentTypeSelector({
+  ownedEquipmentTypes,
+  selectedEquipmentType,
+  setSelectedEquipmentType,
+  designProgress,
+  cancelDesign,
+}: EquipmentTypeSelectorProps) {
+  return (
+    <GameCard variant="default">
+      <SectionHeader title="1. Select Equipment Type" />
+      {designProgress ? (
+        <div className="space-y-3">
+          <div className="text-sm text-[var(--text-secondary)]">
+            Designing for: {designProgress.equipmentType}
+          </div>
+          <div className="text-sm font-semibold text-[var(--mana-light)]">{designProgress.name}</div>
+          <Progress
+            value={(designProgress.progress / designProgress.required) * 100}
+            className="h-3 bg-[var(--bg-sunken)]"
+          />
+          <div className="flex justify-between text-xs text-[var(--text-muted)]">
+            <span>{designProgress.progress.toFixed(1)}h / {designProgress.required.toFixed(1)}h</span>
+            <ActionButton size="sm" variant="outline" onClick={cancelDesign}>Cancel</ActionButton>
+          </div>
+        </div>
+      ) : (
+        <ScrollArea className="h-64">
+          <div className="grid grid-cols-2 gap-2">
+            {ownedEquipmentTypes.map(type => (
+              <div
+                key={type.id}
+                className={`p-2 rounded border cursor-pointer transition-all
+                  ${selectedEquipmentType === type.id
+                    ? 'border-[var(--mana-light)] bg-[var(--mana-light)]/10'
+                    : 'border-[var(--border-default)] bg-[var(--bg-sunken)]/50 hover:border-[var(--border-default)]'
+                  }`}
+                onClick={() => setSelectedEquipmentType(type.id)}
+                role="button"
+                tabIndex={0}
+                aria-label={`Select ${type.name}`}
+              >
+                <div className="text-sm font-semibold text-[var(--text-primary)]">{type.name}</div>
+                <div className="text-xs text-[var(--text-muted)]">Cap: {type.baseCapacity}</div>
+              </div>
+            ))}
+          </div>
+          {ownedEquipmentTypes.length === 0 && (
+            <div className="text-center text-[var(--text-muted)] py-4 text-sm">
+              No equipment blueprints owned. Craft or find equipment blueprints first.
+            </div>
+          )}
+        </ScrollArea>
+      )}
+    </GameCard>
+  );
+}
+
+EquipmentTypeSelector.displayName = 'EquipmentTypeSelector';

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

@@ -0,0 +1,69 @@
+'use client';
+
+import { GameCard } from '@/components/ui/game-card';
+import { SectionHeader } from '@/components/ui/section-header';
+import { ActionButton } from '@/components/ui/action-button';
+import { Trash2 } from 'lucide-react';
+import { EQUIPMENT_TYPES } from '@/lib/game/data/equipment';
+import type { SavedDesignsProps } from './types';
+
+export function SavedDesigns({
+  enchantmentDesigns,
+  selectedDesign,
+  setSelectedDesign,
+  deleteDesign,
+}: SavedDesignsProps) {
+  return (
+    <GameCard variant="default" className="lg:col-span-2">
+      <SectionHeader title={`Saved Designs (${enchantmentDesigns.length})`} />
+      {enchantmentDesigns.length === 0 ? (
+        <div className="text-center text-[var(--text-muted)] py-4">
+          No saved designs yet
+        </div>
+      ) : (
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
+          {enchantmentDesigns.map(design => (
+            <div
+              key={design.id}
+              className={`p-3 rounded border cursor-pointer transition-all
+                ${selectedDesign === design.id
+                  ? 'border-[var(--mana-light)] bg-[var(--mana-light)]/10'
+                  : 'border-[var(--border-default)] bg-[var(--bg-sunken)]/50 hover:border-[var(--border-default)]'
+                }`}
+              onClick={() => setSelectedDesign(design.id)}
+              role="button"
+              tabIndex={0}
+              aria-label={`Select design: ${design.name}`}
+            >
+              <div className="flex justify-between items-start">
+                <div>
+                  <div className="font-semibold text-[var(--text-primary)]">{design.name}</div>
+                  <div className="text-xs text-[var(--text-muted)]">
+                    {EQUIPMENT_TYPES[design.equipmentType]?.name}
+                  </div>
+                </div>
+                <ActionButton
+                  size="sm"
+                  variant="ghost"
+                  className="h-6 w-6 p-0 text-[var(--text-muted)] hover:text-[var(--color-danger)]"
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    deleteDesign(design.id);
+                  }}
+                  aria-label={`Delete design: ${design.name}`}
+                >
+                  <Trash2 className="w-4 h-4" />
+                </ActionButton>
+              </div>
+              <div className="mt-2 text-xs text-[var(--text-muted)]">
+                {design.effects.length} effects | {design.totalCapacityUsed} cap
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+    </GameCard>
+  );
+}
+
+SavedDesigns.displayName = 'SavedDesigns';

src/components/game/crafting/EnchantmentDesigner/types.ts

@@ -0,0 +1,53 @@
+import type { EquipmentInstance, EnchantmentDesign, DesignEffect, EquipmentCraftingProgress, EquipmentCategory } from '@/lib/game/types';
+
+export interface EnchantmentDesignerProps {
+  selectedEquipmentType: string | null;
+  setSelectedEquipmentType: (type: string | null) => void;
+  selectedEffects: DesignEffect[];
+  setSelectedEffects: (effects: DesignEffect[]) => void;
+  designName: string;
+  setDesignName: (name: string) => void;
+  selectedDesign: string | null;
+  setSelectedDesign: (id: string | null) => void;
+}
+
+export interface EquipmentTypeSelectorProps {
+  ownedEquipmentTypes: Array<{ id: string; name: string; baseCapacity: number }>;
+  selectedEquipmentType: string | null;
+  setSelectedEquipmentType: (type: string | null) => void;
+  designProgress: EquipmentCraftingProgress | null;
+  cancelDesign: () => void;
+}
+
+export interface EffectSelectorProps {
+  selectedEquipmentType: string | null;
+  selectedEffects: DesignEffect[];
+  setSelectedEffects: (effects: DesignEffect[]) => void;
+  availableEffects: Array<{ id: string; name: string; description: string; baseCapacityCost: number; maxStacks: number }>;
+  incompatibleEffects: Array<{ id: string; name: string; description: string }>;
+  enchantingLevel: number;
+  efficiencyBonus: number;
+  designProgress: EquipmentCraftingProgress | null;
+  addEffect: (effectId: string) => void;
+  removeEffect: (effectId: string) => void;
+  getIncompatibilityReason: (effect: { id: string; name: string; description: string; allowedEquipmentCategories: EquipmentCategory[] }) => string;
+}
+
+export interface SavedDesignsProps {
+  enchantmentDesigns: EnchantmentDesign[];
+  selectedDesign: string | null;
+  setSelectedDesign: (id: string | null) => void;
+  deleteDesign: (id: string) => void;
+}
+
+export interface DesignFormProps {
+  designName: string;
+  setDesignName: (name: string) => void;
+  selectedEffects: DesignEffect[];
+  designCapacityCost: number;
+  selectedEquipmentCapacity: number;
+  isOverCapacity: boolean;
+  designTime: number;
+  selectedEquipmentType: string | null;
+  handleCreateDesign: () => void;
+}

src/components/game/crafting/EnchantmentDesigner/utils.ts

@@ -0,0 +1,163 @@
+import { EQUIPMENT_TYPES } from '@/lib/game/data/equipment';
+import { ENCHANTMENT_EFFECTS, calculateEffectCapacityCost } from '@/lib/game/data/enchantment-effects';
+import type { DesignEffect, EquipmentInstance, EquipmentCategory } from '@/lib/game/types';
+import { calculateDesignCapacityCost as calcCapacityCost, calculateDesignTime as calcDesignTime } from '@/lib/game/crafting-design';
+
+/**
+ * Get available effects for selected equipment type (only unlocked ones)
+ * Requirement (task3 bug #7): Show incompatible enchantments in greyed-out "Unavailable" section
+ */
+export function getAvailableEffects(
+  selectedEquipmentType: string | null,
+  unlockedEffects: string[]
+) {
+  if (!selectedEquipmentType) return [];
+  const type = EQUIPMENT_TYPES[selectedEquipmentType];
+  if (!type) return [];
+
+  return Object.values(ENCHANTMENT_EFFECTS).filter(
+    effect =>
+      effect.allowedEquipmentCategories.includes(type.category) &&
+      unlockedEffects.includes(effect.id)
+  );
+}
+
+/**
+ * Get incompatible effects (unlocked but not for this equipment type)
+ */
+export function getIncompatibleEffects(
+  selectedEquipmentType: string | null,
+  unlockedEffects: string[]
+) {
+  if (!selectedEquipmentType) return [];
+  const type = EQUIPMENT_TYPES[selectedEquipmentType];
+  if (!type) return [];
+
+  return Object.values(ENCHANTMENT_EFFECTS).filter(
+    effect =>
+      !effect.allowedEquipmentCategories.includes(type.category) &&
+      unlockedEffects.includes(effect.id)
+  );
+}
+
+/**
+ * Get equipment types that the player actually owns (has instances of)
+ * This ensures enchantment compatibility is based on owned items, not just blueprints
+ */
+export function getOwnedEquipmentTypes(equipmentInstances: Record<string, EquipmentInstance>) {
+  // Get all unique equipment type IDs from owned instances
+  const ownedEquipmentTypeIds = new Set<string>();
+
+  // Check all equipment instances the player owns
+  for (const instance of Object.values(equipmentInstances || {})) {
+    ownedEquipmentTypeIds.add(instance.typeId);
+  }
+
+  // Filter EQUIPMENT_TYPES to only include types the player owns
+  return Object.values(EQUIPMENT_TYPES).filter(type => ownedEquipmentTypeIds.has(type.id));
+}
+
+/**
+ * Get the reason why an effect is incompatible
+ */
+export function getIncompatibilityReason(
+  effect: { id: string; name: string; description: string; allowedEquipmentCategories: EquipmentCategory[] },
+  selectedEquipmentType: string | null
+): string {
+  if (!selectedEquipmentType) return 'No equipment selected';
+  const type = EQUIPMENT_TYPES[selectedEquipmentType];
+  if (!type) return 'Unknown equipment type';
+
+  // Check what categories this effect is allowed for
+  const allowedCategories = effect.allowedEquipmentCategories;
+  const equipmentCategory = type.category;
+
+  if (allowedCategories.includes(equipmentCategory)) {
+    return 'Compatible';
+  }
+
+  // Provide specific reasons
+  if (allowedCategories.includes('weapon' as EquipmentCategory) && equipmentCategory !== 'sword' && equipmentCategory !== 'caster' && equipmentCategory !== 'catalyst') {
+    return `Requires a weapon (${allowedCategories.filter(c => ['sword', 'caster', 'catalyst'].includes(c)).join(', ')})`;
+  }
+
+  return `Requires ${allowedCategories.join(' or ')} equipment`;
+}
+
+/**
+ * Calculate total capacity cost for current design
+ * Delegates to canonical calculateDesignCapacityCost from crafting-design
+ */
+export function calculateDesignCapacityCost(
+  selectedEffects: DesignEffect[],
+  efficiencyBonus: number
+): number {
+  return calcCapacityCost(selectedEffects, efficiencyBonus);
+}
+
+/**
+ * Get capacity limit for selected equipment type
+ */
+export function getEquipmentCapacity(selectedEquipmentType: string | null): number {
+  return selectedEquipmentType ? EQUIPMENT_TYPES[selectedEquipmentType]?.baseCapacity || 0 : 0;
+}
+
+/**
+ * Calculate design time
+ * Delegates to canonical calculateDesignTime from crafting-design
+ */
+export function calculateDesignTime(selectedEffects: DesignEffect[]): number {
+  return calcDesignTime(selectedEffects);
+}
+
+/**
+ * Add effect to design
+ */
+export function addEffectToDesign(
+  effectId: string,
+  selectedEffects: DesignEffect[],
+  efficiencyBonus: number,
+  setSelectedEffects: (effects: DesignEffect[]) => void
+) {
+  const existing = selectedEffects.find(e => e.effectId === effectId);
+  const effectDef = ENCHANTMENT_EFFECTS[effectId];
+  if (!effectDef) return;
+
+  if (existing) {
+    if (existing.stacks < effectDef.maxStacks) {
+      setSelectedEffects(selectedEffects.map(e =>
+        e.effectId === effectId
+          ? { ...e, stacks: e.stacks + 1 }
+          : e
+      ));
+    }
+  } else {
+    setSelectedEffects([...selectedEffects, {
+      effectId,
+      stacks: 1,
+      capacityCost: calculateEffectCapacityCost(effectId, 1, efficiencyBonus),
+    }]);
+  }
+}
+
+/**
+ * Remove effect from design
+ */
+export function removeEffectFromDesign(
+  effectId: string,
+  selectedEffects: DesignEffect[],
+  setSelectedEffects: (effects: DesignEffect[]) => void
+) {
+  const existing = selectedEffects.find(e => e.effectId === effectId);
+  if (!existing) return;
+
+  if (existing.stacks > 1) {
+    setSelectedEffects(selectedEffects.map(e =>
+      e.effectId === effectId
+        ? { ...e, stacks: e.stacks - 1 }
+        : e
+    ));
+  } else {
+    setSelectedEffects(selectedEffects.filter(e => e.effectId !== effectId));
+  }
+}

src/components/game/crafting/EnchantmentPreparer.tsx

@@ -11,29 +11,28 @@ import { Separator } from '@/components/ui/separator';
 import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger } from '@/components/ui/alert-dialog';
 import { Trash2, CheckCircle, AlertTriangle } from 'lucide-react';
 import { EQUIPMENT_TYPES } from '@/lib/game/data/equipment';
-import type { EquipmentInstance, AppliedEnchantment, LootInventory, EquipmentCraftingProgress, EquipmentSlot } from '@/lib/game/types';
-import { fmt, type GameStore } from '@/lib/game/store';
+import type { EquipmentInstance, AppliedEnchantment, LootInventory, EquipmentCraftingProgress } from '@/lib/game/types';
+import type { EquipmentSlot } from '@/lib/game/types';
+import { fmt } from '@/lib/game/stores';
+import { useGameStore, useCraftingStore, useManaStore } from '@/lib/game/stores';
 import { useGameToast } from '@/components/game/GameToast';
 
 export interface EnchantmentPreparerProps {
-  store: GameStore;
   selectedEquipmentInstance: string | null;
   setSelectedEquipmentInstance: (id: string | null) => void;
 }
 
 export function EnchantmentPreparer({
-  store,
   selectedEquipmentInstance,
   setSelectedEquipmentInstance,
 }: EnchantmentPreparerProps) {
   const showToast = useGameToast();
-  const equippedInstances = store.equippedInstances;
-  const equipmentInstances = store.equipmentInstances;
-  const preparationProgress = store.preparationProgress;
-  const rawMana = store.rawMana;
-  const skills = store.skills;
-  const startPreparing = store.startPreparing;
-  const cancelPreparation = store.cancelPreparation;
+  const equippedInstances = useCraftingStore((s) => s.equippedInstances);
+  const equipmentInstances = useCraftingStore((s) => s.equipmentInstances);
+  const preparationProgress = useCraftingStore((s) => s.preparationProgress);
+  const rawMana = useManaStore((s) => s.rawMana);
+  const startPreparing = useCraftingStore((s) => s.startPreparing);
+  const cancelPreparation = useCraftingStore((s) => s.cancelPreparation);
 
   // Get equipped items as array
   const equippedItems = Object.entries(equippedInstances)

src/components/game/crafting/EquipmentCrafter.tsx

@@ -8,26 +8,221 @@ import { ScrollArea } from '@/components/ui/scroll-area';
 import { Separator } from '@/components/ui/separator';
 import { Package, Sparkles, Trash2, Anvil } from 'lucide-react';
 import { CRAFTING_RECIPES, canCraftRecipe } from '@/lib/game/data/crafting-recipes';
-import { LOOT_DROPS, RARITY_COLORS } from '@/lib/game/data/loot-drops';
-import type { EquipmentInstance, AppliedEnchantment, LootInventory, EquipmentCraftingProgress } from '@/lib/game/types';
-import { fmt, type GameStore } from '@/lib/game/store';
+import { LOOT_DROPS, LOOT_RARITY_COLORS } from '@/lib/game/data/loot-drops';
+import type { LootInventory } from '@/lib/game/types';
+import { fmt } from '@/lib/game/stores';
+import { useCraftingStore, useCombatStore, useManaStore } from '@/lib/game/stores';
 
-export interface EquipmentCrafterProps {
-  store: GameStore;
+// ─── Crafting Progress ───────────────────────────────────────────────────────
+
+function CraftingProgress({ progress }: { progress: { blueprintId: string; progress: number; required: number; manaSpent: number } }) {
+  const recipe = CRAFTING_RECIPES[progress.blueprintId];
+  const cancelEquipmentCrafting = useCraftingStore((s) => s.cancelEquipmentCrafting);
+
+  return (
+    <div className="space-y-3">
+      <div className="text-sm text-gray-400">
+        Crafting: {recipe?.name}
+      </div>
+      <Progress value={(progress.progress / progress.required) * 100} className="h-3" />
+      <div className="flex justify-between text-xs text-gray-400">
+        <span>{progress.progress.toFixed(1)}h / {progress.required.toFixed(1)}h</span>
+        <span>Mana spent: {fmt(progress.manaSpent)}</span>
+      </div>
+      <Button size="sm" variant="outline" onClick={cancelEquipmentCrafting}>Cancel</Button>
+    </div>
+  );
 }
 
-export function EquipmentCrafter({ store }: EquipmentCrafterProps) {
-  const lootInventory = store.lootInventory;
-  const equipmentCraftingProgress = store.equipmentCraftingProgress;
-  const rawMana = store.rawMana;
-  const currentAction = store.currentAction;
-  const startCraftingEquipment = store.startCraftingEquipment;
-  const cancelEquipmentCrafting = store.cancelEquipmentCrafting;
-  const deleteMaterial = store.deleteMaterial;
+// ─── Blueprint Card ───────────────────────────────────────────────────────────
+
+function BlueprintCard({ bpId, lootInventory, rawMana, isCrafting }: {
+  bpId: string;
+  lootInventory: LootInventory;
+  rawMana: number;
+  isCrafting: boolean;
+}) {
+  const recipe = CRAFTING_RECIPES[bpId];
+  if (!recipe) return null;
+
+  const { canCraft, missingMaterials } = canCraftRecipe(recipe, lootInventory.materials, rawMana);
+  const rarityStyle = LOOT_RARITY_COLORS[recipe.rarity];
+  const startCraftingEquipment = useCraftingStore((s) => s.startCraftingEquipment);
+  const currentAction = useCombatStore((s) => s.currentAction);
+
+  return (
+    <div
+      className="p-3 rounded border bg-gray-800/50"
+      style={{ borderColor: rarityStyle?.color }}
+    >
+      <div className="flex justify-between items-start mb-2">
+        <div>
+          <div className="font-semibold" style={{ color: rarityStyle?.color }}>
+            {recipe.name}
+          </div>
+          <div className="text-xs text-gray-400 capitalize">{recipe.rarity}</div>
+        </div>
+        <Badge variant="outline" className="text-xs">
+          {recipe.equipmentTypeId ? 'Equipment' : 'Other'}
+        </Badge>
+      </div>
+
+      <div className="text-xs text-gray-400 mb-2">{recipe.description}</div>
+
+      <Separator className="bg-gray-700 my-2" />
+
+      <div className="text-xs space-y-1">
+        <div className="text-gray-500">Materials:</div>
+        {Object.entries(recipe.materials).map(([matId, amount]) => {
+          const available = lootInventory.materials[matId] || 0;
+          const matDrop = LOOT_DROPS[matId];
+          const hasEnough = available >= amount;
+
+          return (
+            <div key={matId} className="flex justify-between">
+              <span>{matDrop?.name || matId}</span>
+              <span className={hasEnough ? 'text-green-400' : 'text-red-400'}>
+                {available} / {amount}
+              </span>
+            </div>
+          );
+        })}
+
+        <div className="flex justify-between mt-2">
+          <span>Mana Cost:</span>
+          <span className={rawMana >= recipe.manaCost ? 'text-green-400' : 'text-red-400'}>
+            {fmt(recipe.manaCost)}
+          </span>
+        </div>
+
+        <div className="flex justify-between">
+          <span>Craft Time:</span>
+          <span>{recipe.craftTime}h</span>
+        </div>
+      </div>
+
+      <Button
+        className="w-full mt-3"
+        size="sm"
+        disabled={!canCraft || isCrafting}
+        onClick={() => startCraftingEquipment(bpId)}
+      >
+        {canCraft ? 'Craft Equipment' : 'Missing Resources'}
+      </Button>
+    </div>
+  );
+}
+
+// ─── Blueprint List ───────────────────────────────────────────────────────────
+
+function BlueprintList({ lootInventory, rawMana }: { lootInventory: LootInventory; rawMana: number }) {
+  const currentAction = useCombatStore((s) => s.currentAction);
+
+  if (lootInventory.blueprints.length === 0) {
+    return (
+      <div className="text-center text-gray-400 py-4">
+        <Package className="w-12 h-12 mx-auto mb-2 opacity-50" />
+        <p>No blueprints discovered yet.</p>
+        <p className="text-xs mt-1">Defeat guardians to find blueprints!</p>
+      </div>
+    );
+  }
+
+  return (
+    <ScrollArea className="h-64">
+      <div className="space-y-2">
+        {lootInventory.blueprints.map(bpId => (
+          <BlueprintCard
+            key={bpId}
+            bpId={bpId}
+            lootInventory={lootInventory}
+            rawMana={rawMana}
+            isCrafting={currentAction === 'craft'}
+          />
+        ))}
+      </div>
+    </ScrollArea>
+  );
+}
+
+// ─── Material Card ────────────────────────────────────────────────────────────
+
+function MaterialCard({ matId, count }: { matId: string; count: number }) {
+  const drop = LOOT_DROPS[matId];
+  if (!drop) return null;
+
+  const rarityStyle = LOOT_RARITY_COLORS[drop.rarity];
+  const deleteMaterial = useCraftingStore((s) => s.deleteMaterial);
+
+  return (
+    <div
+      className="p-2 rounded border bg-gray-800/50 group relative"
+      style={{ borderColor: rarityStyle?.color }}
+    >
+      <div className="flex items-start justify-between">
+        <div>
+          <div className="text-sm font-semibold" style={{ color: rarityStyle?.color }}>
+            {drop.name}
+          </div>
+          <div className="text-xs text-gray-400">x{count}</div>
+        </div>
+        <Button
+          variant="ghost"
+          size="sm"
+          className="h-5 w-5 p-0 opacity-0 group-hover:opacity-100 text-red-400 hover:text-red-300 hover:bg-red-900/20"
+          onClick={() => deleteMaterial(matId, count)}
+        >
+          <Trash2 className="w-3 h-3" />
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+// ─── Materials Inventory ─────────────────────────────────────────────────────
+
+function MaterialsInventory({ materials }: { materials: Record<string, number> }) {
+  const totalCount = Object.values(materials).reduce((a, b) => a + b, 0);
+
+  return (
+    <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">
+          <Package className="w-4 h-4" />
+          Materials ({totalCount})
+        </CardTitle>
+      </CardHeader>
+      <CardContent>
+        <ScrollArea className="h-64">
+          {Object.keys(materials).length === 0 ? (
+            <div className="text-center text-gray-400 py-4">
+              <Sparkles className="w-12 h-12 mx-auto mb-2 opacity-50" />
+              <p>No materials collected yet.</p>
+              <p className="text-xs mt-1">Defeat floors to gather materials!</p>
+            </div>
+          ) : (
+            <div className="grid grid-cols-2 gap-2">
+              {Object.entries(materials).map(([matId, count]) => {
+                if (count <= 0) return null;
+                return <MaterialCard key={matId} matId={matId} count={count} />;
+              })}
+            </div>
+          )}
+        </ScrollArea>
+      </CardContent>
+    </Card>
+  );
+}
+
+// ─── Main Component ───────────────────────────────────────────────────────────
+
+export function EquipmentCrafter() {
+  const lootInventory = useCraftingStore((s) => s.lootInventory);
+  const equipmentCraftingProgress = useCraftingStore((s) => s.equipmentCraftingProgress);
+  const rawMana = useManaStore((s) => s.rawMana);
 
   return (
     <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
-      {/* Blueprint Selection */}
       <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">
@@ -37,166 +232,16 @@ export function EquipmentCrafter({ store }: EquipmentCrafterProps) {
         </CardHeader>
         <CardContent>
           {equipmentCraftingProgress ? (
-            <div className="space-y-3">
-              <div className="text-sm text-gray-400">
-                Crafting: {CRAFTING_RECIPES[equipmentCraftingProgress.blueprintId]?.name}
-              </div>
-              <Progress value={(equipmentCraftingProgress.progress / equipmentCraftingProgress.required) * 100} className="h-3" />
-              <div className="flex justify-between text-xs text-gray-400">
-                <span>{equipmentCraftingProgress.progress.toFixed(1)}h / {equipmentCraftingProgress.required.toFixed(1)}h</span>
-                <span>Mana spent: {fmt(equipmentCraftingProgress.manaSpent)}</span>
-              </div>
-              <Button size="sm" variant="outline" onClick={cancelEquipmentCrafting}>Cancel</Button>
-            </div>
+            <CraftingProgress progress={equipmentCraftingProgress} />
           ) : (
-            <ScrollArea className="h-64">
-              <div className="space-y-2">
-                {lootInventory.blueprints.length === 0 ? (
-                  <div className="text-center text-gray-400 py-4">
-                    <Package className="w-12 h-12 mx-auto mb-2 opacity-50" />
-                    <p>No blueprints discovered yet.</p>
-                    <p className="text-xs mt-1">Defeat guardians to find blueprints!</p>
-                  </div>
-                ) : (
-                  lootInventory.blueprints.map(bpId => {
-                    const recipe = CRAFTING_RECIPES[bpId];
-                    if (!recipe) return null;
-
-                    const { canCraft, missingMaterials, missingMana } = canCraftRecipe(
-                      recipe,
-                      lootInventory.materials,
-                      rawMana
-                    );
-
-                    const rarityStyle = RARITY_COLORS[recipe.rarity];
-
-                    return (
-                      <div
-                        key={bpId}
-                        className="p-3 rounded border bg-gray-800/50"
-                        style={{ borderColor: rarityStyle?.color }}
-                      >
-                        <div className="flex justify-between items-start mb-2">
-                          <div>
-                            <div className="font-semibold" style={{ color: rarityStyle?.color }}>
-                              {recipe.name}
-                            </div>
-                            <div className="text-xs text-gray-400 capitalize">{recipe.rarity}</div>
-                          </div>
-                          <Badge variant="outline" className="text-xs">
-                            {recipe.equipmentTypeId ? 'Equipment' : 'Other'}
-                          </Badge>
-                        </div>
-
-                        <div className="text-xs text-gray-400 mb-2">{recipe.description}</div>
-
-                        <Separator className="bg-gray-700 my-2" />
-
-                        <div className="text-xs space-y-1">
-                          <div className="text-gray-500">Materials:</div>
-                          {Object.entries(recipe.materials).map(([matId, amount]) => {
-                            const available = lootInventory.materials[matId] || 0;
-                            const matDrop = LOOT_DROPS[matId];
-                            const hasEnough = available >= amount;
-
-                            return (
-                              <div key={matId} className="flex justify-between">
-                                <span>{matDrop?.name || matId}</span>
-                                <span className={hasEnough ? 'text-green-400' : 'text-red-400'}>
-                                  {available} / {amount}
-                                </span>
-                              </div>
-                            );
-                          })}
-
-                          <div className="flex justify-between mt-2">
-                            <span>Mana Cost:</span>
-                            <span className={rawMana >= recipe.manaCost ? 'text-green-400' : 'text-red-400'}>
-                              {fmt(recipe.manaCost)}
-                            </span>
-                          </div>
-
-                          <div className="flex justify-between">
-                            <span>Craft Time:</span>
-                            <span>{recipe.craftTime}h</span>
-                          </div>
-                        </div>
-
-                        <Button
-                          className="w-full mt-3"
-                          size="sm"
-                          disabled={!canCraft || currentAction === 'craft'}
-                          onClick={() => startCraftingEquipment(bpId)}
-                        >
-                          {canCraft ? 'Craft Equipment' : 'Missing Resources'}
-                        </Button>
-                      </div>
-                    );
-                  })
-                )}
-              </div>
-            </ScrollArea>
+            <BlueprintList lootInventory={lootInventory} rawMana={rawMana} />
           )}
         </CardContent>
       </Card>
 
-      {/* Materials Inventory */}
-      <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">
-            <Package className="w-4 h-4" />
-            Materials ({Object.values(lootInventory.materials).reduce((a, b) => a + b, 0)})
-          </CardTitle>
-        </CardHeader>
-        <CardContent>
-          <ScrollArea className="h-64">
-            {Object.keys(lootInventory.materials).length === 0 ? (
-              <div className="text-center text-gray-400 py-4">
-                <Sparkles className="w-12 h-12 mx-auto mb-2 opacity-50" />
-                <p>No materials collected yet.</p>
-                <p className="text-xs mt-1">Defeat floors to gather materials!</p>
-              </div>
-            ) : (
-              <div className="grid grid-cols-2 gap-2">
-                {Object.entries(lootInventory.materials).map(([matId, count]) => {
-                  if (count <= 0) return null;
-                  const drop = LOOT_DROPS[matId];
-                  if (!drop) return null;
-
-                  const rarityStyle = RARITY_COLORS[drop.rarity];
-
-                  return (
-                    <div
-                      key={matId}
-                      className="p-2 rounded border bg-gray-800/50 group relative"
-                      style={{ borderColor: rarityStyle?.color }}
-                    >
-                      <div className="flex items-start justify-between">
-                        <div>
-                          <div className="text-sm font-semibold" style={{ color: rarityStyle?.color }}>
-                            {drop.name}
-                          </div>
-                          <div className="text-xs text-gray-400">x{count}</div>
-                        </div>
-                        <Button
-                          variant="ghost"
-                          size="sm"
-                          className="h-5 w-5 p-0 opacity-0 group-hover:opacity-100 text-red-400 hover:text-red-300 hover:bg-red-900/20"
-                          onClick={() => deleteMaterial(matId, count)}
-                        >
-                          <Trash2 className="w-3 h-3" />
-                        </Button>
-                      </div>
-                    </div>
-                  );
-                })}
-              </div>
-            )}
-          </ScrollArea>
-        </CardContent>
-      </Card>
+      <MaterialsInventory materials={lootInventory.materials} />
     </div>
   );
 }
 
-EquipmentCrafter.displayName = "EquipmentCrafter";
+EquipmentCrafter.displayName = 'EquipmentCrafter';

src/components/game/crafting/index.tsx

@@ -1,6 +1,6 @@
 // Barrel file for crafting components
 
-export { EnchantmentDesigner, type EnchantmentDesignerProps } from './EnchantmentDesigner';
-export { EnchantmentPreparer, type EnchantmentPreparerProps } from './EnchantmentPreparer';
-export { EnchantmentApplier, type EnchantmentApplierProps } from './EnchantmentApplier';
-export { EquipmentCrafter, type EquipmentCrafterProps } from './EquipmentCrafter';
+export { EnchantmentDesigner } from './EnchantmentDesigner';
+export { EnchantmentPreparer } from './EnchantmentPreparer';
+export { EnchantmentApplier } from './EnchantmentApplier';
+export { EquipmentCrafter } from './EquipmentCrafter';

src/components/game/debug/AttunementDebug.tsx

@@ -2,25 +2,29 @@
 
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
-import { ATTUNEMENTS_DEF } from '@/lib/game/data/attunements';
 import { Sparkles, Unlock } from 'lucide-react';
-import type { GameStore } from '@/lib/game/store';
+import { ATTUNEMENTS_DEF } from '@/lib/game/data/attunements';
+import { useAttunementStore } from '@/lib/game/stores';
+import { useManaStore } from '@/lib/game/stores';
 
-interface AttunementDebugProps {
-  store: GameStore;
-}
+export function AttunementDebug() {
+  const attunements = useAttunementStore((s) => s.attunements);
+  const debugUnlockAttunement = useAttunementStore((s) => s.debugUnlockAttunement);
+  const addAttunementXP = useAttunementStore((s) => s.addAttunementXP);
 
-export function AttunementDebug({ store }: AttunementDebugProps) {
   const handleUnlockAttunement = (id: string) => {
-    // Debug action to unlock attunements
-    if (store.debugUnlockAttunement) {
-      store.debugUnlockAttunement(id);
+    if (debugUnlockAttunement) {
+      debugUnlockAttunement(id);
+      // When unlocking Enchanter, also unlock the transference element
+      if (id === 'enchanter') {
+        useManaStore.getState().unlockElement('transference', 500);
+      }
     }
   };
 
   const handleAddAttunementXP = (id: string, amount: number) => {
-    if (store.debugAddAttunementXP) {
-      store.debugAddAttunementXP(id, amount);
+    if (addAttunementXP) {
+      addAttunementXP(id, amount);
     }
   };
 
@@ -33,10 +37,10 @@ export function AttunementDebug({ store }: AttunementDebugProps) {
         </CardTitle>
       </CardHeader>
       <CardContent className="space-y-3">
-        {Object.entries(ATTUNEMENTS_DEF).map(([id, def]) => {
-          const isActive = store.attunements?.[id]?.active;
-          const level = store.attunements?.[id]?.level || 1;
-          const xp = store.attunements?.[id]?.experience || 0;
+        {Object.entries(ATTUNEMENTS_DEF || {}).map(([id, def]) => {
+          const isActive = attunements?.[id]?.active;
+          const level = attunements?.[id]?.level || 1;
+          const xp = attunements?.[id]?.experience || 0;
 
           return (
             <div key={id} className="flex items-center justify-between p-2 bg-gray-800/50 rounded">
@@ -49,34 +53,21 @@ export function AttunementDebug({ store }: AttunementDebugProps) {
                   )}
                 </div>
               </div>
-              <div className="flex gap-1">
-                {!isActive && (
-                  <Button
-                    size="sm"
-                    variant="outline"
-                    onClick={() => handleUnlockAttunement(id)}
-                  >
-                    <Unlock className="w-3 h-3" />
-                  </Button>
-                )}
-                {isActive && (
-                  <>
-                    <Button
-                      size="sm"
-                      variant="outline"
-                      onClick={() => handleAddAttunementXP(id, 50)}
-                    >
-                      +50 XP
-                    </Button>
-                    <Button
-                      size="sm"
-                      variant="outline"
-                      onClick={() => handleAddAttunementXP(id, 500)}
-                    >
-                      +500 XP
-                    </Button>
-                  </>
-                )}
+              <div className="flex gap-2">
+                <Button
+                  size="sm"
+                  variant="outline"
+                  onClick={() => handleUnlockAttunement(id)}
+                >
+                  <Unlock className="w-3 h-3 mr-1" /> Unlock
+                </Button>
+                <Button
+                  size="sm"
+                  variant="outline"
+                  onClick={() => handleAddAttunementXP(id, 100)}
+                >
+                  +100 XP
+                </Button>
               </div>
             </div>
           );

src/components/game/debug/ElementDebug.tsx

@@ -2,26 +2,21 @@
 
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
-import { ELEMENTS } from '@/lib/game/constants';
 import { Star, Lock } from 'lucide-react';
-import type { GameStore } from '@/lib/game/store';
+import { useManaStore } from '@/lib/game/stores';
+import { ELEMENTS } from '@/lib/game/constants';
 
-interface ElementDebugProps {
-  store: GameStore;
-}
+export function ElementDebug() {
+  const elements = useManaStore((s) => s.elements);
 
-export function ElementDebug({ store }: ElementDebugProps) {
   const handleUnlockElement = (element: string) => {
-    store.unlockElement(element);
+    useManaStore.getState().unlockElement(element, 500);
   };
 
   const handleAddElementalMana = (element: string, amount: number) => {
-    const elem = store.elements[element];
+    const elem = elements?.[element];
     if (elem?.unlocked) {
-      // Add directly to element pool - need to implement in store
-      if (store.debugAddElementalMana) {
-        store.debugAddElementalMana(element, amount);
-      }
+      useManaStore.getState().addElementMana(element, amount, elem.max);
     }
   };
 
@@ -35,47 +30,41 @@ export function ElementDebug({ store }: ElementDebugProps) {
       </CardHeader>
       <CardContent>
         <div className="grid grid-cols-3 sm:grid-cols-4 md:grid-cols-6 gap-2">
-          {Object.entries(ELEMENTS).map(([id, def]) => {
-            const elem = store.elements[id];
-            const isUnlocked = elem?.unlocked;
-            
+          {Object.entries(elements || {}).map(([id, elem]) => {
+            const def = ELEMENTS[id];
             return (
               <div
                 key={id}
-                className={`p-2 rounded border ${
-                  isUnlocked ? 'border-gray-600' : 'border-gray-800 opacity-60'
+                className={`p-2 rounded border text-center ${
+                  elem.unlocked ? 'border-gray-600 bg-gray-800/50' : 'border-gray-800 opacity-60'
                 }`}
                 style={{
-                  borderColor: isUnlocked ? def.color : undefined 
+                  borderColor: elem.unlocked ? def?.color : undefined
                 }}
               >
-                <div className="flex items-center justify-between mb-1">
-                  <span style={{ color: def.color }}>{def.sym}</span>
-                  {!isUnlocked && (
-                    <Button
-                      size="sm"
-                      variant="ghost"
-                      className="h-5 w-5 p-0"
-                      onClick={() => handleUnlockElement(id)}
-                    >
-                      <Lock className="w-3 h-3" />
-                    </Button>
-                  )}
+                <div className="text-lg">{def?.sym}</div>
+                <div className="text-xs text-gray-400">{def?.name}</div>
+                <div className="text-xs text-gray-300 mt-1">
+                  {elem.current}/{elem.max}
                 </div>
-                <div className="text-xs" style={{ color: def.color }}>{def.name}</div>
-                {isUnlocked && (
-                  <div className="text-xs text-gray-400 mt-1">
-                    {elem.current.toFixed(0)}/{elem.max}
-                  </div>
-                )}
-                {isUnlocked && (
+                {!elem.unlocked && (
                   <Button
                     size="sm"
-                    variant="ghost"
-                    className="h-5 w-full mt-1 text-xs"
-                    onClick={() => handleAddElementalMana(id, 100)}
+                    variant="outline"
+                    className="mt-2"
+                    onClick={() => handleUnlockElement(id)}
                   >
-                    +100
+                    <Lock className="w-3 h-3 mr-1" /> Unlock
+                  </Button>
+                )}
+                {elem.unlocked && (
+                  <Button
+                    size="sm"
+                    variant="outline"
+                    className="mt-2"
+                    onClick={() => handleAddElementalMana(id, 10)}
+                  >
+                    +10
                   </Button>
                 )}
               </div>