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

@@ -111,7 +111,11 @@ const howToPlay = [
       + " real-time and reward gold, essence, and crafting materials when"
       + " collected. Each area has a set duration — short explorations are"
       + " faster but longer ones offer rarer finds. A 📖 icon marks areas"
-      + " you've collected from at least once, unlocking a Codex entry.",
+      + " you've collected from at least once, unlocking a Codex entry."
+      + " Exploration zones are locked until the corresponding main-game"
+      + " zone is unlocked — which requires defeating that zone's final boss"
+      + " and completing its final quest. The Exploration tab shows the"
+      + " specific boss and quest required for each locked zone.",
     title: "🗺️ Exploration",
   },
   {

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

@@ -6,6 +6,7 @@
  */
 /* eslint-disable max-lines-per-function -- Complex component with many render paths */
 /* eslint-disable complexity -- Complex component with many conditional render paths */
+/* eslint-disable max-lines -- Exploration panel requires many render paths and result display */
 import { type JSX, useState } from "react";
 import { useGame } from "../../context/gameContext.js";
 import { EXPLORATION_AREAS } from "../../data/explorations.js";
@@ -91,7 +92,24 @@ const ExplorationPanel = (): JSX.Element => {
     );
   }
 
-  const { zones, exploration: explorationState } = state;
+  const { zones, exploration: explorationState, bosses, quests } = state;
+
+  const activeZone = zones.find((zone) => {
+    return zone.id === activeZoneId;
+  });
+  const zoneIsLocked = activeZone?.status === "locked";
+  const unlockBoss = activeZone?.unlockBossId === null
+    || activeZone?.unlockBossId === undefined
+    ? undefined
+    : bosses.find((boss) => {
+      return boss.id === activeZone.unlockBossId;
+    });
+  const unlockQuest = activeZone?.unlockQuestId === null
+    || activeZone?.unlockQuestId === undefined
+    ? undefined
+    : quests.find((quest) => {
+      return quest.id === activeZone.unlockQuestId;
+    });
 
   const zoneAreas = EXPLORATION_AREAS.filter((area) => {
     return area.zoneId === activeZoneId;
@@ -220,6 +238,27 @@ const ExplorationPanel = (): JSX.Element => {
         zones={zones}
       />
 
+      {zoneIsLocked && (unlockBoss !== undefined || unlockQuest !== undefined)
+        ? <div className="exploration-zone-locked-hint">
+          <p>{"🔒 This zone is locked. Unlock exploration by:"}</p>
+          {unlockBoss === undefined
+            ? null
+            : <p>
+              {"⚔️ Defeat: "}
+              {unlockBoss.name}
+            </p>
+          }
+          {unlockQuest === undefined
+            ? null
+            : <p>
+              {"📜 Complete: "}
+              {unlockQuest.name}
+            </p>
+          }
+        </div>
+        : null
+      }
+
       <div className="exploration-list">
         {zoneAreas.map((area) => {
           const areaState = explorationState?.areas.find((explorationArea) => {