feat: implement attunement leveling and debug functions

- Add attunement XP system with level-scaled progression (100 * 3^(level-2) XP per level) - Add addAttunementXP function with automatic level-up handling - Add debug functions: debugUnlockAttunement, debugAddElementalMana, debugSetTime, debugAddAttunementXP, debugSetFloor - Update attunement conversion to use level-scaled conversion rate - Import getAttunementConversionRate, getAttunementXPForLevel, MAX_ATTUNEMENT_LEVEL in store
feat: add attunement leveling system, debug tab, and UI improvements
2026-03-27 18:55:22 +00:00 · 2026-03-27 18:51:13 +00:00 · 2026-03-27 18:11:18 +00:00 · 2026-03-27 18:10:55 +00:00 · 2026-03-27 18:09:05 +00:00 · 2026-03-27 18:06:08 +00:00
363 changed files with 21220 additions and 46453 deletions
@@ -0,0 +1,128 @@
 {
 "Meta": {
  "Strict": true,
  "Retries": 10,
  "MaxDeletes": 10,
  "SkipDirNlink": 20,
  "CaseInsensi": false,
  "ReadOnly": false,
  "NoBGJob": true,
  "OpenCache": 0,
  "OpenCacheLimit": 10000,
  "Heartbeat": 12000000000,
  "MountPoint": "/tmp/storage/containers/rundjuicefs-31fe40a7-808b-4861-a3c6-5e1361ba66cd-my-project",
  "Subdir": "/0954660f-fdaf-430e-9c08-43d856f4b183/chat-97147419-5634-40fa-8c67-d722ea396734/my-project",
  "AtimeMode": "noatime",
  "DirStatFlushPeriod": 1000000000,
  "SkipDirMtime": 100000000,
  "Sid": 4039678,
  "SortDir": false,
  "FastStatfs": false,
  "TTLCleanupInterval": 1800000000000
 },
 "Format": {
  "Name": "pcs-ue6ju0nuiu0hz7tjc-0e3odv6t4dackr8s3",
  "UUID": "ad4b5b55-9406-4e74-b5e1-5422c94dd1fa",
  "Storage": "oss",
  "Bucket": "https://pcs-ue6ju0nuiu0hz7tjc-0e3odv6t4dackr8s3.oss-cn-hongkong-internal.aliyuncs.com",
  "AccessKey": "STS.NXg1AmEjJ1XZCYZMa5mH1q66p",
  "SecretKey": "removed",
  "SessionToken": "removed",
  "BlockSize": 4096,
  "Compression": "none",
  "HashPrefix": true,
  "EncryptAlgo": "aes256gcm-rsa",
  "TrashDays": 0,
  "MetaVersion": 1,
  "MinClientVersion": "1.1.0-A",
  "DirStats": true,
  "EnableACL": false,
  "Consul": "21.0.14.104:8500",
  "CustomLabels": "cluster:pfs-j6cm9t56111f4x38;uid:1936221977589032",
  "PushGateway": "http://cn-hongkong-intranet.arms.aliyuncs.com/prometheus/322760eec05a83d258d354fca51498ab/1047553595254976/tiwz7q7d94/cn-hongkong/api/v2"
 },
 "Chunk": {
  "CacheDir": "/var/jfsCache/ad4b5b55-9406-4e74-b5e1-5422c94dd1fa",
  "CacheMode": 384,
  "CacheSize": 107374182400,
  "CacheItems": 0,
  "CacheChecksum": "extend",
  "CacheEviction": "2-random",
  "CacheScanInterval": 3600000000000,
  "CacheExpire": 0,
  "OSCache": true,
  "FreeSpace": 0.1,
  "AutoCreate": true,
  "Compress": "none",
  "MaxUpload": 20,
  "MaxStageWrite": 1000,
  "MaxRetries": 10,
  "UploadLimit": 0,
  "DownloadLimit": 0,
  "Writeback": false,
  "UploadDelay": 0,
  "UploadHours": "",
  "HashPrefix": true,
  "BlockSize": 4194304,
  "GetTimeout": 60000000000,
  "PutTimeout": 60000000000,
  "CacheFullBlock": true,
  "CacheLargeWrite": false,
  "BufferSize": 314572800,
  "Readahead": 33554432,
  "Prefetch": 1
 },
 "Security": {
  "EnableCap": false,
  "EnableSELinux": false
 },
 "Port": {},
 "Version": "1.3.0+2025-11-13.7d12dfcb",
 "AttrTimeout": 1000000000,
 "DirEntryTimeout": 1000000000,
 "NegEntryTimeout": 0,
 "EntryTimeout": 1000000000,
 "ReaddirCache": false,
 "BackupMeta": 3600000000000,
 "BackupSkipTrash": false,
 "PrefixInternal": false,
 "HideInternal": false,
 "AllSquash": {
  "Uid": 1001,
  "Gid": 1001
 },
 "NonDefaultPermission": true,
 "UMask": 0,
 "Pid": 221,
 "PPid": 212,
 "CommPath": "/tmp/fuse_fd_comm.212",
 "StatePath": "/tmp/state212.json",
 "FuseOpts": {
  "AllowOther": true,
  "Options": [
   "nonempty",
   "default_permissions"
  ],
  "MaxBackground": 200,
  "MaxWrite": 0,
  "MaxReadAhead": 1048576,
  "IgnoreSecurityLabels": false,
  "RememberInodes": false,
  "FsName": "JuiceFS:pcs-ue6ju0nuiu0hz7tjc-0e3odv6t4dackr8s3",
  "Name": "juicefs",
  "SingleThreaded": false,
  "DisableXAttrs": true,
  "Debug": false,
  "EnableLocks": true,
  "EnableSymlinkCaching": true,
  "ExplicitDataCacheControl": false,
  "DirectMount": true,
  "DirectMountFlags": 0,
  "EnableAcl": false,
  "EnableWriteback": false,
  "DontUmask": true,
  "OtherCaps": 0,
  "NoAllocForRead": false,
  "Timeout": 900000000000
 }
 }
@@ -48,4 +48,4 @@ prompt
 server.log
 # Skills directory
-.desloppify/
+/skills/
@@ -1,16 +0,0 @@
 #!/bin/sh
 changed_files="$(git diff-tree -r --name-only --no-commit-id ORIG_HEAD HEAD)"
 if echo "$changed_files" | grep --quiet -E "package.json|package-lock.json"; then
  echo "📦 Dependencies changed. Syncing..."
  # --no-progress stops the terminal spam
  # --loglevel error ensures we only see the bad stuff
  if npm install --no-progress --loglevel error; then
    echo "✅ Node modules are up to date."
  else
    echo "❌ npm install failed! Please check your connection or package.json."
    exit 1
  fi
 fi
@@ -1,27 +0,0 @@
 #!/bin/sh
 echo "🔍 Running pre-commit checks..."
 # Get staged files (added, copied, modified)
 STAGED_FILES=$(git diff --cached --name-only --diff-filter=ACM)
 if [ -n "$STAGED_FILES" ]; then
  echo "📏 Checking file sizes..."
  node .husky/scripts/check-file-size.js $STAGED_FILES
  if [ $? -ne 0 ]; then
    exit 1
  fi
 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
 # Auto-add the generated project structure to the commit
 git add docs/project-structure.txt
 echo "✅ All pre-commit checks passed!"
@@ -1,63 +0,0 @@
 /* eslint-disable @typescript-eslint/no-require-imports */
 const fs = require('fs');
 const path = require('path');
 const MAX_LINES = 400;
 // List of file patterns to ignore (optional, can be customized)
 const IGNORE_PATTERNS = [
  /\.lock$/,  // Lock files
  /\.min\.js$/,  // Minified files
  /\.map$/,  // Source maps
  /package-lock\.json$/,
  /bun\.lock$/,
  /tsconfig\.tsbuildinfo$/,
  /\.md$/,  // Markdown documentation files
  /context\.md$/,  // Context files for sub-agents
  /project-structure\.txt$/,  // Generated project structure
  /dependency-graph\.json$/,
 ];
 function shouldIgnore(filePath) {
  return IGNORE_PATTERNS.some(pattern => pattern.test(filePath));
 }
 const files = process.argv.slice(2);
 if (files.length === 0) {
  console.log('ℹ️ No files to check');
  process.exit(0);
 }
 let hasError = false;
 files.forEach(file => {
  // Skip ignored patterns
  if (shouldIgnore(file)) {
    console.log(`⏭️ Skipping ${file} (ignored pattern)`);
    return;
  }
  // Check if file exists (it might have been deleted)
  if (!fs.existsSync(file)) {
    console.log(`⏭️ Skipping ${file} (file does not exist)`);
    return;
  }
  try {
    const content = fs.readFileSync(file, 'utf8');
    const lines = content.split('\n').length;
    if (lines > MAX_LINES) {
      console.error(`❌ ${file} is too large (${lines} lines, max ${MAX_LINES}). AI agents will struggle. Please refactor!`);
      hasError = true;
    } else {
      console.log(`✅ ${file} (${lines} lines) - OK`);
    }
  } catch (err) {
    console.error(`⚠️ Error reading ${file}: ${err.message}`);
    // Don't fail on read errors, just warn
  }
 });
 if (hasError) {
  process.exit(1);
 }
@@ -1,119 +0,0 @@
 #!/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`);
 }
@@ -1,117 +0,0 @@
 /* eslint-disable @typescript-eslint/no-require-imports */
 const fs = require('fs');
 const path = require('path');
 const { execSync } = require('node:child_process');
 // Directory to start from (project root)
 const ROOT_DIR = process.cwd();
 // Output file path
 const OUTPUT_FILE = path.join(ROOT_DIR, 'docs', 'project-structure.txt');
 // Function to check if a path is ignored by git
 function isGitIgnored(filePath) {
  try {
    // git check-ignore -q returns 0 if ignored, 1 if not
    execSync(`git check-ignore -q "${filePath}"`, {
      cwd: ROOT_DIR,
      stdio: 'ignore'
    });
    return true; // Ignored
  } catch (e) {
    return false; // Not ignored
  }
 }
 // Function to generate tree structure
 function generateTree(dir, prefix = '', isRoot = true) {
  let structure = '';
  // Add root directory name if it's the root
  if (isRoot) {
    structure += `${path.basename(dir)}/\n`;
  }
  let items;
  try {
    items = fs.readdirSync(dir);
  } catch (e) {
    console.error(`Error reading directory ${dir}: ${e.message}`);
    return structure;
  }
  // Sort items: directories first, then files
  const dirs = [];
  const files = [];
  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;
    }
    try {
      const stat = fs.statSync(itemPath);
      if (stat.isDirectory()) {
        dirs.push(item);
      } else {
        files.push(item);
      }
    } catch (e) {
      // Skip items we can't stat
    }
  });
  // Sort directories and files alphabetically
  dirs.sort();
  files.sort();
  const allItems = [...dirs, ...files];
  allItems.forEach((item, index) => {
    const isLast = index === allItems.length - 1;
    const connector = isLast ? '└── ' : '├── ';
    const itemPath = path.join(dir, item);
    structure += `${prefix}${connector}${item}${dirs.includes(item) ? '/' : ''}\n`;
    // Recurse into directories
    if (dirs.includes(item)) {
      const newPrefix = prefix + (isLast ? '    ' : '│   ');
      structure += generateTree(itemPath, newPrefix, false);
    }
  });
  return structure;
 }
 try {
  console.log('🗺️ Generating project structure...');
  // Ensure docs directory exists
  const docsDir = path.join(ROOT_DIR, 'docs');
  if (!fs.existsSync(docsDir)) {
    fs.mkdirSync(docsDir, { recursive: true });
    console.log('📁 Created docs directory');
  }
  // Generate tree
  const tree = generateTree(ROOT_DIR, '', true);
  // Write to file
  fs.writeFileSync(OUTPUT_FILE, tree);
  console.log(`✅ Project structure updated: ${OUTPUT_FILE}`);
 } catch (err) {
  console.error(`❌ Error generating project structure: ${err.message}`);
  process.exit(1);
 }
@@ -0,0 +1,117 @@
 #!/bin/bash
 # 将 stderr 重定向到 stdout，避免 execute_command 因为 stderr 输出而报错
 exec 2>&1
 set -e
 # 获取脚本所在目录（.zscripts 目录，即 workspace-agent/.zscripts）
 # 使用 $0 获取脚本路径（兼容 sh 和 bash）
 SCRIPT_DIR="$(cd "$(dirname "$0")" && pwd)"
 # Next.js 项目路径
 NEXTJS_PROJECT_DIR="/home/z/my-project"
 # 检查 Next.js 项目目录是否存在
 if [ ! -d "$NEXTJS_PROJECT_DIR" ]; then
    echo "❌ 错误: Next.js 项目目录不存在: $NEXTJS_PROJECT_DIR"
    exit 1
 fi
 echo "🚀 开始构建 Next.js 应用和 mini-services..."
 echo "📁 Next.js 项目路径: $NEXTJS_PROJECT_DIR"
 # 切换到 Next.js 项目目录
 cd "$NEXTJS_PROJECT_DIR" || exit 1
 # 设置环境变量
 export NEXT_TELEMETRY_DISABLED=1
 BUILD_DIR="/tmp/build_fullstack_$BUILD_ID"
 echo "📁 清理并创建构建目录: $BUILD_DIR"
 mkdir -p "$BUILD_DIR"
 # 安装依赖
 echo "📦 安装依赖..."
 bun install
 # 构建 Next.js 应用
 echo "🔨 构建 Next.js 应用..."
 bun run build
 # 构建 mini-services
 # 检查 Next.js 项目目录下是否有 mini-services 目录
 if [ -d "$NEXTJS_PROJECT_DIR/mini-services" ]; then
    echo "🔨 构建 mini-services..."
    # 使用 workspace-agent 目录下的 mini-services 脚本
    sh "$SCRIPT_DIR/mini-services-install.sh"
    sh "$SCRIPT_DIR/mini-services-build.sh"
    # 复制 mini-services-start.sh 到 mini-services-dist 目录
    echo "  - 复制 mini-services-start.sh 到 $BUILD_DIR"
    cp "$SCRIPT_DIR/mini-services-start.sh" "$BUILD_DIR/mini-services-start.sh"
    chmod +x "$BUILD_DIR/mini-services-start.sh"
 else
    echo "ℹ️  mini-services 目录不存在，跳过"
 fi
 # 将所有构建产物复制到临时构建目录
 echo "📦 收集构建产物到 $BUILD_DIR..."
 # 复制 Next.js standalone 构建输出
 if [ -d ".next/standalone" ]; then
    echo "  - 复制 .next/standalone"
    cp -r .next/standalone "$BUILD_DIR/next-service-dist/"
 fi
 # 复制 Next.js 静态文件
 if [ -d ".next/static" ]; then
    echo "  - 复制 .next/static"
    mkdir -p "$BUILD_DIR/next-service-dist/.next"
    cp -r .next/static "$BUILD_DIR/next-service-dist/.next/"
 fi
 # 复制 public 目录
 if [ -d "public" ]; then
    echo "  - 复制 public"
    cp -r public "$BUILD_DIR/next-service-dist/"
 fi
 # 最后再迁移数据库到 BUILD_DIR/db
 if [ "$(ls -A ./db 2>/dev/null)" ]; then
    echo "🗄️  检测到数据库文件，运行数据库迁移..."
    DATABASE_URL=file:$BUILD_DIR/db/custom.db bun run db:push
    echo "✅ 数据库迁移完成"
    ls -lah $BUILD_DIR/db
 else
    echo "ℹ️  db 目录为空，跳过数据库迁移"
 fi
 # 复制 Caddyfile（如果存在）
 if [ -f "Caddyfile" ]; then
    echo "  - 复制 Caddyfile"
    cp Caddyfile "$BUILD_DIR/"
 else
    echo "ℹ️  Caddyfile 不存在，跳过"
 fi
 # 复制 start.sh 脚本
 echo "  - 复制 start.sh 到 $BUILD_DIR"
 cp "$SCRIPT_DIR/start.sh" "$BUILD_DIR/start.sh"
 chmod +x "$BUILD_DIR/start.sh"
 # 打包到 $BUILD_DIR.tar.gz
 PACKAGE_FILE="${BUILD_DIR}.tar.gz"
 echo ""
 echo "📦 打包构建产物到 $PACKAGE_FILE..."
 cd "$BUILD_DIR" || exit 1
 tar -czf "$PACKAGE_FILE" .
 cd - > /dev/null || exit 1
 # # 清理临时目录
 # rm -rf "$BUILD_DIR"
 echo ""
 echo "✅ 构建完成！所有产物已打包到 $PACKAGE_FILE"
 echo "📊 打包文件大小:"
 ls -lh "$PACKAGE_FILE"
@@ -0,0 +1 @@
 488
@@ -0,0 +1,154 @@
 #!/bin/bash
 set -euo pipefail
 # 获取脚本所在目录（.zscripts）
 # 使用 $0 获取脚本路径（与 build.sh 保持一致）
 SCRIPT_DIR="$(cd "$(dirname "$0")" && pwd)"
 PROJECT_DIR="$(cd "$SCRIPT_DIR/.." && pwd)"
 log_step_start() {
 	local step_name="$1"
 	echo "=========================================="
 	echo "[$(date '+%Y-%m-%d %H:%M:%S')] Starting: $step_name"
 	echo "=========================================="
 	export STEP_START_TIME
 	STEP_START_TIME=$(date +%s)
 }
 log_step_end() {
 	local step_name="${1:-Unknown step}"
 	local end_time
 	end_time=$(date +%s)
 	local duration=$((end_time - STEP_START_TIME))
 	echo "=========================================="
 	echo "[$(date '+%Y-%m-%d %H:%M:%S')] Completed: $step_name"
 	echo "[LOG] Step: $step_name | Duration: ${duration}s"
 	echo "=========================================="
 	echo ""
 }
 start_mini_services() {
 	local mini_services_dir="$PROJECT_DIR/mini-services"
 	local started_count=0
 	log_step_start "Starting mini-services"
 	if [ ! -d "$mini_services_dir" ]; then
 		echo "Mini-services directory not found, skipping..."
 		log_step_end "Starting mini-services"
 		return 0
 	fi
 	echo "Found mini-services directory, scanning for sub-services..."
 	for service_dir in "$mini_services_dir"/*; do
 		if [ ! -d "$service_dir" ]; then
 			continue
 		fi
 		local service_name
 		service_name=$(basename "$service_dir")
 		echo "Checking service: $service_name"
 		if [ ! -f "$service_dir/package.json" ]; then
 			echo "[$service_name] No package.json found, skipping..."
 			continue
 		fi
 		if ! grep -q '"dev"' "$service_dir/package.json"; then
 			echo "[$service_name] No dev script found, skipping..."
 			continue
 		fi
 		echo "Starting $service_name in background..."
 		(
 			cd "$service_dir"
 			echo "[$service_name] Installing dependencies..."
 			bun install
 			echo "[$service_name] Running bun run dev..."
 			exec bun run dev
 		) >"$PROJECT_DIR/.zscripts/mini-service-${service_name}.log" 2>&1 &
 		local service_pid=$!
 		echo "[$service_name] Started in background (PID: $service_pid)"
 		echo "[$service_name] Log: $PROJECT_DIR/.zscripts/mini-service-${service_name}.log"
 		disown "$service_pid" 2>/dev/null || true
 		started_count=$((started_count + 1))
 	done
 	echo "Mini-services startup completed. Started $started_count service(s)."
 	log_step_end "Starting mini-services"
 }
 wait_for_service() {
 	local host="$1"
 	local port="$2"
 	local service_name="$3"
 	local max_attempts="${4:-60}"
 	local attempt=1
 	echo "Waiting for $service_name to be ready on $host:$port..."
 	while [ "$attempt" -le "$max_attempts" ]; do
 		if curl -s --connect-timeout 2 --max-time 5 "http://$host:$port" >/dev/null 2>&1; then
 			echo "$service_name is ready!"
 			return 0
 		fi
 		echo "Attempt $attempt/$max_attempts: $service_name not ready yet, waiting..."
 		sleep 1
 		attempt=$((attempt + 1))
 	done
 	echo "ERROR: $service_name failed to start within $max_attempts seconds"
 	return 1
 }
 cleanup() {
 	if [ -n "${DEV_PID:-}" ] && kill -0 "$DEV_PID" >/dev/null 2>&1; then
 		echo "Stopping Next.js dev server (PID: $DEV_PID)..."
 		kill "$DEV_PID" >/dev/null 2>&1 || true
 	fi
 }
 trap cleanup EXIT INT TERM
 cd "$PROJECT_DIR"
 if ! command -v bun >/dev/null 2>&1; then
 	echo "ERROR: bun is not installed or not in PATH"
 	exit 1
 fi
 log_step_start "bun install"
 echo "[BUN] Installing dependencies..."
 bun install
 log_step_end "bun install"
 log_step_start "bun run db:push"
 echo "[BUN] Setting up database..."
 bun run db:push
 log_step_end "bun run db:push"
 log_step_start "Starting Next.js dev server"
 echo "[BUN] Starting development server..."
 bun run dev &
 DEV_PID=$!
 log_step_end "Starting Next.js dev server"
 log_step_start "Waiting for Next.js dev server"
 wait_for_service "localhost" "3000" "Next.js dev server"
 log_step_end "Waiting for Next.js dev server"
 log_step_start "Health check"
 echo "[BUN] Performing health check..."
 curl -fsS localhost:3000 >/dev/null
 echo "[BUN] Health check passed"
 log_step_end "Health check"
 start_mini_services
 echo "Next.js dev server is running in background (PID: $DEV_PID)."
 echo "Use 'kill $DEV_PID' to stop it."
 disown "$DEV_PID" 2>/dev/null || true
 unset DEV_PID
@@ -0,0 +1,78 @@
 #!/bin/bash
 # 配置项
 ROOT_DIR="/home/z/my-project/mini-services"
 DIST_DIR="/tmp/build_fullstack_$BUILD_ID/mini-services-dist"
 main() {
    echo "🚀 开始批量构建..."
    # 检查 rootdir 是否存在
    if [ ! -d "$ROOT_DIR" ]; then
        echo "ℹ️  目录 $ROOT_DIR 不存在，跳过构建"
        return
    fi
    # 创建输出目录（如果不存在）
    mkdir -p "$DIST_DIR"
    # 统计变量
    success_count=0
    fail_count=0
    # 遍历 mini-services 目录下的所有文件夹
    for dir in "$ROOT_DIR"/*; do
        # 检查是否是目录且包含 package.json
        if [ -d "$dir" ] && [ -f "$dir/package.json" ]; then
            project_name=$(basename "$dir")
            # 智能查找入口文件 (按优先级查找)
            entry_path=""
            for entry in "src/index.ts" "index.ts" "src/index.js" "index.js"; do
                if [ -f "$dir/$entry" ]; then
                    entry_path="$dir/$entry"
                    break
                fi
            done
            if [ -z "$entry_path" ]; then
                echo "⚠️  跳过 $project_name: 未找到入口文件 (index.ts/js)"
                continue
            fi
            echo ""
            echo "📦 正在构建: $project_name..."
            # 使用 bun build CLI 构建
            output_file="$DIST_DIR/mini-service-$project_name.js"
            if bun build "$entry_path" \
                --outfile "$output_file" \
                --target bun \
                --minify; then
                echo "✅ $project_name 构建成功 -> $output_file"
                success_count=$((success_count + 1))
            else
                echo "❌ $project_name 构建失败"
                fail_count=$((fail_count + 1))
            fi
        fi
    done
    if [ -f ./.zscripts/mini-services-start.sh ]; then
        cp ./.zscripts/mini-services-start.sh "$DIST_DIR/mini-services-start.sh"
        chmod +x "$DIST_DIR/mini-services-start.sh"
    fi
    echo ""
    echo "🎉 所有任务完成！"
    if [ $success_count -gt 0 ] || [ $fail_count -gt 0 ]; then
        echo "✅ 成功: $success_count 个"
        if [ $fail_count -gt 0 ]; then
            echo "❌ 失败: $fail_count 个"
        fi
    fi
 }
 main
@@ -0,0 +1,65 @@
 #!/bin/bash
 # 配置项
 ROOT_DIR="/home/z/my-project/mini-services"
 main() {
    echo "🚀 开始批量安装依赖..."
    # 检查 rootdir 是否存在
    if [ ! -d "$ROOT_DIR" ]; then
        echo "ℹ️  目录 $ROOT_DIR 不存在，跳过安装"
        return
    fi
    # 统计变量
    success_count=0
    fail_count=0
    failed_projects=""
    # 遍历 mini-services 目录下的所有文件夹
    for dir in "$ROOT_DIR"/*; do
        # 检查是否是目录且包含 package.json
        if [ -d "$dir" ] && [ -f "$dir/package.json" ]; then
            project_name=$(basename "$dir")
            echo ""
            echo "📦 正在安装依赖: $project_name..."
            # 进入项目目录并执行 bun install
            if (cd "$dir" && bun install); then
                echo "✅ $project_name 依赖安装成功"
                success_count=$((success_count + 1))
            else
                echo "❌ $project_name 依赖安装失败"
                fail_count=$((fail_count + 1))
                if [ -z "$failed_projects" ]; then
                    failed_projects="$project_name"
                else
                    failed_projects="$failed_projects $project_name"
                fi
            fi
        fi
    done
    # 汇总结果
    echo ""
    echo "=================================================="
    if [ $success_count -gt 0 ] || [ $fail_count -gt 0 ]; then
        echo "🎉 安装完成！"
        echo "✅ 成功: $success_count 个"
        if [ $fail_count -gt 0 ]; then
            echo "❌ 失败: $fail_count 个"
            echo ""
            echo "失败的项目:"
            for project in $failed_projects; do
                echo "  - $project"
            done
        fi
    else
        echo "ℹ️  未找到任何包含 package.json 的项目"
    fi
    echo "=================================================="
 }
 main
@@ -0,0 +1,123 @@
 #!/bin/sh
 # 配置项
 DIST_DIR="./mini-services-dist"
 # 存储所有子进程的 PID
 pids=""
 # 清理函数：优雅关闭所有服务
 cleanup() {
    echo ""
    echo "🛑 正在关闭所有服务..."
    # 发送 SIGTERM 信号给所有子进程
    for pid in $pids; do
        if kill -0 "$pid" 2>/dev/null; then
            service_name=$(ps -p "$pid" -o comm= 2>/dev/null || echo "unknown")
            echo "   关闭进程 $pid ($service_name)..."
            kill -TERM "$pid" 2>/dev/null
        fi
    done
    # 等待所有进程退出（最多等待 5 秒）
    sleep 1
    for pid in $pids; do
        if kill -0 "$pid" 2>/dev/null; then
            # 如果还在运行，等待最多 4 秒
            timeout=4
            while [ $timeout -gt 0 ] && kill -0 "$pid" 2>/dev/null; do
                sleep 1
                timeout=$((timeout - 1))
            done
            # 如果仍然在运行，强制关闭
            if kill -0 "$pid" 2>/dev/null; then
                echo "   强制关闭进程 $pid..."
                kill -KILL "$pid" 2>/dev/null
            fi
        fi
    done
    echo "✅ 所有服务已关闭"
 }
 main() {
    echo "🚀 开始启动所有 mini services..."
    # 检查 dist 目录是否存在
    if [ ! -d "$DIST_DIR" ]; then
        echo "ℹ️  目录 $DIST_DIR 不存在"
        return
    fi
    # 查找所有 mini-service-*.js 文件
    service_files=""
    for file in "$DIST_DIR"/mini-service-*.js; do
        if [ -f "$file" ]; then
            if [ -z "$service_files" ]; then
                service_files="$file"
            else
                service_files="$service_files $file"
            fi
        fi
    done
    # 计算服务文件数量
    service_count=0
    for file in $service_files; do
        service_count=$((service_count + 1))
    done
    if [ $service_count -eq 0 ]; then
        echo "ℹ️  未找到任何 mini service 文件"
        return
    fi
    echo "📦 找到 $service_count 个服务，开始启动..."
    echo ""
    # 启动每个服务
    for file in $service_files; do
        service_name=$(basename "$file" .js | sed 's/mini-service-//')
        echo "▶️  启动服务: $service_name..."
        # 使用 bun 运行服务（后台运行）
        bun "$file" &
        pid=$!
        if [ -z "$pids" ]; then
            pids="$pid"
        else
            pids="$pids $pid"
        fi
        # 等待一小段时间检查进程是否成功启动
        sleep 0.5
        if ! kill -0 "$pid" 2>/dev/null; then
            echo "❌ $service_name 启动失败"
            # 从字符串中移除失败的 PID
            pids=$(echo "$pids" | sed "s/\b$pid\b//" | sed 's/  */ /g' | sed 's/^ *//' | sed 's/ *$//')
        else
            echo "✅ $service_name 已启动 (PID: $pid)"
        fi
    done
    # 计算运行中的服务数量
    running_count=0
    for pid in $pids; do
        if kill -0 "$pid" 2>/dev/null; then
            running_count=$((running_count + 1))
        fi
    done
    echo ""
    echo "🎉 所有服务已启动！共 $running_count 个服务正在运行"
    echo ""
    echo "💡 按 Ctrl+C 停止所有服务"
    echo ""
    # 等待所有后台进程
    wait
 }
 main
@@ -0,0 +1,126 @@
 #!/bin/sh
 set -e
 # 获取脚本所在目录
 SCRIPT_DIR="$(cd "$(dirname "$0")" && pwd)"
 BUILD_DIR="$SCRIPT_DIR"
 # 存储所有子进程的 PID
 pids=""
 # 清理函数：优雅关闭所有服务
 cleanup() {
    echo ""
    echo "🛑 正在关闭所有服务..."
    # 发送 SIGTERM 信号给所有子进程
    for pid in $pids; do
        if kill -0 "$pid" 2>/dev/null; then
            service_name=$(ps -p "$pid" -o comm= 2>/dev/null || echo "unknown")
            echo "   关闭进程 $pid ($service_name)..."
            kill -TERM "$pid" 2>/dev/null
        fi
    done
    # 等待所有进程退出（最多等待 5 秒）
    sleep 1
    for pid in $pids; do
        if kill -0 "$pid" 2>/dev/null; then
            # 如果还在运行，等待最多 4 秒
            timeout=4
            while [ $timeout -gt 0 ] && kill -0 "$pid" 2>/dev/null; do
                sleep 1
                timeout=$((timeout - 1))
            done
            # 如果仍然在运行，强制关闭
            if kill -0 "$pid" 2>/dev/null; then
                echo "   强制关闭进程 $pid..."
                kill -KILL "$pid" 2>/dev/null
            fi
        fi
    done
    echo "✅ 所有服务已关闭"
    exit 0
 }
 echo "🚀 开始启动所有服务..."
 echo ""
 # 切换到构建目录
 cd "$BUILD_DIR" || exit 1
 ls -lah
 # 初始化数据库（如果存在）
 if [ -d "./next-service-dist/db" ] && [ "$(ls -A ./next-service-dist/db 2>/dev/null)" ] && [ -d "/db" ]; then
    echo "🗄️  初始化数据库从 ./next-service-dist/db 到 /db..."
    cp -r ./next-service-dist/db/* /db/ 2>/dev/null || echo "  ⚠️  无法复制到 /db，跳过数据库初始化"
    echo "✅ 数据库初始化完成"
 fi
 # 启动 Next.js 服务器
 if [ -f "./next-service-dist/server.js" ]; then
    echo "🚀 启动 Next.js 服务器..."
    cd next-service-dist/ || exit 1
    # 设置环境变量
    export NODE_ENV=production
    export PORT=${PORT:-3000}
    export HOSTNAME=${HOSTNAME:-0.0.0.0}
    # 后台启动 Next.js
    bun server.js &
    NEXT_PID=$!
    pids="$NEXT_PID"
    # 等待一小段时间检查进程是否成功启动
    sleep 1
    if ! kill -0 "$NEXT_PID" 2>/dev/null; then
        echo "❌ Next.js 服务器启动失败"
        exit 1
    else
        echo "✅ Next.js 服务器已启动 (PID: $NEXT_PID, Port: $PORT)"
    fi
    cd ../
 else
    echo "⚠️  未找到 Next.js 服务器文件: ./next-service-dist/server.js"
 fi
 # 启动 mini-services
 if [ -f "./mini-services-start.sh" ]; then
    echo "🚀 启动 mini-services..."
    # 运行启动脚本（从根目录运行，脚本内部会处理 mini-services-dist 目录）
    sh ./mini-services-start.sh &
    MINI_PID=$!
    pids="$pids $MINI_PID"
    # 等待一小段时间检查进程是否成功启动
    sleep 1
    if ! kill -0 "$MINI_PID" 2>/dev/null; then
        echo "⚠️  mini-services 可能启动失败，但继续运行..."
    else
        echo "✅ mini-services 已启动 (PID: $MINI_PID)"
    fi
 elif [ -d "./mini-services-dist" ]; then
    echo "⚠️  未找到 mini-services 启动脚本，但目录存在"
 else
    echo "ℹ️  mini-services 目录不存在，跳过"
 fi
 # 启动 Caddy（如果存在 Caddyfile）
 echo "🚀 启动 Caddy..."
 # Caddy 作为前台进程运行（主进程）
 echo "✅ Caddy 已启动（前台运行）"
 echo ""
 echo "🎉 所有服务已启动！"
 echo ""
 echo "💡 按 Ctrl+C 停止所有服务"
 echo ""
 # Caddy 作为主进程运行
 exec caddy run --config Caddyfile --adapter caddyfile
@@ -1,96 +1,367 @@
-# Mana Loop — Agent Guide
+# Mana Loop - Project Architecture Guide
-Browser incremental/idle game. Next.js 16 + Zustand, no backend.
+This document provides a comprehensive overview of the project architecture for AI agents working on this codebase.
-## 🔑 Git
+---
 ## 🔑 Git Credentials (SAVE THESE)
 **Repository:** `git@gitea.tailf367e3.ts.net:Anexim/Mana-Loop.git`
 **HTTPS URL with credentials:**
 ```
-https://n8n-gitea:tkF9HFgxL2k4cmT@gitea.tailf367e3.ts.net/Anexim/Mana-Loop.git
+https://zhipu:5LlnutmdsC2WirDwWgnZuRH7@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 "n8n-gitea"
+git config --global user.name "zhipu"
-git config --global user.email "n8n-gitea@anexim.local"
+git config --global user.email "zhipu@local.local"
 ```
-## Workflow
+---
-```bash
+## ⚠️ MANDATORY GIT WORKFLOW - MUST BE FOLLOWED
-cd /home/user/repos/Mana-Loop && git pull origin master
+
-# ... work ...
+**Before starting ANY work, you MUST:**
-git add -A && git commit -m "type: desc" && git push origin master
+
 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 (~1700 lines, single page application)
 │   ├── 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    # Main action buttons (Meditate, Climb, Study, etc.)
 │       ├── 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
 │           ├── index.ts         # Tab component exports
 │           ├── CraftingTab.tsx  # Enchantment crafting UI
 │           ├── LabTab.tsx       # Skill upgrade and lab features
 │           ├── SpellsTab.tsx    # Spell management and equipment spells
 │           └── SpireTab.tsx     # Combat and spire climbing
 └── lib/
    ├── game/
    │   ├── store.ts              # Zustand store (~1650 lines, main state + tick logic)
    │   ├── computed-stats.ts     # Computed stats functions (extracted utilities)
    │   ├── navigation-slice.ts   # Floor navigation actions (setClimbDirection, changeFloor)
    │   ├── study-slice.ts        # Study system actions (startStudying*, cancelStudy)
    │   ├── crafting-slice.ts     # Equipment/enchantment logic
    │   ├── 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
    │   ├── 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)
 ```
-## Session Start
+## Key Systems
-1. `docs/project-structure.txt`
+### 1. State Management (`store.ts`)
 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`
-## Labels
+The game uses a Zustand store organized with **slice pattern** for better maintainability:
-`ai:todo` | `ai:in-progress` | `ai:review` | `ai:blocked` | `ai:done`
+#### Store Slices
 - **Main Store** (`store.ts`): Core state, tick logic, and main actions
 - **Navigation Slice** (`navigation-slice.ts`): Floor navigation (setClimbDirection, changeFloor)
 - **Study Slice** (`study-slice.ts`): Study system (startStudyingSkill, startStudyingSpell, cancelStudy)
 - **Crafting Slice** (`crafting-slice.ts`): Equipment/enchantment (createEquipmentInstance, startDesigningEnchantment)
 - **Familiar Slice** (`familiar-slice.ts`): Familiar system (addFamiliar, removeFamiliar)
-## Terminal Tool
+#### Computed Stats (`computed-stats.ts`)
 Extracted utility functions for stat calculations:
 - `computeMaxMana()`, `computeRegen()`, `computeEffectiveRegen()`
 - `calcDamage()`, `calcInsight()`, `getElementalBonus()`
 - `getFloorMaxHP()`, `getFloorElement()`, `getMeditationBonus()`
 - `canAffordSpellCost()`, `deductSpellCost()`
-Always pair `run_command` → `get_process_status` in same turn. Use `wait: 120` for long tasks.
+```typescript
 interface GameState {
  // Time
  day: number;
  hour: number;
  paused: boolean;
-## Sub-Agents
+  // Mana
  rawMana: number;
  elements: Record<string, ElementState>;
-Use for 3+ sequential independent calls. Zero context from parent — paste everything needed.
+  // Combat
  currentFloor: number;
  floorHP: number;
  activeSpell: string;
  castProgress: number;
-## Architecture
+  // Progression
  skills: Record<string, number>;
  spells: Record<string, SpellState>;
  skillUpgrades: Record<string, string[]>;
  skillTiers: Record<string, number>;
- **Stack:** Next.js 16, TS 5, Tailwind 4 + shadcn/ui, Zustand+persist, Vitest/Playwright, Bun
+  // Equipment
- **Active stores:** `src/lib/game/stores/{game,mana,combat,prestige,discipline,ui}Store.ts`
+  equipmentInstances: Record<string, EquipmentInstance>;
- **Legacy (migrating):** `src/lib/game/store/` and `store-modules/`
+  equippedInstances: Record<string, string | null>;
- **Crafting:** 3-step flow — Design → Prepare → Apply via `crafting-actions/`
+  enchantmentDesigns: EnchantmentDesign[];
 - **Disciplines:** `data/disciplines/` + `stores/discipline-slice.ts` + `utils/discipline-math.ts`
 - **Effects:** All stat mods through `getUnifiedEffects()` — discipline bonuses enter via `computeDisciplineEffects()`
-### Adding Effects
+  // Prestige
-1. `data/enchantment-effects.ts`
+  insight: number;
-2. `effects.ts` → `computeEquipmentEffects()`
+  prestigeUpgrades: Record<string, number>;
-3. Access via `getUnifiedEffects(state)`
+  signedPacts: number[];
-
+}
 ### 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()`
 ### Discipline Math (quick reference)
 ```
-StatBonus     = baseValue  × (XP / scalingFactor)^0.65
+
-ManaDrainPerTick = drainBase × (1 + (XP / difficultyFactor)^0.4)
+### 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
 }
 ```
 - 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)
-### Adding Spells
+**When adding new stats**:
-1. `constants/spells.ts`
+1. Add to `ComputedEffects` interface in `upgrade-effects.ts`
-2. `data/enchantment-effects.ts`
+2. Add mapping in `computeEquipmentEffects()` in `effects.ts`
-3. `EFFECT_RESEARCH_MAPPING`
+3. Apply in the relevant game logic (tick, damage calc, etc.)
-## Banned
+### 3. Combat System
-Lifesteal/healing, scroll crafting, ascension skills, LabTab, pause, mana types: `life`, `blood`, `wood`, `mental`, `force`
+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`
-## File Limit
+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%)
-400 lines max (pre-commit hook enforces).
+### 4. Crafting/Enchantment System
-## Mana Types
+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
-**Base (7):** Fire 🔥 Water 💧 Air 🌬️ Earth ⛰️ Light ☀️ Dark 🌑 Death 💀  
+Equipment has **capacity** that limits total enchantment power.
-**Utility (1):** Transference 🔗  
+
-**Compound (3):** Fire+Earth=Metal, Earth+Water=Sand, Fire+Air=Lightning  
+### 5. Skill Evolution System
-**Exotic (3):** Sand+Sand+Light=Crystal, Fire+Fire+Light=Stellar, Dark+Dark+Death=Void
+
 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`**
 ## 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 | Purpose |
 |-------|------|---------|
 | Navigation | `navigation-slice.ts` | Floor navigation (setClimbDirection, changeFloor) |
 | Study | `study-slice.ts` | Study system (startStudyingSkill, startStudyingSpell, cancelStudy) |
 | Crafting | `crafting-slice.ts` | Equipment/enchantment (createEquipmentInstance, startDesigningEnchantment) |
 | Familiar | `familiar-slice.ts` | Familiar system (addFamiliar, removeFamiliar) |
 ## File Size Guidelines
 ### Current File Sizes (After Refactoring)
 | File | Lines | Notes |
 |------|-------|-------|
 | `store.ts` | ~1650 | Core state + tick logic (reduced from 2138, 23% reduction) |
 | `page.tsx` | ~1695 | Main UI (reduced from 2554, 34% reduction) |
 | `computed-stats.ts` | ~200 | Extracted utility functions |
 | `navigation-slice.ts` | ~50 | Navigation actions |
 | `study-slice.ts` | ~100 | Study system actions |
 ### Guidelines
 - Keep `page.tsx` under 2000 lines by extracting to components (ActionButtons, ManaDisplay, etc.)
 - Keep `store.ts` under 1800 lines by extracting to slices (navigation, study, crafting, familiar)
 - Extract computed stats and utility functions to `computed-stats.ts` when >50 lines
 - Use barrel exports (`index.ts`) for clean imports
 - Follow the slice pattern for store organization (see below)
@@ -0,0 +1,313 @@
 # Mana Loop - Codebase Audit Report
 **Task ID:** 4  
 **Date:** Audit of unimplemented effects, upgrades, and missing functionality
 ---
 ## 1. Special Effects Status
 ### SPECIAL_EFFECTS Constant (upgrade-effects.ts)
 The `SPECIAL_EFFECTS` constant defines 32 special effect IDs. Here's the implementation status:
 | Effect ID | Name | Status | Notes |
 |-----------|------|--------|-------|
 | `MANA_CASCADE` | Mana Cascade | ⚠️ Partially Implemented | Defined in `computeDynamicRegen()` but that function is NOT called from store.ts |
 | `STEADY_STREAM` | Steady Stream | ⚠️ Partially Implemented | Defined in `computeDynamicRegen()` but not called from tick |
 | `MANA_TORRENT` | Mana Torrent | ⚠️ Partially Implemented | Defined in `computeDynamicRegen()` but not called |
 | `FLOW_SURGE` | Flow Surge | ❌ Missing | Not implemented anywhere |
 | `MANA_EQUILIBRIUM` | Mana Equilibrium | ❌ Missing | Not implemented |
 | `DESPERATE_WELLS` | Desperate Wells | ⚠️ Partially Implemented | Defined in `computeDynamicRegen()` but not called |
 | `MANA_ECHO` | Mana Echo | ❌ Missing | Not implemented in gatherMana() |
 | `EMERGENCY_RESERVE` | Emergency Reserve | ❌ Missing | Not implemented in startNewLoop() |
 | `BATTLE_FURY` | Battle Fury | ⚠️ Partially Implemented | In `computeDynamicDamage()` but function not called |
 | `ARMOR_PIERCE` | Armor Pierce | ❌ Missing | Floor defense not implemented |
 | `OVERPOWER` | Overpower | ✅ Implemented | store.ts line 627 |
 | `BERSERKER` | Berserker | ✅ Implemented | store.ts line 632 |
 | `COMBO_MASTER` | Combo Master | ❌ Missing | Not implemented |
 | `ADRENALINE_RUSH` | Adrenaline Rush | ❌ Missing | Not implemented on enemy defeat |
 | `PERFECT_MEMORY` | Perfect Memory | ❌ Missing | Not implemented in cancel study |
 | `QUICK_MASTERY` | Quick Mastery | ❌ Missing | Not implemented |
 | `PARALLEL_STUDY` | Parallel Study | ⚠️ Partially Implemented | State exists but logic incomplete |
 | `STUDY_INSIGHT` | Study Insight | ❌ Missing | Not implemented |
 | `STUDY_MOMENTUM` | Study Momentum | ❌ Missing | Not implemented |
 | `KNOWLEDGE_ECHO` | Knowledge Echo | ❌ Missing | Not implemented |
 | `KNOWLEDGE_TRANSFER` | Knowledge Transfer | ❌ Missing | Not implemented |
 | `MENTAL_CLARITY` | Mental Clarity | ❌ Missing | Not implemented |
 | `STUDY_REFUND` | Study Refund | ❌ Missing | Not implemented |
 | `FREE_STUDY` | Free Study | ❌ Missing | Not implemented |
 | `MIND_PALACE` | Mind Palace | ❌ Missing | Not implemented |
 | `STUDY_RUSH` | Study Rush | ❌ Missing | Not implemented |
 | `CHAIN_STUDY` | Chain Study | ❌ Missing | Not implemented |
 | `ELEMENTAL_HARMONY` | Elemental Harmony | ❌ Missing | Not implemented |
 | `DEEP_STORAGE` | Deep Storage | ❌ Missing | Not implemented |
 | `DOUBLE_CRAFT` | Double Craft | ❌ Missing | Not implemented |
 | `ELEMENTAL_RESONANCE` | Elemental Resonance | ❌ Missing | Not implemented |
 | `PURE_ELEMENTS` | Pure Elements | ❌ Missing | Not implemented |
 **Summary:** 2 fully implemented, 6 partially implemented (function exists but not called), 24 not implemented.
 ---
 ## 2. Enchantment Effects Status
 ### Equipment Enchantment Effects (enchantment-effects.ts)
 The following effect types are defined:
 | Effect Type | Status | Notes |
 |-------------|--------|-------|
 | **Spell Effects** (`type: 'spell'`) | ✅ Working | Spells granted via `getSpellsFromEquipment()` |
 | **Bonus Effects** (`type: 'bonus'`) | ✅ Working | Applied in `computeEquipmentEffects()` |
 | **Multiplier Effects** (`type: 'multiplier'`) | ✅ Working | Applied in `computeEquipmentEffects()` |
 | **Special Effects** (`type: 'special'`) | ⚠️ Tracked Only | Added to `specials` Set but NOT applied in game logic |
 ### Special Enchantment Effects Not Applied:
 | Effect ID | Description | Issue |
 |-----------|-------------|-------|
 | `spellEcho10` | 10% chance cast twice | Tracked but not implemented in combat |
 | `lifesteal5` | 5% damage as mana | Tracked but not implemented in combat |
 | `overpower` | +50% damage at 80% mana | Tracked but separate from skill upgrade version |
 **Location of Issue:**
 ```typescript
 // effects.ts line 58-60
 } else if (effect.type === 'special' && effect.specialId) {
  specials.add(effect.specialId);
 }
 // Effect is tracked but never used in combat/damage calculations
 ```
 ---
 ## 3. Skill Effects Status
 ### SKILLS_DEF Analysis (constants.ts)
 Skills with direct effects that should apply per level:
 | Skill | Effect | Status |
 |-------|--------|--------|
 | `manaWell` | +100 max mana per level | ✅ Implemented |
 | `manaFlow` | +1 regen/hr per level | ✅ Implemented |
 | `elemAttune` | +50 elem mana cap | ✅ Implemented |
 | `manaOverflow` | +25% click mana | ✅ Implemented |
 | `quickLearner` | +10% study speed | ✅ Implemented |
 | `focusedMind` | -5% study cost | ✅ Implemented |
 | `meditation` | 2.5x regen after 4hrs | ✅ Implemented |
 | `knowledgeRetention` | +20% progress saved | ⚠️ Partially Implemented |
 | `enchanting` | Unlocks designs | ✅ Implemented |
 | `efficientEnchant` | -5% capacity cost | ⚠️ Not verified |
 | `disenchanting` | 20% mana recovery | ⚠️ Not verified |
 | `enchantSpeed` | -10% enchant time | ⚠️ Not verified |
 | `scrollCrafting` | Create scrolls | ❌ Not implemented |
 | `essenceRefining` | +10% effect power | ⚠️ Not verified |
 | `effCrafting` | -10% craft time | ⚠️ Not verified |
 | `fieldRepair` | +15% repair | ❌ Repair not implemented |
 | `elemCrafting` | +25% craft output | ✅ Implemented |
 | `manaTap` | +1 mana/click | ✅ Implemented |
 | `manaSurge` | +3 mana/click | ✅ Implemented |
 | `manaSpring` | +2 regen | ✅ Implemented |
 | `deepTrance` | 3x after 6hrs | ✅ Implemented |
 | `voidMeditation` | 5x after 8hrs | ✅ Implemented |
 | `insightHarvest` | +10% insight | ✅ Implemented |
 | `temporalMemory` | Keep spells | ✅ Implemented |
 | `guardianBane` | +20% vs guardians | ⚠️ Tracked but not verified |
 ---
 ## 4. Missing Implementations
 ### 4.1 Dynamic Effect Functions Not Called
 The following functions exist in `upgrade-effects.ts` but are NOT called from `store.ts`:
 ```typescript
 // upgrade-effects.ts - EXISTS but NOT USED
 export function computeDynamicRegen(
  effects: ComputedEffects,
  baseRegen: number,
  maxMana: number,
  currentMana: number,
  incursionStrength: number
 ): number { ... }
 export function computeDynamicDamage(
  effects: ComputedEffects,
  baseDamage: number,
  floorHPPct: number,
  currentMana: number,
  maxMana: number,
  consecutiveHits: number
 ): number { ... }
 ```
 **Where it should be called:**
 - `store.ts` tick() function around line 414 for regen
 - `store.ts` tick() function around line 618 for damage
 ### 4.2 Missing Combat Special Effects
 Location: `store.ts` tick() combat section (lines 510-760)
 Missing implementations:
 ```typescript
 // BATTLE_FURY - +10% damage per consecutive hit
 if (hasSpecial(effects, SPECIAL_EFFECTS.BATTLE_FURY)) {
  // Need to track consecutiveHits in state
 }
 // ARMOR_PIERCE - Ignore 10% floor defense
 // Floor defense not implemented in game
 // COMBO_MASTER - Every 5th attack deals 3x damage
 if (hasSpecial(effects, SPECIAL_EFFECTS.COMBO_MASTER)) {
  // Need to track hitCount in state
 }
 // ADRENALINE_RUSH - Restore 5% mana on kill
 // Should be added after floorHP <= 0 check
 ```
 ### 4.3 Missing Study Special Effects
 Location: `store.ts` tick() study section (lines 440-485)
 Missing implementations:
 ```typescript
 // MENTAL_CLARITY - +10% study speed when mana > 75%
 // STUDY_RUSH - First hour is 2x speed
 // STUDY_REFUND - 25% mana back on completion
 // KNOWLEDGE_ECHO - 10% instant study chance
 // STUDY_MOMENTUM - +5% speed per consecutive hour
 ```
 ### 4.4 Missing Loop/Click Effects
 Location: `store.ts` gatherMana() and startNewLoop()
 ```typescript
 // gatherMana() - MANA_ECHO
 // 10% chance to gain double mana from clicks
 if (hasSpecial(effects, SPECIAL_EFFECTS.MANA_ECHO) && Math.random() < 0.1) {
  cm *= 2;
 }
 // startNewLoop() - EMERGENCY_RESERVE
 // Keep 10% max mana when starting new loop
 if (hasSpecial(effects, SPECIAL_EFFECTS.EMERGENCY_RESERVE)) {
  newState.rawMana = maxMana * 0.1;
 }
 ```
 ### 4.5 Parallel Study Incomplete
 `parallelStudyTarget` exists in state but the logic is not fully implemented in tick():
 - State field exists (line 203)
 - No tick processing for parallel study
 - UI may show it but actual progress not processed
 ---
 ## 5. Balance Concerns
 ### 5.1 Weak Upgrades
 | Upgrade | Issue | Suggestion |
 |---------|-------|------------|
 | `manaThreshold` | +20% mana for -10% regen is a net negative early | Change to +30% mana for -5% regen |
 | `manaOverflow` | +25% click mana at 5 levels is only +5%/level | Increase to +10% per level |
 | `fieldRepair` | Repair system not implemented | Remove or implement repair |
 | `scrollCrafting` | Scroll system not implemented | Remove or implement scrolls |
 ### 5.2 Tier Scaling Issues
 From `skill-evolution.ts`, tier multipliers are 10x per tier:
 - Tier 1: multiplier 1
 - Tier 2: multiplier 10
 - Tier 3: multiplier 100
 - Tier 4: multiplier 1000
 - Tier 5: multiplier 10000
 This creates massive power jumps that may trivialize content when tiering up.
 ### 5.3 Special Effect Research Costs
 Research skills for effects are expensive but effects may not be implemented:
 - `researchSpecialEffects` costs 500 mana + 10 hours study
 - Effects like `spellEcho10` are tracked but not applied
 - Player invests resources for non-functional upgrades
 ---
 ## 6. Critical Issues
 ### 6.1 computeDynamicRegen Not Used
 **File:** `computed-stats.ts` lines 210-225
 The function exists but only applies incursion penalty. It should call the more comprehensive `computeDynamicRegen` from `upgrade-effects.ts` that handles:
 - Mana Cascade
 - Mana Torrent
 - Desperate Wells
 - Steady Stream
 ### 6.2 No Consecutive Hit Tracking
 `BATTLE_FURY` and `COMBO_MASTER` require tracking consecutive hits, but this state doesn't exist. Need:
 ```typescript
 // In GameState
 consecutiveHits: number;
 totalHitsThisLoop: number;
 ```
 ### 6.3 Enchantment Special Effects Not Applied
 The `specials` Set is populated but never checked in combat for enchantment-specific effects like:
 - `lifesteal5`
 - `spellEcho10`
 ---
 ## 7. Recommendations
 ### Priority 1 - Core Effects
 1. Call `computeDynamicRegen()` from tick() instead of inline calculation
 2. Call `computeDynamicDamage()` from combat section
 3. Implement MANA_ECHO in gatherMana()
 4. Implement EMERGENCY_RESERVE in startNewLoop()
 ### Priority 2 - Combat Effects
 1. Add `consecutiveHits` to GameState
 2. Implement BATTLE_FURY damage scaling
 3. Implement COMBO_MASTER every 5th hit
 4. Implement ADRENALINE_RUSH on kill
 ### Priority 3 - Study Effects
 1. Implement MENTAL_CLARITY conditional speed
 2. Implement STUDY_RUSH first hour bonus
 3. Implement STUDY_REFUND on completion
 4. Implement KNOWLEDGE_ECHO instant chance
 ### Priority 4 - Missing Systems
 1. Implement or remove `scrollCrafting` skill
 2. Implement or remove `fieldRepair` skill
 3. Complete parallel study tick processing
 4. Implement floor defense for ARMOR_PIERCE
 ---
 ## 8. Files Affected
 | File | Changes Needed |
 |------|----------------|
 | `src/lib/game/store.ts` | Call dynamic effect functions, implement specials |
 | `src/lib/game/computed-stats.ts` | Integrate with upgrade-effects dynamic functions |
 | `src/lib/game/types.ts` | Add consecutiveHits to GameState |
 | `src/lib/game/skill-evolution.ts` | Consider removing unimplementable upgrades |
 ---
 **End of Audit Report**
@@ -1,20 +1,66 @@
-FROM node:20-alpine AS base
+# Mana Loop - Next.js Game Docker Image
 FROM node:20-alpine AS builder
 WORKDIR /app
-RUN apk add --no-cache libc6-compat openssl
+
-RUN npm install -g bun
+# 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 source
+
 # Copy the rest of the application
 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
-RUN bun run build
+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
 EXPOSE 3000
 ENV PORT=3000
-ENV HOSTNAME=0.0.0.0
+ENV HOSTNAME="0.0.0.0"
-HEALTHCHECK --interval=30s --timeout=10s --start-period=60s --retries=3 \
+
 # Health check
 HEALTHCHECK --interval=30s --timeout=10s --start-period=5s --retries=3 \
  CMD wget --no-verbose --tries=1 --spider http://localhost:3000 || exit 1
-CMD ["bun", "run", "start"]
+
 # Start the server (running as root)
 CMD ["node", "server.js"]
@@ -1,126 +1,85 @@
 # Mana Loop
-<p align="center">
+An incremental/idle game about climbing a magical spire, mastering skills, and uncovering the secrets of an ancient tower.
  <img src="public/logo.svg" alt="Mana Loop Logo" width="200" />
  <br />
  <em>An incremental/idle game about climbing a magical spire, mastering skills, and uncovering ancient secrets.</em>
 </p>
 <p align="center">
  <a href="https://gitea.tailf367e3.ts.net/Anexim/Mana-Loop">Repository</a> ·
  <a href="#getting-started">Getting Started</a> ·
  <a href="#game-systems">Game Systems</a> ·
  <a href="#contributing">Contributing</a> ·
  <a href="#deployment">Deployment</a>
 </p>
 <p align="center">
  <img src="https://img.shields.io/badge/version-0.2.0-blue" alt="Version" />
  <img src="https://img.shields.io/badge/license-MIT-green" alt="License" />
  <img src="https://img.shields.io/badge/Next.js-16.1.1-black" alt="Next.js" />
  <img src="https://img.shields.io/badge/TypeScript-5-blue" alt="TypeScript" />
  <img src="https://img.shields.io/badge/React-19-61DAFB" alt="React" />
 </p>
 ---
 ## Table of Contents
 - [Overview](#overview)
 - [Features](#features)
 - [Tech Stack](#tech-stack)
 - [Getting Started](#getting-started)
 - [Project Structure](#project-structure)
 - [Game Systems](#game-systems)
 - [Deployment](#deployment)
 - [Contributing](#contributing)
 - [Banned Content](#banned-content)
 - [License](#license)
 - [Acknowledgments](#acknowledgments)
 ---
 ## Overview
-**Mana Loop** is a browser-based incremental/idle game where players gather mana, master skills, climb a mysterious 100-floor spire, craft enchanted equipment, and summon magical golems. The game features a unique time-loop prestige system (Insight) that provides permanent progression bonuses across playthroughs.
+**Mana Loop** is a browser-based incremental game where players gather mana, study skills and spells, climb the floors of a mysterious spire, and craft enchanted equipment. The game features a prestige system (Insight) that provides permanent progression bonuses across playthroughs.
-### Core Game Loop
+### The Game Loop
-1. **Gather Mana** - Click to collect mana or let it regenerate automatically (14 total mana types)
+1. **Gather Mana** - Click to collect mana or let it regenerate automatically
-2. **Study Skills & Spells** - 20+ skills with 5-tier evolution system and milestone upgrades
+2. **Study Skills & Spells** - Spend mana to learn new abilities and unlock upgrades
-3. **Climb the Spire** - Battle through 100 procedurally-generated floors, defeat guardians, sign pacts
+3. **Climb the Spire** - Battle through floors, defeat guardians, and sign pacts for power
-4. **Craft & Enchant** - 3-stage equipment enchantment system with capacity limits
+4. **Craft Equipment** - Enchant your gear with powerful effects
-5. **Summon Golems** - Magical constructs that fight alongside you (4 base + 6 hybrid types)
+5. **Prestige** - Reset for Insight, gaining permanent bonuses
 6. **Prestige (Loop)** - Reset progress for Insight currency, gain permanent bonuses
 ---
 ## Features
-### 🔮 Mana System
+### Mana Gathering & Management
- **14 Mana Types**: 7 base elements + 1 utility + 3 compound + 3 exotic
+- Click-based mana collection with automatic regeneration
- Elemental conversion, regeneration mechanics, and meditation bonuses
+- Elemental mana system with five elements (Fire, Water, Earth, Air, Void)
- Mana types: Fire, Water, Air, Earth, Light, Dark, Death (base), Transference (utility), Metal, Sand, Lightning (compound), Crystal, Stellar, Void (exotic)
+- Mana conversion between raw and elemental forms
 - Meditation system for boosted regeneration
-### 📜 Skill & Spell System
+### Skill Progression with Tier Evolution
- 20+ skills across multiple categories (mana, study, enchanting, golemancy)
+- 20+ skills across multiple categories (mana, combat, enchanting, familiar)
 - 5-tier evolution system for each skill
- Milestone upgrades at levels 5 and 10 per tier
+- Milestone upgrades at levels 5 and 10 for each tier
 - Unique special effects unlocked through skill upgrades
-### ⚔️ Combat & Spire
+### Equipment Crafting & Enchanting
- Cast-speed based combat system
+- 3-stage enchantment process (Design → Prepare → Apply)
 - Multi-spell support from equipped weapons
 - 100-floor spire with elemental themes
 - Floor guardians with unique mechanics and pacts
 - Golem allies that deal automatic damage each tick
 ### 🛡️ Equipment & Enchanting
 - 3-stage enchantment process: Design → Prepare → Apply
 - Equipment capacity system limiting total enchantment power
- Enchantment effects: stat bonuses, multipliers, spell grants
+- Enchantment effects including stat bonuses, multipliers, and spell grants
- Disenchanting to recover mana (only in Prepare stage)
+- Disenchanting to recover mana from unwanted enchantments
 - Weapon/armor slots with 2-handed weapon support
-### 🤖 Golemancy System
+### Combat System
- Summon magical constructs (Earth, Steel, Crystal, Sand + 6 hybrid types)
+- Cast speed-based spell casting
- Golem slots unlock every 2 Fabricator levels (max 5 slots at Level 10)
+- Multi-spell support from equipped weapons
- Hybrid golems require Enchanter 5 + Fabricator 5
+- Elemental damage bonuses and effectiveness
- Golem maintenance costs and stat upgrades via skills
+- Floor guardians with unique boons and pacts
-### 🔄 Prestige (Insight)
+### Familiar System
- Reset progress for permanent Insight currency
+- Collect and train magical companions
 - Familiars provide passive bonuses and active abilities
 - Growth and evolution mechanics
 ### Floor Navigation & Guardian Battles
 - Procedurally generated spire floors
 - Elemental floor themes affecting combat
 - Guardian bosses with unique mechanics
 - Pact system for permanent power boosts
 ### Prestige System (Insight)
 - Reset progress for permanent bonuses
 - Insight upgrades across multiple categories
- Signed pacts and attunements persist through prestige
+- Signed pacts persist through prestige
 - Three attunement classes: Enchanter (Transference), Invoker (Spells), Fabricator (Golems/Equipment)
 ---
 ## Tech Stack
-| Technology | Version | Purpose |
+| Technology | Purpose |
-|------------|---------|---------|
+|------------|---------|
-| **Next.js** | ^16.1.1 | Full-stack framework (App Router) |
+| **Next.js 16** | Full-stack framework with App Router |
-| **React** | ^19.0.0 | UI library |
+| **TypeScript 5** | Type-safe development |
-| **TypeScript** | ^5 | Type-safe development |
+| **Tailwind CSS 4** | Utility-first styling |
-| **Tailwind CSS** | ^4 | Utility-first styling |
+| **shadcn/ui** | Reusable UI components |
-| **shadcn/ui** | Radix-based | Reusable UI components |
+| **Zustand** | Client state management with persistence |
-| **Zustand** | ^5.0.6 | Client state management (with persist) |
+| **Prisma ORM** | Database abstraction (SQLite) |
-| **Prisma ORM** | ^6.11.1 | Database abstraction (SQLite) |
+| **Bun** | JavaScript runtime and package manager |
 | **Bun** | Latest | JavaScript runtime & package manager |
 | **Vitest** | ^4.1.2 | Unit testing framework |
 | **ESLint** | ^9 | Code linting |
 | **@tanstack/react-query** | ^5.82.0 | Data fetching/caching |
 | **Framer Motion** | ^12.23.2 | Animation library |
 ---
 ## Getting Started
 ### Prerequisites
- **Bun** runtime (recommended) or Node.js 18+
+
- **SQLite** (for local development, included with Prisma)
+- **Node.js** 18+ or **Bun** runtime
- Git
+- **npm**, **yarn**, or **bun** package manager
 ### Installation
@@ -129,10 +88,9 @@
 git clone git@gitea.tailf367e3.ts.net:Anexim/Mana-Loop.git
 cd Mana-Loop
-# Install dependencies (using Bun - recommended)
+# Install dependencies
 bun install
-
+# or
 # Or using npm
 npm install
 # Set up the database
@@ -144,7 +102,7 @@ npm run db:push
 ### Development
 ```bash
-# Start the development server (runs on port 3000)
+# Start the development server
 bun run dev
 # or
 npm run dev
@@ -152,152 +110,117 @@ npm run dev
 The game will be available at `http://localhost:3000`.
-### Available Scripts
+### Other Commands
-| Script | Description |
+```bash
-|--------|-------------|
+# Run linting
-| `dev` | Start Next.js development server with logging |
+bun run lint
-| `build` | Build for production (outputs to `.next/standalone`) |
+
-| `start` | Start production server (requires build first) |
+# Build for production
-| `lint` | Run ESLint |
+bun run build
-| `test` | Run Vitest tests |
+
-| `test:coverage` | Run tests with coverage report |
+# Start production server
-| `db:push` | Push Prisma schema to database |
+bun run start
-| `db:generate` | Generate Prisma client |
+```
 | `db:migrate` | Run database migrations |
 | `db:reset` | Reset database |
 ---
 ## Project Structure
 ```
-Mana-Loop/
+src/
-├── src/                        # Application source code
+├── app/
-│   ├── app/                    # Next.js App Router
+│   ├── page.tsx          # Main game UI (single-page application)
-│   │   ├── layout.tsx          # Root layout (metadata, fonts, providers)
+│   ├── layout.tsx        # Root layout with providers
-│   │   ├── page.tsx            # Main game UI (~583 lines)
+│   └── api/              # API routes
-│   │   ├── globals.css         # Global styles
+├── components/
-│   │   └── api/                # API routes (minimal)
+│   ├── ui/               # shadcn/ui components
-│   ├── components/             # React components
+│   └── game/             # Game-specific components
-│   │   ├── ui/                 # shadcn/ui components (20+ components)
+│       ├── tabs/         # Tab-based UI components
-│   │   └── game/               # Game-specific components
+│       │   ├── CraftingTab.tsx
-│   │       ├── tabs/           # Tab components (SpireTab, SkillsTab, etc.)
+│       │   ├── LabTab.tsx
-│   │       ├── ManaDisplay.tsx, ActionButtons.tsx, TimeDisplay.tsx
+│       │   ├── SpellsTab.tsx
-│   │       └── crafting/, debug/, shared/, stats/ subdirectories
+│       │   ├── SpireTab.tsx
-│   ├── hooks/                  # Custom React hooks (use-mobile, use-toast)
+│       │   └── FamiliarTab.tsx
-│   ├── lib/                    # Utility libraries
+│       ├── ManaDisplay.tsx
-│   │   ├── game/               # Core game logic
+│       ├── TimeDisplay.tsx
-│   │   │   ├── store.ts        # Main Zustand store (~2862 lines)
+│       ├── ActionButtons.tsx
-│   │   │   ├── crafting-slice.ts, study-slice.ts, navigation-slice.ts
+│       └── ...
-│   │   │   ├── effects.ts, upgrade-effects.ts
+└── lib/
-│   │   │   ├── skill-evolution.ts (~3400 lines)
+    ├── game/
-│   │   │   ├── constants/      # Game definitions (elements, spells, skills)
+    │   ├── store.ts              # Zustand store (state + actions)
-│   │   │   ├── data/           # Game data (equipment, golems, recipes)
+    │   ├── effects.ts            # Unified effect computation
-│   │   │   └── __tests__/      # Test files for game logic
+    │   ├── upgrade-effects.ts    # Skill upgrade definitions
-│   │   └── db.ts, utils.ts
+    │   ├── skill-evolution.ts    # Tier progression paths
-│   └── test/                   # Test setup
+    │   ├── constants.ts          # Game data definitions
-├── prisma/                     # Database schema and migrations
+    │   ├── computed-stats.ts     # Stat calculation functions
-│   └── schema.prisma           # SQLite schema
+    │   ├── crafting-slice.ts     # Equipment/enchantment actions
-├── public/                     # Static assets (logo.svg, robots.txt)
+    │   ├── familiar-slice.ts     # Familiar system actions
-├── docs/                       # Project documentation
+    │   ├── navigation-slice.ts   # Floor navigation actions
-│   ├── AGENTS.md               # Comprehensive architecture guide
+    │   ├── study-slice.ts        # Study system actions
-│   ├── GAME_BRIEFING.md        # Game design document
+    │   ├── types.ts              # TypeScript interfaces
-│   └── task/                   # Task tracking documentation
+    │   ├── formatting.ts         # Display formatters
-├── .next/                      # Next.js build output (generated)
+    │   ├── utils.ts              # Utility functions
-├── node_modules/               # Dependencies (generated)
+    │   └── data/
-├── Configuration Files:
+    │       ├── equipment.ts      # Equipment definitions
-│   ├── package.json            # Project metadata and scripts
+    │       ├── enchantment-effects.ts  # Enchantment catalog
-│   ├── tsconfig.json           # TypeScript configuration
+    │       ├── familiars.ts      # Familiar definitions
-│   ├── next.config.ts          # Next.js config (standalone output)
+    │       ├── crafting-recipes.ts     # Crafting recipes
-│   ├── vitest.config.ts        # Vitest test configuration
+    │       ├── achievements.ts   # Achievement definitions
-│   ├── eslint.config.mjs       # ESLint configuration
+    │       └── loot-drops.ts     # Loot drop tables
-│   ├── Dockerfile              # Docker multi-stage build
+    └── utils.ts                  # General utilities
 │   ├── docker-compose.yml      # Docker Compose setup
 │   ├── Caddyfile               # Reverse proxy configuration
 │   └── .gitea/workflows/       # Gitea Actions CI/CD pipeline
 └── README.md                   # This file
 ```
-For detailed architecture patterns and coding guidelines, see [AGENTS.md](./docs/AGENTS.md).
+For detailed architecture documentation, see [AGENTS.md](./AGENTS.md).
 ---
-## Game Systems
+## Game Systems Overview
 ### Mana System
-The core resource of the game with 14 distinct types organized in a hierarchy:
+The core resource of the game. Mana is gathered manually or automatically and used for studying skills, casting spells, and crafting.
 - **Base Elements (7)**: Fire, Water, Air, Earth, Light, Dark, Death
 - **Utility (1)**: Transference (Enchanter attunement)
 - **Compound (3)**: Metal (Fire+Earth), Sand (Earth+Water), Lightning (Fire+Air)
 - **Exotic (3)**: Crystal (Sand+Sand+Light), Stellar (Fire+Fire+Light), Void (Dark+Dark+Death)
-**Key Files**: `src/lib/game/store.ts`, `src/lib/game/constants/elements.ts`
+**Key Files:**
 - `store.ts` - Mana state and actions
 - `computed-stats.ts` - Mana calculations
-### Skill Evolution System
+### Skill System
-Each skill progresses through 5 tiers with upgrades at levels 5 and 10 per tier:
+Skills provide passive bonuses and unlock new abilities. Each skill can evolve through 5 tiers with milestone upgrades.
- **Tier 1**: Basic functionality
+
- **Tier 2-5**: Unlock new mechanics and bonuses
+**Key Files:**
- **Evolution Paths**: Defined in `src/lib/game/skill-evolution.ts` (~3400 lines)
+- `constants.ts` - Skill definitions (`SKILLS_DEF`)
 - `skill-evolution.ts` - Evolution paths and upgrades
 - `upgrade-effects.ts` - Effect computation
 ### Combat System
- Cast-speed based spell casting with DPS calculations
+Combat uses a cast-speed system where each spell has a unique cast rate. Damage is calculated with skill bonuses, elemental modifiers, and special effects.
 - Elemental damage bonuses and effectiveness
 - Multi-spell support from equipped weapons
 - Golem allies deal automatic damage each tick
-**Key Files**: `src/lib/game/store.ts` (combat tick logic), `src/lib/game/constants/spells.ts`
+**Key Files:**
 - `store.ts` - Combat tick logic
 - `constants.ts` - Spell definitions (`SPELLS_DEF`)
 - `effects.ts` - Damage calculations
-### Enchanting System
+### Crafting System
-3-stage equipment enchantment process:
+A 3-stage enchantment system for equipment. Design effects, prepare equipment, and apply enchantments within capacity limits.
 1. **Design**: Choose effects for your equipment type
 2. **Prepare**: Prepare equipment (ONLY way to disenchant existing enchantments)
 3. **Apply**: Apply designed enchantments (cannot re-enchant already enchanted gear)
-**Key Files**: `src/lib/game/crafting-slice.ts`, `src/lib/game/data/enchantment-effects.ts`
+**Key Files:**
 - `crafting-slice.ts` - Crafting actions
 - `data/equipment.ts` - Equipment types
 - `data/enchantment-effects.ts` - Available effects
-### Golemancy System
+### Familiar System
- **Base Golems**: Earth (Fabricator 2), Steel (Metal), Crystal, Sand
+Magical companions that provide bonuses and can be trained and evolved.
 - **Hybrid Golems** (Enchanter 5 + Fabricator 5): Lava, Galvanic, Obsidian, Prism, Quicksilver, Voidstone
 - **Golem Slots**: 1 slot at Fabricator Level 2, +1 every 2 levels (max 5 at Level 10)
-**Key Files**: `src/lib/game/data/golems.ts`, `src/lib/game/store.ts`
+**Key Files:**
 - `familiar-slice.ts` - Familiar actions
 - `data/familiars.ts` - Familiar definitions
-### Prestige (Insight)
+### Prestige System
-Reset progress to gain Insight currency for permanent upgrades:
+Reset progress for Insight, which provides permanent bonuses. Signed pacts persist through prestige.
 - Signed pacts persist through prestige
 - Attunement choices affect gameplay (Enchanter/Invoker/Fabricator)
 - Insight upgrades provide bonuses across all loops
---
+**Key Files:**
-
+- `store.ts` - Prestige logic
-## Deployment
+- `constants.ts` - Insight upgrades
 ### Docker Deployment
 The project includes Docker configuration for containerized deployment:
 ```bash
 # Build and run with Docker Compose
 docker-compose up -d
 # Or build manually
 docker build -t mana-loop .
 docker run -p 3000:3000 mana-loop
 ```
 ### CI/CD Pipeline
 - **Gitea Actions**: `.gitea/workflows/docker-build.yaml` automatically builds and pushes Docker images to `gitea.tailf367e3.ts.net/anexim/mana-loop:latest` on push to `master`/`main` branches
 - **Multi-platform**: Builds for linux/amd64 architecture
 - **Image Tags**: Branch name, commit SHA, "latest"
 ### Reverse Proxy
 A `Caddyfile` is included for reverse proxy setup (forwards port 81 to 3000).
 ### Production Build
 ```bash
 bun run build
 NODE_ENV=production bun .next/standalone/server.js
 ```
 ---
@@ -306,52 +229,29 @@ NODE_ENV=production bun .next/standalone/server.js
 We welcome contributions! Please follow these guidelines:
 ### Development Workflow
-1. **Pull latest changes** before starting work: `git pull origin master`
+
-2. **Create a feature branch** for your changes: `git checkout -b feature/your-feature`
+1. **Pull the latest changes** before starting work
-3. **Follow existing patterns** in the codebase (see AGENTS.md)
+2. **Create a feature branch** for your changes
-4. **Run linting** before committing: `bun run lint`
+3. **Follow existing patterns** in the codebase
-5. **Test your changes** thoroughly: `bun run test`
+4. **Run linting** before committing (`bun run lint`)
-6. **Commit and push** to your branch, then create a pull request
+5. **Test your changes** thoroughly
 ### Code Style
 - TypeScript throughout with strict typing
 - Use existing shadcn/ui components over custom implementations
- Follow the slice pattern for Zustand store actions
+- Follow the slice pattern for store actions
- Keep components focused (extract to separate files when >50 lines)
+- Keep components focused and extract to separate files when >50 lines
 - Use path aliases: `@/*` maps to `./src/*`
 ### Adding New Features
 For detailed patterns on adding new effects, skills, spells, or systems, see the comprehensive [AGENTS.md](./docs/AGENTS.md) guide, which includes:
 - Architecture overview
 - Coding patterns
 - Git workflow (mandatory pull before work, commit & push after)
 - Credentials for automation (if applicable)
---
+For detailed patterns on adding new effects, skills, spells, or systems, see [AGENTS.md](./AGENTS.md).
 ## Banned Content
 The following content has been removed from the game and should not be re-added:
 ### Banned Mechanics
 - **Lifesteal** - Player cannot heal from dealing damage
 - **Healing** - Player cannot heal themselves (floors take damage, not player)
 ### Banned Mana Types
 - **Life** - Removed (healing theme conflicts with core design)
 - **Blood** - Removed (life derivative)
 - **Wood** - Removed (life derivative)
 - **Mental** - Removed
 - **Force** - Removed
 ### Banned Systems
 - **Familiar System** - Removed in favor of Golemancy and Pact systems
 ---
 ## License
-This project is licensed under the MIT License - see the LICENSE section below for details.
+This project is licensed under the MIT License.
 ```
 MIT License
@@ -377,20 +277,8 @@ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 SOFTWARE.
 ```
 **Note**: A `LICENSE` file is not currently present in the project root. It is recommended to create one with the above MIT License text.
 ---
 ## Acknowledgments
- Built with modern web technologies (Next.js, React, TypeScript, Tailwind CSS)
+Built with love using modern web technologies. Special thanks to the open-source community for the amazing tools that make this project possible.
 - UI components from [shadcn/ui](https://ui.shadcn.com/)
 - State management with [Zustand](https://github.com/pmndrs/zustand)
 - Game icons from [Lucide React](https://lucide.dev/)
 - Special thanks to the open-source community for the amazing tools that make this project possible.
 ---
 <p align="center">
  <em>Climb the spire. Master the mana. Uncover the loop.</em>
 </p>
@@ -1,3 +0,0 @@
 [test]
 dir = "./src/test"
 preload = ["./src/test/setup.ts"]
@@ -1,847 +0,0 @@
 # Mana-Loop: Comprehensive Game Briefing Document
 **Document Version:** 2.0  
 **Updated:** Disciplines Refactor (skills system removed; disciplines replace it entirely)
 ---
 ## Table of Contents
 1. [Executive Summary](#executive-summary)
 2. [Core Game Loop](#core-game-loop)
 3. [Mana System](#mana-system)
 4. [Time & Incursion System](#time--incursion-system)
 5. [Spire & Floor System](#spire--floor-system)
 6. [Combat System](#combat-system)
 7. [Guardian & Pact System](#guardian--pact-system)
 8. [Attunement System](#attunement-system)
 9. [Discipline System](#discipline-system)
 10. [Equipment & Enchantment System](#equipment--enchantment-system)
 11. [Golemancy System](#golemancy-system)
 12. [Prestige/Loop System](#prestigeloop-system)
 13. [Achievement System](#achievement-system)
 14. [Formulas & Calculations](#formulas--calculations)
 15. [System Interactions](#system-interactions)
 16. [Code Architecture](#code-architecture)
 ---
 ## Executive Summary
 **Mana-Loop** is a browser-based incremental/idle game with a 30-day time loop mechanic. Players gather mana, practice disciplines, climb a 100-floor spire, defeat guardians, sign pacts, enchant equipment, and prestige for permanent progression.
 **Key Differentiators:**
 - 3-class Attunement system (Enchanter, Invoker, Fabricator)
 - Equipment-based spell system (spells come from enchanted gear)
 - Practice-based Discipline system — no discrete skill levels, only continuous XP growth
 - Time pressure through the incursion mechanic
 - Guardian pacts provide permanent multipliers
 **Code Architecture:** Modular stores, crafting actions, discipline data, and constants. The old skill system (study, skill tiers, milestone upgrades) has been fully removed and replaced by the Discipline system.
 ---
 ## Core Game Loop
 ### Primary Loop (Within Each Run)
 ```
 ┌─────────────────────────────────────────────────────────────┐
 │                      TIME LOOP (30 Days)                     │
 ├─────────────────────────────────────────────────────────────┤
 │  ┌─────────┐    ┌────────────┐    ┌───────────┐    ┌──────┐ │
 │  │ GATHER  │───▶│  PRACTICE  │───▶│   CLIMB   │───▶│CRAFT │ │
 │  │  MANA   │    │ DISCIPLINES│    │   SPIRE   │    │ GEAR │ │
 │  └─────────┘    └────────────┘    └───────────┘    └──────┘ │
 │       │               │                │               │    │
 │       └───────────────┴────────────────┴───────────────┘    │
 │                            │                                 │
 │                            ▼                                 │
 │  ┌─────────────────────────────────────────────────────┐   │
 │  │           DEFEAT GUARDIANS → SIGN PACTS              │   │
 │  └─────────────────────────────────────────────────────┘   │
 │                            │                                 │
 │                            ▼                                 │
 │  ┌─────────────────────────────────────────────────────┐   │
 │  │           DAY 30: LOOP ENDS → GAIN INSIGHT           │   │
 │  └─────────────────────────────────────────────────────┘   │
 └─────────────────────────────────────────────────────────────┘
 ```
 ### Game Actions
 | Action | Effect | Time Cost |
 |--------|--------|-----------|
 | **Meditate** | Regen mana with meditation bonus multiplier | Passive (auto-selected after actions) |
 | **Climb** | Progress through spire floors, cast spells | Active combat |
 | **Practice** | Run active disciplines, consuming mana each tick | Continuous |
 | **Craft** | Create/enchant equipment | Hours per stage |
 | **Convert** | Auto-convert raw mana to elements | Per tick |
 | **Design** | Create enchantment designs (limited to owned gear types) | Hours |
 | **Prepare** | Ready equipment for enchanting | Hours + mana |
 | **Enchant** | Apply enchantment to equipment | Hours + mana |
 ### Action Transitions
 - After completing Design, Prepare, Enchant, or Craft the game automatically transitions to **Meditate**
 - Action buttons are hidden when in Spire Mode
 - `currentAction` state lives in `stores/gameStore.ts`
 ---
 ## Mana System
 ### Mana Types Hierarchy
 ```
 Raw Mana (Base Resource)
    │
    ├──▶ Base Elements (7) ─────────────────────────────────────┐
    │    Fire*, Water*, Air*, Earth*, Light, Dark, Death        │
    │    *Locked at start - must be unlocked                    │
    │                                                           │
    ├──▶ Utility Element (1) ───────────────────────────────────┤
    │    Transference (Enchanter attunement - UNLOCKED at start) │
    │                                                           │
    ├──▶ Compound Elements (3) ── Created from 2 base ──────────┤
    │    Metal = Fire + Earth                                   │
    │    Sand  = Earth + Water                                  │
    │    Lightning = Fire + Air                                 │
    │                                                           │
    └──▶ Exotic Elements (3) ── Created from advanced recipes ──┤
         Crystal = Sand + Sand + Light                          │
         Stellar = Fire + Fire + Light                          │
         Void    = Dark + Dark + Death                          │
 ```
 Fire, Water, Air, and Earth are **locked at start**. Only Transference is unlocked initially.
 ### Mana Formulas
 **Maximum Raw Mana:**
 ```
 maxMana = (100 + (manaWellLevel × 100) + (prestigeManaWell × 500) + equipmentBonuses) × maxManaMultiplier
 ```
 **Maximum Elemental Mana:**
 ```
 elementMax = (10 + (elemAttuneLevel × 50) + (prestigeElemAttune × 25)) × elementCapMultiplier
 ```
 **Base Regeneration (per hour):**
 ```
 baseRegen       = 2 + (manaFlowLevel × 1) + (manaSpringLevel × 2) + (prestigeManaFlow × 0.5)
 effectiveRegen  = baseRegen × (1 - incursionStrength) × meditationMultiplier
 ```
 **Meditation Bonus:**
 ```
 Base: 1 + min(hours/4, 0.5)  →  up to 1.5× after 4 hours
 ```
 **Attunement Mana Conversion:**
 - Enchanter: Raw → Transference at 0.2/hour base (scales with level)
 - Fabricator: Raw → Earth at 0.25/hour base (scales with level)
 ### Starting Elements
 | Element | Unlocked at Start |
 |---------|-------------------|
 | Transference | ✅ Yes |
 | Fire | ❌ No |
 | Water | ❌ No |
 | Air | ❌ No |
 | Earth | ❌ No |
 | Light | ❌ No |
 | Dark | ❌ No |
 | Death | ❌ No |
 ### Mana Conversion Cost
 - **100 Raw Mana = 1 Elemental Mana** (for base elements)
 - Compound/Exotic elements are crafted, not converted
 ---
 ## Time & Incursion System
 ### Time Constants
 | Constant | Value | Description |
 |----------|-------|-------------|
 | `TICK_MS` | 200ms | Real time per game tick |
 | `HOURS_PER_TICK` | 0.04 | Game hours per tick |
 | `MAX_DAY` | 30 | Days per loop |
 | `INCURSION_START_DAY` | 20 | When incursion begins |
 ### Time Progression
 - 1 real second = 5 game hours (at 5 ticks/second)
 - 1 game day = 24 game hours = 4.8 real seconds
 - Full 30-day loop ≈ 2.4 real minutes
 ### Incursion Mechanic
 ```
 if (day < 20): incursionStrength = 0
 else:          incursionStrength = min(0.95, (totalHours / maxHours) × 0.95)
 ```
 Reduces mana regeneration by `(1 - incursionStrength)`. Starts at 0% on Day 20, reaches 95% by Day 30.
 ---
 ## Spire & Floor System
 ### Floor Generation
 **Floor Element Cycle:**
 ```javascript
 FLOOR_ELEM_CYCLE = ["fire", "water", "air", "earth", "light", "dark", "death"]
 element = FLOOR_ELEM_CYCLE[(floor - 1) % 7]
 ```
 **Floor HP Formula:**
 ```
 normalFloorHP  = floor(100 + floor × 50 + floor^1.7)
 guardianFloorHP = GUARDIANS[floor].hp  // in constants/guardians.ts
 ```
 **Guardian Floors:** 10, 20, 30, 40, 50, 60, 80, 90, 100
 ### Room Types
 | Room Type | Chance | Description |
 |-----------|--------|-------------|
 | **Combat** | Default | Single enemy, normal combat |
 | **Guardian** | Fixed | Boss floor |
 | **Swarm** | 15% | 3–6 enemies with 40% HP each |
 | **Speed** | 10% | Enemy with dodge chance (25% base + 0.5%/floor) |
 | **Puzzle** | 20% on puzzle floors | Progress-based, faster with relevant attunement |
 ### Armor Scaling
 ```javascript
 FLOOR_ARMOR_CONFIG = {
  baseChance:     0,      // No armor before floor 10
  chancePerFloor: 0.01,   // +1% chance per floor after 10
  maxArmorChance: 0.5,    // Max 50% of floors have armor
  minArmor:       0.05,   // Min 5% damage reduction
  maxArmor:       0.25    // Max 25% on non-guardians
 }
 ```
 ---
 ## Combat System
 ### Spell Casting Mechanics
 ```
 progressPerTick = HOURS_PER_TICK × spellCastSpeed × totalAttackSpeed
 ```
 Lightning spells get +30% effective cast speed.
 ### Damage Calculation
 ```
 baseDamage     = spellDamage + disciplineBonus(combatStat)
 pctBonus       = 1 + disciplineMultiplier
 pactMultiplier = product of all signed pact multipliers
 elementalBonus = getElementalBonus(spellElement, floorElement)
 finalDamage = baseDamage × pctBonus × pactMultiplier × elementalBonus
 ```
 ### Elemental Effectiveness
 | Condition | Multiplier |
 |-----------|------------|
 | Spell same element as floor | 1.25× |
 | Spell is opposite of floor element | 1.50× (Super Effective) |
 | Spell's opposite matches floor | 0.75× (Not Very Effective) |
 | Raw mana spells | 1.00× |
 **Element Opposites:**
 ```
 Fire ↔ Water    Air ↔ Earth    Light ↔ Dark
 Lightning — no opposite (has armor pierce instead)
 ```
 ### Armor & Damage Reduction
 ```
 effectiveArmor = max(0, enemyArmor - armorPierce)
 damageDealt    = damage × (1 - effectiveArmor)
 ```
 ### Critical Hits
 Critical chance and multiplier come from discipline bonuses (no fixed skill levels).
 ### Special Combat Effects
 | Effect | Description |
 |--------|-------------|
 | **Burn** | Damage over time |
 | **Freeze** | Prevents dodge |
 | **Stun** | Temporary disable |
 | **Pierce** | Ignores % armor |
 | **Chain** | Hits multiple targets |
 | **AOE** | Area damage |
 | **Buff** | Damage multiplier |
 ---
 ## Guardian & Pact System
 ### Guardian Floors & Stats
 | Floor | Guardian | Element | HP | Pact Mult | Armor | Unique Perk |
 |-------|----------|---------|-----|-----------|-------|-------------|
 | 10 | Ignis Prime | Fire | 5,000 | 1.5× | 10% | Fire spells cast 10% faster |
 | 20 | Aqua Regia | Water | 15,000 | 1.75× | 15% | Water spells +15% damage |
 | 30 | Ventus Rex | Air | 30,000 | 2.0× | 18% | Air spells 15% crit chance |
 | 40 | Terra Firma | Earth | 50,000 | 2.25× | 25% | Earth spells +25% vs guardians |
 | 50 | Lux Aeterna | Light | 80,000 | 2.5× | 20% | Light spells reveal weaknesses |
 | 60 | Umbra Mortis | Dark | 120,000 | 2.75× | 22% | Dark spells +25% vs armored |
 | 80 | Mors Ultima | Death | 250,000 | 3.25× | 25% | Death spells execute <20% HP |
 | 90 | Primordialis | Void | 400,000 | 4.0× | 30% | Void spells ignore 30% resistance |
 | 100 | The Awakened One | Stellar | 1,000,000 | 5.0× | 35% | All spells +50% dmg, 25% faster |
 ### Guardian Boons (on pact)
 | Boon Type | Effect |
 |-----------|--------|
 | `maxMana` | +Max raw mana |
 | `manaRegen` | +Regen/hour |
 | `castingSpeed` | +% cast speed |
 | `elementalDamage` | +% element damage |
 | `rawDamage` | +% all damage |
 | `critChance` | +% crit chance |
 | `critDamage` | +% crit multiplier |
 | `insightGain` | +% insight |
 ### Victory Condition
 Defeat floor 100 guardian **and** sign the pact → 3× normal insight.
 ---
 ## Attunement System
 Attunements are class-like specializations that unlock discipline pools and grant unique capabilities.
 ### The Three Attunements
 #### 1. Enchanter (Right Hand) ✅
 | Property | Value |
 |----------|-------|
 | **Slot** | Right Hand |
 | **Primary Mana** | Transference |
 | **Raw Regen** | +0.5/hour base |
 | **Conversion** | 0.2 raw→transference/hour |
 | **Unlock** | Starting attunement |
 **Disciplines Unlocked:** Enchanter discipline pool (`data/disciplines/enchanter.ts`)  
 **Capabilities:** Enchanting & disenchanting equipment
 #### 2. Invoker (Chest) ✅
 | Property | Value |
 |----------|-------|
 | **Slot** | Chest |
 | **Primary Mana** | None (gains from pacts) |
 | **Raw Regen** | +0.3/hour base |
 | **Conversion** | None |
 | **Unlock** | Defeat first guardian |
 **Disciplines Unlocked:** Invoker discipline pool (`data/disciplines/invoker.ts`)  
 **Capabilities:** Form pacts with guardians, access guardian powers
 #### 3. Fabricator (Left Hand) ✅
 | Property | Value |
 |----------|-------|
 | **Slot** | Left Hand |
 | **Primary Mana** | Earth |
 | **Raw Regen** | +0.4/hour base |
 | **Conversion** | 0.25 raw→earth/hour |
 | **Unlock** | Prove crafting worth |
 **Disciplines Unlocked:** Fabricator discipline pool (`data/disciplines/fabricator.ts`)  
 **Capabilities:** Golem crafting, gear crafting, Earth shaping
 ### Attunement Leveling
 ```javascript
 Level 2: 1,000 XP
 Level 3: 2,500 XP
 Level 4: 5,000 XP
 Level 5: 10,000 XP
 // Each level ≈ 2× previous; Max Level: 10
 regenMultiplier  = 1.5^(level - 1)
 conversionRate   = baseRate × 1.5^(level - 1)
 ```
 ---
 ## Discipline System
 Disciplines replace the old skill system entirely. There are no discrete levels or study actions — disciplines grow **continuously** through practice. The player activates a discipline and it drains mana each tick in exchange for permanent stat growth.
 ### Core Concept
 > The more you practice a discipline, the stronger its effect — but the more mana it costs to maintain.
 - **XP** accumulates each tick the discipline is active and has enough mana to drain
 - **Stat bonus** grows as a power curve of XP (never resets within a run)
 - **Mana drain** also increases with XP — mastery has a cost
 - **Perks** unlock at XP thresholds, granting bonus effects
 ### Disciplines vs Old Skills
 | Old Skill System | Discipline System |
 |-----------------|-------------------|
 | Discrete levels (1–10 per tier) | Continuous XP accumulation |
 | Mana cost paid once on study | Mana drained every tick |
 | Required hours to level up | Grows passively while active |
 | Milestone upgrades at L5/L10 | Perks unlock at XP thresholds |
 | 5-tier evolution (T1–T5) | Single continuous curve per discipline |
 ### Formulas
 **Stat Bonus (continuous):**
 ```
 StatBonus = baseValue × (XP / scalingFactor)^0.65
 ```
 **Mana Drain Per Tick:**
 ```
 ManaDrainPerTick = drainBase × (1 + (XP / difficultyFactor)^0.4)
 ```
 - `scalingFactor` controls how quickly stats grow
 - `difficultyFactor` controls how quickly drain increases
 - Higher `scalingFactor` → slower stat gain; higher `difficultyFactor` → slower drain increase
 ### Concurrent Discipline Limit
 ```
 concurrentLimit = 1 + floor(totalXP / 500)   // capped at base + 3
 ```
 Players start with 1 active discipline slot. As total XP across all disciplines grows, additional slots unlock (max 4 total).
 ### Perk Types
 | Type | Behaviour |
 |------|-----------|
 | `once` | Unlocks permanently when XP reaches `threshold` |
 | `capped` | Grants stacking bonus tiers; each tier requires another `interval` XP beyond `threshold` |
 | `infinite` | Repeating bonus — a new stack every `interval` XP past `threshold` (no cap) |
 ### Attunement Pools
 | Pool | File | Requires |
 |------|------|---------|
 | Base | `data/disciplines/base.ts` | None (all attunements) |
 | Enchanter | `data/disciplines/enchanter.ts` | Enchanter attunement |
 | Invoker | `data/disciplines/invoker.ts` | Invoker attunement |
 | Fabricator | `data/disciplines/fabricator.ts` | Fabricator attunement |
 ### Example Disciplines
 | Discipline | Attunement | Mana Type | Stat Bonus | Description |
 |------------|------------|-----------|------------|-------------|
 | Raw Mana Mastery | Base | Raw | `maxManaBonus` | More raw mana from practice |
 | Elemental Attunement | Base | Fire | `elementCap_fire` | Expanded fire capacity |
 | Lightning Surge | Invoker | Lightning | `lightningDamage` | Boosts lightning spell damage |
 | Void Echo | Invoker | Void | `voidCastSpeed` | Increases void spell cast speed |
 | Metalworking | Fabricator | Metal | `craftSpeed_metal` | Faster metal equipment crafting |
 | Crystal Shaping | Fabricator | Crystal | `durability_crystal` | More durable crystal equipment |
 | Soulforge | Enchanter | Light | `enchantPower` | Stronger enchantment effects |
 | Mana Prism | Enchanter | Light | `manaReflect` | Prismatic mana focusing |
 ### Discipline Lifecycle
 ```
 1. Player opens Disciplines tab → sees available disciplines for their attunements
 2. Player activates discipline (costs nothing up-front; requires mana type unlocked)
 3. Each game tick:
   a. ManaDrain deducted from mana pool
   b. If insufficient mana → discipline auto-pauses
   c. If sufficient mana → disc.xp += 1; stat bonuses recomputed
 4. Player can manually pause/resume disciplines
 5. On loop end, XP resets (stat bonuses are per-run, not permanent)
   — Prestige upgrades may eventually preserve some XP
 ```
 ### Discipline UI
 `src/components/game/tabs/DisciplinesTab.tsx`  
 `src/lib/game/stores/discipline-slice.ts` — Zustand store (persisted)  
 `src/lib/game/effects/discipline-effects.ts` — integrates into `getUnifiedEffects()`
 ---
 ## Equipment & Enchantment System
 ### Equipment Slots
 ```
 mainHand   - Staves (2H), Wands, Swords
 offHand    - Shields, Catalysts (blocked by 2-handed weapons)
 head       - Hoods, Hats, Helms
 body       - Robes, Armor
 hands      - Gloves, Gauntlets
 feet       - Boots, Shoes
 accessory1 - Rings, Amulets
 accessory2 - Rings, Amulets
 ```
 ### Two-Handed Weapons
 2-handed weapons (Staves) occupy both `mainHand` and `offHand`. The offhand slot is **blocked** when a 2H weapon is equipped. The UI shows a "Blocked by 2-handed weapon" label on the offhand slot.
 ### Equipment Instance Structure
 ```typescript
 interface EquipmentInstance {
  instanceId:     string;
  typeId:         string;
  name:           string;
  enchantments:   AppliedEnchantment[];
  usedCapacity:   number;
  totalCapacity:  number;
  rarity:         'common' | 'uncommon' | 'rare' | 'epic' | 'legendary' | 'mythic';
  quality:        number;  // 0–100
 }
 ```
 ### Enchantment Process (3 Stages)
 #### Stage 1: Design
 - Select effects from unlocked pool (`data/enchantment-effects.ts`)
 - Limited to owned gear types
 - Time: 1h base + 0.5h per effect stack
 - Implemented in `crafting-actions/design-actions.ts`
 #### Stage 2: Prepare
 - Mana cost: `capacity × 10`
 - Time: `2h + 1h per 50 capacity`
 - Auto-transitions to Meditate on complete
 - Implemented in `crafting-actions/preparation-actions.ts`
 #### Stage 3: Apply
 - Mana per hour: `20 + 5 per effect stack`
 - Time: `2h + 1h per effect stack`
 - Grants Enchanter XP: 1 XP per 10 capacity
 - Auto-transitions to Meditate on complete
 - Implemented in `crafting-actions/application-actions.ts`
 ### Enchantment Effect Categories
 | Category | Description | Equipment Types |
 |----------|-------------|-----------------|
 | **Spell** | Grants spell ability | Casters only |
 | **Mana** | Max/regen/click bonuses | Casters, Catalysts, Head, Body, Accessories |
 | **Combat** | Damage, crit, speed | Casters, Hands |
 | **Utility** | Meditation, insight | Most equipment |
 | **Special** | Unique effects | Various |
 | **Elemental** | Weapon enchantments | Swords, Casters |
 ### Starting Equipment
 | Slot | Item | Enchantment | Capacity |
 |------|------|-------------|----------|
 | Main Hand | Basic Staff | Mana Bolt spell | 50/50 |
 | Body | Civilian Shirt | None | 0/30 |
 | Feet | Civilian Shoes | None | 0/15 |
 ---
 ## Golemancy System
 ### Golem Slots
 ```
 Fabricator Level 2: 1 slot
 Fabricator Level 4: 2 slots
 Fabricator Level 6: 3 slots
 Fabricator Level 8: 4 slots
 Fabricator Level 10: 5 slots
 slots = floor(fabricatorLevel / 2)
 ```
 ### Golem Types
 #### Base Golems
 | Golem | Element | Damage | Speed | Armor Pierce | Unlock |
 |-------|---------|--------|-------|--------------|--------|
 | Earth Golem | Earth | 8 | 1.5/h | 15% | Fabricator 2 |
 #### Elemental Variants
 | Golem | Element | Damage | Speed | Pierce | Unlock |
 |-------|---------|--------|-------|--------|--------|
 | Steel Golem | Metal | 12 | 1.2/h | 35% | Metal mana unlocked |
 | Crystal Golem | Crystal | 18 | 1.0/h | 25% | Crystal mana unlocked |
 | Sand Golem | Sand | 6 | 2.0/h | 10% | Sand mana unlocked |
 #### Advanced Hybrid Golems (Enchanter 5 + Fabricator 5)
 | Golem | Elements | Damage | Speed | Pierce | Special |
 |-------|----------|--------|-------|--------|---------|
 | Lava Golem | Earth + Fire | 15 | 1.0/h | 20% | AOE 2 |
 | Galvanic Golem | Metal + Lightning | 10 | 3.5/h | 45% | Fast |
 | Obsidian Golem | Earth + Dark | 25 | 0.8/h | 50% | High damage |
 | Prism Golem | Crystal + Light | 20 | 1.5/h | 35% | AOE 3 |
 | Quicksilver Golem | Metal + Water | 8 | 4.0/h | 30% | Very fast |
 | Voidstone Golem | Earth + Void | 40 | 0.6/h | 60% | Ultimate |
 ### Golem Combat
 ```
 progressPerTick = HOURS_PER_TICK × attackSpeed × efficiencyBonus
 damage          = baseDamage × (1 + golemMasteryBonus)   // bonus from discipline
 ```
 ---
 ## Prestige/Loop System
 ### Loop End Conditions
 | Condition | Result |
 |-----------|--------|
 | Day 30 reached | Loop ends, gain insight |
 | Floor 100 + Pact 100 signed | Victory! 3× insight |
 ### Insight Formula
 ```
 baseInsight  = floor(maxFloorReached × 15 + totalManaGathered / 500 + signedPacts.length × 150)
 finalInsight = floor(baseInsight × (1 + insightAmpLevel × 0.25) × disciplineBonus)
 ```
 ### Prestige Upgrades
 | Upgrade | Max | Cost | Effect |
 |---------|-----|------|--------|
 | Mana Well | 5 | 500 | +500 starting max mana |
 | Mana Flow | 10 | 750 | +0.5 permanent regen |
 | Deep Memory | 5 | 1000 | +1 memory slot |
 | Insight Amp | 4 | 1500 | +25% insight gain |
 | Spire Key | 5 | 4000 | Start at floor +2 |
 | Temporal Echo | 5 | 3000 | +10% mana generation |
 | Steady Hand | 5 | 1200 | -15% durability loss |
 | Ancient Knowledge | 5 | 2000 | Start with blueprint |
 | Elemental Attune | 10 | 600 | +25 element cap |
 | Spell Memory | 3 | 2500 | Start with random spell |
 | Guardian Pact | 5 | 3500 | +10% pact multiplier |
 | Quick Start | 3 | 400 | +100 starting mana |
 | Elem. Start | 3 | 800 | +5 each unlocked element |
 ### Memory System
 - **Base slots:** 3  
 - **Additional:** +1 per Deep Memory prestige level  
 - **Memories:** Spells preserved across loops
 ---
 ## Achievement System
 ### Categories
 | Category | Description |
 |----------|-------------|
 | `mana` | Mana gathering milestones |
 | `combat` | Combat achievements |
 | `progression` | Floor/guardian progression |
 | `crafting` | Equipment and enchanting |
 | `prestige` | Loop and insight milestones |
 ### Reward Types
 | Reward | Effect |
 |--------|--------|
 | `insight` | One-time insight bonus |
 | `manaBonus` | Permanent max mana |
 | `damageBonus` | Permanent damage increase |
 | `regenBonus` | Permanent regen increase |
 | `title` | Cosmetic title |
 | `unlockEffect` | Unlocks enchantment effect |
 ---
 ## Formulas & Calculations
 ### Damage Calculation (Complete)
 ```javascript
 function calcDamage(state, spellId, floorElement) {
  const spell = SPELLS_DEF[spellId];        // constants/spells.ts
  // Base damage + discipline bonuses
  let damage = spell.dmg + disciplineBonus('combatDamage');
  // Discipline multiplier bonus
  damage *= 1 + disciplineBonus('damagePct');
  // Guardian bane (vs guardians only)
  if (isGuardian) {
    damage *= 1 + disciplineBonus('guardianBane');
  }
  // Pact multiplier
  damage *= state.signedPacts.reduce((m, f) => m * GUARDIANS[f].pact, 1);
  // Elemental effectiveness
  damage *= getElementalBonus(spell.elem, floorElement);
  // Critical hit (from discipline crit bonus)
  const critChance = disciplineBonus('critChance');
  if (Math.random() < critChance) damage *= 1.5;
  // Equipment effects
  damage *= effects.baseDamageMultiplier;
  damage += effects.baseDamageBonus;
  // Armor reduction
  const effectiveArmor = Math.max(0, enemyArmor - armorPierce);
  damage *= (1 - effectiveArmor);
  return Math.floor(damage);
 }
 ```
 ### DPS Calculation
 ```javascript
 dps = (damage × castSpeed × attackSpeedMultiplier) / hour
 ```
 ---
 ## System Interactions
 ### Primary Interaction Map
 ```
 ┌─────────────────────────────────────────────────────────────────────────┐
 │                         CORE SYSTEM INTERACTIONS                         │
 ├─────────────────────────────────────────────────────────────────────────┤
 │                                                                          │
 │  ┌──────────┐        ┌────────────┐        ┌──────────┐                │
 │  │   MANA   │───────▶│ DISCIPLINES│───────▶│  COMBAT  │                │
 │  └──────────┘        └────────────┘        └──────────┘                │
 │       │                    │                    │                       │
 │       │                    │                    │                       │
 │       ▼                    ▼                    ▼                       │
 │  ┌──────────┐        ┌──────────┐         ┌──────────┐                │
 │  │ATTUNEMENT│───────▶│ENCHANTING│────────▶│  SPIRE   │                │
 │  └──────────┘        └──────────┘         └──────────┘                │
 │       │                    │                    │                       │
 │       │                    │                    │                       │
 │       ▼                    ▼                    ▼                       │
 │  ┌──────────┐        ┌──────────┐         ┌──────────┐                │
 │  │GOLEMANCY │        │EQUIPMENT │────────▶│ GUARDIAN │                │
 │  └──────────┘        └──────────┘         └──────────┘                │
 │                                                 │                       │
 │                                                 ▼                       │
 │                                          ┌──────────┐                  │
 │                                          │   PACT   │                  │
 │                                          └──────────┘                  │
 │                                                 │                       │
 │                                                 ▼                       │
 │                                          ┌──────────┐                  │
 │                                          │ PRESTIGE │                  │
 │                                          └──────────┘                  │
 └─────────────────────────────────────────────────────────────────────────┘
 ```
 ### Key System Dependencies
 | System | Depends On | Unlocks/Enables |
 |--------|------------|-----------------|
 | **Disciplines** | Mana (drain cost), Attunement (pool access) | All combat/crafting stat bonuses |
 | **Enchanting** | Enchanter attunement, Enchanter disciplines | Equipment spells, bonuses |
 | **Golemancy** | Fabricator attunement, Earth mana | Additional combat damage |
 | **Pacts** | Guardian defeat | Permanent multipliers, boons |
 | **Prestige** | Loop completion | Permanent upgrades, memories |
 | **Equipment** | Crafting/Blueprints | Spell access, stat bonuses |
 ### Progression Gates
 1. **Early Game (Floors 1–10):** Mana gathering and regen, base disciplines, starting equipment
 2. **Mid Game (Floors 10–40):** First guardian pacts, attunement unlocking, attunement discipline pools, equipment enchanting, Golemancy
 3. **Late Game (Floors 40–80):** Compound/exotic elements, hybrid golems, advanced discipline perks, advanced enchantments
 4. **End Game (Floors 80–100):** Void/Stellar/Crystal spells, ultimate golems, victory preparation
 ---
 ## Code Architecture
 ### Modular Structure Overview
 #### Store Architecture
 **Active Stores (`src/lib/game/stores/`):**
 - **gameStore.ts** — Core state, tick logic, main actions
 - **manaStore.ts** — Mana gathering, elements, conversion
 - **combatStore.ts** — Combat system, spells, floor progression
 - **prestigeStore.ts** — Prestige/loop system, insight, upgrades
 - **discipline-slice.ts** — Discipline activation, XP ticking, perk evaluation
 - **uiStore.ts** — UI state, modals, debug settings
 **Legacy Store (Migration in Progress):**
 - **store.ts** — Legacy monolithic store (reduced)
 - **store/** — Legacy store slices being migrated to `stores/`
 - **store-modules/** — Legacy store utilities
 #### Discipline System (`src/lib/game/`)
 - `data/disciplines/` — Per-attunement discipline definitions
 - `types/disciplines.ts` — `DisciplineDefinition`, `DisciplineState`, perk types
 - `utils/discipline-math.ts` — `calculateStatBonus`, `calculateManaDrain`, perk helpers
 - `effects/discipline-effects.ts` — `computeDisciplineEffects()` → feeds `getUnifiedEffects()`
 - `stores/discipline-slice.ts` — Zustand store for active discipline state
 #### Crafting System (`src/lib/game/crafting-actions/`)
 - Modular action files for each crafting stage
 - Design, preparation, application, equipment, disenchant actions
 #### Constants (`src/lib/game/constants/`)
 - Domain-specific constant files: elements, guardians, spells, rooms, prestige
 - Barrel exports via `constants/index.ts`
 #### Game Data (`src/lib/game/data/`)
 - Enchantment effects, equipment types, golems, disciplines, achievements, loot tables
 - Organized by domain for easy navigation
 ### File Size Guidelines
 All files kept under **400 lines** (enforced by pre-commit hook).
 ---
 ## Appendix: Removed Systems
 The following systems no longer exist and should not be re-introduced:
 | Removed | Replacement |
 |---------|-------------|
 | Skill System (study, tiers T1–T5, milestone upgrades) | Discipline System |
 | `skillStore.ts` | `discipline-slice.ts` |
 | `skill-evolution-modules/` | `data/disciplines/` + `discipline-math.ts` |
 | `docs/skills.md` | This document (Discipline System section) |
 | `docs/strategy/` | Fully implemented; folder removed |
 | Ascension skills | Deleted (no replacement) |
 | Scroll crafting | Deleted (violates no-instant-finishing pillar) |
 | Lifesteal/healing | Banned permanently |
 ---
 *Document Version: 2.0 — Disciplines Refactor*  
 *End of Game Briefing Document*
@@ -1,14 +0,0 @@
 # 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)
@@ -1,624 +0,0 @@
 {
  "_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"
    ]
  }
 }
@@ -1,373 +0,0 @@
 Mana-Loop/
 ├── .gitea/
 │   └── workflows/
 │       └── docker-build.yaml
 ├── .husky/
 │   ├── scripts/
 │   │   ├── check-file-size.js
 │   │   ├── generate-dependency-graph.js
 │   │   └── generate-project-tree.js
 │   ├── post-merge
 │   └── pre-commit
 ├── docs/
 │   ├── GAME_BRIEFING.md
 │   ├── circular-deps.txt
 │   ├── dependency-graph.json
 │   └── project-structure.txt
 ├── e2e/
 ├── playwright-report/
 │   ├── data/
 │   │   ├── 1513ea5b9ea5985996f67ca36f2bc4d34add51f1.webm
 │   │   ├── 23eb0c541b68af33d962c3ac20ba74eb9ba477b3.md
 │   │   ├── 25af666b2659e25b596f1eb58ca5629f38f0fa74.png
 │   │   ├── 294ed85dfd5fbd79486f5274129a1d8b83cfa676.png
 │   │   ├── 37c584c77b029af648d58a063f9724538662c6d0.webm
 │   │   ├── 4d1229974e5326e2351c32921095bff6e989005e.png
 │   │   ├── 4f22caa1a2b454f813b4c68c510a2ef0b340a248.md
 │   │   ├── 6408809a17a0a92b06e5cc75fcee95e9778138c4.md
 │   │   ├── 66a1f85e1e6a655dfb90f10bd1a60887cffa87da.md
 │   │   ├── 6b97a6c84cfda4c717249f240d0a80e1b195498a.png
 │   │   ├── 6c1c7d873c0c5262ffca286974649ec3bf1eb3f4.md
 │   │   ├── 72280c2048aa77a6b58afc7bba8f9db3dfd1c68b.webm
 │   │   ├── 8035d8abad1bfb2166374e25b55f52324fef1275.png
 │   │   ├── 8396039272c615989307eaf4113a77b0d77cfbdd.webm
 │   │   ├── a69b7491fd34ee0580bc0153a90dc146b509aac3.md
 │   │   ├── bb3c9d51cafcb654c796b093c72c5b702f52faed.webm
 │   │   ├── bee318a3f485bd3e98088a4735e02181585e431b.png
 │   │   ├── c0f44af041cac0f5d5efaec8a9a9e5d165c8d26a.png
 │   │   ├── cf49b56fde3bacf27d842ef4bfeed4887d97f01e.webm
 │   │   ├── dbea283cbcf6aaed195161609c68ab7de0c6adfa.png
 │   │   ├── dc2d9fe97c08dd61f42a27ead0829c2d74322ccc.webm
 │   │   ├── e3d1abb209771785e7247c38fd372d8fd61b7ea4.md
 │   │   ├── e59720b989841926cc856d6a00be0a6f8365cf49.webm
 │   │   └── f5ba77f8b20c452bd2c31718b44897276882a465.md
 │   └── index.html
 ├── public/
 │   ├── fonts/
 │   │   ├── GeistMonoVF.woff
 │   │   └── GeistVF.woff
 │   ├── logo.svg
 │   └── robots.txt
 ├── src/
 │   ├── app/
 │   │   ├── components/
 │   │   │   ├── GameOverScreen.tsx
 │   │   │   ├── GrimoireTab.tsx
 │   │   │   └── LeftPanel.tsx
 │   │   ├── globals.css
 │   │   ├── layout.tsx
 │   │   └── page.tsx
 │   ├── components/
 │   │   ├── game/
 │   │   │   ├── LootInventory/
 │   │   │   │   ├── BlueprintsSection.tsx
 │   │   │   │   ├── EquipmentItem.tsx
 │   │   │   │   ├── EssenceItem.tsx
 │   │   │   │   ├── MaterialItem.tsx
 │   │   │   │   ├── icons.ts
 │   │   │   │   └── types.ts
 │   │   │   ├── crafting/
 │   │   │   │   ├── EnchantmentDesigner/
 │   │   │   │   │   ├── DesignForm.tsx
 │   │   │   │   │   ├── EffectSelector.tsx
 │   │   │   │   │   ├── EquipmentTypeSelector.tsx
 │   │   │   │   │   ├── SavedDesigns.tsx
 │   │   │   │   │   ├── types.ts
 │   │   │   │   │   └── utils.ts
 │   │   │   │   ├── EnchantmentApplier.tsx
 │   │   │   │   ├── EnchantmentDesigner.tsx
 │   │   │   │   ├── EnchantmentPreparer.tsx
 │   │   │   │   ├── EquipmentCrafter.tsx
 │   │   │   │   └── index.tsx
 │   │   │   ├── debug/
 │   │   │   │   ├── AttunementDebug.tsx
 │   │   │   │   ├── ElementDebug.tsx
 │   │   │   │   ├── GameStateDebug.tsx
 │   │   │   │   ├── GolemDebug.tsx
 │   │   │   │   ├── PactDebug.tsx
 │   │   │   │   ├── debug-context.tsx
 │   │   │   │   └── index.tsx
 │   │   │   ├── shared/
 │   │   │   ├── tabs/
 │   │   │   │   ├── CraftingTab/
 │   │   │   │   │   ├── EnchanterSubTab.tsx
 │   │   │   │   │   └── FabricatorSubTab.tsx
 │   │   │   │   ├── DebugTab/
 │   │   │   │   │   ├── AchievementDebugSection.tsx
 │   │   │   │   │   ├── AttunementDebugSection.tsx
 │   │   │   │   │   ├── DisciplineDebugSection.tsx
 │   │   │   │   │   ├── ElementDebugSection.tsx
 │   │   │   │   │   ├── GameStateDebugSection.tsx
 │   │   │   │   │   ├── GolemDebugSection.tsx
 │   │   │   │   │   ├── PactDebugSection.tsx
 │   │   │   │   │   └── SpireDebugSection.tsx
 │   │   │   │   ├── EquipmentTab/
 │   │   │   │   │   ├── EquipmentEffectsSummary.tsx
 │   │   │   │   │   ├── EquipmentSlotGrid.tsx
 │   │   │   │   │   └── InventoryList.tsx
 │   │   │   │   ├── SpireCombatPage/
 │   │   │   │   │   ├── RoomDisplay.tsx
 │   │   │   │   │   ├── SpireActivityLog.tsx
 │   │   │   │   │   ├── SpireCombatControls.tsx
 │   │   │   │   │   ├── SpireCombatPage.tsx
 │   │   │   │   │   ├── SpireHeader.tsx
 │   │   │   │   │   ├── SpireManaDisplay.tsx
 │   │   │   │   │   └── index.ts
 │   │   │   │   ├── StatsTab/
 │   │   │   │   │   ├── CombatStatsSection.tsx
 │   │   │   │   │   ├── ElementStatsSection.tsx
 │   │   │   │   │   ├── LoopStatsSection.tsx
 │   │   │   │   │   ├── ManaStatsSection.tsx
 │   │   │   │   │   ├── PactStatusSection.tsx
 │   │   │   │   │   └── StudyStatsSection.tsx
 │   │   │   │   ├── AchievementsTab.tsx
 │   │   │   │   ├── ActivityLog.tsx
 │   │   │   │   ├── AttunementsTab.test.ts
 │   │   │   │   ├── AttunementsTab.tsx
 │   │   │   │   ├── CraftingTab.test.ts
 │   │   │   │   ├── CraftingTab.tsx
 │   │   │   │   ├── DebugTab.test.ts
 │   │   │   │   ├── DebugTab.tsx
 │   │   │   │   ├── DisciplinesTab.tsx
 │   │   │   │   ├── EquipmentTab.test.ts
 │   │   │   │   ├── EquipmentTab.tsx
 │   │   │   │   ├── GolemancyTab.test.ts
 │   │   │   │   ├── GolemancyTab.tsx
 │   │   │   │   ├── GuardianPactsTab.test.ts
 │   │   │   │   ├── GuardianPactsTab.tsx
 │   │   │   │   ├── PrestigeTab.test.ts
 │   │   │   │   ├── PrestigeTab.tsx
 │   │   │   │   ├── SpellsTab.tsx
 │   │   │   │   ├── SpireSummaryTab.test.ts
 │   │   │   │   ├── SpireSummaryTab.tsx
 │   │   │   │   ├── StatsTab.tsx
 │   │   │   │   ├── guardian-pacts-components.tsx
 │   │   │   │   └── index.ts
 │   │   │   ├── ActionButtons.tsx
 │   │   │   ├── ActivityLogPanel.tsx
 │   │   │   ├── AttunementStatus.tsx
 │   │   │   ├── GameToast.tsx
 │   │   │   ├── ManaDisplay.tsx
 │   │   │   ├── TimeDisplay.tsx
 │   │   │   ├── UpgradeDialog.tsx
 │   │   │   ├── index.ts
 │   │   │   └── types.ts
 │   │   ├── ui/
 │   │   │   ├── action-button.tsx
 │   │   │   ├── alert-dialog.tsx
 │   │   │   ├── badge.tsx
 │   │   │   ├── button.tsx
 │   │   │   ├── card.tsx
 │   │   │   ├── dialog.tsx
 │   │   │   ├── element-badge.tsx
 │   │   │   ├── game-card.tsx
 │   │   │   ├── index.ts
 │   │   │   ├── input.tsx
 │   │   │   ├── label.tsx
 │   │   │   ├── mana-bar.tsx
 │   │   │   ├── progress.tsx
 │   │   │   ├── scroll-area.tsx
 │   │   │   ├── section-header.tsx
 │   │   │   ├── select.tsx
 │   │   │   ├── separator.tsx
 │   │   │   ├── sheet.tsx
 │   │   │   ├── skeleton.tsx
 │   │   │   ├── stat-row.tsx
 │   │   │   ├── stepper.tsx
 │   │   │   ├── switch.tsx
 │   │   │   ├── tabs.tsx
 │   │   │   ├── toast.tsx
 │   │   │   ├── toaster.tsx
 │   │   │   ├── toggle.tsx
 │   │   │   ├── tooltip-info.tsx
 │   │   │   ├── tooltip.tsx
 │   │   │   └── value-display.tsx
 │   │   └── ErrorBoundary.tsx
 │   ├── hooks/
 │   │   ├── use-mobile.ts
 │   │   └── use-toast.ts
 │   └── lib/
 │       ├── game/
 │       │   ├── __tests__/
 │       │   │   ├── store-method-tests/
 │       │   │   ├── achievements.test.ts
 │       │   │   ├── bug-fixes.test.ts
 │       │   │   ├── combat-utils.test.ts
 │       │   │   ├── computed-stats.test.ts
 │       │   │   ├── discipline-math.test.ts
 │       │   │   ├── enemy-generator.test.ts
 │       │   │   ├── floor-utils.test.ts
 │       │   │   ├── formatting.test.ts
 │       │   │   ├── mana-utils.test.ts
 │       │   │   ├── regression-fixes.test.ts
 │       │   │   ├── spire-utils.test.ts
 │       │   │   ├── store-actions-combat-prestige.test.ts
 │       │   │   ├── store-actions-discipline.test.ts
 │       │   │   ├── store-actions-mana.test.ts
 │       │   │   ├── store-actions.test.ts
 │       │   │   └── tick-integration.test.ts
 │       │   ├── constants/
 │       │   │   ├── spells-modules/
 │       │   │   │   ├── advanced-spells.ts
 │       │   │   │   ├── aoe-spells.ts
 │       │   │   │   ├── basic-elemental-spells.ts
 │       │   │   │   ├── compound-spells.ts
 │       │   │   │   ├── enchantment-spells.ts
 │       │   │   │   ├── legendary-spells.ts
 │       │   │   │   ├── lightning-spells.ts
 │       │   │   │   ├── master-spells.ts
 │       │   │   │   ├── raw-spells.ts
 │       │   │   │   └── utility-spells.ts
 │       │   │   ├── core.ts
 │       │   │   ├── elements.ts
 │       │   │   ├── guardians.ts
 │       │   │   ├── index.ts
 │       │   │   ├── prestige.ts
 │       │   │   ├── rooms.ts
 │       │   │   └── spells.ts
 │       │   ├── crafting-actions/
 │       │   │   ├── application-actions.ts
 │       │   │   ├── computed-getters.ts
 │       │   │   ├── crafting-equipment-actions.ts
 │       │   │   ├── design-actions.ts
 │       │   │   ├── disenchant-actions.ts
 │       │   │   ├── equipment-actions.ts
 │       │   │   ├── index.ts
 │       │   │   └── preparation-actions.ts
 │       │   ├── data/
 │       │   │   ├── disciplines/
 │       │   │   │   ├── base.ts
 │       │   │   │   ├── enchanter.ts
 │       │   │   │   ├── fabricator.ts
 │       │   │   │   ├── index.ts
 │       │   │   │   └── invoker.ts
 │       │   │   ├── enchantments/
 │       │   │   │   ├── spell-effects/
 │       │   │   │   │   ├── basic-spells.ts
 │       │   │   │   │   ├── index.ts
 │       │   │   │   │   ├── legendary-spells.ts
 │       │   │   │   │   ├── lightning-spells.ts
 │       │   │   │   │   ├── metal-spells.ts
 │       │   │   │   │   ├── sand-spells.ts
 │       │   │   │   │   ├── tier2-spells.ts
 │       │   │   │   │   ├── tier3-spells.ts
 │       │   │   │   │   └── types.ts
 │       │   │   │   ├── combat-effects.ts
 │       │   │   │   ├── defense-effects.ts
 │       │   │   │   ├── elemental-effects.ts
 │       │   │   │   ├── index.ts
 │       │   │   │   ├── mana-effects.ts
 │       │   │   │   ├── special-effects.ts
 │       │   │   │   └── utility-effects.ts
 │       │   │   ├── equipment/
 │       │   │   │   ├── accessories.ts
 │       │   │   │   ├── body.ts
 │       │   │   │   ├── casters.ts
 │       │   │   │   ├── catalysts.ts
 │       │   │   │   ├── equipment-types-data.ts
 │       │   │   │   ├── feet.ts
 │       │   │   │   ├── hands.ts
 │       │   │   │   ├── head.ts
 │       │   │   │   ├── index.ts
 │       │   │   │   ├── shields.ts
 │       │   │   │   ├── swords.ts
 │       │   │   │   ├── types.ts
 │       │   │   │   └── utils.ts
 │       │   │   ├── golems/
 │       │   │   │   ├── base-golems.ts
 │       │   │   │   ├── elemental-golems.ts
 │       │   │   │   ├── golems-data.ts
 │       │   │   │   ├── hybrid-golems.ts
 │       │   │   │   ├── index.ts
 │       │   │   │   ├── types.ts
 │       │   │   │   └── utils.ts
 │       │   │   ├── achievements.ts
 │       │   │   ├── attunements.ts
 │       │   │   ├── crafting-recipes.ts
 │       │   │   ├── enchantment-effects.ts
 │       │   │   ├── enchantment-types.ts
 │       │   │   ├── fabricator-recipes.ts
 │       │   │   ├── guardian-encounters.ts
 │       │   │   └── loot-drops.ts
 │       │   ├── effects/
 │       │   │   ├── discipline-effects.ts
 │       │   │   ├── dynamic-compute.ts
 │       │   │   ├── special-effects.ts
 │       │   │   ├── upgrade-effects.ts
 │       │   │   └── upgrade-effects.types.ts
 │       │   ├── hooks/
 │       │   │   └── useGameDerived.ts
 │       │   ├── stores/
 │       │   │   ├── attunementStore.ts
 │       │   │   ├── combat-actions.ts
 │       │   │   ├── combat-state.types.ts
 │       │   │   ├── combatStore.ts
 │       │   │   ├── craftingStore.ts
 │       │   │   ├── craftingStore.types.ts
 │       │   │   ├── discipline-slice.ts
 │       │   │   ├── gameActions.ts
 │       │   │   ├── gameHooks.ts
 │       │   │   ├── gameLoopActions.ts
 │       │   │   ├── gameStore.ts
 │       │   │   ├── index.ts
 │       │   │   ├── manaStore.ts
 │       │   │   ├── prestigeStore.ts
 │       │   │   ├── tick-pipeline.ts
 │       │   │   └── uiStore.ts
 │       │   ├── types/
 │       │   │   ├── attunements.ts
 │       │   │   ├── disciplines.ts
 │       │   │   ├── elements.ts
 │       │   │   ├── equipment.ts
 │       │   │   ├── equipmentSlot.ts
 │       │   │   ├── game.ts
 │       │   │   ├── index.ts
 │       │   │   └── spells.ts
 │       │   ├── utils/
 │       │   │   ├── activity-log.ts
 │       │   │   ├── combat-utils.ts
 │       │   │   ├── discipline-math.ts
 │       │   │   ├── enemy-generator.ts
 │       │   │   ├── enemy-utils.ts
 │       │   │   ├── floor-utils.ts
 │       │   │   ├── formatting.ts
 │       │   │   ├── index.ts
 │       │   │   ├── mana-utils.ts
 │       │   │   ├── pact-utils.ts
 │       │   │   ├── result.ts
 │       │   │   ├── room-utils.ts
 │       │   │   ├── safe-persist.ts
 │       │   │   └── spire-utils.ts
 │       │   ├── constants.ts
 │       │   ├── crafting-apply.ts
 │       │   ├── crafting-attunements.ts
 │       │   ├── crafting-design.ts
 │       │   ├── crafting-equipment.ts
 │       │   ├── crafting-loot.ts
 │       │   ├── crafting-prep.ts
 │       │   ├── crafting-utils.ts
 │       │   ├── effects.ts
 │       │   └── types.ts
 │       └── utils.ts
 ├── test-results/
 │   └── .last-run.json
 ├── .dockerignore
 ├── .gitignore
 ├── AGENTS.md
 ├── Caddyfile
 ├── Dockerfile
 ├── README.md
 ├── bun.lock
 ├── bunfig.toml
 ├── components.json
 ├── docker-compose.yml
 ├── eslint.config.mjs
 ├── next.config.ts
 ├── package-lock.json
 ├── package.json
 ├── playwright.config.ts
 ├── postcss.config.mjs
 ├── scorecard.png
 ├── tailwind.config.ts
 ├── tsconfig.json
 └── vitest.config.ts
@@ -3,95 +3,98 @@
  "version": "0.2.0",
  "private": true,
  "scripts": {
-    "dev": "next dev -p 3000 --hostname 0.0.0.0 2>&1 | tee dev.log",
+    "dev": "next dev -p 3000 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",
-    "prepare": "husky"
+    "db:push": "prisma db push",
    "db:generate": "prisma generate",
    "db:migrate": "prisma migrate dev",
    "db:reset": "prisma migrate reset"
  },
  "dependencies": {
    "@dnd-kit/core": "^6.3.1",
    "@dnd-kit/sortable": "^10.0.0",
    "@dnd-kit/utilities": "^3.2.2",
-    "@hookform/resolvers": "^5.2.2",
+    "@hookform/resolvers": "^5.1.1",
-    "@radix-ui/react-accordion": "^1.2.12",
+    "@mdxeditor/editor": "^3.39.1",
-    "@radix-ui/react-alert-dialog": "^1.1.15",
+    "@prisma/client": "^6.11.1",
-    "@radix-ui/react-aspect-ratio": "^1.1.8",
+    "@radix-ui/react-accordion": "^1.2.11",
-    "@radix-ui/react-avatar": "^1.1.11",
+    "@radix-ui/react-alert-dialog": "^1.1.14",
-    "@radix-ui/react-checkbox": "^1.3.3",
+    "@radix-ui/react-aspect-ratio": "^1.1.7",
-    "@radix-ui/react-collapsible": "^1.1.12",
+    "@radix-ui/react-avatar": "^1.1.10",
-    "@radix-ui/react-context-menu": "^2.2.16",
+    "@radix-ui/react-checkbox": "^1.3.2",
-    "@radix-ui/react-dialog": "^1.1.15",
+    "@radix-ui/react-collapsible": "^1.1.11",
-    "@radix-ui/react-dropdown-menu": "^2.1.16",
+    "@radix-ui/react-context-menu": "^2.2.15",
-    "@radix-ui/react-hover-card": "^1.1.15",
+    "@radix-ui/react-dialog": "^1.1.14",
-    "@radix-ui/react-label": "^2.1.8",
+    "@radix-ui/react-dropdown-menu": "^2.1.15",
-    "@radix-ui/react-menubar": "^1.1.16",
+    "@radix-ui/react-hover-card": "^1.1.14",
-    "@radix-ui/react-navigation-menu": "^1.2.14",
+    "@radix-ui/react-label": "^2.1.7",
-    "@radix-ui/react-popover": "^1.1.15",
+    "@radix-ui/react-menubar": "^1.1.15",
-    "@radix-ui/react-progress": "^1.1.8",
+    "@radix-ui/react-navigation-menu": "^1.2.13",
-    "@radix-ui/react-radio-group": "^1.3.8",
+    "@radix-ui/react-popover": "^1.1.14",
-    "@radix-ui/react-scroll-area": "^1.2.10",
+    "@radix-ui/react-progress": "^1.1.7",
-    "@radix-ui/react-select": "^2.2.6",
+    "@radix-ui/react-radio-group": "^1.3.7",
-    "@radix-ui/react-separator": "^1.1.8",
+    "@radix-ui/react-scroll-area": "^1.2.9",
-    "@radix-ui/react-slider": "^1.3.6",
+    "@radix-ui/react-select": "^2.2.5",
-    "@radix-ui/react-slot": "^1.2.4",
+    "@radix-ui/react-separator": "^1.1.7",
-    "@radix-ui/react-switch": "^1.2.6",
+    "@radix-ui/react-slider": "^1.3.5",
-    "@radix-ui/react-tabs": "^1.1.13",
+    "@radix-ui/react-slot": "^1.2.3",
-    "@radix-ui/react-toast": "^1.2.15",
+    "@radix-ui/react-switch": "^1.2.5",
-    "@radix-ui/react-toggle": "^1.1.10",
+    "@radix-ui/react-tabs": "^1.1.12",
-    "@radix-ui/react-toggle-group": "^1.1.11",
+    "@radix-ui/react-toast": "^1.2.14",
-    "@radix-ui/react-tooltip": "^1.2.8",
+    "@radix-ui/react-toggle": "^1.1.9",
-    "@reactuses/core": "^6.3.1",
+    "@radix-ui/react-toggle-group": "^1.1.10",
-    "@tanstack/react-query": "^5.100.10",
+    "@radix-ui/react-tooltip": "^1.2.7",
    "@reactuses/core": "^6.0.5",
    "@tanstack/react-query": "^5.82.0",
    "@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.38.0",
+    "framer-motion": "^12.23.2",
    "husky": "^9.1.7",
    "input-otp": "^1.4.2",
    "lucide-react": "^0.525.0",
-    "next": "^16.2.6",
+    "next": "^16.1.1",
    "next-auth": "^4.24.11",
    "next-intl": "^4.3.4",
    "next-themes": "^0.4.6",
-    "react": "^19.2.6",
+    "prisma": "^6.11.1",
-    "react-day-picker": "^9.14.0",
+    "react": "^19.0.0",
-    "react-dom": "^19.2.6",
+    "react-day-picker": "^9.8.0",
-    "react-hook-form": "^7.76.0",
+    "react-dom": "^19.0.0",
    "react-hook-form": "^7.60.0",
    "react-markdown": "^10.1.0",
-    "react-resizable-panels": "^3.0.6",
+    "react-resizable-panels": "^3.0.3",
-    "react-syntax-highlighter": "^15.6.6",
+    "react-syntax-highlighter": "^15.6.1",
    "recharts": "^2.15.4",
-    "sharp": "^0.34.5",
+    "sharp": "^0.34.3",
-    "sonner": "^2.0.7",
+    "sonner": "^2.0.6",
-    "tailwind-merge": "^3.6.0",
+    "tailwind-merge": "^3.3.1",
    "tailwindcss-animate": "^1.0.7",
-    "uuid": "^11.1.1",
+    "uuid": "^11.1.0",
    "vaul": "^1.1.2",
-    "zod": "^4.4.3",
+    "z-ai-web-dev-sdk": "^0.0.17",
-    "zustand": "^5.0.13"
+    "zod": "^4.0.2",
    "zustand": "^5.0.6"
  },
  "devDependencies": {
-    "@playwright/test": "^1.60.0",
+    "@tailwindcss/postcss": "^4",
    "@tailwindcss/postcss": "^4.3.0",
    "@testing-library/jest-dom": "^6.9.1",
    "@testing-library/react": "^16.3.2",
-    "@types/react": "^19.2.14",
+    "@types/react": "^19",
-    "@types/react-dom": "^19.2.3",
+    "@types/react-dom": "^19",
-    "bun-types": "^1.3.14",
+    "bun-types": "^1.3.4",
-    "eslint": "^9.39.4",
+    "eslint": "^9",
-    "eslint-config-next": "^16.2.6",
+    "eslint-config-next": "^16.1.1",
-    "jsdom": "^29.1.1",
+    "jsdom": "^29.0.1",
-    "lint-staged": "^17.0.5",
+    "tailwindcss": "^4",
-    "madge": "^8.0.0",
+    "tw-animate-css": "^1.3.5",
-    "tailwindcss": "^4.3.0",
+    "typescript": "^5",
-    "tw-animate-css": "^1.4.0",
+    "vitest": "^4.1.2"
    "typescript": "^5.9.3",
    "vitest": "^4.1.6"
  }
 }
@@ -1,285 +0,0 @@
 # 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 | });
 ```
@@ -1,348 +0,0 @@
 # 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 | });
 ```
@@ -1,285 +0,0 @@
 # 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 | });
 ```
@@ -1,260 +0,0 @@
 # 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 | });
 ```
@@ -1,280 +0,0 @@
 # 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 | });
 ```
@@ -1,375 +0,0 @@
 # 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 | });
 ```
@@ -1,280 +0,0 @@
 # 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 | });
 ```
@@ -1,280 +0,0 @@
 # 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 | });
 ```
@@ -1,22 +0,0 @@
 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'] },
    },
  ],
 });
@@ -0,0 +1,32 @@
 // 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
 }
@@ -0,0 +1,5 @@
 import { NextResponse } from "next/server";
 export async function GET() {
  return NextResponse.json({ message: "Hello, world!" });
 }
@@ -1,63 +0,0 @@
 '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>
  );
 }
@@ -1,77 +0,0 @@
 '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>
  );
 }
@@ -1,126 +0,0 @@
 '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>
  );
 }
@@ -1,163 +1,136 @@
-@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 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 "tailwindcss";
@import "tw-animate-css";
@custom-variant dark (&:is(.dark *));
@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
-  --color-card: var(--card);
+  --font-sans: var(--font-geist-sans);
-  --color-card-foreground: var(--card-foreground);
+  --font-mono: var(--font-geist-mono);
-  --color-primary: var(--primary);
+  --color-sidebar-ring: var(--sidebar-ring);
-  --color-primary-foreground: var(--primary-foreground);
+  --color-sidebar-border: var(--sidebar-border);
-  --color-muted: var(--muted);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
-  --color-muted-foreground: var(--muted-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
-  --color-border: var(--border);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
-  --color-input: var(--input);
+  --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);
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
 }
 :root {
-  --radius: 0.5rem;
+  --radius: 0.625rem;
-  
+  --background: #060811;
-  /* === Background Colors (Depth Levels) === */
+  --foreground: #c8d8f8;
-  --bg-base: #060811;
+  --card: #0C1020;
-  --bg-surface: #0C1020;
+  --card-foreground: #c8d8f8;
-  --bg-elevated: #111628;
+  --popover: #111628;
-  --bg-sunken: #181f35;
+  --popover-foreground: #c8d8f8;
-  
+  --primary: #3B6FE8;
  /* === Border Colors === */
  --border-subtle: #1e2a45;
  --border-default: #2a3a60;
  --border-focus: #5B8FFF;
  /* === Text Colors === */
  --text-primary: #c8d8f8;
  --text-secondary: #7a92c0;
  --text-muted: #4a5f8a;
  --text-disabled: #2a3a60;
  /* === Mana Element Colors === */
  --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;
  /* === Semantic UI Colors === */
  --color-success: #27AE60;
  --color-warning: #F39C12;
  --color-danger: #C0392B;
  --color-info: #3B6FE8;
  /* === Rarity Colors === */
  --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 Colors === */
  --interactive-primary: #3B6FE8;
  --interactive-primary-hover: #5B8FFF;
  --interactive-secondary: #2a3a60;
  --interactive-secondary-hover: #3a4a70;
  --interactive-danger: #C0392B;
  --interactive-danger-hover: #E74C3C;
  --interactive-disabled: #1e2a45;
  /* === Typography === */
  --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);
  --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);
  /* === 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);
  --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: #1e2a45;
-  --secondary-foreground: var(--text-primary);
+  --secondary-foreground: #c8d8f8;
-  --muted: var(--bg-sunken);
+  --muted: #181f35;
-  --muted-foreground: var(--text-secondary);
+  --muted-foreground: #7a92c0;
-  --accent: var(--interactive-secondary);
+  --accent: #2a3a60;
-  --accent-foreground: var(--text-primary);
+  --accent-foreground: #c8d8f8;
-  --destructive: var(--color-danger);
+  --destructive: #C0392B;
-  --border: var(--border-subtle);
+  --border: #1e2a45;
-  --input: var(--border-subtle);
+  --input: #1e2a45;
-  --ring: var(--border-focus);
+  --ring: #3B6FE8;
-  --chart-1: var(--mana-fire);
+  --chart-1: #FF6B35;
-  --chart-2: var(--mana-water);
+  --chart-2: #4ECDC4;
-  --chart-3: var(--mana-light);
+  --chart-3: #9B59B6;
-  --chart-4: var(--color-success);
+  --chart-4: #2ECC71;
-  --chart-5: var(--mana-lightning);
+  --chart-5: #FFD700;
-  --sidebar: var(--bg-surface);
+  --sidebar: #0C1020;
-  --sidebar-foreground: var(--text-primary);
+  --sidebar-foreground: #c8d8f8;
-  --sidebar-primary: var(--mana-light);
+  --sidebar-primary: #D4A843;
  --sidebar-primary-foreground: #0C1020;
-  --sidebar-accent: var(--interactive-secondary);
+  --sidebar-accent: #1e2a45;
-  --sidebar-accent-foreground: var(--text-primary);
+  --sidebar-accent-foreground: #c8d8f8;
-  --sidebar-border: var(--border-subtle);
+  --sidebar-border: #1e2a45;
-  --sidebar-ring: var(--mana-light);
+  --sidebar-ring: #D4A843;
-  /* Legacy game colors (kept for compatibility) */
+  /* Game-specific colors */
-  --game-bg: var(--bg-base);
+  --game-bg: #060811;
-  --game-bg1: var(--bg-surface);
+  --game-bg1: #0C1020;
-  --game-bg2: var(--bg-elevated);
+  --game-bg2: #111628;
-  --game-bg3: var(--bg-sunken);
+  --game-bg3: #181f35;
-  --game-border: var(--border-subtle);
+  --game-border: #1e2a45;
-  --game-border2: var(--border-default);
+  --game-border2: #2a3a60;
-  --game-text: var(--text-primary);
+  --game-text: #c8d8f8;
-  --game-text2: var(--text-secondary);
+  --game-text2: #7a92c0;
-  --game-text3: var(--text-muted);
+  --game-text3: #4a5f8a;
-  --game-gold: var(--mana-light);
+  --game-gold: #D4A843;
  --game-gold2: #A87830;
  --game-purple: #7C5CBF;
  --game-purpleL: #A07EE0;
-  --game-accent: var(--interactive-primary);
+  --game-accent: #3B6FE8;
-  --game-accentL: var(--interactive-primary-hover);
+  --game-accentL: #5B8FFF;
-  --game-danger: var(--color-danger);
+  --game-danger: #C0392B;
-  --game-success: var(--color-success);
+  --game-success: #27AE60;
 }
 .dark {
  --background: #060811;
  --foreground: #c8d8f8;
  --card: #0C1020;
  --card-foreground: #c8d8f8;
  --popover: #111628;
  --popover-foreground: #c8d8f8;
  --primary: #5B8FFF;
  --primary-foreground: #ffffff;
  --secondary: #1e2a45;
  --secondary-foreground: #c8d8f8;
  --muted: #181f35;
  --muted-foreground: #7a92c0;
  --accent: #2a3a60;
  --accent-foreground: #c8d8f8;
  --destructive: #C0392B;
  --border: #1e2a45;
  --input: #1e2a45;
  --ring: #5B8FFF;
  --chart-1: #FF6B35;
  --chart-2: #4ECDC4;
  --chart-3: #9B59B6;
  --chart-4: #2ECC71;
  --chart-5: #FFD700;
  --sidebar: #0C1020;
  --sidebar-foreground: #c8d8f8;
  --sidebar-primary: #D4A843;
  --sidebar-primary-foreground: #0C1020;
  --sidebar-accent: #1e2a45;
  --sidebar-accent-foreground: #c8d8f8;
  --sidebar-border: #1e2a45;
  --sidebar-ring: #D4A843;
 }
@layer base {
@@ -166,13 +139,13 @@
  }
  body {
    @apply bg-background text-foreground;
-    font-family: var(--font-body);
+    font-family: 'Crimson Text', Georgia, serif;
  }
 }
 /* Game-specific styles */
 .game-root {
-  font-family: var(--font-body);
+  font-family: 'Crimson Text', Georgia, serif;
  background: var(--game-bg);
  color: var(--game-text);
  min-height: 100vh;
@@ -186,7 +159,7 @@
 }
 .game-title {
-  font-family: var(--font-display);
+  font-family: 'Cinzel', serif;
  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;
@@ -194,13 +167,13 @@
 }
 .game-panel-title {
-  font-family: var(--font-display);
+  font-family: 'Cinzel', serif;
  letter-spacing: 2px;
  text-transform: uppercase;
 }
 .game-mono {
-  font-family: var(--font-ui);
+  font-family: 'JetBrains Mono', monospace;
 }
 /* Scrollbar */
@@ -245,25 +218,6 @@
  box-shadow: 0 0 15px rgba(60, 111, 232, 0.4);
 }
 /* Gather button glow animation */
@keyframes gather-glow {
  0%, 100% {
    box-shadow: 0 0 5px rgba(59, 111, 232, 0.3), 0 0 10px rgba(59, 111, 232, 0.2);
  }
  50% {
    box-shadow: 0 0 15px rgba(59, 111, 232, 0.5), 0 0 25px rgba(59, 111, 232, 0.3);
  }
 }
 .animate-gather-glow {
  animation: gather-glow 2s ease-in-out infinite;
 }
 /* Active scale effect for buttons - using CSS only */
 .active\:scale-95:active {
  transform: scale(0.95);
 }
 /* Button hover effects */
 .btn-game {
  transition: all 0.2s ease;
@@ -1,25 +1,38 @@
 import type { Metadata } from "next";
-import localFont from "next/font/local";
+import { Geist, Geist_Mono } from "next/font/google";
 import "./globals.css";
 import { Toaster } from "@/components/ui/toaster";
 import { GameToaster } from "@/components/game/GameToast";
 import { DebugProvider } from "@/components/game/debug/debug-context";
-const geistSans = localFont({
+const geistSans = Geist({
-  src: '../../public/fonts/GeistVF.woff',
+  variable: "--font-geist-sans",
-  variable: '--font-geist-sans',
+  subsets: ["latin"],
 });
-const geistMono = localFont({
+const geistMono = Geist_Mono({
-  src: '../../public/fonts/GeistMonoVF.woff',
+  variable: "--font-geist-mono",
-  variable: '--font-geist-mono',
+  subsets: ["latin"],
 });
 export const metadata: Metadata = {
-  title: "Mana Loop",
+  title: "Z.ai Code Scaffold - AI-Powered Development",
-  description: "A time-loop incremental game where you climb the Spire and sign pacts with guardians.",
+  description: "Modern Next.js scaffold optimized for AI-powered development with Z.ai. Built with TypeScript, Tailwind CSS, and shadcn/ui.",
-  keywords: ["Mana Loop", "incremental game", "idle game", "time loop"],
+  keywords: ["Z.ai", "Next.js", "TypeScript", "Tailwind CSS", "shadcn/ui", "AI development", "React"],
-  authors: [{ name: "Mana Loop Team" }],
+  authors: [{ name: "Z.ai Team" }],
  icons: {
    icon: "https://z-cdn.chatglm.cn/z-ai/static/logo.svg",
  },
  openGraph: {
    title: "Z.ai Code Scaffold",
    description: "AI-powered development with modern React stack",
    url: "https://chat.z.ai",
    siteName: "Z.ai",
    type: "website",
  },
  twitter: {
    card: "summary_large_image",
    title: "Z.ai Code Scaffold",
    description: "AI-powered development with modern React stack",
  },
 };
 export default function RootLayout({
@@ -32,11 +45,8 @@ export default function RootLayout({
      <body
        className={`${geistSans.variable} ${geistMono.variable} antialiased bg-background text-foreground`}
      >
        <DebugProvider>
        {children}
        <Toaster />
          <GameToaster />
        </DebugProvider>
      </body>
    </html>
  );
@@ -1,237 +1,439 @@
 'use client';
-import { useEffect, useState, lazy, Suspense } from 'react';
+import { useEffect, useState } from 'react';
-import { useShallow } from 'zustand/react/shallow';
+import { useGameStore, useGameLoop, fmt, fmtDec, getFloorElement, computeMaxMana, computeRegen, computeClickMana, getMeditationBonus, getIncursionStrength, canAffordSpellCost } from '@/lib/game/store';
-
+import { getActiveEquipmentSpells, getTotalDPS } from '@/lib/game/computed-stats';
-import {
+import { getDamageBreakdown } from '@/lib/game/computed-stats';
-  useGameStore,
+import { ELEMENTS, GUARDIANS, SPELLS_DEF, PRESTIGE_DEF, getStudySpeedMultiplier, getStudyCostMultiplier } from '@/lib/game/constants';
-  useUIStore,
+import { SKILL_EVOLUTION_PATHS, getTierMultiplier } from '@/lib/game/skill-evolution';
-  useManaStore,
+import { getUnifiedEffects, hasSpecial, SPECIAL_EFFECTS } from '@/lib/game/effects';
-  useCombatStore,
+import { formatHour } from '@/lib/game/formatting';
-  usePrestigeStore,
+import { Button } from '@/components/ui/button';
  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 { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
-import { TooltipProvider } from '@/components/ui/tooltip';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
-import { ErrorBoundary } from '@/components/ErrorBoundary';
+import { Badge } from '@/components/ui/badge';
-import { DebugName } from '@/components/game/debug/debug-context';
+import { RotateCcw } from 'lucide-react';
 import { CraftingTab, SpireTab, SpellsTab, LabTab, SkillsTab, StatsTab, EquipmentTab, AttunementsTab, DebugTab } from '@/components/game/tabs';
 import { ActionButtons, CalendarDisplay, ManaDisplay, TimeDisplay } from '@/components/game';
 import { LootInventoryDisplay } from '@/components/game/LootInventory';
 import { AchievementsDisplay } from '@/components/game/AchievementsDisplay';
-import { GameOverScreen } from './components/GameOverScreen';
+export default function ManaLoopGame() {
-import { LeftPanel } from './components/LeftPanel';
+  const [activeTab, setActiveTab] = useState('spire');
-import { GrimoireTab } from './components/GrimoireTab';
+  const [isGathering, setIsGathering] = useState(false);
-// Lazy load tab components
+  // Game store
-const DisciplinesTab = lazy(() => import('@/components/game/tabs').then(m => ({ default: m.DisciplinesTab })));
+  const store = useGameStore();
-const SpellsTab = lazy(() => import('@/components/game/tabs').then(m => ({ default: m.SpellsTab })));
+  const gameLoop = useGameLoop();
 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 })));
-const TabFallback = () => <div className="p-4 text-center text-gray-400">Loading...</div>;
+  // Computed effects from upgrades and equipment
  const upgradeEffects = getUnifiedEffects(store);
-function TabErrorFallback({ name }: { name: string }) {
+  // Derived stats
-  return <div className="p-4 text-red-400">{name} tab failed to load.</div>;
+  const maxMana = computeMaxMana(store, upgradeEffects);
-}
+  const baseRegen = computeRegen(store, upgradeEffects);
-
+  const clickMana = computeClickMana(store);
-// ─── Derived Stats Hook ──────────────────────────────────────────────────────
+  const floorElem = getFloorElement(store.currentFloor);
-
+  const floorElemDef = ELEMENTS[floorElem];
-function useGameDerivedStats() {
+  const isGuardianFloor = !!GUARDIANS[store.currentFloor];
-  const { prestigeUpgrades } = usePrestigeStore(useShallow(s => ({
+  const currentGuardian = GUARDIANS[store.currentFloor];
-    prestigeUpgrades: s.prestigeUpgrades,
+  const meditationMultiplier = getMeditationBonus(store.meditateTicks, store.skills, upgradeEffects.meditationEfficiency);
-  })));
+  const incursionStrength = getIncursionStrength(store.day, store.hour);
-  const { meditateTicks } = useManaStore(useShallow(s => ({
+  const studySpeedMult = getStudySpeedMultiplier(store.skills);
-    meditateTicks: s.meditateTicks,
+  const studyCostMult = getStudyCostMultiplier(store.skills);
  })));
  const equippedInstances = useCraftingStore((s) => s.equippedInstances);
  const equipmentInstances = useCraftingStore((s) => s.equipmentInstances);
  const day = useGameStore((s) => s.day);
  const hour = useGameStore((s) => s.hour);
  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;
-  const manaWaterfallBonus = hasSpecial(upgradeEffects, SPECIAL_EFFECTS.MANA_WATERFALL)
+  // Effective regen
-    ? Math.floor(maxMana / 100) * 0.25
+  const effectiveRegen = (effectiveRegenWithSpecials + manaCascadeBonus) * meditationMultiplier;
    : 0;
-  const effectiveRegen = (effectiveRegenWithSpecials + manaCascadeBonus + manaWaterfallBonus) * meditationMultiplier;
+  // Get all active spells from equipment
  const activeEquipmentSpells = getActiveEquipmentSpells(store.equippedInstances, store.equipmentInstances);
-  return { maxMana, effectiveRegen, clickMana, meditationMultiplier };
+  // Compute total DPS
-}
+  const totalDPS = getTotalDPS(store, upgradeEffects, floorElem);
 // ─── 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(() => {
-    initGame();
+    if (!isGathering) return;
  }, [initGame]);
-  const [mounted, setMounted] = useState(false);
+    let lastGatherTime = 0;
-  useEffect(() => { setMounted(true); }, []); // eslint-disable-line react-hooks/set-state-in-effect
+    const minGatherInterval = 100;
    let animationFrameId: number;
    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(() => {
-    if (spireMode) {
+    const cleanup = gameLoop.start();
-      setActiveTab('spells'); // eslint-disable-line react-hooks/set-state-in-effect
+    return cleanup;
-    }
+  }, [gameLoop]);
  }, [spireMode]);
-  if (gameOver) {
+  // Check if spell can be cast
-    return <GameOverScreen day={day} hour={hour} insightGained={loopInsight} totalInsight={insight} />;
+  const canCastSpell = (spellId: string): boolean => {
-  }
+    const spell = SPELLS_DEF[spellId];
    if (!spell) return false;
    return canAffordSpellCost(spell.cost, store.rawMana, store.elements);
  };
-  if (!mounted) return <div className="p-4 text-center text-gray-400">Loading...</div>;
+  // Game Over Screen
-
+  if (store.gameOver) {
  if (spireMode) {
    return (
-      <ErrorBoundary>
+      <div className="fixed inset-0 game-overlay flex items-center justify-center z-50">
-        <Suspense fallback={<div className="p-4 text-center text-gray-400">Loading spire...</div>}>
+        <Card className="bg-gray-900 border-gray-600 max-w-md w-full mx-4 shadow-2xl">
-          <SpireCombatPage />
+          <CardHeader>
-        </Suspense>
+            <CardTitle className={`text-3xl text-center game-title ${store.victory ? 'text-amber-400' : 'text-red-400'}`}>
-      </ErrorBoundary>
+              {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>
    );
  }
  return (
    <ErrorBoundary>
    <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={day} hour={hour} insight={insight} />
+              <TimeDisplay
                day={store.day}
                hour={store.hour}
                isPaused={store.isPaused}
                togglePause={store.togglePause}
              />
            </div>
          </div>
        </header>
        {/* Main Content */}
        <main className="flex-1 flex flex-col md:flex-row gap-4 p-4">
-            <LeftPanel />
+          {/* Left Panel - Mana & Actions */}
          <div className="md:w-80 space-y-4 flex-shrink-0">
            {/* Mana Display */}
            <ManaDisplay
              rawMana={store.rawMana}
              maxMana={maxMana}
              effectiveRegen={effectiveRegen}
              meditationMultiplier={meditationMultiplier}
              clickMana={clickMana}
              isGathering={isGathering}
              onGatherStart={handleGatherStart}
              onGatherEnd={handleGatherEnd}
              elements={store.elements}
            />
            {/* Action Buttons */}
            <ActionButtons
              currentAction={store.currentAction}
              designProgress={store.designProgress}
              preparationProgress={store.preparationProgress}
              applicationProgress={store.applicationProgress}
              setAction={store.setAction}
            />
            {/* Calendar */}
            <CalendarDisplay
              day={store.day}
              hour={store.hour}
              incursionStrength={incursionStrength}
            />
            {/* Loot Inventory */}
            <LootInventoryDisplay
              inventory={store.lootInventory}
              elements={store.elements}
              equipmentInstances={store.equipmentInstances}
              onDeleteMaterial={store.deleteMaterial}
              onDeleteEquipment={store.deleteEquipmentInstance}
            />
            {/* Achievements */}
            <AchievementsDisplay
              achievements={store.achievements}
              gameState={{
                maxFloorReached: store.maxFloorReached,
                totalManaGathered: store.totalManaGathered,
                signedPacts: store.signedPacts,
                totalSpellsCast: store.totalSpellsCast,
                totalDamageDealt: store.totalDamageDealt,
                totalCraftsCompleted: store.totalCraftsCompleted,
                combo: store.combo,
              }}
            />
          </div>
          {/* Right Panel - Tabs */}
          <div className="flex-1 min-w-0">
            <Tabs value={activeTab} onValueChange={setActiveTab}>
-                <TabTriggers />
+              <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="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="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>
-                <TabsContent value="spells"><LazyTab name="spells"><SpellsTab /></LazyTab></TabsContent>
+              <TabsContent value="spire">
-                <TabsContent value="stats"><LazyTab name="stats"><StatsTab /></LazyTab></TabsContent>
+                <SpireTab store={store} />
-                <TabsContent value="disciplines"><LazyTab name="disciplines"><DisciplinesTab /></LazyTab></TabsContent>
+              </TabsContent>
-                <TabsContent value="grimoire"><GrimoireTab /></TabsContent>
+              
-                <TabsContent value="debug"><LazyTab name="debug"><DebugTab /></LazyTab></TabsContent>
+              <TabsContent value="attunements">
-                <TabsContent value="attunements"><LazyTab name="attunements"><AttunementsTab /></LazyTab></TabsContent>
+                <AttunementsTab store={store} />
-                <TabsContent value="achievements"><LazyTab name="achievements"><AchievementsTab /></LazyTab></TabsContent>
+              </TabsContent>
-                <TabsContent value="prestige"><LazyTab name="prestige"><PrestigeTab /></LazyTab></TabsContent>
+              
-                <TabsContent value="equipment"><LazyTab name="equipment"><EquipmentTab /></LazyTab></TabsContent>
+              <TabsContent value="skills">
-                <TabsContent value="golemancy"><LazyTab name="golemancy"><GolemancyTab /></LazyTab></TabsContent>
+                <SkillsTab store={store} />
-                <TabsContent value="pacts"><LazyTab name="pacts"><GuardianPactsTab /></LazyTab></TabsContent>
+              </TabsContent>
-                <TabsContent value="spire"><LazyTab name="spire"><SpireSummaryTab /></LazyTab></TabsContent>
+              
-                <TabsContent value="crafting"><LazyTab name="crafting"><CraftingTab /></LazyTab></TabsContent>
+              <TabsContent value="spells">
                <SpellsTab store={store} />
              </TabsContent>
              <TabsContent value="equipment">
                <EquipmentTab store={store} />
              </TabsContent>
              <TabsContent value="crafting">
                <CraftingTab store={store} />
              </TabsContent>
              <TabsContent value="lab">
                <LabTab store={store} />
              </TabsContent>
              <TabsContent value="stats">
                <StatsTab
                  store={store}
                  upgradeEffects={upgradeEffects}
                  maxMana={maxMana}
                  baseRegen={baseRegen}
                  clickMana={clickMana}
                  meditationMultiplier={meditationMultiplier}
                  effectiveRegen={effectiveRegen}
                  incursionStrength={incursionStrength}
                  manaCascadeBonus={manaCascadeBonus}
                  studySpeedMult={studySpeedMult}
                  studyCostMult={studyCostMult}
                />
              </TabsContent>
              <TabsContent value="grimoire">
                {renderGrimoireTab()}
              </TabsContent>
              <TabsContent value="debug">
                <DebugTab store={store} />
              </TabsContent>
            </Tabs>
          </div>
        </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>
    );
  }
 }
 // Import TooltipProvider
 import { TooltipProvider } from '@/components/ui/tooltip';
@@ -1,38 +0,0 @@
 '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;
  }
 }
@@ -0,0 +1,175 @@
 'use client';
 import { useState } from 'react';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
 import { ScrollArea } from '@/components/ui/scroll-area';
 import { Progress } from '@/components/ui/progress';
 import { Trophy, Lock, CheckCircle, ChevronDown, ChevronUp } from 'lucide-react';
 import type { AchievementState } from '@/lib/game/types';
 import { ACHIEVEMENTS, ACHIEVEMENT_CATEGORY_COLORS, getAchievementsByCategory, isAchievementRevealed } from '@/lib/game/data/achievements';
 import { GameState } from '@/lib/game/types';
 interface AchievementsProps {
  achievements: AchievementState;
  gameState: Pick<GameState, 'maxFloorReached' | 'totalManaGathered' | 'signedPacts' | 'totalSpellsCast' | 'totalDamageDealt' | 'totalCraftsCompleted' | 'combo'>;
 }
 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 'combo':
        return gameState.combo?.maxCombo || 0;
      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 (
    <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" />
          Achievements
          <Badge className="ml-auto bg-amber-900/50 text-amber-300">
            {unlockedCount} / {totalCount}
          </Badge>
        </CardTitle>
      </CardHeader>
      <CardContent>
        <ScrollArea className="h-64">
          <div className="space-y-2">
            {Object.entries(categories).map(([category, categoryAchievements]) => (
              <div key={category} className="space-y-1">
                <Button
                  variant="ghost"
                  size="sm"
                  className="w-full justify-between text-xs"
                  onClick={() => setExpandedCategory(expandedCategory === category ? null : category)}
                >
                  <span style={{ color: ACHIEVEMENT_CATEGORY_COLORS[category] }}>
                    {category.charAt(0).toUpperCase() + category.slice(1)}
                  </span>
                  <span className="text-gray-500">
                    {categoryAchievements.filter(a => achievements.unlocked.includes(a.id)).length} / {categoryAchievements.length}
                  </span>
                  {expandedCategory === category ? (
                    <ChevronUp className="w-4 h-4" />
                  ) : (
                    <ChevronDown className="w-4 h-4" />
                  )}
                </Button>
                {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-gray-800/30 border border-gray-700">
                            <div className="flex items-center gap-2 text-gray-500">
                              <Lock className="w-4 h-4" />
                              <span className="text-sm">???</span>
                            </div>
                          </div>
                        );
                      }
                      return (
                        <div
                          key={achievement.id}
                          className={`p-2 rounded border ${
                            isUnlocked
                              ? 'bg-amber-900/20 border-amber-600/50'
                              : 'bg-gray-800/30 border-gray-700'
                          }`}
                        >
                          <div className="flex items-start justify-between mb-1">
                            <div className="flex items-center gap-2">
                              {isUnlocked ? (
                                <CheckCircle className="w-4 h-4 text-amber-400" />
                              ) : (
                                <Trophy className="w-4 h-4 text-gray-500" />
                              )}
                              <span className={`text-sm font-semibold ${isUnlocked ? 'text-amber-300' : 'text-gray-300'}`}>
                                {achievement.name}
                              </span>
                            </div>
                            {achievement.reward.title && isUnlocked && (
                              <Badge className="text-xs bg-purple-900/50 text-purple-300">
                                Title
                              </Badge>
                            )}
                          </div>
                          <div className="text-xs text-gray-400 mb-2">
                            {achievement.desc}
                          </div>
                          {!isUnlocked && (
                            <div className="space-y-1">
                              <Progress value={progressPercent} className="h-1 bg-gray-700" />
                              <div className="flex justify-between text-xs text-gray-500">
                                <span>{progress.toLocaleString()} / {achievement.requirement.value.toLocaleString()}</span>
                                <span>{progressPercent.toFixed(0)}%</span>
                              </div>
                            </div>
                          )}
                          {isUnlocked && achievement.reward && (
                            <div className="text-xs text-amber-400/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>
      </CardContent>
    </Card>
  );
 }
@@ -1,152 +1,86 @@
 'use client';
-import { Sparkles, Swords, BookOpen, Target, FlaskConical, Cog, Hammer } from 'lucide-react';
+import { Button } from '@/components/ui/button';
 import { Sparkles, Swords, BookOpen, Target, FlaskConical } 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;
+  setAction: (action: GameAction) => void;
 }
 // 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,
+  setAction,
 }: ActionButtonsProps) {
-  const config = ACTION_CONFIG[currentAction] || { label: currentAction, icon: Sparkles, color: 'text-gray-400' };
+  const actions: { id: GameAction; label: string; icon: typeof Swords }[] = [
-  const Icon = config.icon;
+    { id: 'meditate', label: 'Meditate', icon: Sparkles },
    { id: 'climb', label: 'Climb', icon: Swords },
    { id: 'study', label: 'Study', icon: BookOpen },
  ];
-  // Calculate additional info for specific actions
+  const hasDesignProgress = designProgress !== null;
-  const getActionDetails = () => {
+  const hasPrepProgress = preparationProgress !== null;
-    switch (currentAction) {
+  const hasAppProgress = applicationProgress !== null;
      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="grid grid-cols-3 gap-2">
-        <div className="flex items-center gap-2">
+        {actions.map(({ id, label, icon: Icon }) => (
-          <Icon className={`w-4 h-4 ${config.color}`} />
+          <Button
-          <span className="text-sm font-medium text-gray-200">Current Activity</span>
+            key={id}
            variant={currentAction === id ? 'default' : 'outline'}
            size="sm"
            className={`h-9 ${currentAction === id ? 'bg-blue-600 hover:bg-blue-700' : 'bg-gray-800/50 hover:bg-gray-700/50 border-gray-600'}`}
            onClick={() => setAction(id)}
          >
            <Icon className="w-4 h-4 mr-1" />
            {label}
          </Button>
        ))}
      </div>
        <div className={`text-lg font-semibold mt-1 ${config.color}`}>
          {config.label}
        </div>
        {getActionDetails()}
-        {/* Show second design slot if active */}
+      {/* Crafting actions row - shown when there's active crafting progress */}
-        {designProgress2 && (
+      {(hasDesignProgress || hasPrepProgress || hasAppProgress) && (
-          <div className="mt-2 pt-2 border-t border-gray-700">
+        <div className="grid grid-cols-3 gap-2">
-            <div className="flex items-center gap-2">
+          <Button
-              <Target className="w-3 h-3 text-purple-400" />
+            variant={currentAction === 'design' ? 'default' : 'outline'}
-              <span className="text-xs text-gray-400">Second Design Slot</span>
+            size="sm"
-            </div>
+            disabled={!hasDesignProgress}
-            <ProgressBar 
+            className={`h-9 ${currentAction === 'design' ? 'bg-purple-600 hover:bg-purple-700' : 'bg-gray-800/50 hover:bg-gray-700/50 border-gray-600'}`}
-              progress={designProgress2.progress} 
+            onClick={() => hasDesignProgress && setAction('design')}
-              required={designProgress2.required}
+          >
-              label="Design progress"
+            <Target className="w-4 h-4 mr-1" />
-            />
+            Design
          </Button>
          <Button
            variant={currentAction === 'prepare' ? 'default' : 'outline'}
            size="sm"
            disabled={!hasPrepProgress}
            className={`h-9 ${currentAction === 'prepare' ? 'bg-purple-600 hover:bg-purple-700' : 'bg-gray-800/50 hover:bg-gray-700/50 border-gray-600'}`}
            onClick={() => hasPrepProgress && setAction('prepare')}
          >
            <FlaskConical className="w-4 h-4 mr-1" />
            Prepare
          </Button>
          <Button
            variant={currentAction === 'enchant' ? 'default' : 'outline'}
            size="sm"
            disabled={!hasAppProgress}
            className={`h-9 ${currentAction === 'enchant' ? 'bg-purple-600 hover:bg-purple-700' : 'bg-gray-800/50 hover:bg-gray-700/50 border-gray-600'}`}
            onClick={() => hasAppProgress && setAction('enchant')}
          >
            <Sparkles className="w-4 h-4 mr-1" />
            Enchant
          </Button>
        </div>
      )}
    </div>
    </div>
  );
 }
 ActionButtons.displayName = "ActionButtons";
 ProgressBar.displayName = "ProgressBar";
@@ -1,19 +0,0 @@
 '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';
@@ -1,103 +0,0 @@
 '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';
@@ -0,0 +1,50 @@
 '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>
  );
 }
@@ -0,0 +1,143 @@
 'use client';
 import { Progress } from '@/components/ui/progress';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { Badge } from '@/components/ui/badge';
 import { Zap, Flame, Sparkles } from 'lucide-react';
 import type { ComboState } from '@/lib/game/types';
 import { ELEMENTS } from '@/lib/game/constants';
 interface ComboMeterProps {
  combo: ComboState;
  isClimbing: boolean;
 }
 export function ComboMeter({ combo, isClimbing }: ComboMeterProps) {
  const comboPercent = Math.min(100, combo.count);
  const multiplierPercent = Math.min(100, ((combo.multiplier - 1) / 2) * 100); // Max 300% = 200% bonus
  // Combo tier names
  const getComboTier = (count: number): { name: string; color: string } => {
    if (count >= 100) return { name: 'LEGENDARY', color: 'text-amber-400' };
    if (count >= 75) return { name: 'Master', color: 'text-purple-400' };
    if (count >= 50) return { name: 'Expert', color: 'text-blue-400' };
    if (count >= 25) return { name: 'Adept', color: 'text-green-400' };
    if (count >= 10) return { name: 'Novice', color: 'text-cyan-400' };
    return { name: 'Building...', color: 'text-gray-400' };
  };
  const tier = getComboTier(combo.count);
  const hasElementChain = combo.elementChain.length === 3 && new Set(combo.elementChain).size === 3;
  if (!isClimbing && combo.count === 0) {
    return null;
  }
  return (
    <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">
          <Zap className="w-4 h-4" />
          Combo Meter
          {combo.count >= 10 && (
            <Badge className={`ml-auto ${tier.color} bg-gray-800`}>
              {tier.name}
            </Badge>
          )}
        </CardTitle>
      </CardHeader>
      <CardContent className="space-y-3">
        {/* Combo Count */}
        <div className="space-y-1">
          <div className="flex justify-between items-center text-sm">
            <span className="text-gray-400">Hits</span>
            <span className={`font-bold ${tier.color}`}>
              {combo.count}
              {combo.maxCombo > combo.count && (
                <span className="text-gray-500 text-xs ml-2">max: {combo.maxCombo}</span>
              )}
            </span>
          </div>
          <Progress 
            value={comboPercent} 
            className="h-2 bg-gray-800"
          />
        </div>
        {/* Multiplier */}
        <div className="space-y-1">
          <div className="flex justify-between items-center text-sm">
            <span className="text-gray-400">Multiplier</span>
            <span className="font-bold text-amber-400">
              {combo.multiplier.toFixed(2)}x
            </span>
          </div>
          <div className="h-2 bg-gray-800 rounded-full overflow-hidden">
            <div
              className="h-full rounded-full transition-all duration-300"
              style={{
                width: `${multiplierPercent}%`,
                background: `linear-gradient(90deg, #F59E0B, #EF4444)`,
              }}
            />
          </div>
        </div>
        {/* Element Chain */}
        {combo.elementChain.length > 0 && (
          <div className="space-y-1">
            <div className="flex justify-between items-center text-sm">
              <span className="text-gray-400">Element Chain</span>
              {hasElementChain && (
                <span className="text-green-400 text-xs">+25% bonus!</span>
              )}
            </div>
            <div className="flex gap-1">
              {combo.elementChain.map((elem, i) => {
                const elemDef = ELEMENTS[elem];
                return (
                  <div
                    key={i}
                    className="w-8 h-8 rounded border flex items-center justify-center text-xs"
                    style={{
                      borderColor: elemDef?.color || '#60A5FA',
                      backgroundColor: `${elemDef?.color}20`,
                      color: elemDef?.color || '#60A5FA',
                    }}
                  >
                    {elemDef?.sym || '?'}
                  </div>
                );
              })}
              {/* Empty slots */}
              {Array.from({ length: 3 - combo.elementChain.length }).map((_, i) => (
                <div
                  key={`empty-${i}`}
                  className="w-8 h-8 rounded border border-gray-700 bg-gray-800/50 flex items-center justify-center text-gray-600"
                >
                  ?
                </div>
              ))}
            </div>
          </div>
        )}
        {/* Decay Warning */}
        {isClimbing && combo.count > 0 && combo.decayTimer <= 3 && (
          <div className="text-xs text-red-400 flex items-center gap-1">
            <Flame className="w-3 h-3" />
            Combo decaying soon!
          </div>
        )}
        {/* Not climbing warning */}
        {!isClimbing && combo.count > 0 && (
          <div className="text-xs text-amber-400 flex items-center gap-1">
            <Sparkles className="w-3 h-3" />
            Resume climbing to maintain combo
          </div>
        )}
      </CardContent>
    </Card>
  );
 }
@@ -0,0 +1,161 @@
 '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;
 }
@@ -1,141 +0,0 @@
 'use client';
 import { useToast } from '@/hooks/use-toast';
 import {
  Toast,
  ToastClose,
  ToastDescription,
  ToastProvider,
  ToastTitle,
  ToastViewport,
 } from '@/components/ui/toast';
 import { cn } from '@/lib/utils';
 import {
  CheckCircle,
  AlertCircle,
  AlertTriangle,
  Info,
  X,
 } from 'lucide-react';
 import type { ReactNode } from 'react';
 // Toast type definitions
 type ToastType = 'success' | 'warning' | 'error' | 'info';
 interface ToastIconProps {
  type: ToastType;
 }
 // Icon mapping for toast types
 function ToastIcon({ type }: ToastIconProps) {
  const iconClass = 'h-4 w-4 shrink-0';
  switch (type) {
    case 'success':
      return <CheckCircle className={cn(iconClass, 'text-[var(--color-success)]')} />;
    case 'warning':
      return <AlertTriangle className={cn(iconClass, 'text-[var(--color-warning)]')} />;
    case 'error':
      return <AlertCircle className={cn(iconClass, 'text-[var(--color-danger)]')} />;
    case 'info':
      return <Info className={cn(iconClass, 'text-[var(--color-info)]')} />;
  }
 }
 // Color mapping for toast types using design system tokens
 const TOAST_TYPE_STYLES: Record<ToastType, string> = {
  success: 'border-[var(--color-success)]/50 bg-[var(--color-success)]/10',
  warning: 'border-[var(--color-warning)]/50 bg-[var(--color-warning)]/10',
  error: 'border-[var(--color-danger)]/50 bg-[var(--color-danger)]/10',
  info: 'border-[var(--color-info)]/50 bg-[var(--color-info)]/10',
 };
 const TOAST_TYPE_TEXT: Record<ToastType, string> = {
  success: 'text-[var(--color-success)]',
  warning: 'text-[var(--color-warning)]',
  error: 'text-[var(--color-danger)]',
  info: 'text-[var(--color-info)]',
 };
 export function GameToaster() {
  const { toasts } = useToast();
  return (
    <ToastProvider>
      {toasts.map((toast) => {
        // Determine toast type from className or default to info
        const toastType: ToastType = 
          toast.variant === 'destructive' ? 'error' :
          (toast as { toastType?: ToastType }).toastType || 'info';
        return (
          <Toast
            key={toast.id}
            className={cn(
              'group pointer-events-auto relative flex w-full items-center justify-between space-x-3 overflow-hidden rounded-md border p-4 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full',
              TOAST_TYPE_STYLES[toastType]
            )}
            {...toast}
          >
            <div className="flex items-start gap-3 flex-1">
              <ToastIcon type={toastType} />
              <div className="grid gap-1 flex-1">
                {toast.title && (
                  <ToastTitle className={cn('text-sm font-semibold', TOAST_TYPE_TEXT[toastType])}>
                    {toast.title}
                  </ToastTitle>
                )}
                {toast.description && (
                  <ToastDescription className="text-xs text-[var(--text-secondary)]">
                    {toast.description}
                  </ToastDescription>
                )}
              </div>
            </div>
            <ToastClose className="absolute right-1 top-1 rounded-md p-1 text-[var(--text-muted)] opacity-0 transition-opacity hover:text-[var(--text-primary)] focus:opacity-100 focus:outline-none focus:ring-1 group-hover:opacity-70">
              <X className="h-3 w-3" />
            </ToastClose>
          </Toast>
        );
      })}
      {/* 
        Viewport positioning:
        - Desktop: bottom-right
        - Mobile: bottom-center, full-width
      */}
      <ToastViewport
        className={cn(
          'fixed z-[100] flex max-h-screen w-full flex-col-reverse p-4',
          // Desktop: bottom-right, fixed width
          'sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col sm:max-w-[420px]',
          // Mobile: bottom-center, full-width
          'max-sm:bottom-0 max-sm:left-0 max-sm:flex-col max-sm:items-center'
        )}
      />
    </ToastProvider>
  );
 }
 // Custom hook to show typed toasts
 export function useGameToast() {
  const { toast } = useToast();
  return (type: ToastType, title: ReactNode, description?: ReactNode) => {
    const toastTypeClass = `toast-type-${type}`;
    return toast({
      title,
      description,
      className: toastTypeClass,
      // Store the type for styling
      ...{ toastType: type },
    } as {
      title: ReactNode;
      description?: ReactNode;
      className?: string;
      toastType?: ToastType;
    });
  };
 }
 export { type ToastType };
@@ -0,0 +1,460 @@
 'use client';
 import { useState } from 'react';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/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 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 {
  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,
 };
 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 [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.values(elements).reduce((a, e) => 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 (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 (
      <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">
            <Gem className="w-4 h-4" />
            Inventory
          </CardTitle>
        </CardHeader>
        <CardContent>
          <div className="text-gray-500 text-sm text-center py-4">
            No items collected yet. Defeat floors and guardians to find loot!
          </div>
        </CardContent>
      </Card>
    );
  }
  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) {
      onDeleteMaterial(deleteConfirm.id, inventory.materials[deleteConfirm.id] || 0);
    } else if (deleteConfirm.type === 'equipment' && onDeleteEquipment) {
      onDeleteEquipment(deleteConfirm.id);
    }
    setDeleteConfirm(null);
  };
  return (
    <>
      <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">
            <Gem className="w-4 h-4" />
            Inventory
            <Badge className="ml-auto bg-gray-800 text-gray-300 text-xs">
              {totalItems} items
            </Badge>
          </CardTitle>
        </CardHeader>
        <CardContent className="space-y-3">
          {/* Search and Filter Controls */}
          <div className="flex gap-2">
            <div className="relative flex-1">
              <Search className="absolute left-2 top-1/2 -translate-y-1/2 w-3 h-3 text-gray-500" />
              <Input
                placeholder="Search..."
                value={searchTerm}
                onChange={(e) => setSearchTerm(e.target.value)}
                className="h-7 pl-7 bg-gray-800/50 border-gray-700 text-xs"
              />
            </div>
            <Button
              variant="outline"
              size="sm"
              className="h-7 px-2 bg-gray-800/50"
              onClick={() => setSortMode(sortMode === 'rarity' ? 'name' : sortMode === 'name' ? 'count' : 'rarity')}
            >
              <ArrowUpDown className="w-3 h-3" />
            </Button>
          </div>
          {/* Filter Tabs */}
          <div className="flex gap-1 flex-wrap">
            {[
              { 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 }) => (
              <Button
                key={mode}
                variant={filterMode === mode ? 'default' : 'outline'}
                size="sm"
                className={`h-6 px-2 text-xs ${filterMode === mode ? 'bg-amber-600 hover:bg-amber-700' : 'bg-gray-800/50'}`}
                onClick={() => setFilterMode(mode)}
              >
                {label}
              </Button>
            ))}
          </div>
          <Separator className="bg-gray-700" />
          <ScrollArea className="h-64">
            <div className="space-y-3">
              {/* Materials */}
              {(filterMode === 'all' || filterMode === 'materials') && filteredMaterials.length > 0 && (
                <div>
                  <div className="text-xs text-gray-500 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 rarityStyle = RARITY_COLORS[drop.rarity];
                      return (
                        <div
                          key={id}
                          className="p-2 rounded border bg-gray-800/50 group relative"
                          style={{
                            borderColor: rarityStyle?.color || '#9CA3AF',
                          }}
                        >
                          <div className="flex items-start justify-between">
                            <div>
                              <div className="text-xs font-semibold" style={{ color: rarityStyle?.color }}>
                                {drop.name}
                              </div>
                              <div className="text-xs text-gray-400">
                                x{count}
                              </div>
                              <div className="text-xs text-gray-500 capitalize">
                                {drop.rarity}
                              </div>
                            </div>
                            {onDeleteMaterial && (
                              <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={() => handleDeleteMaterial(id)}
                              >
                                <Trash2 className="w-3 h-3" />
                              </Button>
                            )}
                          </div>
                        </div>
                      );
                    })}
                  </div>
                </div>
              )}
              {/* Essence */}
              {(filterMode === 'all' || filterMode === 'essence') && filteredEssence.length > 0 && (
                <div>
                  <div className="text-xs text-gray-500 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-gray-800/50"
                          style={{
                            borderColor: elem.color,
                          }}
                        >
                          <div className="flex items-center gap-1">
                            <span style={{ color: elem.color }}>{elem.sym}</span>
                            <span className="text-xs font-semibold" style={{ color: elem.color }}>
                              {elem.name}
                            </span>
                          </div>
                          <div className="text-xs text-gray-400">
                            {state.current} / {state.max}
                          </div>
                        </div>
                      );
                    })}
                  </div>
                </div>
              )}
              {/* Blueprints */}
              {(filterMode === 'all' || filterMode === 'blueprints') && inventory.blueprints.length > 0 && (
                <div>
                  <div className="text-xs text-gray-500 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 rarityStyle = RARITY_COLORS[drop.rarity];
                      return (
                        <Badge
                          key={id}
                          className="text-xs"
                          style={{
                            backgroundColor: `${rarityStyle?.color}20`,
                            color: rarityStyle?.color,
                            borderColor: rarityStyle?.color,
                          }}
                        >
                          {drop.name}
                        </Badge>
                      );
                    })}
                  </div>
                  <div className="text-xs text-gray-500 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-gray-500 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 rarityStyle = RARITY_COLORS[instance.rarity];
                      return (
                        <div
                          key={id}
                          className="p-2 rounded border bg-gray-800/50 group"
                          style={{
                            borderColor: rarityStyle?.color || '#9CA3AF',
                          }}
                        >
                          <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: rarityStyle?.color }} />
                              <div>
                                <div className="text-xs font-semibold" style={{ color: rarityStyle?.color }}>
                                  {instance.name}
                                </div>
                                <div className="text-xs text-gray-400">
                                  {type?.name} • {instance.usedCapacity}/{instance.totalCapacity} cap
                                </div>
                                <div className="text-xs text-gray-500 capitalize">
                                  {instance.rarity} • {instance.enchantments.length} enchants
                                </div>
                              </div>
                            </div>
                            {onDeleteEquipment && (
                              <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={() => handleDeleteEquipment(id)}
                              >
                                <Trash2 className="w-3 h-3" />
                              </Button>
                            )}
                          </div>
                        </div>
                      );
                    })}
                  </div>
                </div>
              )}
            </div>
          </ScrollArea>
        </CardContent>
      </Card>
      {/* Delete Confirmation Dialog */}
      <AlertDialog open={!!deleteConfirm} onOpenChange={() => setDeleteConfirm(null)}>
        <AlertDialogContent className="bg-gray-900 border-gray-700">
          <AlertDialogHeader>
            <AlertDialogTitle className="text-amber-400 flex items-center gap-2">
              <AlertTriangle className="w-5 h-5" />
              Delete Item
            </AlertDialogTitle>
            <AlertDialogDescription className="text-gray-300">
              Are you sure you want to delete <strong>{deleteConfirm?.name}</strong>?
              {deleteConfirm?.type === 'material' && (
                <span className="block mt-2 text-red-400">
                  This will delete ALL {inventory.materials[deleteConfirm?.id || ''] || 0} of this material!
                </span>
              )}
              {deleteConfirm?.type === 'equipment' && (
                <span className="block mt-2 text-red-400">
                  This equipment and all its enchantments will be permanently lost!
                </span>
              )}
            </AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter>
            <AlertDialogCancel className="bg-gray-800 border-gray-700">Cancel</AlertDialogCancel>
            <AlertDialogAction 
              className="bg-red-600 hover:bg-red-700"
              onClick={confirmDelete}
            >
              Delete
            </AlertDialogAction>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>
    </>
  );
 }
@@ -1,46 +0,0 @@
 '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>
  );
 }
@@ -1,87 +0,0 @@
 '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>
  );
 }
@@ -1,55 +0,0 @@
 '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>
  );
 }
@@ -1,86 +0,0 @@
 '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>
  );
 }
@@ -1,15 +0,0 @@
 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,
 };
@@ -1,39 +0,0 @@
 '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)',
 };
@@ -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/stores';
+import { fmt, fmtDec } from '@/lib/game/store';
 import { ELEMENTS } from '@/lib/game/constants';
 import { useState } from 'react';
@@ -33,43 +33,32 @@ export function ManaDisplay({
 }: ManaDisplayProps) {
  const [expanded, setExpanded] = useState(true);
-  // Get unlocked elements with current > 0, sorted by current amount
+  // Get unlocked elements sorted by current amount
  const unlockedElements = Object.entries(elements)
-    .filter(([, state]) => state.unlocked && state.current > 0)
+    .filter(([, state]) => state.unlocked)
    .sort((a, b) => b[1].current - a[1].current);
  return (
-    <Card className="bg-[var(--bg-panel)] border-[var(--border-subtle)]">
+    <Card className="bg-gray-900/80 border-gray-700">
      <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" style={{ color: 'var(--mana-raw)' }}>{fmt(rawMana)}</span>
+            <span className="text-3xl font-bold game-mono text-blue-400">{fmt(rawMana)}</span>
-            <span className="text-sm" style={{ color: 'var(--text-muted)' }}>/ {fmt(maxMana)}</span>
+            <span className="text-sm text-gray-400">/ {fmt(maxMana)}</span>
          </div>
-          <div className="text-xs" style={{ color: 'var(--text-muted)' }}>
+          <div className="text-xs text-gray-400">
-            +{fmtDec(effectiveRegen)} mana/hr {meditationMultiplier > 1.01 && <span style={{ color: 'var(--mana-light)' }}>({fmtDec(meditationMultiplier, 1)}x med)</span>}
+            +{fmtDec(effectiveRegen)} mana/hr {meditationMultiplier > 1.01 && <span className="text-purple-400">({fmtDec(meditationMultiplier, 1)}x med)</span>}
          </div>
        </div>
        <Progress
          value={(rawMana / maxMana) * 100}
-          className="h-2 bg-[var(--bg-sunken)]"
+          className="h-2 bg-gray-800"
          style={{ '--progress-bg': 'var(--mana-raw)' } as React.CSSProperties}
        />
        <Button
-          className={`w-full transition-all text-[var(--font-display)] tracking-wider 
+          className={`w-full bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700 ${isGathering ? 'animate-pulse' : ''}`}
            ${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}
@@ -78,23 +67,22 @@ export function ManaDisplay({
        >
          <Zap className="w-4 h-4 mr-2" />
          Gather +{clickMana} Mana
-          {isGathering && <span className="ml-2 text-xs" style={{ opacity: 0.8 }}>(Holding...)</span>}
+          {isGathering && <span className="ml-2 text-xs">(Holding...)</span>}
        </Button>
        {/* Elemental Mana Pools */}
        {unlockedElements.length > 0 && (
-          <div className="border-t border-[var(--border-subtle)] pt-3 mt-3">
+          <div className="border-t border-gray-700 pt-3 mt-3">
            <button
              onClick={() => setExpanded(!expanded)}
-              className="flex items-center justify-between w-full text-xs transition-colors"
+              className="flex items-center justify-between w-full text-xs text-gray-400 hover:text-gray-300 mb-2"
              style={{ color: 'var(--text-muted)' }}
            >
-              <span style={{ fontFamily: 'var(--font-display)', letterSpacing: '0.5px' }}>ELEMENTAL MANA ({unlockedElements.length})</span>
+              <span>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 mt-2">
+              <div className="grid grid-cols-2 gap-2">
                {unlockedElements.map(([id, state]) => {
                  const elem = ELEMENTS[id];
                  if (!elem) return null;
@@ -102,11 +90,7 @@ export function ManaDisplay({
                  return (
                    <div 
                      key={id} 
-                      className="p-2 transition-all border rounded-sm"
+                      className="p-2 rounded bg-gray-800/50 border border-gray-700"
                      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>
@@ -114,16 +98,16 @@ export function ManaDisplay({
                          {elem.name}
                        </span>
                      </div>
-                      <div className="h-1.5 rounded-full overflow-hidden" style={{ background: 'var(--bg-void)' }}>
+                      <div className="h-1.5 bg-gray-700 rounded-full overflow-hidden mb-1">
                        <div 
-                          className="h-full transition-all rounded-full"
+                          className="h-full rounded-full transition-all"
                          style={{ 
                            width: `${Math.min(100, (state.current / state.max) * 100)}%`,
                            backgroundColor: elem.color 
                          }}
                        />
                      </div>
-                      <div className="text-xs game-mono" style={{ color: 'var(--text-muted)' }}>
+                      <div className="text-xs text-gray-400 game-mono">
                        {fmt(state.current)}/{fmt(state.max)}
                      </div>
                    </div>
@@ -137,5 +121,3 @@ export function ManaDisplay({
    </Card>
  );
 }
 ManaDisplay.displayName = "ManaDisplay";
@@ -0,0 +1,57 @@
 '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>
  );
 }
@@ -1,18 +1,24 @@
 'use client';
-import { fmt } from '@/lib/game/stores';
+import { Play, Pause } from 'lucide-react';
-import { formatHour } from '@/lib/game/utils/formatting';
+import { Button } from '@/components/ui/button';
 import { fmt } from '@/lib/game/store';
 import { formatHour } from '@/lib/game/formatting';
 interface TimeDisplayProps {
  day: number;
  hour: number;
  insight: number;
  paused: boolean;
  onTogglePause: () => void;
 }
 export function TimeDisplay({
  day,
  hour,
  insight,
  paused,
  onTogglePause,
 }: TimeDisplayProps) {
  return (
    <div className="flex items-center gap-4">
@@ -31,8 +37,15 @@ export function TimeDisplay({
        </div>
        <div className="text-xs text-gray-400">Insight</div>
      </div>
      <Button
        variant="ghost"
        size="sm"
        onClick={onTogglePause}
        className="text-gray-400 hover:text-white"
      >
        {paused ? <Play className="w-4 h-4" /> : <Pause className="w-4 h-4" />}
      </Button>
    </div>
  );
 }
 TimeDisplay.displayName = "TimeDisplay";
@@ -1,5 +1,6 @@
 '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';
@@ -32,6 +33,7 @@ export function UpgradeDialog({
 }: UpgradeDialogProps) {
  if (!skillId) return null;
  const skillDef = SKILLS_DEF[skillId];
  const currentSelections = pendingSelections.length > 0 ? pendingSelections : alreadySelected;
  return (
@@ -39,7 +41,7 @@ export function UpgradeDialog({
      <DialogContent className="bg-gray-900 border-gray-700 max-w-lg">
        <DialogHeader>
          <DialogTitle className="text-amber-400">
-            Choose Upgrade - {skillId}
+            Choose Upgrade - {skillDef?.name || skillId}
          </DialogTitle>
          <DialogDescription className="text-gray-400">
            Level {milestone} Milestone - Select 2 upgrades ({currentSelections.length}/2 chosen)
@@ -111,5 +113,3 @@ export function UpgradeDialog({
    </Dialog>
  );
 }
 UpgradeDialog.displayName = "UpgradeDialog";
@@ -1,280 +0,0 @@
 'use client';
 import { useState } from 'react';
 import { ActionButton } from '@/components/ui/action-button';
 import { GameCard } from '@/components/ui/game-card';
 import { SectionHeader } from '@/components/ui/section-header';
 import { StatRow } from '@/components/ui/stat-row';
 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 } 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 {
  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;
 }
 export function EnchantmentApplier({
  selectedEquipmentInstance,
  setSelectedEquipmentInstance,
  selectedDesign,
  setSelectedDesign,
  onEnchantmentApplied,
  onCapacityExceeded,
 }: EnchantmentApplierProps) {
  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)
    .filter(([, instanceId]) => instanceId && equipmentInstances[instanceId])
    .map(([slot, instanceId]) => ({
      slot: slot as EquipmentSlot,
      instance: equipmentInstances[instanceId!],
    }))
    .filter(({ instance }) => instance.tags?.includes('Ready for Enchantment'));
  // Handle apply button click
  const handleApply = () => {
    if (!selectedEquipmentInstance || !selectedDesign) return;
    const instance = equipmentInstances[selectedEquipmentInstance];
    const design = enchantmentDesigns.find(d => d.id === selectedDesign);
    if (!instance || !design) return;
    // Check capacity
    const availableCap = instance.totalCapacity - instance.usedCapacity;
    if (availableCap < design.totalCapacityUsed) {
      onCapacityExceeded?.(instance.name, instance.usedCapacity, instance.totalCapacity);
      return;
    }
    startApplying(selectedEquipmentInstance, selectedDesign);
  };
  return (
    <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
      {/* Equipment & Design Selection */}
      <GameCard variant="default">
        <SectionHeader title="Select Equipment & Design" />
        {applicationProgress ? (
          <div className="space-y-3">
            <div className="text-sm text-[var(--text-secondary)]">
              Applying to: {equipmentInstances[applicationProgress.equipmentInstanceId]?.name}
            </div>
            <div className="h-3 bg-[var(--bg-sunken)] rounded-full overflow-hidden">
              <div
                className="h-full bg-[var(--mana-light)] transition-all duration-300"
                style={{ width: `${(applicationProgress.progress / applicationProgress.required) * 100}%` }}
              />
            </div>
            <div className="flex justify-between text-xs text-[var(--text-muted)]">
              <span>{applicationProgress.progress.toFixed(1)}h / {applicationProgress.required.toFixed(1)}h</span>
              <span>Mana spent: {fmt(applicationProgress.manaSpent)}</span>
            </div>
            <div className="flex gap-2">
              {applicationProgress.paused ? (
                <ActionButton size="sm" onClick={resumeApplication}>Resume</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
                  }}>Cancel</ActionButton>
                </>
              )}
            </div>
          </div>
        ) : (
          <div className="space-y-4">
            <div>
              <div className="text-sm text-[var(--text-muted)] mb-2">
                Equipment (Ready for Enchantment):
              </div>
              <ScrollArea className="h-32">
                <div className="space-y-1">
                  {equippedItems.map(({ slot, instance }) => (
                    <div
                      key={instance.instanceId}
                      className={`p-2 rounded border cursor-pointer text-sm transition-all
                        ${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}
                      aria-label={`Select ${instance.name} (Ready for Enchantment)`}
                    >
                      <div className="flex items-center justify-between">
                        <span className="text-[var(--text-primary)]">{instance.name}</span>
                        <span className="text-xs text-[var(--text-muted)]">
                          ({instance.usedCapacity}/{instance.totalCapacity} cap)
                        </span>
                      </div>
                      <div className="text-xs text-[var(--color-success)] mt-1">
                        <CheckCircle size={10} className="inline mr-1" />
                        Ready
                      </div>
                    </div>
                  ))}
                  {equippedItems.length === 0 && (
                    <div className="text-center text-[var(--text-muted)] text-xs py-2">
                      No equipment ready for enchantment.
                      <br />
                      Prepare equipment first in the Prepare stage.
                    </div>
                  )}
                </div>
              </ScrollArea>
            </div>
            <div>
              <div className="text-sm text-[var(--text-muted)] mb-2">Design:</div>
              <ScrollArea className="h-32">
                <div className="space-y-1">
                  {enchantmentDesigns.map(design => (
                    <div
                      key={design.id}
                      className={`p-2 rounded border cursor-pointer text-sm transition-all
                        ${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}
                      aria-label={`Select design: ${design.name}`}
                    >
                      <span className="text-[var(--text-primary)]">{design.name}</span>
                      <span className="text-xs text-[var(--text-muted)] ml-2">
                        ({design.totalCapacityUsed} cap)
                      </span>
                    </div>
                  ))}
                  {enchantmentDesigns.length === 0 && (
                    <div className="text-center text-[var(--text-muted)] text-xs py-2">
                      No designs available. Create one in the Design stage.
                    </div>
                  )}
                </div>
              </ScrollArea>
            </div>
          </div>
        )}
      </GameCard>
      {/* Application Details */}
      <GameCard variant="default">
        <SectionHeader title="Apply Enchantment" />
        {!selectedEquipmentInstance || !selectedDesign ? (
          <div className="text-center text-[var(--text-muted)] py-8">
            Select equipment and a design
          </div>
        ) : applicationProgress ? (
          <div className="text-[var(--text-secondary)]">Application in progress...</div>
        ) : (
          (() => {
            const instance = equipmentInstances[selectedEquipmentInstance];
            if (!instance) return null;
            // Check if equipment is ready for enchantment
            const isReady = instance.tags?.includes('Ready for Enchantment');
            if (!isReady) {
              return (
                <div className="text-center text-[var(--color-danger)] py-8">
                  This equipment is not prepared for enchantment. Please prepare it in the Prepare stage first.
                </div>
              );
            }
            const design = enchantmentDesigns.find(d => d.id === selectedDesign);
            if (!design) return null;
            const availableCap = instance.totalCapacity - instance.usedCapacity;
            const canFit = availableCap >= design.totalCapacityUsed;
            const applicationTime = 2 + design.effects.reduce((t, e) => t + e.stacks, 0);
            const manaPerHour = 20 + design.effects.reduce((t, e) => t + e.stacks * 5, 0);
            return (
              <div className="space-y-4">
                <div className="text-lg font-semibold text-[var(--text-primary)]">{design.name}</div>
                <div className="text-sm text-[var(--text-secondary)]">→ {instance.name}</div>
                <div className="text-xs text-[var(--color-success)]">
                  <CheckCircle size={12} className="inline mr-1" />
                  Ready for Enchantment
                </div>
                <Separator className="bg-[var(--border-subtle)]" />
                <div className="space-y-2 text-sm">
                  <StatRow
                    label="Required Capacity:"
                    value={
                      <span className={canFit ? 'text-[var(--color-success)]' : 'text-[var(--color-danger)]'}>
                        {design.totalCapacityUsed} / {availableCap} available
                      </span>
                    }
                    highlight={canFit ? 'success' : 'danger'}
                  />
                  <StatRow
                    label="Application Time:"
                    value={`${applicationTime}h`}
                    highlight="default"
                  />
                  <StatRow
                    label="Mana per Hour:"
                    value={manaPerHour}
                    highlight="default"
                  />
                </div>
                <div className="text-sm text-[var(--text-muted)]">
                  Effects:
                  <ul className="list-disc list-inside mt-1">
                    {design.effects.map(eff => (
                      <li key={eff.effectId} className="text-[var(--text-secondary)]">
                        {ENCHANTMENT_EFFECTS[eff.effectId]?.name} x{eff.stacks}
                      </li>
                    ))}
                  </ul>
                </div>
                <ActionButton
                  className="w-full"
                  disabled={!canFit}
                  onClick={handleApply}
                >
                  <Sparkles size={16} className="mr-2" />
                  Apply Enchantment
                </ActionButton>
              </div>
            );
          })()
        )}
      </GameCard>
    </div>
  );
 }
 EnchantmentApplier.displayName = 'EnchantmentApplier';
@@ -1,150 +0,0 @@
 'use client';
 import { useState, useMemo } from 'react';
 import { GameCard } from '@/components/ui/game-card';
 import { Separator } from '@/components/ui/separator';
 import { EQUIPMENT_TYPES } from '@/lib/game/data/equipment';
 import { ENCHANTMENT_EFFECTS } from '@/lib/game/data/enchantment-effects';
 import type { EquipmentInstance, EnchantmentDesign, DesignEffect, EquipmentCraftingProgress, EquipmentCategory } from '@/lib/game/types';
 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({
  selectedEquipmentType,
  setSelectedEquipmentType,
  selectedEffects,
  setSelectedEffects,
  designName,
  setDesignName,
  selectedDesign,
  setSelectedDesign,
 }: EnchantmentDesignerProps) {
  // 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 = calculateDesignCapacityCost(selectedEffects, 0);
  // Get capacity limit for selected equipment type
  const selectedEquipmentCapacity = getEquipmentCapacity(selectedEquipmentType);
  // Calculate design time
  const designTime = calculateDesignTime(selectedEffects);
  // Add effect to design
  const addEffect = (effectId: string) => {
    addEffectToDesign(effectId, selectedEffects, 0, setSelectedEffects);
  };
  // Remove effect from design
  const removeEffect = (effectId: string) => {
    removeEffectFromDesign(effectId, selectedEffects, setSelectedEffects);
  };
  // Create design
  const handleCreateDesign = () => {
    if (!designName || !selectedEquipmentType || selectedEffects.length === 0) return;
    const success = startDesigningEnchantment(designName, selectedEquipmentType, selectedEffects);
    if (success) {
      // Reset form
      setDesignName('');
      setSelectedEquipmentType(null);
      setSelectedEffects([]);
    }
  };
  // Get available effects for selected equipment type (only unlocked ones)
  const availableEffects = getAvailableEffects(selectedEquipmentType, unlockedEffects);
  // Get incompatible effects (unlocked but not for this equipment type)
  const incompatibleEffects = getIncompatibleEffects(selectedEquipmentType, unlockedEffects);
  // Get equipment types that the player actually owns (has instances of)
  const ownedEquipmentTypes = getOwnedEquipmentTypes(equipmentInstances);
  // Get the reason why an effect is incompatible
  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 */}
      <EquipmentTypeSelector
        ownedEquipmentTypes={ownedEquipmentTypes}
        selectedEquipmentType={selectedEquipmentType}
        setSelectedEquipmentType={setSelectedEquipmentType}
        designProgress={designProgress}
        cancelDesign={cancelDesign}
      />
      {/* Effect Selection */}
      <GameCard variant="default">
        <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 && (
          <>
            <Separator className="bg-[var(--border-subtle)] my-2" />
            <DesignForm
              designName={designName}
              setDesignName={setDesignName}
              selectedEffects={selectedEffects}
              designCapacityCost={designCapacityCost}
              selectedEquipmentCapacity={selectedEquipmentCapacity}
              isOverCapacity={designCapacityCost > selectedEquipmentCapacity}
              designTime={designTime}
              selectedEquipmentType={selectedEquipmentType}
              handleCreateDesign={handleCreateDesign}
            />
          </>
        )}
      </GameCard>
      {/* Saved Designs */}
      <SavedDesigns
        enchantmentDesigns={enchantmentDesigns}
        selectedDesign={selectedDesign}
        setSelectedDesign={setSelectedDesign}
        deleteDesign={deleteDesign}
      />
    </div>
  );
 }
 EnchantmentDesigner.displayName = 'EnchantmentDesigner';
@@ -1,52 +0,0 @@
 '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';
@@ -1,152 +0,0 @@
 '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';
@@ -1,67 +0,0 @@
 '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';
@@ -1,69 +0,0 @@
 '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';
@@ -1,53 +0,0 @@
 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;
 }
@@ -1,163 +0,0 @@
 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));
  }
 }
@@ -1,304 +0,0 @@
 'use client';
 import { useState } from 'react';
 import { ActionButton } from '@/components/ui/action-button';
 import { GameCard } from '@/components/ui/game-card';
 import { SectionHeader } from '@/components/ui/section-header';
 import { StatRow } from '@/components/ui/stat-row';
 import { Badge } from '@/components/ui/badge';
 import { ScrollArea } from '@/components/ui/scroll-area';
 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 } 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 {
  selectedEquipmentInstance: string | null;
  setSelectedEquipmentInstance: (id: string | null) => void;
 }
 export function EnchantmentPreparer({
  selectedEquipmentInstance,
  setSelectedEquipmentInstance,
 }: EnchantmentPreparerProps) {
  const showToast = useGameToast();
  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)
    .filter(([, instanceId]) => instanceId && equipmentInstances[instanceId])
    .map(([slot, instanceId]) => ({
      slot: slot as EquipmentSlot,
      instance: equipmentInstances[instanceId!],
    }));
  // Confirm dialog state
  const [showConfirmDialog, setShowConfirmDialog] = useState(false);
  const handleStartPreparation = () => {
    if (!selectedEquipmentInstance) return;
    const instance = equipmentInstances[selectedEquipmentInstance];
    if (!instance) return;
    // If item has existing enchantments, show confirm dialog (bug #8)
    if (instance.enchantments.length > 0) {
      setShowConfirmDialog(true);
    } else {
      startPreparingWithToast(selectedEquipmentInstance);
    }
  };
  const startPreparingWithToast = (instanceId: string) => {
    const instance = equipmentInstances[instanceId];
    startPreparing(instanceId);
    if (instance) {
      showToast('info', 'Preparation Started', `Preparing ${instance.name} for enchantment...`);
    }
  };
  const confirmPreparation = () => {
    if (selectedEquipmentInstance) {
      startPreparingWithToast(selectedEquipmentInstance);
      setShowConfirmDialog(false);
    }
  };
  return (
    <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
      {/* Equipment Selection */}
      <GameCard variant="default">
        <SectionHeader title="Select Equipment to Prepare" />
        {preparationProgress ? (
          <div className="space-y-3">
            <div className="text-sm text-[var(--text-secondary)]">
              Preparing: {equipmentInstances[preparationProgress.equipmentInstanceId]?.name}
            </div>
            <div className="h-3 bg-[var(--bg-sunken)] rounded-full overflow-hidden">
              <div
                className="h-full bg-[var(--color-warning)] transition-all duration-300"
                style={{ width: `${(preparationProgress.progress / preparationProgress.required) * 100}%` }}
              />
            </div>
            <div className="flex justify-between text-xs text-[var(--text-muted)]">
              <span>{preparationProgress.progress.toFixed(1)}h / {preparationProgress.required.toFixed(1)}h</span>
              <span>Mana paid: {fmt(preparationProgress.manaCostPaid)}</span>
            </div>
            <ActionButton size="sm" variant="outline" onClick={() => {
              cancelPreparation();
              showToast('warning', 'Preparation Cancelled', 'Equipment preparation was cancelled.');
            }}>Cancel</ActionButton>
          </div>
        ) : (
          <ScrollArea className="h-64">
            <div className="space-y-2">
              {equippedItems.map(({ slot, instance }) => {
                const hasEnchantments = instance.enchantments.length > 0;
                const isReady = instance.tags?.includes('Ready for Enchantment');
                return (
                  <div
                    key={instance.instanceId}
                    className={`p-3 rounded border cursor-pointer transition-all
                      ${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)]'
                      }
                      ${hasEnchantments ? 'border-l-4 border-l-[var(--color-danger)]' : ''}
                      ${isReady ? 'border-l-4 border-l-[var(--color-success)]' : ''}
                    `}
                    onClick={() => setSelectedEquipmentInstance(instance.instanceId)}
                    role="button"
                    tabIndex={0}
                    aria-label={`${instance.name}${hasEnchantments ? ' (has enchantments)' : ''}${isReady ? ' (ready for enchantment)' : ''}`}
                  >
                    <div className="flex justify-between">
                      <div>
                        <div className="font-semibold text-[var(--text-primary)]">{instance.name}</div>
                        <div className="text-xs text-[var(--text-muted)]">{slot}</div>
                        {hasEnchantments && (
                          <div className="text-xs text-[var(--color-danger)] mt-1">
                            <AlertTriangle size={12} className="inline mr-1" />
                            {instance.enchantments.length} enchantments - Preparation will remove them
                          </div>
                        )}
                        {isReady && (
                          <div className="text-xs text-[var(--color-success)] mt-1">
                            <CheckCircle size={12} className="inline mr-1" />
                            Ready for Enchantment
                          </div>
                        )}
                      </div>
                      <div className="text-right text-sm">
                        <div className="text-[var(--color-success)]">{instance.usedCapacity}/{instance.totalCapacity} cap</div>
                        <div className="text-xs text-[var(--text-muted)]">{instance.enchantments.length} enchants</div>
                        {/* Requirement: Visual badge for 'Ready for Enchantment' */}
                        {isReady && (
                          <Badge className="mt-1 bg-[var(--color-success)]/20 text-[var(--color-success)] border-[var(--color-success)]/40">
                            <CheckCircle size={10} className="mr-1" />
                            Ready
                          </Badge>
                        )}
                      </div>
                    </div>
                  </div>
                );
              })}
              {equippedItems.length === 0 && (
                <div className="text-center text-[var(--text-muted)] py-4">No equipped items</div>
              )}
            </div>
          </ScrollArea>
        )}
      </GameCard>
      {/* Preparation Details */}
      <GameCard variant="default">
        <SectionHeader title="Preparation Details" />
        {!selectedEquipmentInstance ? (
          <div className="text-center text-[var(--text-muted)] py-8">
            Select equipment to prepare
          </div>
        ) : preparationProgress ? (
          <div className="text-[var(--text-secondary)]">Preparation in progress...</div>
        ) : (
          (() => {
            const instance = equipmentInstances[selectedEquipmentInstance];
            if (!instance) return null;
            const hasEnchantments = instance.enchantments.length > 0;
            const isReady = instance.tags?.includes('Ready for Enchantment');
            const prepTime = 2 + Math.floor(instance.totalCapacity / 50);
            const manaCost = instance.totalCapacity * 10;
            // Calculate disenchant recovery
            const recoveryRate = 0.1; // Base recovery rate
            const totalRecoverable = instance.enchantments.reduce(
              (sum, e) => sum + Math.floor(e.actualCost * recoveryRate),
              0
            );
            return (
              <div className="space-y-4">
                <div className="text-lg font-semibold text-[var(--text-primary)]">{instance.name}</div>
                <Separator className="bg-[var(--border-subtle)]" />
                {/* Show warning if item has enchantments - Requirement: button reads "Prepare — removes existing enchantments" */}
                {hasEnchantments && !isReady && (
                  <div className="p-3 rounded border border-[var(--color-danger)]/50 bg-[var(--color-danger)]/10">
                    <div className="text-sm font-semibold text-[var(--color-danger)]">
                      <AlertTriangle size={14} className="inline mr-1" />
                      Equipment has enchantments
                    </div>
                    <div className="text-xs text-[var(--text-muted)] mt-1">
                      Preparation will remove all existing enchantments and recover some mana.
                    </div>
                    <div className="flex justify-between text-sm mt-2">
                      <span className="text-[var(--text-muted)]">Recoverable Mana:</span>
                      <span className="text-[var(--color-success)]">{fmt(totalRecoverable)}</span>
                    </div>
                  </div>
                )}
                {/* Show ready status */}
                {isReady && (
                  <div className="p-3 rounded border border-[var(--color-success)]/50 bg-[var(--color-success)]/10">
                    <div className="text-sm font-semibold text-[var(--color-success)]">
                      <CheckCircle size={14} className="inline mr-1" />
                      Ready for Enchantment
                    </div>
                    <div className="text-xs text-[var(--text-muted)] mt-1">
                      This item has been prepared and is ready for enchantment application.
                    </div>
                  </div>
                )}
                <div className="space-y-2 text-sm">
                  <StatRow
                    label="Capacity:"
                    value={`${instance.usedCapacity}/${instance.totalCapacity}`}
                    highlight="default"
                  />
                  <StatRow
                    label="Prep Time:"
                    value={`${prepTime}h`}
                    highlight="default"
                  />
                  <StatRow
                    label="Mana Cost:"
                    value={
                      <span className={rawMana < manaCost ? 'text-[var(--color-danger)]' : 'text-[var(--color-success)]'}>
                        {fmt(manaCost)}
                      </span>
                    }
                    highlight={rawMana < manaCost ? 'danger' : 'success'}
                  />
                </div>
                {/* Requirement (bug #8): Confirm dialog before proceeding if item has enchantments */}
                <AlertDialog open={showConfirmDialog} onOpenChange={setShowConfirmDialog}>
                  <AlertDialogTrigger asChild>
                    <ActionButton
                      className="w-full"
                      disabled={rawMana < manaCost || isReady}
                      onClick={handleStartPreparation}
                    >
                      {hasEnchantments ? (
                        <>
                          <Trash2 size={16} className="mr-2" />
                          Prepare — removes existing enchantments ({prepTime}h, {fmt(manaCost)} mana)
                        </>
                      ) : (
                        <>Start Preparation ({prepTime}h, {fmt(manaCost)} mana)</>
                      )}
                    </ActionButton>
                  </AlertDialogTrigger>
                  <AlertDialogContent className="bg-[var(--bg-elevated)] border-[var(--border-default)] text-[var(--text-primary)]">
                    <AlertDialogHeader>
                      <AlertDialogTitle className="text-[var(--color-danger)]">
                        <AlertTriangle className="inline mr-2" size={18} />
                        Confirm Preparation
                      </AlertDialogTitle>
                      <AlertDialogDescription className="text-[var(--text-secondary)]">
                        This equipment has {instance.enchantments.length} existing enchantment(s). Preparation will
                        <strong className="text-[var(--color-danger)]"> permanently remove</strong> all existing enchantments
                        and recover approximately <strong className="text-[var(--color-success)]">{fmt(totalRecoverable)} mana</strong>.
                        <div className="mt-2 p-2 bg-[var(--bg-sunken)]/50 rounded text-xs">
                          Equipment: {instance.name}<br />
                          Enchantments to remove: {instance.enchantments.length}
                        </div>
                      </AlertDialogDescription>
                    </AlertDialogHeader>
                    <AlertDialogFooter>
                      <AlertDialogCancel
                        className="bg-[var(--bg-sunken)] border-[var(--border-default)] text-[var(--text-primary)] hover:bg-[var(--bg-elevated)]"
                        onClick={() => setShowConfirmDialog(false)}
                      >
                        Cancel
                      </AlertDialogCancel>
                      <AlertDialogAction
                        className="bg-[var(--color-danger)] hover:bg-[var(--interactive-danger-hover)] text-white"
                        onClick={confirmPreparation}
                      >
                        Yes, Remove Enchantments & Prepare
                      </AlertDialogAction>
                    </AlertDialogFooter>
                  </AlertDialogContent>
                </AlertDialog>
              </div>
            );
          })()
        )}
      </GameCard>
    </div>
  );
 }
 EnchantmentPreparer.displayName = 'EnchantmentPreparer';
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
zhipu	4748b81fe6	feat: implement attunement leveling and debug functions Build and Publish Mana Loop Docker Image / build-and-publish (push) Successful in 2m4s Details - Add attunement XP system with level-scaled progression (100 * 3^(level-2) XP per level) - Add addAttunementXP function with automatic level-up handling - Add debug functions: debugUnlockAttunement, debugAddElementalMana, debugSetTime, debugAddAttunementXP, debugSetFloor - Update attunement conversion to use level-scaled conversion rate - Import getAttunementConversionRate, getAttunementXPForLevel, MAX_ATTUNEMENT_LEVEL in store	2026-03-27 18:55:22 +00:00
zhipu	a1b15cea74	feat: add attunement leveling system, debug tab, and UI improvements - Add mana pools display to ManaDisplay component with collapsible elements - Add Debug tab with reset game, mana debug, time control, attunement unlock, element unlock - Remove ComboMeter from UI (header and SpireTab) - Remove 'scrollCrafting' capability from Enchanter attunement - Add attunement level scaling (exponential with level) - Add XP progress bar and level display in AttunementsTab - Add getAttunementConversionRate and getAttunementXPForLevel functions - MAX_ATTUNEMENT_LEVEL = 10 with 3^level XP scaling	2026-03-27 18:51:13 +00:00
zhipu	e0a3d82dea	docs: update worklog with loot inventory and achievement fixes Build and Publish Mana Loop Docker Image / build-and-publish (push) Successful in 40s Details	2026-03-27 18:11:18 +00:00
zhipu	e7ce998cee	fix: add missing AchievementState type and stats tracking Build and Publish Mana Loop Docker Image / build-and-publish (push) Has been cancelled Details - Added AchievementDef interface for achievement definitions - Added AchievementState interface for tracking unlocked achievements - Added achievements, totalSpellsCast, totalDamageDealt, totalCraftsCompleted to GameState - Added default values for all new fields in makeInitial() - Added all new fields to persist partialize function - Fixes build error with achievements and stats tracking	2026-03-27 18:10:55 +00:00
zhipu	30eb6b93a8	fix: add missing LootInventory type and lootInventory state Build and Publish Mana Loop Docker Image / build-and-publish (push) Failing after 1m15s Details - Added LootInventory interface to types.ts with materials and blueprints - Added lootInventory field to GameState interface - Added default lootInventory state to makeInitial() in store.ts - Added lootInventory to persist partialize function - Fixes prerender error: 'Cannot read properties of undefined (reading materials)'	2026-03-27 18:09:05 +00:00
zhipu	9ac6fe6ec8	docs: update worklog with combo state fix Build and Publish Mana Loop Docker Image / build-and-publish (push) Failing after 1m17s Details	2026-03-27 18:06:08 +00:00
zhipu	af3f59b259	fix: add missing ComboState type and default combo state Build and Publish Mana Loop Docker Image / build-and-publish (push) Has been cancelled Details - Added ComboState interface to types.ts with count, maxCombo, multiplier, elementChain, decayTimer - Added combo field to GameState interface - Added default combo state to makeInitial() in store.ts - Added combo and attunements to persist partialize function - Fixes prerender error: 'Cannot read properties of undefined (reading count)'	2026-03-27 18:05:49 +00:00
zhipu	3df971488a	docs: update worklog with build fix details Build and Publish Mana Loop Docker Image / build-and-publish (push) Failing after 1m27s Details	2026-03-27 17:59:46 +00:00
zhipu	227e1b7183	fix: correct imports for getActiveEquipmentSpells and getTotalDPS Build and Publish Mana Loop Docker Image / build-and-publish (push) Failing after 1m12s Details - Import getActiveEquipmentSpells and getTotalDPS from computed-stats.ts instead of store.ts - Remove duplicate local function definition in SpireTab.tsx - Clean up unused imports	2026-03-27 17:58:00 +00:00
zhipu	ae7fb8f6fc	feat: Add Attunements tab UI and filter skills by attunement access Build and Publish Mana Loop Docker Image / build-and-publish (push) Failing after 1m14s Details - Create AttunementsTab component with visual display of all 3 attunements - Show primary mana type, regen stats, and capabilities for each attunement - Add visual effects for active attunements (color, glow) - Filter skill categories based on active attunements in SkillsTab - Add attunement tab navigation in main page - Display available skill categories summary in AttunementsTab	2026-03-27 17:05:04 +00:00
zhipu	c51c8d8ff4	feat: Implement attunement system with 3 attunements Build and Publish Mana Loop Docker Image / build-and-publish (push) Failing after 1m14s Details - Add attunement types and state to game state - Create attunements.ts with Enchanter, Invoker, Fabricator definitions - Player starts with Enchanter attunement (right hand) - Enchanter: transference mana, unlocks enchanting - Invoker: gains mana types from pacts with guardians - Fabricator: earth mana, crafts golems and earthen/metal gear - Skills now have attunement field for categorization - Update skill categories to be attunement-based	2026-03-27 16:53:35 +00:00
zhipu	b2262fd6ac	docs: Update worklog with attunement system progress Build and Publish Mana Loop Docker Image / build-and-publish (push) Successful in 26s Details	2026-03-27 16:05:15 +00:00
zhipu	7bf9fa3ff2	feat: Update starting message for attunement system Build and Publish Mana Loop Docker Image / build-and-publish (push) Has been cancelled Details - Change log message to reflect the Enchanter attunement - Hint at the six other attunements hidden in the spire	2026-03-27 16:04:00 +00:00
zhipu	75026fcb0b	feat: Implement attunement mana conversion Build and Publish Mana Loop Docker Image / build-and-publish (push) Failing after 1m26s Details - Add auto-conversion of raw mana to primary mana types in tick - Each attunement converts raw mana at its defined rate - Conversion scales with attunement level (+10% per level) - Update state in tick to track primaryMana changes	2026-03-27 16:01:52 +00:00
zhipu	d459276dcc	feat: Initialize attunement state in game store Build and Publish Mana Loop Docker Image / build-and-publish (push) Successful in 3m8s Details - Add attunement state to makeInitial function - Player starts with Enchanter attunement (right hand) unlocked - Initialize all 7 attunement slots with default state - Add primaryMana and primaryManaMax for all mana types - Start with 10 transference mana (Enchanter's primary type)	2026-03-27 15:57:49 +00:00
zhipu	93e41cfc76	feat: Add attunement system foundation Build and Publish Mana Loop Docker Image / build-and-publish (push) Has been cancelled Details - Create attunements.ts with 7 attunement types: - Enchanter (right hand) - Transference mana, enchanting - Caster (left hand) - Form mana, spell damage - Seer (head) - Vision mana, critical hits - Warden (back) - Barrier mana, defense - Invoker (chest) - Guardian pact mana types - Strider (left leg) - Flow mana, speed - Anchor (right leg) - Stability mana, max mana - Add AttunementState, ManaType types - Add attunement fields to GameState - Update SkillDef to include attunement field	2026-03-27 15:54:13 +00:00
zhipu	8a62a4faaf	fix: Remove problematic effects and ensure insight only gained on loop reset Build and Publish Mana Loop Docker Image / build-and-publish (push) Successful in 1m54s Details - Remove armor pierce, mana equilibrium, perfect memory, free study, mind palace, elemental harmony, deep storage, double craft, pure elements - Replace with balanced alternatives: first strike, flow mastery, quick grasp, efficient learning, deep understanding, elemental affinity, mana overflow, elemental surge, exotic mastery - Remove insight-gaining effects (studyInsight, manaAscension, knowledgeOverflow, studyMastery) - Ensure insight can ONLY be gained on loop reset - Remove conversion-related upgrades (conversion not available to players) - Fix duplicate effect IDs	2026-03-27 13:55:26 +00:00
zhipu	d0ecbfefd9	Update worklog with audit findings Build and Publish Mana Loop Docker Image / build-and-publish (push) Successful in 26s Details	2026-03-27 11:29:17 +00:00
zhipu	e9e056a3f0	Fix critical bugs, add test framework, improve code quality Build and Publish Mana Loop Docker Image / build-and-publish (push) Has been cancelled Details - Fix syntax errors with missing brackets in store.ts and crafting-slice.ts - Fix state mutation issues with lootInventory deep cloning - Remove race condition from mid-tick set() call - Fix COMBO_MASTER using wrong counter (totalTicks vs totalSpellsCast) - Add null safety to hasSpecial() function - Clamp mana to 0 in deductSpellCost() to prevent negative values - Set up Vitest testing framework with 36 passing tests	2026-03-27 11:28:30 +00:00
zhipu	b3e358e9a7	Update worklog with study system fixes Build and Publish Mana Loop Docker Image / build-and-publish (push) Successful in 26s Details	2026-03-27 09:36:16 +00:00
zhipu	2f407071a4	Fix study system: per-hour mana cost instead of upfront, fix game time freeze bug, improve mobile UI Build and Publish Mana Loop Docker Image / build-and-publish (push) Successful in 1m43s Details	2026-03-27 09:33:48 +00:00
zhipu	a5e37b9b24	Fix UI issues: Equipment tab, remove manual floor navigation and element conversion Build and Publish Mana Loop Docker Image / build-and-publish (push) Successful in 1m34s Details - Fix EquipmentTab props interface - Fix ActionButtons to receive correct props - Remove manual ascend/descend floor buttons - floor changes automatically after clearing - Remove Element Conversion section from LabTab - Remove Unlock Elements section from LabTab - Remove Convert action from ActionButtons - Simplify SpireTab to be self-contained with just store prop	2026-03-26 16:47:50 +00:00
zhipu	5416b327af	Update Dockerfile to run as root user Build and Publish Mana Loop Docker Image / build-and-publish (push) Successful in 1m35s Details Remove non-root user creation and USER directive to allow root privileges for custom steps	2026-03-26 16:23:40 +00:00
zhipu	fa713a15b5	Fix prerender error: correct component props Build and Publish Mana Loop Docker Image / build-and-publish (push) Successful in 2m0s Details - Fix ComboMeter to receive combo object and isClimbing flag - Fix LootInventoryDisplay to receive correct inventory and callbacks - Fix AchievementsDisplay to receive required gameState props	2026-03-26 16:18:54 +00:00
zhipu	378e434d44	Fix build errors and add Equipment tab Build and Publish Mana Loop Docker Image / build-and-publish (push) Failing after 1m7s Details - Create missing StudyProgress component for SkillsTab - Create missing UpgradeDialog component for SkillsTab - Add EquipmentTab with gear selection interface - Shows all 8 equipment slots with equipped items - Displays inventory of unequipped items - Allows equipping/unequipping gear - Shows equipment stats summary and active effects	2026-03-26 16:02:56 +00:00
zhipu	a2c9af7d45	Remove familiar system to focus on guardian pacts Build and Publish Mana Loop Docker Image / build-and-publish (push) Failing after 1m11s Details - Remove familiar-slice.ts, familiars.ts data file, and FamiliarTab.tsx - Remove all familiar types from types.ts (FamiliarRole, FamiliarAbilityType, etc.) - Remove familiar state from GameState interface - Remove familiar bonuses from combat calculations - Remove familiar XP tracking from tick function - Remove familiar tab from page.tsx UI This simplifies the game to focus on guardian pacts as the primary progression mechanic, avoiding the parallel familiar system that diluted the importance of pacts.	2026-03-26 14:58:07 +00:00
zhipu	c050ca3814	Remove Battle Fury consecutive hit multiplier feature Build and Publish Mana Loop Docker Image / build-and-publish (push) Failing after 1m17s Details - Remove BATTLE_FURY from SPECIAL_EFFECTS constant - Remove consecutiveHits from GameState type - Remove consecutive hit tracking from store.ts - Replace Battle Fury upgrade with Critical Eye (+10% crit chance) - Clean up computeDynamicDamage function signature	2026-03-26 13:59:59 +00:00
zhipu	44d9e0a835	docs: Update worklog with session summary Build and Publish Mana Loop Docker Image / build-and-publish (push) Failing after 1m7s Details	2026-03-26 13:41:57 +00:00
zhipu	3ce0bea13f	feat: Implement study special effects Build and Publish Mana Loop Docker Image / build-and-publish (push) Failing after 1m13s Details - MENTAL_CLARITY: +10% study speed when mana > 75% - STUDY_RUSH: First hour of study is 2x speed - STUDY_MOMENTUM: +5% study speed per consecutive hour (max +50%) - KNOWLEDGE_ECHO: 10% chance for instant study progress - STUDY_REFUND: 25% mana back on study completion - Add tracking for studyStartedAt and consecutiveStudyHours - Reset tracking when study completes or stops	2026-03-26 13:38:55 +00:00
zhipu	fec3a2b88f	feat: Implement combat special effects Build and Publish Mana Loop Docker Image / build-and-publish (push) Failing after 1m26s Details - BATTLE_FURY: +10% damage per consecutive hit (resets on floor change) - COMBO_MASTER: Every 5th attack deals 3x damage - ADRENALINE_RUSH: Restore 5% mana on floor clear - Add hitsThisTick tracking for proper consecutive hit counting - Reset consecutiveHits when floor changes	2026-03-26 13:33:14 +00:00
zhipu	751b317af2	feat: Implement critical special effects (partial) Build and Publish Mana Loop Docker Image / build-and-publish (push) Failing after 1m9s Details - Add consecutiveHits to GameState for battle effects - Implement MANA_ECHO (10% double mana on click) - Implement EMERGENCY_RESERVE (keep 10% mana on new loop) - Add foundation for BATTLE_FURY and COMBO_MASTER - Add lifesteal and spell echo from equipment - Add parallel study processing in tick	2026-03-26 13:24:04 +00:00
zhipu	315490cedb	docs: Add README.md, update AGENTS.md, audit report, and massive refactoring Documentation: - Add comprehensive README.md with project overview - Update AGENTS.md with new file structure and slice pattern - Add AUDIT_REPORT.md documenting unimplemented effects Refactoring (page.tsx: 1695 → 434 lines, 74% reduction): - Extract SkillsTab.tsx component - Extract StatsTab.tsx component - Extract UpgradeDialog.tsx component - Move getDamageBreakdown and getTotalDPS to computed-stats.ts - Move ELEMENT_ICON_NAMES to constants.ts All lint checks pass, functionality preserved.	2026-03-26 13:01:29 +00:00
zhipu	2ca5d8b7f8	refactor: Major codebase refactoring for maintainability Build and Publish Mana Loop Docker Image / build-and-publish (push) Successful in 3m4s Details Store refactoring (2138 → 1651 lines, 23% reduction): - Extract computed-stats.ts with 18 utility functions - Extract navigation-slice.ts for floor navigation actions - Extract study-slice.ts for study-related actions - Move fmt/fmtDec to computed-stats, re-export from formatting Page refactoring (2554 → 1695 lines, 34% reduction): - Use existing SpireTab component instead of inline render - Extract ActionButtons component - Extract CalendarDisplay component - Extract CraftingProgress component - Extract StudyProgress component - Extract ManaDisplay component - Extract TimeDisplay component - Create tabs/index.ts for cleaner exports This improves code organization and makes the codebase more maintainable.	2026-03-26 12:00:30 +00:00
zhipu	1d2dce75cc	Add equipment crafting system - Add crafting-recipes.ts with blueprint definitions and material requirements - Update crafting-slice.ts with equipment crafting functions - Add EquipmentCraftingProgress type and state - Update CraftingTab.tsx with new Craft tab for equipment crafting - Add material deletion functionality - Update store.ts with equipment crafting methods - Update page.tsx to pass new props to CraftingTab Features: - Players can craft equipment from discovered blueprints - Crafting requires materials and mana - Materials are obtained from loot drops - New Craft tab in the crafting interface - Shows blueprint details and material requirements	2026-03-26 11:04:50 +00:00
zhipu	4f4cbeb527	Add floor navigation system with up/down direction and respawn mechanics - Added climbDirection state to track player movement direction - Added clearedFloors tracking for floor respawn system - Players can now manually navigate between floors using ascend/descend buttons - Floors respawn when player leaves and returns (for loot farming) - Enhanced LootInventory component with: - Full inventory management (materials, essence, equipment) - Search and filter functionality - Sorting by name, rarity, or count - Delete functionality with confirmation dialog - Added updateLootInventory function to store - Blueprints are now shown as permanent unlocks in inventory - Floor navigation UI shows direction toggle and respawn indicators	2026-03-26 10:28:15 +00:00
zhipu	ee0268d9f6	Fix Docker build: exclude .config file and simplify Dockerfile Build and Publish Mana Loop Docker Image / build-and-publish (push) Successful in 3m11s Details	2026-03-25 18:00:09 +00:00
zhipu	6f2f022cb9	Fix Docker build: create .config/prisma directory and use proper standalone output Build and Publish Mana Loop Docker Image / build-and-publish (push) Failing after 1m24s Details	2026-03-25 17:55:19 +00:00
zhipu	aeabebdd9f	Fix Docker build: create .config/prisma directory for Prisma 6 Build and Publish Mana Loop Docker Image / build-and-publish (push) Has been cancelled Details	2026-03-25 17:54:05 +00:00
zhipu	81a72a1ed7	Fix Docker build: set PRISMA_SKIP_CONFIG_LOADING and use standalone output Build and Publish Mana Loop Docker Image / build-and-publish (push) Failing after 1m38s Details	2026-03-25 17:51:09 +00:00
zhipu	5e9f560f26	Fix Docker build: use npx prisma generate and multi-stage build Build and Publish Mana Loop Docker Image / build-and-publish (push) Failing after 2m4s Details	2026-03-25 17:47:27 +00:00
zhipu	3386ffc41e	Fix bun install command - remove invalid --production=false flag Build and Publish Mana Loop Docker Image / build-and-publish (push) Failing after 2m4s Details	2026-03-25 17:20:43 +00:00
zhipu	390b1de203	Add mandatory git workflow instructions to AGENTS.md Build and Publish Mana Loop Docker Image / build-and-publish (push) Failing after 44s Details	2026-03-25 17:18:10 +00:00
zhipu	ff5ecd82ca	Add Docker support and Gitea Actions workflow for container builds Build and Publish Mana Loop Docker Image / build-and-publish (push) Failing after 4m55s Details	2026-03-25 17:07:17 +00:00
Z User	7c5f2f30f0	pack	2026-03-25 16:35:56 +00:00
Z User	3b2e89db74	pack	2026-03-25 15:05:12 +00:00
Z User	5b6e50c0bd	Initial commit	2026-03-25 07:22:25 +00:00