feat: add equipment, achievements, and visual polish

- Equipment system: 12 items across weapon/armour/trinket slots with
  common/rare/epic/legendary rarities; starter commons auto-equipped,
  higher tiers drop from boss victories
- Achievement system: 15 milestones with typed conditions; checked
  each tick and crystal rewards applied automatically
- Achievement toast: slide-in notification, auto-dismisses after 4s
- Floating click text: +X gold floats on each manual click
- Expanded quests (9 total) and upgrades (12 total)
- Upgrade panel now shows locked upgrades so players can see their
  progression path
- formatNumber utility (K/M/B/T) used consistently across all panels
- Backfill logic for existing saves to add new content gracefully
- types package now emits .d.ts declarations

apps/web/src/components/game/GameLayout.tsx

@@ -1,26 +1,32 @@
 import { useState } from "react";
 import { useGame } from "../../context/GameContext.js";
 import { ResourceBar } from "../ui/ResourceBar.js";
+import { AchievementPanel } from "./AchievementPanel.js";
+import { AchievementToast } from "./AchievementToast.js";
 import { AdventurerPanel } from "./AdventurerPanel.js";
+import { BattleModal } from "./BattleModal.js";
 import { BossPanel } from "./BossPanel.js";
 import { ClickArea } from "./ClickArea.js";
+import { EquipmentPanel } from "./EquipmentPanel.js";
 import { OfflineModal } from "./OfflineModal.js";
 import { PrestigePanel } from "./PrestigePanel.js";
 import { QuestPanel } from "./QuestPanel.js";
 import { UpgradePanel } from "./UpgradePanel.js";
 
-type Tab = "adventurers" | "upgrades" | "quests" | "bosses" | "prestige";
+type Tab = "adventurers" | "upgrades" | "quests" | "bosses" | "equipment" | "achievements" | "prestige";
 
 const TABS: { id: Tab; label: string }[] = [
   { id: "adventurers", label: "⚔️ Adventurers" },
   { id: "upgrades", label: "🔧 Upgrades" },
   { id: "quests", label: "📜 Quests" },
   { id: "bosses", label: "👹 Bosses" },
+  { id: "equipment", label: "🗡️ Equipment" },
+  { id: "achievements", label: "🏆 Achievements" },
   { id: "prestige", label: "⭐ Prestige" },
 ];
 
 export const GameLayout = (): React.JSX.Element => {
-  const { state, isLoading, error } = useGame();
+  const { state, isLoading, error, battleResult, dismissBattle } = useGame();
   const [activeTab, setActiveTab] = useState<Tab>("adventurers");
 
   if (isLoading) {
@@ -48,6 +54,10 @@ export const GameLayout = (): React.JSX.Element => {
         prestigeCount={state.prestige.count}
       />
       <OfflineModal />
+      <AchievementToast />
+      {battleResult && (
+        <BattleModal battle={battleResult} onDismiss={dismissBattle} />
+      )}
 
       <div className="game-main">
         <aside className="game-sidebar">
@@ -73,6 +83,8 @@ export const GameLayout = (): React.JSX.Element => {
             {activeTab === "upgrades" && <UpgradePanel />}
             {activeTab === "quests" && <QuestPanel />}
             {activeTab === "bosses" && <BossPanel />}
+            {activeTab === "equipment" && <EquipmentPanel />}
+            {activeTab === "achievements" && <AchievementPanel />}
             {activeTab === "prestige" && <PrestigePanel />}
           </div>
         </main>