refactor: Major codebase refactoring for maintainability

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.

src/components/game/ManaDisplay.tsx

@@ -0,0 +1,63 @@
+'use client';
+
+import { Button } from '@/components/ui/button';
+import { Progress } from '@/components/ui/progress';
+import { Card, CardContent } from '@/components/ui/card';
+import { Zap } from 'lucide-react';
+import { fmt, fmtDec } from '@/lib/game/store';
+
+interface ManaDisplayProps {
+  rawMana: number;
+  maxMana: number;
+  effectiveRegen: number;
+  meditationMultiplier: number;
+  clickMana: number;
+  isGathering: boolean;
+  onGatherStart: () => void;
+  onGatherEnd: () => void;
+}
+
+export function ManaDisplay({
+  rawMana,
+  maxMana,
+  effectiveRegen,
+  meditationMultiplier,
+  clickMana,
+  isGathering,
+  onGatherStart,
+  onGatherEnd,
+}: ManaDisplayProps) {
+  return (
+    <Card className="bg-gray-900/80 border-gray-700">
+      <CardContent className="pt-4 space-y-3">
+        <div>
+          <div className="flex items-baseline gap-1">
+            <span className="text-3xl font-bold game-mono text-blue-400">{fmt(rawMana)}</span>
+            <span className="text-sm text-gray-400">/ {fmt(maxMana)}</span>
+          </div>
+          <div className="text-xs text-gray-400">
+            +{fmtDec(effectiveRegen)} mana/hr {meditationMultiplier > 1.01 && <span className="text-purple-400">({fmtDec(meditationMultiplier, 1)}x med)</span>}
+          </div>
+        </div>
+        
+        <Progress
+          value={(rawMana / maxMana) * 100}
+          className="h-2 bg-gray-800"
+        />
+        
+        <Button
+          className={`w-full bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700 ${isGathering ? 'animate-pulse' : ''}`}
+          onMouseDown={onGatherStart}
+          onMouseUp={onGatherEnd}
+          onMouseLeave={onGatherEnd}
+          onTouchStart={onGatherStart}
+          onTouchEnd={onGatherEnd}
+        >
+          <Zap className="w-4 h-4 mr-2" />
+          Gather +{clickMana} Mana
+          {isGathering && <span className="ml-2 text-xs">(Holding...)</span>}
+        </Button>
+      </CardContent>
+    </Card>
+  );
+}