feat: add about page with versions, changelog, and how-to-play

- New GET /about API endpoint caches Gitea releases for 5 minutes
- AboutPanel displays client version (via Vite define), API version, collapsible changelog, and How to Play guide
- GiteaRelease and AboutResponse types added to shared package

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

@@ -1,6 +1,7 @@
 import { useState } from "react";
 import { useGame } from "../../context/GameContext.js";
 import { ResourceBar } from "../ui/ResourceBar.js";
+import { AboutPanel } from "./AboutPanel.js";
 import { AchievementPanel } from "./AchievementPanel.js";
 import { AchievementToast } from "./AchievementToast.js";
 import { AdventurerPanel } from "./AdventurerPanel.js";
@@ -16,7 +17,7 @@ import { StatisticsPanel } from "./StatisticsPanel.js";
 import { UpgradePanel } from "./UpgradePanel.js";
 import { DailyChallengePanel } from "./DailyChallengePanel.js";
 
-type Tab = "adventurers" | "upgrades" | "quests" | "bosses" | "equipment" | "achievements" | "prestige" | "statistics" | "daily";
+type Tab = "adventurers" | "upgrades" | "quests" | "bosses" | "equipment" | "achievements" | "prestige" | "statistics" | "daily" | "about";
 
 const TABS: { id: Tab; label: string }[] = [
   { id: "adventurers", label: "⚔️ Adventurers" },
@@ -28,6 +29,7 @@ const TABS: { id: Tab; label: string }[] = [
   { id: "prestige", label: "⭐ Prestige" },
   { id: "statistics", label: "📊 Statistics" },
   { id: "daily", label: "📅 Daily" },
+  { id: "about", label: "ℹ️ About" },
 ];
 
 export const GameLayout = (): React.JSX.Element => {
@@ -104,6 +106,7 @@ export const GameLayout = (): React.JSX.Element => {
             {activeTab === "prestige" && <PrestigePanel />}
             {activeTab === "statistics" && <StatisticsPanel />}
             {activeTab === "daily" && <DailyChallengePanel />}
+            {activeTab === "about" && <AboutPanel />}
           </div>
         </main>
       </div>