Android build v1.0.34

AGENTS.md

@@ -2,5 +2,8 @@
 
 - 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.
+- Test top-screen UI only against the main display viewport, and bottom-screen UI only against the secondary display viewport.
 - 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
-  persistent equipping
+- Nine equipment slots, empty starter inventory, craftable item-level 1 gear,
+  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
-  scaling, XP multipliers, and item-level reward bands
-- Encounter-specific weighted loot tables for every difficulty, with authored
-  drop chances, slot pools, and item-level 5 through 25 reward variants
+- Four playable SQLite-authored content tiers at item levels 1, 10, 20, and 25
+  with level gates, combat scaling, XP multipliers, and reward bands
+- Gear progression through item levels 1, 5, 10, 15, 20, and 25 with
+  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
-        versionName "1.0.21"
+        versionCode 53
+        versionName "1.0.34"
         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.'),
-  (2, 'veteran', 'Veteran', 10, 5, 1.35, 1.2, 1.5, 'Enemies deal more damage and drop stronger gear.'),
-  (3, 'champion', 'Champion', 15, 10, 1.7, 1.45, 2.2, 'Demanding encounters for developed characters.'),
-  (4, 'mythic', 'Mythic', 20, 15, 2.1, 1.75, 3.0, 'Endgame dungeon difficulty.'),
-  (5, 'ascendant', 'Ascendant', 25, 20, 2.6, 2.1, 4.0, 'The current pinnacle 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, 10, 1.45, 1.25, 2.0, 'A major step up that rewards refined gear components.'),
+  (3, 'champion', 'Champion', 15, 15, 1.7, 1.45, 2.2, 'Gear-only upgrade tier between Veteran and Mythic.'),
+  (4, 'mythic', 'Mythic', 20, 20, 2.25, 1.85, 3.5, 'Endgame dungeon 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 'mythic' THEN 15 WHEN 'ascendant' THEN 20 ELSE unlock_level END,
+    WHEN 'initiate' THEN 1 WHEN 'veteran' THEN 10 WHEN 'champion' THEN 15
+    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 'mythic' THEN 2.1 WHEN 'ascendant' THEN 2.6 ELSE health_multiplier END,
+    WHEN 'initiate' THEN 0.8 WHEN 'veteran' THEN 1.45 WHEN 'champion' THEN 1.7
+    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 'mythic' THEN 1.75 WHEN 'ascendant' THEN 2.1 ELSE damage_multiplier END,
+    WHEN 'initiate' THEN 0.8 WHEN 'veteran' THEN 1.25 WHEN 'champion' THEN 1.45
+    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 'mythic' THEN 3.0 WHEN 'ascendant' THEN 4.0 ELSE experience_multiplier END;
+    WHEN 'initiate' THEN 1.0 WHEN 'veteran' THEN 2.0 WHEN 'champion' THEN 2.2
+    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),
@@ -127,22 +134,22 @@ INSERT OR IGNORE INTO spells
 VALUES
   (1, 1, 'mend', 'Mend', 'direct_heal', 5, 0.5, 30, 1, '+', 'A fast, efficient single-target heal.'),
   (2, 1, 'renew', 'Renew', 'heal_over_time', 7, 0.5, 12, 1, '~', 'Heals now and continues healing over time.'),
-  (3, 1, 'radiance', 'Radiance', 'party_heal', 12, 8, 18, 1, '*', 'Restores health to every living party member.'),
+  (3, 1, 'radiance', 'Radiance', 'party_heal', 12, 8, 18, 1, '*', 'Restores health to up to 4 injured party members.'),
   (4, 1, 'sun-ward', 'Sun Ward', 'absorb', 8, 7, 36, 1, 'O', 'Places a damage-absorbing shield on your target.'),
   (5, 1, 'purify', 'Purify', 'cleanse', 5, 5, 10, 1, 'x', 'Removes a harmful effect and restores health.'),
-  (6, 1, 'dawn-burst', 'Dawn Burst', 'party_heal', 16, 12, 28, 5, 'D', 'A brilliant wave of healing for the entire party.'),
+  (6, 1, 'dawn-burst', 'Dawn Burst', 'party_heal', 16, 12, 28, 5, 'D', 'A brilliant wave of healing for up to 4 injured allies.'),
   (7, 1, 'guardian-light', 'Guardian Light', 'absorb', 13, 14, 55, 10, 'G', 'A powerful ward reserved for moments of extreme danger.'),
   (8, 1, 'second-sun', 'Second Sun', 'direct_heal', 20, 20, 85, 15, 'S', 'Calls down a delayed surge of restorative light.'),
-  (9, 1, 'daybreak', 'Daybreak', 'party_heal', 23, 30, 48, 20, 'A', 'Floods the party with the full strength of dawn.'),
+  (9, 1, 'daybreak', 'Daybreak', 'party_heal', 23, 30, 48, 20, 'A', 'Floods up to 4 injured allies with the full strength of dawn.'),
   (20, 2, 'verdant-touch', 'Verdant Touch', 'direct_heal', 5, 0.5, 28, 1, '+', 'A quick pulse of living energy.'),
   (21, 2, 'seed-of-life', 'Seed of Life', 'heal_over_time', 7, 0.5, 11, 1, 's', 'Plants a restorative seed that blooms over time.'),
-  (22, 2, 'wild-bloom', 'Wild Bloom', 'party_heal', 12, 8, 17, 1, '*', 'Restorative growth spreads through the party.'),
+  (22, 2, 'wild-bloom', 'Wild Bloom', 'party_heal', 12, 8, 17, 1, '*', 'Restorative growth spreads to up to 4 injured allies.'),
   (23, 2, 'barkskin', 'Barkskin', 'absorb', 8, 7, 34, 1, 'B', 'Wraps an ally in protective living bark.'),
   (24, 2, 'purging-sap', 'Purging Sap', 'cleanse', 5, 5, 10, 1, 'p', 'Draws a harmful effect out through enchanted sap.'),
   (25, 2, 'ancient-grove', 'Ancient Grove', 'party_heal', 17, 12, 31, 5, 'T', 'Briefly summons the shelter of an ancient grove.'),
   (30, 3, 'etched-mend', 'Etched Mend', 'direct_heal', 5, 0.5, 29, 1, '+', 'Completes a simple rune of restoration.'),
   (31, 3, 'echo-rune', 'Echo Rune', 'heal_over_time', 7, 0.5, 12, 1, 'e', 'Repeats a restorative rune over several moments.'),
-  (32, 3, 'concordance', 'Concordance', 'party_heal', 12, 8, 18, 1, '*', 'Links the party through a shared healing pattern.'),
+  (32, 3, 'concordance', 'Concordance', 'party_heal', 12, 8, 18, 1, '*', 'Links up to 4 injured allies through a shared healing pattern.'),
   (33, 3, 'aegis-script', 'Aegis Script', 'absorb', 8, 7, 35, 1, 'O', 'Writes a temporary barrier around an ally.'),
   (34, 3, 'unravel', 'Unravel', 'cleanse', 5, 5, 10, 1, 'u', 'Unravels a hostile magical pattern.'),
   (35, 3, 'grand-design', 'Grand Design', 'party_heal', 16, 12, 30, 5, 'R', 'Activates a prepared network of restorative runes.');
@@ -184,6 +191,76 @@ UPDATE spells SET unlock_level = 10 WHERE slug = 'guardian-light';
 UPDATE spells SET unlock_level = 15 WHERE slug = 'second-sun';
 UPDATE spells SET unlock_level = 20 WHERE slug = 'daybreak';
 
+UPDATE spells SET
+  name = 'Verdant Touch',
+  spell_type = 'direct_hot',
+  resource_cost = 5,
+  cooldown_seconds = 0.5,
+  power = 20,
+  glyph = '+',
+  description = 'A weaker direct heal that also plants a stacking heal over time.'
+WHERE slug = 'verdant-touch';
+
+UPDATE spells SET
+  name = 'Wild Growth',
+  spell_type = 'party_hot',
+  resource_cost = 12,
+  cooldown_seconds = 8,
+  power = 14,
+  glyph = '*',
+  description = 'Applies a stacking heal over time to up to 4 injured allies.'
+WHERE slug = 'wild-bloom';
+
+UPDATE spells SET
+  name = 'Barkskin',
+  spell_type = 'damage_reduction',
+  resource_cost = 10,
+  cooldown_seconds = 14,
+  power = 0,
+  glyph = 'B',
+  description = 'Reduces the target ally''s damage taken by 50% for 8 seconds.'
+WHERE slug = 'barkskin';
+
+UPDATE spells SET
+  name = 'Ancient Grove',
+  spell_type = 'party_hot',
+  resource_cost = 17,
+  cooldown_seconds = 12,
+  power = 24,
+  glyph = 'T',
+  description = 'Applies a stronger stacking heal over time to up to 4 injured allies.'
+WHERE slug = 'ancient-grove';
+
+UPDATE spells SET
+  name = 'Mending Rune',
+  spell_type = 'bounce_heal',
+  resource_cost = 7,
+  cooldown_seconds = 0.5,
+  power = 18,
+  glyph = 'e',
+  description = 'Places a rune that heals when the ally takes damage, then jumps 4 times.'
+WHERE slug = 'echo-rune';
+
+UPDATE spells SET
+  name = 'Concordance',
+  spell_type = 'party_absorb',
+  resource_cost = 12,
+  cooldown_seconds = 8,
+  power = 28,
+  glyph = '*',
+  description = 'Shields up to 4 injured allies through a shared barrier pattern.'
+WHERE slug = 'concordance';
+
+UPDATE spells SET
+  name = 'Grand Design',
+  spell_type = 'party_absorb',
+  resource_cost = 16,
+  cooldown_seconds = 12,
+  power = 42,
+  glyph = 'R',
+  description = 'Raises a stronger shared barrier around up to 4 injured allies.'
+WHERE slug = 'grand-design';
+
 INSERT OR IGNORE INTO items
   (id, slug, name, slot, rarity, item_level, healing_power, max_resource_bonus, glyph, description)
 VALUES
@@ -345,6 +422,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 +509,175 @@ 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 5 THEN 'Honed '
+        WHEN 10 THEN 'Green '
+        WHEN 15 THEN 'Blue '
+        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
@@ -630,19 +879,58 @@ VALUES
 
 UPDATE difficulties
 SET dropped_item_level = 10,
-    unlock_level = 5,
-    health_multiplier = 1.35,
-    damage_multiplier = 1.2,
-    experience_multiplier = 1.75,
+    unlock_level = 10,
+    health_multiplier = 1.45,
+    damage_multiplier = 1.25,
+    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.'),
-  (104, 'raid-mythic', 'Mythic Raid', 20, 15, 2.1, 1.75, 3.2, '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.');
+  (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, 20, 2.25, 1.85, 3.5, 'Mythic 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 +966,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 105 THEN 'Rathalos drops monster parts for item level 10 crafting.'
-      WHEN 108 THEN 'Gypceros 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 boss coins 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 +990,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 +1018,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 +1287,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 +1312,170 @@ 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, 5, 10, 15, 20, 25)
+);
+
+DELETE FROM crafting_recipes
+WHERE item_id IN (
+  SELECT id FROM items WHERE item_level NOT IN (1, 5, 10, 15, 20, 25)
+);
+
+UPDATE items
+SET rarity = CASE item_level
+    WHEN 1 THEN 'common'
+    WHEN 5 THEN 'uncommon'
+    WHEN 10 THEN 'uncommon'
+    WHEN 15 THEN 'rare'
+    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 5 THEN 'Honed '
+        WHEN 10 THEN 'Green '
+        WHEN 15 THEN 'Blue '
+        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="ed2db3fd54546e9658377d0551b3fc3961583f1d"
+
+VERSION="1.0.27"
+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

@@ -22,6 +22,7 @@ const bossImageContentTypes = {
 }
 const equipmentSlots = ['weapon', 'helmet', 'chest', 'gloves', 'boots', 'pants', 'ring', 'necklace', 'trinket']
 const componentSlot = 'component'
+const directCraftItemLevels = new Set([1, 10, 20, 25])
 const sessionCookieName = 'chronicle_session'
 const sessionLifetimeSeconds = 60 * 60 * 24 * 30
 const rateLimitBuckets = new Map()
@@ -33,6 +34,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
@@ -207,6 +233,25 @@ function consumeRateLimit(key, limit, windowMs) {
   }
 }
 
+function catchUpExperienceReward(database, accountId, characterId, baseReward, currentExperience, currentLevel) {
+  const targetLevel = database.prepare(`
+    SELECT COALESCE(MAX(level), 0) AS level
+    FROM characters
+    WHERE account_id = ?
+      AND id != ?
+  `).get(accountId, characterId).level
+  if (targetLevel <= currentLevel) return baseReward
+  const targetExperience = database.prepare(`
+    SELECT experience_required AS experienceRequired
+    FROM level_progression
+    WHERE level = ?
+  `).get(targetLevel)?.experienceRequired ?? currentExperience
+  const gap = Math.max(0, targetExperience - currentExperience)
+  if (gap <= 0) return baseReward
+  const doubledBase = Math.min(baseReward, Math.ceil(gap / 2))
+  return doubledBase * 2 + (baseReward - doubledBase)
+}
+
 function normalizeUsername(value) {
   const username = String(value ?? '').trim()
   if (!/^[A-Za-z0-9_]{3,20}$/.test(username)) {
@@ -260,6 +305,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 +340,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 +383,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 +1317,57 @@ function formatLootRoll(database, context, record, dropChance) {
   }
 }
 
-function componentDropQuantity(droppedItemLevel) {
-  const tier = Math.max(0, Math.floor((droppedItemLevel - 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 coinDropQuantity() {
+  const roll = Math.random()
+  if (roll < 0.15) return 3
+  if (roll < 0.5) return 2
+  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 +1470,11 @@ function rollEncounterLoot(database, characterId, encounterId, difficultyId, run
     }
 
     const selectedQuantities = new Map()
-    const lootChanceSlots = context.contentType === 'raid' ? 8 : 5
-    for (let index = 0; index < lootChanceSlots; index += 1) {
-      if (Math.random() >= dropChance) continue
+    if (Math.random() < dropChance) {
       const selected = rollWeightedLootEntry(entries)
       selectedQuantities.set(
         selected.id,
-        (selectedQuantities.get(selected.id) ?? 0) + componentDropQuantity(context.droppedItemLevel),
+        coinDropQuantity(),
       )
     }
 
@@ -1612,11 +1705,17 @@ 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.')
+  if (!directCraftItemLevels.has(recipe.itemLevel)) {
+    throw new Error('Upgrade the previous item tier instead.')
+  }
 
   const components = database.prepare(`
     SELECT
@@ -1665,6 +1764,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
@@ -1840,12 +2037,21 @@ function completeDungeon(database, characterId, accountId, dungeonId, difficulty
   const completedPart = Math.min(Math.max(Number(runMetrics?.completedPart) || 1, 1), 3)
   const startPart = Math.min(Math.max(Number(runMetrics?.startPart) || 1, 1), 3)
   const completedParts = completedPart - startPart + 1
+  const rewardMultiplier = runMetrics?.hardMode ? 2 : 1
   const rawPartDurations = runMetrics?.partDurationSeconds
   const partDurationSeconds = Array.isArray(rawPartDurations) && rawPartDurations.length === 3
     ? rawPartDurations.map(Number)
     : null
-  const experienceReward = Math.round(
-    dungeon.experienceReward * dungeon.experienceMultiplier * completedPart,
+  const baseExperienceReward = Math.round(
+    dungeon.experienceReward * dungeon.experienceMultiplier * completedPart * rewardMultiplier,
+  )
+  const experienceReward = catchUpExperienceReward(
+    database,
+    accountId,
+    characterId,
+    baseExperienceReward,
+    character.experience,
+    character.level,
   )
   const newExperience = Math.min(character.experience + experienceReward, maxExperience)
   const newLevel = database.prepare(`
@@ -1943,17 +2149,18 @@ function completeDungeon(database, characterId, accountId, dungeonId, difficulty
     `).all(dungeonId, dungeon.completionItemLevel ?? dungeon.droppedItemLevel + 3)
     if (bonusItems.length > 0) {
       bonusItem = bonusItems[0]
+      const rewardQuantity = rewardMultiplier
       const previousQuantity = database.prepare(`
         SELECT quantity FROM character_inventory
         WHERE character_id = ? AND item_id = ?
       `).get(characterId, bonusItem.id)?.quantity ?? 0
       database.prepare(`
         INSERT INTO character_inventory (character_id, item_id, quantity, equipped)
-        VALUES (?, ?, 1, 0)
+        VALUES (?, ?, ?, 0)
         ON CONFLICT(character_id, item_id)
-        DO UPDATE SET quantity = quantity + 1
-      `).run(characterId, bonusItem.id)
-      bonusItem = { ...bonusItem, duplicate: previousQuantity > 0, quantityAfter: previousQuantity + 1 }
+        DO UPDATE SET quantity = quantity + ?
+      `).run(characterId, bonusItem.id, rewardQuantity, rewardQuantity)
+      bonusItem = { ...bonusItem, quantity: rewardQuantity, duplicate: previousQuantity > 0, quantityAfter: previousQuantity + rewardQuantity }
     }
   }
 
@@ -2050,6 +2257,12 @@ function completeRoguelike(database, characterId, accountId, runMetrics) {
   let newExperience = character.experience
   let newLevel = character.level
   if (experienceMode === 'pvp-boss-quarter-level') {
+    const catchUpTargetLevel = database.prepare(`
+      SELECT COALESCE(MAX(level), 0) AS level
+      FROM characters
+      WHERE account_id = ?
+        AND id != ?
+    `).get(accountId, characterId).level
     for (let bossIndex = 0; bossIndex < bossesCleared && newExperience < maxExperience; bossIndex += 1) {
       const currentLevelFloor = database.prepare(`
         SELECT experience_required AS experienceRequired
@@ -2064,7 +2277,8 @@ function completeRoguelike(database, characterId, accountId, runMetrics) {
           WHERE level = ?
         `).get(newLevel + 1).experienceRequired
       const levelBand = Math.max(1, nextLevelExperience - currentLevelFloor)
-      newExperience = Math.min(maxExperience, newExperience + Math.round(levelBand * 0.25))
+      const rewardRate = catchUpTargetLevel > newLevel ? 0.5 : 0.25
+      newExperience = Math.min(maxExperience, newExperience + Math.round(levelBand * rewardRate))
       newLevel = database.prepare(`
         SELECT MAX(level) AS level
         FROM level_progression
@@ -2072,9 +2286,17 @@ function completeRoguelike(database, characterId, accountId, runMetrics) {
       `).get(newExperience).level
     }
   } else {
-    const experienceReward = Math.round(
+    const baseExperienceReward = Math.round(
       dungeon.experienceReward * dungeon.experienceMultiplier * (encountersCleared / 3),
     )
+    const experienceReward = catchUpExperienceReward(
+      database,
+      accountId,
+      characterId,
+      baseExperienceReward,
+      character.experience,
+      character.level,
+    )
     newExperience = Math.min(character.experience + experienceReward, maxExperience)
     newLevel = database.prepare(`
       SELECT MAX(level) AS level
@@ -2108,6 +2330,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 +2350,7 @@ function completeRoguelike(database, characterId, accountId, runMetrics) {
     durationSeconds,
     averageItemLevel,
     unlockedAbilities,
-    bonusItem: null,
+    bonusItem,
     profile: getProfile(database, characterId, accountId),
   }
 }
@@ -2211,12 +2439,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 +2582,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') {
-      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) },
-      )
+    if (await handleAuthApiRoute(database, request, response)) {
       return
     }
 
@@ -2401,6 +2694,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

@@ -88,6 +88,7 @@ function App() {
   const [roguelikeAbilityLabelMode, setRoguelikeAbilityLabelMode] = useState<RoguelikeAbilityLabelMode>('ability')
   const [pvpContentType, setPvpContentType] = useState<PvpContentType>('dungeon')
   const [selectedPart, setSelectedPart] = useState(1)
+  const [selectedHardMode, setSelectedHardMode] = useState(false)
   const [combatContentId, setCombatContentId] = useState(1)
   const [leaderboardCategory, setLeaderboardCategory] = useState<'part_1' | 'part_2' | 'part_3' | 'full_run'>('part_1')
   const [showLoot, setShowLoot] = useState(false)
@@ -131,6 +132,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 +156,9 @@ function App() {
     setScreen('menu')
     setError('')
     setServerMessage('')
+    window.requestAnimationFrame(() => {
+      focusFirstControl()
+    })
   }
 
   async function signOut() {
@@ -225,6 +236,7 @@ function App() {
       <CombatScreen
         difficulty={difficulty}
         dungeon={dungeon}
+        hardMode={selectedHardMode && combatContentId > 0}
         profile={profile}
         roguelikeMode={combatContentId < 0 ? roguelikeKind : undefined}
         roguelikeUpgradeTiming={combatContentId < 0 ? roguelikeUpgradeTiming : undefined}
@@ -272,10 +284,46 @@ 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 startPveRoguelike = () => {
+    const baseDungeon = dungeonOptions[0]
+    const baseRaid = raidOptions[0]
+    if (roguelikeKind === 'raid') {
+      setCombatContentId(-2)
+      setSelectedDifficultyId(baseRaid?.difficulties[0]?.id ?? 101)
+    } else {
+      setCombatContentId(-1)
+      setSelectedDifficultyId(baseDungeon?.difficulties[0]?.id ?? 1)
+    }
+    setSelectedPart(1)
+    setSelectedHardMode(false)
+    setScreen('combat')
+  }
+  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'
@@ -283,11 +331,10 @@ function App() {
     : profile.completedDungeonParts
   const sectionName = activity.contentType === 'raid' ? 'Phase' : 'Part'
   const parts = [
-    { part: 1, name: `${sectionName} 1`, encounterCount: 3, unlocked: true },
-    { part: 2, name: `${sectionName} 2`, encounterCount: 3, unlocked: completedSections >= 1 },
-    { part: 3, name: `${sectionName} 3`, encounterCount: 3, unlocked: completedSections >= 2 },
+    { part: 1, name: `${sectionName} 1`, encounterCount: 3, unlocked: true, hardUnlocked: completedSections >= 1 },
+    { part: 2, name: `${sectionName} 2`, encounterCount: 3, unlocked: completedSections >= 1, hardUnlocked: completedSections >= 2 },
+    { part: 3, name: `${sectionName} 3`, encounterCount: 3, unlocked: completedSections >= 2, hardUnlocked: completedSections >= 3 },
   ]
-  const lootChanceSlots = activity.contentType === 'raid' ? 8 : 5
   const cloudSync = getCloudSyncStatus()
   const canShowCloudSync = account.id !== -1 && cloudSync.available
   const lootPreviewEncounters = [...activity.encounters]
@@ -297,7 +344,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"
@@ -394,6 +441,28 @@ function App() {
           </div>
           {roguelikeVariant === 'pve' && (
             <>
+              <div className="roguelike-option-panel">
+                <div>
+                  <p className="eyebrow">Run Type</p>
+                  <h2>PvE Roguelike</h2>
+                </div>
+                <div className="roguelike-timing-row">
+                  <button
+                    className={`text-button ${roguelikeKind === 'dungeon' ? 'active' : ''}`}
+                    onClick={() => setRoguelikeKind('dungeon')}
+                    type="button"
+                  >
+                    Dungeon
+                  </button>
+                  <button
+                    className={`text-button ${roguelikeKind === 'raid' ? 'active' : ''}`}
+                    onClick={() => setRoguelikeKind('raid')}
+                    type="button"
+                  >
+                    Raid
+                  </button>
+                </div>
+              </div>
               <div className="roguelike-option-panel">
                 <div>
                   <p className="eyebrow">Upgrade Timing</p>
@@ -438,38 +507,22 @@ function App() {
                   </button>
                 </div>
               </div>
-          <div className="roguelike-mode-grid">
+              <div className="menu-card pvp-queue-panel">
+                <span>{roguelikeKind === 'raid' ? 'R' : 'D'}</span>
+                <div>
+                  <strong>{roguelikeKind === 'raid' ? 'Raid Roguelike' : 'Dungeon Roguelike'}</strong>
+                  <small>
+                    {roguelikeKind === 'raid'
+                      ? 'Ten-player party. Raid pools, lighter early scaling, and the same upgrade draft.'
+                      : 'Five-player party. Two random trash enemies and a boss with a lighter early ramp.'}
+                  </small>
+                </div>
                 <button
-              className="menu-card"
-              onClick={() => {
-                const baseDungeon = dungeonOptions[0]
-                setRoguelikeKind('dungeon')
-                setCombatContentId(-1)
-                setSelectedDifficultyId(baseDungeon.difficulties[0]?.id ?? 1)
-                setSelectedPart(1)
-                setScreen('combat')
-              }}
+                  className="text-button"
+                  onClick={startPveRoguelike}
                   type="button"
                 >
-              <span>D</span>
-              <strong>Dungeon Roguelike</strong>
-              <small>Five-player party. Two random trash enemies and a boss with a lighter early ramp.</small>
-            </button>
-            <button
-              className="menu-card"
-              onClick={() => {
-                const baseRaid = raidOptions[0]
-                setRoguelikeKind('raid')
-                setCombatContentId(-2)
-                setSelectedDifficultyId(baseRaid?.difficulties[0]?.id ?? 101)
-                setSelectedPart(1)
-                setScreen('combat')
-              }}
-              type="button"
-            >
-              <span>R</span>
-              <strong>Raid Roguelike</strong>
-              <small>Ten-player party. Raid pools, lighter early scaling, and the same upgrade draft.</small>
+                  Start Run
                 </button>
               </div>
             </>
@@ -555,94 +608,164 @@ 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>
-              <p className="eyebrow">{activity.locationName}</p>
+                <div className="run-summary-copy">
+                  <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 && (
-              <label className="activity-select">
-                <span>{activity.contentType === 'raid' ? 'Raid' : 'Dungeon'}</span>
-                <select
-                  value={activity.id}
-                  onChange={(event) => {
-                    const nextActivityId = Number(event.target.value)
-                    const nextActivity = activityOptions.find((candidate) => candidate.id === nextActivityId)
-                    if (screen === 'raids') setSelectedRaidId(nextActivityId)
-                    else setSelectedDungeonId(nextActivityId)
-                    if (nextActivity?.difficulties[0]) {
-                      setSelectedDifficultyId(nextActivity.difficulties[0].id)
+              </article>
+
+              <section className="run-setup-panel dungeon-choice-panel">
+                <div className="run-setup-heading">
+                  <div>
+                    <p className="eyebrow">Pick Run</p>
+                    <h2>{screen === 'raids' ? 'Raid' : 'Dungeon'}</h2>
+                  </div>
+                  <small>{selectedDifficulty.name} rewards iLvl {selectedDifficulty.droppedItemLevel} components.</small>
+                </div>
+                <div className="activity-card-grid dungeon-choice-grid">
+                  {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) => (
-                    <option key={candidate.id} value={candidate.id}>{candidate.name}</option>
-                  ))}
-                </select>
-              </label>
-            )}
-            <div className="part-buttons">
+                        <strong>iLvl {difficulty.droppedItemLevel}</strong>
+                        <span>{locked ? `Level ${difficulty.unlockLevel}` : difficulty.name}</span>
+                      </button>
+                    )
+                  })}
+                </div>
+              </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) => (
+                    <div className="part-start-row" key={p.part}>
                       <button
-                  key={p.part}
-                  className={`primary-button ${selectedPart === p.part ? 'selected-part' : ''} ${!p.unlocked ? 'locked' : ''}`}
+                        className={`primary-button ${selectedPart === p.part && !selectedHardMode ? 'selected-part' : ''} ${!p.unlocked ? 'locked' : ''}`}
                         disabled={difficultyLocked || !p.unlocked}
                         onClick={() => {
                           setSelectedPart(p.part)
+                          setSelectedHardMode(false)
                           setCombatContentId(activity.id)
+                          setSelectedDifficultyId(selectedDifficulty.id)
                           setScreen('combat')
                         }}
                         type="button"
                       >
                         {p.name}
                       </button>
+                      <button
+                        className={`primary-button hard-mode-button ${selectedPart === p.part && selectedHardMode ? 'selected-part' : ''} ${!p.hardUnlocked ? 'locked' : ''}`}
+                        disabled={difficultyLocked || !p.hardUnlocked}
+                        onClick={() => {
+                          setSelectedPart(p.part)
+                          setSelectedHardMode(true)
+                          setCombatContentId(activity.id)
+                          setSelectedDifficultyId(selectedDifficulty.id)
+                          setScreen('combat')
+                        }}
+                        type="button"
+                      >
+                        Hard
+                      </button>
+                    </div>
                   ))}
                 </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 +775,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 +806,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 +826,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 +928,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/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)
@@ -38,7 +40,7 @@ export function CustomizeScreen({ profile, onBack, onSaved }: Props) {
   function chooseClass(nextClass: GameClass) {
     const starterAbilities = nextClass.spells
       .filter((ability) => ability.unlockLevel <= profile.character.level)
-      .slice(0, 5)
+      .slice(0, 6)
       .map((ability) => ability.id)
     setClassId(nextClass.id)
     setSlots([...starterAbilities, ...Array(6 - starterAbilities.length).fill(null)])
@@ -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)
@@ -80,7 +105,7 @@ export function CustomizeScreen({ profile, onBack, onSaved }: Props) {
 
   return (
     <section className="content-screen customize-screen">
-      <div className="screen-heading">
+      <div className="screen-heading customize-heading">
         <div>
           <p className="eyebrow">Character Workshop</p>
           <h1>Customize Character</h1>
@@ -89,8 +114,10 @@ export function CustomizeScreen({ profile, onBack, onSaved }: Props) {
       </div>
 
       <div className="customize-tabs" role="tablist" aria-label="Customize character sections">
+        <button className="back-button customize-tab-back" onClick={onBack} type="button">Back</button>
         {([
           { key: 'equipment', label: 'Equipment' },
+          { key: 'crafting', label: 'Crafting' },
           { key: 'talents', label: 'Talents' },
           { key: 'class', label: 'Class' },
         ] as const).map((tab) => (
@@ -110,6 +137,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,29 @@ const SLOT_LABELS: Record<EquipmentSlot, string> = {
 }
 
 const EQUIPMENT_LIST_PAGE_SIZE = 3
-const CRAFTING_LIST_PAGE_SIZE = 6
+const CRAFTING_LIST_PAGE_SIZE = 3
+const CRAFTING_FILTER_SLOTS = (Object.keys(SLOT_LABELS) as EquipmentSlot[])
+  .filter((slot) => slot !== 'component')
+const DIRECT_CRAFT_ITEM_LEVELS = new Set([1, 10, 20, 25])
 
 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,19 +61,38 @@ 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('')
   const scrollRef = useRef<number>(0)
   const selectedItem = profile.inventory.find((item) => item.id === selectedItemId)
-  const firstRecipe = profile.craftingRecipes.find((recipe) => recipe.canCraft)
-    ?? profile.craftingRecipes[0]
+  const craftableRecipes = profile.craftingRecipes.filter((recipe) =>
+    DIRECT_CRAFT_ITEM_LEVELS.has(recipe.item.itemLevel),
+  )
+  const firstRecipe = craftableRecipes.find((recipe) => recipe.canCraft)
+    ?? craftableRecipes[0]
   const [selectedRecipeId, setSelectedRecipeId] = useState<number | null>(
     firstRecipe?.id ?? null,
   )
   const selectedRecipe = profile.craftingRecipes.find((recipe) => recipe.id === selectedRecipeId)
+  const selectedRecipeRequiresUpgrade = selectedRecipe
+    ? !DIRECT_CRAFT_ITEM_LEVELS.has(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
@@ -92,12 +126,14 @@ export function EquipmentScreen({ profile, onBack, onUpdated, embedded = false }
   const [slotFilter, setSlotFilter] = useState<EquipmentSlot | 'all'>('all')
   const [levelFilter, setLevelFilter] = useState<number | null>(null)
   const availableLevels = useMemo(
-    () => [...new Set(profile.craftingRecipes.map((r) => r.item.itemLevel))].sort((a, b) => b - a),
+    () => [...new Set(profile.craftingRecipes
+      .filter((r) => DIRECT_CRAFT_ITEM_LEVELS.has(r.item.itemLevel))
+      .map((r) => r.item.itemLevel))].sort((a, b) => b - a),
     [profile.craftingRecipes],
   )
   const filteredRecipes = useMemo(
     () => {
-      let result = [...profile.craftingRecipes]
+      let result = profile.craftingRecipes.filter((r) => DIRECT_CRAFT_ITEM_LEVELS.has(r.item.itemLevel))
       if (slotFilter !== 'all') result = result.filter((r) => r.item.slot === slotFilter)
       if (levelFilter !== null) result = result.filter((r) => r.item.itemLevel === levelFilter)
       result.sort((a, b) => b.item.itemLevel - a.item.itemLevel)
@@ -105,6 +141,19 @@ 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
+          && DIRECT_CRAFT_ITEM_LEVELS.has(recipe.item.itemLevel),
+        ).length,
+      ]),
+    ),
+    [profile.craftingRecipes],
+  )
   const recipePageCount = Math.max(
     1,
     Math.ceil(filteredRecipes.length / CRAFTING_LIST_PAGE_SIZE),
@@ -126,12 +175,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 +252,160 @@ 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',
+            }]),
+          ...(upgradeRecipe
+            ? [
+              {
+                glyph: upgradeRecipe.item.glyph,
+                title: `Upgrade to ${upgradeRecipe.item.name}`,
+                meta: `Item Level ${upgradeRecipe.item.itemLevel}`,
+                status: upgradeRecipe.canCraft ? 'Ready' : 'Missing materials',
+              },
+              ...upgradeRecipe.components.map((component) => ({
+                glyph: component.item.glyph,
+                title: component.item.name,
+                meta: `Required for upgrade`,
+                status: `${component.owned}/${component.quantity}`,
+              })),
+            ]
+            : []),
+        ],
+    }
+  }, [comparisonItem, equipmentTab, selectedItem, selectedRecipe, upgradeRecipe])
+
+  useDualScreenWorkshopPublisher(workshopState, dualScreenEnabled)
+
   const content = (
     <>
       {!embedded && (
@@ -215,6 +432,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 +449,7 @@ export function EquipmentScreen({ profile, onBack, onUpdated, embedded = false }
             Crafting
           </button>
         </nav>
+      )}
 
       {equipmentTab === 'equipment' ? (
         <>
@@ -239,9 +458,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 +471,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 +478,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 +577,81 @@ export function EquipmentScreen({ profile, onBack, onUpdated, embedded = false }
         <section className="crafting-panel">
           <EquipmentHeading
             eyebrow="Crafting"
-            title="Recipes"
-            detail={`${filteredRecipes.filter((recipe) => recipe.canCraft).length} ready`}
+            title="Workbench"
+            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.filter((recipe) => DIRECT_CRAFT_ITEM_LEVELS.has(recipe.item.itemLevel)).length}</span>
+                  </button>
+                  {CRAFTING_FILTER_SLOTS.map((slot) => (
+                    <button
+                      className={slotFilter === slot ? 'active' : ''}
+                      disabled={(slotRecipeCounts.get(slot) ?? 0) === 0}
+                      key={slot}
+                      onClick={() => {
+                        setSlotFilter(slot)
+                        setRecipePage(0)
+                      }}
+                      type="button"
+                    >
+                      <strong>{SLOT_LABELS[slot]}</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 +668,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 +684,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 +716,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 +761,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

@@ -1,5 +1,15 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
-import { INITIAL_PARTY, RAID_PARTY, type CombatLogEntry, type PartyMember, type Spell } from '../game'
+import {
+  INITIAL_PARTY,
+  RAID_PARTY,
+  DEFAULT_GROUP_HEAL_TARGETS,
+  groupHealTargets,
+  partyDamageOutput,
+  tankPressureTargets,
+  type CombatLogEntry,
+  type PartyMember,
+  type Spell,
+} from '../game'
 import { completeRoguelike, type DungeonReward } from '../profile'
 import type { Ability, CharacterProfile, DungeonEncounter } from '../profile'
 import type { GameMode } from '../gameRepository'
@@ -12,8 +22,10 @@ import {
   type DualScreenCombatState,
 } from '../dualScreen'
 import {
+  loadPvpRoguelikeCheckpoint,
   randomCpuDifficulty,
   recordCpuPvpLeaderboard,
+  recordPvpRoguelikeCheckpoint,
   type CpuDifficulty,
   type PvpContentType,
 } from '../pvpRoguelike'
@@ -29,9 +41,10 @@ type BossMechanic =
 
 type PvpEncounter = DungeonEncounter & {
   bossMechanics?: BossMechanic[]
+  sourceEncounterId?: number
 }
 
-type SlotKey = '1' | '2' | '3' | '4' | '5'
+type SlotKey = '1' | '2' | '3' | '4' | '5' | '6'
 type AbilityLabelMode = 'ability' | 'slot'
 
 type SelfBuffId =
@@ -75,6 +88,17 @@ type FloatingCombatText = {
   value: number
 }
 
+type PvpRunSummary = {
+  bossesKilled: number
+  experienceGained: number
+  previousLevel: number | null
+  newLevel: number | null
+  levelsGained: number
+  talentPointsGained: number
+  unlockedAbilities: DungeonReward['unlockedAbilities']
+  loot: Array<NonNullable<DungeonReward['bonusItem']>>
+}
+
 const BOSS_MECHANICS: BossMechanic[] = [
   'party-pulse',
   'searing-mark',
@@ -116,6 +140,19 @@ function formatEffectTime(ticks: number) {
   return Number.isInteger(seconds) ? `${seconds}s` : `${seconds.toFixed(1)}s`
 }
 
+function createEmptyPvpRunSummary(): PvpRunSummary {
+  return {
+    bossesKilled: 0,
+    experienceGained: 0,
+    previousLevel: null,
+    newLevel: null,
+    levelsGained: 0,
+    talentPointsGained: 0,
+    unlockedAbilities: [],
+    loot: [],
+  }
+}
+
 function buffStacks<T extends string>(items: T[], id: T) {
   return items.filter((item) => item === id).length
 }
@@ -127,7 +164,7 @@ function slotLabel(slot: SlotKey, spells: Spell[], labelMode: AbilityLabelMode)
 }
 
 function buildSelfBuffChoices(spells: Spell[], labelMode: AbilityLabelMode): Array<Choice<SelfBuffId>> {
-  const slotChoices = (['1', '2', '3', '4', '5'] as SlotKey[]).flatMap((slot) => {
+  const slotChoices = (['1', '2', '3', '4', '5', '6'] as SlotKey[]).flatMap((slot) => {
     const label = slotLabel(slot, spells, labelMode)
     return [
       {
@@ -156,7 +193,7 @@ function buildSelfBuffChoices(spells: Spell[], labelMode: AbilityLabelMode): Arr
 }
 
 function buildOpponentDebuffChoices(spells: Spell[], labelMode: AbilityLabelMode): Array<Choice<OpponentDebuffId>> {
-  const slotChoices = (['1', '2', '3', '4', '5'] as SlotKey[]).flatMap((slot) => {
+  const slotChoices = (['1', '2', '3', '4', '5', '6'] as SlotKey[]).flatMap((slot) => {
     const label = slotLabel(slot, spells, labelMode)
     return [
       {
@@ -261,6 +298,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,
@@ -296,7 +334,7 @@ function scoreSelfBuff(buff: Choice<SelfBuffId>, spells: Spell[]) {
   if (buff.id === 'fifth-cast-free') return 8
   if (buff.id === 'group-heal-boost') return 8
   if (buff.id === 'shield-boost') return 6
-  const slot = buff.id.match(/slot([1-5])/i)?.[1] as SlotKey | undefined
+  const slot = buff.id.match(/slot([1-6])/i)?.[1] as SlotKey | undefined
   const spell = spells.find((candidate) => candidate.key === slot)
   if (!spell) return 5
   if (buff.id.endsWith('extra-target')) {
@@ -370,7 +408,7 @@ export function PvPRoguelikeScreen({
   const gameClass = profile.classes.find((candidate) => candidate.id === profile.character.classId)!
   const starterSpells = useMemo(() => gameClass.spells
     .filter((spell) => spell.unlockLevel === 1)
-    .slice(0, 5)
+    .slice(0, 6)
     .map((spell, index) => toCombatSpell(spell, String(index + 1))), [gameClass.spells])
   const [abilityLabelMode] = useState<AbilityLabelMode>('ability')
   const selfBuffChoicesCatalog = useMemo(
@@ -381,6 +419,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,17 +439,19 @@ export function PvPRoguelikeScreen({
     [contentType],
   )
   const [status, setStatus] = useState<'queueing' | 'playing' | 'upgrade-choice' | 'won' | 'lost'>('queueing')
-  const [stage, setStage] = useState(1)
-  const [encounters, setEncounters] = useState<PvpEncounter[]>(() => buildEncounterSegment(encounterPool, 1, contentType))
+  const [stage, setStage] = useState(startStage)
+  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))
   const [selectedId, setSelectedId] = useState(partyTemplate[0].id)
+  const selectedIdRef = useRef(partyTemplate[0].id)
   const [elapsedTicks, setElapsedTicks] = useState(0)
   const [cpuDifficulty, setCpuDifficulty] = useState<CpuDifficulty | null>(null)
   const [queueMessage, setQueueMessage] = useState('')
   const [log, setLog] = useState<CombatLogEntry[]>([{ id: 1, text: 'Queueing opponent...', tone: 'system' }])
   const [reward, setReward] = useState<DungeonReward | null>(null)
+  const [runSummary, setRunSummary] = useState<PvpRunSummary>(() => createEmptyPvpRunSummary())
   const [rewardError, setRewardError] = useState('')
   const [showEndLog, setShowEndLog] = useState(false)
   const [floatingTexts, setFloatingTexts] = useState<FloatingCombatText[]>([])
@@ -425,6 +469,8 @@ export function PvPRoguelikeScreen({
   const bossRewardClaimedRef = useRef(new Set<number>())
   const cpuDefeatedRef = useRef(false)
   const playerClearedEncounterRef = useRef(-1)
+  const queuedMatchRef = useRef(false)
+  const encounterPoolRef = useRef(encounterPool)
   const playerRef = useRef(playerSide)
   const cpuRef = useRef(cpuSide)
   const encounter = encounters[encounterIndex]
@@ -451,6 +497,12 @@ export function PvPRoguelikeScreen({
   const {
     enabled: dualScreenEnabled,
   } = useDualScreen()
+
+  const setSelectedTargetId = useCallback((id: string) => {
+    selectedIdRef.current = id
+    setSelectedId(id)
+  }, [])
+
   const addLog = useCallback((text: string, tone: CombatLogEntry['tone']) => {
     setLog((current) => [createLogEntry(nextLogId, text, tone), ...current].slice(0, 60))
   }, [])
@@ -464,9 +516,21 @@ export function PvPRoguelikeScreen({
     }, 900)
   }, [])
 
+  useEffect(() => {
+    if (queuedMatchRef.current) return
+    const loadedCheckpoint = loadPvpRoguelikeCheckpoint(profile.character.id, contentType)
+    setCheckpointStage(loadedCheckpoint)
+    setStartStage(loadedCheckpoint)
+  }, [contentType, profile.character.id])
+
+  useEffect(() => {
+    encounterPoolRef.current = encounterPool
+  }, [encounterPool])
+
   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 +540,40 @@ export function PvPRoguelikeScreen({
       {
         bossesCleared: 1,
         experienceMode: 'pvp-boss-quarter-level',
+        lootSourceEncounterId: rewardEncounter?.sourceEncounterId,
+        roguelikeStage: stage,
       },
     )
       .then((result) => {
         setReward(result)
+        setRunSummary((current) => {
+          const unlockedById = new Map(current.unlockedAbilities.map((ability) => [ability.id, ability]))
+          result.unlockedAbilities.forEach((ability) => unlockedById.set(ability.id, ability))
+          return {
+            bossesKilled: current.bossesKilled + 1,
+            experienceGained: current.experienceGained + result.experienceGained,
+            previousLevel: current.previousLevel ?? result.previousLevel,
+            newLevel: result.newLevel,
+            levelsGained: current.levelsGained + result.levelsGained,
+            talentPointsGained: current.talentPointsGained + result.talentPointsGained,
+            unlockedAbilities: Array.from(unlockedById.values()),
+            loot: result.bonusItem ? [...current.loot, result.bonusItem] : current.loot,
+          }
+        })
         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
@@ -509,8 +595,9 @@ export function PvPRoguelikeScreen({
       : null)
   }, [opponentDebuffChoicesCatalog, selfBuffChoicesCatalog])
 
-  useEffect(() => {
-    const firstSegment = buildEncounterSegment(encounterPool, 1, contentType)
+  const startMatch = useCallback((nextStartStage?: number) => {
+    const matchStartStage = nextStartStage ?? loadPvpRoguelikeCheckpoint(profile.character.id, contentType)
+    const firstSegment = buildEncounterSegment(encounterPoolRef.current, matchStartStage, contentType)
     const firstEncounter = firstSegment[0]
     const basePlayer = starterSide(partyTemplate, maxResource)
     const baseCpu = starterSide(cpuPartyTemplate, maxResource)
@@ -520,15 +607,18 @@ export function PvPRoguelikeScreen({
     cpuRef.current = baseCpu
     nextLogId.current = 2
     playerClearedEncounterRef.current = -1
+    queuedMatchRef.current = true
     bossRewardClaimedRef.current = new Set()
     setEncounters(firstSegment)
     setEncounterIndex(0)
-    setStage(1)
+    setCheckpointStage(matchStartStage)
+    setStartStage(matchStartStage)
+    setStage(matchStartStage)
     setElapsedTicks(0)
     setStatus('queueing')
     setPlayerSide(basePlayer)
     setCpuSide(baseCpu)
-    setSelectedId(partyTemplate[0].id)
+    setSelectedTargetId(partyTemplate[0].id)
     setPlayerBuffChoices([])
     setPlayerDebuffChoices([])
     setSelectedBuff(null)
@@ -537,6 +627,7 @@ export function PvPRoguelikeScreen({
     setPaused(false)
     setTargetGroup(0)
     setReward(null)
+    setRunSummary(createEmptyPvpRunSummary())
     setRewardError('')
     setShowEndLog(false)
     setFloatingTexts([])
@@ -546,26 +637,28 @@ 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 ${matchStartStage}.`)
       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 ${matchStartStage}.`, tone: 'system' }])
       const timer = window.setTimeout(() => {
         setStatus('playing')
-        addLog(`Round 1 begins against CPU ${randomCpu}.`, 'system')
+        addLog(`Stage ${matchStartStage} begins against CPU ${randomCpu}.`, 'system')
       }, 500)
       return () => window.clearTimeout(timer)
     }
-    setQueueMessage('Searching queue. No player found yet.')
-    setLog([{ id: 1, text: 'Searching queue. No player found yet.', tone: 'system' }])
+    setQueueMessage(`Searching queue. Stage ${matchStartStage} start ready.`)
+    setLog([{ id: 1, text: `Searching queue. Stage ${matchStartStage} 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 ${matchStartStage}.`, 'system')
     }, 1400)
     return () => window.clearTimeout(timer)
-  }, [addLog, contentType, cpuPartyTemplate, encounterPool, gameMode, maxResource, partyTemplate])
+  }, [addLog, contentType, cpuPartyTemplate, gameMode, maxResource, partyTemplate, profile.character.id, setSelectedTargetId])
+
+  useEffect(() => startMatch(), [startMatch])
 
   const applySpell = useCallback((
     current: SideState,
@@ -588,6 +681,11 @@ export function PvPRoguelikeScreen({
     const hotTargets = new Set(spell.kind === 'hot' ? [targetId] : [])
     const shieldTargets = new Set(spell.kind === 'shield' ? [targetId] : [])
     const extraTargets = buffStacks(buffs, `slot${spell.key as SlotKey}-extra-target` as SelfBuffId)
+    const groupTargets = new Set(
+      spell.kind === 'group'
+        ? groupHealTargets(current.party, DEFAULT_GROUP_HEAL_TARGETS + extraTargets).map((member) => member.id)
+        : [],
+    )
     for (let index = 0; index < extraTargets; index += 1) {
       if (spell.kind === 'group') break
       if (spell.kind === 'hot') {
@@ -606,6 +704,7 @@ export function PvPRoguelikeScreen({
     const nextParty = current.party.map((member) => {
       if (member.health <= 0) return member
       if (spell.kind === 'group') {
+        if (!groupTargets.has(member.id)) return member
         const groupPower = Math.round(spell.power * (1.25 ** buffStacks(buffs, 'group-heal-boost')))
         const nextHealth = healMember(member, groupPower, debuffs)
         addFloatingHeal(sideName, member.id, Math.max(0, nextHealth - member.health))
@@ -664,29 +763,30 @@ export function PvPRoguelikeScreen({
 
   const castPlayerSpell = useCallback((spell: Spell) => {
     if (status !== 'playing' || playerDone || !playerAlive) return
+    const targetId = selectedIdRef.current
     const succeeded = applySpell(playerRef.current, (value) => {
       const next = typeof value === 'function' ? value(playerRef.current) : value
       playerRef.current = next
       setPlayerSide(next)
-    }, 'player', playerRef.current.buffs, playerRef.current.debuffs, spell, selectedId)
-    if (succeeded) addLog(`${spell.name} cast on ${playerRef.current.party.find((member) => member.id === selectedId)?.name ?? 'target'}.`, 'heal')
-  }, [addLog, applySpell, playerAlive, playerDone, selectedId, status])
+    }, 'player', playerRef.current.buffs, playerRef.current.debuffs, spell, targetId)
+    if (succeeded) addLog(`${spell.name} cast on ${playerRef.current.party.find((member) => member.id === targetId)?.name ?? 'target'}.`, 'heal')
+  }, [addLog, applySpell, playerAlive, playerDone, status])
 
   const selectRelativeTarget = useCallback((direction: -1 | 1) => {
     const living = playerRef.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)
-  }, [selectedId])
+    setSelectedTargetId(living[nextIndex].id)
+  }, [setSelectedTargetId])
 
   const selectDirectionalTarget = useCallback((action: InputAction) => {
-    const currentIndex = playerRef.current.party.findIndex((member) => member.id === selectedId)
+    const currentIndex = playerRef.current.party.findIndex((member) => member.id === selectedIdRef.current)
     if (currentIndex < 0) {
       const firstLiving = playerRef.current.party.find((member) => member.health > 0)
-      if (firstLiving) setSelectedId(firstLiving.id)
+      if (firstLiving) setSelectedTargetId(firstLiving.id)
       return
     }
     const currentRow = Math.floor(currentIndex / partyColumns)
@@ -713,14 +813,14 @@ export function PvPRoguelikeScreen({
         const bSecondary = horizontal ? 0 : Math.abs(b.column - currentColumn)
         return aPrimary - bPrimary || aSecondary - bSecondary
       })
-    if (candidates[0]) setSelectedId(candidates[0].member.id)
-  }, [partyColumns, selectedId])
+    if (candidates[0]) setSelectedTargetId(candidates[0].member.id)
+  }, [partyColumns, setSelectedTargetId])
 
   const selectDirectTarget = useCallback((slot: number) => {
     const index = slot + (contentType === 'raid' ? targetGroup * 6 : 0)
     const member = playerRef.current.party[index]
-    if (member?.health > 0) setSelectedId(member.id)
-  }, [contentType, targetGroup])
+    if (member?.health > 0) setSelectedTargetId(member.id)
+  }, [contentType, setSelectedTargetId, targetGroup])
 
   const cpuTakeTurn = useCallback(() => {
     if (!cpuDifficulty || status !== 'playing' || cpuDone || !cpuAlive) return
@@ -767,10 +867,14 @@ export function PvPRoguelikeScreen({
     const appliesHealingReduction = encounterValue.isBoss && elapsedTicks > 0 && elapsedTicks % 9 === 0 && mechanics.includes('healing-reduction')
     const appliesPoison = encounterValue.isBoss && elapsedTicks > 0 && elapsedTicks % 12 === 0 && mechanics.includes('ramping-poison')
     const damageMultiplier = incomingDamageMultiplier(side.debuffs)
+    const tankPressure = tankPressureTargets(side.party)
+    const tankPressureIds = new Set(tankPressure.targets.map((member) => member.id))
     const nextParty = side.party.map((member) => {
       if (member.health <= 0) return member
       let damage = member.id === primaryTarget.id ? encounterValue.damage : 0
-      if (member.role === 'Tank') damage += encounterValue.tankDamage
+      if (tankPressureIds.has(member.id)) {
+        damage += Math.round(encounterValue.tankDamage * tankPressure.multiplier)
+      }
       if (bossPulse) damage += 10
       if (member.debuff) damage += 6
       const nextPoisonStacks = appliesPoison && member.id === primaryTarget.id
@@ -819,7 +923,7 @@ export function PvPRoguelikeScreen({
       cooldowns: Object.fromEntries(
         Object.entries(side.cooldowns).map(([id, seconds]) => [id, Math.max(0, seconds - TICK_MS / 1000)]),
       ),
-      enemyHealth: Math.max(0, side.enemyHealth - encounterValue.partyDamage),
+      enemyHealth: Math.max(0, side.enemyHealth - partyDamageOutput(nextParty, encounterValue.partyDamage)),
     }
   }, [addFloatingHeal, elapsedTicks, maxResource])
 
@@ -841,7 +945,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
@@ -861,12 +976,18 @@ export function PvPRoguelikeScreen({
         addLog(`CPU ${cpuDifficulty ?? 1} fell. Finish the boss for XP.`, 'loot')
       }
       if (nextPlayer.enemyHealth <= 0) {
+        if (encounter.isBoss && cpuDefeatedRef.current) {
+          finishRoguelikeRun()
+          setStatus('won')
+          addLog('CPU defeated. Match complete.', 'loot')
+          return
+        }
         addLog(`${encounter.enemyName} cleared. Choose your next edge.`, 'loot')
         beginUpgradePhase()
       }
     }, 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
@@ -921,10 +1042,17 @@ export function PvPRoguelikeScreen({
     }
 
     const clearedBoss = encounter.isBoss
+    if (clearedBoss && cpuDefeatedRef.current) {
+      finishRoguelikeRun()
+      setStatus('won')
+      addLog('CPU defeated. Match complete.', 'loot')
+      return
+    }
     const nextStage = clearedBoss ? stage + 1 : stage
     const nextSegment = clearedBoss ? buildEncounterSegment(encounterPool, nextStage, contentType) : []
     const nextEncounter = clearedBoss ? nextSegment[0] : encounters[encounterIndex + 1]
     if (!nextEncounter) {
+      finishRoguelikeRun()
       setStatus('won')
       addLog('No further encounters remain.', 'loot')
       return
@@ -973,7 +1101,7 @@ export function PvPRoguelikeScreen({
     setElapsedTicks(0)
     setStatus('playing')
     addLog(`You chose ${selectedBuff.name} and ${selectedDebuff.name}. CPU ${cpuDifficulty} chose ${cpuBuff.name} and ${cpuDebuff.name}.`, 'system')
-  }, [addLog, contentType, cpuDifficulty, encounter, encounterIndex, encounterPool, encounters, maxResource, opponentDebuffChoicesCatalog, selectedBuff, selectedDebuff, selfBuffChoicesCatalog, stage, starterSpells])
+  }, [addLog, contentType, cpuDifficulty, encounter, encounterIndex, encounterPool, encounters, finishRoguelikeRun, maxResource, opponentDebuffChoicesCatalog, selectedBuff, selectedDebuff, selfBuffChoicesCatalog, stage, starterSpells])
 
   useGameAction((action) => {
     if (action === 'pause' || action === 'back') {
@@ -1002,9 +1130,9 @@ export function PvPRoguelikeScreen({
       setTargetGroup((current) => {
         const groupCount = Math.max(1, Math.ceil(playerRef.current.party.length / 6))
         const next = ((current + 1) % groupCount) as 0 | 1 | 2
-        const selectedIndex = playerRef.current.party.findIndex((member) => member.id === selectedId)
+        const selectedIndex = playerRef.current.party.findIndex((member) => member.id === selectedIdRef.current)
         const nextMember = playerRef.current.party[(selectedIndex < 0 ? 0 : selectedIndex % 6) + next * 6]
-        if (nextMember?.health > 0) setSelectedId(nextMember.id)
+        if (nextMember?.health > 0) setSelectedTargetId(nextMember.id)
         return next
       })
       return
@@ -1094,7 +1222,7 @@ export function PvPRoguelikeScreen({
         {dualScreenEnabled && status !== 'queueing' && (
           <DualScreenTopCombat
             state={dualScreenState}
-            onSelectTarget={setSelectedId}
+            onSelectTarget={setSelectedTargetId}
           />
         )}
 
@@ -1118,7 +1246,7 @@ export function PvPRoguelikeScreen({
                   <button
                     className={`party-member ${selectedId === member.id ? 'selected' : ''} ${member.health <= 0 ? 'down' : ''}`}
                     key={`player-${member.id}`}
-                    onClick={() => setSelectedId(member.id)}
+                    onClick={() => setSelectedTargetId(member.id)}
                     type="button"
                   >
                     <div className="member-header">
@@ -1317,9 +1445,39 @@ export function PvPRoguelikeScreen({
               <h2>{status === 'won' ? `CPU ${cpuDifficulty} Falls` : `CPU ${cpuDifficulty} Wins`}</h2>
               <p>{finalEncountersCleared} encounters cleared.</p>
               <div className="reward-summary">
-                {!reward && !rewardError && <p>Boss kills grant XP immediately.</p>}
+                <p>{runSummary.bossesKilled} bosses killed.</p>
+                <p>+{runSummary.experienceGained} XP</p>
+                {runSummary.bossesKilled > 0 && !reward && !rewardError && <p>Final boss rewards still recording...</p>}
                 {rewardError && <p className="reward-error">{rewardError}</p>}
-                {reward && (
+                {runSummary.levelsGained > 0 && runSummary.previousLevel !== null && runSummary.newLevel !== null && (
+                  <p className="level-gain">
+                    Level {runSummary.previousLevel} to {runSummary.newLevel}
+                    <small>+{runSummary.talentPointsGained} talent point{runSummary.talentPointsGained === 1 ? '' : 's'}</small>
+                  </p>
+                )}
+                {runSummary.unlockedAbilities.map((ability) => (
+                  <p className="ability-unlock" key={ability.id}>
+                    <span>{ability.glyph}</span>
+                    Ability Unlocked: {ability.name}
+                  </p>
+                ))}
+                <div className="run-loot-rolls">
+                  {runSummary.loot.length > 0 ? runSummary.loot.map((item, index) => (
+                    <div className="dropped" key={`${item.id}-${index}`}>
+                      <strong>Boss {index + 1}</strong>
+                      <span>
+                        {item.glyph} {item.name} x{item.quantity}
+                        {item.duplicate ? ` (owned x${item.quantityAfter})` : ''}
+                      </span>
+                    </div>
+                  )) : (
+                    <div>
+                      <strong>Loot</strong>
+                      <span>No boss loot awarded</span>
+                    </div>
+                  )}
+                </div>
+                {reward && runSummary.bossesKilled === 0 && (
                   <>
                     <p>+{reward.experienceGained} XP</p>
                     {reward.levelsGained > 0 && (
@@ -1334,6 +1492,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>
@@ -1351,6 +1516,7 @@ export function PvPRoguelikeScreen({
                   )}
                 </>
               )}
+              <button onClick={() => startMatch()} type="button">Queue Next Match</button>
               <button className="secondary-result-button" onClick={onExit} type="button">Back to Roguelike</button>
             </div>
           </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
@@ -102,6 +118,13 @@ function loadRecentSnapshot() {
   }
 }
 
+function memberHotEffects(member: PartyMember) {
+  if (member.hotEffects?.length) return member.hotEffects
+  return member.hotTicks > 0
+    ? [{ id: 'legacy-renew', label: 'Renew', ticks: member.hotTicks }]
+    : []
+}
+
 export function DualScreenProvider({ children }: { children: ReactNode }) {
   const [enabled, setEnabledState] = useState(
     () => localStorage.getItem(STORAGE_KEY) === 'true',
@@ -280,16 +303,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 +378,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 +580,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"
@@ -500,7 +606,9 @@ export function DualScreenTopCombat({
                   </div>
                 )}
                 <div className="member-effects">
-                  {member.hotTicks > 0 && <span className="buff">Renew</span>}
+                  {memberHotEffects(member).map((effect) => (
+                    <span className="buff" key={effect.id}>{effect.label}</span>
+                  ))}
                   {member.debuff && <span className="debuff">{member.debuff}</span>}
                 </div>
               </button>

src/game.ts

@@ -8,6 +8,19 @@ export type PartyMember = {
   maxHealth: number
   shield: number
   hotTicks: number
+  hotEffects?: Array<{
+    id: string
+    label: string
+    ticks: number
+    power: number
+  }>
+  bounceHeals?: Array<{
+    id: string
+    label: string
+    charges: number
+    power: number
+  }>
+  damageReductionTicks?: number
   debuff?: string
   debuffTicks?: number
   poisonStacks?: number
@@ -24,7 +37,8 @@ export type Spell = {
   cooldown: number
   power: number
   glyph: string
-  kind: 'direct' | 'hot' | 'group' | 'shield' | 'cleanse'
+  kind: 'direct' | 'hot' | 'group' | 'shield' | 'cleanse' | 'damage_reduction' | 'bounce_heal'
+  effectType?: string
 }
 
 export type Encounter = {
@@ -44,6 +58,9 @@ export type CombatLogEntry = {
   tone: 'system' | 'heal' | 'danger' | 'loot'
 }
 
+export const TANKLESS_DAMAGE_MULTIPLIER = 1.35
+export const DEFAULT_GROUP_HEAL_TARGETS = 4
+
 export const INITIAL_PARTY: PartyMember[] = [
   { id: 'brann', name: 'Brann', role: 'Tank', health: 150, maxHealth: 150, shield: 0, hotTicks: 0 },
   { id: 'mira', name: 'Mira', role: 'Healer', health: 100, maxHealth: 100, shield: 0, hotTicks: 0 },
@@ -101,7 +118,7 @@ export const SPELLS: Spell[] = [
     id: 'radiance',
     key: '3',
     name: 'Radiance',
-    description: 'Restores health to every living party member.',
+    description: 'Restores health to up to 4 injured party members.',
     cost: 12,
     cooldown: 8,
     power: 18,
@@ -164,3 +181,28 @@ export const ENCOUNTERS: Encounter[] = [
     isBoss: true,
   },
 ]
+
+export function partyDamageOutput(party: PartyMember[], baseDamage: number) {
+  const livingCount = party.filter((member) => member.health > 0).length
+  return Math.round(baseDamage * (livingCount / Math.max(1, party.length)))
+}
+
+export function tankPressureTargets(party: PartyMember[]) {
+  const living = party.filter((member) => member.health > 0)
+  const tanks = living.filter((member) => member.role === 'Tank')
+  if (tanks.length > 0) return { targets: tanks, multiplier: 1 }
+  const damageDealer = living
+    .filter((member) => member.role === 'Damage')
+    .sort((left, right) => right.health - left.health)[0]
+  return {
+    targets: damageDealer ? [damageDealer] : [],
+    multiplier: TANKLESS_DAMAGE_MULTIPLIER,
+  }
+}
+
+export function groupHealTargets(party: PartyMember[], targetCount = DEFAULT_GROUP_HEAL_TARGETS) {
+  return party
+    .filter((member) => member.health > 0)
+    .sort((left, right) => (left.health / left.maxHealth) - (right.health / right.maxHealth))
+    .slice(0, targetCount)
+}

src/gameRepository.ts

@@ -26,6 +26,7 @@ export interface GameRepository {
     completedPart?: number,
     startPart?: number,
     partDurationSeconds?: [number, number, number],
+    hardMode?: boolean,
   ): Promise<DungeonReward>
   completeRoguelike(
     dungeonId: number,
@@ -36,6 +37,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 +47,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,7 +101,9 @@ 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' }
+const ABILITY_SLOT_COUNT = 6
 
 function clone<T>(value: T): T {
   return structuredClone(value)
@@ -142,7 +148,7 @@ function upgradeV1Save(v1: { profile: CharacterProfile; lootRolls: Record<string
       level: cid === p.character.classId ? p.character.level : 1,
       experience: cid === p.character.classId ? p.character.experience : 0,
       talentPoints: cid === p.character.classId ? p.character.talentPoints : 1,
-      abilitySlots: cid === p.character.classId ? [...p.abilitySlots] : [],
+      abilitySlots: cid === p.character.classId ? normalizeAbilitySlots(p.abilitySlots) : [],
       talentRanks,
       inventory: cid === p.character.classId ? clone(p.inventory) : [],
     }
@@ -159,11 +165,32 @@ function upgradeV1Save(v1: { profile: CharacterProfile; lootRolls: Record<string
 }
 
 function upgradeV2Save(v2: Omit<OfflineSave, 'version' | 'completedRaidPhases'> & { version: 2 }): OfflineSave {
-  return {
+  return normalizeSaveAbilitySlots({
     ...v2,
     version: 3,
     completedRaidPhases: 0,
+  })
+}
+
+function normalizeAbilitySlots(abilitySlots: unknown): Array<number | null> {
+  const slots = Array.isArray(abilitySlots)
+    ? abilitySlots
+      .slice(0, ABILITY_SLOT_COUNT)
+      .map((value) => {
+        if (value === null || value === undefined) return null
+        const id = Number(value)
+        return Number.isInteger(id) ? id : null
+      })
+    : []
+  while (slots.length < ABILITY_SLOT_COUNT) slots.push(null)
+  return slots
+}
+
+function normalizeSaveAbilitySlots(save: OfflineSave): OfflineSave {
+  for (const character of Object.values(save.characters)) {
+    character.abilitySlots = normalizeAbilitySlots(character.abilitySlots)
   }
+  return save
 }
 
 function normalizeOfflineSave(raw: unknown): OfflineSave | null {
@@ -173,12 +200,12 @@ function normalizeOfflineSave(raw: unknown): OfflineSave | null {
     profile?: CharacterProfile
     lootRolls?: Record<string, LootRoll>
   }
-  if (candidate.version === 3) return candidate as OfflineSave
+  if (candidate.version === 3) return normalizeSaveAbilitySlots(candidate as OfflineSave)
   if (candidate.version === 2) {
     return upgradeV2Save(candidate as Omit<OfflineSave, 'version' | 'completedRaidPhases'> & { version: 2 })
   }
   if (candidate.version === 1 && candidate.profile) {
-    return upgradeV1Save(candidate as { profile: CharacterProfile; lootRolls: Record<string, LootRoll> })
+    return normalizeSaveAbilitySlots(upgradeV1Save(candidate as { profile: CharacterProfile; lootRolls: Record<string, LootRoll> }))
   }
   return null
 }
@@ -355,11 +382,33 @@ function experienceForLevel(level: number) {
   return (level - 1) * (level - 1) * 100
 }
 
+function catchUpExperienceReward(
+  baseReward: number,
+  currentExperience: number,
+  currentLevel: number,
+  targetLevel: number,
+) {
+  if (targetLevel <= currentLevel) return baseReward
+  const targetExperience = experienceForLevel(targetLevel)
+  const gap = Math.max(0, targetExperience - currentExperience)
+  if (gap <= 0) return baseReward
+  const doubledBase = Math.min(baseReward, Math.ceil(gap / 2))
+  return doubledBase * 2 + (baseReward - doubledBase)
+}
+
+function highestOtherClassLevel(save: OfflineSave) {
+  const activeClass = save.activeClassId
+  return Object.entries(save.characters)
+    .filter(([classId]) => Number(classId) !== activeClass)
+    .reduce((highest, [, character]) => Math.max(highest, character.level), 0)
+}
+
 function scaledPvpBossExperience(
   startingExperience: number,
   startingLevel: number,
   bossesCleared: number,
   maxLevel: number,
+  targetLevel = startingLevel,
 ) {
   let experience = startingExperience
   let level = startingLevel
@@ -370,7 +419,8 @@ function scaledPvpBossExperience(
       ? maxExperience
       : experienceForLevel(level + 1)
     const levelBand = Math.max(1, nextLevelExperience - currentLevelFloor)
-    experience = Math.min(maxExperience, experience + Math.round(levelBand * 0.25))
+    const rewardRate = targetLevel > level ? 0.5 : 0.25
+    experience = Math.min(maxExperience, experience + Math.round(levelBand * rewardRate))
     while (level < maxLevel && experienceForLevel(level + 1) <= experience) {
       level += 1
     }
@@ -381,15 +431,15 @@ 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.' },
 }
+const DIRECT_CRAFT_ITEM_LEVELS = new Set([1, 10, 20, 25])
 
 type WindowWithApiBase = Window & {
   CAPACITOR_API_BASE_URL?: string
+  CAPACITOR_AUTH_API_BASE_URL?: string
 }
 
 function componentForItemLevel(itemLevel: number): ComponentTemplate | undefined {
@@ -401,13 +451,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) {
@@ -427,7 +470,7 @@ function mergeProfileIntoSave(profile: CharacterProfile, existingSave?: OfflineS
     level: profile.character.level,
     experience: profile.character.experience,
     talentPoints: profile.character.talentPoints,
-    abilitySlots: [...profile.abilitySlots],
+    abilitySlots: normalizeAbilitySlots(profile.abilitySlots),
     talentRanks,
     inventory: clone(profile.inventory),
   }
@@ -452,25 +495,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 +650,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 +670,7 @@ async function finalizeOnlineSession(session: AuthSession): Promise<AuthSession>
     return {
       account: session.account,
       profile: buildProfile(cache.save),
+      token: session.token,
     }
   }
   try {
@@ -611,6 +747,7 @@ const serverRepository: GameRepository = {
     } catch (reason) {
       if (!isNetworkError(reason)) throw reason
     }
+    clearAuthToken()
     clearOnlineCache()
     writeMode('online')
   },
@@ -626,7 +763,7 @@ const serverRepository: GameRepository = {
       ),
   saveProfile: (classId, abilitySlots) =>
     cachedOnlineLocalRepository.saveProfile(classId, abilitySlots),
-  completeDungeon: (dungeonId, difficultyId, resourceSpent, durationSeconds, completedPart, startPart, partDurationSeconds) =>
+  completeDungeon: (dungeonId, difficultyId, resourceSpent, durationSeconds, completedPart, startPart, partDurationSeconds, hardMode) =>
     cachedOnlineLocalRepository.completeDungeon(
       dungeonId,
       difficultyId,
@@ -635,6 +772,7 @@ const serverRepository: GameRepository = {
       completedPart,
       startPart,
       partDurationSeconds,
+      hardMode,
     ),
   completeRoguelike: (dungeonId, difficultyId, encountersCleared, resourceSpent, durationSeconds, options) =>
     cachedOnlineLocalRepository.completeRoguelike(
@@ -657,6 +795,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,13 +806,12 @@ 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[] = static_.inventory.filter((i) => starterItemIds.includes(i.id)).map((i) => ({ ...i }))
+  const inventory: Item[] = []
   const startingAbilitySlots: Array<number | null> = gc.spells
     .filter((s) => s.unlockLevel === 1)
-    .slice(0, 5)
+    .slice(0, ABILITY_SLOT_COUNT)
     .map((s) => s.id)
-  while (startingAbilitySlots.length < 6) startingAbilitySlots.push(null)
+  while (startingAbilitySlots.length < ABILITY_SLOT_COUNT) startingAbilitySlots.push(null)
   return {
     level: 1,
     experience: 0,
@@ -716,8 +855,7 @@ function createLocalRepository(store: LocalSaveStore): GameRepository {
       const gameClass = static_.classes.find((candidate) => candidate.id === classId)
       if (!gameClass) throw new Error('Selected class does not exist.')
 
-    const slots = abilitySlots.slice(0, 6)
-    while (slots.length < 6) slots.push(null)
+      const slots = normalizeAbilitySlots(abilitySlots)
       const selectedIds = slots.filter((id): id is number => id !== null)
       if (new Set(selectedIds).size !== selectedIds.length) {
         throw new Error('The same ability cannot be equipped twice.')
@@ -740,7 +878,7 @@ function createLocalRepository(store: LocalSaveStore): GameRepository {
       store.writeSave(save)
       return buildProfile(save)
     },
-    async completeDungeon(dungeonId, difficultyId, resourceSpent, durationSeconds, completedPart, startPart, partDurationSeconds) {
+    async completeDungeon(dungeonId, difficultyId, resourceSpent, durationSeconds, completedPart, startPart, partDurationSeconds, hardMode) {
     void startPart
     void partDurationSeconds
     if (!Number.isInteger(resourceSpent) || resourceSpent < 0) {
@@ -766,8 +904,15 @@ function createLocalRepository(store: LocalSaveStore): GameRepository {
     const previousLevel = cd.level
     const previousExperience = cd.experience
     const partCount = completedPart ?? 1
-    const experienceReward = Math.round(
-      dungeon.experienceReward * difficulty.experienceMultiplier * partCount,
+    const rewardMultiplier = hardMode ? 2 : 1
+    const baseExperienceReward = Math.round(
+      dungeon.experienceReward * difficulty.experienceMultiplier * partCount * rewardMultiplier,
+    )
+    const experienceReward = catchUpExperienceReward(
+      baseExperienceReward,
+      previousExperience,
+      previousLevel,
+      highestOtherClassLevel(save),
     )
     const maxExperience = experienceForLevel(profile.maxLevel)
     const newExperience = Math.min(previousExperience + experienceReward, maxExperience)
@@ -815,19 +960,20 @@ function createLocalRepository(store: LocalSaveStore): GameRepository {
         const selected = rewardPool[Math.floor(Math.random() * rewardPool.length)]
         const existing = profile.inventory.find((item) => item.id === selected.id)
         const duplicate = Boolean(existing)
-        let quantityAfter = 1
+        const rewardQuantity = rewardMultiplier
+        let quantityAfter = rewardQuantity
         if (existing) {
-          existing.quantity += 1
+          existing.quantity += rewardQuantity
           quantityAfter = existing.quantity
         } else {
           profile.inventory.push({
             ...selected,
-            quantity: 1,
+            quantity: rewardQuantity,
             equipped: false,
           })
         }
         cd.inventory = profile.inventory
-        bonusItem = { ...selected, duplicate, quantityAfter }
+        bonusItem = { ...selected, quantity: rewardQuantity, duplicate, quantityAfter }
       }
     }
 
@@ -880,13 +1026,19 @@ function createLocalRepository(store: LocalSaveStore): GameRepository {
     const maxExperience = experienceForLevel(profile.maxLevel)
     const bossesCleared = Math.max(0, Math.floor(options?.bossesCleared ?? encountersCleared / 3))
     const scaledReward = options?.experienceMode === 'pvp-boss-quarter-level'
-      ? scaledPvpBossExperience(previousExperience, previousLevel, bossesCleared, profile.maxLevel)
+      ? scaledPvpBossExperience(previousExperience, previousLevel, bossesCleared, profile.maxLevel, highestOtherClassLevel(save))
       : null
+    const baseRoguelikeReward = Math.round(dungeon.experienceReward * difficulty.experienceMultiplier * (encountersCleared / 3))
     const newExperience = scaledReward
       ? scaledReward.experience
       : Math.min(
         previousExperience
-        + Math.round(dungeon.experienceReward * difficulty.experienceMultiplier * (encountersCleared / 3)),
+        + catchUpExperienceReward(
+          baseRoguelikeReward,
+          previousExperience,
+          previousLevel,
+          highestOtherClassLevel(save),
+        ),
         maxExperience,
       )
     let newLevel = scaledReward?.level ?? previousLevel
@@ -914,6 +1066,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 +1089,7 @@ function createLocalRepository(store: LocalSaveStore): GameRepository {
       durationSeconds,
       averageItemLevel: updatedProfile.gearStats.averageItemLevel,
       unlockedAbilities,
-      bonusItem: null,
+      bonusItem,
       profile: updatedProfile,
     }
     },
@@ -1064,6 +1222,8 @@ 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 = !DIRECT_CRAFT_ITEM_LEVELS.has(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 +1243,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 +1315,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) =>
-      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
+    if (Math.random() < dropChance) {
       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,12 +1412,13 @@ const cachedOnlineRepository: GameRepository = {
     throw new Error('Account login requires online mode.')
   },
   async logout() {
+    clearAuthToken()
     clearOnlineCache()
     writeMode('online')
   },
   loadProfile: () => cachedOnlineLocalRepository.loadProfile(),
   saveProfile: (classId, abilitySlots) => cachedOnlineLocalRepository.saveProfile(classId, abilitySlots),
-  completeDungeon: (dungeonId, difficultyId, resourceSpent, durationSeconds, completedPart, startPart, partDurationSeconds) =>
+  completeDungeon: (dungeonId, difficultyId, resourceSpent, durationSeconds, completedPart, startPart, partDurationSeconds, hardMode) =>
     cachedOnlineLocalRepository.completeDungeon(
       dungeonId,
       difficultyId,
@@ -1225,6 +1427,7 @@ const cachedOnlineRepository: GameRepository = {
       completedPart,
       startPart,
       partDurationSeconds,
+      hardMode,
     ),
   completeRoguelike: (dungeonId, difficultyId, encountersCleared, resourceSpent, durationSeconds, options) =>
     cachedOnlineLocalRepository.completeRoguelike(
@@ -1241,6 +1444,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

@@ -276,14 +276,6 @@ function hasUiOverlay() {
   ).some(isVisible)
 }
 
-function isCombatTargetAction(action: InputAction) {
-  return action.startsWith('navigate')
-    || action.startsWith('targetParty')
-    || action === 'previousTarget'
-    || action === 'nextTarget'
-    || action === 'toggleTargetGroup'
-}
-
 const BUTTON_LABELS: Record<number, string> = {
   0: 'A / Cross',
   1: 'B / Circle',
@@ -397,7 +389,6 @@ export function InputProvider({ children }: { children: ReactNode }) {
   const keyboardInputRef = useRef(keyboardInput)
   const previousTokensRef = useRef(new Set<string>())
   const repeatRef = useRef<Record<string, number>>({})
-  const lastCombatNavigationRef = useRef(0)
 
   useEffect(() => {
     bindingsRef.current = bindings
@@ -444,11 +435,6 @@ export function InputProvider({ children }: { children: ReactNode }) {
   const dispatchAction = useCallback((action: InputAction, device: InputDevice) => {
     const uiOverlay = hasUiOverlay()
     const combatActive = Boolean(document.querySelector('[data-combat-active="true"]'))
-    if (combatActive && !uiOverlay && isCombatTargetAction(action)) {
-      const now = performance.now()
-      if (now - lastCombatNavigationRef.current < 125) return
-      lastCombatNavigationRef.current = now
-    }
 
     setLastDevice(device)
     document.documentElement.dataset.inputDevice = device

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
 }
@@ -317,6 +319,7 @@ export async function completeDungeon(
   completedPart?: number,
   startPart?: number,
   partDurationSeconds?: [number, number, number],
+  hardMode?: boolean,
 ): Promise<DungeonReward> {
   return activeGameRepository().completeDungeon(
     dungeonId,
@@ -326,6 +329,7 @@ export async function completeDungeon(
     completedPart,
     startPart,
     partDurationSeconds,
+    hardMode,
   )
 }
 
@@ -338,6 +342,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 +380,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"]
+}