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.

src/components/game/UpgradeDialog.tsx

@@ -0,0 +1,115 @@
+'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';
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from '@/components/ui/dialog';
+
+export interface UpgradeDialogProps {
+  open: boolean;
+  skillId: string | null;
+  milestone: 5 | 10;
+  pendingSelections: string[];
+  available: SkillUpgradeChoice[];
+  alreadySelected: string[];
+  onToggle: (upgradeId: string) => void;
+  onConfirm: () => void;
+  onCancel: () => void;
+  onOpenChange: (open: boolean) => void;
+}
+
+export function UpgradeDialog({
+  open,
+  skillId,
+  milestone,
+  pendingSelections,
+  available,
+  alreadySelected,
+  onToggle,
+  onConfirm,
+  onCancel,
+  onOpenChange,
+}: UpgradeDialogProps) {
+  if (!skillId) return null;
+  
+  const skillDef = SKILLS_DEF[skillId];
+  const currentSelections = pendingSelections.length > 0 ? pendingSelections : alreadySelected;
+  
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="bg-gray-900 border-gray-700 max-w-lg">
+        <DialogHeader>
+          <DialogTitle className="text-amber-400">
+            Choose Upgrade - {skillDef?.name || skillId}
+          </DialogTitle>
+          <DialogDescription className="text-gray-400">
+            Level {milestone} Milestone - Select 2 upgrades ({currentSelections.length}/2 chosen)
+          </DialogDescription>
+        </DialogHeader>
+        
+        <div className="space-y-2 mt-4">
+          {available.map((upgrade) => {
+            const isSelected = currentSelections.includes(upgrade.id);
+            const canToggle = currentSelections.length < 2 || isSelected;
+            
+            return (
+              <div
+                key={upgrade.id}
+                className={`p-3 rounded border cursor-pointer transition-all ${
+                  isSelected 
+                    ? 'border-amber-500 bg-amber-900/30' 
+                    : canToggle 
+                      ? 'border-gray-600 bg-gray-800/50 hover:border-amber-500/50 hover:bg-gray-800' 
+                      : 'border-gray-700 bg-gray-800/30 opacity-50 cursor-not-allowed'
+                }`}
+                onClick={() => {
+                  if (canToggle) {
+                    onToggle(upgrade.id);
+                  }
+                }}
+              >
+                <div className="flex items-center justify-between">
+                  <div className="font-semibold text-sm text-amber-300">{upgrade.name}</div>
+                  {isSelected && <Badge className="bg-amber-600 text-amber-100">Selected</Badge>}
+                </div>
+                <div className="text-xs text-gray-400 mt-1">{upgrade.desc}</div>
+                {upgrade.effect.type === 'multiplier' && (
+                  <div className="text-xs text-green-400 mt-1">
+                    +{Math.round((upgrade.effect.value! - 1) * 100)}% {upgrade.effect.stat}
+                  </div>
+                )}
+                {upgrade.effect.type === 'bonus' && (
+                  <div className="text-xs text-blue-400 mt-1">
+                    +{upgrade.effect.value} {upgrade.effect.stat}
+                  </div>
+                )}
+                {upgrade.effect.type === 'special' && (
+                  <div className="text-xs text-cyan-400 mt-1">
+                    ⚡ {upgrade.effect.specialDesc || 'Special effect'}
+                  </div>
+                )}
+              </div>
+            );
+          })}
+        </div>
+        
+        <div className="flex justify-end gap-2 mt-4">
+          <Button 
+            variant="outline" 
+            onClick={onCancel}
+          >
+            Cancel
+          </Button>
+          <Button 
+            variant="default"
+            onClick={onConfirm}
+            disabled={currentSelections.length !== 2}
+          >
+            {currentSelections.length < 2 ? `Select ${2 - currentSelections.length} more` : 'Confirm'}
+          </Button>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}

src/components/game/index.ts

@@ -6,6 +6,8 @@ export { CraftingTab } from './tabs/CraftingTab';
 export { SpireTab } from './tabs/SpireTab';
 export { SpellsTab } from './tabs/SpellsTab';
 export { LabTab } from './tabs/LabTab';
+export { SkillsTab } from './tabs/SkillsTab';
+export { StatsTab } from './tabs/StatsTab';
 
 // UI components
 export { ActionButtons } from './ActionButtons';
@@ -15,3 +17,4 @@ export { CraftingProgress } from './CraftingProgress';
 export { StudyProgress } from './StudyProgress';
 export { ManaDisplay } from './ManaDisplay';
 export { TimeDisplay } from './TimeDisplay';
+export { UpgradeDialog } from './UpgradeDialog';

src/components/game/tabs/SkillsTab.tsx

@@ -0,0 +1,338 @@
+'use client';
+
+import { useState } from 'react';
+import { SKILLS_DEF, SKILL_CATEGORIES, getStudySpeedMultiplier, getStudyCostMultiplier } from '@/lib/game/constants';
+import { SKILL_EVOLUTION_PATHS, getUpgradesForSkillAtMilestone, getNextTierSkill, getTierMultiplier } from '@/lib/game/skill-evolution';
+import { getUnifiedEffects, hasSpecial, SPECIAL_EFFECTS } from '@/lib/game/effects';
+import { fmt, fmtDec } from '@/lib/game/store';
+import { formatStudyTime } from '@/lib/game/formatting';
+import type { SkillUpgradeChoice, GameStore } from '@/lib/game/types';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
+import { StudyProgress } from './StudyProgress';
+import { UpgradeDialog } from './UpgradeDialog';
+
+export interface SkillsTabProps {
+  store: GameStore;
+}
+
+// Check if skill has milestone available
+function hasMilestoneUpgrade(
+  skillId: string, 
+  level: number, 
+  skillTiers: Record<string, number>,
+  skillUpgrades: Record<string, string[]>
+): { milestone: 5 | 10; hasUpgrades: boolean; selectedCount: number } | null {
+  const baseSkillId = skillId.includes('_t') ? skillId.split('_t')[0] : skillId;
+  const path = SKILL_EVOLUTION_PATHS[baseSkillId];
+  if (!path) return null;
+  
+  // Check level 5 milestone
+  if (level >= 5) {
+    const upgrades5 = getUpgradesForSkillAtMilestone(skillId, 5, skillTiers);
+    const selected5 = (skillUpgrades[skillId] || []).filter(id => id.includes('_l5'));
+    if (upgrades5.length > 0 && selected5.length < 2) {
+      return { milestone: 5, hasUpgrades: true, selectedCount: selected5.length };
+    }
+  }
+  
+  // Check level 10 milestone
+  if (level >= 10) {
+    const upgrades10 = getUpgradesForSkillAtMilestone(skillId, 10, skillTiers);
+    const selected10 = (skillUpgrades[skillId] || []).filter(id => id.includes('_l10'));
+    if (upgrades10.length > 0 && selected10.length < 2) {
+      return { milestone: 10, hasUpgrades: true, selectedCount: selected10.length };
+    }
+  }
+  
+  return null;
+}
+
+export function SkillsTab({ store }: SkillsTabProps) {
+  const [upgradeDialogSkill, setUpgradeDialogSkill] = useState<string | null>(null);
+  const [upgradeDialogMilestone, setUpgradeDialogMilestone] = useState<5 | 10>(5);
+  const [pendingUpgradeSelections, setPendingUpgradeSelections] = useState<string[]>([]);
+  
+  const studySpeedMult = getStudySpeedMultiplier(store.skills);
+  const upgradeEffects = getUnifiedEffects(store);
+  
+  // Get upgrade choices for dialog
+  const getUpgradeChoices = () => {
+    if (!upgradeDialogSkill) return { available: [] as SkillUpgradeChoice[], selected: [] as string[] };
+    return store.getSkillUpgradeChoices(upgradeDialogSkill, upgradeDialogMilestone);
+  };
+  
+  const { available, selected: alreadySelected } = getUpgradeChoices();
+  
+  // Toggle selection
+  const toggleUpgrade = (upgradeId: string) => {
+    const currentSelections = pendingUpgradeSelections.length > 0 ? pendingUpgradeSelections : alreadySelected;
+    if (currentSelections.includes(upgradeId)) {
+      setPendingUpgradeSelections(currentSelections.filter(id => id !== upgradeId));
+    } else if (currentSelections.length < 2) {
+      setPendingUpgradeSelections([...currentSelections, upgradeId]);
+    }
+  };
+  
+  // Commit selections and close
+  const handleConfirm = () => {
+    const currentSelections = pendingUpgradeSelections.length > 0 ? pendingUpgradeSelections : alreadySelected;
+    if (currentSelections.length === 2 && upgradeDialogSkill) {
+      store.commitSkillUpgrades(upgradeDialogSkill, currentSelections);
+    }
+    setPendingUpgradeSelections([]);
+    setUpgradeDialogSkill(null);
+  };
+  
+  // Cancel and close
+  const handleCancel = () => {
+    setPendingUpgradeSelections([]);
+    setUpgradeDialogSkill(null);
+  };
+  
+  return (
+    <div className="space-y-4">
+      {/* Upgrade Selection Dialog */}
+      <UpgradeDialog
+        open={!!upgradeDialogSkill}
+        skillId={upgradeDialogSkill}
+        milestone={upgradeDialogMilestone}
+        pendingSelections={pendingUpgradeSelections}
+        available={available}
+        alreadySelected={alreadySelected}
+        onToggle={toggleUpgrade}
+        onConfirm={handleConfirm}
+        onCancel={handleCancel}
+        onOpenChange={(open) => {
+          if (!open) {
+            setPendingUpgradeSelections([]);
+            setUpgradeDialogSkill(null);
+          }
+        }}
+      />
+      
+      {/* Current Study Progress */}
+      {store.currentStudyTarget && store.currentStudyTarget.type === 'skill' && (
+        <Card className="bg-gray-900/80 border-purple-600/50">
+          <CardContent className="pt-4">
+            <StudyProgress
+              currentStudyTarget={store.currentStudyTarget}
+              skills={store.skills}
+              studySpeedMult={studySpeedMult}
+              cancelStudy={store.cancelStudy}
+            />
+          </CardContent>
+        </Card>
+      )}
+      
+      {SKILL_CATEGORIES.map((cat) => {
+        const skillsInCat = Object.entries(SKILLS_DEF).filter(([, def]) => def.cat === cat.id);
+        if (skillsInCat.length === 0) return null;
+        
+        return (
+          <Card key={cat.id} className="bg-gray-900/80 border-gray-700">
+            <CardHeader className="pb-2">
+              <CardTitle className="text-amber-400 game-panel-title text-xs">
+                {cat.icon} {cat.name}
+              </CardTitle>
+            </CardHeader>
+            <CardContent>
+              <div className="space-y-2">
+                {skillsInCat.map(([id, def]) => {
+                  // Get tier info
+                  const currentTier = store.skillTiers?.[id] || 1;
+                  const tieredSkillId = currentTier > 1 ? `${id}_t${currentTier}` : id;
+                  const tierMultiplier = getTierMultiplier(tieredSkillId);
+                  
+                  // Get the actual level from the tiered skill
+                  const level = store.skills[tieredSkillId] || store.skills[id] || 0;
+                  const maxed = level >= def.max;
+                  
+                  // Check if studying this skill
+                  const isStudying = (store.currentStudyTarget?.id === id || store.currentStudyTarget?.id === tieredSkillId) && store.currentStudyTarget?.type === 'skill';
+                  
+                  // Get tier name for display
+                  const tierDef = SKILL_EVOLUTION_PATHS[id]?.tiers.find(t => t.tier === currentTier);
+                  const skillDisplayName = tierDef?.name || def.name;
+                  
+                  // Check prerequisites
+                  let prereqMet = true;
+                  if (def.req) {
+                    for (const [r, rl] of Object.entries(def.req)) {
+                      if ((store.skills[r] || 0) < rl) {
+                        prereqMet = false;
+                        break;
+                      }
+                    }
+                  }
+                  
+                  // Apply skill modifiers
+                  const costMult = getStudyCostMultiplier(store.skills);
+                  const speedMult = getStudySpeedMultiplier(store.skills);
+                  const studyEffects = getUnifiedEffects(store);
+                  const effectiveSpeedMult = speedMult * studyEffects.studySpeedMultiplier;
+                  
+                  // Study time scales with tier
+                  const tierStudyTime = def.studyTime * currentTier;
+                  const effectiveStudyTime = tierStudyTime / effectiveSpeedMult;
+                  
+                  // Cost scales with tier
+                  const baseCost = def.base * (level + 1) * currentTier;
+                  const cost = Math.floor(baseCost * costMult);
+                  
+                  // Can start studying?
+                  const canStudy = !maxed && prereqMet && store.rawMana >= cost && !isStudying;
+                  
+                  // Check for milestone upgrades
+                  const milestoneInfo = hasMilestoneUpgrade(tieredSkillId, level, store.skillTiers || {}, store.skillUpgrades);
+                  
+                  // Check for tier up
+                  const nextTierSkill = getNextTierSkill(tieredSkillId);
+                  const canTierUp = maxed && nextTierSkill;
+                  
+                  // Get selected upgrades
+                  const selectedUpgrades = store.skillUpgrades[tieredSkillId] || [];
+                  const selectedL5 = selectedUpgrades.filter(u => u.includes('_l5'));
+                  const selectedL10 = selectedUpgrades.filter(u => u.includes('_l10'));
+                  
+                  return (
+                    <div
+                      key={id}
+                      className={`flex flex-col sm:flex-row sm:items-center justify-between p-3 rounded border gap-2 ${
+                        isStudying ? 'border-purple-500 bg-purple-900/20' : 
+                        milestoneInfo ? 'border-amber-500/50 bg-amber-900/10' :
+                        'border-gray-700 bg-gray-800/30'
+                      }`}
+                    >
+                      <div className="flex-1 min-w-0">
+                        <div className="flex items-center gap-2 flex-wrap">
+                          <span className="font-semibold text-sm">{skillDisplayName}</span>
+                          {currentTier > 1 && (
+                            <Badge className="bg-purple-600/50 text-purple-200 text-xs">Tier {currentTier} ({fmtDec(tierMultiplier, 0)}x)</Badge>
+                          )}
+                          {level > 0 && <span className="text-purple-400 text-sm">Lv.{level}</span>}
+                          {selectedUpgrades.length > 0 && (
+                            <div className="flex gap-1">
+                              {selectedL5.length > 0 && (
+                                <Badge className="bg-amber-700/50 text-amber-200 text-xs">L5: {selectedL5.length}</Badge>
+                              )}
+                              {selectedL10.length > 0 && (
+                                <Badge className="bg-purple-700/50 text-purple-200 text-xs">L10: {selectedL10.length}</Badge>
+                              )}
+                            </div>
+                          )}
+                        </div>
+                        <div className="text-xs text-gray-400 italic">{def.desc}{currentTier > 1 && ` (Tier ${currentTier}: ${fmtDec(tierMultiplier, 0)}x effect)`}</div>
+                        {!prereqMet && def.req && (
+                          <div className="text-xs text-red-400 mt-1">
+                            Requires: {Object.entries(def.req).map(([r, rl]) => `${SKILLS_DEF[r]?.name} Lv.${rl}`).join(', ')}
+                          </div>
+                        )}
+                        <div className="text-xs text-gray-500 mt-1">
+                          <span className={effectiveSpeedMult > 1 ? 'text-green-400' : ''}>
+                            Study: {formatStudyTime(effectiveStudyTime)}{effectiveSpeedMult > 1 && <span className="text-xs ml-1">({Math.round(effectiveSpeedMult * 100)}% speed)</span>}
+                          </span>
+                          {' • '}
+                          <span className={costMult < 1 ? 'text-green-400' : ''}>
+                            Cost: {fmt(cost)} mana{costMult < 1 && <span className="text-xs ml-1">({Math.round(costMult * 100)}% cost)</span>}
+                          </span>
+                        </div>
+                        
+                        {milestoneInfo && (
+                          <div className="text-xs text-amber-400 mt-1 flex items-center gap-1">
+                            ⭐ Level {milestoneInfo.milestone} milestone: {milestoneInfo.selectedCount}/2 upgrades selected
+                          </div>
+                        )}
+                      </div>
+                      
+                      <div className="flex items-center gap-3 flex-wrap sm:flex-nowrap">
+                        {/* Level dots */}
+                        <div className="flex gap-1 shrink-0">
+                          {Array.from({ length: def.max }).map((_, i) => (
+                            <div
+                              key={i}
+                              className={`w-2 h-2 rounded-full border ${
+                                i < level ? 'bg-purple-500 border-purple-400' : 
+                                i === 4 || i === 9 ? 'border-amber-500' : 
+                                'border-gray-600'
+                              }`}
+                            />
+                          ))}
+                        </div>
+                        
+                        {isStudying ? (
+                          <div className="text-xs text-purple-400">
+                            {formatStudyTime(store.currentStudyTarget?.progress || 0)}/{formatStudyTime(tierStudyTime)}
+                          </div>
+                        ) : milestoneInfo ? (
+                          <Button
+                            size="sm"
+                            className="bg-amber-600 hover:bg-amber-700"
+                            onClick={() => {
+                              setUpgradeDialogSkill(tieredSkillId);
+                              setUpgradeDialogMilestone(milestoneInfo.milestone);
+                            }}
+                          >
+                            Choose Upgrades
+                          </Button>
+                        ) : canTierUp ? (
+                          <Button
+                            size="sm"
+                            className="bg-purple-600 hover:bg-purple-700"
+                            onClick={() => store.tierUpSkill(tieredSkillId)}
+                          >
+                            ⬆️ Tier Up
+                          </Button>
+                        ) : maxed ? (
+                          <Badge className="bg-green-900/50 text-green-300">Maxed</Badge>
+                        ) : (
+                          <div className="flex gap-1">
+                            <Button
+                              size="sm"
+                              variant={canStudy ? 'default' : 'outline'}
+                              disabled={!canStudy}
+                              className={canStudy ? 'bg-purple-600 hover:bg-purple-700' : 'opacity-50'}
+                              onClick={() => store.startStudyingSkill(tieredSkillId)}
+                            >
+                              Study ({fmt(cost)})
+                            </Button>
+                            {/* Parallel Study button */}
+                            {hasSpecial(upgradeEffects, SPECIAL_EFFECTS.PARALLEL_STUDY) && 
+                             store.currentStudyTarget && 
+                             !store.parallelStudyTarget &&
+                             store.currentStudyTarget.id !== tieredSkillId &&
+                             canStudy && (
+                              <TooltipProvider>
+                                <Tooltip>
+                                  <TooltipTrigger asChild>
+                                    <Button
+                                      size="sm"
+                                      variant="outline"
+                                      className="border-cyan-500 text-cyan-400 hover:bg-cyan-900/30"
+                                      onClick={() => store.startParallelStudySkill(tieredSkillId)}
+                                    >
+                                      ⚡
+                                    </Button>
+                                  </TooltipTrigger>
+                                  <TooltipContent>
+                                    <p>Study in parallel (50% speed)</p>
+                                  </TooltipContent>
+                                </Tooltip>
+                              </TooltipProvider>
+                            )}
+                          </div>
+                        )}
+                      </div>
+                    </div>
+                  );
+                })}
+              </div>
+            </CardContent>
+          </Card>
+        );
+      })}
+    </div>
+  );
+}

src/components/game/tabs/StatsTab.tsx

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

src/components/game/tabs/index.ts

@@ -5,3 +5,5 @@ export { CraftingTab } from './CraftingTab';
 export { SpireTab } from './SpireTab';
 export { SpellsTab } from './SpellsTab';
 export { LabTab } from './LabTab';
+export { SkillsTab } from './SkillsTab';
+export { StatsTab } from './StatsTab';