Merge branch 'main' into feature/loot-resolution

Merge branch 'feature/post-combat-rewards'
Merge pull request '✨Feature: implement game shell UI with room navigation and combat mechanics' (#9 ) from feature/game-shell-ui into main
2026-03-16 00:05:05 +00:00 · 2026-03-15 19:03:37 -05:00 · 2026-03-15 23:57:34 +00:00 · 2026-03-15 23:57:24 +00:00 · 2026-03-15 14:24:39 -05:00 · 2026-03-15 14:16:37 -05:00
11 changed files with 1465 additions and 117 deletions
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,71 +1,362 @@
+import React from "react";
+
 import { sampleContentPack } from "@/data/sampleContentPack";
+import { createStartingAdventurer } from "@/rules/character";
+import {
+  createRunState,
+  enterCurrentRoom,
+  getAvailableMoves,
+  isCurrentRoomCombatReady,
+  resolveRunEnemyTurn,
+  resolveRunPlayerTurn,
+  startCombatInCurrentRoom,
+  travelCurrentExit,
+} from "@/rules/runState";
+import type { RunState } from "@/types/state";

-const planningDocs = [
-  "Planning/PROJECT_PLAN.md",
-  "Planning/GAME_SPEC.md",
-  "Planning/content-checklist.json",
-  "Planning/DATA_MODEL.md",
-  "Planning/IMPLEMENTATION_NOTES.md",
-];
+function createDemoRun() {
+  const adventurer = createStartingAdventurer(sampleContentPack, {
+    name: "Aster",
+    weaponId: "weapon.short-sword",
+    armourId: "armour.leather-vest",
+    scrollId: "scroll.lesser-heal",
+  });

-const nextTargets = [
-  "Encode Level 1 foundational tables into structured JSON.",
-  "Implement dice utilities for D3, D6, 2D6, and D66.",
-  "Create character creation state and validation.",
-  "Build deterministic room generation for the Level 1 loop.",
-];
+  return createRunState({
+    content: sampleContentPack,
+    campaignId: "campaign.demo",
+    adventurer,
+  });
+}
+
+function getRoomTitle(run: RunState, roomId?: string) {
+  if (!roomId) {
+    return "Unknown Room";
+  }
+
+  const room = run.dungeon.levels[run.currentLevel]?.rooms[roomId];
+
+  if (!room) {
+    return "Unknown Room";
+  }
+
+  return (
+    sampleContentPack.roomTemplates.find((template) => template.id === room.templateId)?.title ??
+    room.notes[0] ??
+    room.templateId ??
+    room.id
+  );
+}

 function App() {
+  const [run, setRun] = React.useState<RunState>(() => createDemoRun());
+  const currentLevel = run.dungeon.levels[run.currentLevel];
+  const currentRoom = run.currentRoomId ? currentLevel?.rooms[run.currentRoomId] : undefined;
+  const availableMoves = getAvailableMoves(run);
+  const combatReadyEncounter = isCurrentRoomCombatReady(run);
+
+  const handleReset = () => {
+    setRun(createDemoRun());
+  };
+
+  const handleEnterRoom = () => {
+    setRun((previous) => enterCurrentRoom({ content: sampleContentPack, run: previous }).run);
+  };
+
+  const handleStartCombat = () => {
+    setRun((previous) =>
+      startCombatInCurrentRoom({ content: sampleContentPack, run: previous }).run,
+    );
+  };
+
+  const handleTravel = (direction: "north" | "east" | "south" | "west") => {
+    setRun((previous) =>
+      travelCurrentExit({
+        content: sampleContentPack,
+        run: previous,
+        exitDirection: direction,
+      }).run,
+    );
+  };
+
+  const handlePlayerTurn = (manoeuvreId: string, targetEnemyId: string) => {
+    setRun((previous) =>
+      resolveRunPlayerTurn({
+        content: sampleContentPack,
+        run: previous,
+        manoeuvreId,
+        targetEnemyId,
+      }).run,
+    );
+  };
+
+  const handleEnemyTurn = () => {
+    setRun((previous) =>
+      resolveRunEnemyTurn({ content: sampleContentPack, run: previous }).run,
+    );
+  };
+
  return (
    <main className="app-shell">
      <section className="hero">
+        <div>
          <p className="eyebrow">2D6 Dungeon Web</p>
-        <h1>Project scaffold is live.</h1>
+          <h1>Dungeon Loop Shell</h1>
          <p className="lede">
-          The app now has a Vite + React + TypeScript foundation, shared type
-          models, and Zod schemas that mirror the planning documents.
+            Traverse generated rooms, auto-resolve room entry, and engage combat
+            when a room reveals a real encounter.
          </p>
+        </div>
+
+        <div className="hero-actions">
+          <button className="button button-primary" onClick={handleReset}>
+            Reset Demo Run
+          </button>
+          <div className="status-chip">
+            <span>Run Status</span>
+            <strong>{run.status}</strong>
+          </div>
+        </div>
      </section>

-      <section className="panel-grid">
-        <article className="panel">
-          <h2>Planning Set</h2>
-          <ul>
-            {planningDocs.map((doc) => (
-              <li key={doc}>{doc}</li>
-            ))}
-          </ul>
+      {combatReadyEncounter && !run.activeCombat ? (
+        <section className="alert-banner">
+          <div>
+            <span className="alert-kicker">Encounter Ready</span>
+            <strong>{currentRoom?.encounter?.resultLabel}</strong>
+            <p>
+              This room contains a combat-ready encounter. Engage now to enter
+              tactical resolution.
+            </p>
+          </div>
+          <button className="button button-primary" onClick={handleStartCombat}>
+            Engage Encounter
+          </button>
+        </section>
+      ) : null}
+
+      <section className="dashboard-grid">
+        <article className="panel panel-highlight">
+          <div className="panel-header">
+            <h2>Adventurer</h2>
+            <span>Level {run.adventurerSnapshot.level}</span>
+          </div>
+          <div className="stat-strip">
+            <div>
+              <span>HP</span>
+              <strong>
+                {run.adventurerSnapshot.hp.current}/{run.adventurerSnapshot.hp.max}
+              </strong>
+            </div>
+            <div>
+              <span>Shift</span>
+              <strong>{run.adventurerSnapshot.stats.shift}</strong>
+            </div>
+            <div>
+              <span>Discipline</span>
+              <strong>{run.adventurerSnapshot.stats.discipline}</strong>
+            </div>
+            <div>
+              <span>Precision</span>
+              <strong>{run.adventurerSnapshot.stats.precision}</strong>
+            </div>
+            <div>
+              <span>XP</span>
+              <strong>{run.adventurerSnapshot.xp}</strong>
+            </div>
+          </div>
+          <p className="supporting-text">
+            {run.adventurerSnapshot.name} is equipped with a{" "}
+            {sampleContentPack.weapons.find(
+              (weapon) => weapon.id === run.adventurerSnapshot.weaponId,
+            )?.name ?? "weapon"}
+            .
+          </p>
+          <p className="supporting-text">
+            Run rewards: {run.xpGained} XP, {run.goldGained} gold,{" "}
+            {run.defeatedCreatureIds.length} foes defeated.
+          </p>
+          <p className="supporting-text">
+            Carried gold: {run.adventurerSnapshot.inventory.currency.gold}. Looted items:{" "}
+            {run.lootedItems.length === 0
+              ? "none yet"
+              : run.lootedItems
+                  .map((entry) => {
+                    const item = sampleContentPack.items.find(
+                      (candidate) => candidate.id === entry.definitionId,
+                    );
+
+                    return entry.quantity > 1
+                      ? `${entry.quantity}x ${item?.name ?? entry.definitionId}`
+                      : item?.name ?? entry.definitionId;
+                  })
+                  .join(", ")}
+            .
+          </p>
        </article>

        <article className="panel">
-          <h2>Immediate Build Targets</h2>
-          <ol>
-            {nextTargets.map((target) => (
-              <li key={target}>{target}</li>
-            ))}
-          </ol>
+          <div className="panel-header">
+            <h2>Current Room</h2>
+            <span>Level {run.currentLevel}</span>
+          </div>
+          <h3 className="room-title">
+            {getRoomTitle(run, run.currentRoomId)}
+          </h3>
+          <p className="supporting-text">
+            {currentRoom?.notes[1] ?? "No encounter notes available yet."}
+          </p>
+          <div className="room-meta">
+            <span>Entered: {currentRoom?.discovery.entered ? "Yes" : "No"}</span>
+            <span>Cleared: {currentRoom?.discovery.cleared ? "Yes" : "No"}</span>
+            <span>Exits: {currentRoom?.exits.length ?? 0}</span>
+          </div>
+          <div className="button-row">
+            <button className="button" onClick={handleEnterRoom}>
+              Enter Room
+            </button>
+            <button
+              className="button button-primary"
+              onClick={handleStartCombat}
+              disabled={!combatReadyEncounter || Boolean(run.activeCombat)}
+            >
+              Start Combat
+            </button>
+          </div>
+          <div className="encounter-box">
+            <span className="encounter-label">Encounter</span>
+            <strong>{currentRoom?.encounter?.resultLabel ?? "None"}</strong>
+          </div>
        </article>

        <article className="panel">
-          <h2>Sample Content Pack</h2>
-          <dl className="stats">
-            <div>
-              <dt>Tables</dt>
-              <dd>{sampleContentPack.tables.length}</dd>
+          <div className="panel-header">
+            <h2>Navigation</h2>
+            <span>{availableMoves.length} exits</span>
          </div>
-            <div>
-              <dt>Weapons</dt>
-              <dd>{sampleContentPack.weapons.length}</dd>
+          <div className="move-list">
+            {availableMoves.map((move) => (
+              <button
+                key={move.direction}
+                className="move-card"
+                onClick={() => handleTravel(move.direction)}
+                disabled={Boolean(run.activeCombat)}
+              >
+                <span>{move.direction}</span>
+                <strong>{move.leadsToRoomId ? "Travel" : "Generate"}</strong>
+                <em>
+                  {move.leadsToRoomId
+                    ? getRoomTitle(run, move.leadsToRoomId)
+                    : `${move.exitType} exit`}
+                </em>
+              </button>
+            ))}
          </div>
-            <div>
-              <dt>Manoeuvres</dt>
-              <dd>{sampleContentPack.manoeuvres.length}</dd>
+          <div className="mini-map">
+            {currentLevel?.discoveredRoomOrder.map((roomId) => {
+              const room = currentLevel.rooms[roomId];
+              const active = roomId === run.currentRoomId;
+
+              return (
+                <article
+                  key={roomId}
+                  className={`map-node${active ? " map-node-active" : ""}`}
+                >
+                  <span>
+                    {room.position.x},{room.position.y}
+                  </span>
+                  <strong>{getRoomTitle(run, roomId)}</strong>
+                </article>
+              );
+            })}
          </div>
-            <div>
-              <dt>Creatures</dt>
-              <dd>{sampleContentPack.creatures.length}</dd>
+        </article>
+
+        <article className="panel">
+          <div className="panel-header">
+            <h2>Combat</h2>
+            <span>{run.activeCombat ? `Round ${run.activeCombat.round}` : "Inactive"}</span>
+          </div>
+          {run.activeCombat ? (
+            <>
+              <div className="combat-status">
+                <span>Acting Side</span>
+                <strong>{run.activeCombat.actingSide}</strong>
+              </div>
+              <div className="enemy-list">
+                {run.activeCombat.enemies.map((enemy) => (
+                  <div key={enemy.id} className="enemy-card">
+                    <div>
+                      <strong>{enemy.name}</strong>
+                      <span>
+                        HP {enemy.hpCurrent}/{enemy.hpMax}
+                      </span>
+                    </div>
+                    <div className="enemy-actions">
+                      <button
+                        className="button"
+                        onClick={() =>
+                          handlePlayerTurn("manoeuvre.exact-strike", enemy.id)
+                        }
+                        disabled={
+                          run.activeCombat?.actingSide !== "player" ||
+                          enemy.hpCurrent <= 0
+                        }
+                      >
+                        Exact Strike
+                      </button>
+                      <button
+                        className="button"
+                        onClick={() => handlePlayerTurn("manoeuvre.guard-break", enemy.id)}
+                        disabled={
+                          run.activeCombat?.actingSide !== "player" ||
+                          enemy.hpCurrent <= 0
+                        }
+                      >
+                        Guard Break
+                      </button>
+                    </div>
+                  </div>
+                ))}
+              </div>
+              <div className="button-row">
+                <button
+                  className="button button-primary"
+                  onClick={handleEnemyTurn}
+                  disabled={run.activeCombat.actingSide !== "enemy"}
+                >
+                  Resolve Enemy Turn
+                </button>
+              </div>
+            </>
+          ) : (
+            <p className="supporting-text">
+              No active combat. Travel until a room reveals a hostile encounter,
+              then engage it from the banner or room panel.
+            </p>
+          )}
+        </article>
+
+        <article className="panel panel-log">
+          <div className="panel-header">
+            <h2>Run Log</h2>
+            <span>{run.log.length} entries</span>
+          </div>
+          <div className="log-list">
+            {run.log.length === 0 ? (
+              <p className="supporting-text">No events recorded yet.</p>
+            ) : (
+              run.log
+                .slice()
+                .reverse()
+                .map((entry) => (
+                  <article key={entry.id} className="log-entry">
+                    <span>{entry.type}</span>
+                    <p>{entry.text}</p>
+                  </article>
+                ))
+            )}
          </div>
-          </dl>
        </article>
      </section>
    </main>
--- a/src/data/contentHelpers.test.ts
+++ b/src/data/contentHelpers.test.ts
@@ -4,6 +4,7 @@ import { lookupTable } from "@/rules/tables";

 import {
  findCreatureByName,
+  findItemById,
  findRoomTemplateForLookup,
  findTableByCode,
 } from "./contentHelpers";
@@ -57,4 +58,11 @@ describe("level 1 content helpers", () => {
    expect(creature.id).toBe("creature.level1.guard");
    expect(creature.hp).toBeGreaterThan(0);
  });
+
+  it("finds a loot item definition by id", () => {
+    const item = findItemById(sampleContentPack, "item.silver-clasp");
+
+    expect(item.name).toBe("Silver Clasp");
+    expect(item.itemType).toBe("treasure");
+  });
 });
--- a/src/data/contentHelpers.ts
+++ b/src/data/contentHelpers.ts
@@ -1,6 +1,7 @@
 import type {
  ContentPack,
  CreatureDefinition,
+  ItemDefinition,
  RoomTemplate,
  TableDefinition,
 } from "@/types/content";
@@ -61,3 +62,26 @@ export function findCreatureByName(

  return creature;
 }
+
+export function findCreatureById(
+  content: ContentPack,
+  creatureId: string,
+): CreatureDefinition {
+  const creature = content.creatures.find((entry) => entry.id === creatureId);
+
+  if (!creature) {
+    throw new Error(`Unknown creature id: ${creatureId}`);
+  }
+
+  return creature;
+}
+
+export function findItemById(content: ContentPack, itemId: string): ItemDefinition {
+  const item = content.items.find((entry) => entry.id === itemId);
+
+  if (!item) {
+    throw new Error(`Unknown item id: ${itemId}`);
+  }
+
+  return item;
+}
--- a/src/data/sampleContentPack.ts
+++ b/src/data/sampleContentPack.ts
@@ -13,6 +13,79 @@ const samplePack = {
  ],
  tables: [
    ...level1EncounterTables,
+    {
+      id: "table.level1.humanoid-loot",
+      code: "L1HL",
+      name: "Level 1 Humanoid Loot",
+      category: "loot",
+      level: 1,
+      page: 122,
+      diceKind: "d6",
+      entries: [
+        {
+          key: "1-2",
+          min: 1,
+          max: 2,
+          label: "Scavenged coins",
+          effects: [{ type: "gain-gold", amount: 1, target: "self" }],
+        },
+        {
+          key: "3-4",
+          min: 3,
+          max: 4,
+          label: "Bone Charm",
+          references: [{ type: "item", id: "item.bone-charm" }],
+        },
+        {
+          key: "5",
+          exact: 5,
+          label: "Silver Clasp and coins",
+          references: [{ type: "item", id: "item.silver-clasp" }],
+          effects: [{ type: "gain-gold", amount: 2, target: "self" }],
+        },
+        {
+          key: "6",
+          exact: 6,
+          label: "Key Ring and coin purse",
+          references: [{ type: "item", id: "item.keeper-keyring" }],
+          effects: [{ type: "gain-gold", amount: 3, target: "self" }],
+        },
+      ],
+      notes: ["Starter loot table for martial and humanoid encounters."],
+      mvp: true,
+    },
+    {
+      id: "table.level1.beast-loot",
+      code: "L1BL",
+      name: "Level 1 Beast Loot",
+      category: "loot",
+      level: 1,
+      page: 122,
+      diceKind: "d6",
+      entries: [
+        {
+          key: "1-4",
+          min: 1,
+          max: 4,
+          label: "Nothing useful",
+        },
+        {
+          key: "5",
+          exact: 5,
+          label: "Trophy Fang",
+          references: [{ type: "item", id: "item.trophy-fang" }],
+        },
+        {
+          key: "6",
+          exact: 6,
+          label: "Trophy Fang and stray coin",
+          references: [{ type: "item", id: "item.trophy-fang" }],
+          effects: [{ type: "gain-gold", amount: 1, target: "self" }],
+        },
+      ],
+      notes: ["Starter loot table for basic animal encounters."],
+      mvp: true,
+    },
    {
      id: "table.weapon-manoeuvres-1",
      code: "WMT1",
@@ -123,6 +196,42 @@ const samplePack = {
      consumable: false,
      mvp: true,
    },
+    {
+      id: "item.bone-charm",
+      name: "Bone Charm",
+      itemType: "treasure",
+      stackable: false,
+      consumable: false,
+      valueGp: 2,
+      mvp: true,
+    },
+    {
+      id: "item.silver-clasp",
+      name: "Silver Clasp",
+      itemType: "treasure",
+      stackable: false,
+      consumable: false,
+      valueGp: 4,
+      mvp: true,
+    },
+    {
+      id: "item.keeper-keyring",
+      name: "Keeper Keyring",
+      itemType: "treasure",
+      stackable: false,
+      consumable: false,
+      valueGp: 5,
+      mvp: true,
+    },
+    {
+      id: "item.trophy-fang",
+      name: "Trophy Fang",
+      itemType: "treasure",
+      stackable: true,
+      consumable: false,
+      valueGp: 1,
+      mvp: true,
+    },
  ],
  potions: [
    {
@@ -163,6 +272,7 @@ const samplePack = {
        numberAppearing: "1-2",
      },
      xpReward: 1,
+      lootTableCodes: ["L1BL"],
      sourcePage: 102,
      traits: ["level-1", "sample"],
      mvp: true,
@@ -182,6 +292,7 @@ const samplePack = {
        armour: 1,
      },
      xpReward: 2,
+      lootTableCodes: ["L1HL"],
      sourcePage: 102,
      traits: ["level-1", "martial"],
      mvp: true,
@@ -201,6 +312,7 @@ const samplePack = {
        armour: 1,
      },
      xpReward: 3,
+      lootTableCodes: ["L1HL"],
      sourcePage: 102,
      traits: ["level-1", "martial"],
      mvp: true,
@@ -217,6 +329,7 @@ const samplePack = {
        damage: 1,
      },
      xpReward: 1,
+      lootTableCodes: ["L1HL"],
      sourcePage: 102,
      traits: ["level-1", "martial"],
      mvp: true,
@@ -233,6 +346,7 @@ const samplePack = {
        damage: 1,
      },
      xpReward: 1,
+      lootTableCodes: ["L1BL"],
      sourcePage: 102,
      traits: ["level-1", "beast"],
      mvp: true,
@@ -249,6 +363,7 @@ const samplePack = {
        damage: 1,
      },
      xpReward: 2,
+      lootTableCodes: ["L1BL"],
      sourcePage: 102,
      traits: ["level-1", "beast"],
      mvp: true,
--- a/src/rules/loot.test.ts
+++ b/src/rules/loot.test.ts
@@ -0,0 +1,91 @@
+import { describe, expect, it } from "vitest";
+
+import { sampleContentPack } from "@/data/sampleContentPack";
+
+import { createStartingAdventurer } from "./character";
+import { startCombatFromRoom } from "./combat";
+import { resolveCombatLoot } from "./loot";
+
+function createSequenceRoller(values: number[]) {
+  let index = 0;
+
+  return () => {
+    const next = values[index];
+    index += 1;
+    return next;
+  };
+}
+
+function createAdventurer() {
+  return createStartingAdventurer(sampleContentPack, {
+    name: "Aster",
+    weaponId: "weapon.short-sword",
+    armourId: "armour.leather-vest",
+    scrollId: "scroll.lesser-heal",
+  });
+}
+
+describe("loot resolution", () => {
+  it("awards loot from defeated creatures into carried inventory", () => {
+    const room = {
+      id: "room.level1.start",
+      level: 1,
+      position: { x: 0, y: 0 },
+      dimensions: { width: 4, height: 4 },
+      roomClass: "start" as const,
+      exits: [],
+      discovery: {
+        generated: true,
+        entered: true,
+        cleared: false,
+        searched: false,
+      },
+      encounter: {
+        id: "room.level1.start.encounter",
+        sourceTableCode: "L1G",
+        creatureIds: ["room.level1.start.creature.1"],
+        creatureNames: ["Guard"],
+        resultLabel: "Guard",
+        resolved: true,
+      },
+      objects: [],
+      notes: ["Entry Chamber"],
+      flags: [],
+    };
+
+    const started = startCombatFromRoom({
+      content: sampleContentPack,
+      adventurer: createAdventurer(),
+      room,
+      at: "2026-03-15T14:02:00.000Z",
+    });
+
+    started.combat.enemies[0]!.hpCurrent = 0;
+
+    const loot = resolveCombatLoot({
+      content: sampleContentPack,
+      combat: started.combat,
+      inventory: createAdventurer().inventory,
+      roller: createSequenceRoller([5]),
+      at: "2026-03-15T14:03:00.000Z",
+    });
+
+    expect(loot.goldAwarded).toBe(2);
+    expect(loot.itemsAwarded).toEqual([
+      {
+        definitionId: "item.silver-clasp",
+        quantity: 1,
+      },
+    ]);
+    expect(loot.inventory.currency.gold).toBe(2);
+    expect(loot.inventory.carried).toEqual(
+      expect.arrayContaining([
+        expect.objectContaining({
+          definitionId: "item.silver-clasp",
+          quantity: 1,
+        }),
+      ]),
+    );
+    expect(loot.logEntries.some((entry) => entry.type === "loot")).toBe(true);
+  });
+});
--- a/src/rules/loot.ts
+++ b/src/rules/loot.ts
@@ -0,0 +1,172 @@
+import { findCreatureById, findItemById, findTableByCode } from "@/data/contentHelpers";
+import type { ContentPack } from "@/types/content";
+import type { CombatState, InventoryEntry, InventoryState } from "@/types/state";
+import type { LogEntry } from "@/types/rules";
+
+import type { DiceRoller } from "./dice";
+import { lookupTable } from "./tables";
+
+export type ResolveCombatLootOptions = {
+  content: ContentPack;
+  combat: CombatState;
+  inventory: InventoryState;
+  roller?: DiceRoller;
+  at: string;
+};
+
+export type ResolveCombatLootResult = {
+  inventory: InventoryState;
+  itemsAwarded: InventoryEntry[];
+  goldAwarded: number;
+  logEntries: LogEntry[];
+};
+
+function cloneInventory(inventory: InventoryState): InventoryState {
+  return {
+    ...inventory,
+    carried: inventory.carried.map((entry) => ({ ...entry })),
+    equipped: inventory.equipped.map((entry) => ({ ...entry })),
+    stored: inventory.stored.map((entry) => ({ ...entry })),
+    currency: { ...inventory.currency },
+    lightSources: inventory.lightSources.map((entry) => ({ ...entry })),
+  };
+}
+
+function createInventoryEntry(definitionId: string, quantity = 1): InventoryEntry {
+  return {
+    definitionId,
+    quantity,
+  };
+}
+
+function mergeInventoryEntry(
+  content: ContentPack,
+  entries: InventoryEntry[],
+  definitionId: string,
+  quantity: number,
+) {
+  const item = findItemById(content, definitionId);
+
+  if (item.stackable) {
+    const existing = entries.find((entry) => entry.definitionId === definitionId);
+
+    if (existing) {
+      existing.quantity += quantity;
+      return;
+    }
+  }
+
+  entries.push(createInventoryEntry(definitionId, quantity));
+}
+
+function createLootLog(
+  id: string,
+  at: string,
+  text: string,
+  relatedIds: string[],
+): LogEntry {
+  return {
+    id,
+    at,
+    type: "loot",
+    text,
+    relatedIds,
+  };
+}
+
+function summarizeLoot(
+  goldAwarded: number,
+  itemsAwarded: InventoryEntry[],
+  content: ContentPack,
+) {
+  const parts: string[] = [];
+
+  if (goldAwarded > 0) {
+    parts.push(`${goldAwarded} gold`);
+  }
+
+  for (const item of itemsAwarded) {
+    const itemName = findItemById(content, item.definitionId).name;
+    parts.push(item.quantity > 1 ? `${item.quantity}x ${itemName}` : itemName);
+  }
+
+  return parts.length > 0 ? parts.join(", ") : "nothing useful";
+}
+
+export function resolveCombatLoot(
+  options: ResolveCombatLootOptions,
+): ResolveCombatLootResult {
+  const inventory = cloneInventory(options.inventory);
+  const itemsAwarded: InventoryEntry[] = [];
+  const logEntries: LogEntry[] = [];
+  let goldAwarded = 0;
+
+  const defeatedCreatures = options.combat.enemies.filter(
+    (enemy) => enemy.hpCurrent === 0 && enemy.sourceDefinitionId,
+  );
+
+  for (const enemy of defeatedCreatures) {
+    const creature = findCreatureById(options.content, enemy.sourceDefinitionId!);
+    const lootTableCodes = creature.lootTableCodes ?? [];
+
+    for (const tableCode of lootTableCodes) {
+      const table = findTableByCode(options.content, tableCode);
+      const lookup = lookupTable(table, { roller: options.roller });
+      const rollTotal = lookup.roll.modifiedTotal ?? lookup.roll.total;
+
+      logEntries.push({
+        id: `${options.combat.id}.${creature.id}.${tableCode}.roll`,
+        at: options.at,
+        type: "roll",
+        text: `Rolled loot ${lookup.roll.diceKind} [${lookup.roll.rolls.join(", ")}] on ${tableCode} for ${rollTotal}: ${lookup.entry.label}.`,
+        relatedIds: [options.combat.id, creature.id, tableCode],
+      });
+
+      let creatureGold = 0;
+      const creatureItems: InventoryEntry[] = [];
+
+      for (const effect of lookup.entry.effects ?? []) {
+        if (effect.type === "gain-gold" && effect.amount) {
+          creatureGold += effect.amount;
+        }
+
+        if (effect.type === "add-item" && effect.referenceId) {
+          mergeInventoryEntry(options.content, inventory.carried, effect.referenceId, effect.amount ?? 1);
+          mergeInventoryEntry(options.content, itemsAwarded, effect.referenceId, effect.amount ?? 1);
+          mergeInventoryEntry(options.content, creatureItems, effect.referenceId, effect.amount ?? 1);
+        }
+      }
+
+      for (const reference of lookup.entry.references ?? []) {
+        if (reference.type !== "item") {
+          continue;
+        }
+
+        mergeInventoryEntry(options.content, inventory.carried, reference.id, 1);
+        mergeInventoryEntry(options.content, itemsAwarded, reference.id, 1);
+        mergeInventoryEntry(options.content, creatureItems, reference.id, 1);
+      }
+
+      if (creatureGold > 0) {
+        inventory.currency.gold += creatureGold;
+        goldAwarded += creatureGold;
+      }
+
+      logEntries.push(
+        createLootLog(
+          `${options.combat.id}.${creature.id}.${tableCode}.loot`,
+          options.at,
+          `${creature.name} yielded ${summarizeLoot(creatureGold, creatureItems, options.content)}.`,
+          [options.combat.id, creature.id, tableCode],
+        ),
+      );
+    }
+  }
+
+  return {
+    inventory,
+    itemsAwarded,
+    goldAwarded,
+    logEntries,
+  };
+}
--- a/src/rules/runState.test.ts
+++ b/src/rules/runState.test.ts
@@ -6,9 +6,12 @@ import { createStartingAdventurer } from "./character";
 import {
  createRunState,
  enterCurrentRoom,
+  getAvailableMoves,
+  isCurrentRoomCombatReady,
  resolveRunEnemyTurn,
  resolveRunPlayerTurn,
  startCombatInCurrentRoom,
+  travelCurrentExit,
 } from "./runState";

 function createSequenceRoller(values: number[]) {
@@ -173,7 +176,7 @@ describe("run state flow", () => {
      run: withCombat,
      manoeuvreId: "manoeuvre.guard-break",
      targetEnemyId: withCombat.activeCombat!.enemies[0]!.id,
-      roller: createSequenceRoller([6, 6]),
+      roller: createSequenceRoller([6, 6, 5]),
      at: "2026-03-15T14:03:00.000Z",
    });

@@ -182,5 +185,130 @@ describe("run state flow", () => {
    expect(result.run.dungeon.levels["1"]!.rooms["room.level1.start"]!.encounter?.rewardPending).toBe(
      false,
    );
+    expect(result.run.adventurerSnapshot.xp).toBe(2);
+    expect(result.run.xpGained).toBe(2);
+    expect(result.run.adventurerSnapshot.inventory.currency.gold).toBe(2);
+    expect(result.run.goldGained).toBe(2);
+    expect(result.run.defeatedCreatureIds).toEqual(["creature.level1.guard"]);
+    expect(result.run.lootedItems).toEqual([
+      {
+        definitionId: "item.silver-clasp",
+        quantity: 1,
+      },
+    ]);
+    expect(result.run.adventurerSnapshot.inventory.carried).toEqual(
+      expect.arrayContaining([
+        expect.objectContaining({
+          definitionId: "item.silver-clasp",
+          quantity: 1,
+        }),
+      ]),
+    );
+    expect(result.run.log.at(-1)?.text).toContain("Victory rewards");
+  });
+
+  it("lists available traversable exits for the current room", () => {
+    const run = createRunState({
+      content: sampleContentPack,
+      campaignId: "campaign.1",
+      adventurer: createAdventurer(),
+    });
+
+    expect(getAvailableMoves(run)).toEqual([
+      expect.objectContaining({
+        direction: "north",
+        generated: false,
+      }),
+    ]);
+  });
+
+  it("travels through an unresolved exit, generates a room, and enters it", () => {
+    const run = createRunState({
+      content: sampleContentPack,
+      campaignId: "campaign.1",
+      adventurer: createAdventurer(),
+      at: "2026-03-15T14:00:00.000Z",
+    });
+
+    const result = travelCurrentExit({
+      content: sampleContentPack,
+      run,
+      exitDirection: "north",
+      roller: createSequenceRoller([1, 1]),
+      at: "2026-03-15T14:05:00.000Z",
+    });
+
+    expect(result.run.currentRoomId).toBe("room.level1.room.002");
+    expect(result.run.dungeon.levels["1"]!.discoveredRoomOrder).toEqual([
+      "room.level1.start",
+      "room.level1.room.002",
+    ]);
+    expect(result.run.dungeon.levels["1"]!.rooms["room.level1.room.002"]!.discovery.entered).toBe(
+      true,
+    );
+    expect(result.run.log[0]?.text).toContain("Travelled north");
+  });
+
+  it("flags combat-ready rooms once entry resolves a hostile encounter", () => {
+    const run = createRunState({
+      content: sampleContentPack,
+      campaignId: "campaign.1",
+      adventurer: createAdventurer(),
+      at: "2026-03-15T14:00:00.000Z",
+    });
+    const room = run.dungeon.levels["1"]!.rooms["room.level1.start"]!;
+
+    room.encounter = {
+      id: `${room.id}.encounter`,
+      sourceTableCode: "L1G",
+      creatureIds: ["a", "b"],
+      creatureNames: ["Guard", "Warrior"],
+      resultLabel: "Guard and Warrior",
+      resolved: true,
+    };
+
+    expect(isCurrentRoomCombatReady(run)).toBe(true);
+  });
+
+  it("lists available traversable exits for the current room", () => {
+    const run = createRunState({
+      content: sampleContentPack,
+      campaignId: "campaign.1",
+      adventurer: createAdventurer(),
+    });
+
+    expect(getAvailableMoves(run)).toEqual([
+      expect.objectContaining({
+        direction: "north",
+        generated: false,
+      }),
+    ]);
+  });
+
+  it("travels through an unresolved exit, generates a room, and enters it", () => {
+    const run = createRunState({
+      content: sampleContentPack,
+      campaignId: "campaign.1",
+      adventurer: createAdventurer(),
+      at: "2026-03-15T14:00:00.000Z",
+    });
+
+    const result = travelCurrentExit({
+      content: sampleContentPack,
+      run,
+      exitDirection: "north",
+      roller: createSequenceRoller([1, 1]),
+      at: "2026-03-15T14:05:00.000Z",
+    });
+
+    expect(result.run.currentRoomId).toBe("room.level1.room.002");
+    expect(result.run.dungeon.levels["1"]!.discoveredRoomOrder).toEqual([
+      "room.level1.start",
+      "room.level1.room.002",
+    ]);
+    expect(result.run.dungeon.levels["1"]!.rooms["room.level1.room.002"]!.discovery.entered).toBe(
+      true,
+    );
+    expect(result.run.log[0]?.text).toContain("Travelled north");
  });
 });
--- a/src/rules/runState.ts
+++ b/src/rules/runState.ts
@@ -6,15 +6,21 @@ import type {
  RunState,
 } from "@/types/state";
 import type { LogEntry } from "@/types/rules";
+import { findCreatureById } from "@/data/contentHelpers";

 import { startCombatFromRoom } from "./combat";
+import { resolveCombatLoot } from "./loot";
 import {
  resolveEnemyTurn,
  resolvePlayerAttack,
  type ResolveEnemyTurnOptions,
  type ResolvePlayerAttackOptions,
 } from "./combatTurns";
-import { initializeDungeonLevel } from "./dungeon";
+import {
+  expandLevelFromExit,
+  getUnresolvedExits,
+  initializeDungeonLevel,
+} from "./dungeon";
 import type { DiceRoller } from "./dice";
 import { enterRoom } from "./roomEntry";

@@ -55,6 +61,23 @@ export type ResolveRunEnemyTurnOptions = {
  at?: string;
 };

+export type TravelCurrentExitOptions = {
+  content: ContentPack;
+  run: RunState;
+  exitDirection: "north" | "east" | "south" | "west";
+  roomTableCode?: string;
+  roller?: DiceRoller;
+  at?: string;
+};
+
+export type AvailableMove = {
+  direction: "north" | "east" | "south" | "west";
+  exitType: string;
+  discovered: boolean;
+  leadsToRoomId?: string;
+  generated: boolean;
+};
+
 export type RunTransitionResult = {
  run: RunState;
  logEntries: LogEntry[];
@@ -141,6 +164,10 @@ function cloneRun(run: RunState): RunState {
      globalFlags: [...run.dungeon.globalFlags],
    },
    activeCombat: run.activeCombat ? cloneCombat(run.activeCombat) : undefined,
+    defeatedCreatureIds: [...run.defeatedCreatureIds],
+    xpGained: run.xpGained,
+    goldGained: run.goldGained,
+    lootedItems: run.lootedItems.map((entry) => ({ ...entry })),
    log: run.log.map((entry) => ({
      ...entry,
      relatedIds: entry.relatedIds ? [...entry.relatedIds] : undefined,
@@ -167,6 +194,37 @@ function requireCurrentRoomId(run: RunState) {
  return run.currentRoomId;
 }

+function requireCurrentRoom(run: RunState) {
+  const levelState = requireCurrentLevel(run);
+  const roomId = requireCurrentRoomId(run);
+  const room = levelState.rooms[roomId];
+
+  if (!room) {
+    throw new Error(`Unknown room id: ${roomId}`);
+  }
+
+  return room;
+}
+
+function inferNextRoomTableCode(run: RunState) {
+  const room = requireCurrentRoom(run);
+  const levelState = requireCurrentLevel(run);
+
+  if (room.roomClass === "start") {
+    return "L1LR";
+  }
+
+  if (room.roomClass === "small") {
+    return "L1LR";
+  }
+
+  if (room.roomClass === "large") {
+    return "L1SR";
+  }
+
+  return levelState.discoveredRoomOrder.length % 2 === 0 ? "L1LR" : "L1SR";
+}
+
 function syncPlayerToAdventurer(run: RunState) {
  if (!run.activeCombat) {
    return;
@@ -180,6 +238,80 @@ function appendLogs(run: RunState, logEntries: LogEntry[]) {
  run.log.push(...logEntries);
 }

+function createRewardLog(
+  id: string,
+  at: string,
+  text: string,
+  relatedIds: string[],
+): LogEntry {
+  return {
+    id,
+    at,
+    type: "progression",
+    text,
+    relatedIds,
+  };
+}
+
+function applyCombatRewards(
+  content: ContentPack,
+  run: RunState,
+  completedCombat: CombatState,
+  roller: DiceRoller | undefined,
+  at: string,
+) {
+  const defeatedCreatureIds = completedCombat.enemies
+    .filter((enemy) => enemy.hpCurrent === 0 && enemy.sourceDefinitionId)
+    .map((enemy) => enemy.sourceDefinitionId!);
+  const xpAwarded = defeatedCreatureIds.reduce((total, creatureId) => {
+    return total + (findCreatureById(content, creatureId).xpReward ?? 0);
+  }, 0);
+
+  run.defeatedCreatureIds.push(...defeatedCreatureIds);
+  run.xpGained += xpAwarded;
+  run.adventurerSnapshot.xp += xpAwarded;
+
+  const lootResult = resolveCombatLoot({
+    content,
+    combat: completedCombat,
+    inventory: run.adventurerSnapshot.inventory,
+    roller,
+    at,
+  });
+
+  run.adventurerSnapshot.inventory = lootResult.inventory;
+  run.goldGained += lootResult.goldAwarded;
+
+  for (const item of lootResult.itemsAwarded) {
+    const existing = run.lootedItems.find(
+      (entry) => entry.definitionId === item.definitionId,
+    );
+
+    if (existing) {
+      existing.quantity += item.quantity;
+      continue;
+    }
+
+    run.lootedItems.push({ ...item });
+  }
+  const rewardLogs = [...lootResult.logEntries];
+
+  if (xpAwarded === 0 && lootResult.goldAwarded === 0 && lootResult.itemsAwarded.length === 0) {
+    return rewardLogs;
+  }
+
+  rewardLogs.push(
+    createRewardLog(
+      `${completedCombat.id}.rewards`,
+      at,
+      `Victory rewards: gained ${xpAwarded} XP, ${lootResult.goldAwarded} gold, and ${lootResult.itemsAwarded.reduce((total, item) => total + item.quantity, 0)} loot item${lootResult.itemsAwarded.reduce((total, item) => total + item.quantity, 0) === 1 ? "" : "s"} from ${defeatedCreatureIds.length} defeated creature${defeatedCreatureIds.length === 1 ? "" : "s"}.`,
+      [completedCombat.id, ...defeatedCreatureIds],
+    ),
+  );
+
+  return rewardLogs;
+}
+
 export function createRunState(options: CreateRunOptions): RunState {
  const at = options.at ?? new Date().toISOString();
  const levelState = initializeDungeonLevel({
@@ -204,6 +336,10 @@ export function createRunState(options: CreateRunOptions): RunState {
      globalFlags: [],
    },
    adventurerSnapshot: options.adventurer,
+    defeatedCreatureIds: [],
+    xpGained: 0,
+    goldGained: 0,
+    lootedItems: [],
    log: [],
    pendingEffects: [],
  };
@@ -232,6 +368,106 @@ export function enterCurrentRoom(
  };
 }

+export function getAvailableMoves(run: RunState): AvailableMove[] {
+  const room = requireCurrentRoom(run);
+
+  return room.exits
+    .filter((exit) => exit.traversable)
+    .map((exit) => ({
+      direction: exit.direction,
+      exitType: exit.exitType,
+      discovered: exit.discovered,
+      leadsToRoomId: exit.leadsToRoomId,
+      generated: Boolean(exit.leadsToRoomId),
+    }));
+}
+
+export function isCurrentRoomCombatReady(run: RunState) {
+  const room = requireCurrentRoom(run);
+
+  return Boolean(
+    room.encounter?.resolved &&
+      room.encounter.creatureNames &&
+      room.encounter.creatureNames.length > 0,
+  );
+}
+
+export function travelCurrentExit(
+  options: TravelCurrentExitOptions,
+): RunTransitionResult {
+  const run = cloneRun(options.run);
+
+  if (run.activeCombat) {
+    throw new Error("Cannot travel while combat is active.");
+  }
+
+  const levelState = requireCurrentLevel(run);
+  const roomId = requireCurrentRoomId(run);
+  const room = requireCurrentRoom(run);
+  const exit = room.exits.find((candidate) => candidate.direction === options.exitDirection);
+
+  if (!exit) {
+    throw new Error(`Current room does not have an exit to the ${options.exitDirection}.`);
+  }
+
+  if (!exit.traversable) {
+    throw new Error(`Exit ${exit.id} is not traversable.`);
+  }
+
+  let nextLevelState = levelState;
+  let destinationRoomId = exit.leadsToRoomId;
+  const at = options.at ?? new Date().toISOString();
+
+  if (!destinationRoomId) {
+    const unresolvedExits = getUnresolvedExits(levelState);
+    const matchingExit = unresolvedExits.find(
+      (candidate) =>
+        candidate.roomId === roomId && candidate.direction === options.exitDirection,
+    );
+
+    if (!matchingExit) {
+      throw new Error(`Exit ${exit.id} is no longer available for generation.`);
+    }
+
+    const expansion = expandLevelFromExit({
+      content: options.content,
+      levelState,
+      fromRoomId: roomId,
+      exitDirection: options.exitDirection,
+      roomTableCode: options.roomTableCode ?? inferNextRoomTableCode(run),
+      roller: options.roller,
+    });
+
+    nextLevelState = expansion.levelState;
+    destinationRoomId = expansion.createdRoom.id;
+  }
+
+  run.dungeon.levels[run.currentLevel] = nextLevelState;
+  run.currentRoomId = destinationRoomId;
+
+  const movedLog: LogEntry = {
+    id: `${roomId}.travel.${options.exitDirection}.${run.log.length + 1}`,
+    at,
+    type: "room",
+    text: `Travelled ${options.exitDirection} from ${room.id} to ${destinationRoomId}.`,
+    relatedIds: [room.id, destinationRoomId],
+  };
+
+  appendLogs(run, [movedLog]);
+
+  const entered = enterCurrentRoom({
+    content: options.content,
+    run,
+    roller: options.roller,
+    at,
+  });
+
+  return {
+    run: entered.run,
+    logEntries: [movedLog, ...entered.logEntries],
+  };
+}
+
 export function startCombatInCurrentRoom(
  options: StartCurrentCombatOptions,
 ): RunTransitionResult {
@@ -285,9 +521,17 @@ export function resolveRunPlayerTurn(
  appendLogs(run, result.logEntries);

  if (result.combatEnded) {
+    const completedCombat = result.combat;
    const levelState = requireCurrentLevel(run);
    const roomId = requireCurrentRoomId(run);
    const room = levelState.rooms[roomId];
+    const rewardLogs = applyCombatRewards(
+      options.content,
+      run,
+      completedCombat,
+      options.roller,
+      options.at ?? new Date().toISOString(),
+    );

    if (room?.encounter) {
      room.encounter.rewardPending = false;
@@ -295,6 +539,7 @@ export function resolveRunPlayerTurn(
    }

    run.activeCombat = undefined;
+    appendLogs(run, rewardLogs);
  }

  return {
--- a/src/schemas/state.ts
+++ b/src/schemas/state.ts
@@ -214,6 +214,10 @@ export const runStateSchema = z.object({
  dungeon: dungeonStateSchema,
  adventurerSnapshot: adventurerStateSchema,
  activeCombat: combatStateSchema.optional(),
+  defeatedCreatureIds: z.array(z.string()),
+  xpGained: z.number().int().nonnegative(),
+  goldGained: z.number().int().nonnegative(),
+  lootedItems: z.array(inventoryEntrySchema),
  log: z.array(logEntrySchema),
  pendingEffects: z.array(ruleEffectSchema),
 });
--- a/src/styles.css
+++ b/src/styles.css
@@ -1,9 +1,10 @@
 :root {
-  font-family: "Segoe UI", "Aptos", sans-serif;
-  color: #f3f1e8;
+  font-family: "Trebuchet MS", "Segoe UI", sans-serif;
+  color: #f4efe3;
  background:
-    radial-gradient(circle at top, rgba(179, 121, 59, 0.35), transparent 30%),
-    linear-gradient(180deg, #17130f 0%, #0d0b09 100%);
+    radial-gradient(circle at top, rgba(177, 91, 29, 0.25), transparent 26%),
+    radial-gradient(circle at 20% 20%, rgba(227, 188, 101, 0.12), transparent 18%),
+    linear-gradient(180deg, #160f0b 0%, #0b0807 100%);
  line-height: 1.5;
  font-weight: 400;
  color-scheme: dark;
@@ -23,108 +24,373 @@ body {
  min-height: 100vh;
 }

+button,
+input,
+textarea,
+select {
+  font: inherit;
+}
+
 #root {
  min-height: 100vh;
 }

 .app-shell {
-  width: min(1100px, calc(100% - 2rem));
+  width: min(1200px, calc(100% - 2rem));
  margin: 0 auto;
-  padding: 3rem 0 4rem;
+  padding: 1.5rem 0 3rem;
 }

 .hero {
-  padding: 2rem;
-  border: 1px solid rgba(243, 241, 232, 0.16);
-  background: rgba(21, 18, 14, 0.72);
-  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35);
-  backdrop-filter: blur(12px);
+  display: flex;
+  justify-content: space-between;
+  gap: 1.5rem;
+  align-items: end;
+  padding: 1.75rem;
+  border: 1px solid rgba(255, 231, 196, 0.12);
+  background:
+    linear-gradient(135deg, rgba(62, 34, 17, 0.92), rgba(24, 18, 15, 0.86)),
+    rgba(18, 14, 12, 0.9);
+  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.42);
 }

 .eyebrow {
-  margin: 0 0 0.75rem;
+  margin: 0 0 0.85rem;
  text-transform: uppercase;
-  letter-spacing: 0.14em;
-  color: #d8b27a;
-  font-size: 0.8rem;
+  letter-spacing: 0.18em;
+  color: #f1ba73;
+  font-size: 0.76rem;
 }

 .hero h1 {
  margin: 0;
-  font-size: clamp(2.5rem, 7vw, 4.5rem);
-  line-height: 0.95;
+  font-size: clamp(2.6rem, 6vw, 4.8rem);
+  line-height: 0.92;
 }

 .lede {
-  width: min(55ch, 100%);
-  margin: 1.25rem 0 0;
-  color: rgba(243, 241, 232, 0.82);
-  font-size: 1.05rem;
+  width: min(56ch, 100%);
+  margin: 1rem 0 0;
+  color: rgba(244, 239, 227, 0.78);
 }

-.panel-grid {
+.hero-actions {
+  display: flex;
+  flex-direction: column;
+  gap: 0.85rem;
+  align-items: flex-end;
+}
+
+.status-chip {
+  display: flex;
+  gap: 0.65rem;
+  align-items: center;
+  padding: 0.75rem 1rem;
+  border: 1px solid rgba(255, 231, 196, 0.12);
+  background: rgba(255, 231, 196, 0.05);
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  font-size: 0.78rem;
+}
+
+.status-chip strong {
+  color: #f7d59d;
+  font-size: 0.95rem;
+}
+
+.alert-banner {
+  display: flex;
+  justify-content: space-between;
+  gap: 1rem;
+  align-items: center;
+  margin-top: 1rem;
+  padding: 1rem 1.2rem;
+  border: 1px solid rgba(255, 176, 94, 0.3);
+  background:
+    linear-gradient(90deg, rgba(117, 43, 21, 0.92), rgba(48, 22, 18, 0.92)),
+    rgba(48, 22, 18, 0.92);
+}
+
+.alert-kicker {
+  display: block;
+  color: #ffbf78;
+  text-transform: uppercase;
+  letter-spacing: 0.12em;
+  font-size: 0.74rem;
+}
+
+.alert-banner strong {
+  display: block;
+  margin-top: 0.25rem;
+  font-size: 1.15rem;
+  color: #fff4de;
+}
+
+.alert-banner p {
+  margin: 0.35rem 0 0;
+  color: rgba(244, 239, 227, 0.82);
+}
+
+.dashboard-grid {
  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
+  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1rem;
 }

 .panel {
-  padding: 1.25rem;
-  border: 1px solid rgba(243, 241, 232, 0.14);
-  background: rgba(29, 24, 19, 0.82);
+  grid-column: span 4;
+  padding: 1.2rem;
+  border: 1px solid rgba(255, 231, 196, 0.1);
+  background: rgba(25, 19, 16, 0.86);
+  box-shadow: inset 0 1px 0 rgba(255, 231, 196, 0.03);
 }

-.panel h2 {
-  margin-top: 0;
+.panel-highlight {
+  background:
+    linear-gradient(180deg, rgba(101, 52, 28, 0.28), rgba(25, 19, 16, 0.92)),
+    rgba(25, 19, 16, 0.9);
+}
+
+.panel-log {
+  grid-column: span 12;
+}
+
+.panel-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+  gap: 1rem;
  margin-bottom: 0.75rem;
+}
+
+.panel-header h2 {
+  margin: 0;
  font-size: 1rem;
-  color: #f6d49e;
+  color: #f8d79f;
 }

-.panel ul,
-.panel ol {
-  margin: 0;
-  padding-left: 1.1rem;
-}
-
-.panel li + li {
-  margin-top: 0.45rem;
-}
-
-.stats {
-  display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 0.75rem;
-  margin: 0;
-}
-
-.stats div {
-  padding: 0.9rem;
-  background: rgba(243, 241, 232, 0.05);
-}
-
-.stats dt {
-  color: rgba(243, 241, 232, 0.62);
-  font-size: 0.8rem;
+.panel-header span {
+  color: rgba(244, 239, 227, 0.58);
+  font-size: 0.83rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
 }

-.stats dd {
-  margin: 0.3rem 0 0;
-  font-size: 1.7rem;
-  font-weight: 700;
+.stat-strip {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 0.75rem;
 }

-@media (max-width: 640px) {
+.stat-strip div,
+.encounter-box,
+.combat-status {
+  padding: 0.9rem;
+  background: rgba(255, 245, 223, 0.04);
+  border: 1px solid rgba(255, 231, 196, 0.08);
+}
+
+.stat-strip span,
+.encounter-label,
+.combat-status span,
+.room-meta span,
+.log-entry span {
+  display: block;
+  color: rgba(244, 239, 227, 0.56);
+  font-size: 0.76rem;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+}
+
+.stat-strip strong,
+.encounter-box strong,
+.combat-status strong {
+  display: block;
+  margin-top: 0.3rem;
+  font-size: 1.45rem;
+  color: #fff2d6;
+}
+
+.supporting-text {
+  margin: 0.9rem 0 0;
+  color: rgba(244, 239, 227, 0.76);
+}
+
+.room-title {
+  margin: 0 0 0.35rem;
+  font-size: 1.5rem;
+  color: #fff2d6;
+}
+
+.room-meta {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.9rem;
+  margin-top: 0.95rem;
+}
+
+.button-row,
+.enemy-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.65rem;
+  margin-top: 1rem;
+}
+
+.button {
+  border: 1px solid rgba(255, 217, 163, 0.24);
+  background: rgba(255, 245, 223, 0.04);
+  color: #f4efe3;
+  padding: 0.72rem 1rem;
+  cursor: pointer;
+  transition:
+    transform 140ms ease,
+    background 140ms ease,
+    border-color 140ms ease;
+}
+
+.button:hover:enabled {
+  transform: translateY(-1px);
+  background: rgba(255, 217, 163, 0.09);
+  border-color: rgba(255, 217, 163, 0.35);
+}
+
+.button:disabled {
+  opacity: 0.42;
+  cursor: not-allowed;
+}
+
+.button-primary {
+  background: linear-gradient(180deg, #c36b2d, #8d4617);
+  border-color: rgba(255, 217, 163, 0.32);
+  color: #fff4e1;
+}
+
+.button-primary:hover:enabled {
+  background: linear-gradient(180deg, #d97833, #9f501b);
+}
+
+.encounter-box,
+.combat-status {
+  margin-top: 1rem;
+}
+
+.move-list,
+.mini-map,
+.enemy-list {
+  display: grid;
+  gap: 0.75rem;
+}
+
+.mini-map,
+.enemy-list {
+  margin-top: 1rem;
+}
+
+.move-card,
+.map-node,
+.enemy-card {
+  width: 100%;
+  text-align: left;
+  padding: 0.95rem;
+  border: 1px solid rgba(255, 231, 196, 0.08);
+  background: rgba(255, 245, 223, 0.04);
+}
+
+.move-card {
+  cursor: pointer;
+  transition:
+    transform 140ms ease,
+    background 140ms ease,
+    border-color 140ms ease;
+}
+
+.move-card:hover:enabled {
+  transform: translateY(-1px);
+  background: rgba(255, 217, 163, 0.09);
+  border-color: rgba(255, 217, 163, 0.35);
+}
+
+.move-card:disabled {
+  opacity: 0.42;
+  cursor: not-allowed;
+}
+
+.move-card span,
+.map-node span {
+  display: block;
+  color: rgba(244, 239, 227, 0.56);
+  font-size: 0.74rem;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+}
+
+.move-card strong,
+.map-node strong,
+.enemy-card strong {
+  display: block;
+  margin-top: 0.3rem;
+  font-size: 1rem;
+  color: #fff2d6;
+}
+
+.move-card em,
+.enemy-card span {
+  display: block;
+  margin-top: 0.3rem;
+  font-style: normal;
+  color: rgba(244, 239, 227, 0.7);
+}
+
+.map-node-active {
+  border-color: rgba(243, 186, 115, 0.55);
+  background: rgba(243, 186, 115, 0.12);
+}
+
+.log-list {
+  display: grid;
+  gap: 0.75rem;
+  max-height: 340px;
+  overflow: auto;
+  padding-right: 0.2rem;
+}
+
+.log-entry {
+  padding: 0.9rem;
+  border-left: 3px solid rgba(243, 186, 115, 0.7);
+  background: rgba(255, 245, 223, 0.04);
+}
+
+.log-entry p {
+  margin: 0.35rem 0 0;
+  color: #f4efe3;
+}
+
+@media (max-width: 980px) {
+  .panel,
+  .panel-log {
+    grid-column: span 12;
+  }
+}
+
+@media (max-width: 720px) {
  .app-shell {
-    width: min(100% - 1rem, 1100px);
-    padding-top: 1rem;
+    width: min(100% - 1rem, 1200px);
+    padding-top: 0.75rem;
  }

  .hero,
-  .panel {
-    padding: 1rem;
+  .alert-banner {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .hero-actions {
+    align-items: stretch;
+  }
+
+  .stat-strip {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
 }
--- a/src/types/state.ts
+++ b/src/types/state.ts
@@ -215,6 +215,10 @@ export type RunState = {
  dungeon: DungeonState;
  adventurerSnapshot: AdventurerState;
  activeCombat?: CombatState;
+  defeatedCreatureIds: string[];
+  xpGained: number;
+  goldGained: number;
+  lootedItems: InventoryEntry[];
  log: LogEntry[];
  pendingEffects: RuleEffect[];
 };
Author	SHA1	Message	Date
Keith Solomon	cbb3efafd7	Merge branch 'main' into feature/loot-resolution	2026-03-16 00:05:05 +00:00
Keith Solomon	626d5ca05c	Merge branch 'feature/post-combat-rewards'	2026-03-15 19:03:37 -05:00
Keith Solomon	68654a8cc0	Merge pull request '✨Feature: implement game shell UI with room navigation and combat mechanics' (#9 ) from feature/game-shell-ui into main Reviewed-on: #9	2026-03-15 23:57:34 +00:00
Keith Solomon	40ce9644ab	Merge branch 'main' into feature/game-shell-ui	2026-03-15 23:57:24 +00:00
Keith Solomon	6c2257b032	✨Feature: implement loot resolution system with gold and item tracking from defeated creatures	2026-03-15 14:24:39 -05:00
Keith Solomon	cf98636a52	✨Feature: implement post-combat rewards system with XP tracking and creature defeat logging	2026-03-15 14:16:37 -05:00
Keith Solomon	473ea83cdf	Merge pull request '✨Feature: Implement staged backend features' (#8 ) from staging/features into main Reviewed-on: #8	2026-03-15 19:06:33 +00:00
Keith Solomon	fb6cbfe9fb	✨Feature: implement game shell UI with room navigation and combat mechanics	2026-03-15 14:02:19 -05:00