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/AchievementPanel.tsx

@@ -0,0 +1,75 @@
+import type { Achievement } from "@elysium/types";
+import { useGame } from "../../context/GameContext.js";
+import { formatNumber } from "../../utils/format.js";
+
+const conditionDescription = (achievement: Achievement): string => {
+  const { condition } = achievement;
+  switch (condition.type) {
+    case "totalGoldEarned":
+      return `Earn ${formatNumber(condition.amount)} total gold`;
+    case "totalClicks":
+      return `Click ${formatNumber(condition.amount)} times`;
+    case "bossesDefeated":
+      return `Defeat ${condition.amount} boss${condition.amount > 1 ? "es" : ""}`;
+    case "questsCompleted":
+      return `Complete ${condition.amount} quest${condition.amount > 1 ? "s" : ""}`;
+    case "adventurerTotal":
+      return `Recruit ${formatNumber(condition.amount)} total adventurers`;
+    case "prestigeCount":
+      return `Prestige ${condition.amount} time${condition.amount > 1 ? "s" : ""}`;
+    case "equipmentOwned":
+      return `Own ${condition.amount} equipment item${condition.amount > 1 ? "s" : ""}`;
+  }
+};
+
+interface AchievementCardProps {
+  achievement: Achievement;
+}
+
+const AchievementCard = ({ achievement }: AchievementCardProps): React.JSX.Element => {
+  const isUnlocked = achievement.unlockedAt !== null;
+
+  return (
+    <div className={`achievement-card ${isUnlocked ? "unlocked" : "locked"}`}>
+      <div className="achievement-icon">{achievement.icon}</div>
+      <div className="achievement-info">
+        <h3>{achievement.name}</h3>
+        <p>{achievement.description}</p>
+        <p className="achievement-condition">{conditionDescription(achievement)}</p>
+        {achievement.reward?.crystals != null && (
+          <p className="achievement-reward">💎 +{achievement.reward.crystals} Crystals</p>
+        )}
+      </div>
+      <div className="achievement-status">
+        {isUnlocked ? (
+          <span className="achievement-unlocked-badge">✓ Unlocked</span>
+        ) : (
+          <span className="achievement-locked-badge">🔒</span>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export const AchievementPanel = (): React.JSX.Element => {
+  const { state } = useGame();
+
+  if (!state) return <section className="panel"><p>Loading...</p></section>;
+
+  const achievements = state.achievements ?? [];
+  const unlocked = achievements.filter((a) => a.unlockedAt !== null).length;
+
+  return (
+    <section className="panel achievement-panel">
+      <h2>Achievements</h2>
+      <p className="achievement-progress">
+        {unlocked} / {achievements.length} unlocked
+      </p>
+      <div className="achievement-list">
+        {achievements.map((achievement) => (
+          <AchievementCard key={achievement.id} achievement={achievement} />
+        ))}
+      </div>
+    </section>
+  );
+};

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

@@ -0,0 +1,48 @@
+import { useEffect } from "react";
+import type { Achievement } from "@elysium/types";
+import { useGame } from "../../context/GameContext.js";
+
+interface ToastItemProps {
+  achievement: Achievement;
+  onDismiss: (id: string) => void;
+}
+
+const ToastItem = ({ achievement, onDismiss }: ToastItemProps): React.JSX.Element => {
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      onDismiss(achievement.id);
+    }, 4000);
+    return () => { clearTimeout(timer); };
+  }, [achievement.id, onDismiss]);
+
+  return (
+    <div className="achievement-toast" onClick={() => { onDismiss(achievement.id); }}>
+      <span className="toast-icon">{achievement.icon}</span>
+      <div className="toast-content">
+        <span className="toast-label">Achievement Unlocked!</span>
+        <span className="toast-name">{achievement.name}</span>
+        {achievement.reward?.crystals != null && (
+          <span className="toast-reward">💎 +{achievement.reward.crystals}</span>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export const AchievementToast = (): React.JSX.Element | null => {
+  const { newAchievements, dismissAchievement } = useGame();
+
+  if (newAchievements.length === 0) return null;
+
+  return (
+    <div className="achievement-toast-container">
+      {newAchievements.map((achievement) => (
+        <ToastItem
+          key={achievement.id}
+          achievement={achievement}
+          onDismiss={dismissAchievement}
+        />
+      ))}
+    </div>
+  );
+};

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

@@ -0,0 +1,171 @@
+import type { BattleResult } from "../../context/GameContext.js";
+import { useEffect, useState } from "react";
+
+interface BattleModalProps {
+  battle: BattleResult;
+  onDismiss: () => void;
+}
+
+const formatNumber = (n: number): string => {
+  if (n >= 1_000_000) return `${(n / 1_000_000).toFixed(1)}M`;
+  if (n >= 1_000) return `${(n / 1_000).toFixed(1)}k`;
+  return Math.floor(n).toLocaleString();
+};
+
+export const BattleModal = ({
+  battle,
+  onDismiss,
+}: BattleModalProps): React.JSX.Element => {
+  const { result, bossName } = battle;
+
+  const [phase, setPhase] = useState<"animating" | "result">("animating");
+
+  // Starting HP percentages
+  const bossStartPercent = (result.bossHpBefore / result.bossMaxHp) * 100;
+  const partyStartPercent = 100;
+
+  // Target HP percentages (after battle)
+  const bossEndPercent = (result.bossHpAtBattleEnd / result.bossMaxHp) * 100;
+  const partyEndPercent = result.partyMaxHp > 0
+    ? (result.partyHpRemaining / result.partyMaxHp) * 100
+    : 0;
+
+  const [bossHpPercent, setBossHpPercent] = useState(bossStartPercent);
+  const [partyHpPercent, setPartyHpPercent] = useState(partyStartPercent);
+
+  useEffect(() => {
+    // Brief delay so CSS transition has a starting point to animate from
+    const startAnimation = setTimeout(() => {
+      setBossHpPercent(bossEndPercent);
+      setPartyHpPercent(partyEndPercent);
+    }, 200);
+
+    // Reveal result after animation completes
+    const revealResult = setTimeout(() => {
+      setPhase("result");
+    }, 5_200);
+
+    return () => {
+      clearTimeout(startAnimation);
+      clearTimeout(revealResult);
+    };
+  }, [bossEndPercent, partyEndPercent]);
+
+  const bossHpBarColour = bossHpPercent > 50
+    ? "#e74c3c"
+    : bossHpPercent > 25
+      ? "#e67e22"
+      : "#c0392b";
+
+  const partyHpBarColour = partyHpPercent > 50
+    ? "#27ae60"
+    : partyHpPercent > 25
+      ? "#f39c12"
+      : "#e74c3c";
+
+  return (
+    <div className="modal-overlay">
+      <div className="modal battle-modal">
+        <h2>⚔️ Battle: {bossName}</h2>
+
+        <div className="battle-stats">
+          <div className="battle-stat">
+            <span className="stat-label">Your Party DPS</span>
+            <span className="stat-value">{formatNumber(result.partyDPS)}</span>
+          </div>
+          <div className="battle-stat-divider">vs</div>
+          <div className="battle-stat">
+            <span className="stat-label">Boss DPS</span>
+            <span className="stat-value">{formatNumber(result.bossDPS)}</span>
+          </div>
+        </div>
+
+        <div className="battle-bars">
+          <div className="battle-bar-row">
+            <span className="bar-label">👹 {bossName}</span>
+            <div className="hp-bar-container">
+              <div
+                className="hp-bar-fill"
+                style={{
+                  width: `${bossHpPercent.toFixed(1)}%`,
+                  backgroundColor: bossHpBarColour,
+                  transition: "width 5s ease-in-out",
+                }}
+              />
+            </div>
+            <span className="bar-hp">
+              {formatNumber(result.bossHpAtBattleEnd)} / {formatNumber(result.bossMaxHp)}
+            </span>
+          </div>
+
+          <div className="vs-divider">⚔️ VS ⚔️</div>
+
+          <div className="battle-bar-row">
+            <span className="bar-label">🛡️ Your Party</span>
+            <div className="hp-bar-container">
+              <div
+                className="hp-bar-fill party-hp"
+                style={{
+                  width: `${partyHpPercent.toFixed(1)}%`,
+                  backgroundColor: partyHpBarColour,
+                  transition: "width 5s ease-in-out",
+                }}
+              />
+            </div>
+            <span className="bar-hp">
+              {formatNumber(result.partyHpRemaining)} / {formatNumber(result.partyMaxHp)}
+            </span>
+          </div>
+        </div>
+
+        {phase === "animating" && (
+          <p className="battle-in-progress">Battling…</p>
+        )}
+
+        {phase === "result" && (
+          <div className={`battle-outcome ${result.won ? "victory" : "defeat"}`}>
+            {result.won ? (
+              <>
+                <h3>🏆 Victory!</h3>
+                {result.rewards && (
+                  <div className="battle-rewards">
+                    <p>Rewards:</p>
+                    <span>🪙 {formatNumber(result.rewards.gold)} gold</span>
+                    {result.rewards.essence > 0 && (
+                      <span>✨ {formatNumber(result.rewards.essence)} essence</span>
+                    )}
+                    {result.rewards.crystals > 0 && (
+                      <span>💎 {formatNumber(result.rewards.crystals)} crystals</span>
+                    )}
+                  </div>
+                )}
+              </>
+            ) : (
+              <>
+                <h3>💀 Defeat</h3>
+                <p>Your party was defeated. The boss has reset.</p>
+                {result.casualties && result.casualties.length > 0 && (
+                  <div className="battle-casualties">
+                    <p>Casualties:</p>
+                    {result.casualties.map((c) => (
+                      <span key={c.adventurerId}>
+                        ☠️ {c.killed} {c.adventurerId} lost
+                      </span>
+                    ))}
+                  </div>
+                )}
+              </>
+            )}
+            <button
+              className="dismiss-button"
+              onClick={onDismiss}
+              type="button"
+            >
+              Continue
+            </button>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};

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

@@ -1,15 +1,25 @@
 import type { Boss } from "@elysium/types";
+import { useState } from "react";
 import { useGame } from "../../context/GameContext.js";
+import { formatNumber } from "../../utils/format.js";
 
 interface BossCardProps {
   boss: Boss;
   prestigeCount: number;
+  onChallenge: (bossId: string) => void;
+  isChallenging: boolean;
 }
 
-const BossCard = ({ boss, prestigeCount }: BossCardProps): React.JSX.Element => {
-  const { attackBoss } = useGame();
+const BossCard = ({
+  boss,
+  prestigeCount,
+  onChallenge,
+  isChallenging,
+}: BossCardProps): React.JSX.Element => {
   const hpPercent = (boss.currentHp / boss.maxHp) * 100;
   const isLocked = boss.prestigeRequirement > prestigeCount;
+  const canChallenge =
+    (boss.status === "available" || boss.status === "in_progress") && !isChallenging;
 
   return (
     <div className={`boss-card boss-${boss.status}`}>
@@ -17,7 +27,9 @@ const BossCard = ({ boss, prestigeCount }: BossCardProps): React.JSX.Element =>
         <h3>{boss.name}</h3>
         <p>{boss.description}</p>
         {isLocked && boss.status === "locked" && (
-          <p className="prestige-lock">🔒 Requires Prestige {boss.prestigeRequirement}</p>
+          <p className="prestige-lock">
+            🔒 Requires Prestige {boss.prestigeRequirement}
+          </p>
         )}
       </div>
 
@@ -30,26 +42,40 @@ const BossCard = ({ boss, prestigeCount }: BossCardProps): React.JSX.Element =>
             />
           </div>
           <span className="hp-text">
-            {boss.currentHp.toLocaleString()} / {boss.maxHp.toLocaleString()} HP
+            {formatNumber(boss.currentHp)} / {formatNumber(boss.maxHp)} HP
           </span>
         </div>
       )}
 
-      <div className="boss-rewards">
-        <span>🪙 {boss.goldReward.toLocaleString()}</span>
-        {boss.essenceReward > 0 && <span>✨ {boss.essenceReward.toLocaleString()}</span>}
-        {boss.crystalReward > 0 && <span>💎 {boss.crystalReward.toLocaleString()}</span>}
+      <div className="boss-meta">
+        <span className="boss-dps">💢 Boss DPS: {formatNumber(boss.damagePerSecond)}</span>
       </div>
 
-      {boss.status === "available" || boss.status === "in_progress" ? (
+      <div className="boss-rewards">
+        <span>🪙 {formatNumber(boss.goldReward)}</span>
+        {boss.essenceReward > 0 && (
+          <span>✨ {formatNumber(boss.essenceReward)}</span>
+        )}
+        {boss.crystalReward > 0 && (
+          <span>💎 {formatNumber(boss.crystalReward)}</span>
+        )}
+        {(boss.equipmentRewards ?? []).length > 0 && (
+          <span>🗡️ {boss.equipmentRewards.length} Equipment</span>
+        )}
+      </div>
+
+      {(boss.status === "available" || boss.status === "in_progress") && (
         <button
           className="attack-button"
-          onClick={() => { void attackBoss(boss.id); }}
+          disabled={!canChallenge}
+          onClick={() => {
+            onChallenge(boss.id);
+          }}
           type="button"
         >
-          ⚔️ Attack
+          {isChallenging ? "⚔️ Battling…" : "⚔️ Challenge"}
         </button>
-      ) : null}
+      )}
 
       {boss.status === "defeated" && (
         <span className="boss-badge defeated">☠️ Defeated</span>
@@ -59,19 +85,81 @@ const BossCard = ({ boss, prestigeCount }: BossCardProps): React.JSX.Element =>
 };
 
 export const BossPanel = (): React.JSX.Element => {
-  const { state } = useGame();
+  const { state, challengeBoss } = useGame();
+  const [challengingBossId, setChallengingBossId] = useState<string | null>(null);
 
   if (!state) return <section className="panel"><p>Loading...</p></section>;
 
+  // Calculate party combat stats including equipment multiplier
+  let globalMultiplier = 1;
+  for (const upgrade of state.upgrades) {
+    if (upgrade.purchased && upgrade.target === "global") {
+      globalMultiplier *= upgrade.multiplier;
+    }
+  }
+  const prestigeMultiplier = 1 + state.prestige.count * 0.1;
+  const equipmentCombatMultiplier = (state.equipment ?? [])
+    .filter((e) => e.equipped && e.bonus.combatMultiplier != null)
+    .reduce((mult, e) => mult * (e.bonus.combatMultiplier ?? 1), 1);
+
+  let partyDPS = 0;
+  let partyHP = 0;
+  for (const adventurer of state.adventurers) {
+    if (adventurer.count === 0) continue;
+    let adventurerMultiplier = 1;
+    for (const upgrade of state.upgrades) {
+      if (
+        upgrade.purchased &&
+        upgrade.target === "adventurer" &&
+        upgrade.adventurerId === adventurer.id
+      ) {
+        adventurerMultiplier *= upgrade.multiplier;
+      }
+    }
+    partyDPS +=
+      adventurer.combatPower *
+      adventurer.count *
+      adventurerMultiplier *
+      globalMultiplier *
+      prestigeMultiplier;
+    partyHP += adventurer.level * 50 * adventurer.count;
+  }
+  partyDPS *= equipmentCombatMultiplier;
+
+  const handleChallenge = async (bossId: string): Promise<void> => {
+    setChallengingBossId(bossId);
+    try {
+      await challengeBoss(bossId);
+    } finally {
+      setChallengingBossId(null);
+    }
+  };
+
   return (
     <section className="panel boss-panel">
       <h2>Boss Encounters</h2>
+
+      <div className="party-combat-stats">
+        <div className="combat-stat">
+          <span className="stat-label">⚔️ Party DPS</span>
+          <span className="stat-value">{formatNumber(partyDPS)}</span>
+        </div>
+        <div className="combat-stat">
+          <span className="stat-label">❤️ Party HP</span>
+          <span className="stat-value">{formatNumber(partyHP)}</span>
+        </div>
+      </div>
+
       <div className="boss-list">
         {state.bosses.map((boss) => (
           <BossCard
             key={boss.id}
             boss={boss}
+            isChallenging={challengingBossId === boss.id}
             prestigeCount={state.prestige.count}
+            onChallenge={(id) => {
+              void handleChallenge(id);
+            }}
           />
         ))}
       </div>

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

@@ -1,8 +1,38 @@
+import { useCallback, useRef, useState } from "react";
 import { useGame } from "../../context/GameContext.js";
 import { calculateClickPower } from "../../engine/tick.js";
+import { formatNumber } from "../../utils/format.js";
+
+interface FloatText {
+  id: number;
+  x: number;
+  y: number;
+  text: string;
+}
 
 export const ClickArea = (): React.JSX.Element => {
   const { state, handleClick } = useGame();
+  const [floats, setFloats] = useState<FloatText[]>([]);
+  const nextIdRef = useRef(0);
+
+  const handleClickWithFloat = useCallback(
+    (e: React.MouseEvent<HTMLButtonElement>) => {
+      if (!state) return;
+      const rect = e.currentTarget.getBoundingClientRect();
+      const x = e.clientX - rect.left;
+      const y = e.clientY - rect.top;
+      const id = nextIdRef.current++;
+      const clickPower = calculateClickPower(state);
+
+      setFloats((prev) => [...prev, { id, x, y, text: `+${formatNumber(clickPower)}` }]);
+      handleClick();
+
+      setTimeout(() => {
+        setFloats((prev) => prev.filter((f) => f.id !== id));
+      }, 900);
+    },
+    [state, handleClick],
+  );
 
   if (!state) return <div className="click-area-placeholder" />;
 
@@ -11,15 +41,26 @@ export const ClickArea = (): React.JSX.Element => {
   return (
     <section className="click-area">
       <h2>Guild Hall</h2>
-      <button
-        className="click-button"
-        onClick={handleClick}
-        type="button"
-        aria-label={`Click to earn ${clickPower.toFixed(1)} gold`}
-      >
-        ⚔️
-      </button>
-      <p className="click-power">+{clickPower.toFixed(1)} gold per click</p>
+      <div className="click-button-wrapper">
+        <button
+          className="click-button"
+          onClick={handleClickWithFloat}
+          type="button"
+          aria-label={`Click to earn ${formatNumber(clickPower)} gold`}
+        >
+          ⚔️
+        </button>
+        {floats.map((float) => (
+          <span
+            key={float.id}
+            className="click-float"
+            style={{ left: float.x, top: float.y }}
+          >
+            {float.text}
+          </span>
+        ))}
+      </div>
+      <p className="click-power">+{formatNumber(clickPower)} gold/click</p>
     </section>
   );
 };

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

@@ -0,0 +1,102 @@
+import type { Equipment, EquipmentType } from "@elysium/types";
+import { useGame } from "../../context/GameContext.js";
+
+const RARITY_LABEL: Record<string, string> = {
+  common: "Common",
+  rare: "Rare",
+  epic: "Epic",
+  legendary: "Legendary",
+};
+
+const TYPE_ICON: Record<EquipmentType, string> = {
+  weapon: "⚔️",
+  armour: "🛡️",
+  trinket: "💍",
+};
+
+const bonusDescription = (item: Equipment): string => {
+  const parts: string[] = [];
+  if (item.bonus.combatMultiplier != null) {
+    parts.push(`+${Math.round((item.bonus.combatMultiplier - 1) * 100)}% Combat`);
+  }
+  if (item.bonus.goldMultiplier != null) {
+    parts.push(`+${Math.round((item.bonus.goldMultiplier - 1) * 100)}% Gold/s`);
+  }
+  if (item.bonus.clickMultiplier != null) {
+    parts.push(`+${Math.round((item.bonus.clickMultiplier - 1) * 100)}% Click`);
+  }
+  return parts.join(", ");
+};
+
+interface EquipmentCardProps {
+  item: Equipment;
+}
+
+const EquipmentCard = ({ item }: EquipmentCardProps): React.JSX.Element => {
+  const { equipItem } = useGame();
+
+  return (
+    <div className={`equipment-card rarity-${item.rarity} ${item.equipped ? "equipped" : ""} ${!item.owned ? "not-owned" : ""}`}>
+      <div className="equipment-icon">{TYPE_ICON[item.type]}</div>
+      <div className="equipment-info">
+        <div className="equipment-name-row">
+          <h3>{item.name}</h3>
+          <span className={`rarity-badge rarity-${item.rarity}`}>{RARITY_LABEL[item.rarity]}</span>
+        </div>
+        <p className="equipment-description">{item.description}</p>
+        <p className="equipment-bonus">{bonusDescription(item)}</p>
+      </div>
+      <div className="equipment-action">
+        {!item.owned && <span className="equipment-locked">🔒 Not yet obtained</span>}
+        {item.owned && item.equipped && <span className="equipment-equipped-badge">✓ Equipped</span>}
+        {item.owned && !item.equipped && (
+          <button
+            className="equip-button"
+            onClick={() => { equipItem(item.id); }}
+            type="button"
+          >
+            Equip
+          </button>
+        )}
+      </div>
+    </div>
+  );
+};
+
+const SLOT_ORDER: EquipmentType[] = ["weapon", "armour", "trinket"];
+const SLOT_LABEL: Record<EquipmentType, string> = {
+  weapon: "⚔️ Weapons",
+  armour: "🛡️ Armour",
+  trinket: "💍 Trinkets",
+};
+
+export const EquipmentPanel = (): React.JSX.Element => {
+  const { state } = useGame();
+
+  if (!state) return <section className="panel"><p>Loading...</p></section>;
+
+  const equipment = state.equipment ?? [];
+
+  return (
+    <section className="panel equipment-panel">
+      <h2>Equipment</h2>
+      <p className="equipment-intro">
+        Equipment drops from bosses and grants passive bonuses. Only one item per slot can be equipped at a time.
+      </p>
+
+      {SLOT_ORDER.map((slotType) => {
+        const items = equipment.filter((e) => e.type === slotType);
+        return (
+          <div key={slotType} className="equipment-slot-section">
+            <h3 className="slot-heading">{SLOT_LABEL[slotType]}</h3>
+            <div className="equipment-list">
+              {items.map((item) => (
+                <EquipmentCard key={item.id} item={item} />
+              ))}
+            </div>
+          </div>
+        );
+      })}
+    </section>
+  );
+};

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>

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

@@ -12,6 +12,23 @@ const UpgradeCard = ({ upgrade, currentGold, currentEssence }: UpgradeCardProps)
   const canAfford =
     currentGold >= upgrade.costGold && currentEssence >= upgrade.costEssence;
 
+  if (!upgrade.unlocked) {
+    return (
+      <div className="upgrade-card locked">
+        <div className="upgrade-info">
+          <h3>🔒 {upgrade.name}</h3>
+          <p>{upgrade.description}</p>
+          <p className="upgrade-multiplier">×{upgrade.multiplier} multiplier</p>
+        </div>
+        <div className="upgrade-cost">
+          {upgrade.costGold > 0 && <span>🪙 {upgrade.costGold.toLocaleString()}</span>}
+          {upgrade.costEssence > 0 && <span>✨ {upgrade.costEssence.toLocaleString()}</span>}
+        </div>
+        <span className="upgrade-locked-label">Locked</span>
+      </div>
+    );
+  }
+
   if (upgrade.purchased) {
     return (
       <div className="upgrade-card purchased">
@@ -49,16 +66,35 @@ export const UpgradePanel = (): React.JSX.Element => {
 
   if (!state) return <section className="panel"><p>Loading...</p></section>;
 
-  const availableUpgrades = state.upgrades.filter((u) => u.unlocked);
+  const purchased = state.upgrades.filter((u) => u.purchased);
+  const available = state.upgrades.filter((u) => u.unlocked && !u.purchased);
+  const locked = state.upgrades.filter((u) => !u.unlocked);
 
   return (
     <section className="panel upgrade-panel">
       <h2>Upgrades</h2>
-      {availableUpgrades.length === 0 ? (
+      <p className="upgrade-progress">{purchased.length} / {state.upgrades.length} purchased</p>
+      {state.upgrades.length === 0 ? (
         <p className="empty-state">No upgrades available yet — keep adventuring!</p>
       ) : (
         <div className="upgrade-list">
-          {availableUpgrades.map((upgrade) => (
+          {available.map((upgrade) => (
+            <UpgradeCard
+              key={upgrade.id}
+              upgrade={upgrade}
+              currentGold={state.resources.gold}
+              currentEssence={state.resources.essence}
+            />
+          ))}
+          {purchased.map((upgrade) => (
+            <UpgradeCard
+              key={upgrade.id}
+              upgrade={upgrade}
+              currentGold={state.resources.gold}
+              currentEssence={state.resources.essence}
+            />
+          ))}
+          {locked.map((upgrade) => (
             <UpgradeCard
               key={upgrade.id}
               upgrade={upgrade}