Android build v1.0.29

AGENTS.md

@@ -2,5 +2,7 @@
 
 - AYN Thor main display: 6-inch AMOLED, 1920 x 1080, 120Hz.
 - AYN Thor secondary display: 3.92-inch AMOLED, 1240 x 1080, 60Hz.
+- AYN Thor UI sizing must be designed against Android CSS/layout viewport, not physical framebuffer pixels.
+- Approximate Thor CSS viewports: main display 960 x 540, secondary display 620 x 540.
 - User rebuilds app; do not rebuild APK unless explicitly requested.
 - Apply game changes to both web version and mobile app version.

DEPLOYMENT.md

@@ -43,6 +43,227 @@ Keep the game server bound to `127.0.0.1`. Set `TRUST_PROXY=1` only when the
 server can be reached solely through your local reverse proxy. This lets account
 limits use the visitor's public IP instead of the proxy's address.
 
+## TrueNAS single-container hosting
+
+### TrueNAS SCALE runbook
+
+This is the simplest TrueNAS setup. One container serves the browser game,
+auth routes, game API routes, and one SQLite database. Use this when you want
+`iwanttoheal.phenomrom.com` to host the playable browser version and you want
+code updates to be a Git pull plus app restart.
+
+Portainer is not required. Use TrueNAS **Apps > Discover > Install via YAML**.
+
+Repository:
+
+```text
+https://git.whoagland.com/phenom/i-want-to-heal.git
+```
+
+TrueNAS paths:
+
+```text
+/mnt/usbssds/apps/iwanttoheal/app
+/mnt/usbssds/apps/iwanttoheal/data
+```
+
+Create the app directory and clone the repo:
+
+```sh
+sudo mkdir -p /mnt/usbssds/apps/iwanttoheal
+cd /mnt/usbssds/apps/iwanttoheal
+sudo git clone https://git.whoagland.com/phenom/i-want-to-heal.git app
+```
+
+Because the clone was run with `sudo`, give the normal TrueNAS user ownership:
+
+```sh
+sudo chown -R truenas_admin:truenas_admin /mnt/usbssds/apps/iwanttoheal
+```
+
+Create the persistent data folder:
+
+```sh
+mkdir -p /mnt/usbssds/apps/iwanttoheal/data
+```
+
+Check that the production server file exists:
+
+```sh
+ls /mnt/usbssds/apps/iwanttoheal/app/server/production.mjs
+```
+
+If that file is missing, push the latest code to `git.whoagland.com` from the
+development machine, then pull on TrueNAS:
+
+```sh
+cd /mnt/usbssds/apps/iwanttoheal/app
+git pull
+```
+
+If Git fails with `chmod ... Operation not permitted`, do not use a media or SMB
+dataset for the repo. Git needs normal file locking and chmod behavior. Create or
+use a dedicated apps dataset and clone under `/mnt/usbssds/apps/...`.
+
+### TrueNAS app YAML
+
+In TrueNAS:
+
+1. Open **Apps**.
+2. Open **Discover**.
+3. Click the three-dot menu.
+4. Choose **Install via YAML**.
+5. Name the app `iwanttoheal`.
+6. Paste this YAML:
+
+```yaml
+services:
+  iwanttoheal:
+    image: node:24-bookworm-slim
+    working_dir: /app
+    command: sh -lc "npm ci && npm run db:init && npm run build && npm start"
+    environment:
+      HOST: 0.0.0.0
+      PORT: "4173"
+      TRUST_PROXY: "1"
+      COOKIE_SECURE: "1"
+      CORS_ORIGINS: "http://localhost,https://localhost,capacitor://localhost,https://iwanttoheal.phenomrom.com,https://auth.phenomrom.com"
+    ports:
+      - "4173:4173"
+    volumes:
+      - /mnt/usbssds/apps/iwanttoheal/app:/app
+      - /mnt/usbssds/apps/iwanttoheal/data:/app/data
+    restart: unless-stopped
+```
+
+The app listens inside Docker on port `4173`. The database lives at
+`/mnt/usbssds/apps/iwanttoheal/data/game.db` because that host directory is
+mounted into the container as `/app/data`. This is persistent runtime data, not
+code. Do not commit it and do not copy the Mac `data/game.db` over it during
+deploys.
+
+The startup command installs dependencies, applies schema/static-content
+updates, builds the web app, and starts the production server.
+
+Test the local TrueNAS service:
+
+```sh
+curl http://TRUENAS-IP:4173/api/auth/session
+```
+
+Expected response:
+
+```json
+{"account":null,"profile":null}
+```
+
+### Reverse proxy
+
+Point `iwanttoheal.phenomrom.com` at the TrueNAS app through HTTPS. Do not expose
+port `4173` directly to the internet. Put Caddy or another reverse proxy in
+front:
+
+```caddyfile
+iwanttoheal.phenomrom.com {
+  reverse_proxy TRUENAS-IP:4173
+}
+
+auth.phenomrom.com {
+  reverse_proxy TRUENAS-IP:4173
+}
+```
+
+Both hostnames can point at the same container. `iwanttoheal.phenomrom.com`
+serves the browser game. `auth.phenomrom.com` stays available as an auth URL for
+Android or other clients that need a dedicated auth hostname.
+
+DNS should point both hostnames at the public IP or dynamic DNS name that reaches
+the reverse proxy. Forward public ports `80` and `443` to the reverse proxy host.
+
+Test the public game and auth URLs:
+
+```sh
+curl https://iwanttoheal.phenomrom.com
+curl https://auth.phenomrom.com/api/auth/session
+```
+
+Expected auth response:
+
+```json
+{"account":null,"profile":null}
+```
+
+### App build config
+
+For the hosted browser game, no separate auth build setting is needed. The web
+app can call same-origin routes like `/api/auth/login` and `/api/profile`.
+
+For an Android build that should use the TrueNAS-hosted game API, build with:
+
+```sh
+npm run android:apk:truenas
+```
+
+If you intentionally want Android auth calls to use `auth.phenomrom.com`, also
+set `VITE_AUTH_API_BASE_URL=https://auth.phenomrom.com`. Otherwise, leave it
+unset and auth uses the same base URL as the game API.
+
+Android runs the bundled web app from a local Capacitor origin, not from
+`iwanttoheal.phenomrom.com`. The hosted server must allow that origin through
+CORS, which is why the TrueNAS YAML includes `http://localhost`,
+`https://localhost`, and `capacitor://localhost`.
+
+### Updating the TrueNAS game app
+
+Push changes from the development machine to `git.whoagland.com`, then pull them
+on TrueNAS:
+
+```sh
+cd /mnt/usbssds/apps/iwanttoheal/app
+git pull
+```
+
+Before restarting, back up the persistent database:
+
+```sh
+cp /mnt/usbssds/apps/iwanttoheal/data/game.db \
+  "/mnt/usbssds/apps/iwanttoheal/data/game-before-update-$(date +%Y%m%d-%H%M%S).db"
+```
+
+Restart the `iwanttoheal` app in the TrueNAS Apps UI after pulling. The app
+command runs `npm ci`, `npm run db:init`, `npm run build`, and `npm start` on
+startup, so dependency, schema, and browser bundle changes are applied each time
+the container restarts.
+
+`npm run db:init` updates schema and seeded static game content. It should not
+erase accounts, characters, inventory, or save progress. Character resets are
+separate manual operations and should only be run intentionally.
+
+Normal update workflow:
+
+```sh
+# development machine
+git add .
+git commit -m "Update game"
+git push origin main
+
+# TrueNAS shell
+cd /mnt/usbssds/apps/iwanttoheal/app
+git pull
+cp /mnt/usbssds/apps/iwanttoheal/data/game.db \
+  "/mnt/usbssds/apps/iwanttoheal/data/game-before-update-$(date +%Y%m%d-%H%M%S).db"
+```
+
+Then restart the TrueNAS app.
+
+For the shorter checklist, see [docs/push-updates.md](docs/push-updates.md).
+
+### Existing auth-only app
+
+If `iwanttoheal-auth` was already created during earlier testing, the simplest
+path is to stop that app and use the single `iwanttoheal` app above. The single
+container serves both domains and avoids two processes sharing one SQLite file.
+
 ## Account limits
 
 Registration permits one account per public IP by default. Login and API rate

README.md

@@ -57,13 +57,13 @@ For an online production build, see [DEPLOYMENT.md](DEPLOYMENT.md).
 - Dungeon XP rewards, level-up handling, talent-point awards, and ability unlocks
 - SQLite-backed class talent trees with ranks, tiers, prerequisites, refunds,
   and immediate persistence
-- Seven equipment slots, starter item-level 1 gear, inventory comparison, and
+- Nine equipment slots, empty starter inventory, craftable item-level 1 gear,
-  persistent equipping
+  inventory comparison, and persistent equipping
 - Aggregate item level, healing power, and resource bonuses that affect combat
-- Five SQLite-authored dungeon difficulty tiers with level gates, combat
+- Four playable SQLite-authored content tiers at item levels 1, 10, 20, and 25
-  scaling, XP multipliers, and item-level reward bands
+  with level gates, combat scaling, XP multipliers, and reward bands
-- Encounter-specific weighted loot tables for every difficulty, with authored
+- Gear progression through item levels 1, 5, 10, 15, 20, and 25 with
-  drop chances, slot pools, and item-level 5 through 25 reward variants
+  boss-coin crafting and upgrade steps
 - One live loot roll per defeated encounter, shown in the combat log and
   dungeon-complete summary
 - Atomic inventory awards with retry-safe roll records and stacked duplicate

android/app/build.gradle

@@ -7,8 +7,8 @@ android {
         applicationId "com.warren.iwanttoheal"
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
-        versionCode 32
+        versionCode 47
-        versionName "1.0.21"
+        versionName "1.0.29"
         testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
         aaptOptions {
              // Files and dirs to omit from the packaged assets dir, modified to accommodate modern web apps.

android/app/src/main/java/com/warren/iwanttoheal/ControllerBridgeActivity.java

@@ -11,7 +11,7 @@ import java.io.File;
 public abstract class ControllerBridgeActivity extends BridgeActivity {
 
     public static final String EXTRA_INITIAL_URL = "com.warren.iwanttoheal.INITIAL_URL";
-    private static final long DPAD_THROTTLE_MS = 125;
+    private static final long DPAD_THROTTLE_MS = 220;
     private long lastDpadDispatchAt = 0;
 
     @Override

db/seed.sql

@@ -25,28 +25,35 @@ WHERE slug = 'citadel-of-the-ember-crown';
 INSERT OR IGNORE INTO difficulties
   (id, slug, name, dropped_item_level, unlock_level, health_multiplier, damage_multiplier, experience_multiplier, description)
 VALUES
-  (1, 'initiate', 'Initiate', 5, 1, 1.0, 1.0, 1.0, 'Entry-level dungeon difficulty.'),
+  (1, 'initiate', 'Initiate', 1, 1, 0.8, 0.8, 1.0, 'Entry-level dungeon difficulty for crafting the first real set.'),
-  (2, 'veteran', 'Veteran', 10, 5, 1.35, 1.2, 1.5, 'Enemies deal more damage and drop stronger gear.'),
+  (2, 'veteran', 'Veteran', 10, 10, 1.45, 1.25, 2.0, 'A major step up that rewards refined gear components.'),
-  (3, 'champion', 'Champion', 15, 10, 1.7, 1.45, 2.2, 'Demanding encounters for developed characters.'),
+  (3, 'champion', 'Champion', 15, 15, 1.7, 1.45, 2.2, 'Gear-only upgrade tier between Veteran and Mythic.'),
-  (4, 'mythic', 'Mythic', 20, 15, 2.1, 1.75, 3.0, 'Endgame dungeon difficulty.'),
+  (4, 'mythic', 'Mythic', 20, 20, 2.25, 1.85, 3.5, 'Endgame dungeon difficulty.'),
-  (5, 'ascendant', 'Ascendant', 25, 20, 2.6, 2.1, 4.0, 'The current pinnacle difficulty.'),
+  (5, 'ascendant', 'Ascendant', 25, 25, 2.8, 2.25, 4.5, 'The current pinnacle difficulty.'),
   (101, 'raid-normal', 'Normal', 7, 1, 1.0, 1.0, 1.25, 'The opening raid difficulty, tuned for an eighteen-player party.');
 
 UPDATE difficulties SET
   dropped_item_level = CASE slug
-    WHEN 'raid-normal' THEN 10 ELSE dropped_item_level END,
+    WHEN 'initiate' THEN 1 WHEN 'raid-normal' THEN 10 ELSE dropped_item_level END,
   unlock_level = CASE slug
-    WHEN 'initiate' THEN 1 WHEN 'veteran' THEN 5 WHEN 'champion' THEN 10
+    WHEN 'initiate' THEN 1 WHEN 'veteran' THEN 10 WHEN 'champion' THEN 15
-    WHEN 'mythic' THEN 15 WHEN 'ascendant' THEN 20 ELSE unlock_level END,
+    WHEN 'mythic' THEN 20 WHEN 'ascendant' THEN 25 ELSE unlock_level END,
   health_multiplier = CASE slug
-    WHEN 'initiate' THEN 1.0 WHEN 'veteran' THEN 1.35 WHEN 'champion' THEN 1.7
+    WHEN 'initiate' THEN 0.8 WHEN 'veteran' THEN 1.45 WHEN 'champion' THEN 1.7
-    WHEN 'mythic' THEN 2.1 WHEN 'ascendant' THEN 2.6 ELSE health_multiplier END,
+    WHEN 'mythic' THEN 2.25 WHEN 'ascendant' THEN 2.8 ELSE health_multiplier END,
   damage_multiplier = CASE slug
-    WHEN 'initiate' THEN 1.0 WHEN 'veteran' THEN 1.2 WHEN 'champion' THEN 1.45
+    WHEN 'initiate' THEN 0.8 WHEN 'veteran' THEN 1.25 WHEN 'champion' THEN 1.45
-    WHEN 'mythic' THEN 1.75 WHEN 'ascendant' THEN 2.1 ELSE damage_multiplier END,
+    WHEN 'mythic' THEN 1.85 WHEN 'ascendant' THEN 2.25 ELSE damage_multiplier END,
   experience_multiplier = CASE slug
-    WHEN 'initiate' THEN 1.0 WHEN 'veteran' THEN 1.5 WHEN 'champion' THEN 2.2
+    WHEN 'initiate' THEN 1.0 WHEN 'veteran' THEN 2.0 WHEN 'champion' THEN 2.2
-    WHEN 'mythic' THEN 3.0 WHEN 'ascendant' THEN 4.0 ELSE experience_multiplier END;
+    WHEN 'mythic' THEN 3.5 WHEN 'ascendant' THEN 4.5 ELSE experience_multiplier END,
+  description = CASE slug
+    WHEN 'initiate' THEN 'Entry-level dungeon difficulty for crafting the first real set.'
+    WHEN 'veteran' THEN 'A major step up that rewards refined gear components.'
+    WHEN 'champion' THEN 'Gear-only upgrade tier between Veteran and Mythic.'
+    WHEN 'mythic' THEN 'Endgame dungeon difficulty.'
+    WHEN 'ascendant' THEN 'The current pinnacle difficulty.'
+    ELSE description END;
 
 INSERT OR IGNORE INTO dungeon_difficulties (dungeon_id, difficulty_id) VALUES
   (1, 1),
@@ -345,6 +352,9 @@ DELETE FROM crafting_recipes;
 INSERT INTO crafting_recipes
   (id, item_id, difficulty_id, source_dungeon_id, source_encounter_id)
 VALUES
+  (901, 101, 1, 1, 3), (902, 102, 1, 1, 3), (903, 103, 1, 1, 3),
+  (904, 104, 1, 1, 12), (905, 105, 1, 1, 12), (906, 106, 1, 1, 12),
+  (907, 100, 1, 1, 22), (908, 108, 1, 1, 22), (909, 109, 1, 1, 22),
   (1001, 5, 1, 1, 3), (1002, 2, 1, 1, 3), (1003, 6, 1, 1, 3),
   (1004, 4, 1, 1, 12), (1005, 1, 1, 1, 12), (1006, 7, 1, 1, 12),
   (1007, 3, 1, 1, 22), (1008, 8, 1, 1, 22), (1009, 9, 1, 1, 22),
@@ -429,6 +439,173 @@ INSERT OR IGNORE INTO character_inventory (character_id, item_id, quantity, equi
   (3, 100, 1, 1), (3, 101, 1, 1), (3, 102, 1, 1), (3, 103, 1, 1),
   (3, 104, 1, 1), (3, 108, 1, 1), (3, 105, 1, 1), (3, 109, 1, 1), (3, 106, 1, 1), (3, 107, 1, 0);
 
+DELETE FROM character_inventory
+WHERE character_id IN (1, 2, 3)
+  AND item_id BETWEEN 100 AND 109;
+
+-- Coin gearing override: every boss/difficulty drops one boss coin, and each
+-- craft costs the target item level in that source boss coin.
+UPDATE crafting_recipes
+SET source_dungeon_id = 1,
+    source_encounter_id = 3
+WHERE id BETWEEN 1001 AND 1409
+  AND item_id IN (SELECT id FROM items WHERE slot IN ('helmet', 'chest', 'gloves'));
+
+UPDATE crafting_recipes
+SET source_dungeon_id = 1,
+    source_encounter_id = 12
+WHERE id BETWEEN 1001 AND 1409
+  AND item_id IN (SELECT id FROM items WHERE slot IN ('boots', 'ring', 'trinket'));
+
+UPDATE crafting_recipes
+SET source_dungeon_id = 1,
+    source_encounter_id = 22
+WHERE id BETWEEN 1001 AND 1409
+  AND item_id IN (SELECT id FROM items WHERE slot IN ('weapon', 'pants', 'necklace'));
+
+UPDATE crafting_recipes
+SET difficulty_id = CASE
+  (SELECT item_level FROM items WHERE items.id = crafting_recipes.item_id)
+    WHEN 1 THEN 1
+    WHEN 5 THEN 1
+    WHEN 10 THEN 2
+    WHEN 15 THEN 2
+    WHEN 20 THEN 4
+    WHEN 25 THEN 5
+    ELSE difficulty_id
+  END
+WHERE id BETWEEN 901 AND 1409;
+
+UPDATE items
+SET rarity = CASE item_level
+    WHEN 1 THEN 'common'
+    WHEN 10 THEN 'uncommon'
+    WHEN 20 THEN 'epic'
+    WHEN 25 THEN 'legendary'
+    ELSE rarity
+  END
+WHERE id IN (SELECT item_id FROM crafting_recipes);
+
+UPDATE items
+SET name = (
+    SELECT
+      CASE items.item_level
+        WHEN 1 THEN 'Raw '
+        WHEN 10 THEN 'Green '
+        WHEN 20 THEN 'Purple '
+        WHEN 25 THEN 'Orange '
+        ELSE ''
+      END
+      || encounters.name || ' '
+      || CASE items.slot
+        WHEN 'weapon' THEN 'Weapon'
+        WHEN 'helmet' THEN 'Helmet'
+        WHEN 'chest' THEN 'Chest'
+        WHEN 'gloves' THEN 'Gloves'
+        WHEN 'boots' THEN 'Boots'
+        WHEN 'pants' THEN 'Pants'
+        WHEN 'ring' THEN 'Ring'
+        WHEN 'necklace' THEN 'Necklace'
+        WHEN 'trinket' THEN 'Trinket'
+        ELSE items.name
+      END
+    FROM crafting_recipes
+    JOIN encounters ON encounters.id = crafting_recipes.source_encounter_id
+    WHERE crafting_recipes.item_id = items.id
+    LIMIT 1
+  ),
+  description = (
+    SELECT 'Crafted with ' || encounters.name || ' coins.'
+    FROM crafting_recipes
+    JOIN encounters ON encounters.id = crafting_recipes.source_encounter_id
+    WHERE crafting_recipes.item_id = items.id
+    LIMIT 1
+  )
+WHERE id IN (SELECT item_id FROM crafting_recipes);
+
+CREATE TEMP TABLE IF NOT EXISTS coin_sources (
+  item_id INTEGER PRIMARY KEY,
+  encounter_id INTEGER NOT NULL,
+  difficulty_id INTEGER NOT NULL,
+  item_level INTEGER NOT NULL,
+  slug TEXT NOT NULL,
+  name TEXT NOT NULL,
+  rarity TEXT NOT NULL,
+  glyph TEXT NOT NULL,
+  description TEXT NOT NULL
+);
+
+DELETE FROM coin_sources;
+
+INSERT INTO coin_sources
+SELECT
+  280000 + encounters.id * 100 + difficulties.dropped_item_level,
+  encounters.id,
+  difficulties.id,
+  difficulties.dropped_item_level,
+  encounters.slug || '-coin-ilvl-' || difficulties.dropped_item_level,
+  CASE difficulties.dropped_item_level
+    WHEN 1 THEN 'Raw '
+    WHEN 5 THEN 'Honed '
+    WHEN 10 THEN 'Green '
+    WHEN 15 THEN 'Blue '
+    WHEN 20 THEN 'Purple '
+    WHEN 25 THEN 'Orange '
+    ELSE ''
+  END || encounters.name || ' Coin',
+  CASE difficulties.dropped_item_level
+    WHEN 1 THEN 'common'
+    WHEN 5 THEN 'common'
+    WHEN 10 THEN 'uncommon'
+    WHEN 15 THEN 'rare'
+    WHEN 20 THEN 'epic'
+    WHEN 25 THEN 'legendary'
+    ELSE 'common'
+  END,
+  '$',
+  'A boss coin from ' || encounters.name || ' used for item level '
+    || difficulties.dropped_item_level || ' crafting.'
+FROM encounters
+JOIN dungeon_difficulties ON dungeon_difficulties.dungeon_id = encounters.dungeon_id
+JOIN difficulties ON difficulties.id = dungeon_difficulties.difficulty_id
+WHERE encounters.encounter_type = 'boss';
+
+INSERT OR IGNORE INTO items
+  (id, slug, name, slot, rarity, item_level, healing_power, max_resource_bonus, glyph, description)
+SELECT item_id, slug, name, 'component', rarity, item_level, 0, 0, glyph, description
+FROM coin_sources;
+
+UPDATE items
+SET slug = (SELECT slug FROM coin_sources WHERE coin_sources.item_id = items.id),
+    name = (SELECT name FROM coin_sources WHERE coin_sources.item_id = items.id),
+    slot = 'component',
+    rarity = (SELECT rarity FROM coin_sources WHERE coin_sources.item_id = items.id),
+    item_level = (SELECT item_level FROM coin_sources WHERE coin_sources.item_id = items.id),
+    healing_power = 0,
+    max_resource_bonus = 0,
+    glyph = (SELECT glyph FROM coin_sources WHERE coin_sources.item_id = items.id),
+    description = (SELECT description FROM coin_sources WHERE coin_sources.item_id = items.id)
+WHERE id IN (SELECT item_id FROM coin_sources);
+
+DELETE FROM encounter_loot;
+
+INSERT INTO encounter_loot (encounter_id, item_id, difficulty_id, drop_weight, drop_chance)
+SELECT encounter_id, item_id, difficulty_id, 100, 1.0
+FROM coin_sources;
+
+DELETE FROM crafting_recipe_components;
+
+INSERT INTO crafting_recipe_components (recipe_id, item_id, quantity)
+SELECT
+  crafting_recipes.id,
+  coin_sources.item_id,
+  items.item_level
+FROM crafting_recipes
+JOIN items ON items.id = crafting_recipes.item_id
+JOIN coin_sources
+  ON coin_sources.encounter_id = crafting_recipes.source_encounter_id
+  AND coin_sources.difficulty_id = crafting_recipes.difficulty_id;
+
 INSERT OR IGNORE INTO talents
   (id, class_id, slug, name, max_rank, tier, branch, prerequisite_talent_id, prerequisite_rank, effect_type, effect_value_per_rank, glyph, description)
 VALUES
@@ -547,7 +724,6 @@ INSERT INTO generated_loot_tiers
   (item_level, dungeon_id, raid_id, dungeon_difficulty_id, raid_difficulty_id, recipe_base, craft_quantity)
 VALUES
   (10, 3, 2, 2, 101, 1100, 2),
-  (15, 4, 5, 3, 103, 1200, 3),
   (20, 6, 7, 4, 104, 1300, 4),
   (25, 8, 9, 5, 105, 1400, 5);
 
@@ -630,19 +806,58 @@ VALUES
 
 UPDATE difficulties
 SET dropped_item_level = 10,
-    unlock_level = 5,
+    unlock_level = 10,
-    health_multiplier = 1.35,
+    health_multiplier = 1.45,
-    damage_multiplier = 1.2,
+    damage_multiplier = 1.25,
-    experience_multiplier = 1.75,
+    experience_multiplier = 2.0,
     description = 'Veteran raid difficulty with extra monster-part drops.'
 WHERE id = 101;
 
 INSERT OR IGNORE INTO difficulties
   (id, slug, name, dropped_item_level, unlock_level, health_multiplier, damage_multiplier, experience_multiplier, description)
 VALUES
-  (103, 'raid-champion', 'Champion Raid', 15, 10, 1.7, 1.45, 2.4, 'Champion raid difficulty with extra monster-part drops.'),
+  (103, 'raid-champion', 'Champion Raid', 15, 15, 1.7, 1.45, 2.4, 'Gear-only raid upgrade tier between Veteran and Mythic.'),
-  (104, 'raid-mythic', 'Mythic Raid', 20, 15, 2.1, 1.75, 3.2, 'Mythic raid difficulty with extra monster-part drops.'),
+  (104, 'raid-mythic', 'Mythic Raid', 20, 20, 2.25, 1.85, 3.5, 'Mythic raid difficulty with extra monster-part drops.'),
-  (105, 'raid-ascendant', 'Ascendant Raid', 25, 20, 2.6, 2.1, 4.2, 'Ascendant raid difficulty with extra monster-part drops.');
+  (105, 'raid-ascendant', 'Ascendant Raid', 25, 25, 2.8, 2.25, 4.5, 'Ascendant raid difficulty with extra monster-part drops.');
+
+UPDATE difficulties
+SET dropped_item_level = CASE id
+    WHEN 103 THEN 15
+    WHEN 104 THEN 20
+    WHEN 105 THEN 25
+    ELSE dropped_item_level
+  END,
+  unlock_level = CASE id
+    WHEN 103 THEN 15
+    WHEN 104 THEN 20
+    WHEN 105 THEN 25
+    ELSE unlock_level
+  END,
+  health_multiplier = CASE id
+    WHEN 103 THEN 1.7
+    WHEN 104 THEN 2.25
+    WHEN 105 THEN 2.8
+    ELSE health_multiplier
+  END,
+  damage_multiplier = CASE id
+    WHEN 103 THEN 1.45
+    WHEN 104 THEN 1.85
+    WHEN 105 THEN 2.25
+    ELSE damage_multiplier
+  END,
+  experience_multiplier = CASE id
+    WHEN 103 THEN 2.4
+    WHEN 104 THEN 3.5
+    WHEN 105 THEN 4.5
+    ELSE experience_multiplier
+  END,
+  description = CASE id
+    WHEN 103 THEN 'Gear-only raid upgrade tier between Veteran and Mythic.'
+    WHEN 104 THEN 'Mythic raid difficulty with extra monster-part drops.'
+    WHEN 105 THEN 'Ascendant raid difficulty with extra monster-part drops.'
+    ELSE description
+  END
+WHERE id IN (103, 104, 105);
 
 DELETE FROM dungeon_difficulties WHERE dungeon_id = 2 AND difficulty_id <> 101;
 
@@ -678,9 +893,9 @@ SET slug = CASE id
     END,
     encounter_type = CASE WHEN id IN (102, 105, 108) THEN 'boss' ELSE 'trash' END,
     description = CASE id
-      WHEN 102 THEN 'Tigrex drops monster parts for item level 10 crafting.'
+      WHEN 102 THEN 'Tigrex drops boss coins for item level 10 crafting.'
-      WHEN 105 THEN 'Rathalos drops monster parts for item level 10 crafting.'
+      WHEN 105 THEN 'Rathalos drops boss coins for item level 10 crafting.'
-      WHEN 108 THEN 'Gypceros drops monster parts for item level 10 crafting.'
+      WHEN 108 THEN 'Gypceros drops boss coins for item level 10 crafting.'
       ELSE 'Hunters clear the raid path.'
     END
 WHERE id BETWEEN 100 AND 108;
@@ -702,7 +917,7 @@ SELECT
   offset.tank_damage + generated_bosses.boss_index * 2 + generated_loot_tiers.item_level / 8,
   offset.party_damage + generated_bosses.boss_index * 3,
   CASE offset.encounter_type
-    WHEN 'boss' THEN generated_bosses.boss_name || ' drops monster parts for item level ' || generated_loot_tiers.item_level || ' crafting.'
+    WHEN 'boss' THEN generated_bosses.boss_name || ' drops boss coins for item level ' || generated_loot_tiers.item_level || ' crafting.'
     ELSE 'Hunters clear the path before ' || generated_bosses.boss_name || '.'
   END
 FROM generated_loot_tiers
@@ -730,7 +945,7 @@ SELECT
   offset.tank_damage + generated_bosses.boss_index * 2 + generated_loot_tiers.item_level / 8,
   offset.party_damage + generated_bosses.boss_index * 3 + 24,
   CASE offset.encounter_type
-    WHEN 'boss' THEN generated_bosses.boss_name || ' drops monster parts for item level ' || generated_loot_tiers.item_level || ' crafting.'
+    WHEN 'boss' THEN generated_bosses.boss_name || ' drops boss coins for item level ' || generated_loot_tiers.item_level || ' crafting.'
     ELSE 'Hunters clear the raid path before ' || generated_bosses.boss_name || '.'
   END
 FROM generated_loot_tiers
@@ -999,6 +1214,19 @@ SET slug = CASE id
   END
 WHERE id BETWEEN 860 AND 871;
 
+DELETE FROM dungeon_difficulties;
+INSERT OR IGNORE INTO dungeon_difficulties (dungeon_id, difficulty_id) VALUES
+  (1, 1),
+  (1, 2),
+  (1, 4),
+  (1, 5),
+  (3, 2),
+  (6, 4),
+  (8, 5),
+  (2, 101),
+  (7, 104),
+  (9, 105);
+
 DELETE FROM crafting_recipe_components WHERE recipe_id BETWEEN 1001 AND 1009;
 
 INSERT OR IGNORE INTO crafting_recipe_components (recipe_id, item_id, quantity) VALUES
@@ -1011,3 +1239,166 @@ INSERT OR IGNORE INTO crafting_recipe_components (recipe_id, item_id, quantity)
   (1007, 868, 5), (1007, 869, 3), (1007, 871, 1),
   (1008, 868, 5), (1008, 869, 3), (1008, 871, 1),
   (1009, 868, 5), (1009, 869, 3), (1009, 871, 1);
+
+-- Final coin gearing override. Keep this after legacy loot edits.
+UPDATE crafting_recipes
+SET source_dungeon_id = 1,
+    source_encounter_id = 3
+WHERE id BETWEEN 1001 AND 1409
+  AND item_id IN (SELECT id FROM items WHERE slot IN ('helmet', 'chest', 'gloves'));
+
+UPDATE crafting_recipes
+SET source_dungeon_id = 1,
+    source_encounter_id = 12
+WHERE id BETWEEN 1001 AND 1409
+  AND item_id IN (SELECT id FROM items WHERE slot IN ('boots', 'ring', 'trinket'));
+
+UPDATE crafting_recipes
+SET source_dungeon_id = 1,
+    source_encounter_id = 22
+WHERE id BETWEEN 1001 AND 1409
+  AND item_id IN (SELECT id FROM items WHERE slot IN ('weapon', 'pants', 'necklace'));
+
+UPDATE crafting_recipes
+SET difficulty_id = CASE
+  (SELECT item_level FROM items WHERE items.id = crafting_recipes.item_id)
+    WHEN 1 THEN 1
+    WHEN 5 THEN 1
+    WHEN 10 THEN 2
+    WHEN 15 THEN 2
+    WHEN 20 THEN 4
+    WHEN 25 THEN 5
+    ELSE difficulty_id
+  END
+WHERE id BETWEEN 901 AND 1409;
+
+DELETE FROM crafting_recipe_components
+WHERE recipe_id IN (
+  SELECT crafting_recipes.id
+  FROM crafting_recipes
+  JOIN items ON items.id = crafting_recipes.item_id
+  WHERE items.item_level NOT IN (1, 10, 20, 25)
+);
+
+DELETE FROM crafting_recipes
+WHERE item_id IN (
+  SELECT id FROM items WHERE item_level NOT IN (1, 10, 20, 25)
+);
+
+UPDATE items
+SET rarity = CASE item_level
+    WHEN 1 THEN 'common'
+    WHEN 10 THEN 'uncommon'
+    WHEN 20 THEN 'epic'
+    WHEN 25 THEN 'legendary'
+    ELSE rarity
+  END
+WHERE id IN (SELECT item_id FROM crafting_recipes);
+
+UPDATE items
+SET name = (
+    SELECT
+      CASE items.item_level
+        WHEN 1 THEN 'Raw '
+        WHEN 10 THEN 'Green '
+        WHEN 20 THEN 'Purple '
+        WHEN 25 THEN 'Orange '
+        ELSE ''
+      END
+      || encounters.name || ' '
+      || CASE items.slot
+        WHEN 'weapon' THEN 'Weapon'
+        WHEN 'helmet' THEN 'Helmet'
+        WHEN 'chest' THEN 'Chest'
+        WHEN 'gloves' THEN 'Gloves'
+        WHEN 'boots' THEN 'Boots'
+        WHEN 'pants' THEN 'Pants'
+        WHEN 'ring' THEN 'Ring'
+        WHEN 'necklace' THEN 'Necklace'
+        WHEN 'trinket' THEN 'Trinket'
+        ELSE items.name
+      END
+    FROM crafting_recipes
+    JOIN encounters ON encounters.id = crafting_recipes.source_encounter_id
+    WHERE crafting_recipes.item_id = items.id
+    LIMIT 1
+  ),
+  description = (
+    SELECT 'Crafted with ' || encounters.name || ' coins.'
+    FROM crafting_recipes
+    JOIN encounters ON encounters.id = crafting_recipes.source_encounter_id
+    WHERE crafting_recipes.item_id = items.id
+    LIMIT 1
+  )
+WHERE id IN (SELECT item_id FROM crafting_recipes);
+
+DELETE FROM coin_sources;
+
+INSERT INTO coin_sources
+SELECT
+  280000 + encounters.id * 100 + difficulties.dropped_item_level,
+  encounters.id,
+  difficulties.id,
+  difficulties.dropped_item_level,
+  encounters.slug || '-coin-ilvl-' || difficulties.dropped_item_level,
+  CASE difficulties.dropped_item_level
+    WHEN 1 THEN 'Raw '
+    WHEN 5 THEN 'Honed '
+    WHEN 10 THEN 'Green '
+    WHEN 15 THEN 'Blue '
+    WHEN 20 THEN 'Purple '
+    WHEN 25 THEN 'Orange '
+    ELSE ''
+  END || encounters.name || ' Coin',
+  CASE difficulties.dropped_item_level
+    WHEN 1 THEN 'common'
+    WHEN 5 THEN 'common'
+    WHEN 10 THEN 'uncommon'
+    WHEN 15 THEN 'rare'
+    WHEN 20 THEN 'epic'
+    WHEN 25 THEN 'legendary'
+    ELSE 'common'
+  END,
+  '$',
+  'A boss coin from ' || encounters.name || ' used for item level '
+    || difficulties.dropped_item_level || ' crafting.'
+FROM encounters
+JOIN dungeon_difficulties ON dungeon_difficulties.dungeon_id = encounters.dungeon_id
+JOIN difficulties ON difficulties.id = dungeon_difficulties.difficulty_id
+WHERE encounters.encounter_type = 'boss';
+
+INSERT OR IGNORE INTO items
+  (id, slug, name, slot, rarity, item_level, healing_power, max_resource_bonus, glyph, description)
+SELECT item_id, slug, name, 'component', rarity, item_level, 0, 0, glyph, description
+FROM coin_sources;
+
+UPDATE items
+SET slug = (SELECT slug FROM coin_sources WHERE coin_sources.item_id = items.id),
+    name = (SELECT name FROM coin_sources WHERE coin_sources.item_id = items.id),
+    slot = 'component',
+    rarity = (SELECT rarity FROM coin_sources WHERE coin_sources.item_id = items.id),
+    item_level = (SELECT item_level FROM coin_sources WHERE coin_sources.item_id = items.id),
+    healing_power = 0,
+    max_resource_bonus = 0,
+    glyph = (SELECT glyph FROM coin_sources WHERE coin_sources.item_id = items.id),
+    description = (SELECT description FROM coin_sources WHERE coin_sources.item_id = items.id)
+WHERE id IN (SELECT item_id FROM coin_sources);
+
+DELETE FROM encounter_loot;
+
+INSERT INTO encounter_loot (encounter_id, item_id, difficulty_id, drop_weight, drop_chance)
+SELECT encounter_id, item_id, difficulty_id, 100, 1.0
+FROM coin_sources;
+
+DELETE FROM crafting_recipe_components;
+
+INSERT INTO crafting_recipe_components (recipe_id, item_id, quantity)
+SELECT
+  crafting_recipes.id,
+  coin_sources.item_id,
+  items.item_level
+FROM crafting_recipes
+JOIN items ON items.id = crafting_recipes.item_id
+JOIN coin_sources
+  ON coin_sources.encounter_id = crafting_recipes.source_encounter_id
+  AND coin_sources.difficulty_id = crafting_recipes.difficulty_id;

docs/gearing-system.md

@@ -0,0 +1,139 @@
+# Gearing System
+
+## Current Rule
+
+The game uses fewer playable content tiers and more gear upgrade steps.
+
+Content tiers:
+
+| Content Tier | Unlock Level | Purpose |
+| --- | ---: | --- |
+| iLvl 1 | 1 | First real gear set |
+| iLvl 10 | 10 | Midgame jump |
+| iLvl 20 | 20 | Endgame jump |
+| iLvl 25 | 25 | Hard endgame |
+
+Gear tiers:
+
+| Gear Tier | How It Is Used |
+| ---: | --- |
+| 1 | Crafted from iLvl 1 content |
+| 5 | Upgrade tier from iLvl 1 content coins |
+| 10 | Crafted/upgraded from iLvl 10 content coins |
+| 15 | Gear-only upgrade tier from iLvl 10 content coins |
+| 20 | Crafted/upgraded from iLvl 20 content coins |
+| 25 | Crafted/upgraded from iLvl 25 content coins |
+
+This keeps the dungeon/raid picker simple while still giving players steady gear goals.
+
+## New Characters
+
+New characters start with no gear equipped.
+
+The first goal is to clear iLvl 1 content, earn raw boss coins, and craft the first iLvl 1 set. Starter gear exists as craftable gear, not automatic inventory.
+
+## Coin Tiers
+
+Coins are component items. Each coin is tied to a boss and a content tier.
+
+| Content Tier | Coin Prefix | Rarity Key | Example |
+| ---: | --- | --- | --- |
+| 1 | Raw | common | Raw Bulldrome Coin |
+| 10 | Green | uncommon | Green Bulldrome Coin |
+| 20 | Purple | epic | Purple Bulldrome Coin |
+| 25 | Orange | legendary | Orange Bulldrome Coin |
+
+iLvl 5 and iLvl 15 gear do not have their own playable content tier. They use coins from the previous playable tier:
+
+| Gear Tier | Coin Tier Used |
+| ---: | ---: |
+| 1 | 1 |
+| 5 | 1 |
+| 10 | 10 |
+| 15 | 10 |
+| 20 | 20 |
+| 25 | 25 |
+
+## Boss Loot
+
+Each boss drops one boss coin for the selected content tier.
+
+Examples:
+
+- Bulldrome at iLvl 1 drops Raw Bulldrome Coins.
+- Tigrex at iLvl 10 drops Green Tigrex Coins.
+- Barroth at iLvl 20 drops Purple Barroth Coins.
+- Anjanath at iLvl 25 drops Orange Anjanath Coins.
+
+## Crafting And Upgrades
+
+The first gear item in a boss/item line can be crafted directly. Higher versions should be reached through Upgrade.
+
+Current rule:
+
+- Craft iLvl 1 boss gear directly.
+- Upgrade iLvl 1 -> 5 with iLvl 1 coins.
+- Craft or upgrade iLvl 10 gear from iLvl 10 content.
+- Upgrade iLvl 10 -> 15 with iLvl 10 coins.
+- Craft or upgrade iLvl 20 gear from iLvl 20 content.
+- Craft or upgrade iLvl 25 gear from iLvl 25 content.
+
+Upgrade consumes the old item and awards the upgraded item. This avoids duplicate clutter and keeps item identity clear.
+
+Examples:
+
+| Upgrade | Cost Source |
+| --- | --- |
+| Raw Bulldrome Helmet iLvl 1 -> Honed Bulldrome Helmet iLvl 5 | Raw Bulldrome Coins |
+| Green Tigrex Helmet iLvl 10 -> Blue Tigrex Helmet iLvl 15 | Green Tigrex Coins |
+| Purple Bulldrome Helmet iLvl 20 -> Orange Bulldrome Helmet iLvl 25 | Orange Bulldrome Coins |
+
+## UI Behavior
+
+The dungeon and raid picker only shows playable content tiers:
+
+```text
+iLvl 1 -> iLvl 10 -> iLvl 20 -> iLvl 25
+```
+
+The equipment screen still shows gear recipes for:
+
+```text
+iLvl 1 -> iLvl 5 -> iLvl 10 -> iLvl 15 -> iLvl 20 -> iLvl 25
+```
+
+Direct crafting is blocked for recipes that have a lower item-level version in the same boss/item line. Use the selected item's Upgrade button for those.
+
+## Roguelike Loot
+
+Roguelike gear should follow the same tier brackets.
+
+Recommended mapping:
+
+| Stage Band | Coin Tier |
+| --- | ---: |
+| 1-4 | 1 |
+| 5-9 | 10 |
+| 10-14 | 10 |
+| 15-19 | 20 |
+| 20+ | 25 |
+
+Boss-based coins are still preferred. A roguelike boss should award coins for its actual boss template when possible.
+
+## Data Notes
+
+Authoritative gearing data lives in SQLite seed data:
+
+- `db/seed.sql`
+- `src/offline-starter-profile.json`
+
+Run this after changing seed data:
+
+```sh
+npm run db:init
+npm run offline:export
+```
+
+`npm run build` already runs `offline:export`, so a production build also refreshes the offline starter profile.
+
+TrueNAS keeps its own persistent `data/game.db`. Pushing code does not merge or replace that database. The TrueNAS app applies seed/schema changes when the container starts and runs `npm run db:init`.

docs/push-updates.md

@@ -0,0 +1,164 @@
+# Push Updates
+
+Use this when pushing code from the Mac to `git.whoagland.com`, then updating the TrueNAS-hosted server.
+
+## Rules
+
+- Git deploys code only.
+- TrueNAS save data lives in `/mnt/usbssds/apps/iwanttoheal/data/game.db`.
+- Do not commit, copy, or replace `data/game.db`.
+- Do not run character reset commands unless you intentionally want a wipe.
+- Restarting the TrueNAS app runs `npm ci`, `npm run db:init`, `npm run build`, and `npm start`.
+
+## Step 1: Build Web Locally
+
+```sh
+cd /Users/warren/Documents/testgame/testgame
+npm run build
+```
+
+This validates TypeScript, builds the browser app, and refreshes `src/offline-starter-profile.json`.
+
+## Step 2: Optional Android APK
+
+Only run this when building a new APK.
+
+```sh
+set -e
+
+cd /Users/warren/Documents/testgame/testgame
+
+export JAVA_HOME="/Applications/Android Studio.app/Contents/jbr/Contents/Home"
+export PATH="$JAVA_HOME/bin:$PATH"
+
+VERSION="1.0.27"
+
+CURRENT_CODE=$(grep -E 'versionCode [0-9]+' android/app/build.gradle | awk '{print $2}')
+NEXT_CODE=$((CURRENT_CODE + 1))
+
+perl -0pi -e "s/versionCode\s+\d+/versionCode $NEXT_CODE/" android/app/build.gradle
+perl -0pi -e "s/versionName\s+\"[^\"]+\"/versionName \"$VERSION\"/" android/app/build.gradle
+
+VITE_API_BASE_URL="https://iwanttoheal.phenomrom.com" npm run android:sync
+
+cd android
+./gradlew clean assembleDebug
+cd ..
+
+cp android/app/build/outputs/apk/debug/app-debug.apk "IWantToHeal-Thor-v$VERSION.apk"
+ls -lh "IWantToHeal-Thor-v$VERSION.apk"
+```
+
+## Step 3: Commit And Push Code
+
+```sh
+cd /Users/warren/Documents/testgame/testgame
+
+git add .
+git commit -m "Update game 1.0.27"
+git push origin main
+```
+
+Check before committing:
+
+```sh
+git status --short
+```
+
+Expected: source/doc/build-output changes only. Do not stage `data/game.db`.
+
+## Step 4: Optional Gitea Release For APK
+
+Only run this when Step 2 created a new APK.
+
+```sh
+set -e
+
+cd /Users/warren/Documents/testgame/testgame
+
+export GITEA_URL="https://git.whoagland.com"
+export GITEA_OWNER="phenom"
+export GITEA_REPO="i-want-to-heal"
+export GITEA_TOKEN="PASTE_TOKEN_HERE"
+
+VERSION="1.0.26"
+APK="IWantToHeal-Thor-v$VERSION.apk"
+
+RELEASE_JSON=$(curl -sS -X POST "$GITEA_URL/api/v1/repos/$GITEA_OWNER/$GITEA_REPO/releases" \
+  -H "Authorization: token $GITEA_TOKEN" \
+  -H "Content-Type: application/json" \
+  -d "{\"tag_name\":\"v$VERSION\",\"target_commitish\":\"main\",\"name\":\"v$VERSION\",\"body\":\"I Want to Heal Android build v$VERSION\",\"draft\":false,\"prerelease\":false}")
+
+RELEASE_ID=$(python3 -c 'import sys,json; data=json.load(sys.stdin); print(data.get("id") or data)' <<< "$RELEASE_JSON")
+
+curl -sS -X POST "$GITEA_URL/api/v1/repos/$GITEA_OWNER/$GITEA_REPO/releases/$RELEASE_ID/assets?name=$APK" \
+  -H "Authorization: token $GITEA_TOKEN" \
+  -F "attachment=@$APK"
+```
+
+## Step 5: Update TrueNAS
+
+```sh
+cd /mnt/usbssds/apps/iwanttoheal/app
+git pull
+```
+
+Before restarting, make a DB backup:
+
+```sh
+cp /mnt/usbssds/apps/iwanttoheal/data/game.db \
+  "/mnt/usbssds/apps/iwanttoheal/data/game-before-update-$(date +%Y%m%d-%H%M%S).db"
+```
+
+Then restart the `iwanttoheal` app in the TrueNAS Apps UI.
+
+## What Happens On Restart
+
+The app command runs:
+
+```sh
+npm ci && npm run db:init && npm run build && npm start
+```
+
+That means:
+
+- dependency changes apply
+- schema changes apply
+- seed/static-content updates apply
+- browser files rebuild
+- existing accounts and characters stay in `data/game.db`
+
+`npm run db:init` should not wipe saves. Character wipes are separate manual reset operations.
+
+## Resetting TrueNAS Characters
+
+Only run a reset when intentionally starting everyone over.
+
+Resetting the Mac database does not reset TrueNAS. TrueNAS has its own persistent DB at:
+
+```text
+/mnt/usbssds/apps/iwanttoheal/data/game.db
+```
+
+Back it up first, then run the reset command or reset SQL on TrueNAS.
+
+## If Something Looks Wrong
+
+Check the mounted DB path:
+
+```sh
+ls -lh /mnt/usbssds/apps/iwanttoheal/data/game.db
+```
+
+Check the latest code:
+
+```sh
+cd /mnt/usbssds/apps/iwanttoheal/app
+git log --oneline -5
+```
+
+Check the app API:
+
+```sh
+curl http://127.0.0.1:4173/api/auth/session
+```

docs/ui-mockups/dungeon-option-a.svg

@@ -0,0 +1,60 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1280" height="720" viewBox="0 0 1280 720">
+  <rect width="1280" height="720" fill="#111218"/>
+  <rect x="48" y="36" width="1184" height="648" fill="#1b1c24" stroke="#090a0d" stroke-width="4"/>
+  <text x="78" y="78" fill="#8f90a0" font-family="monospace" font-size="18">ADVENTURE</text>
+  <text x="78" y="114" fill="#f2f0dc" font-family="monospace" font-size="34" font-weight="700">Dungeons</text>
+  <text x="1075" y="88" fill="#e5b95f" font-family="monospace" font-size="18">B Back</text>
+
+  <text x="78" y="158" fill="#e5b95f" font-family="monospace" font-size="18">Pick Dungeon</text>
+  <g>
+    <rect x="78" y="178" width="335" height="128" fill="#24262f" stroke="#e5b95f" stroke-width="5"/>
+    <rect x="94" y="194" width="72" height="72" fill="#481e29" stroke="#090a0d" stroke-width="3"/>
+    <text x="116" y="241" fill="#ef6574" font-family="monospace" font-size="28" font-weight="700">AH</text>
+    <text x="184" y="216" fill="#f2f0dc" font-family="monospace" font-size="20" font-weight="700">Ashen Halls</text>
+    <text x="184" y="246" fill="#aaa9b7" font-family="monospace" font-size="16">Level 1 • 6 Players</text>
+    <text x="184" y="276" fill="#e5b95f" font-family="monospace" font-size="16">Selected</text>
+  </g>
+  <g>
+    <rect x="436" y="178" width="335" height="128" fill="#20222a" stroke="#41404a" stroke-width="4"/>
+    <rect x="452" y="194" width="72" height="72" fill="#2a263f" stroke="#090a0d" stroke-width="3"/>
+    <text x="474" y="241" fill="#8ca9ff" font-family="monospace" font-size="28" font-weight="700">SC</text>
+    <text x="542" y="216" fill="#f2f0dc" font-family="monospace" font-size="20" font-weight="700">Sunken Crypt</text>
+    <text x="542" y="246" fill="#aaa9b7" font-family="monospace" font-size="16">Level 5 • 6 Players</text>
+  </g>
+  <g opacity="0.65">
+    <rect x="794" y="178" width="335" height="128" fill="#20222a" stroke="#41404a" stroke-width="4"/>
+    <rect x="810" y="194" width="72" height="72" fill="#223226" stroke="#090a0d" stroke-width="3"/>
+    <text x="832" y="241" fill="#70d990" font-family="monospace" font-size="28" font-weight="700">GM</text>
+    <text x="900" y="216" fill="#f2f0dc" font-family="monospace" font-size="20" font-weight="700">Grove Maw</text>
+    <text x="900" y="246" fill="#aaa9b7" font-family="monospace" font-size="16">Level 10 • 6 Players</text>
+  </g>
+
+  <text x="78" y="356" fill="#e5b95f" font-family="monospace" font-size="18">Pick Part</text>
+  <g>
+    <rect x="78" y="376" width="282" height="82" fill="#29291f" stroke="#e5b95f" stroke-width="5"/>
+    <text x="112" y="426" fill="#f2f0dc" font-family="monospace" font-size="24" font-weight="700">Part 1</text>
+    <text x="250" y="426" fill="#8f90a0" font-family="monospace" font-size="16">3 fights</text>
+  </g>
+  <g>
+    <rect x="382" y="376" width="282" height="82" fill="#20222a" stroke="#41404a" stroke-width="4"/>
+    <text x="416" y="426" fill="#f2f0dc" font-family="monospace" font-size="24" font-weight="700">Part 2</text>
+    <text x="554" y="426" fill="#8f90a0" font-family="monospace" font-size="16">Locked</text>
+  </g>
+  <g>
+    <rect x="686" y="376" width="282" height="82" fill="#20222a" stroke="#41404a" stroke-width="4"/>
+    <text x="720" y="426" fill="#f2f0dc" font-family="monospace" font-size="24" font-weight="700">Part 3</text>
+    <text x="858" y="426" fill="#8f90a0" font-family="monospace" font-size="16">Locked</text>
+  </g>
+
+  <text x="78" y="508" fill="#e5b95f" font-family="monospace" font-size="18">Pick Difficulty</text>
+  <rect x="78" y="528" width="240" height="64" fill="#29291f" stroke="#e5b95f" stroke-width="5"/>
+  <text x="116" y="568" fill="#f2f0dc" font-family="monospace" font-size="20" font-weight="700">Normal</text>
+  <rect x="342" y="528" width="240" height="64" fill="#20222a" stroke="#41404a" stroke-width="4"/>
+  <text x="380" y="568" fill="#f2f0dc" font-family="monospace" font-size="20" font-weight="700">Heroic</text>
+  <rect x="606" y="528" width="240" height="64" fill="#20222a" stroke="#41404a" stroke-width="4"/>
+  <text x="644" y="568" fill="#777988" font-family="monospace" font-size="20" font-weight="700">Mythic L10</text>
+
+  <rect x="914" y="508" width="238" height="86" fill="#3a2618" stroke="#e5b95f" stroke-width="5"/>
+  <text x="982" y="559" fill="#f2f0dc" font-family="monospace" font-size="24" font-weight="700">Start</text>
+  <text x="78" y="638" fill="#aaa9b7" font-family="monospace" font-size="17">Idea A: All choices are button grids. D-pad works everywhere. No native dropdown.</text>
+</svg>

docs/ui-mockups/dungeon-option-b.svg

@@ -0,0 +1,44 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1280" height="720" viewBox="0 0 1280 720">
+  <rect width="1280" height="720" fill="#111218"/>
+  <rect x="48" y="36" width="1184" height="648" fill="#1b1c24" stroke="#090a0d" stroke-width="4"/>
+  <text x="78" y="78" fill="#8f90a0" font-family="monospace" font-size="18">ADVENTURE</text>
+  <text x="78" y="114" fill="#f2f0dc" font-family="monospace" font-size="34" font-weight="700">Dungeons</text>
+  <text x="1014" y="88" fill="#e5b95f" font-family="monospace" font-size="18">LB/RB Change</text>
+
+  <rect x="78" y="150" width="760" height="398" fill="#20222a" stroke="#41404a" stroke-width="4"/>
+  <rect x="112" y="184" width="164" height="164" fill="#481e29" stroke="#090a0d" stroke-width="4"/>
+  <text x="151" y="280" fill="#ef6574" font-family="monospace" font-size="48" font-weight="700">AH</text>
+  <text x="306" y="202" fill="#8f90a0" font-family="monospace" font-size="18">CURRENT DUNGEON</text>
+  <text x="306" y="248" fill="#f2f0dc" font-family="monospace" font-size="34" font-weight="700">Ashen Halls</text>
+  <text x="306" y="286" fill="#aaa9b7" font-family="monospace" font-size="18">Guide a six-player party through burning halls.</text>
+  <text x="306" y="324" fill="#e5b95f" font-family="monospace" font-size="18">Level 1 • 6 Players • 100 XP</text>
+  <rect x="112" y="384" width="690" height="104" fill="#15161c" stroke="#33343d" stroke-width="3"/>
+  <text x="138" y="425" fill="#f2f0dc" font-family="monospace" font-size="19">Ashen Halls</text>
+  <text x="356" y="425" fill="#8f90a0" font-family="monospace" font-size="19">Sunken Crypt</text>
+  <text x="608" y="425" fill="#8f90a0" font-family="monospace" font-size="19">Grove Maw</text>
+  <rect x="128" y="448" width="146" height="8" fill="#e5b95f"/>
+
+  <rect x="874" y="150" width="278" height="398" fill="#20222a" stroke="#41404a" stroke-width="4"/>
+  <text x="906" y="194" fill="#e5b95f" font-family="monospace" font-size="18">Setup</text>
+  <text x="906" y="232" fill="#f2f0dc" font-family="monospace" font-size="22" font-weight="700">Part</text>
+  <rect x="906" y="252" width="68" height="54" fill="#29291f" stroke="#e5b95f" stroke-width="4"/>
+  <text x="932" y="286" fill="#f2f0dc" font-family="monospace" font-size="20">1</text>
+  <rect x="990" y="252" width="68" height="54" fill="#20222a" stroke="#41404a" stroke-width="3"/>
+  <text x="1016" y="286" fill="#8f90a0" font-family="monospace" font-size="20">2</text>
+  <rect x="1074" y="252" width="68" height="54" fill="#20222a" stroke="#41404a" stroke-width="3"/>
+  <text x="1100" y="286" fill="#8f90a0" font-family="monospace" font-size="20">3</text>
+
+  <text x="906" y="350" fill="#f2f0dc" font-family="monospace" font-size="22" font-weight="700">Difficulty</text>
+  <rect x="906" y="372" width="236" height="52" fill="#29291f" stroke="#e5b95f" stroke-width="4"/>
+  <text x="938" y="405" fill="#f2f0dc" font-family="monospace" font-size="18">Normal</text>
+  <rect x="906" y="436" width="236" height="52" fill="#20222a" stroke="#41404a" stroke-width="3"/>
+  <text x="938" y="469" fill="#aaa9b7" font-family="monospace" font-size="18">Heroic</text>
+
+  <rect x="78" y="580" width="238" height="70" fill="#15161c" stroke="#41404a" stroke-width="4"/>
+  <text x="120" y="624" fill="#e5b95f" font-family="monospace" font-size="22">Prev</text>
+  <rect x="342" y="580" width="238" height="70" fill="#15161c" stroke="#41404a" stroke-width="4"/>
+  <text x="392" y="624" fill="#e5b95f" font-family="monospace" font-size="22">Next</text>
+  <rect x="874" y="580" width="278" height="70" fill="#3a2618" stroke="#e5b95f" stroke-width="5"/>
+  <text x="963" y="624" fill="#f2f0dc" font-family="monospace" font-size="24" font-weight="700">Start</text>
+  <text x="78" y="684" fill="#aaa9b7" font-family="monospace" font-size="17">Idea B: One big focused dungeon. Shoulder buttons or side buttons cycle dungeon.</text>
+</svg>

docs/ui-mockups/dungeon-option-c.svg

@@ -0,0 +1,48 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1280" height="720" viewBox="0 0 1280 720">
+  <rect width="1280" height="720" fill="#111218"/>
+  <rect x="48" y="36" width="1184" height="648" fill="#1b1c24" stroke="#090a0d" stroke-width="4"/>
+  <text x="78" y="78" fill="#8f90a0" font-family="monospace" font-size="18">ADVENTURE</text>
+  <text x="78" y="114" fill="#f2f0dc" font-family="monospace" font-size="34" font-weight="700">Mission Board</text>
+  <text x="1046" y="88" fill="#e5b95f" font-family="monospace" font-size="18">A Start</text>
+
+  <rect x="78" y="150" width="500" height="474" fill="#20222a" stroke="#41404a" stroke-width="4"/>
+  <text x="112" y="194" fill="#e5b95f" font-family="monospace" font-size="18">Available Runs</text>
+  <g>
+    <rect x="112" y="222" width="432" height="82" fill="#29291f" stroke="#e5b95f" stroke-width="5"/>
+    <text x="136" y="255" fill="#f2f0dc" font-family="monospace" font-size="20" font-weight="700">Ashen Halls • Part 1</text>
+    <text x="136" y="283" fill="#aaa9b7" font-family="monospace" font-size="16">Normal • iLvl 1 • 100 XP</text>
+  </g>
+  <g>
+    <rect x="112" y="318" width="432" height="82" fill="#20222a" stroke="#41404a" stroke-width="4"/>
+    <text x="136" y="351" fill="#f2f0dc" font-family="monospace" font-size="20" font-weight="700">Ashen Halls • Part 1</text>
+    <text x="136" y="379" fill="#aaa9b7" font-family="monospace" font-size="16">Heroic • iLvl 5 • 140 XP</text>
+  </g>
+  <g opacity="0.65">
+    <rect x="112" y="414" width="432" height="82" fill="#20222a" stroke="#41404a" stroke-width="4"/>
+    <text x="136" y="447" fill="#f2f0dc" font-family="monospace" font-size="20" font-weight="700">Sunken Crypt • Part 1</text>
+    <text x="136" y="475" fill="#aaa9b7" font-family="monospace" font-size="16">Normal • Locked Level 5</text>
+  </g>
+  <g opacity="0.65">
+    <rect x="112" y="510" width="432" height="82" fill="#20222a" stroke="#41404a" stroke-width="4"/>
+    <text x="136" y="543" fill="#f2f0dc" font-family="monospace" font-size="20" font-weight="700">Ashen Halls • Part 2</text>
+    <text x="136" y="571" fill="#aaa9b7" font-family="monospace" font-size="16">Normal • Locked until Part 1 clear</text>
+  </g>
+
+  <rect x="616" y="150" width="536" height="474" fill="#20222a" stroke="#41404a" stroke-width="4"/>
+  <rect x="650" y="184" width="130" height="130" fill="#481e29" stroke="#090a0d" stroke-width="4"/>
+  <text x="684" y="262" fill="#ef6574" font-family="monospace" font-size="42" font-weight="700">AH</text>
+  <text x="812" y="194" fill="#8f90a0" font-family="monospace" font-size="18">SELECTED RUN</text>
+  <text x="812" y="238" fill="#f2f0dc" font-family="monospace" font-size="30" font-weight="700">Ashen Halls</text>
+  <text x="812" y="278" fill="#e5b95f" font-family="monospace" font-size="20">Part 1 • Normal</text>
+  <text x="650" y="358" fill="#aaa9b7" font-family="monospace" font-size="17">Fastest path for controller play. One list item is the exact run.</text>
+  <text x="650" y="394" fill="#aaa9b7" font-family="monospace" font-size="17">No separate dungeon, phase, or difficulty controls.</text>
+
+  <rect x="650" y="440" width="470" height="64" fill="#15161c" stroke="#33343d" stroke-width="3"/>
+  <text x="680" y="480" fill="#f2f0dc" font-family="monospace" font-size="18">Health 1.00x  Damage 1.00x  XP 1.0x</text>
+  <rect x="650" y="532" width="220" height="62" fill="#3a2618" stroke="#e5b95f" stroke-width="5"/>
+  <text x="716" y="570" fill="#f2f0dc" font-family="monospace" font-size="22" font-weight="700">Start</text>
+  <rect x="900" y="532" width="220" height="62" fill="#15161c" stroke="#41404a" stroke-width="4"/>
+  <text x="955" y="570" fill="#e5b95f" font-family="monospace" font-size="22">Loot</text>
+
+  <text x="78" y="684" fill="#aaa9b7" font-family="monospace" font-size="17">Idea C: Flat mission list. Most controller-friendly, least setup flexibility on one screen.</text>
+</svg>

docs/ui-mockups/dungeon-option-d.svg

@@ -0,0 +1,72 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1280" height="720" viewBox="0 0 1280 720">
+  <rect width="1280" height="720" fill="#111218"/>
+  <rect x="48" y="36" width="1184" height="648" fill="#1b1c24" stroke="#090a0d" stroke-width="4"/>
+  <text x="78" y="78" fill="#8f90a0" font-family="monospace" font-size="18">ADVENTURE</text>
+  <text x="78" y="114" fill="#f2f0dc" font-family="monospace" font-size="34" font-weight="700">Dungeons</text>
+  <text x="958" y="88" fill="#e5b95f" font-family="monospace" font-size="18">B Back  •  A Select</text>
+
+  <text x="78" y="158" fill="#e5b95f" font-family="monospace" font-size="18">1. Pick Item Level</text>
+  <g>
+    <rect x="78" y="178" width="170" height="72" fill="#20222a" stroke="#41404a" stroke-width="4"/>
+    <text x="125" y="222" fill="#f2f0dc" font-family="monospace" font-size="22">5</text>
+    <text x="108" y="240" fill="#8f90a0" font-family="monospace" font-size="12">Initiate</text>
+  </g>
+  <g>
+    <rect x="268" y="178" width="170" height="72" fill="#20222a" stroke="#41404a" stroke-width="4"/>
+    <text x="310" y="222" fill="#f2f0dc" font-family="monospace" font-size="22">10</text>
+    <text x="300" y="240" fill="#8f90a0" font-family="monospace" font-size="12">Veteran</text>
+  </g>
+  <g>
+    <rect x="458" y="178" width="170" height="72" fill="#20222a" stroke="#41404a" stroke-width="4"/>
+    <text x="500" y="222" fill="#f2f0dc" font-family="monospace" font-size="22">15</text>
+    <text x="488" y="240" fill="#8f90a0" font-family="monospace" font-size="12">Champion</text>
+  </g>
+  <g>
+    <rect x="648" y="178" width="170" height="72" fill="#29291f" stroke="#e5b95f" stroke-width="5"/>
+    <text x="690" y="222" fill="#f2f0dc" font-family="monospace" font-size="22" font-weight="700">20</text>
+    <text x="690" y="240" fill="#e5b95f" font-family="monospace" font-size="12">Mythic</text>
+  </g>
+  <g opacity="0.65">
+    <rect x="838" y="178" width="170" height="72" fill="#20222a" stroke="#41404a" stroke-width="4"/>
+    <text x="880" y="222" fill="#777988" font-family="monospace" font-size="22">25</text>
+    <text x="864" y="240" fill="#777988" font-family="monospace" font-size="12">Level 20</text>
+  </g>
+
+  <text x="78" y="304" fill="#e5b95f" font-family="monospace" font-size="18">2. Pick Run</text>
+  <g>
+    <rect x="78" y="324" width="335" height="154" fill="#29291f" stroke="#e5b95f" stroke-width="5"/>
+    <rect x="96" y="346" width="64" height="64" fill="#481e29" stroke="#090a0d" stroke-width="3"/>
+    <text x="114" y="387" fill="#ef6574" font-family="monospace" font-size="24" font-weight="700">AH</text>
+    <text x="178" y="360" fill="#f2f0dc" font-family="monospace" font-size="20" font-weight="700">Ashen Halls</text>
+    <text x="178" y="389" fill="#aaa9b7" font-family="monospace" font-size="15">Mythic • iLvl 20</text>
+    <text x="96" y="446" fill="#e5b95f" font-family="monospace" font-size="16">Part 1 unlocked</text>
+  </g>
+  <g>
+    <rect x="436" y="324" width="335" height="154" fill="#20222a" stroke="#41404a" stroke-width="4"/>
+    <rect x="454" y="346" width="64" height="64" fill="#2a263f" stroke="#090a0d" stroke-width="3"/>
+    <text x="472" y="387" fill="#8ca9ff" font-family="monospace" font-size="24" font-weight="700">SC</text>
+    <text x="536" y="360" fill="#f2f0dc" font-family="monospace" font-size="20" font-weight="700">Sunken Crypt</text>
+    <text x="536" y="389" fill="#aaa9b7" font-family="monospace" font-size="15">Mythic • iLvl 20</text>
+    <text x="454" y="446" fill="#aaa9b7" font-family="monospace" font-size="16">Part 1 unlocked</text>
+  </g>
+  <g>
+    <rect x="794" y="324" width="335" height="154" fill="#20222a" stroke="#41404a" stroke-width="4"/>
+    <rect x="812" y="346" width="64" height="64" fill="#223226" stroke="#090a0d" stroke-width="3"/>
+    <text x="830" y="387" fill="#70d990" font-family="monospace" font-size="24" font-weight="700">GM</text>
+    <text x="894" y="360" fill="#f2f0dc" font-family="monospace" font-size="20" font-weight="700">Grove Maw</text>
+    <text x="894" y="389" fill="#aaa9b7" font-family="monospace" font-size="15">Mythic • iLvl 20</text>
+    <text x="812" y="446" fill="#777988" font-family="monospace" font-size="16">Locked dungeon</text>
+  </g>
+
+  <text x="78" y="532" fill="#e5b95f" font-family="monospace" font-size="18">3. Pick Part</text>
+  <rect x="78" y="552" width="250" height="64" fill="#29291f" stroke="#e5b95f" stroke-width="5"/>
+  <text x="124" y="592" fill="#f2f0dc" font-family="monospace" font-size="20">Part 1</text>
+  <rect x="352" y="552" width="250" height="64" fill="#20222a" stroke="#41404a" stroke-width="4"/>
+  <text x="398" y="592" fill="#aaa9b7" font-family="monospace" font-size="20">Part 2</text>
+  <rect x="626" y="552" width="250" height="64" fill="#20222a" stroke="#41404a" stroke-width="4"/>
+  <text x="672" y="592" fill="#aaa9b7" font-family="monospace" font-size="20">Part 3</text>
+  <rect x="926" y="552" width="226" height="64" fill="#3a2618" stroke="#e5b95f" stroke-width="5"/>
+  <text x="991" y="592" fill="#f2f0dc" font-family="monospace" font-size="22" font-weight="700">Start</text>
+
+  <text x="78" y="662" fill="#aaa9b7" font-family="monospace" font-size="17">Idea D: submenu flow. Pick item level first, then only compatible dungeon cards appear.</text>
+</svg>

package.json

@@ -8,14 +8,17 @@
     "dev": "vite",
     "build": "npm run offline:export && npx tsc -b --noEmit && npx vite build && node scripts/generate-service-worker.mjs",
     "android:sync": "npm run build && cap sync android",
+    "android:sync:truenas": "VITE_API_BASE_URL=https://iwanttoheal.phenomrom.com npm run android:sync",
     "android:open": "cap open android",
     "android:apk": "npm run android:sync && cd android && ./gradlew clean assembleDebug",
+    "android:apk:truenas": "VITE_API_BASE_URL=https://iwanttoheal.phenomrom.com npm run android:apk",
     "accounts:ip": "node scripts/manage-ip-allowance.mjs",
     "db:backup": "node scripts/backup-db.mjs",
     "db:init": "node scripts/init-db.mjs",
     "offline:export": "node scripts/export-offline-profile.mjs",
     "lint": "eslint .",
     "admin:start": "node server/admin.mjs",
+    "auth:start": "node server/auth.mjs",
     "start": "node server/production.mjs",
     "prepreview": "npm run db:init",
     "preview": "vite preview"

server/auth.mjs

@@ -0,0 +1,18 @@
+import { createServer } from 'node:http'
+import { handleAuthApiRequest } from './game-api.mjs'
+
+process.env.NODE_ENV = process.env.NODE_ENV ?? 'production'
+process.env.CORS_ORIGINS = process.env.CORS_ORIGINS
+  ?? process.env.AUTH_CORS_ORIGINS
+  ?? '*'
+
+const host = process.env.AUTH_HOST ?? process.env.HOST ?? '127.0.0.1'
+const port = Number(process.env.AUTH_PORT ?? process.env.PORT ?? 4174)
+
+const server = createServer((request, response) => {
+  handleAuthApiRequest(request, response)
+})
+
+server.listen(port, host, () => {
+  console.log(`I want to Heal auth listening on http://${host}:${port}`)
+})

server/game-api.mjs

@@ -33,6 +33,31 @@ function sendJson(response, status, body, headers = {}) {
   response.end(JSON.stringify(body))
 }
 
+function configuredCorsOrigins() {
+  return String(process.env.CORS_ORIGINS ?? process.env.AUTH_CORS_ORIGINS ?? '')
+    .split(',')
+    .map((origin) => origin.trim())
+    .filter(Boolean)
+}
+
+function setCorsHeaders(response, request) {
+  const origin = request.headers.origin
+  if (typeof origin !== 'string') return
+  const allowedOrigins = configuredCorsOrigins()
+  if (!allowedOrigins.includes('*') && !allowedOrigins.includes(origin)) return
+  response.setHeader('Access-Control-Allow-Origin', origin)
+  response.setHeader('Access-Control-Allow-Methods', 'GET,POST,PUT,OPTIONS')
+  response.setHeader('Access-Control-Allow-Headers', 'Content-Type,Authorization')
+  response.setHeader('Access-Control-Max-Age', '86400')
+  response.setHeader('Vary', 'Origin')
+}
+
+function sendCorsPreflight(request, response) {
+  setCorsHeaders(response, request)
+  response.statusCode = 204
+  response.end()
+}
+
 async function readJson(request, maxSize = 16 * 1024) {
   const chunks = []
   let size = 0
@@ -260,6 +285,17 @@ function parseCookies(request) {
   )
 }
 
+function bearerToken(request) {
+  const authorization = request.headers.authorization
+  if (typeof authorization !== 'string') return ''
+  const match = authorization.match(/^Bearer\s+(.+)$/i)
+  return match ? match[1].trim() : ''
+}
+
+function requestSessionToken(request) {
+  return bearerToken(request) || parseCookies(request)[sessionCookieName] || ''
+}
+
 function sessionCookie(token, request, maxAge = sessionLifetimeSeconds) {
   const secure = request.headers['x-forwarded-proto'] === 'https'
     || Boolean(request.socket.encrypted)
@@ -284,7 +320,7 @@ function createSession(database, accountId, ip, activeCharacterId) {
 }
 
 function currentSession(database, request) {
-  const token = parseCookies(request)[sessionCookieName]
+  const token = requestSessionToken(request)
   if (!token) return null
   return database.prepare(`
     SELECT
@@ -327,13 +363,6 @@ function initializeCharacter(database, accountId, characterName, classId) {
   ;[...starterSpells, null].slice(0, 6).forEach((spellId, index) => {
     insertSlot.run(characterId, index + 1, spellId)
   })
-  const insertItem = database.prepare(`
-    INSERT INTO character_inventory (character_id, item_id, quantity, equipped)
-    VALUES (?, ?, 1, ?)
-  `)
-  for (let itemId = 100; itemId <= 107; itemId += 1) {
-    insertItem.run(characterId, itemId, itemId === 107 ? 0 : 1)
-  }
   return characterId
 }
 
@@ -1268,11 +1297,57 @@ function formatLootRoll(database, context, record, dropChance) {
   }
 }
 
-function componentDropQuantity(droppedItemLevel) {
+function coinDropQuantity() {
-  const tier = Math.max(0, Math.floor((droppedItemLevel - 5) / 5))
+  const roll = Math.random()
-  const secondChance = Math.min(0.85, 0.35 + tier * 0.12)
+  if (roll < 0.15) return 3
-  const thirdChance = Math.min(0.6, 0.1 + tier * 0.1)
+  if (roll < 0.5) return 2
-  return 1 + (Math.random() < secondChance ? 1 : 0) + (Math.random() < thirdChance ? 1 : 0)
+  return 1
+}
+
+function roguelikeCoinItemLevel(stage) {
+  return Math.min(25, 5 + Math.max(0, Math.floor(stage / 5)) * 5)
+}
+
+function awardRoguelikeCoin(database, characterId, sourceEncounterId, stage) {
+  if (!sourceEncounterId || !stage) return null
+  const coin = database.prepare(`
+    SELECT
+      items.id,
+      items.slug,
+      items.name,
+      items.slot,
+      items.rarity,
+      items.item_level AS itemLevel,
+      items.healing_power AS healingPower,
+      items.max_resource_bonus AS maxResourceBonus,
+      items.glyph,
+      items.description
+    FROM encounter_loot
+    JOIN items ON items.id = encounter_loot.item_id
+    WHERE encounter_loot.encounter_id = ?
+      AND items.item_level = ?
+    ORDER BY encounter_loot.difficulty_id
+    LIMIT 1
+  `).get(sourceEncounterId, roguelikeCoinItemLevel(stage))
+  if (!coin) return null
+  const quantity = coinDropQuantity()
+  const previousQuantity = database.prepare(`
+    SELECT quantity
+    FROM character_inventory
+    WHERE character_id = ? AND item_id = ?
+  `).get(characterId, coin.id)?.quantity ?? 0
+  database.prepare(`
+    INSERT INTO character_inventory (character_id, item_id, quantity, equipped)
+    VALUES (?, ?, ?, 0)
+    ON CONFLICT(character_id, item_id)
+    DO UPDATE SET quantity = quantity + ?
+  `).run(characterId, coin.id, quantity, quantity)
+  return {
+    ...coin,
+    quantity,
+    duplicate: previousQuantity > 0,
+    quantityAfter: previousQuantity + quantity,
+  }
 }
 
 function rollWeightedLootEntry(entries) {
@@ -1375,13 +1450,11 @@ function rollEncounterLoot(database, characterId, encounterId, difficultyId, run
     }
 
     const selectedQuantities = new Map()
-    const lootChanceSlots = context.contentType === 'raid' ? 8 : 5
+    if (Math.random() < dropChance) {
-    for (let index = 0; index < lootChanceSlots; index += 1) {
-      if (Math.random() >= dropChance) continue
       const selected = rollWeightedLootEntry(entries)
       selectedQuantities.set(
         selected.id,
-        (selectedQuantities.get(selected.id) ?? 0) + componentDropQuantity(context.droppedItemLevel),
+        coinDropQuantity(),
       )
     }
 
@@ -1612,11 +1685,24 @@ function craftItem(database, characterId, recipeId) {
       crafting_recipes.item_id AS itemId,
       crafting_recipes.difficulty_id AS difficultyId,
       crafting_recipes.source_dungeon_id AS sourceDungeonId,
-      crafting_recipes.source_encounter_id AS sourceEncounterId
+      crafting_recipes.source_encounter_id AS sourceEncounterId,
+      items.slot,
+      items.item_level AS itemLevel
     FROM crafting_recipes
+    JOIN items ON items.id = crafting_recipes.item_id
     WHERE crafting_recipes.id = ?
   `).get(recipeId)
   if (!recipe) throw new Error('That crafting recipe does not exist.')
+  const lowerTierRecipe = database.prepare(`
+    SELECT crafting_recipes.id
+    FROM crafting_recipes
+    JOIN items ON items.id = crafting_recipes.item_id
+    WHERE crafting_recipes.source_encounter_id = ?
+      AND items.slot = ?
+      AND items.item_level < ?
+    LIMIT 1
+  `).get(recipe.sourceEncounterId, recipe.slot, recipe.itemLevel)
+  if (lowerTierRecipe) throw new Error('Upgrade the previous item tier instead.')
 
   const components = database.prepare(`
     SELECT
@@ -1665,6 +1751,104 @@ function craftItem(database, characterId, recipeId) {
   return getProfile(database, characterId)
 }
 
+function upgradeItem(database, characterId, itemId) {
+  const item = database.prepare(`
+    SELECT
+      items.id,
+      items.name,
+      items.slot,
+      items.item_level AS itemLevel,
+      character_inventory.quantity,
+      character_inventory.equipped
+    FROM character_inventory
+    JOIN items ON items.id = character_inventory.item_id
+    WHERE character_inventory.character_id = ?
+      AND items.id = ?
+  `).get(characterId, itemId)
+  if (!item) throw new Error('That item is not in the character inventory.')
+  if (item.slot === componentSlot) throw new Error('Components cannot be upgraded.')
+
+  const currentRecipe = database.prepare(`
+    SELECT source_encounter_id AS sourceEncounterId
+    FROM crafting_recipes
+    WHERE item_id = ?
+  `).get(itemId)
+  if (!currentRecipe) throw new Error('No upgrade is available for this item.')
+
+  const targetRecipe = database.prepare(`
+    SELECT
+      crafting_recipes.id,
+      crafting_recipes.item_id AS itemId
+    FROM crafting_recipes
+    JOIN items ON items.id = crafting_recipes.item_id
+    WHERE crafting_recipes.source_encounter_id = ?
+      AND items.slot = ?
+      AND items.item_level > ?
+    ORDER BY items.item_level
+    LIMIT 1
+  `).get(currentRecipe.sourceEncounterId, item.slot, item.itemLevel)
+  if (!targetRecipe) throw new Error('No upgrade is available for this item.')
+
+  const components = database.prepare(`
+    SELECT
+      crafting_recipe_components.item_id AS itemId,
+      crafting_recipe_components.quantity,
+      COALESCE(character_inventory.quantity, 0) AS owned
+    FROM crafting_recipe_components
+    LEFT JOIN character_inventory
+      ON character_inventory.item_id = crafting_recipe_components.item_id
+      AND character_inventory.character_id = ?
+    WHERE crafting_recipe_components.recipe_id = ?
+  `).all(characterId, targetRecipe.id)
+  const missing = components.find((component) => component.owned < component.quantity)
+  if (missing) {
+    const componentItem = itemById(database, missing.itemId)
+    throw new Error(`Need ${missing.quantity} ${componentItem?.name ?? 'component'} to upgrade this item.`)
+  }
+
+  database.exec('BEGIN')
+  try {
+    for (const component of components) {
+      database.prepare(`
+        UPDATE character_inventory
+        SET quantity = quantity - ?
+        WHERE character_id = ? AND item_id = ?
+      `).run(component.quantity, characterId, component.itemId)
+    }
+    database.prepare(`
+      UPDATE character_inventory
+      SET quantity = quantity - 1,
+          equipped = 0
+      WHERE character_id = ? AND item_id = ?
+    `).run(characterId, itemId)
+    database.prepare(`
+      DELETE FROM character_inventory
+      WHERE character_id = ? AND quantity <= 0
+    `).run(characterId)
+    if (item.equipped) {
+      database.prepare(`
+        UPDATE character_inventory
+        SET equipped = 0
+        WHERE character_id = ?
+          AND item_id IN (SELECT id FROM items WHERE slot = ?)
+      `).run(characterId, item.slot)
+    }
+    database.prepare(`
+      INSERT INTO character_inventory (character_id, item_id, quantity, equipped)
+      VALUES (?, ?, 1, ?)
+      ON CONFLICT(character_id, item_id)
+      DO UPDATE SET quantity = quantity + 1,
+                    equipped = CASE WHEN excluded.equipped = 1 THEN 1 ELSE equipped END
+    `).run(characterId, targetRecipe.itemId, item.equipped ? 1 : 0)
+    database.exec('COMMIT')
+  } catch (error) {
+    database.exec('ROLLBACK')
+    throw error
+  }
+
+  return getProfile(database, characterId)
+}
+
 function allocateTalent(database, characterId, talentId) {
   const character = database.prepare(`
     SELECT class_id AS classId, talent_points AS talentPoints
@@ -1953,7 +2137,7 @@ function completeDungeon(database, characterId, accountId, dungeonId, difficulty
         ON CONFLICT(character_id, item_id)
         DO UPDATE SET quantity = quantity + 1
       `).run(characterId, bonusItem.id)
-      bonusItem = { ...bonusItem, duplicate: previousQuantity > 0, quantityAfter: previousQuantity + 1 }
+      bonusItem = { ...bonusItem, quantity: 1, duplicate: previousQuantity > 0, quantityAfter: previousQuantity + 1 }
     }
   }
 
@@ -2108,6 +2292,12 @@ function completeRoguelike(database, characterId, accountId, runMetrics) {
     SET experience = ?, level = ?, talent_points = ?
     WHERE id = ?
   `).run(newExperience, newLevel, newTalentPoints, characterId)
+  const bonusItem = awardRoguelikeCoin(
+    database,
+    characterId,
+    Number(runMetrics?.lootSourceEncounterId),
+    Number(runMetrics?.roguelikeStage),
+  )
 
   return {
     dungeonName: `${dungeon.name} Roguelike`,
@@ -2122,7 +2312,7 @@ function completeRoguelike(database, characterId, accountId, runMetrics) {
     durationSeconds,
     averageItemLevel,
     unlockedAbilities,
-    bonusItem: null,
+    bonusItem,
     profile: getProfile(database, characterId, accountId),
   }
 }
@@ -2211,12 +2401,124 @@ export function gameApiPlugin() {
   }
 }
 
+async function handleAuthApiRoute(database, request, response) {
+  if (request.url === '/api/auth/register' && request.method === 'POST') {
+    const payload = await readJson(request)
+    const result = registerAccount(database, request, payload)
+    sendJson(
+      response,
+      201,
+      { account: result.account, profile: result.profile, token: result.token },
+      { 'Set-Cookie': sessionCookie(result.token, request) },
+    )
+    return true
+  }
+
+  if (request.url === '/api/auth/login' && request.method === 'POST') {
+    const payload = await readJson(request)
+    const result = loginAccount(database, request, payload)
+    sendJson(
+      response,
+      200,
+      { account: result.account, profile: result.profile, token: result.token },
+      { 'Set-Cookie': sessionCookie(result.token, request) },
+    )
+    return true
+  }
+
+  if (request.url === '/api/auth/session' && request.method === 'GET') {
+    const session = currentSession(database, request)
+    if (!session) {
+      sendJson(response, 200, { account: null, profile: null })
+      return true
+    }
+    sendJson(response, 200, {
+      account: { id: session.accountId, username: session.username },
+      profile: getProfile(database, session.characterId, session.accountId),
+    })
+    return true
+  }
+
+  if (request.url === '/api/auth/logout' && request.method === 'POST') {
+    const token = requestSessionToken(request)
+    if (token) {
+      database.prepare('DELETE FROM sessions WHERE token_hash = ?').run(tokenHash(token))
+    }
+    sendJson(
+      response,
+      200,
+      { ok: true },
+      { 'Set-Cookie': sessionCookie('', request, 0) },
+    )
+    return true
+  }
+
+  return false
+}
+
+export async function handleAuthApiRequest(request, response, next = null) {
+  if (!request.url?.startsWith('/api/auth/')) {
+    if (next) {
+      next()
+      return
+    }
+    sendJson(response, 404, { error: 'API route not found.' })
+    return
+  }
+
+  if (request.method === 'OPTIONS') {
+    sendCorsPreflight(request, response)
+    return
+  }
+
+  setCorsHeaders(response, request)
+
+  if (!existsSync(databasePath)) {
+    sendJson(response, 503, { error: 'Database missing. Run npm run db:init.' })
+    return
+  }
+
+  const database = new DatabaseSync(databasePath)
+  database.exec('PRAGMA foreign_keys = ON')
+
+  try {
+    const ip = requestIp(request)
+    consumeRateLimit(`auth:${ip}`, 120, 60 * 1000)
+    database.prepare(`
+      DELETE FROM sessions WHERE expires_at <= CURRENT_TIMESTAMP
+    `).run()
+    if (!(await handleAuthApiRoute(database, request, response))) {
+      sendJson(response, 404, { error: 'API route not found.' })
+    }
+  } catch (error) {
+    const status = Number(error?.status) || 400
+    const headers = error?.retryAfter
+      ? { 'Retry-After': String(error.retryAfter) }
+      : {}
+    sendJson(
+      response,
+      status,
+      { error: error instanceof Error ? error.message : 'Unable to process request.' },
+      headers,
+    )
+  } finally {
+    database.close()
+  }
+}
+
 export async function handleApiRequest(request, response, next) {
   if (!request.url?.startsWith('/api/')) {
     next()
     return
   }
 
+  if (request.method === 'OPTIONS') {
+    sendCorsPreflight(request, response)
+    return
+  }
+
+  setCorsHeaders(response, request)
+
   if (request.url.startsWith('/api/boss-images/') && request.method === 'GET') {
     sendBossImage(request, response)
     return
@@ -2242,54 +2544,7 @@ export async function handleApiRequest(request, response, next) {
       DELETE FROM sessions WHERE expires_at <= CURRENT_TIMESTAMP
     `).run()
 
-    if (request.url === '/api/auth/register' && request.method === 'POST') {
+    if (await handleAuthApiRoute(database, request, response)) {
-      const payload = await readJson(request)
-      const result = registerAccount(database, request, payload)
-      sendJson(
-        response,
-        201,
-        { account: result.account, profile: result.profile },
-        { 'Set-Cookie': sessionCookie(result.token, request) },
-      )
-      return
-    }
-
-    if (request.url === '/api/auth/login' && request.method === 'POST') {
-      const payload = await readJson(request)
-      const result = loginAccount(database, request, payload)
-      sendJson(
-        response,
-        200,
-        { account: result.account, profile: result.profile },
-        { 'Set-Cookie': sessionCookie(result.token, request) },
-      )
-      return
-    }
-
-    if (request.url === '/api/auth/session' && request.method === 'GET') {
-      const session = currentSession(database, request)
-      if (!session) {
-        sendJson(response, 200, { account: null, profile: null })
-        return
-      }
-      sendJson(response, 200, {
-        account: { id: session.accountId, username: session.username },
-        profile: getProfile(database, session.characterId, session.accountId),
-      })
-      return
-    }
-
-    if (request.url === '/api/auth/logout' && request.method === 'POST') {
-      const token = parseCookies(request)[sessionCookieName]
-      if (token) {
-        database.prepare('DELETE FROM sessions WHERE token_hash = ?').run(tokenHash(token))
-      }
-      sendJson(
-        response,
-        200,
-        { ok: true },
-        { 'Set-Cookie': sessionCookie('', request, 0) },
-      )
       return
     }
 
@@ -2401,6 +2656,16 @@ export async function handleApiRequest(request, response, next) {
       return
     }
 
+    const itemUpgrade = request.url.match(/^\/api\/items\/(\d+)\/upgrade$/)
+    if (itemUpgrade && request.method === 'POST') {
+      sendJson(
+        response,
+        200,
+        upgradeItem(database, session.characterId, Number(itemUpgrade[1])),
+      )
+      return
+    }
+
     const encounterLootRoll = request.url.match(/^\/api\/encounters\/(\d+)\/loot-roll$/)
     if (encounterLootRoll && request.method === 'POST') {
       const payload = await readJson(request)

src/App.tsx

@@ -131,6 +131,13 @@ function App() {
     })
   }, [screen])
 
+  useEffect(() => {
+    if (!authChecked || !account || !profile || screen === 'combat') return
+    window.requestAnimationFrame(() => {
+      focusFirstControl()
+    })
+  }, [account, authChecked, profile, screen])
+
   useEffect(() => {
     window.localStorage.setItem(LAST_DIFFICULTY_KEY, String(selectedDifficultyId))
   }, [selectedDifficultyId])
@@ -148,6 +155,9 @@ function App() {
     setScreen('menu')
     setError('')
     setServerMessage('')
+    window.requestAnimationFrame(() => {
+      focusFirstControl()
+    })
   }
 
   async function signOut() {
@@ -272,10 +282,32 @@ function App() {
     ?? dungeonOptions[0]!
   const raid = raidOptions.find((candidate) => candidate.id === selectedRaidId)
     ?? raidOptions[0]
-  const activity = screen === 'raids' && raid ? raid : dungeon
   const activityOptions = screen === 'raids' ? raidOptions : dungeonOptions
+  const tierOptions = activityOptions
+    .flatMap((option) => option.difficulties)
+    .filter((difficulty, index, all) => (
+      all.findIndex((candidate) => candidate.droppedItemLevel === difficulty.droppedItemLevel) === index
+    ))
+    .sort((a, b) => a.droppedItemLevel - b.droppedItemLevel)
+  const savedDifficulty = profile.dungeons
+    .flatMap((option) => option.difficulties)
+    .find((candidate) => candidate.id === selectedDifficultyId)
+  const selectedTier = tierOptions.find((candidate) => (
+    candidate.droppedItemLevel === savedDifficulty?.droppedItemLevel
+    && profile.character.level >= candidate.unlockLevel
+  ))
+    ?? tierOptions.slice().reverse().find((candidate) => profile.character.level >= candidate.unlockLevel)
+    ?? tierOptions[0]
+  const selectedTierItemLevel = selectedTier?.droppedItemLevel ?? 0
+  const tierActivityOptions = activityOptions.filter((option) =>
+    option.difficulties.some((difficulty) => difficulty.droppedItemLevel === selectedTierItemLevel),
+  )
+  const selectedActivityId = screen === 'raids' && raid ? raid.id : dungeon.id
+  const activity = tierActivityOptions.find((candidate) => candidate.id === selectedActivityId)
+    ?? tierActivityOptions[0]
+    ?? (screen === 'raids' && raid ? raid : dungeon)
   const selectedDifficulty = activity.difficulties.find(
-    (candidate) => candidate.id === selectedDifficultyId,
+    (candidate) => candidate.droppedItemLevel === selectedTierItemLevel,
   ) ?? activity.difficulties[0]
   const difficultyLocked = profile.character.level < selectedDifficulty.unlockLevel
   const completedSections = activity.contentType === 'raid'
@@ -287,7 +319,6 @@ function App() {
     { part: 2, name: `${sectionName} 2`, encounterCount: 3, unlocked: completedSections >= 1 },
     { part: 3, name: `${sectionName} 3`, encounterCount: 3, unlocked: completedSections >= 2 },
   ]
-  const lootChanceSlots = activity.contentType === 'raid' ? 8 : 5
   const cloudSync = getCloudSyncStatus()
   const canShowCloudSync = account.id !== -1 && cloudSync.available
   const lootPreviewEncounters = [...activity.encounters]
@@ -297,7 +328,7 @@ function App() {
       : a.sequence - b.sequence)
 
   return (
-    <main className="game-shell">
+    <main className={`game-shell ${screen === 'dungeons' || screen === 'raids' ? 'dungeon-shell' : ''} ${screen === 'customize' ? 'workshop-shell' : ''}`}>
       <header className="topbar app-header">
         <button
           className="brand-button"
@@ -555,50 +586,128 @@ function App() {
       )}
 
       {(screen === 'dungeons' || screen === 'raids') && (
-        <section className="content-screen">
+        <section className="content-screen dungeon-run-screen">
           <ScreenHeading
             eyebrow="Adventure"
             title={activity.contentType === 'raid' ? 'Raids' : 'Dungeons'}
             onBack={() => setScreen('menu')}
           />
-          <article className="dungeon-card">
+          <div className="dungeon-run-board">
+            <div className="dungeon-run-main">
+              <article className="run-summary-card dungeon-focus-card">
                 <div className={`dungeon-art ${activity.contentType === 'raid' ? 'raid-art' : ''}`}>
                   {activityInitials(activity.name)}
                 </div>
-            <div>
+                <div className="run-summary-copy">
-              <p className="eyebrow">{activity.locationName}</p>
+                  <p className="eyebrow">Selected Run</p>
                   <h2>{activity.name}</h2>
                   <p>{activity.description}</p>
                   <div className="tag-row">
                     <span>Level {activity.recommendedLevel}</span>
                     <span>{activity.partySize} Players</span>
                     <span>{selectedDifficulty.name}</span>
-                <span>Component Level {selectedDifficulty.droppedItemLevel}</span>
+                    <span>iLvl {selectedDifficulty.droppedItemLevel}</span>
                     <span>{Math.round(activity.experienceReward * selectedDifficulty.experienceMultiplier)} XP</span>
                   </div>
                 </div>
-            {activityOptions.length > 1 && (
+              </article>
-              <label className="activity-select">
+
-                <span>{activity.contentType === 'raid' ? 'Raid' : 'Dungeon'}</span>
+              <section className="run-setup-panel dungeon-choice-panel">
-                <select
+                <div className="run-setup-heading">
-                  value={activity.id}
+                  <div>
-                  onChange={(event) => {
+                    <p className="eyebrow">Pick Run</p>
-                    const nextActivityId = Number(event.target.value)
+                    <h2>{screen === 'raids' ? 'Raid' : 'Dungeon'}</h2>
-                    const nextActivity = activityOptions.find((candidate) => candidate.id === nextActivityId)
+                  </div>
-                    if (screen === 'raids') setSelectedRaidId(nextActivityId)
+                  <small>{selectedDifficulty.name} rewards iLvl {selectedDifficulty.droppedItemLevel} components.</small>
-                    else setSelectedDungeonId(nextActivityId)
+                </div>
-                    if (nextActivity?.difficulties[0]) {
+                <div className="activity-card-grid dungeon-choice-grid">
-                      setSelectedDifficultyId(nextActivity.difficulties[0].id)
+                  {tierActivityOptions.map((candidate) => {
+                    const difficulty = candidate.difficulties.find(
+                      (option) => option.droppedItemLevel === selectedDifficulty.droppedItemLevel,
+                    ) ?? candidate.difficulties[0]
+                    const locked = profile.character.level < difficulty.unlockLevel
+                    const selected = candidate.id === activity.id
+                    return (
+                      <button
+                        className={`activity-card ${selected ? 'selected' : ''} ${locked ? 'locked' : ''}`}
+                        disabled={locked}
+                        key={candidate.id}
+                        onClick={() => {
+                          if (screen === 'raids') setSelectedRaidId(candidate.id)
+                          else setSelectedDungeonId(candidate.id)
+                          setSelectedDifficultyId(difficulty.id)
+                        }}
+                        type="button"
+                      >
+                        <span className={`dungeon-art ${candidate.contentType === 'raid' ? 'raid-art' : ''}`}>
+                          {activityInitials(candidate.name)}
+                        </span>
+                        <strong>{candidate.name}</strong>
+                        <small>{candidate.locationName}</small>
+                        <i>
+                          Level {candidate.recommendedLevel} | {candidate.partySize} Players
+                        </i>
+                      </button>
+                    )
+                  })}
+                </div>
+              </section>
+            </div>
+
+            <aside className="dungeon-setup-rail">
+              <section className="run-setup-panel tier-setup-panel">
+                <div className="run-setup-heading">
+                  <div>
+                    <p className="eyebrow">Item Level</p>
+                    <h2>Tier</h2>
+                  </div>
+                  <small>{screen === 'raids' ? 'Raid' : 'Dungeon'} tiers unlock by level.</small>
+                </div>
+                <div className="tier-grid">
+                  {tierOptions.map((difficulty) => {
+                    const locked = profile.character.level < difficulty.unlockLevel
+                    const selected = difficulty.droppedItemLevel === selectedDifficulty.droppedItemLevel
+                    return (
+                      <button
+                        className={`${selected ? 'selected' : ''} ${locked ? 'locked' : ''}`}
+                        disabled={locked}
+                        key={difficulty.id}
+                        onClick={() => {
+                          const nextActivity = activity.difficulties.some(
+                            (candidate) => candidate.droppedItemLevel === difficulty.droppedItemLevel,
+                          )
+                            ? activity
+                            : activityOptions.find((option) =>
+                              option.difficulties.some((candidate) => candidate.droppedItemLevel === difficulty.droppedItemLevel),
+                            )
+                          if (nextActivity) {
+                            if (screen === 'raids') setSelectedRaidId(nextActivity.id)
+                            else setSelectedDungeonId(nextActivity.id)
+                            const nextDifficulty = nextActivity.difficulties.find(
+                              (candidate) => candidate.droppedItemLevel === difficulty.droppedItemLevel,
+                            )
+                            if (nextDifficulty) setSelectedDifficultyId(nextDifficulty.id)
                           }
                         }}
+                        type="button"
                       >
-                  {activityOptions.map((candidate) => (
+                        <strong>iLvl {difficulty.droppedItemLevel}</strong>
-                    <option key={candidate.id} value={candidate.id}>{candidate.name}</option>
+                        <span>{locked ? `Level ${difficulty.unlockLevel}` : difficulty.name}</span>
-                  ))}
+                      </button>
-                </select>
+                    )
-              </label>
+                  })}
-            )}
+                </div>
-            <div className="part-buttons">
+              </section>
+
+              <section className="run-setup-panel part-setup-panel">
+                <div className="run-setup-heading">
+                  <div>
+                    <p className="eyebrow">Start</p>
+                    <h2>{sectionName}</h2>
+                  </div>
+                  <small>{difficultyLocked ? `Unlocks at level ${selectedDifficulty.unlockLevel}` : 'Choose a section to launch.'}</small>
+                </div>
+                <div className="part-picker">
                   {parts.map((p) => (
                     <button
                       key={p.part}
@@ -607,6 +716,7 @@ function App() {
                       onClick={() => {
                         setSelectedPart(p.part)
                         setCombatContentId(activity.id)
+                        setSelectedDifficultyId(selectedDifficulty.id)
                         setScreen('combat')
                       }}
                       type="button"
@@ -615,34 +725,9 @@ function App() {
                     </button>
                   ))}
                 </div>
-          </article>
+              </section>
+
               <div className="difficulty-section compact-difficulty-section">
-            <div className="difficulty-select-row">
-              <div>
-                <p className="eyebrow">Challenge Tier</p>
-                <h2>Difficulty</h2>
-              </div>
-              <label>
-                <span>Select</span>
-                <select
-                  value={selectedDifficulty.id}
-                  onChange={(event) => setSelectedDifficultyId(Number(event.target.value))}
-                >
-                  {activity.difficulties.map((difficulty, index) => (
-                    <option
-                      disabled={profile.character.level < difficulty.unlockLevel}
-                      key={difficulty.id}
-                      value={difficulty.id}
-                    >
-                      {index + 1}. {difficulty.name}
-                      {profile.character.level < difficulty.unlockLevel
-                        ? ` - Level ${difficulty.unlockLevel}`
-                        : ''}
-                    </option>
-                  ))}
-                </select>
-              </label>
-            </div>
                 <div className={`difficulty-summary ${difficultyLocked ? 'locked' : ''}`}>
                   <div>
                     <strong>{selectedDifficulty.name}</strong>
@@ -652,10 +737,11 @@ function App() {
                     <div><dt>Health</dt><dd>{selectedDifficulty.healthMultiplier.toFixed(2)}x</dd></div>
                     <div><dt>Damage</dt><dd>{selectedDifficulty.damageMultiplier.toFixed(2)}x</dd></div>
                     <div><dt>XP</dt><dd>{selectedDifficulty.experienceMultiplier.toFixed(1)}x</dd></div>
-                <div><dt>Components</dt><dd>iLvl {selectedDifficulty.droppedItemLevel}</dd></div>
+                    <div><dt>Loot</dt><dd>iLvl {selectedDifficulty.droppedItemLevel}</dd></div>
                   </dl>
                 </div>
               </div>
+
               <div className="loot-preview-section">
             <div className="equipment-heading toggle-heading">
               <div>
@@ -682,7 +768,7 @@ function App() {
                   </label>
                 </div>
                 <p className="section-note">
-                  Bosses roll {lootChanceSlots} loot chances against the listed table, 1-3 materials each
+                  Bosses drop 1-3 boss coins from one loot roll
                   {activity.completionItemLevel
                     ? ` - full clear guarantees iLvl ${activity.completionItemLevel}`
                     : ''}
@@ -702,7 +788,7 @@ function App() {
                           )}
                           <div>
                             <strong>{encounter.enemyName}</strong>
-                            <small>{loot.length > 0 ? `${lootChanceSlots} weighted chances, 1-3 each` : 'No component table'}</small>
+                            <small>{loot.length > 0 ? '1 loot roll, 1-3 coins' : 'No coin table'}</small>
                           </div>
                         </div>
                         <div className="loot-items">
@@ -804,6 +890,8 @@ function App() {
             )}
               </div>
               )}
+            </aside>
+          </div>
         </section>
       )}
 

src/components/AdminScreen.tsx

@@ -183,7 +183,7 @@ function ItemsTab({ data, setData, setSaving, saving }: {
                     </label>
                     <label>Rarity
                       <select value={form.rarity ?? item.rarity} onChange={(e) => setForm({ ...form, rarity: e.target.value })}>
-                        {['common', 'uncommon', 'rare', 'epic'].map((r) => (
+                        {['common', 'uncommon', 'rare', 'epic', 'legendary'].map((r) => (
                           <option key={r} value={r}>{r}</option>
                         ))}
                       </select>

src/components/CombatScreen.tsx

@@ -73,6 +73,16 @@ type FloatingCombatText = {
   value: number
 }
 
+type SinglePlayerCombatState = {
+  party: PartyMember[]
+  resource: number
+  enemyHealth: number
+  cooldowns: Record<string, number>
+  elapsedTicks: number
+  castsTowardFree: number
+  freeCastReady: boolean
+}
+
 const ROGUELIKE_MECHANICS: RoguelikeMechanic[] = [
   'party-pulse',
   'searing-mark',
@@ -340,13 +350,18 @@ export function CombatScreen({
   const sectionName = isRoguelike ? 'Stage' : dungeon.contentType === 'raid' ? 'Phase' : 'Part'
   const contentName = isRoguelike ? 'Roguelike' : dungeon.contentType === 'raid' ? 'Raid' : 'Dungeon'
   const initialEncounterIndex = (startPart - 1) * 3
-  const [party, setParty] = useState<PartyMember[]>(partyTemplate)
+  const initialCombatState = useMemo<SinglePlayerCombatState>(() => ({
+    party: partyTemplate,
+    resource: maxResource,
+    enemyHealth: encounters[initialEncounterIndex].maxHealth,
+    cooldowns: {},
+    elapsedTicks: 0,
+    castsTowardFree: 0,
+    freeCastReady: false,
+  }), [encounters, initialEncounterIndex, maxResource, partyTemplate])
+  const [combatState, setCombatState] = useState<SinglePlayerCombatState>(() => initialCombatState)
   const [selectedId, setSelectedId] = useState(partyTemplate[0].id)
-  const [resource, setResource] = useState(maxResource)
   const [encounterIndex, setEncounterIndex] = useState(initialEncounterIndex)
-  const [enemyHealth, setEnemyHealth] = useState(encounters[initialEncounterIndex].maxHealth)
-  const [cooldowns, setCooldowns] = useState<Record<string, number>>({})
-  const [, setElapsedTicks] = useState(0)
   const [status, setStatus] = useState<'playing' | 'won' | 'lost' | 'part-complete' | 'upgrade-choice'>('playing')
   const [paused, setPaused] = useState(false)
   const [targetGroup, setTargetGroup] = useState<0 | 1 | 2>(0)
@@ -360,8 +375,6 @@ export function CombatScreen({
   const [floatingTexts, setFloatingTexts] = useState<FloatingCombatText[]>([])
   const [roguelikeUpgrades, setRoguelikeUpgrades] = useState<RoguelikeUpgrade[]>([])
   const [upgradeChoices, setUpgradeChoices] = useState<RoguelikeUpgrade[]>([])
-  const [, setCastsTowardFree] = useState(0)
-  const [freeCastReady, setFreeCastReady] = useState(false)
   const rewardClaimedRef = useRef(false)
   const profileRefreshedRef = useRef(false)
   const rolledEncounterIdsRef = useRef(new Set<number>())
@@ -371,9 +384,14 @@ export function CombatScreen({
   const partStartTimesRef = useRef<Record<number, number>>({})
   const nextLogId = useRef(2)
   const nextFloatingTextId = useRef(1)
-  const partyRef = useRef(partyTemplate)
+  const combatRef = useRef(initialCombatState)
-  const enemyHealthRef = useRef(encounters[initialEncounterIndex].maxHealth)
+  const selectedIdRef = useRef(partyTemplate[0].id)
-  const elapsedTicksRef = useRef(0)
+  const runCombatTickRef = useRef<() => void>(() => {})
+  const combatClockActiveRef = useRef(false)
+  const lastCombatTickAtRef = useRef(performance.now())
+  const statusRef = useRef(status)
+  const pausedRef = useRef(paused)
+  const { party, resource, enemyHealth, cooldowns, freeCastReady } = combatState
   const encounter = encounters[encounterIndex]
   const currentPart = getCurrentPart(encounterIndex)
   const firstEncounterIndex = (startPart - 1) * 3
@@ -402,6 +420,9 @@ export function CombatScreen({
     enabled: dualScreenEnabled,
   } = useDualScreen()
 
+  statusRef.current = status
+  pausedRef.current = paused
+
   useEffect(() => {
     const now = Date.now()
     runStartedAtRef.current = now
@@ -415,6 +436,35 @@ export function CombatScreen({
     })
   }, [paused])
 
+  const setCombat = useCallback((
+    nextState: SinglePlayerCombatState | ((current: SinglePlayerCombatState) => SinglePlayerCombatState),
+  ) => {
+    const next = typeof nextState === 'function'
+      ? nextState(combatRef.current)
+      : nextState
+    combatRef.current = next
+    setSelectedId(selectedIdRef.current)
+    setCombatState(next)
+  }, [])
+
+  const syncSelectedTargetDom = useCallback((id: string) => {
+    document.querySelectorAll<HTMLButtonElement>('[data-party-member-id]').forEach((button) => {
+      const selected = button.dataset.partyMemberId === id
+      button.classList.toggle('selected', selected)
+      button.setAttribute('aria-pressed', String(selected))
+    })
+  }, [])
+
+  const setSelectedTargetId = useCallback((id: string) => {
+    if (selectedIdRef.current === id) return
+    selectedIdRef.current = id
+    syncSelectedTargetDom(id)
+  }, [syncSelectedTargetDom])
+
+  useEffect(() => {
+    syncSelectedTargetDom(selectedIdRef.current)
+  }, [combatState, syncSelectedTargetDom])
+
   const addLog = useCallback((text: string, tone: CombatLogEntry['tone']) => {
     const entry = { id: nextLogId.current++, text, tone }
     setLog((current) => [entry, ...current].slice(0, 60))
@@ -462,18 +512,19 @@ export function CombatScreen({
       : []
     const nextEncounters = roguelikeMode ? nextRoguelikeEncounters : staticEncounters
     const freshParty = partyTemplate.map((member) => ({ ...member }))
-    partyRef.current = freshParty
+    setCombat({
-    enemyHealthRef.current = nextEncounters[initialEncounterIndex].maxHealth
+      party: freshParty,
+      resource: maxResource,
+      enemyHealth: nextEncounters[initialEncounterIndex].maxHealth,
+      cooldowns: {},
+      elapsedTicks: 0,
+      castsTowardFree: 0,
+      freeCastReady: false,
+    })
     if (roguelikeMode) setRoguelikeEncounters(nextRoguelikeEncounters)
     setRoguelikeStage(1)
-    setParty(freshParty)
+    setSelectedTargetId(partyTemplate[0].id)
-    setSelectedId(partyTemplate[0].id)
-    setResource(maxResource)
     setEncounterIndex(initialEncounterIndex)
-    setEnemyHealth(nextEncounters[initialEncounterIndex].maxHealth)
-    setCooldowns({})
-    elapsedTicksRef.current = 0
-    setElapsedTicks(0)
     setStatus('playing')
     setPaused(false)
     setTargetGroup(0)
@@ -484,8 +535,6 @@ export function CombatScreen({
     setFloatingTexts([])
     setRoguelikeUpgrades([])
     setUpgradeChoices([])
-    setCastsTowardFree(0)
-    setFreeCastReady(false)
     rewardClaimedRef.current = false
     profileRefreshedRef.current = false
     rolledEncounterIdsRef.current = new Set()
@@ -494,34 +543,36 @@ export function CombatScreen({
     runStartedAtRef.current = Date.now()
     partStartTimesRef.current = { [startPart]: runStartedAtRef.current }
     setLog([{ id: nextLogId.current++, text: 'A new run begins.', tone: 'system' }])
-  }, [difficulty, initialEncounterIndex, maxResource, partyTemplate, roguelikeMode, roguelikePool, startPart, staticEncounters])
+  }, [difficulty, initialEncounterIndex, maxResource, partyTemplate, roguelikeMode, roguelikePool, setCombat, setSelectedTargetId, startPart, staticEncounters])
 
   const castSpell = useCallback(
     (spell: Spell) => {
-      const effectiveCost = spellResourceCost(spell, roguelikeUpgrades, freeCastReady)
+      const current = combatRef.current
-      if (status !== 'playing' || cooldowns[spell.id] > 0 || resource < effectiveCost) return
+      const effectiveCost = spellResourceCost(spell, roguelikeUpgrades, current.freeCastReady)
-      const healer = partyRef.current.find((member) => member.id === 'mira')
+      if (status !== 'playing' || current.cooldowns[spell.id] > 0 || current.resource < effectiveCost) return
+      const healer = current.party.find((member) => member.id === 'mira')
       if (!healer || healer.health <= 0) return
-      const selected = partyRef.current.find((member) => member.id === selectedId)
+      const targetId = selectedIdRef.current
+      const selected = current.party.find((member) => member.id === targetId)
       if (!selected || selected.health <= 0) return
-      const extraTarget = (blockedIds: string[]) => partyRef.current
+      const extraTarget = (blockedIds: string[]) => current.party
         .filter((member) => member.health > 0 && !blockedIds.includes(member.id))
         .sort((left, right) => (left.health / left.maxHealth) - (right.health / right.maxHealth))[0]
-      const directTargets = new Set([selectedId])
+      const directTargets = new Set([targetId])
       const hotTargets = new Set<string>()
       const shieldTargets = new Set<string>()
-      if (spell.kind === 'hot') hotTargets.add(selectedId)
+      if (spell.kind === 'hot') hotTargets.add(targetId)
-      if (spell.kind === 'shield') shieldTargets.add(selectedId)
+      if (spell.kind === 'shield') shieldTargets.add(targetId)
       if (spell.name === 'Mend' && activeSetEffects.has('mend_extra_target')) {
-        const extra = extraTarget([selectedId])
+        const extra = extraTarget([targetId])
         if (extra) directTargets.add(extra.id)
       }
       if (spell.name === 'Renew' && activeSetEffects.has('renew_extra_target')) {
-        const extra = extraTarget([selectedId])
+        const extra = extraTarget([targetId])
         if (extra) hotTargets.add(extra.id)
       }
       if (spell.name === 'Mend' && activeSetEffects.has('mend_applies_renew')) {
-        hotTargets.add(selectedId)
+        hotTargets.add(targetId)
       }
       const extraTargets = upgradeStackCount(roguelikeUpgrades, `slot${spell.key as SlotKey}-extra-target` as RoguelikeUpgradeId)
       for (let index = 0; index < extraTargets; index += 1) {
@@ -540,28 +591,7 @@ export function CombatScreen({
         if (extra) directTargets.add(extra.id)
       }
 
-      setResource((value) => value - effectiveCost)
+      const nextParty = current.party.map((member) => {
-      resourceSpentRef.current += effectiveCost
-      setCooldowns((current) => ({
-        ...current,
-        [spell.id]: spell.cooldown * cooldownMultiplier(spell, roguelikeUpgrades),
-      }))
-      if (upgradeStackCount(roguelikeUpgrades, 'fifth-cast-free') > 0) {
-        if (freeCastReady) {
-          setFreeCastReady(false)
-          setCastsTowardFree(0)
-        } else {
-          setCastsTowardFree((current) => {
-            const next = current + 1
-            if (next >= 5) {
-              setFreeCastReady(true)
-              return 0
-            }
-            return next
-          })
-        }
-      }
-      const nextParty = partyRef.current.map((member) => {
         if (member.health <= 0) return member
         if (spell.kind === 'group') {
           const power = Math.round(spell.power * (1.25 ** upgradeStackCount(roguelikeUpgrades, 'group-heal-boost')))
@@ -595,11 +625,35 @@ export function CombatScreen({
           hotTicks: hotTargets.has(member.id) ? 5 : member.hotTicks,
         }
       })
-      partyRef.current = nextParty
+      const freeCastStacks = upgradeStackCount(roguelikeUpgrades, 'fifth-cast-free')
-      setParty(nextParty)
+      const nextFreeCastReady = freeCastStacks > 0 && current.freeCastReady
+        ? false
+        : current.freeCastReady
+      const nextCastsTowardFree = freeCastStacks > 0
+        ? current.freeCastReady
+          ? 0
+          : current.castsTowardFree + 1 >= 5
+            ? 0
+            : current.castsTowardFree + 1
+        : current.castsTowardFree
+      const gainedFreeCast = freeCastStacks > 0
+        && !current.freeCastReady
+        && current.castsTowardFree + 1 >= 5
+      resourceSpentRef.current += effectiveCost
+      setCombat({
+        ...current,
+        party: nextParty,
+        resource: current.resource - effectiveCost,
+        cooldowns: {
+          ...current.cooldowns,
+          [spell.id]: spell.cooldown * cooldownMultiplier(spell, roguelikeUpgrades),
+        },
+        castsTowardFree: nextCastsTowardFree,
+        freeCastReady: gainedFreeCast || nextFreeCastReady,
+      })
       addLog(`${spell.name} cast on ${spell.kind === 'group' ? 'the party' : selected.name}${effectiveCost === 0 ? ' for free' : ''}.`, 'heal')
     },
-    [activeSetEffects, addFloatingHeal, addLog, cooldowns, freeCastReady, resource, roguelikeUpgrades, selectedId, status],
+    [activeSetEffects, addFloatingHeal, addLog, roguelikeUpgrades, setCombat, status],
   )
 
   const finishRun = useCallback(
@@ -662,25 +716,25 @@ export function CombatScreen({
   )
 
   const selectRelativeTarget = useCallback((direction: -1 | 1) => {
-    const living = partyRef.current.filter((member) => member.health > 0)
+    const living = combatRef.current.party.filter((member) => member.health > 0)
     if (living.length === 0) return
-    const currentIndex = living.findIndex((member) => member.id === selectedId)
+    const currentIndex = living.findIndex((member) => member.id === selectedIdRef.current)
     const nextIndex = currentIndex < 0
       ? 0
       : (currentIndex + direction + living.length) % living.length
-    setSelectedId(living[nextIndex].id)
+    setSelectedTargetId(living[nextIndex].id)
-  }, [selectedId])
+  }, [setSelectedTargetId])
 
   const selectDirectionalTarget = useCallback((action: InputAction) => {
     const columns = dungeon.partySize >= 10 ? 6 : 3
-    const currentIndex = partyRef.current.findIndex((member) => member.id === selectedId)
+    const currentIndex = combatRef.current.party.findIndex((member) => member.id === selectedIdRef.current)
     if (currentIndex < 0) {
-      setSelectedId(partyRef.current[0].id)
+      setSelectedTargetId(combatRef.current.party[0].id)
       return
     }
     const currentRow = Math.floor(currentIndex / columns)
     const currentColumn = currentIndex % columns
-    const candidates = partyRef.current
+    const candidates = combatRef.current.party
       .map((member, index) => ({
         member,
         index,
@@ -709,19 +763,20 @@ export function CombatScreen({
           : Math.abs(b.column - currentColumn)
         return aPrimary - bPrimary || aSecondary - bSecondary
       })
-    if (candidates[0]) setSelectedId(candidates[0].member.id)
+    if (candidates[0]) setSelectedTargetId(candidates[0].member.id)
-  }, [dungeon.partySize, selectedId])
+  }, [dungeon.partySize, setSelectedTargetId])
 
   const selectDirectTarget = useCallback((slot: number) => {
     const index = slot + (dungeon.partySize > 6 ? targetGroup * 6 : 0)
-    const member = partyRef.current[index]
+    const member = combatRef.current.party[index]
-    if (member) setSelectedId(member.id)
+    if (member) setSelectedTargetId(member.id)
-  }, [dungeon.partySize, targetGroup])
+  }, [dungeon.partySize, setSelectedTargetId, targetGroup])
 
   const chooseRoguelikeUpgrade = useCallback((upgrade: RoguelikeUpgrade) => {
     if (!roguelikeMode) return
+    const current = combatRef.current
     const clearedBoss = encounters[encounterIndex]?.isBoss ?? false
-    const recoveredParty = partyRef.current.map((member) => ({
+    const recoveredParty = current.party.map((member) => ({
       ...member,
       health: member.health <= 0
         ? 0
@@ -740,24 +795,24 @@ export function CombatScreen({
       ? nextSegment[0]
       : encounters[encounterIndex + 1]
     if (!nextEncounter) return
-    partyRef.current = recoveredParty
-    enemyHealthRef.current = nextEncounter.maxHealth
     setRoguelikeUpgrades((current) => [...current, upgrade])
     if (clearedBoss) {
       setRoguelikeStage(nextStage)
       setRoguelikeEncounters((current) => [...current, ...nextSegment])
     }
-    setParty(recoveredParty)
     setEncounterIndex((current) => current + 1)
-    setEnemyHealth(nextEncounter.maxHealth)
+    setCombat({
-    elapsedTicksRef.current = 0
+      ...current,
-    setElapsedTicks(0)
+      party: recoveredParty,
-    setCooldowns({})
+      enemyHealth: nextEncounter.maxHealth,
-    setResource((value) => clamp(value + Math.round(maxResource * 0.25), 0, maxResource))
+      elapsedTicks: 0,
+      cooldowns: {},
+      resource: clamp(current.resource + Math.round(maxResource * 0.25), 0, maxResource),
+    })
     setUpgradeChoices([])
     setStatus('playing')
     addLog(`${upgrade.name} gained. ${nextEncounter.enemyName} approaches.`, 'system')
-  }, [addLog, difficulty, encounterIndex, encounters, maxResource, roguelikeMode, roguelikePool, roguelikeStage])
+  }, [addLog, difficulty, encounterIndex, encounters, maxResource, roguelikeMode, roguelikePool, roguelikeStage, setCombat])
 
   useGameAction((action, device) => {
     if (action === 'pause' || (action === 'back' && device === 'pc')) {
@@ -776,11 +831,11 @@ export function CombatScreen({
     if (action === 'toggleTargetGroup') {
       if (dungeon.partySize <= 6) return
       setTargetGroup((current) => {
-        const groupCount = Math.max(1, Math.ceil(partyRef.current.length / 6))
+        const groupCount = Math.max(1, Math.ceil(combatRef.current.party.length / 6))
         const next = ((current + 1) % groupCount) as 0 | 1 | 2
-        const selectedIndex = partyRef.current.findIndex((member) => member.id === selectedId)
+        const selectedIndex = combatRef.current.party.findIndex((member) => member.id === selectedIdRef.current)
-        const nextMember = partyRef.current[(selectedIndex < 0 ? 0 : selectedIndex % 6) + next * 6]
+        const nextMember = combatRef.current.party[(selectedIndex < 0 ? 0 : selectedIndex % 6) + next * 6]
-        if (nextMember) setSelectedId(nextMember.id)
+        if (nextMember) setSelectedTargetId(nextMember.id)
         return next
       })
       return
@@ -799,23 +854,18 @@ export function CombatScreen({
     if (spell) castSpell(spell)
   })
 
-  useEffect(() => {
+  const runCombatTick = useCallback(() => {
-    if (status !== 'playing' || paused) return
+      const current = combatRef.current
-    const timer = window.setInterval(() => {
+      const nextElapsedTicks = current.elapsedTicks + 1
-      const nextElapsedTicks = elapsedTicksRef.current + 1
+      const nextCooldowns = Object.fromEntries(
-      elapsedTicksRef.current = nextElapsedTicks
+        Object.entries(current.cooldowns).map(([id, seconds]) => [
-      setElapsedTicks(nextElapsedTicks)
-      setResource((value) => clamp(value + 2.4, 0, maxResource))
-      setCooldowns((current) =>
-        Object.fromEntries(
-          Object.entries(current).map(([id, seconds]) => [
           id,
           Math.max(0, seconds - TICK_MS / 1000),
         ]),
-        ),
       )
+      let nextResource = clamp(current.resource + 2.4, 0, maxResource)
 
-      const living = partyRef.current.filter((member) => member.health > 0)
+      const living = current.party.filter((member) => member.health > 0)
       if (living.length === 0) {
         if (isRoguelike) finishRoguelikeRun(encounterIndex)
         setStatus('lost')
@@ -847,12 +897,12 @@ export function CombatScreen({
       if (appliesHealingReduction) addLog(`${primaryTarget.name} receives reduced healing.`, 'danger')
       if (tankBuster) addLog(`${encounter.enemyName} crushes the tanks.`, 'danger')
       if (resourceDrain) {
-        setResource((value) => clamp(value - 8, 0, maxResource))
+        nextResource = clamp(nextResource - 8, 0, maxResource)
         addLog(`${encounter.enemyName} drains ${gameClass.resourceName}.`, 'danger')
       }
 
-      const healerBeforeDamage = partyRef.current.find((member) => member.id === 'mira')
+      const healerBeforeDamage = current.party.find((member) => member.id === 'mira')
-      const nextParty = partyRef.current.map((member) => {
+      const nextParty = current.party.map((member) => {
         if (member.health <= 0) return member
         let damage = member.id === primaryTarget.id ? encounter.damage : 0
         if (member.role === 'Tank') damage += encounter.tankDamage
@@ -891,8 +941,6 @@ export function CombatScreen({
         }
       })
       const healerAfterDamage = nextParty.find((member) => member.id === 'mira')
-      partyRef.current = nextParty
-      setParty(nextParty)
 
       if (
         healerBeforeDamage
@@ -904,16 +952,30 @@ export function CombatScreen({
       }
 
       if (nextParty.every((member) => member.health <= 0)) {
+        setCombat({
+          ...current,
+          party: nextParty,
+          resource: nextResource,
+          cooldowns: nextCooldowns,
+          elapsedTicks: nextElapsedTicks,
+          enemyHealth: current.enemyHealth,
+        })
         if (isRoguelike) finishRoguelikeRun(encounterIndex)
         setStatus('lost')
         addLog('The party has fallen.', 'danger')
         return
       }
 
-      const nextEnemyHealth = enemyHealthRef.current - encounter.partyDamage
+      const nextEnemyHealth = current.enemyHealth - encounter.partyDamage
       if (nextEnemyHealth > 0) {
-        enemyHealthRef.current = nextEnemyHealth
+        setCombat({
-        setEnemyHealth(nextEnemyHealth)
+          ...current,
+          party: nextParty,
+          resource: nextResource,
+          cooldowns: nextCooldowns,
+          elapsedTicks: nextElapsedTicks,
+          enemyHealth: nextEnemyHealth,
+        })
         return
       }
 
@@ -922,8 +984,14 @@ export function CombatScreen({
       }
 
       if (isRoguelike && (upgradesEveryEncounter || encounter.isBoss)) {
-        enemyHealthRef.current = 0
+        setCombat({
-        setEnemyHealth(0)
+          ...current,
+          party: nextParty,
+          resource: nextResource,
+          cooldowns: nextCooldowns,
+          elapsedTicks: nextElapsedTicks,
+          enemyHealth: 0,
+        })
         setUpgradeChoices(chooseRandom(roguelikeUpgradeCatalog, 3))
         setStatus('upgrade-choice')
         addLog(`${encounter.enemyName} defeated. Choose an upgrade.`, 'loot')
@@ -931,16 +999,28 @@ export function CombatScreen({
       }
 
       if (isPartBoss && !isFinalBoss) {
-        enemyHealthRef.current = 0
+        setCombat({
-        setEnemyHealth(0)
+          ...current,
+          party: nextParty,
+          resource: nextResource,
+          cooldowns: nextCooldowns,
+          elapsedTicks: nextElapsedTicks,
+          enemyHealth: 0,
+        })
         setStatus('part-complete')
         addLog(`${encounter.enemyName} is defeated.`, 'loot')
         return
       }
 
       if (encounterIndex === encounters.length - 1) {
-        enemyHealthRef.current = 0
+        setCombat({
-        setEnemyHealth(0)
+          ...current,
+          party: nextParty,
+          resource: nextResource,
+          cooldowns: nextCooldowns,
+          elapsedTicks: nextElapsedTicks,
+          enemyHealth: 0,
+        })
         finishRun(currentPart, startPart)
         addLog(`${encounter.enemyName} is defeated. Rolling its loot table.`, 'loot')
         return
@@ -958,16 +1038,16 @@ export function CombatScreen({
         maxHealthPenaltyTicks: undefined,
         healingReductionTicks: undefined,
       }))
-      partyRef.current = recoveredParty
-      enemyHealthRef.current = nextEncounter.maxHealth
-      setParty(recoveredParty)
       setEncounterIndex((value) => value + 1)
-      setEnemyHealth(nextEncounter.maxHealth)
+      setCombat({
-      elapsedTicksRef.current = 0
+        ...current,
-      setElapsedTicks(0)
+        party: recoveredParty,
+        resource: nextResource,
+        cooldowns: nextCooldowns,
+        elapsedTicks: 0,
+        enemyHealth: nextEncounter.maxHealth,
+      })
       addLog(`${encounter.enemyName} defeated. ${nextEncounter.enemyName} approaches.`, 'system')
-    }, TICK_MS)
-    return () => window.clearInterval(timer)
   }, [
     addLog,
     addFloatingHeal,
@@ -987,12 +1067,45 @@ export function CombatScreen({
     gameClass.resourceName,
     requestLootRoll,
     profile.character.name,
+    setCombat,
     startPart,
-    status,
     currentPart,
-    paused,
   ])
 
+  useEffect(() => {
+    runCombatTickRef.current = runCombatTick
+  }, [runCombatTick])
+
+  useEffect(() => {
+    if (status === 'playing' && !paused) {
+      if (!combatClockActiveRef.current) {
+        lastCombatTickAtRef.current = performance.now()
+        combatClockActiveRef.current = true
+      }
+      return
+    }
+    combatClockActiveRef.current = false
+  }, [paused, status])
+
+  useEffect(() => {
+    const timer = window.setInterval(() => {
+      if (
+        !combatClockActiveRef.current
+        || statusRef.current !== 'playing'
+        || pausedRef.current
+      ) return
+      const now = performance.now()
+      const dueTicks = Math.min(4, Math.floor((now - lastCombatTickAtRef.current) / TICK_MS))
+      if (dueTicks <= 0) return
+      lastCombatTickAtRef.current += dueTicks * TICK_MS
+      for (let index = 0; index < dueTicks; index += 1) {
+        if (statusRef.current !== 'playing' || pausedRef.current) return
+        runCombatTickRef.current()
+      }
+    }, 50)
+    return () => window.clearInterval(timer)
+  }, [])
+
   useEffect(() => {
     if (
       !reward
@@ -1133,17 +1246,16 @@ export function CombatScreen({
                 {party.map((member) => (
                   <button
                     className={`party-member ${selectedId === member.id ? 'selected' : ''} ${member.health <= 0 ? 'dead' : ''}`}
+                    data-party-member-id={member.id}
                     key={member.id}
-                    onClick={() => setSelectedId(member.id)}
+                    onClick={() => setSelectedTargetId(member.id)}
                     aria-pressed={selectedId === member.id}
                     type="button"
                   >
-                    {selectedId === member.id && (
                     <span className="target-marker" aria-hidden="true">
                       <i />
                       Target
                     </span>
-                    )}
                     <div className="member-header">
                       <span className={`role role-${member.role.toLowerCase()}`}>{member.role[0]}</span>
                       <strong>{member.name}</strong>
@@ -1219,7 +1331,7 @@ export function CombatScreen({
       {dualScreenEnabled && (
         <DualScreenTopCombat
           state={dualScreenState}
-          onSelectTarget={setSelectedId}
+          onSelectTarget={setSelectedTargetId}
         />
       )}
 
@@ -1321,7 +1433,7 @@ export function CombatScreen({
                             <div className="bonus-item-detail">
                               <span>{reward.bonusItem.glyph}</span>
                               <strong className={`rarity-${reward.bonusItem.rarity}`}>{reward.bonusItem.name}</strong>
-                              <small>Item Level {reward.bonusItem.itemLevel}</small>
+                              <small>Item Level {reward.bonusItem.itemLevel} x{reward.bonusItem.quantity}</small>
                               {reward.bonusItem.duplicate && <small> (owned x{reward.bonusItem.quantityAfter})</small>}
                             </div>
                           </div>
@@ -1391,19 +1503,20 @@ export function CombatScreen({
                 const nextIndex = encounterIndex + 1
                 partStartTimesRef.current[currentPart + 1] = Date.now()
                 const nextEncounter = encounters[nextIndex]
-                const recoveredParty = partyRef.current.map((member) => ({
+                const current = combatRef.current
+                const recoveredParty = current.party.map((member) => ({
                   ...member,
                   health: clamp(member.health + 35, 0, member.maxHealth),
                   debuff: undefined,
                   debuffTicks: undefined,
                 }))
-                partyRef.current = recoveredParty
-                enemyHealthRef.current = nextEncounter.maxHealth
-                setParty(recoveredParty)
                 setEncounterIndex(nextIndex)
-                setEnemyHealth(nextEncounter.maxHealth)
+                setCombat({
-                elapsedTicksRef.current = 0
+                  ...current,
-                setElapsedTicks(0)
+                  party: recoveredParty,
+                  enemyHealth: nextEncounter.maxHealth,
+                  elapsedTicks: 0,
+                })
                 setStatus('playing')
                 addLog(`Proceeding to ${sectionName} ${currentPart + 1}. ${nextEncounter.enemyName} approaches.`, 'system')
               }}

src/components/CustomizeScreen.tsx

@@ -4,6 +4,7 @@ import {
   type CharacterProfile,
   type GameClass,
 } from '../profile'
+import { useDualScreen, useDualScreenWorkshopPublisher, type DualScreenWorkshopState } from '../dualScreen'
 import { EquipmentScreen } from './EquipmentScreen'
 import { TalentScreen } from './TalentScreen'
 
@@ -14,7 +15,8 @@ type Props = {
 }
 
 export function CustomizeScreen({ profile, onBack, onSaved }: Props) {
-  const [activeTab, setActiveTab] = useState<'equipment' | 'talents' | 'class'>('class')
+  const [activeTab, setActiveTab] = useState<'equipment' | 'crafting' | 'talents' | 'class'>('class')
+  const { enabled: dualScreenEnabled } = useDualScreen()
   const [classId, setClassId] = useState(profile.character.classId)
   const [slots, setSlots] = useState<Array<number | null>>(profile.abilitySlots)
   const [selectedSlot, setSelectedSlot] = useState(0)
@@ -63,6 +65,29 @@ export function CustomizeScreen({ profile, onBack, onSaved }: Props) {
     )
   }
 
+  const classWorkshopState = useMemo<DualScreenWorkshopState | null>(() => {
+    if (activeTab !== 'class') return null
+    return {
+      mode: 'class',
+      title: 'Ability Library',
+      subtitle: gameClass.name,
+      summary: `Selected slot ${selectedSlot + 1}. ${message || 'Choose an ability for the active loadout.'}`,
+      items: gameClass.spells.map((ability) => {
+        const locked = ability.unlockLevel > profile.character.level
+        const equipped = slots.includes(ability.id)
+        return {
+          glyph: locked ? 'L' : ability.glyph,
+          title: ability.name,
+          meta: locked ? `Level ${ability.unlockLevel}` : `${ability.cost} ${gameClass.resourceName}`,
+          detail: ability.description,
+          status: equipped ? 'Equipped' : locked ? 'Locked' : '',
+        }
+      }),
+    }
+  }, [activeTab, gameClass, message, profile.character.level, selectedSlot, slots])
+
+  useDualScreenWorkshopPublisher(classWorkshopState, dualScreenEnabled)
+
   async function persistChanges() {
     saveScroll()
     setSaving(true)
@@ -91,6 +116,7 @@ export function CustomizeScreen({ profile, onBack, onSaved }: Props) {
       <div className="customize-tabs" role="tablist" aria-label="Customize character sections">
         {([
           { key: 'equipment', label: 'Equipment' },
+          { key: 'crafting', label: 'Crafting' },
           { key: 'talents', label: 'Talents' },
           { key: 'class', label: 'Class' },
         ] as const).map((tab) => (
@@ -110,6 +136,18 @@ export function CustomizeScreen({ profile, onBack, onSaved }: Props) {
       {activeTab === 'equipment' && (
         <EquipmentScreen
           embedded
+          mode="equipment"
+          showModeTabs={false}
+          profile={profile}
+          onUpdated={onSaved}
+        />
+      )}
+
+      {activeTab === 'crafting' && (
+        <EquipmentScreen
+          embedded
+          mode="crafting"
+          showModeTabs={false}
           profile={profile}
           onUpdated={onSaved}
         />

src/components/EquipmentScreen.tsx

@@ -4,10 +4,12 @@ import {
   craftItem,
   equipItem,
   loadProfile,
+  upgradeItem,
   type CharacterProfile,
   type EquipmentSlot,
   type Item,
 } from '../profile'
+import { useDualScreen, useDualScreenWorkshopPublisher, type DualScreenWorkshopState } from '../dualScreen'
 
 const SLOT_LABELS: Record<EquipmentSlot, string> = {
   weapon: 'Weapon',
@@ -23,16 +25,26 @@ const SLOT_LABELS: Record<EquipmentSlot, string> = {
 }
 
 const EQUIPMENT_LIST_PAGE_SIZE = 3
-const CRAFTING_LIST_PAGE_SIZE = 6
+const CRAFTING_LIST_PAGE_SIZE = 4
 
 type Props = {
   profile: CharacterProfile
   onBack?: () => void
   onUpdated: (profile: CharacterProfile) => void
   embedded?: boolean
+  mode?: 'equipment' | 'crafting'
+  showModeTabs?: boolean
 }
 
-export function EquipmentScreen({ profile, onBack, onUpdated, embedded = false }: Props) {
+export function EquipmentScreen({
+  profile,
+  onBack,
+  onUpdated,
+  embedded = false,
+  mode,
+  showModeTabs = true,
+}: Props) {
+  const { enabled: dualScreenEnabled } = useDualScreen()
   const totalItemCount = profile.inventory.reduce(
     (total, item) => total + item.quantity,
     0,
@@ -46,8 +58,9 @@ export function EquipmentScreen({ profile, onBack, onUpdated, embedded = false }
   const [equipping, setEquipping] = useState(false)
   const [breakingDown, setBreakingDown] = useState(false)
   const [crafting, setCrafting] = useState(false)
+  const [upgrading, setUpgrading] = useState(false)
   const [showSetBonuses, setShowSetBonuses] = useState(false)
-  const [equipmentTab, setEquipmentTab] = useState<'equipment' | 'crafting'>('equipment')
+  const [equipmentTab, setEquipmentTab] = useState<'equipment' | 'crafting'>(mode ?? 'equipment')
   const [inventoryPage, setInventoryPage] = useState(0)
   const [recipePage, setRecipePage] = useState(0)
   const [message, setMessage] = useState('')
@@ -59,6 +72,25 @@ export function EquipmentScreen({ profile, onBack, onUpdated, embedded = false }
     firstRecipe?.id ?? null,
   )
   const selectedRecipe = profile.craftingRecipes.find((recipe) => recipe.id === selectedRecipeId)
+  const selectedRecipeRequiresUpgrade = selectedRecipe
+    ? profile.craftingRecipes.some((recipe) =>
+      recipe.sourceEncounterId === selectedRecipe.sourceEncounterId
+      && recipe.item.slot === selectedRecipe.item.slot
+      && recipe.item.itemLevel < selectedRecipe.item.itemLevel,
+    )
+    : false
+  const selectedItemRecipe = selectedItem
+    ? profile.craftingRecipes.find((recipe) => recipe.item.id === selectedItem.id)
+    : undefined
+  const upgradeRecipe = selectedItem && selectedItemRecipe
+    ? profile.craftingRecipes
+      .filter((recipe) =>
+        recipe.sourceEncounterId === selectedItemRecipe.sourceEncounterId
+        && recipe.item.slot === selectedItem.slot
+        && recipe.item.itemLevel > selectedItem.itemLevel,
+      )
+      .sort((left, right) => left.item.itemLevel - right.item.itemLevel)[0]
+    : undefined
   const equippedBySlot = useMemo(
     () => new Map(
       profile.inventory
@@ -105,6 +137,16 @@ export function EquipmentScreen({ profile, onBack, onUpdated, embedded = false }
     },
     [profile.craftingRecipes, slotFilter, levelFilter],
   )
+  const readyRecipeCount = filteredRecipes.filter((recipe) => recipe.canCraft).length
+  const slotRecipeCounts = useMemo(
+    () => new Map(
+      (Object.keys(SLOT_LABELS) as EquipmentSlot[]).map((slot) => [
+        slot,
+        profile.craftingRecipes.filter((recipe) => recipe.item.slot === slot).length,
+      ]),
+    ),
+    [profile.craftingRecipes],
+  )
   const recipePageCount = Math.max(
     1,
     Math.ceil(filteredRecipes.length / CRAFTING_LIST_PAGE_SIZE),
@@ -126,12 +168,26 @@ export function EquipmentScreen({ profile, onBack, onUpdated, embedded = false }
     setRecipePage((current) => Math.min(current, recipePageCount - 1))
   }, [recipePageCount])
 
+  useEffect(() => {
+    if (filteredRecipes.length === 0) {
+      setSelectedRecipeId(null)
+      return
+    }
+    if (!filteredRecipes.some((recipe) => recipe.id === selectedRecipeId)) {
+      setSelectedRecipeId(filteredRecipes[0].id)
+    }
+  }, [filteredRecipes, selectedRecipeId])
+
   useEffect(() => {
     if (equipmentTab === 'crafting') {
       loadProfile().then((fresh) => onUpdated(fresh)).catch(() => {})
     }
   }, [equipmentTab])
 
+  useEffect(() => {
+    if (mode) setEquipmentTab(mode)
+  }, [mode])
+
   function saveScroll() {
     scrollRef.current = window.scrollY
   }
@@ -189,6 +245,144 @@ export function EquipmentScreen({ profile, onBack, onUpdated, embedded = false }
     }
   }
 
+  async function upgradeSelected() {
+    if (!selectedItem || !upgradeRecipe) return
+    saveScroll()
+    setUpgrading(true)
+    setMessage('')
+    try {
+      const updated = await upgradeItem(selectedItem.id)
+      onUpdated(updated)
+      setSelectedItemId(upgradeRecipe.item.id)
+      setMessage(`${selectedItem.name} upgraded to ${upgradeRecipe.item.name}.`)
+    } catch (reason) {
+      setMessage(reason instanceof Error ? reason.message : 'Unable to upgrade item.')
+    } finally {
+      setUpgrading(false)
+    }
+  }
+
+  function renderEquipmentActions() {
+    if (!selectedItem) {
+      return <p>Select an item to inspect it.</p>
+    }
+    if (selectedItem.slot === 'component') {
+      return <p className="component-note">Used in crafting.</p>
+    }
+    return (
+      <>
+        <ComparisonDelta selected={selectedItem} equipped={comparisonItem} />
+        <button
+          className="primary-button"
+          disabled={selectedItem.equipped || equipping || breakingDown || upgrading}
+          onClick={equipSelected}
+          type="button"
+        >
+          {selectedItem.equipped ? 'Equipped' : equipping ? 'Equipping...' : 'Equip Item'}
+        </button>
+        {upgradeRecipe && (
+          <button
+            className="primary-button"
+            disabled={!upgradeRecipe.canCraft || equipping || breakingDown || upgrading}
+            onClick={upgradeSelected}
+            type="button"
+          >
+            {upgrading ? 'Upgrading...' : `Upgrade to iLvl ${upgradeRecipe.item.itemLevel}`}
+          </button>
+        )}
+        {(!selectedItem.equipped || selectedItem.quantity > 1) && (
+          <button
+            className="breakdown-button"
+            disabled={equipping || breakingDown || upgrading}
+            onClick={breakdownSelected}
+            type="button"
+          >
+            {breakingDown
+              ? 'Breaking Down...'
+              : selectedItem.quantity > 1
+                ? 'Break Down Duplicate'
+                : 'Break Down'}
+          </button>
+        )}
+      </>
+    )
+  }
+
+  const workshopState = useMemo<DualScreenWorkshopState>(() => {
+    if (equipmentTab === 'crafting') {
+      if (!selectedRecipe) {
+        return {
+          mode: 'crafting',
+          title: 'Craft Output',
+          subtitle: 'No recipe selected',
+          items: [],
+        }
+      }
+      return {
+        mode: 'crafting',
+        title: selectedRecipe.item.name,
+        subtitle: `${SLOT_LABELS[selectedRecipe.item.slot]} - Item Level ${selectedRecipe.item.itemLevel}`,
+        summary: selectedRecipe.item.description,
+        items: [
+          {
+            glyph: selectedRecipe.item.glyph,
+            title: 'Craft Output',
+            meta: `+${selectedRecipe.item.healingPower} Healing Power / +${selectedRecipe.item.maxResourceBonus} Max Resource`,
+            status: selectedRecipe.canCraft ? 'Ready' : 'Missing components',
+          },
+          ...selectedRecipe.components.map((component) => ({
+            glyph: component.item.glyph,
+            title: component.item.name,
+            meta: `Item Level ${component.item.itemLevel}`,
+            status: `${component.owned}/${component.quantity}`,
+          })),
+        ],
+      }
+    }
+    if (!selectedItem) {
+      return {
+        mode: 'equipment',
+        title: 'Equipment Detail',
+        subtitle: 'No item selected',
+        items: [],
+      }
+    }
+    return {
+      mode: 'equipment',
+      title: selectedItem.slot === 'component' ? 'Crafting Component' : selectedItem.name,
+      subtitle: `${SLOT_LABELS[selectedItem.slot]} - Item Level ${selectedItem.itemLevel}`,
+      summary: selectedItem.description,
+      items: selectedItem.slot === 'component'
+        ? [{
+          glyph: selectedItem.glyph,
+          title: selectedItem.name,
+          meta: `Owned: ${selectedItem.quantity}`,
+          status: 'Component',
+        }]
+        : [
+          {
+            glyph: selectedItem.glyph,
+            title: selectedItem.name,
+            meta: `+${selectedItem.healingPower} Healing Power / +${selectedItem.maxResourceBonus} Max Resource`,
+            status: selectedItem.equipped ? 'Equipped' : 'Inventory',
+          },
+          ...(comparisonItem && comparisonItem.id !== selectedItem.id
+            ? [{
+              glyph: comparisonItem.glyph,
+              title: comparisonItem.name,
+              meta: `+${comparisonItem.healingPower} Healing Power / +${comparisonItem.maxResourceBonus} Max Resource`,
+              status: 'Currently Equipped',
+            }]
+            : [{
+              title: selectedItem.equipped ? 'Already Equipped' : 'Empty Slot',
+              status: 'Comparison',
+            }]),
+        ],
+    }
+  }, [comparisonItem, equipmentTab, selectedItem, selectedRecipe])
+
+  useDualScreenWorkshopPublisher(workshopState, dualScreenEnabled)
+
   const content = (
     <>
       {!embedded && (
@@ -215,6 +409,7 @@ export function EquipmentScreen({ profile, onBack, onUpdated, embedded = false }
         <GearStat value={`+${profile.gearStats.maxResourceBonus}`} label={`Max ${profile.character.resourceName}`} />
       </div>
 
+      {showModeTabs && (
         <nav className="equipment-tabs">
           <button
             className={`equipment-tab ${equipmentTab === 'equipment' ? 'active' : ''}`}
@@ -231,6 +426,7 @@ export function EquipmentScreen({ profile, onBack, onUpdated, embedded = false }
             Crafting
           </button>
         </nav>
+      )}
 
       {equipmentTab === 'equipment' ? (
         <>
@@ -239,9 +435,6 @@ export function EquipmentScreen({ profile, onBack, onUpdated, embedded = false }
               selectedItem.slot === 'component' ? (
                 <>
                   <ItemDetail title="Crafting Component" item={selectedItem} />
-                  <div className="equip-action">
-                    <p className="component-note">Used in crafting.</p>
-                  </div>
                 </>
               ) : (
                 <>
@@ -255,31 +448,6 @@ export function EquipmentScreen({ profile, onBack, onUpdated, embedded = false }
                       <h2>{selectedItem.equipped ? 'Already Equipped' : 'Empty Slot'}</h2>
                     </div>
                   )}
-                  <div className="equip-action">
-                    <ComparisonDelta selected={selectedItem} equipped={comparisonItem} />
-                    <button
-                      className="primary-button"
-                      disabled={selectedItem.equipped || equipping || breakingDown}
-                      onClick={equipSelected}
-                      type="button"
-                    >
-                      {selectedItem.equipped ? 'Equipped' : equipping ? 'Equipping...' : 'Equip Item'}
-                    </button>
-                    {(!selectedItem.equipped || selectedItem.quantity > 1) && (
-                      <button
-                        className="breakdown-button"
-                        disabled={equipping || breakingDown}
-                        onClick={breakdownSelected}
-                        type="button"
-                      >
-                        {breakingDown
-                          ? 'Breaking Down...'
-                          : selectedItem.quantity > 1
-                            ? 'Break Down Duplicate'
-                            : 'Break Down'}
-                      </button>
-                    )}
-                  </div>
                 </>
               )
             ) : (
@@ -287,6 +455,10 @@ export function EquipmentScreen({ profile, onBack, onUpdated, embedded = false }
             )}
           </section>
 
+          <section className="equipment-action-strip">
+            {renderEquipmentActions()}
+          </section>
+
           <div className="equipment-layout">
             <section className="equipped-panel">
               <EquipmentHeading eyebrow="Currently Worn" title="Equipment Slots" />
@@ -382,42 +554,81 @@ export function EquipmentScreen({ profile, onBack, onUpdated, embedded = false }
         <section className="crafting-panel">
           <EquipmentHeading
             eyebrow="Crafting"
-            title="Recipes"
+            title="Workbench"
-            detail={`${filteredRecipes.filter((recipe) => recipe.canCraft).length} ready`}
+            detail={`${readyRecipeCount} ready / ${filteredRecipes.length} shown`}
           />
-          <div className="crafting-filter-bar">
-            <select
-              className="filter-select"
-              value={slotFilter}
-              onChange={(e) => {
-                setSlotFilter(e.target.value as EquipmentSlot | 'all')
-                setRecipePage(0)
-              }}
-            >
-              <option value="all">All Slots</option>
-              {(Object.entries(SLOT_LABELS) as [EquipmentSlot, string][]).map(([slot, label]) => (
-                <option key={slot} value={slot}>{label}</option>
-              ))}
-            </select>
-            <select
-              className="filter-select"
-              value={levelFilter ?? ''}
-              onChange={(e) => {
-                setLevelFilter(e.target.value === '' ? null : Number(e.target.value))
-                setRecipePage(0)
-              }}
-            >
-              <option value="">All Levels</option>
-              {availableLevels.map((level) => (
-                <option key={level} value={level}>Item Level {level}</option>
-              ))}
-            </select>
-          </div>
-          {filteredRecipes.length === 0 && (
-            <p className="inventory-empty">No crafting recipes match filters.</p>
-          )}
-          {filteredRecipes.length > 0 && (
           <div className="crafting-layout">
+            <aside className="crafting-filters">
+              <div>
+                <p className="eyebrow">Slot</p>
+                <div className="crafting-filter-grid">
+                  <button
+                    className={slotFilter === 'all' ? 'active' : ''}
+                    onClick={() => {
+                      setSlotFilter('all')
+                      setRecipePage(0)
+                    }}
+                    type="button"
+                  >
+                    <strong>All</strong>
+                    <span>{profile.craftingRecipes.length}</span>
+                  </button>
+                  {(Object.entries(SLOT_LABELS) as [EquipmentSlot, string][]).map(([slot, label]) => (
+                    <button
+                      className={slotFilter === slot ? 'active' : ''}
+                      disabled={(slotRecipeCounts.get(slot) ?? 0) === 0}
+                      key={slot}
+                      onClick={() => {
+                        setSlotFilter(slot)
+                        setRecipePage(0)
+                      }}
+                      type="button"
+                    >
+                      <strong>{label}</strong>
+                      <span>{slotRecipeCounts.get(slot) ?? 0}</span>
+                    </button>
+                  ))}
+                </div>
+              </div>
+              <div>
+                <p className="eyebrow">Item Level</p>
+                <div className="crafting-level-row">
+                  <button
+                    className={levelFilter === null ? 'active' : ''}
+                    onClick={() => {
+                      setLevelFilter(null)
+                      setRecipePage(0)
+                    }}
+                    type="button"
+                  >
+                    All
+                  </button>
+                  {availableLevels.map((level) => (
+                    <button
+                      className={levelFilter === level ? 'active' : ''}
+                      key={level}
+                      onClick={() => {
+                        setLevelFilter(level)
+                        setRecipePage(0)
+                      }}
+                      type="button"
+                    >
+                      {level}
+                    </button>
+                  ))}
+                </div>
+              </div>
+            </aside>
+
+            <section className="crafting-list-panel">
+              <EquipmentHeading
+                eyebrow="Recipes"
+                title={slotFilter === 'all' ? 'Available' : SLOT_LABELS[slotFilter]}
+                detail={`Page ${recipePage + 1}/${recipePageCount}`}
+              />
+              {filteredRecipes.length === 0 ? (
+                <p className="inventory-empty">No recipes match filters.</p>
+              ) : (
                 <div className="crafting-list">
                 {recipePageItems.map((recipe) => (
                   <button
@@ -434,9 +645,13 @@ export function EquipmentScreen({ profile, onBack, onUpdated, embedded = false }
                         {recipe.item.setName ? ` - ${recipe.item.setName}` : ''}
                       </small>
                     </div>
-                    <i>{recipe.canCraft ? 'Ready' : 'Needs materials'}</i>
+                    <i className={recipe.canCraft ? 'ready' : 'missing'}>
+                      {recipe.canCraft ? 'Ready' : 'Needs materials'}
+                    </i>
                   </button>
                 ))}
+                </div>
+              )}
                 {filteredRecipes.length > CRAFTING_LIST_PAGE_SIZE && (
                   <ListPager
                     label={`Page ${recipePage + 1} / ${recipePageCount}`}
@@ -446,10 +661,26 @@ export function EquipmentScreen({ profile, onBack, onUpdated, embedded = false }
                     previousDisabled={recipePage <= 0}
                   />
                 )}
+              <div className="crafting-action-row">
+                <button
+                  className="primary-button"
+                  disabled={selectedRecipeRequiresUpgrade || !selectedRecipe?.canCraft || crafting}
+                  onClick={craftSelected}
+                  type="button"
+                >
+                  {crafting ? 'Crafting...' : selectedRecipeRequiresUpgrade ? 'Upgrade Existing Item' : 'Craft Item'}
+                </button>
               </div>
-              {selectedRecipe && (
+            </section>
+
+            <section className="crafting-detail-panel">
+              {selectedRecipe ? (
                 <div className={`crafting-detail rarity-${selectedRecipe.item.rarity}`}>
                   <ItemDetail title="Craft Output" item={{ ...selectedRecipe.item, quantity: 1, equipped: false }} />
+                  <div className="crafting-detail-heading">
+                    <p className="eyebrow">Materials</p>
+                    <span>{selectedRecipe.canCraft ? 'Ready' : 'Missing components'}</span>
+                  </div>
                   <div className="crafting-components">
                     {selectedRecipe.components.map((component) => (
                       <div
@@ -462,22 +693,16 @@ export function EquipmentScreen({ profile, onBack, onUpdated, embedded = false }
                       </div>
                     ))}
                   </div>
-                  <button
-                    className="primary-button"
-                    disabled={!selectedRecipe.canCraft || crafting}
-                    onClick={craftSelected}
-                    type="button"
-                  >
-                    {crafting ? 'Crafting...' : 'Craft Item'}
-                  </button>
                 </div>
+              ) : (
+                <p className="inventory-empty">Select a recipe.</p>
               )}
+            </section>
           </div>
-          )}
         </section>
       )}
 
-      {profile.setBonuses.length > 0 && (
+      {equipmentTab === 'equipment' && profile.setBonuses.length > 0 && (
         <section className="set-bonus-panel">
           <div className="equipment-heading toggle-heading">
             <div>
@@ -513,11 +738,11 @@ export function EquipmentScreen({ profile, onBack, onUpdated, embedded = false }
   )
 
   if (embedded) {
-    return <div className="equipment-screen embedded-screen">{content}</div>
+    return <div className={`equipment-screen embedded-screen ${equipmentTab === 'crafting' ? 'crafting-active' : ''}`}>{content}</div>
   }
 
   return (
-    <section className="content-screen equipment-screen">
+    <section className={`content-screen equipment-screen ${equipmentTab === 'crafting' ? 'crafting-active' : ''}`}>
       {content}
     </section>
   )

src/components/PvpRoguelikeScreen.tsx

@@ -12,8 +12,10 @@ import {
   type DualScreenCombatState,
 } from '../dualScreen'
 import {
+  loadPvpRoguelikeCheckpoint,
   randomCpuDifficulty,
   recordCpuPvpLeaderboard,
+  recordPvpRoguelikeCheckpoint,
   type CpuDifficulty,
   type PvpContentType,
 } from '../pvpRoguelike'
@@ -29,6 +31,7 @@ type BossMechanic =
 
 type PvpEncounter = DungeonEncounter & {
   bossMechanics?: BossMechanic[]
+  sourceEncounterId?: number
 }
 
 type SlotKey = '1' | '2' | '3' | '4' | '5'
@@ -261,6 +264,7 @@ function buildEncounterSegment(pool: DungeonEncounter[], stage: number, kind: Pv
     const isBoss = index === 2
     return {
       ...encounter,
+      sourceEncounterId: encounter.id,
       id: 910000 + stage * 10 + index,
       sequence: (stage - 1) * 3 + index + 1,
       isBoss,
@@ -381,6 +385,10 @@ export function PvPRoguelikeScreen({
     () => buildOpponentDebuffChoices(starterSpells, abilityLabelMode),
     [abilityLabelMode, starterSpells],
   )
+  const [checkpointStage, setCheckpointStage] = useState(() =>
+    loadPvpRoguelikeCheckpoint(profile.character.id, contentType),
+  )
+  const [startStage, setStartStage] = useState(checkpointStage)
   const maxResource = gameClass.maxResource
   const partyTemplate = useMemo(
     () => (contentType === 'raid' ? RAID_PARTY : INITIAL_PARTY).map((member) => ({
@@ -397,8 +405,8 @@ export function PvPRoguelikeScreen({
     [contentType],
   )
   const [status, setStatus] = useState<'queueing' | 'playing' | 'upgrade-choice' | 'won' | 'lost'>('queueing')
-  const [stage, setStage] = useState(1)
+  const [stage, setStage] = useState(startStage)
-  const [encounters, setEncounters] = useState<PvpEncounter[]>(() => buildEncounterSegment(encounterPool, 1, contentType))
+  const [encounters, setEncounters] = useState<PvpEncounter[]>(() => buildEncounterSegment(encounterPool, startStage, contentType))
   const [encounterIndex, setEncounterIndex] = useState(0)
   const [playerSide, setPlayerSide] = useState<SideState>(() => starterSide(partyTemplate, maxResource))
   const [cpuSide, setCpuSide] = useState<SideState>(() => starterSide(cpuPartyTemplate, maxResource))
@@ -464,9 +472,16 @@ export function PvPRoguelikeScreen({
     }, 900)
   }, [])
 
+  useEffect(() => {
+    const loadedCheckpoint = loadPvpRoguelikeCheckpoint(profile.character.id, contentType)
+    setCheckpointStage(loadedCheckpoint)
+    setStartStage(loadedCheckpoint)
+  }, [contentType, profile.character.id])
+
   const awardBossReward = useCallback((encounterIndexValue: number) => {
     if (bossRewardClaimedRef.current.has(encounterIndexValue)) return
     bossRewardClaimedRef.current.add(encounterIndexValue)
+    const rewardEncounter = encounters[encounterIndexValue]
     completeRoguelike(
       rewardDungeon.id,
       rewardDifficulty.id,
@@ -476,18 +491,26 @@ export function PvPRoguelikeScreen({
       {
         bossesCleared: 1,
         experienceMode: 'pvp-boss-quarter-level',
+        lootSourceEncounterId: rewardEncounter?.sourceEncounterId,
+        roguelikeStage: stage,
       },
     )
       .then((result) => {
         setReward(result)
         onProfileUpdated(result.profile)
+        if (result.bonusItem) {
+          addLog(
+            `${result.bonusItem.name} x${result.bonusItem.quantity} awarded.`,
+            'loot',
+          )
+        }
       })
       .catch((reason: unknown) => {
         setRewardError(
           reason instanceof Error ? reason.message : 'Unable to award roguelike experience.',
         )
       })
-  }, [elapsedTicks, onProfileUpdated, rewardDifficulty.id, rewardDungeon.id])
+  }, [addLog, elapsedTicks, encounters, onProfileUpdated, rewardDifficulty.id, rewardDungeon.id, stage])
 
   const finishRoguelikeRun = useCallback(() => {
     if (rewardClaimedRef.current) return
@@ -510,7 +533,7 @@ export function PvPRoguelikeScreen({
   }, [opponentDebuffChoicesCatalog, selfBuffChoicesCatalog])
 
   useEffect(() => {
-    const firstSegment = buildEncounterSegment(encounterPool, 1, contentType)
+    const firstSegment = buildEncounterSegment(encounterPool, startStage, contentType)
     const firstEncounter = firstSegment[0]
     const basePlayer = starterSide(partyTemplate, maxResource)
     const baseCpu = starterSide(cpuPartyTemplate, maxResource)
@@ -523,7 +546,7 @@ export function PvPRoguelikeScreen({
     bossRewardClaimedRef.current = new Set()
     setEncounters(firstSegment)
     setEncounterIndex(0)
-    setStage(1)
+    setStage(startStage)
     setElapsedTicks(0)
     setStatus('queueing')
     setPlayerSide(basePlayer)
@@ -546,26 +569,26 @@ export function PvPRoguelikeScreen({
     cpuDefeatedRef.current = false
     if (gameMode === 'offline') {
       const randomCpu = randomCpuDifficulty()
-      setQueueMessage(`Offline mode. CPU ${randomCpu} enters immediately.`)
+      setQueueMessage(`Offline mode. CPU ${randomCpu} enters at stage ${startStage}.`)
       setCpuDifficulty(randomCpu)
-      setLog([{ id: 1, text: `Offline mode. CPU ${randomCpu} enters immediately.`, tone: 'system' }])
+      setLog([{ id: 1, text: `Offline mode. CPU ${randomCpu} enters at stage ${startStage}.`, tone: 'system' }])
       const timer = window.setTimeout(() => {
         setStatus('playing')
-        addLog(`Round 1 begins against CPU ${randomCpu}.`, 'system')
+        addLog(`Stage ${startStage} begins against CPU ${randomCpu}.`, 'system')
       }, 500)
       return () => window.clearTimeout(timer)
     }
-    setQueueMessage('Searching queue. No player found yet.')
+    setQueueMessage(`Searching queue. Stage ${startStage} start ready.`)
-    setLog([{ id: 1, text: 'Searching queue. No player found yet.', tone: 'system' }])
+    setLog([{ id: 1, text: `Searching queue. Stage ${startStage} start ready.`, tone: 'system' }])
     const timer = window.setTimeout(() => {
       const randomCpu = randomCpuDifficulty()
       setCpuDifficulty(randomCpu)
       setQueueMessage(`No queued player found. CPU ${randomCpu} steps in.`)
       setStatus('playing')
-      addLog(`No queued player found. CPU ${randomCpu} steps in.`, 'system')
+      addLog(`No queued player found. CPU ${randomCpu} steps in at stage ${startStage}.`, 'system')
     }, 1400)
     return () => window.clearTimeout(timer)
-  }, [addLog, contentType, cpuPartyTemplate, encounterPool, gameMode, maxResource, partyTemplate])
+  }, [addLog, contentType, cpuPartyTemplate, encounterPool, gameMode, maxResource, partyTemplate, startStage])
 
   const applySpell = useCallback((
     current: SideState,
@@ -841,7 +864,18 @@ export function PvPRoguelikeScreen({
       if (nextPlayer.enemyHealth <= 0 && playerClearedEncounterRef.current !== encounterIndex) {
         playerClearedEncounterRef.current = encounterIndex
         setEncountersCleared((value) => value + 1)
-        if (encounter.isBoss) awardBossReward(encounterIndex)
+        if (encounter.isBoss) {
+          awardBossReward(encounterIndex)
+          const nextCheckpoint = recordPvpRoguelikeCheckpoint(
+            profile.character.id,
+            contentType,
+            stage,
+          )
+          if (nextCheckpoint > checkpointStage) {
+            setCheckpointStage(nextCheckpoint)
+            addLog(`Stage ${nextCheckpoint} checkpoint unlocked.`, 'loot')
+          }
+        }
       }
       playerRef.current = nextPlayer
       cpuRef.current = nextCpu
@@ -866,7 +900,7 @@ export function PvPRoguelikeScreen({
       }
     }, TICK_MS)
     return () => window.clearInterval(timer)
-  }, [addLog, advanceSide, awardBossReward, beginUpgradePhase, cpuDifficulty, cpuTakeTurn, encounter, encounterIndex, encountersCleared, finishRoguelikeRun, paused, status])
+  }, [addLog, advanceSide, awardBossReward, beginUpgradePhase, checkpointStage, contentType, cpuDifficulty, cpuTakeTurn, encounter, encounterIndex, encountersCleared, finishRoguelikeRun, paused, profile.character.id, stage, status])
 
   useEffect(() => {
     if ((status !== 'won' && status !== 'lost') || recordedRunRef.current || !cpuDifficulty) return
@@ -1334,6 +1368,13 @@ export function PvPRoguelikeScreen({
                         Ability Unlocked: {ability.name}
                       </p>
                     ))}
+                    {reward.bonusItem && (
+                      <p className="ability-unlock">
+                        <span>{reward.bonusItem.glyph}</span>
+                        {reward.bonusItem.name} x{reward.bonusItem.quantity}
+                        {reward.bonusItem.duplicate ? ` (owned x${reward.bonusItem.quantityAfter})` : ''}
+                      </p>
+                    )}
                   </>
                 )}
               </div>

src/dualScreen.tsx

@@ -56,12 +56,28 @@ export type DualScreenCombatState = {
   targetGroup: 0 | 1 | 2
 }
 
+export type DualScreenWorkshopState = {
+  mode: 'class' | 'equipment' | 'crafting' | 'talents'
+  title: string
+  subtitle: string
+  summary?: string
+  items: Array<{
+    glyph?: string
+    title: string
+    meta?: string
+    detail?: string
+    status?: string
+  }>
+}
+
 type DualScreenMessage =
   | { type: 'combat-state'; state: DualScreenCombatState }
+  | { type: 'workshop-state'; state: DualScreenWorkshopState }
   | { type: 'companion-ready' }
   | { type: 'companion-heartbeat' }
   | { type: 'control-action'; action: InputAction }
   | { type: 'combat-ended' }
+  | { type: 'workshop-ended' }
 
 type DualScreenContextValue = {
   enabled: boolean
@@ -280,16 +296,64 @@ export function useDualScreenPublisher(
   }, [enabled, state])
 }
 
+export function useDualScreenWorkshopPublisher(
+  state: DualScreenWorkshopState | null,
+  enabled: boolean,
+) {
+  const stateRef = useRef(state)
+  useEffect(() => {
+    stateRef.current = state
+  }, [state])
+
+  useEffect(() => {
+    if (!enabled || !state) return
+    const channel = createChannel()
+    if (!channel) return
+    const publish = () => {
+      if (stateRef.current) {
+        channel.postMessage({
+          type: 'workshop-state',
+          state: stateRef.current,
+        } satisfies DualScreenMessage)
+      }
+    }
+    channel.onmessage = (event: MessageEvent<DualScreenMessage>) => {
+      if (event.data.type === 'companion-ready') publish()
+    }
+    publish()
+    return () => {
+      channel.postMessage({ type: 'workshop-ended' } satisfies DualScreenMessage)
+      channel.close()
+    }
+  }, [enabled, state])
+
+  useEffect(() => {
+    if (!enabled || !state) return
+    const channel = createChannel()
+    channel?.postMessage({ type: 'workshop-state', state } satisfies DualScreenMessage)
+    channel?.close()
+  }, [enabled, state])
+}
+
 export function DualScreenBottomDisplay() {
   const [state, setState] = useState<DualScreenCombatState | null>(loadRecentSnapshot)
+  const [workshopState, setWorkshopState] = useState<DualScreenWorkshopState | null>(null)
 
   useEffect(() => {
     const channel = createChannel()
     if (!channel) return
     const announce = () => channel.postMessage({ type: 'companion-ready' } satisfies DualScreenMessage)
     channel.onmessage = (event: MessageEvent<DualScreenMessage>) => {
-      if (event.data.type === 'combat-state') setState(event.data.state)
+      if (event.data.type === 'combat-state') {
+        setState(event.data.state)
+        setWorkshopState(null)
+      }
+      if (event.data.type === 'workshop-state') {
+        setWorkshopState(event.data.state)
+        setState(null)
+      }
       if (event.data.type === 'combat-ended') setState(null)
+      if (event.data.type === 'workshop-ended') setWorkshopState(null)
     }
     announce()
     const timer = window.setInterval(() => {
@@ -307,6 +371,40 @@ export function DualScreenBottomDisplay() {
     channel?.close()
   }
 
+  if (!state && workshopState) {
+    return (
+      <main className="dual-bottom-display workshop-bottom-display">
+        <header className="dual-controls-header">
+          <div>
+            <p className="eyebrow">{workshopState.mode}</p>
+            <h1>{workshopState.title}</h1>
+          </div>
+          <div className="dual-controls-progress">
+            <span>{workshopState.subtitle}</span>
+          </div>
+        </header>
+        {workshopState.summary && (
+          <section className="workshop-bottom-summary">
+            {workshopState.summary}
+          </section>
+        )}
+        <section className="workshop-bottom-grid">
+          {workshopState.items.map((item, index) => (
+            <article key={`${item.title}-${index}`}>
+              {item.glyph && <span>{item.glyph}</span>}
+              <div>
+                <strong>{item.title}</strong>
+                {item.meta && <small>{item.meta}</small>}
+                {item.detail && <p>{item.detail}</p>}
+              </div>
+              {item.status && <i>{item.status}</i>}
+            </article>
+          ))}
+        </section>
+      </main>
+    )
+  }
+
   if (!state) {
     return (
       <main className="dual-bottom-display dual-bottom-waiting">
@@ -475,6 +573,7 @@ export function DualScreenTopCombat({
             return (
               <button
                 className={`dual-top-member ${state.selectedId === member.id ? 'selected' : ''} ${member.health <= 0 ? 'dead' : ''}`}
+                data-party-member-id={member.id}
                 key={member.id}
                 onClick={() => onSelectTarget(member.id)}
                 type="button"

src/gameRepository.ts

@@ -36,6 +36,8 @@ export interface GameRepository {
     options?: {
       bossesCleared?: number
       experienceMode?: 'default' | 'pvp-boss-quarter-level'
+      lootSourceEncounterId?: number
+      roguelikeStage?: number
     },
   ): Promise<DungeonReward>
   allocateTalent(talentId: number): Promise<CharacterProfile>
@@ -44,6 +46,7 @@ export interface GameRepository {
   discardExtraItem(itemId: number): Promise<CharacterProfile>
   breakdownItem(itemId: number): Promise<CharacterProfile>
   craftItem(recipeId: number): Promise<CharacterProfile>
+  upgradeItem(itemId: number): Promise<CharacterProfile>
   rollEncounterLoot(
     encounterId: number,
     difficultyId: number,
@@ -97,6 +100,7 @@ type LocalSaveStore = {
 const modeKey = 'chronicle.repositoryMode'
 const offlineSaveKey = 'chronicle.offlineSave.v1'
 const onlineCacheKey = 'chronicle.onlineCache.v1'
+const authTokenKey = 'chronicle.authToken.v1'
 const offlineAccount = { id: -1, username: 'Offline' }
 
 function clone<T>(value: T): T {
@@ -381,15 +385,14 @@ function scaledPvpBossExperience(
 type ComponentTemplate = { id: number; slug: string; name: string; itemLevel: number; glyph: string; description: string }
 const COMPONENT_ITEMS: Record<number, ComponentTemplate> = {
   1: { id: 600, slug: 'minor-component', name: 'Minor Component', itemLevel: 1, glyph: '◆', description: 'A basic crafting component.' },
-  5: { id: 601, slug: 'basic-component', name: 'Basic Component', itemLevel: 5, glyph: '◇', description: 'A standard crafting component.' },
   10: { id: 602, slug: 'refined-component', name: 'Refined Component', itemLevel: 10, glyph: '◈', description: 'A refined crafting component.' },
-  15: { id: 603, slug: 'advanced-component', name: 'Advanced Component', itemLevel: 15, glyph: '◉', description: 'An advanced crafting component.' },
   20: { id: 604, slug: 'superior-component', name: 'Superior Component', itemLevel: 20, glyph: '◎', description: 'A superior crafting component.' },
   25: { id: 605, slug: 'primal-component', name: 'Primal Component', itemLevel: 25, glyph: '✦', description: 'A primal crafting component.' },
 }
 
 type WindowWithApiBase = Window & {
   CAPACITOR_API_BASE_URL?: string
+  CAPACITOR_AUTH_API_BASE_URL?: string
 }
 
 function componentForItemLevel(itemLevel: number): ComponentTemplate | undefined {
@@ -401,13 +404,6 @@ function componentForItemLevel(itemLevel: number): ComponentTemplate | undefined
   return COMPONENT_ITEMS[best]
 }
 
-function componentDropQuantity(itemLevel: number) {
-  const tier = Math.max(0, Math.floor((itemLevel - 5) / 5))
-  const secondChance = Math.min(0.85, 0.35 + tier * 0.12)
-  const thirdChance = Math.min(0.6, 0.1 + tier * 0.1)
-  return 1 + (Math.random() < secondChance ? 1 : 0) + (Math.random() < thirdChance ? 1 : 0)
-}
-
 function mergeProfileIntoSave(profile: CharacterProfile, existingSave?: OfflineSave): OfflineSave {
   const characters = clone(existingSave?.characters ?? {})
   for (const gameClass of profile.classes) {
@@ -452,25 +448,107 @@ function rollWeightedLootEntry<T extends { dropWeight: number }>(entries: T[]):
   return entries[entries.length - 1]
 }
 
-function getApiBaseUrl(): string {
+function coinDropQuantity() {
+  const roll = Math.random()
+  if (roll < 0.15) return 3
+  if (roll < 0.5) return 2
+  return 1
+}
+
+function roguelikeCoinItemLevel(stage: number) {
+  return Math.min(25, 5 + Math.max(0, Math.floor(stage / 5)) * 5)
+}
+
+function awardRoguelikeCoin(
+  profile: CharacterProfile,
+  sourceEncounterId: number | undefined,
+  stage: number | undefined,
+): DungeonReward['bonusItem'] {
+  if (!sourceEncounterId || !stage) return null
+  const targetItemLevel = roguelikeCoinItemLevel(stage)
+  const sourceEncounter = profile.dungeons
+    .flatMap((dungeon) => dungeon.encounters)
+    .find((encounter) => encounter.id === sourceEncounterId)
+  const coin = sourceEncounter?.lootTables
+    .filter((entry) => entry.itemLevel === targetItemLevel)
+    .sort((left, right) => left.difficultyId - right.difficultyId)[0]
+  if (!coin) return null
+  const {
+    encounterId: _encounterId,
+    difficultyId: _difficultyId,
+    dropWeight: _dropWeight,
+    dropChance: _dropChance,
+    ...coinItem
+  } = coin
+  void _encounterId
+  void _difficultyId
+  void _dropWeight
+  void _dropChance
+  const quantity = coinDropQuantity()
+  const added = addInventoryItem(profile.inventory, {
+    ...coinItem,
+    slot: coinItem.slot as EquipmentSlot,
+    rarity: coinItem.rarity as Item['rarity'],
+  }, quantity)
+  return {
+    ...coinItem,
+    quantity,
+    duplicate: added.duplicate,
+    quantityAfter: added.quantityAfter,
+  }
+}
+
+function readAuthToken(): string {
+  return localStorage.getItem(authTokenKey) ?? ''
+}
+
+function writeAuthToken(token: string) {
+  localStorage.setItem(authTokenKey, token)
+}
+
+function clearAuthToken() {
+  localStorage.removeItem(authTokenKey)
+}
+
+function configuredBaseUrl(value: string | undefined): string {
+  return value ? value.replace(/\/+$/, '') : ''
+}
+
+function getApiBaseUrl(path: string): string {
   const browserWindow = typeof window === 'undefined'
     ? undefined
     : window as WindowWithApiBase
+  if (path.startsWith('/api/auth/')) {
+    if (browserWindow?.CAPACITOR_AUTH_API_BASE_URL) {
+      return configuredBaseUrl(browserWindow.CAPACITOR_AUTH_API_BASE_URL)
+    }
+    if (typeof import.meta !== 'undefined' && import.meta.env?.VITE_AUTH_API_BASE_URL) {
+      return configuredBaseUrl(import.meta.env.VITE_AUTH_API_BASE_URL)
+    }
+  }
   if (browserWindow?.CAPACITOR_API_BASE_URL) {
-    return browserWindow.CAPACITOR_API_BASE_URL
+    return configuredBaseUrl(browserWindow.CAPACITOR_API_BASE_URL)
   }
   if (typeof import.meta !== 'undefined' && import.meta.env?.VITE_API_BASE_URL) {
-    return import.meta.env.VITE_API_BASE_URL
+    return configuredBaseUrl(import.meta.env.VITE_API_BASE_URL)
   }
   return ''
 }
 
 async function requestJson<T>(path: string, init?: RequestInit): Promise<T> {
-  const baseUrl = getApiBaseUrl()
+  const baseUrl = getApiBaseUrl(path)
   const url = baseUrl ? `${baseUrl}${path}` : path
+  const headers = new Headers(init?.headers)
+  const token = readAuthToken()
+  if (token && !headers.has('Authorization')) {
+    headers.set('Authorization', `Bearer ${token}`)
+  }
   let response: Response
   try {
-    response = await fetch(url, init)
+    response = await fetch(url, {
+      ...init,
+      headers,
+    })
   } catch (reason) {
     const networkError = new Error('Unable to reach the game server.') as NetworkError
     networkError.network = true
@@ -525,8 +603,18 @@ async function pushServerSyncSave(save: OfflineSave): Promise<{ profile: Charact
 }
 
 async function finalizeOnlineSession(session: AuthSession): Promise<AuthSession> {
-  if (!session.account || !session.profile) return session
   const cache = readOnlineCache()
+  if (session.token) writeAuthToken(session.token)
+  if (!session.account || !session.profile) {
+    if (session.account && cache?.account.id === session.account.id) {
+      return {
+        account: session.account,
+        profile: buildProfile(cache.save),
+        token: session.token,
+      }
+    }
+    return session
+  }
   if (cache?.account.id === session.account.id && cache.dirty) {
     writeOnlineCache({
       ...cache,
@@ -535,6 +623,7 @@ async function finalizeOnlineSession(session: AuthSession): Promise<AuthSession>
     return {
       account: session.account,
       profile: buildProfile(cache.save),
+      token: session.token,
     }
   }
   try {
@@ -611,6 +700,7 @@ const serverRepository: GameRepository = {
     } catch (reason) {
       if (!isNetworkError(reason)) throw reason
     }
+    clearAuthToken()
     clearOnlineCache()
     writeMode('online')
   },
@@ -657,6 +747,8 @@ const serverRepository: GameRepository = {
     cachedOnlineLocalRepository.breakdownItem(itemId),
   craftItem: (recipeId) =>
     cachedOnlineLocalRepository.craftItem(recipeId),
+  upgradeItem: (itemId) =>
+    cachedOnlineLocalRepository.upgradeItem(itemId),
   rollEncounterLoot: (encounterId, difficultyId, runToken) =>
     cachedOnlineLocalRepository.rollEncounterLoot(encounterId, difficultyId, runToken),
 }
@@ -666,8 +758,7 @@ function emptyCharacterData(classId: number): CharacterData {
   const gc = static_.classes.find((c) => c.id === classId)!
   const talentRanks: Record<string, number> = {}
   for (const t of gc.talents) talentRanks[String(t.id)] = 0
-  const starterItemIds = [100, 101, 102, 103, 104, 105, 106, 107, 108, 109]
+  const inventory: Item[] = []
-  const inventory: Item[] = static_.inventory.filter((i) => starterItemIds.includes(i.id)).map((i) => ({ ...i }))
   const startingAbilitySlots: Array<number | null> = gc.spells
     .filter((s) => s.unlockLevel === 1)
     .slice(0, 5)
@@ -827,7 +918,7 @@ function createLocalRepository(store: LocalSaveStore): GameRepository {
           })
         }
         cd.inventory = profile.inventory
-        bonusItem = { ...selected, duplicate, quantityAfter }
+        bonusItem = { ...selected, quantity: 1, duplicate, quantityAfter }
       }
     }
 
@@ -914,6 +1005,12 @@ function createLocalRepository(store: LocalSaveStore): GameRepository {
       profile.maxTalentPoints,
       cd.talentPoints + levelsGained,
     )
+    const bonusItem = awardRoguelikeCoin(
+      profile,
+      options?.lootSourceEncounterId,
+      options?.roguelikeStage,
+    )
+    cd.inventory = profile.inventory
 
       store.writeSave(save)
     const updatedProfile = buildProfile(save)
@@ -931,7 +1028,7 @@ function createLocalRepository(store: LocalSaveStore): GameRepository {
       durationSeconds,
       averageItemLevel: updatedProfile.gearStats.averageItemLevel,
       unlockedAbilities,
-      bonusItem: null,
+      bonusItem,
       profile: updatedProfile,
     }
     },
@@ -1064,6 +1161,12 @@ function createLocalRepository(store: LocalSaveStore): GameRepository {
     const profile = buildProfile(save)
     const recipe = profile.craftingRecipes.find((candidate) => candidate.id === recipeId)
     if (!recipe) throw new Error('That crafting recipe does not exist.')
+    const requiresUpgrade = profile.craftingRecipes.some((candidate) =>
+      candidate.sourceEncounterId === recipe.sourceEncounterId
+      && candidate.item.slot === recipe.item.slot
+      && candidate.item.itemLevel < recipe.item.itemLevel,
+    )
+    if (requiresUpgrade) throw new Error('Upgrade the previous item tier instead.')
     const missing = recipe.components.find((component) => component.owned < component.quantity)
     if (missing) {
       throw new Error(`Need ${missing.quantity} ${missing.item.name} to craft this item.`)
@@ -1083,6 +1186,53 @@ function createLocalRepository(store: LocalSaveStore): GameRepository {
       store.writeSave(save)
       return buildProfile(save)
     },
+    async upgradeItem(itemId) {
+      const save = requireStoredSave(store)
+    const profile = buildProfile(save)
+    const item = profile.inventory.find((candidate) => candidate.id === itemId)
+    if (!item) throw new Error('That item is not in the character inventory.')
+    if (item.slot === 'component') throw new Error('Components cannot be upgraded.')
+    const currentRecipe = profile.craftingRecipes.find((recipe) => recipe.item.id === item.id)
+    const targetRecipe = currentRecipe
+      ? profile.craftingRecipes
+        .filter((recipe) =>
+          recipe.sourceEncounterId === currentRecipe.sourceEncounterId
+          && recipe.item.slot === item.slot
+          && recipe.item.itemLevel > item.itemLevel,
+        )
+        .sort((left, right) => left.item.itemLevel - right.item.itemLevel)[0]
+      : null
+    if (!targetRecipe) throw new Error('No upgrade is available for this item.')
+    const missing = targetRecipe.components.find((component) => component.owned < component.quantity)
+    if (missing) {
+      throw new Error(`Need ${missing.quantity} ${missing.item.name} to upgrade this item.`)
+    }
+
+    for (const component of targetRecipe.components) {
+      const owned = profile.inventory.find((candidate) => candidate.id === component.item.id)
+      if (!owned) throw new Error(`Need ${component.quantity} ${component.item.name} to upgrade this item.`)
+      owned.quantity -= component.quantity
+    }
+    const wasEquipped = item.equipped
+    item.quantity -= 1
+    item.equipped = false
+    for (let index = profile.inventory.length - 1; index >= 0; index -= 1) {
+      if (profile.inventory[index].quantity <= 0) profile.inventory.splice(index, 1)
+    }
+    if (wasEquipped) {
+      for (const candidate of profile.inventory) {
+        if (candidate.slot === targetRecipe.item.slot) candidate.equipped = false
+      }
+    }
+    addInventoryItem(profile.inventory, targetRecipe.item, 1)
+    if (wasEquipped) {
+      const upgraded = profile.inventory.find((candidate) => candidate.id === targetRecipe.item.id)
+      if (upgraded) upgraded.equipped = true
+    }
+    save.characters[save.activeClassId].inventory = profile.inventory
+      store.writeSave(save)
+      return buildProfile(save)
+    },
     async rollEncounterLoot(encounterId, difficultyId, runToken) {
     if (runToken.length < 8 || runToken.length > 100) {
       throw new Error('A valid dungeon run token is required.')
@@ -1108,17 +1258,11 @@ function createLocalRepository(store: LocalSaveStore): GameRepository {
     const items: LootRoll['items'] = []
 
     const selectedQuantities = new Map<number, { entry: typeof entries[number]; quantity: number }>()
-    const dungeon = profile.dungeons.find((candidate) =>
+    if (Math.random() < dropChance) {
-      candidate.encounters.some((dungeonEncounter) => dungeonEncounter.id === encounterId),
-    )
-    const lootChanceSlots = dungeon?.contentType === 'raid' ? 8 : 5
-    for (let index = 0; index < lootChanceSlots; index += 1) {
-      if (Math.random() >= dropChance) continue
       const selected = rollWeightedLootEntry(entries)
-      const current = selectedQuantities.get(selected.id)
       selectedQuantities.set(selected.id, {
         entry: selected,
-        quantity: (current?.quantity ?? 0) + componentDropQuantity(difficulty.droppedItemLevel),
+        quantity: coinDropQuantity(),
       })
     }
 
@@ -1211,6 +1355,7 @@ const cachedOnlineRepository: GameRepository = {
     throw new Error('Account login requires online mode.')
   },
   async logout() {
+    clearAuthToken()
     clearOnlineCache()
     writeMode('online')
   },
@@ -1241,6 +1386,7 @@ const cachedOnlineRepository: GameRepository = {
   discardExtraItem: (itemId) => cachedOnlineLocalRepository.discardExtraItem(itemId),
   breakdownItem: (itemId) => cachedOnlineLocalRepository.breakdownItem(itemId),
   craftItem: (recipeId) => cachedOnlineLocalRepository.craftItem(recipeId),
+  upgradeItem: (itemId) => cachedOnlineLocalRepository.upgradeItem(itemId),
   rollEncounterLoot: (encounterId, difficultyId, runToken) =>
     cachedOnlineLocalRepository.rollEncounterLoot(encounterId, difficultyId, runToken),
 }

src/input.tsx

@@ -121,6 +121,7 @@ const STORAGE_KEY = 'ashen-halls-input-bindings-v1'
 const PREFERENCES_STORAGE_KEY = 'ashen-halls-input-preferences-v1'
 const GAME_ACTION_EVENT = 'ashen-halls-game-action'
 const NATIVE_CONTROLLER_EVENT = 'ashen-halls-native-controller'
+const COMBAT_TARGET_NAVIGATION_THROTTLE_MS = 220
 
 type CaptureState = {
   device: InputDevice
@@ -446,7 +447,7 @@ export function InputProvider({ children }: { children: ReactNode }) {
     const combatActive = Boolean(document.querySelector('[data-combat-active="true"]'))
     if (combatActive && !uiOverlay && isCombatTargetAction(action)) {
       const now = performance.now()
-      if (now - lastCombatNavigationRef.current < 125) return
+      if (now - lastCombatNavigationRef.current < COMBAT_TARGET_NAVIGATION_THROTTLE_MS) return
       lastCombatNavigationRef.current = now
     }
 

src/profile.ts

@@ -59,7 +59,7 @@ export type Item = {
   slug: string
   name: string
   slot: EquipmentSlot
-  rarity: 'common' | 'uncommon' | 'rare' | 'epic'
+  rarity: 'common' | 'uncommon' | 'rare' | 'epic' | 'legendary'
   itemLevel: number
   healingPower: number
   maxResourceBonus: number
@@ -234,6 +234,7 @@ export type Account = {
 export type AuthSession = {
   account: Account | null
   profile: CharacterProfile | null
+  token?: string
 }
 
 export type BonusItem = {
@@ -247,6 +248,7 @@ export type BonusItem = {
   maxResourceBonus: number
   glyph: string
   description: string
+  quantity: number
   duplicate: boolean
   quantityAfter: number
 }
@@ -338,6 +340,8 @@ export async function completeRoguelike(
   options?: {
     bossesCleared?: number
     experienceMode?: 'default' | 'pvp-boss-quarter-level'
+    lootSourceEncounterId?: number
+    roguelikeStage?: number
   },
 ): Promise<DungeonReward> {
   return activeGameRepository().completeRoguelike(
@@ -374,6 +378,10 @@ export async function craftItem(recipeId: number): Promise<CharacterProfile> {
   return activeGameRepository().craftItem(recipeId)
 }
 
+export async function upgradeItem(itemId: number): Promise<CharacterProfile> {
+  return activeGameRepository().upgradeItem(itemId)
+}
+
 export async function rollEncounterLoot(
   encounterId: number,
   difficultyId: number,

src/pvpRoguelike.ts

@@ -12,6 +12,7 @@ export type CpuPvpLeaderboardEntry = {
 }
 
 const cpuLeaderboardKey = 'chronicle.pvpCpuLeaderboard.v1'
+const checkpointKey = 'chronicle.pvpRoguelikeCheckpoint.v1'
 
 export function randomCpuDifficulty(): CpuDifficulty {
   return (Math.floor(Math.random() * 5) + 1) as CpuDifficulty
@@ -44,3 +45,24 @@ export function recordCpuPvpLeaderboard(entry: CpuPvpLeaderboardEntry) {
     .slice(0, 30)
   localStorage.setItem(cpuLeaderboardKey, JSON.stringify(next))
 }
+
+function checkpointStorageKey(characterId: number, contentType: PvpContentType) {
+  return `${checkpointKey}:${characterId}:${contentType}`
+}
+
+export function loadPvpRoguelikeCheckpoint(characterId: number, contentType: PvpContentType) {
+  const value = Number(localStorage.getItem(checkpointStorageKey(characterId, contentType)) ?? 1)
+  return Number.isInteger(value) && value >= 5 ? value : 1
+}
+
+export function recordPvpRoguelikeCheckpoint(
+  characterId: number,
+  contentType: PvpContentType,
+  stage: number,
+) {
+  if (stage < 5 || stage % 5 !== 0) return loadPvpRoguelikeCheckpoint(characterId, contentType)
+  const current = loadPvpRoguelikeCheckpoint(characterId, contentType)
+  const next = Math.max(current, stage)
+  localStorage.setItem(checkpointStorageKey(characterId, contentType), String(next))
+  return next
+}

tsconfig.node.test.json

@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "es2023",
+    "lib": ["ES2023"],
+    "module": "esnext",
+    "types": ["node"],
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "files": ["vite.config.ts"]
+}