feat(ui): complete Task 4 UI redesign — all sub-tasks 1-10

- Implemented complete design system with 40+ CSS custom properties
- Created 9 UI primitives (GameCard, SectionHeader, StatRow, ManaBar, ElementBadge, ValueDisplay, ActionButton, SkillRow, TooltipInfo)
- Redesigned all tabs: Spire, Skills, Stats, Equipment, Crafting, Attunements, Golemancy, Spells, Loot, Achievements, Lab, Debug
- Added toast notification system (GameToast) with success/warning/error/info types
- Added confirmation dialogs for destructive actions
- Removed all dev artifacts and component name labels
- Added empty states to all tabs
- Replaced emoji icons with Lucide React icons
- Added enchantPower placeholder to StatsTab and EquipmentTab
- Mobile audit passed at 375px viewport
- Build passes with 0 errors, lint passes with 0 errors

Sub-tasks completed:
- ST1: Design System Implementation
- ST2: Global Layout & Header
- ST3: Left Panel (Mana Display & Action Area)
- ST4: Skills Tab
- ST5: Spire Tab & Spire Mode UI
- ST6: Stats Tab
- ST7: Equipment & Crafting Tabs
- ST8: Attunements Tab
- ST9: Remaining Tabs
- ST10: Toast System & Confirmation Dialogs

Documentation: 15+ files in docs/task4/

src/components/ui/tooltip-info.tsx

@@ -0,0 +1,48 @@
+import * as React from "react";
+import { cn } from "@/lib/utils";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./tooltip";
+import { Info } from "lucide-react";
+
+interface TooltipInfoProps extends React.HTMLAttributes<HTMLDivElement> {
+  content: string;
+  children?: React.ReactNode;
+  side?: "top" | "right" | "bottom" | "left";
+}
+
+export function TooltipInfo({
+  content,
+  children,
+  side = "top",
+  className,
+  ...props
+}: TooltipInfoProps) {
+  return (
+    <TooltipProvider delayDuration={0}>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <span
+            data-slot="tooltip-info"
+            className={cn(
+              "inline-flex items-center cursor-help",
+              className
+            )}
+            {...props}
+          >
+            {children || (
+              <Info
+                size={14}
+                className="text-[var(--text-muted)] hover:text-[var(--text-secondary)] transition-colors duration-100"
+              />
+            )}
+          </span>
+        </TooltipTrigger>
+        <TooltipContent
+          side={side}
+          className="max-w-xs bg-[var(--bg-elevated)] text-[var(--text-primary)] border border-[var(--border-default)] text-xs"
+        >
+          {content}
+        </TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
+  );
+}