Release v0.1.6 2026-07-12

.gitignore

@@ -1,5 +1,7 @@
 node_modules/
 dist/
+data/
+backups/
 game_assets/
 *.tsbuildinfo
 vite.config.js

DEPLOYMENT.md

@@ -4,6 +4,17 @@ This game uses the same proven local-Gitea pattern as `testgame`: clone from the
 Gitea bare repository on the TrueNAS filesystem, mount that working checkout
 into one Node container, and update it with a local Git pull plus app restart.
 
+## What the TrueNAS server does
+
+The `iwanttoheal-mmo` TrueNAS app is the game's live online server. One Node
+process serves the browser bundle and authenticated `/api` routes on port `4173`.
+The reverse proxy exposes both at `https://iwanttoheal.phenomrom.com`.
+
+SQLite persists accounts, sessions, cloud saves, boss-kill rankings, and
+roguelike records under `/app/data/game.db`. The separate data mount survives
+container replacement. TrueNAS Gitea remains the source repository used for
+deployment; it is not the game database.
+
 ## Paths
 
 ```text
@@ -13,6 +24,9 @@ Local Gitea bare repository:
 Runnable working checkout:
 /mnt/usbssds/apps/iwanttoheal-mmo/app
 
+Persistent game data:
+/mnt/usbssds/apps/iwanttoheal-mmo/data
+
 Public URL:
 https://iwanttoheal.phenomrom.com
 
@@ -39,7 +53,7 @@ sudo find /mnt -type d -name "i-want-to-heal-mmo.git" -prune -print 2>/dev/null
 Clone entirely through the local filesystem:
 
 ```sh
-sudo mkdir -p /mnt/usbssds/apps/iwanttoheal-mmo
+sudo mkdir -p /mnt/usbssds/apps/iwanttoheal-mmo/{app,data}
 sudo git config --global --add safe.directory \
   /mnt/.ix-apps/app_mounts/gitea/data/git/repositories/phenom/i-want-to-heal-mmo.git
 sudo git clone \
@@ -72,8 +86,10 @@ services:
   iwanttoheal:
     image: node:24-bookworm-slim
     command: >-
-      sh -lc "corepack pnpm install --frozen-lockfile && corepack pnpm run build && corepack pnpm start"
+      sh -lc "corepack pnpm install --frozen-lockfile && corepack pnpm run db:init && corepack pnpm run build && corepack pnpm start"
     environment:
+      CORS_ORIGINS: "https://iwanttoheal.phenomrom.com,capacitor://localhost,http://localhost"
+      DATA_DIR: /app/data
       HOST: 0.0.0.0
       PORT: "4173"
     init: true
@@ -82,11 +98,21 @@ services:
     restart: unless-stopped
     volumes:
       - /mnt/usbssds/apps/iwanttoheal-mmo/app:/app
+      - /mnt/usbssds/apps/iwanttoheal-mmo/data:/app/data
     working_dir: /app
 ```
 
-This game has no server database. Do not add `db:init`, `/app/data`, cookie,
+Do not remove the `/app/data` mount or place the SQLite database inside the source
-CORS, or proxy environment settings from the older game.
+checkout. Back up `/mnt/usbssds/apps/iwanttoheal-mmo/data/game.db` before database
+migrations or destructive maintenance.
+
+From the app checkout, create a consistent SQLite backup with:
+
+```sh
+DATA_DIR=/mnt/usbssds/apps/iwanttoheal-mmo/data \
+BACKUP_DIR=/mnt/usbssds/apps/iwanttoheal-mmo/backups \
+corepack pnpm run db:backup
+```
 
 The separate volume protects the old app files and data. The YAML still maps
 host port `4173`, so the old and MMO apps cannot run simultaneously while both

README.md

@@ -2,16 +2,23 @@
 
 Playable low-poly third-person combat vertical slice for AYN Thor's dual displays.
 
-Offline-first frontend includes three timestamped save slots, optional account sync, local/online overwrite controls, Hunter Profile statistics, boss collection logs, Settings, and PvE/PvP mode entry points.
+Offline-first frontend includes three timestamped save slots, TrueNAS accounts
+and cloud saves, Hunter Profile statistics, boss and roguelike leaderboards,
+boss collection logs, Settings, and PvE/PvP mode entry points. Offline saves
+remain playable without an account and can be uploaded after sign-in.
 
 ## Run
 
 ```bash
 pnpm install
+pnpm dev:api
+# In a second terminal:
 pnpm dev
 ```
 
-The development server listens on `0.0.0.0:4173`.
+The Vite development server listens on `0.0.0.0:4173` and proxies `/api` to the
+local production/API server on `127.0.0.1:4174`. Both processes use the same
+client API contract as TrueNAS.
 
 ## Android / AYN Thor test APK
 
@@ -23,6 +30,10 @@ installable debug APK:
 pnpm android:apk
 ```
 
+Build explicitly against the TrueNAS API with `pnpm android:apk:truenas`.
+Native builds also default to `https://iwanttoheal.phenomrom.com` when no API
+base override is supplied.
+
 Output is written under `android/app/build/outputs/apk/debug/`. With Android
 platform tools and a connected Thor, build and install it with:
 
@@ -41,12 +52,25 @@ state rather than two independent WebViews.
 Complete first-install, local-Gitea clone, YAML, update, and verification steps:
 [DEPLOYMENT.md](DEPLOYMENT.md).
 
-The production preview server uses the existing deployment address and port:
+The live TrueNAS web server uses the existing deployment address and port:
 
 - Public URL: `https://iwanttoheal.phenomrom.com`
 - Host/container port: `4173`
 - App directory: `/mnt/usbssds/apps/iwanttoheal-mmo/app`
 
+### Server architecture
+
+TrueNAS is the online production game server. Its Node process serves the browser
+application and authenticated `/api` routes on port `4173`; the reverse proxy
+exposes both at the public URL above. SQLite data persists at `/app/data/game.db`
+through the separate TrueNAS data mount.
+
+The server owns account credentials, 30-day sessions, three cloud-save slots per
+account, boss-kill rankings, and roguelike highest-round rankings. Passwords use
+scrypt with per-account salts; clients store only opaque session tokens. Local
+saves remain available for offline play. Gitea is a separate TrueNAS service used
+for source hosting and deployment.
+
 Clone from the TrueNAS-local Gitea bare repository into the app directory, then
 deploy `compose.yaml`. The expected source path is:
 
@@ -54,18 +78,16 @@ deploy `compose.yaml`. The expected source path is:
 /mnt/.ix-apps/app_mounts/gitea/data/git/repositories/phenom/i-want-to-heal-mmo.git
 ```
 
-Compared with the old game configuration:
+Current configuration:
 
 - use `corepack pnpm install --frozen-lockfile`, not `npm ci`;
-- remove `npm run db:init` because this game has no server database;
+- run `pnpm db:init` before starting the production server;
-- remove `COOKIE_SECURE`, `CORS_ORIGINS`, and `TRUST_PROXY`; the static Vite
+- mount `/mnt/usbssds/apps/iwanttoheal-mmo/data` at `/app/data`;
-  preview server does not consume them;
+- keep `CORS_ORIGINS` configured for the public site and Capacitor host;
-- remove `/app/data`; offline saves live in each player's browser/Android WebView
+- keep the source checkout and persistent data in separate mounts.
-  storage, not on TrueNAS.
 
-The existing reverse proxy can keep forwarding the public hostname to port
+The existing reverse proxy forwards the public hostname to port `4173`, including
-`4173`. Add server data and authentication environment variables only when an
+all `/api` routes.
-actual sync API is introduced.
 
 ## Publish updates to Gitea
 
@@ -116,11 +138,11 @@ outside the repository.
 
 Touch controls on lower display support party targeting, ability casting, map, and inventory.
 
-## Prototype scope
+## Current game scope
 
 - Five-member AI party with Disc Priest healer
 - Animated Druid healer, Knight tank, Ranger, Rogue, and Mage party models
-- One animated boss: Bulldrome, using the Bull model at 180% of its original prototype scale
+- Animated bosses using canonical tracked game models
 - Telegraph, charge, 0.75-second knockdown, and return-to-tank behavior
 - Three-charge cycle into a five-second stack marker and 300-damage shared pounce
 - Tank pressure, party-wide Cinder Nova, dispellable Ember Brand

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

@@ -102,7 +102,9 @@ public abstract class ControllerBridgeActivity extends BridgeActivity {
 
         float leftStickX = event.getAxisValue(MotionEvent.AXIS_X);
         float leftStickY = event.getAxisValue(MotionEvent.AXIS_Y);
-        dispatchNativeControllerMotion(leftStickX, leftStickY);
+        float rightStickX = controllerAxisValue(event, MotionEvent.AXIS_Z, MotionEvent.AXIS_RX);
+        float rightStickY = controllerAxisValue(event, MotionEvent.AXIS_RZ, MotionEvent.AXIS_RY);
+        dispatchNativeControllerMotion(leftStickX, leftStickY, rightStickX, rightStickY);
 
         Set<String> currentTokens = new HashSet<>();
         addAxisTokens(currentTokens, event.getAxisValue(MotionEvent.AXIS_HAT_X), "Button14", "Button15");
@@ -150,6 +152,14 @@ public abstract class ControllerBridgeActivity extends BridgeActivity {
         if (value >= AXIS_DEAD_ZONE) tokens.add(positive);
     }
 
+    private float controllerAxisValue(MotionEvent event, int primaryAxis, int fallbackAxis) {
+        InputDevice device = event.getDevice();
+        if (device != null && device.getMotionRange(primaryAxis) != null) {
+            return event.getAxisValue(primaryAxis);
+        }
+        return event.getAxisValue(fallbackAxis);
+    }
+
     private void dispatchNativeControllerToken(String token, boolean repeat) {
         if (bridge == null || bridge.getWebView() == null) return;
         String script =
@@ -161,18 +171,19 @@ public abstract class ControllerBridgeActivity extends BridgeActivity {
         });
     }
 
-    private void dispatchNativeControllerMotion(float x, float y) {
+    private void dispatchNativeControllerMotion(float moveX, float moveY, float lookX, float lookY) {
         if (bridge == null || bridge.getWebView() == null) return;
         String script =
             "window.dispatchEvent(new CustomEvent('iwt-native-controller-motion',"
-                + "{detail:{x:" + x + ",y:" + y + "}}));";
+                + "{detail:{moveX:" + moveX + ",moveY:" + moveY
+                + ",lookX:" + lookX + ",lookY:" + lookY + "}}));";
         bridge.getWebView().post(() -> bridge.getWebView().evaluateJavascript(script, null));
     }
 
     private void clearHeldControllerState() {
         activeMotionTokens.clear();
         lastMotionDispatchAt.clear();
-        dispatchNativeControllerMotion(0.0f, 0.0f);
+        dispatchNativeControllerMotion(0.0f, 0.0f, 0.0f, 0.0f);
         if (bridge == null || bridge.getWebView() == null) return;
         bridge.getWebView().post(() -> bridge.getWebView().evaluateJavascript(
             "window.dispatchEvent(new Event('iwt-native-controller-reset'));",

compose.yaml

@@ -2,8 +2,10 @@ services:
   iwanttoheal:
     image: node:24-bookworm-slim
     command: >-
-      sh -lc "corepack pnpm install --frozen-lockfile && corepack pnpm run build && corepack pnpm start"
+      sh -lc "corepack pnpm install --frozen-lockfile && corepack pnpm run db:init && corepack pnpm run build && corepack pnpm start"
     environment:
+      CORS_ORIGINS: "https://iwanttoheal.phenomrom.com,capacitor://localhost,http://localhost"
+      DATA_DIR: /app/data
       HOST: 0.0.0.0
       PORT: "4173"
     init: true
@@ -12,4 +14,5 @@ services:
     restart: unless-stopped
     volumes:
       - /mnt/usbssds/apps/iwanttoheal-mmo/app:/app
+      - /mnt/usbssds/apps/iwanttoheal-mmo/data:/app/data
     working_dir: /app

db/schema.sql

@@ -0,0 +1,56 @@
+PRAGMA foreign_keys = ON;
+PRAGMA journal_mode = WAL;
+
+CREATE TABLE IF NOT EXISTS accounts (
+  id INTEGER PRIMARY KEY,
+  username TEXT NOT NULL,
+  canonical_username TEXT NOT NULL UNIQUE,
+  password_hash TEXT NOT NULL,
+  password_salt TEXT NOT NULL,
+  created_at TEXT NOT NULL DEFAULT CURRENT_TIMESTAMP
+);
+
+CREATE TABLE IF NOT EXISTS sessions (
+  id INTEGER PRIMARY KEY,
+  account_id INTEGER NOT NULL REFERENCES accounts(id) ON DELETE CASCADE,
+  token_hash TEXT NOT NULL UNIQUE,
+  expires_at TEXT NOT NULL,
+  created_at TEXT NOT NULL DEFAULT CURRENT_TIMESTAMP
+);
+
+CREATE INDEX IF NOT EXISTS sessions_token_hash_idx ON sessions(token_hash);
+CREATE INDEX IF NOT EXISTS sessions_expires_at_idx ON sessions(expires_at);
+
+CREATE TABLE IF NOT EXISTS hunter_saves (
+  account_id INTEGER NOT NULL REFERENCES accounts(id) ON DELETE CASCADE,
+  slot_id INTEGER NOT NULL CHECK (slot_id BETWEEN 1 AND 3),
+  hunter_name TEXT NOT NULL,
+  save_json TEXT NOT NULL,
+  updated_at TEXT NOT NULL DEFAULT CURRENT_TIMESTAMP,
+  PRIMARY KEY (account_id, slot_id)
+);
+
+CREATE TABLE IF NOT EXISTS boss_kill_records (
+  account_id INTEGER NOT NULL REFERENCES accounts(id) ON DELETE CASCADE,
+  slot_id INTEGER NOT NULL CHECK (slot_id BETWEEN 1 AND 3),
+  boss_id TEXT NOT NULL,
+  kills INTEGER NOT NULL DEFAULT 0 CHECK (kills >= 0),
+  updated_at TEXT NOT NULL DEFAULT CURRENT_TIMESTAMP,
+  PRIMARY KEY (account_id, slot_id, boss_id),
+  FOREIGN KEY (account_id, slot_id) REFERENCES hunter_saves(account_id, slot_id) ON DELETE CASCADE
+);
+
+CREATE INDEX IF NOT EXISTS boss_kill_rank_idx
+  ON boss_kill_records (boss_id, kills DESC, updated_at ASC);
+
+CREATE TABLE IF NOT EXISTS roguelike_records (
+  account_id INTEGER NOT NULL REFERENCES accounts(id) ON DELETE CASCADE,
+  slot_id INTEGER NOT NULL CHECK (slot_id BETWEEN 1 AND 3),
+  highest_round INTEGER NOT NULL DEFAULT 0 CHECK (highest_round >= 0),
+  updated_at TEXT NOT NULL DEFAULT CURRENT_TIMESTAMP,
+  PRIMARY KEY (account_id, slot_id),
+  FOREIGN KEY (account_id, slot_id) REFERENCES hunter_saves(account_id, slot_id) ON DELETE CASCADE
+);
+
+CREATE INDEX IF NOT EXISTS roguelike_rank_idx
+  ON roguelike_records (highest_round DESC, updated_at ASC);

package.json

@@ -1,17 +1,22 @@
 {
   "name": "i-want-to-heal",
   "private": true,
-  "version": "0.1.5",
+  "version": "0.1.6",
   "type": "module",
   "scripts": {
     "dev": "vite --host 0.0.0.0",
+    "dev:api": "HOST=127.0.0.1 PORT=4174 node server/production.mjs",
+    "db:backup": "node scripts/backup-db.mjs",
+    "db:init": "node scripts/init-db.mjs",
     "build": "tsc -b && vite build",
     "android:sync": "pnpm run build && cap sync android",
+    "android:sync:truenas": "VITE_API_BASE_URL=https://iwanttoheal.phenomrom.com pnpm run android:sync",
     "android:apk": "pnpm run android:sync && cd android && ./gradlew --no-daemon clean assembleDebug",
+    "android:apk:truenas": "pnpm run android:sync:truenas && cd android && ./gradlew --no-daemon clean assembleDebug",
     "android:install": "pnpm run android:apk && adb install -r android/app/build/outputs/apk/debug/*.apk",
-    "start": "vite preview --host ${HOST:-0.0.0.0} --port ${PORT:-4173} --strictPort",
+    "start": "node server/production.mjs",
     "publish:gitea": "python3 scripts/publish_gitea.py",
-    "test": "vitest run",
+    "test": "vitest run && node --test server/game-api.test.mjs",
     "test:watch": "vitest",
     "assets:prune-party-animations": "node scripts/prune_party_animations.mjs --write",
     "assets:import": "node scripts/import-game-asset.mjs"

scripts/backup-db.mjs

@@ -0,0 +1,17 @@
+import { mkdirSync } from "node:fs";
+import { resolve } from "node:path";
+import { DatabaseSync } from "node:sqlite";
+
+const dataDirectory = resolve(process.env.DATA_DIR ?? "data");
+const backupDirectory = resolve(process.env.BACKUP_DIR ?? "backups");
+const timestamp = new Date().toISOString().replaceAll(":", "-").replaceAll(".", "-");
+const backupPath = resolve(backupDirectory, `game-${timestamp}.db`);
+mkdirSync(backupDirectory, { recursive: true });
+
+const database = new DatabaseSync(resolve(dataDirectory, "game.db"));
+try {
+  database.exec(`VACUUM INTO '${backupPath.replaceAll("'", "''")}'`);
+  console.log(`SQLite backup created: ${backupPath}`);
+} finally {
+  database.close();
+}

scripts/init-db.mjs

@@ -0,0 +1,14 @@
+import { mkdirSync } from "node:fs";
+import { readFile } from "node:fs/promises";
+import { resolve } from "node:path";
+import { DatabaseSync } from "node:sqlite";
+
+const dataDirectory = resolve(process.env.DATA_DIR ?? "data");
+mkdirSync(dataDirectory, { recursive: true });
+
+const database = new DatabaseSync(resolve(dataDirectory, "game.db"));
+const schema = await readFile(new URL("../db/schema.sql", import.meta.url), "utf8");
+database.exec(schema);
+database.close();
+
+console.log(`Database ready: ${resolve(dataDirectory, "game.db")}`);

server/game-api.mjs

@@ -0,0 +1,400 @@
+import { createHash, randomBytes, scryptSync, timingSafeEqual } from "node:crypto";
+import { mkdirSync, readFileSync } from "node:fs";
+import { resolve } from "node:path";
+import { DatabaseSync } from "node:sqlite";
+
+const SESSION_LIFETIME_MS = 30 * 24 * 60 * 60 * 1000;
+const MAX_JSON_BYTES = 1024 * 1024;
+const AUTH_WINDOW_MS = 15 * 60 * 1000;
+const AUTH_ATTEMPTS_PER_WINDOW = 20;
+const authAttempts = new Map();
+
+function apiError(message, status = 400) {
+  const error = new Error(message);
+  error.status = status;
+  return error;
+}
+
+function sendJson(response, status, body) {
+  response.statusCode = status;
+  response.setHeader("Content-Type", "application/json; charset=utf-8");
+  response.setHeader("Cache-Control", "no-store");
+  response.setHeader("X-Content-Type-Options", "nosniff");
+  response.end(JSON.stringify(body));
+}
+
+function configuredCorsOrigins() {
+  return String(process.env.CORS_ORIGINS ?? "")
+    .split(",")
+    .map((origin) => origin.trim())
+    .filter(Boolean);
+}
+
+function setCorsHeaders(request, response) {
+  const origin = request.headers.origin;
+  if (!origin) return;
+  const configured = configuredCorsOrigins();
+  if (!configured.includes("*") && !configured.includes(origin)) return;
+  response.setHeader("Access-Control-Allow-Origin", origin);
+  response.setHeader("Access-Control-Allow-Headers", "Authorization,Content-Type");
+  response.setHeader("Access-Control-Allow-Methods", "GET,POST,PUT,DELETE,OPTIONS");
+  response.setHeader("Access-Control-Max-Age", "86400");
+  response.setHeader("Vary", "Origin");
+}
+
+async function readJson(request) {
+  const chunks = [];
+  let size = 0;
+  for await (const chunk of request) {
+    size += chunk.length;
+    if (size > MAX_JSON_BYTES) throw apiError("Request body is too large.", 413);
+    chunks.push(chunk);
+  }
+  try {
+    return JSON.parse(Buffer.concat(chunks).toString("utf8"));
+  } catch {
+    throw apiError("Request body must be valid JSON.");
+  }
+}
+
+function canonicalUsername(value) {
+  return String(value ?? "").trim().toLocaleLowerCase();
+}
+
+function validateUsername(value) {
+  const username = String(value ?? "").trim();
+  if (!/^[A-Za-z0-9_]{3,20}$/.test(username)) {
+    throw apiError("Username must be 3–20 letters, numbers, or underscores.");
+  }
+  return username;
+}
+
+function validatePassword(value) {
+  const password = String(value ?? "");
+  if (password.length < 10 || password.length > 128) {
+    throw apiError("Password must be 10–128 characters.");
+  }
+  return password;
+}
+
+function passwordDigest(password, salt) {
+  return scryptSync(password, salt, 64).toString("hex");
+}
+
+function verifyPassword(password, account) {
+  const actual = Buffer.from(passwordDigest(password, account.passwordSalt), "hex");
+  const expected = Buffer.from(account.passwordHash, "hex");
+  return actual.length === expected.length && timingSafeEqual(actual, expected);
+}
+
+function tokenHash(token) {
+  return createHash("sha256").update(token).digest("hex");
+}
+
+function bearerToken(request) {
+  const authorization = String(request.headers.authorization ?? "");
+  return authorization.startsWith("Bearer ") ? authorization.slice(7).trim() : "";
+}
+
+function createSession(database, accountId) {
+  const token = randomBytes(32).toString("base64url");
+  const expiresAt = new Date(Date.now() + SESSION_LIFETIME_MS).toISOString();
+  database.prepare(`
+    INSERT INTO sessions (account_id, token_hash, expires_at)
+    VALUES (?, ?, ?)
+  `).run(accountId, tokenHash(token), expiresAt);
+  return token;
+}
+
+function currentSession(database, request) {
+  const token = bearerToken(request);
+  if (!token) return null;
+  return database.prepare(`
+    SELECT accounts.id AS accountId, accounts.username
+    FROM sessions
+    JOIN accounts ON accounts.id = sessions.account_id
+    WHERE sessions.token_hash = ? AND sessions.expires_at > CURRENT_TIMESTAMP
+  `).get(tokenHash(token)) ?? null;
+}
+
+function requireSession(database, request) {
+  const session = currentSession(database, request);
+  if (!session) throw apiError("Sign in required.", 401);
+  return session;
+}
+
+function clientAddress(request) {
+  return request.socket?.remoteAddress ?? "unknown";
+}
+
+function enforceAuthRateLimit(request) {
+  const now = Date.now();
+  const key = clientAddress(request);
+  const existing = authAttempts.get(key);
+  const bucket = existing && now - existing.startedAt < AUTH_WINDOW_MS
+    ? existing
+    : { startedAt: now, count: 0 };
+  bucket.count += 1;
+  authAttempts.set(key, bucket);
+  if (bucket.count > AUTH_ATTEMPTS_PER_WINDOW) {
+    throw apiError("Too many authentication attempts. Try again later.", 429);
+  }
+}
+
+function register(database, payload) {
+  const username = validateUsername(payload?.username);
+  const password = validatePassword(payload?.password);
+  const canonical = canonicalUsername(username);
+  if (database.prepare("SELECT id FROM accounts WHERE canonical_username = ?").get(canonical)) {
+    throw apiError("Account already exists.", 409);
+  }
+  const salt = randomBytes(16).toString("hex");
+  const result = database.prepare(`
+    INSERT INTO accounts (username, canonical_username, password_hash, password_salt)
+    VALUES (?, ?, ?, ?)
+  `).run(username, canonical, passwordDigest(password, salt), salt);
+  const accountId = Number(result.lastInsertRowid);
+  return { account: { id: accountId, username }, token: createSession(database, accountId) };
+}
+
+function login(database, payload) {
+  const canonical = canonicalUsername(payload?.username);
+  const password = String(payload?.password ?? "");
+  const account = database.prepare(`
+    SELECT id, username, password_hash AS passwordHash, password_salt AS passwordSalt
+    FROM accounts WHERE canonical_username = ?
+  `).get(canonical);
+  if (!account || !verifyPassword(password, account)) {
+    throw apiError("Username or password is incorrect.", 401);
+  }
+  return {
+    account: { id: account.id, username: account.username },
+    token: createSession(database, account.id),
+  };
+}
+
+function validateSlotId(value) {
+  const slotId = Number(value);
+  if (!Number.isInteger(slotId) || slotId < 1 || slotId > 3) throw apiError("Invalid save slot.");
+  return slotId;
+}
+
+function validateSave(value, slotId) {
+  if (!value || typeof value !== "object" || Number(value.schemaVersion) !== 5) {
+    throw apiError("Save snapshot is invalid.");
+  }
+  if (Number(value.slotId) !== slotId) throw apiError("Save slot does not match request.");
+  if (typeof value.hunterName !== "string" || !value.hunterName.trim()) {
+    throw apiError("Save snapshot has no hunter name.");
+  }
+  return value;
+}
+
+function normalizeNonNegativeInteger(value) {
+  const number = Math.floor(Number(value));
+  return Number.isFinite(number) ? Math.max(0, number) : 0;
+}
+
+function syncLeaderboardStats(database, accountId, slotId, save) {
+  database.prepare("DELETE FROM boss_kill_records WHERE account_id = ? AND slot_id = ?").run(accountId, slotId);
+  const insertBoss = database.prepare(`
+    INSERT INTO boss_kill_records (account_id, slot_id, boss_id, kills, updated_at)
+    VALUES (?, ?, ?, ?, CURRENT_TIMESTAMP)
+  `);
+  const bossKills = save.stats?.bossKills && typeof save.stats.bossKills === "object"
+    ? save.stats.bossKills
+    : {};
+  for (const [bossId, rawKills] of Object.entries(bossKills)) {
+    if (!/^[a-z0-9-]{1,64}$/.test(bossId)) continue;
+    const kills = normalizeNonNegativeInteger(rawKills);
+    if (kills > 0) insertBoss.run(accountId, slotId, bossId, kills);
+  }
+  const highestRound = normalizeNonNegativeInteger(save.stats?.highestRoguelikeRound);
+  database.prepare(`
+    INSERT INTO roguelike_records (account_id, slot_id, highest_round, updated_at)
+    VALUES (?, ?, ?, CURRENT_TIMESTAMP)
+    ON CONFLICT(account_id, slot_id) DO UPDATE SET
+      highest_round = excluded.highest_round,
+      updated_at = CURRENT_TIMESTAMP
+  `).run(accountId, slotId, highestRound);
+}
+
+function writeSave(database, accountId, slotId, rawSave) {
+  const save = validateSave(rawSave, slotId);
+  const serialized = JSON.stringify(save);
+  if (Buffer.byteLength(serialized) > MAX_JSON_BYTES) throw apiError("Save snapshot is too large.", 413);
+  database.exec("BEGIN IMMEDIATE");
+  try {
+    database.prepare(`
+      INSERT INTO hunter_saves (account_id, slot_id, hunter_name, save_json, updated_at)
+      VALUES (?, ?, ?, ?, CURRENT_TIMESTAMP)
+      ON CONFLICT(account_id, slot_id) DO UPDATE SET
+        hunter_name = excluded.hunter_name,
+        save_json = excluded.save_json,
+        updated_at = CURRENT_TIMESTAMP
+    `).run(accountId, slotId, save.hunterName.trim().slice(0, 20), serialized);
+    syncLeaderboardStats(database, accountId, slotId, save);
+    database.exec("COMMIT");
+  } catch (error) {
+    database.exec("ROLLBACK");
+    throw error;
+  }
+  return save;
+}
+
+function readSave(database, accountId, slotId) {
+  const row = database.prepare(`
+    SELECT save_json AS saveJson FROM hunter_saves WHERE account_id = ? AND slot_id = ?
+  `).get(accountId, slotId);
+  if (!row) return null;
+  try { return JSON.parse(row.saveJson); } catch { return null; }
+}
+
+function listSaves(database, accountId) {
+  return database.prepare(`
+    SELECT slot_id AS slotId, save_json AS saveJson, updated_at AS updatedAt
+    FROM hunter_saves WHERE account_id = ? ORDER BY slot_id
+  `).all(accountId).flatMap((row) => {
+    try { return [{ slotId: row.slotId, save: JSON.parse(row.saveJson), updatedAt: row.updatedAt }]; }
+    catch { return []; }
+  });
+}
+
+function leaderboardEntry(row, valueKey) {
+  return {
+    rank: row.rank,
+    username: row.username,
+    hunterName: row.hunterName,
+    slotId: row.slotId,
+    value: row[valueKey],
+  };
+}
+
+function bossLeaderboard(database, accountId, slotId, bossId) {
+  if (!/^[a-z0-9-]{1,64}$/.test(bossId)) throw apiError("Invalid boss.");
+  const rows = database.prepare(`
+    WITH ranked AS (
+      SELECT
+        RANK() OVER (ORDER BY records.kills DESC) AS rank,
+        records.account_id AS accountId,
+        records.slot_id AS slotId,
+        records.kills,
+        accounts.username,
+        saves.hunter_name AS hunterName,
+        records.updated_at AS updatedAt
+      FROM boss_kill_records records
+      JOIN accounts ON accounts.id = records.account_id
+      JOIN hunter_saves saves ON saves.account_id = records.account_id AND saves.slot_id = records.slot_id
+      WHERE records.boss_id = ?
+    )
+    SELECT * FROM ranked ORDER BY kills DESC, updatedAt ASC, accountId ASC, slotId ASC
+  `).all(bossId);
+  const current = rows.find((row) => row.accountId === accountId && row.slotId === slotId) ?? null;
+  return {
+    kind: "boss",
+    bossId,
+    top: rows.slice(0, 5).map((row) => leaderboardEntry(row, "kills")),
+    current: current ? leaderboardEntry(current, "kills") : null,
+  };
+}
+
+function roguelikeLeaderboard(database, accountId, slotId) {
+  const rows = database.prepare(`
+    WITH ranked AS (
+      SELECT
+        RANK() OVER (ORDER BY records.highest_round DESC) AS rank,
+        records.account_id AS accountId,
+        records.slot_id AS slotId,
+        records.highest_round AS highestRound,
+        accounts.username,
+        saves.hunter_name AS hunterName,
+        records.updated_at AS updatedAt
+      FROM roguelike_records records
+      JOIN accounts ON accounts.id = records.account_id
+      JOIN hunter_saves saves ON saves.account_id = records.account_id AND saves.slot_id = records.slot_id
+      WHERE records.highest_round > 0
+    )
+    SELECT * FROM ranked ORDER BY highestRound DESC, updatedAt ASC, accountId ASC, slotId ASC
+  `).all();
+  const current = rows.find((row) => row.accountId === accountId && row.slotId === slotId) ?? null;
+  return {
+    kind: "roguelike",
+    top: rows.slice(0, 5).map((row) => leaderboardEntry(row, "highestRound")),
+    current: current ? leaderboardEntry(current, "highestRound") : null,
+  };
+}
+
+export function createGameApiHandler(options = {}) {
+  const dataDirectory = resolve(options.dataDirectory ?? process.env.DATA_DIR ?? "data");
+  mkdirSync(dataDirectory, { recursive: true });
+  const database = new DatabaseSync(resolve(dataDirectory, "game.db"));
+  database.exec(readFileSync(new URL("../db/schema.sql", import.meta.url), "utf8"));
+
+  async function handle(request, response, next) {
+    if (!request.url?.startsWith("/api/")) return next();
+    setCorsHeaders(request, response);
+    if (request.method === "OPTIONS") {
+      response.statusCode = 204;
+      return response.end();
+    }
+    try {
+      database.prepare("DELETE FROM sessions WHERE expires_at <= CURRENT_TIMESTAMP").run();
+      const url = new URL(request.url, "http://localhost");
+      const path = url.pathname;
+
+      if (path === "/api/health" && request.method === "GET") {
+        return sendJson(response, 200, { ok: true, database: "ready" });
+      }
+      if (path === "/api/auth/register" && request.method === "POST") {
+        enforceAuthRateLimit(request);
+        return sendJson(response, 201, register(database, await readJson(request)));
+      }
+      if (path === "/api/auth/login" && request.method === "POST") {
+        enforceAuthRateLimit(request);
+        return sendJson(response, 200, login(database, await readJson(request)));
+      }
+      if (path === "/api/auth/session" && request.method === "GET") {
+        const session = currentSession(database, request);
+        return sendJson(response, session ? 200 : 401, session
+          ? { account: { id: session.accountId, username: session.username } }
+          : { error: "Sign in required." });
+      }
+      if (path === "/api/auth/logout" && request.method === "POST") {
+        const token = bearerToken(request);
+        if (token) database.prepare("DELETE FROM sessions WHERE token_hash = ?").run(tokenHash(token));
+        return sendJson(response, 200, { ok: true });
+      }
+
+      const session = requireSession(database, request);
+      if (path === "/api/saves" && request.method === "GET") {
+        return sendJson(response, 200, { slots: listSaves(database, session.accountId) });
+      }
+      const saveMatch = path.match(/^\/api\/saves\/([1-3])$/);
+      if (saveMatch && request.method === "GET") {
+        return sendJson(response, 200, { save: readSave(database, session.accountId, validateSlotId(saveMatch[1])) });
+      }
+      if (saveMatch && request.method === "PUT") {
+        const slotId = validateSlotId(saveMatch[1]);
+        const payload = await readJson(request);
+        return sendJson(response, 200, { save: writeSave(database, session.accountId, slotId, payload?.save) });
+      }
+      const bossMatch = path.match(/^\/api\/leaderboards\/boss\/([a-z0-9-]+)$/);
+      if (bossMatch && request.method === "GET") {
+        const slotId = validateSlotId(url.searchParams.get("slot"));
+        return sendJson(response, 200, bossLeaderboard(database, session.accountId, slotId, bossMatch[1]));
+      }
+      if (path === "/api/leaderboards/roguelike" && request.method === "GET") {
+        const slotId = validateSlotId(url.searchParams.get("slot"));
+        return sendJson(response, 200, roguelikeLeaderboard(database, session.accountId, slotId));
+      }
+      return sendJson(response, 404, { error: "API route not found." });
+    } catch (error) {
+      const status = Number(error?.status) || 500;
+      const message = status >= 500 ? "Server error." : error.message;
+      if (status >= 500) console.error(error);
+      return sendJson(response, status, { error: message });
+    }
+  }
+
+  return { handle, close: () => database.close() };
+}

server/game-api.test.mjs

@@ -0,0 +1,105 @@
+import assert from "node:assert/strict";
+import { mkdtempSync, rmSync } from "node:fs";
+import { createServer } from "node:http";
+import { tmpdir } from "node:os";
+import { join } from "node:path";
+import { after, before, test } from "node:test";
+import { createGameApiHandler } from "./game-api.mjs";
+
+const dataDirectory = mkdtempSync(join(tmpdir(), "iwt-heal-api-"));
+const api = createGameApiHandler({ dataDirectory });
+const server = createServer((request, response) => {
+  void api.handle(request, response, () => {
+    response.statusCode = 404;
+    response.end();
+  });
+});
+let baseUrl;
+
+before(async () => {
+  await new Promise((resolve) => server.listen(0, "127.0.0.1", resolve));
+  const address = server.address();
+  baseUrl = `http://127.0.0.1:${address.port}`;
+});
+
+after(async () => {
+  await new Promise((resolve) => server.close(resolve));
+  api.close();
+  rmSync(dataDirectory, { recursive: true, force: true });
+});
+
+async function json(path, init = {}) {
+  const response = await fetch(`${baseUrl}${path}`, init);
+  const body = await response.json();
+  return { response, body };
+}
+
+function save(slotId, hunterName, bulldromeKills, highestRoguelikeRound) {
+  return {
+    schemaVersion: 5,
+    slotId,
+    hunterName,
+    stats: { bossKills: { bulldrome: bulldromeKills }, highestRoguelikeRound },
+  };
+}
+
+test("health endpoint reports persistent database readiness", async () => {
+  const { response, body } = await json("/api/health");
+  assert.equal(response.status, 200);
+  assert.deepEqual(body, { ok: true, database: "ready" });
+});
+
+test("accounts, server saves, and top-five plus current rankings work end to end", async () => {
+  const players = [];
+  for (let index = 0; index < 6; index += 1) {
+    const username = `hunter_${index}`;
+    const registration = await json("/api/auth/register", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ username, password: `long-password-${index}` }),
+    });
+    assert.equal(registration.response.status, 201);
+    const token = registration.body.token;
+    const kills = 60 - index * 10;
+    const highestRound = 30 - index * 4;
+    const upload = await json("/api/saves/1", {
+      method: "PUT",
+      headers: { Authorization: `Bearer ${token}`, "Content-Type": "application/json" },
+      body: JSON.stringify({ save: save(1, `Hero ${index}`, kills, highestRound) }),
+    });
+    assert.equal(upload.response.status, 200);
+    players.push({ token, kills, highestRound });
+  }
+
+  const current = players[5];
+  const bossBoard = await json("/api/leaderboards/boss/bulldrome?slot=1", {
+    headers: { Authorization: `Bearer ${current.token}` },
+  });
+  assert.equal(bossBoard.body.top.length, 5);
+  assert.equal(bossBoard.body.top[0].value, 60);
+  assert.equal(bossBoard.body.current.rank, 6);
+  assert.equal(bossBoard.body.current.value, current.kills);
+
+  const rogueBoard = await json("/api/leaderboards/roguelike?slot=1", {
+    headers: { Authorization: `Bearer ${current.token}` },
+  });
+  assert.equal(rogueBoard.body.top.length, 5);
+  assert.equal(rogueBoard.body.current.rank, 6);
+  assert.equal(rogueBoard.body.current.value, current.highestRound);
+
+  const download = await json("/api/saves/1", {
+    headers: { Authorization: `Bearer ${current.token}` },
+  });
+  assert.equal(download.body.save.hunterName, "Hero 5");
+});
+
+test("invalid credentials cannot access server saves", async () => {
+  const login = await json("/api/auth/login", {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({ username: "hunter_0", password: "incorrect-password" }),
+  });
+  assert.equal(login.response.status, 401);
+  const saves = await json("/api/saves");
+  assert.equal(saves.response.status, 401);
+});

server/production.mjs

@@ -0,0 +1,62 @@
+import { createReadStream, existsSync, statSync } from "node:fs";
+import { createServer } from "node:http";
+import { extname, resolve, sep } from "node:path";
+import { fileURLToPath } from "node:url";
+import { createGameApiHandler } from "./game-api.mjs";
+
+const distPath = fileURLToPath(new URL("../dist", import.meta.url));
+const indexPath = resolve(distPath, "index.html");
+const host = process.env.HOST ?? "127.0.0.1";
+const port = Number(process.env.PORT ?? 4173);
+const contentTypes = {
+  ".css": "text/css; charset=utf-8",
+  ".glb": "model/gltf-binary",
+  ".html": "text/html; charset=utf-8",
+  ".ico": "image/x-icon",
+  ".jpeg": "image/jpeg",
+  ".jpg": "image/jpeg",
+  ".js": "text/javascript; charset=utf-8",
+  ".json": "application/json; charset=utf-8",
+  ".png": "image/png",
+  ".svg": "image/svg+xml",
+  ".webp": "image/webp",
+};
+
+function sendFile(response, filePath) {
+  response.statusCode = 200;
+  response.setHeader("Content-Type", contentTypes[extname(filePath).toLowerCase()] ?? "application/octet-stream");
+  response.setHeader("X-Content-Type-Options", "nosniff");
+  response.setHeader("Referrer-Policy", "same-origin");
+  response.setHeader("X-Frame-Options", "DENY");
+  createReadStream(filePath).pipe(response);
+}
+
+function serveStatic(request, response) {
+  let requestPath;
+  try { requestPath = decodeURIComponent(new URL(request.url, "http://localhost").pathname); }
+  catch { response.statusCode = 400; return response.end("Bad request"); }
+  const candidate = resolve(distPath, `.${requestPath}`);
+  const insideDist = candidate === distPath || candidate.startsWith(`${distPath}${sep}`);
+  if (insideDist && existsSync(candidate) && statSync(candidate).isFile()) return sendFile(response, candidate);
+  if (!existsSync(indexPath)) {
+    response.statusCode = 503;
+    return response.end("Build missing. Run pnpm build.");
+  }
+  return sendFile(response, indexPath);
+}
+
+const api = createGameApiHandler();
+const server = createServer((request, response) => {
+  void api.handle(request, response, () => serveStatic(request, response));
+});
+
+server.listen(port, host, () => console.log(`I Want To Heal listening on http://${host}:${port}`));
+
+function shutdown() {
+  server.close(() => {
+    api.close();
+    process.exit(0);
+  });
+}
+process.on("SIGINT", shutdown);
+process.on("SIGTERM", shutdown);

src/App.tsx

@@ -32,20 +32,24 @@ export default function App() {
   const touchActiveSave = useFrontendStore((state) => state.touchActiveSave);
   const updateActiveHealerInventory = useFrontendStore((state) => state.updateActiveHealerInventory);
   const recordBossVictory = useFrontendStore((state) => state.recordBossVictory);
+  const recordRoguelikeDefeat = useFrontendStore((state) => state.recordRoguelikeDefeat);
   const clearRecentRewards = useFrontendStore((state) => state.clearRecentRewards);
   const rewardedBossInstances = useRef(new Set<string>());
   const screenRef = useRef(screen);
   screenRef.current = screen;
   const leaveGame = useCallback(() => {
+    const { accountId, activeSlotId, uploadSlot } = useFrontendStore.getState();
     updateActiveHealerInventory(useGameStore.getState().inventory);
     touchActiveSave();
     navigate("home");
+    if (accountId && activeSlotId) void uploadSlot(activeSlotId);
   }, [navigate, touchActiveSave, updateActiveHealerInventory]);
   const launchGame = useCallback((bossIds: readonly BossId[], requestedDifficultySlug?: DifficultySlug) => {
     if (!hunter) return;
     const progress = hunter.healers[hunter.activeClassId];
-    const runMode = useFrontendStore.getState().selectedMode === "roguelike-pve" ? "roguelike" : "encounter";
+    const selectedMode = useFrontendStore.getState().selectedMode;
-    const launchDifficulty = runMode === "roguelike"
+    const runMode = selectedMode === "roguelike-pve" ? "roguelike" : selectedMode === "rogue-trials" ? "rogue-trials" : "encounter";
+    const launchDifficulty = runMode !== "encounter"
       ? "initiate"
       : requestedDifficultySlug ?? useFrontendStore.getState().selectedDifficultySlug;
     rewardedBossInstances.current.clear();
@@ -81,13 +85,16 @@ export default function App() {
       }
       if (startedFreshEncounter) clearRecentRewards();
       if (screenRef.current !== "game") return;
+      if (state.runMode === "roguelike" && state.phase === "defeat" && previousState.phase !== "defeat") {
+        recordRoguelikeDefeat(state.round);
+      }
       const bossCount = 1 + state.additionalBosses.length;
       if (state.boss.hp <= 0 && previousState.boss.hp > 0) {
         const primaryInstanceId = `boss-0-${state.boss.id}`;
         if (!rewardedBossInstances.current.has(primaryInstanceId)) {
           rewardedBossInstances.current.add(primaryInstanceId);
           const defeatedBefore = (state.round - 1) * bossCount;
-          const rewardDifficulty = state.runMode === "roguelike" && defeatedBefore >= 5 ? "veteran" : state.difficultySlug;
+          const rewardDifficulty = state.runMode !== "encounter" && defeatedBefore >= 5 ? "veteran" : state.difficultySlug;
           recordBossVictory(state.boss.id, rewardDifficulty);
         }
       }
@@ -98,15 +105,15 @@ export default function App() {
         if (!justDefeated || rewardedBossInstances.current.has(entry.instanceId)) continue;
         rewardedBossInstances.current.add(entry.instanceId);
         const defeatedBefore = (state.round - 1) * bossCount + index + 1;
-        const rewardDifficulty = state.runMode === "roguelike" && defeatedBefore >= 5 ? "veteran" : state.difficultySlug;
+        const rewardDifficulty = state.runMode !== "encounter" && defeatedBefore >= 5 ? "veteran" : state.difficultySlug;
         recordBossVictory(entry.boss.id, rewardDifficulty);
       }
     });
-  }, [clearRecentRewards, recordBossVictory]);
+  }, [clearRecentRewards, recordBossVictory, recordRoguelikeDefeat]);
 
   return (
-    <main className="prototype-shell">
+    <main className="app-shell">
-      <header className="prototype-header">
+      <header className="app-header">
         <div><span>THOR / DUAL DISPLAY</span><strong>I Want To Heal</strong></div>
         <p>Offline-first healer roguelike <i /> v{packageJson.version}</p>
       </header>

src/components/BossTrophyPortrait.tsx

@@ -0,0 +1,57 @@
+import { Canvas } from "@react-three/fiber";
+import { useGLTF } from "@react-three/drei";
+import { Suspense, useMemo } from "react";
+import * as THREE from "three";
+import { clone as cloneSkeleton } from "three/examples/jsm/utils/SkeletonUtils.js";
+import { BOSS_DEFINITIONS } from "../game/bossCatalog";
+import { ALTERNATE_BOSS_CONFIG, bossVisualUrl } from "../game/bossVisuals";
+import type { BossId } from "../game/types";
+
+function PortraitModel({ bossId }: { bossId: BossId }) {
+  const gltf = useGLTF(bossVisualUrl(bossId), false, true);
+  const model = useMemo(() => {
+    const clone = cloneSkeleton(gltf.scene);
+    clone.updateMatrixWorld(true);
+    const bounds = new THREE.Box3().setFromObject(clone);
+    const center = bounds.getCenter(new THREE.Vector3());
+    const size = bounds.getSize(new THREE.Vector3());
+    const scale = 2.35 / Math.max(size.x, size.y, size.z, 0.001);
+    clone.traverse((object) => {
+      if (object instanceof THREE.Mesh) {
+        object.castShadow = false;
+        object.receiveShadow = false;
+      }
+    });
+    return { clone, center, scale };
+  }, [gltf.scene]);
+
+  return (
+    <primitive
+      object={model.clone}
+      position={[-model.center.x * model.scale, -model.center.y * model.scale, -model.center.z * model.scale]}
+      rotation={[0, bossId === "bulldrome" ? 0.35 : ALTERNATE_BOSS_CONFIG[bossId].rotationOffset + 0.35, 0]}
+      scale={model.scale}
+    />
+  );
+}
+
+export function BossTrophyPortrait({ bossId }: { bossId: BossId }) {
+  const boss = BOSS_DEFINITIONS[bossId];
+  return (
+    <div className="trophy-portrait" aria-label={`${boss.name} portrait`} role="img">
+      <Canvas
+        camera={{ position: [3.4, 2.35, 4.8], zoom: 70, near: 0.1, far: 30 }}
+        dpr={1}
+        frameloop="demand"
+        gl={{ alpha: true, antialias: true, powerPreference: "low-power" }}
+        orthographic
+      >
+        <ambientLight intensity={1.9} />
+        <directionalLight color="#fff3cf" intensity={3.2} position={[3, 5, 4]} />
+        <directionalLight color={boss.accent} intensity={2.1} position={[-4, 2, -2]} />
+        <Suspense fallback={null}><PortraitModel bossId={bossId} /></Suspense>
+      </Canvas>
+      <span aria-hidden="true">{boss.icon}</span>
+    </div>
+  );
+}

src/components/BuffDraftPanel.tsx

@@ -1,25 +1,39 @@
-import { RUN_BUFFS, bossHealthMultiplier, effectiveRunBuffRank, formatRunBuffEffect } from "../game/roguelike";
+import { useEffect, useState } from "react";
+import { ROGUE_TRIALS_TRIO_ROUND, RUN_BUFFS, bossHealthMultiplier, effectiveRunBuffRank, formatRunBuffEffect } from "../game/roguelike";
 import { HEALER_CLASSES } from "../game/healers";
-import { useGameStore } from "../game/store";
+import { isRunBuffInputLocked, useGameStore } from "../game/store";
 
 export function BuffDraftPanel({ className = "" }: { className?: string }) {
   const round = useGameStore((state) => state.round);
+  const runMode = useGameStore((state) => state.runMode);
   const healerClassId = useGameStore((state) => state.healerClassId);
   const runBuffRanks = useGameStore((state) => state.runBuffRanks);
   const passiveRunBuffId = useGameStore((state) => state.passiveRunBuffId);
   const choices = useGameStore((state) => state.draftBuffIds);
   const selected = useGameStore((state) => state.selectedRunBuffId);
+  const inputUnlockAt = useGameStore((state) => state.runBuffInputUnlockAt);
   const setSelected = useGameStore((state) => state.setSelectedRunBuff);
   const choose = useGameStore((state) => state.chooseRunBuff);
   const continueRun = useGameStore((state) => state.continueRoguelikeRound);
   const nextRound = round + 1;
+  const nextBossCount = runMode === "rogue-trials" && nextRound === ROGUE_TRIALS_TRIO_ROUND ? 3 : 2;
   const abilities = HEALER_CLASSES[healerClassId].abilities;
+  const [inputLocked, setInputLocked] = useState(() => isRunBuffInputLocked(useGameStore.getState()));
+
+  useEffect(() => {
+    const remaining = inputUnlockAt - Date.now();
+    setInputLocked(remaining > 0);
+    if (remaining <= 0) return;
+    const timer = window.setTimeout(() => setInputLocked(false), remaining);
+    return () => window.clearTimeout(timer);
+  }, [inputUnlockAt]);
+
   return (
-    <div className={`buff-draft ${className}`.trim()} role="dialog" aria-modal="true" aria-label={`Choose a buff for round ${nextRound}`}>
+    <div className={`buff-draft ${inputLocked ? "is-input-locked" : ""} ${className}`.trim()} role="dialog" aria-modal="true" aria-label={`Choose a buff for round ${nextRound}`} aria-busy={inputLocked}>
       <header>
         <span>Round {round} cleared</span>
         <h2>Choose one blessing</h2>
-        <p>Claim required. Round {nextRound} begins with two new bosses at {Math.round(bossHealthMultiplier(nextRound) * 100)}% base HP.</p>
+        <p>Claim required. Round {nextRound} begins with {nextBossCount === 3 ? "an unseen trio" : "two new bosses"} at {Math.round(bossHealthMultiplier(nextRound) * 100)}% base HP.</p>
       </header>
       <div className={`buff-choice-grid choice-count-${choices.length}`}>
         {choices.length > 0 ? choices.map((buffId) => {
@@ -35,6 +49,7 @@ export function BuffDraftPanel({ className = "" }: { className?: string }) {
               onFocus={() => setSelected(buffId)}
               onPointerEnter={() => setSelected(buffId)}
               onClick={() => choose(buffId)}
+              disabled={inputLocked}
               aria-pressed={selected === buffId}
             >
               <i>{buff.icon}</i>
@@ -44,7 +59,7 @@ export function BuffDraftPanel({ className = "" }: { className?: string }) {
             </button>
           );
         }) : (
-          <button className="buff-mastery-continue is-controller-focused" onClick={continueRun}>
+          <button className="buff-mastery-continue is-controller-focused" onClick={continueRun} disabled={inputLocked}>
             <i>✦</i>
             <span><small>Full mastery</small><strong>Continue Without Buff</strong></span>
             <b>All 18 blessings reached maximum rank.</b>
@@ -52,7 +67,7 @@ export function BuffDraftPanel({ className = "" }: { className?: string }) {
           </button>
         )}
       </div>
-      <footer>{choices.length > 0 && <><b>← / →</b> Choose <i /></>} <b>A / ENTER</b> {choices.length > 0 ? "Claim" : "Continue"}</footer>
+      <footer>{inputLocked ? <b>Choices ready in a moment…</b> : <>{choices.length > 0 && <><b>← / →</b> Choose <i /></>} <b>A / ENTER</b> {choices.length > 0 ? "Claim" : "Continue"}</>}</footer>
     </div>
   );
 }

src/components/FrontEnd.tsx

@@ -1,4 +1,4 @@
-import { useMemo, useRef, useState } from "react";
+import { lazy, Suspense, useEffect, useMemo, useRef, useState } from "react";
 import { buildCollections, MAX_HUNTER_NAME_LENGTH, MODE_COPY, normalizeHunterName } from "../frontend/data";
 import { formatPlayTime, formatSaveTimestamp } from "../frontend/saveRepository";
 import { useActiveHunter, useFrontendStore } from "../frontend/store";
@@ -19,8 +19,10 @@ import {
   GEAR_STAT_LABELS,
   MAX_GEAR_LEVEL,
   canAffordGearUpgrade,
+  canUpgradeGearSlot,
   gearBonusText,
   gearUpgradeCosts,
+  type GearOwnerId,
 } from "../game/progression/gear";
 import { DIFFICULTIES, DIFFICULTY_BY_SLUG, bossGroupDrop } from "../game/progression/loot";
 import {
@@ -33,8 +35,11 @@ import {
   passiveInfusionUnlocked,
 } from "../game/progression/infusions";
 import { requestDisplaySurface } from "../platform/displayRouting";
+import { onlineRepository, type LeaderboardResult } from "../frontend/onlineRepository";
 import { DualDisplayFrame } from "./DualDisplayFrame";
 
+const BossTrophyPortrait = lazy(() => import("./BossTrophyPortrait").then((module) => ({ default: module.BossTrophyPortrait })));
+
 function FocusButton({
   id,
   focusedId,
@@ -75,6 +80,7 @@ function ControllerLegend({ back = false }: { back?: boolean }) {
 }
 
 function LoginScreen() {
+  const restoreSession = useFrontendStore((state) => state.restoreSession);
   const signIn = useFrontendStore((state) => state.signIn);
   const createAccount = useFrontendStore((state) => state.createAccount);
   const continueOffline = useFrontendStore((state) => state.continueOffline);
@@ -83,6 +89,12 @@ function LoginScreen() {
   const [password, setPassword] = useState("");
   const usernameRef = useRef<HTMLInputElement>(null);
   const passwordRef = useRef<HTMLInputElement>(null);
+  const restoreStarted = useRef(false);
+  useEffect(() => {
+    if (restoreStarted.current) return;
+    restoreStarted.current = true;
+    void restoreSession();
+  }, [restoreSession]);
   const actions = useMemo<MenuAction[]>(() => [
     { id: "username", run: () => usernameRef.current?.focus() },
     { id: "password", run: () => passwordRef.current?.focus() },
@@ -115,6 +127,9 @@ function LoginScreen() {
               onChange={(event) => setUsername(event.target.value)}
               onFocus={() => controller.focus("username")}
               autoComplete="username"
+              maxLength={20}
+              minLength={3}
+              pattern="[A-Za-z0-9_]+"
               required
             />
             <label htmlFor="account-password">Password</label>
@@ -127,6 +142,8 @@ function LoginScreen() {
               onChange={(event) => setPassword(event.target.value)}
               onFocus={() => controller.focus("password")}
               autoComplete="current-password"
+              maxLength={128}
+              minLength={10}
               required
             />
             <FocusButton id="sign-in" focusedId={controller.focusedId} focus={controller.focus} className="front-primary" type="submit">
@@ -150,8 +167,8 @@ function LoginScreen() {
             <span className="context-kicker">How saving works</span>
             <ol>
               <li><b>01</b><span><strong>Play offline</strong><small>Every change writes to device storage first.</small></span></li>
-              <li><b>02</b><span><strong>Create or sign in</strong><small>Username and password unlock online sync.</small></span></li>
+              <li><b>02</b><span><strong>Create or sign in</strong><small>Account is secured by the TrueNAS game server.</small></span></li>
-              <li><b>03</b><span><strong>Move devices</strong><small>Sign in, then upload or download an online copy.</small></span></li>
+              <li><b>03</b><span><strong>Move devices</strong><small>Upload or download any of your three server save slots.</small></span></li>
             </ol>
           </div>
           <div className="device-route"><span>PC</span><i>↔</i><b>ONLINE COPY</b><i>↔</i><span>THOR</span></div>
@@ -339,6 +356,7 @@ function SaveScreen() {
 
 const HOME_MODES: { id: GameModeId; icon: string; label: string; copy: string }[] = [
   { id: "roguelike-pve", icon: "✦", label: "PVE", copy: "Randomized roguelike runs" },
+  { id: "rogue-trials", icon: "Ⅲ", label: "Rogue Trials", copy: "Four rounds, then a boss trio" },
   { id: "dungeons", icon: "♜", label: "Dungeons", copy: "Choose your boss encounter" },
   { id: "roguelike-pvp", icon: "⚔", label: "Roguelike PvP", copy: "Draft, race, sabotage" },
   { id: "stadium-pvp", icon: "◉", label: "Stadium PvP", copy: "Prepared 5v5 rounds" },
@@ -351,10 +369,11 @@ function HomeScreen() {
   const selectHealerClass = useFrontendStore((state) => state.selectHealerClass);
   const navigate = useFrontendStore((state) => state.navigate);
   const actions = useMemo<MenuAction[]>(() => [
-    { id: "roguelike-pve", run: () => selectMode("roguelike-pve"), neighbors: { right: "dungeons", down: "roguelike-pvp" } },
+    { id: "roguelike-pve", run: () => selectMode("roguelike-pve"), neighbors: { right: "rogue-trials", down: "roguelike-pvp" } },
-    { id: "dungeons", run: () => selectMode("dungeons"), neighbors: { left: "roguelike-pve", down: "stadium-pvp" } },
+    { id: "rogue-trials", run: () => selectMode("rogue-trials"), neighbors: { left: "roguelike-pve", right: "dungeons", down: "stadium-pvp" } },
+    { id: "dungeons", run: () => selectMode("dungeons"), neighbors: { left: "rogue-trials", down: "stadium-pvp" } },
     { id: "roguelike-pvp", run: () => selectMode("roguelike-pvp"), neighbors: { left: "roguelike-pve", right: "stadium-pvp", up: "roguelike-pve", down: "profile" } },
-    { id: "stadium-pvp", run: () => selectMode("stadium-pvp"), neighbors: { left: "roguelike-pvp", up: "dungeons", down: "settings" } },
+    { id: "stadium-pvp", run: () => selectMode("stadium-pvp"), neighbors: { left: "roguelike-pvp", up: "rogue-trials", down: "settings" } },
     { id: "profile", run: () => navigate("profile"), neighbors: { up: "roguelike-pvp", right: "gear", down: "class-priest" } },
     { id: "gear", run: () => navigate("gear"), neighbors: { up: "roguelike-pvp", left: "profile", right: "settings", down: "class-druid" } },
     { id: "settings", run: () => navigate("settings"), neighbors: { up: "stadium-pvp", left: "gear", down: "class-shaman" } },
@@ -424,37 +443,119 @@ function HomeScreen() {
 
 function ProfileScreen() {
   const hunter = useActiveHunter();
+  const accountId = useFrontendStore((state) => state.accountId);
   const navigate = useFrontendStore((state) => state.navigate);
   const collections = useMemo(() => hunter ? buildCollections(hunter.collectionLog, hunter.stats.bossKills) : [], [hunter]);
   const [groupId, setGroupId] = useState(collections[0]?.groupId ?? "");
+  const [collectionView, setCollectionView] = useState<"loot" | "trophies" | "stats">("trophies");
   const collection = collections.find((group) => group.groupId === groupId) ?? collections[0];
+  const [selectedStat, setSelectedStat] = useState<BossId | "roguelike">("roguelike");
+  const [leaderboard, setLeaderboard] = useState<LeaderboardResult | null>(null);
+  const [leaderboardStatus, setLeaderboardStatus] = useState("");
+  useEffect(() => {
+    if (selectedStat === "roguelike" || collection?.bosses.some((boss) => boss.bossId === selectedStat)) return;
+    setSelectedStat(collection?.bosses[0]?.bossId ?? "roguelike");
+  }, [collection, selectedStat]);
+  useEffect(() => {
+    if (!hunter || collectionView !== "stats") return;
+    if (!accountId) {
+      setLeaderboard(null);
+      setLeaderboardStatus("Sign in to view overall rankings.");
+      return;
+    }
+    let cancelled = false;
+    setLeaderboardStatus("Loading overall rankings…");
+    const request = selectedStat === "roguelike"
+      ? onlineRepository.roguelikeLeaderboard(hunter.slotId)
+      : onlineRepository.bossLeaderboard(selectedStat, hunter.slotId);
+    void request.then((result) => {
+      if (cancelled) return;
+      setLeaderboard(result);
+      setLeaderboardStatus("");
+    }).catch((error) => {
+      if (cancelled) return;
+      setLeaderboard(null);
+      setLeaderboardStatus(error instanceof Error ? error.message : "Leaderboard unavailable.");
+    });
+    return () => { cancelled = true; };
+  }, [accountId, collectionView, hunter, selectedStat]);
   const actions = useMemo<MenuAction[]>(() => [
+    { id: "view-trophies", run: () => setCollectionView("trophies"), neighbors: { right: "view-stats" } },
+    { id: "view-stats", run: () => setCollectionView("stats"), neighbors: { left: "view-trophies", right: "view-loot", down: collectionView === "stats" ? "stat-roguelike" : undefined } },
+    { id: "view-loot", run: () => setCollectionView("loot"), neighbors: { left: "view-stats" } },
+    ...(collectionView === "stats" ? [
+      { id: "stat-roguelike", run: () => setSelectedStat("roguelike"), neighbors: { up: "view-stats", down: `stat-${collection.bosses[0].bossId}` } },
+      ...collection.bosses.map((boss, index) => ({
+        id: `stat-${boss.bossId}`,
+        run: () => setSelectedStat(boss.bossId),
+        neighbors: {
+          up: index === 0 ? "stat-roguelike" : `stat-${collection.bosses[index - 1].bossId}`,
+          down: index === collection.bosses.length - 1 ? `group-${collection.groupId}` : `stat-${collection.bosses[index + 1].bossId}`,
+        },
+      })),
+    ] : []),
     ...collections.map((group) => ({ id: `group-${group.groupId}`, run: () => setGroupId(group.groupId) })),
     { id: "back", run: () => navigate("home") },
-  ], [collections, navigate]);
+  ], [collection, collectionView, collections, navigate]);
   const controller = useMenuController(actions, { onBack: () => navigate("home") });
   if (!hunter || !collection) return null;
   const activeHealer = HEALER_CLASSES[hunter.activeClassId];
   const activeProgress = hunter.healers[hunter.activeClassId];
   const earned = collection.drops.filter((drop) => drop.count > 0).length;
+  const trophiesEarned = collection.bosses.filter((boss) => boss.pet.count > 0).length;
 
   return (
     <DualDisplayFrame
       top={
         <FrontSurface className="profile-surface" ariaLabel="Hunter profile collection log">
-          <header className="front-screen-header"><BrandMark compact /><div><span>Hunter profile</span><h1>Collection log</h1></div><FocusButton id="back" focusedId={controller.focusedId} focus={controller.focus} className="header-back" onClick={() => navigate("home")}>B · Back</FocusButton></header>
+          <header className="front-screen-header profile-header"><BrandMark compact /><div><span>Hunter profile</span><h1>Collection log</h1></div><div className="profile-view-tabs" role="tablist" aria-label="Collection view">
-          <div className="collection-heading"><span><small>Shared group drops · Core: {collection.coreMechanic}</small><h2>Group {collection.groupLetter} · {collection.groupName}</h2></span><b>{earned} / {collection.drops.length} discovered</b></div>
+            <FocusButton id="view-trophies" focusedId={controller.focusedId} focus={controller.focus} className={collectionView === "trophies" ? "is-selected" : ""} role="tab" aria-selected={collectionView === "trophies"} onClick={() => setCollectionView("trophies")}>Trophy Case</FocusButton>
-          <div className="collection-grid">
+            <FocusButton id="view-stats" focusedId={controller.focusedId} focus={controller.focus} className={collectionView === "stats" ? "is-selected" : ""} role="tab" aria-selected={collectionView === "stats"} onClick={() => setCollectionView("stats")}>Boss Stats</FocusButton>
-            {collection.drops.map((drop) => (
+            <FocusButton id="view-loot" focusedId={controller.focusedId} focus={controller.focus} className={collectionView === "loot" ? "is-selected" : ""} role="tab" aria-selected={collectionView === "loot"} onClick={() => setCollectionView("loot")}>Group Loot</FocusButton>
-              <article key={drop.id} className={`collection-drop rarity-${drop.rarity.toLowerCase()} ${drop.count === 0 ? "is-missing" : ""}`}>
+          </div><FocusButton id="back" focusedId={controller.focusedId} focus={controller.focus} className="header-back" onClick={() => navigate("home")}>B · Back</FocusButton></header>
-                <span className="drop-icon">{drop.icon}<b>{drop.count}</b></span>
+          {collectionView === "loot" ? <>
-                <small>{drop.rarity}</small><strong>{drop.name}</strong>
+            <div className="collection-heading"><span><small>Shared group drops · Core: {collection.coreMechanic}</small><h2>Group {collection.groupLetter} · {collection.groupName}</h2></span><b>{earned} / {collection.drops.length} discovered</b></div>
-                <p>{drop.count ? `${drop.count} earned` : collection.defeated ? "Not yet earned" : `Defeat a Group ${collection.groupLetter} boss`}</p>
+            <div className="collection-grid">
-                <small>{drop.chance}{drop.itemLevel ? ` · iLvl ${drop.itemLevel}` : ""}</small>
+              {collection.drops.map((drop) => (
-              </article>
+                <article key={drop.id} className={`collection-drop rarity-${drop.rarity.toLowerCase()} ${drop.count === 0 ? "is-missing" : ""}`}>
-            ))}
+                  <span className="drop-icon">{drop.icon}<b>{drop.count}</b></span>
-          </div>
+                  <small>{drop.rarity}</small><strong>{drop.name}</strong>
-          <div className="collection-note"><i>✦</i><span><strong>Boss pets stay individual.</strong><small>{collection.bosses.map((boss) => `${boss.bossName}: ${boss.kills} kills · ${boss.pet.count} pets`).join("  ·  ")}</small></span></div>
+                  <p>{drop.count ? `${drop.count} earned` : collection.defeated ? "Not yet earned" : `Defeat a Group ${collection.groupLetter} boss`}</p>
+                  <small>{drop.chance}{drop.itemLevel ? ` · iLvl ${drop.itemLevel}` : ""}</small>
+                </article>
+              ))}
+            </div>
+            <div className="collection-note"><i>✦</i><span><strong>Boss pets stay individual.</strong><small>Open Trophy Case to inspect every guardian pet.</small></span></div>
+          </> : collectionView === "trophies" ? <>
+            <div className="collection-heading trophy-heading"><span><small>Boss pets · 1 in 500 per victory</small><h2>Group {collection.groupLetter} · {collection.groupName}</h2></span><b>{trophiesEarned} / {collection.bosses.length} trophies lit</b></div>
+            <div className={`trophy-case trophy-count-${collection.bosses.length}`}>
+              {collection.bosses.map((boss) => {
+                const owned = boss.pet.count > 0;
+                return <article key={boss.bossId} className={`boss-trophy ${owned ? "is-owned" : "is-locked"}`} style={{ "--boss-accent": BOSS_DEFINITIONS[boss.bossId].accent } as React.CSSProperties}>
+                  <Suspense fallback={<div className="trophy-portrait trophy-portrait-fallback" role="img" aria-label={`${boss.bossName} portrait`}><span>{BOSS_DEFINITIONS[boss.bossId].icon}</span></div>}><BossTrophyPortrait bossId={boss.bossId} /></Suspense>
+                  <div className="trophy-plaque"><small>{owned ? "Pet secured" : "Pet undiscovered"}</small><strong>{boss.bossName}</strong><span>{boss.kills} kills · {boss.pet.chance}</span></div>
+                  <b className="trophy-state">{owned ? `Owned${boss.pet.count > 1 ? ` ×${boss.pet.count}` : ""}` : "Locked"}</b>
+                </article>;
+              })}
+            </div>
+            <div className="collection-note trophy-note"><i>♛</i><span><strong>Each guardian keeps its own trophy.</strong><small>Defeat that boss for a 1 in 500 pet roll.</small></span></div>
+          </> : <>
+            <div className="collection-heading boss-stats-heading"><span><small>Lifetime records · Overall leaderboards</small><h2>Boss Stats</h2></span><b>Highest roguelike round {hunter.stats.highestRoguelikeRound}</b></div>
+            <div className="boss-stats-layout">
+              <section className="boss-stat-selector" aria-label="Boss statistic selection">
+                <FocusButton id="stat-roguelike" focusedId={controller.focusedId} focus={controller.focus} className={selectedStat === "roguelike" ? "is-selected" : ""} onClick={() => setSelectedStat("roguelike")}><i>∞</i><span><strong>Roguelike</strong><small>Highest round before defeat</small></span><b>{hunter.stats.highestRoguelikeRound}</b></FocusButton>
+                {collection.bosses.map((boss) => <FocusButton key={boss.bossId} id={`stat-${boss.bossId}`} focusedId={controller.focusedId} focus={controller.focus} className={selectedStat === boss.bossId ? "is-selected" : ""} onClick={() => setSelectedStat(boss.bossId)}><i>{BOSS_DEFINITIONS[boss.bossId].icon}</i><span><strong>{boss.bossName}</strong><small>Lifetime boss kills</small></span><b>{boss.kills}</b></FocusButton>)}
+              </section>
+              <section className="leaderboard-panel" aria-label="Overall leaderboard">
+                <header><span><small>Overall Top 5</small><strong>{selectedStat === "roguelike" ? "Roguelike rounds" : BOSS_DEFINITIONS[selectedStat].name}</strong></span><b>{selectedStat === "roguelike" ? `${hunter.stats.highestRoguelikeRound} best` : `${hunter.stats.bossKills[selectedStat] ?? 0} kills`}</b></header>
+                {leaderboardStatus ? <div className="leaderboard-status">{leaderboardStatus}</div> : <div className="leaderboard-rows">
+                  {leaderboard?.top.length ? leaderboard.top.map((entry) => <div key={`${entry.username}-${entry.slotId}`} className={entry.username === accountId && entry.slotId === hunter.slotId ? "is-you" : ""}><b>#{entry.rank}</b><span><strong>{entry.hunterName}</strong><small>{entry.username}</small></span><em>{entry.value}</em></div>) : <div className="leaderboard-empty">No ranked hunters yet.</div>}
+                </div>}
+                <div className="leaderboard-self"><b>{leaderboard?.current ? `#${leaderboard.current.rank}` : "—"}</b><span><strong>Your rank · {hunter.hunterName}</strong><small>{accountId ?? "Offline hunter"}</small></span><em>{selectedStat === "roguelike" ? hunter.stats.highestRoguelikeRound : hunter.stats.bossKills[selectedStat] ?? 0}</em></div>
+              </section>
+            </div>
+            <div className="collection-note trophy-note"><i>◆</i><span><strong>Rankings update with server saves.</strong><small>Top five always shown; your row stays visible at any rank.</small></span></div>
+          </>}
         </FrontSurface>
       }
       bottom={
@@ -465,6 +566,7 @@ function ProfileScreen() {
             <span><small>Flawless clears</small><strong>{hunter.stats.flawlessClears}</strong></span>
             <span><small>Allies saved</small><strong>{hunter.stats.alliesSaved}</strong></span>
             <span><small>Healing done</small><strong>{hunter.stats.healingDone.toLocaleString()}</strong></span>
+            <span><small>Highest roguelike round</small><strong>{hunter.stats.highestRoguelikeRound}</strong></span>
           </div>
           <div className="boss-log"><span>Mechanic groups</span>{collections.map((group) => (
             <FocusButton key={group.groupId} id={`group-${group.groupId}`} focusedId={controller.focusedId} focus={controller.focus} className={group.groupId === collection.groupId ? "is-selected" : ""} onClick={() => setGroupId(group.groupId)}>
@@ -497,9 +599,23 @@ function GearScreen() {
   const installInfusion = useFrontendStore((state) => state.equipSelectedInfusion);
   const installPassive = useFrontendStore((state) => state.equipPassiveInfusion);
   const slot = hunter?.gearProgress[selectedOwnerId].slots[selectedSlotId];
+  const upgradeReadiness = useMemo(() => {
+    const owners = new Set<GearOwnerId>();
+    const slots = new Set<string>();
+    if (!hunter) return { owners, slots };
+
+    for (const ownerId of GEAR_OWNER_ORDER) {
+      for (const slotId of GEAR_SLOT_ORDER) {
+        if (!canUpgradeGearSlot(hunter.gearProgress, hunter.materials, ownerId, slotId)) continue;
+        owners.add(ownerId);
+        slots.add(`${ownerId}:${slotId}`);
+      }
+    }
+    return { owners, slots };
+  }, [hunter]);
   const recipe = GEAR_RECIPES[selectedOwnerId][selectedSlotId];
   const costs = hunter && slot ? gearUpgradeCosts(selectedOwnerId, selectedSlotId, slot.level) : [];
-  const canUpgrade = Boolean(hunter && slot && slot.level < MAX_GEAR_LEVEL && canAffordGearUpgrade(hunter.materials, costs));
+  const canUpgrade = upgradeReadiness.slots.has(`${selectedOwnerId}:${selectedSlotId}`);
   const infusionChoices = infusionsForOwner(selectedOwnerId);
   const selectedInfusion = infusionChoices.find((choice) => choice.id === selectedInfusionId) ?? infusionChoices[0];
   const selectedInfusionCosts = hunter ? infusionCosts(selectedOwnerId, selectedSlotId, selectedInfusion.id) : [];
@@ -590,14 +706,16 @@ function GearScreen() {
             <section className="gear-owner-list" aria-label="Party gear owners">
               {GEAR_OWNER_ORDER.map((ownerId) => {
                 const highest = Math.max(...GEAR_SLOT_ORDER.map((slotId) => hunter.gearProgress[ownerId].slots[slotId].level));
-                return <FocusButton key={ownerId} id={`owner-${ownerId}`} focusedId={controller.focusedId} focus={controller.focus} className={ownerId === selectedOwnerId ? "is-selected" : ""} onClick={() => selectOwner(ownerId)}><span><strong>{GEAR_OWNER_LABELS[ownerId]}</strong><small>Highest slot +{highest}</small></span><b>{ownerId === selectedOwnerId ? "✓" : ""}</b></FocusButton>;
+                const upgradeReady = upgradeReadiness.owners.has(ownerId);
+                return <FocusButton key={ownerId} id={`owner-${ownerId}`} focusedId={controller.focusedId} focus={controller.focus} aria-label={`${GEAR_OWNER_LABELS[ownerId]}${upgradeReady ? ", upgrade available" : ""}`} className={`${ownerId === selectedOwnerId ? "is-selected" : ""} ${upgradeReady ? "is-upgrade-ready" : ""}`} onClick={() => selectOwner(ownerId)}><span><strong>{GEAR_OWNER_LABELS[ownerId]}</strong><small>Highest slot +{highest}</small></span><b>{ownerId === selectedOwnerId ? "✓" : ""}</b></FocusButton>;
               })}
             </section>
             <section className="gear-slot-list" aria-label={`${GEAR_OWNER_LABELS[selectedOwnerId]} gear slots`}>
               {GEAR_SLOT_ORDER.map((slotId) => {
                 const progress = hunter.gearProgress[selectedOwnerId].slots[slotId];
                 const slotRecipe = GEAR_RECIPES[selectedOwnerId][slotId];
-                return <FocusButton key={slotId} id={`slot-${slotId}`} focusedId={controller.focusedId} focus={controller.focus} className={slotId === selectedSlotId ? "is-selected" : ""} onClick={() => selectSlot(slotId)}><i>{slotId === "weapon" ? "⚔" : slotId === "helmet" ? "♙" : slotId === "chest" ? "▧" : slotId === "legs" ? "Ⅱ" : "⌁"}</i><span><strong>{GEAR_SLOT_LABELS[slotId]}</strong><small>{GEAR_STAT_LABELS[slotRecipe.statId]}</small></span><b>+{progress.level}</b></FocusButton>;
+                const upgradeReady = upgradeReadiness.slots.has(`${selectedOwnerId}:${slotId}`);
+                return <FocusButton key={slotId} id={`slot-${slotId}`} focusedId={controller.focusedId} focus={controller.focus} aria-label={`${GEAR_SLOT_LABELS[slotId]} +${progress.level}${upgradeReady ? ", upgrade available" : ""}`} className={`${slotId === selectedSlotId ? "is-selected" : ""} ${upgradeReady ? "is-upgrade-ready" : ""}`} onClick={() => selectSlot(slotId)}><i>{slotId === "weapon" ? "⚔" : slotId === "helmet" ? "♙" : slotId === "chest" ? "▧" : slotId === "legs" ? "Ⅱ" : "⌁"}</i><span><strong>{GEAR_SLOT_LABELS[slotId]}</strong><small>{GEAR_STAT_LABELS[slotRecipe.statId]}</small></span><b>+{progress.level}</b></FocusButton>;
               })}
             </section>
             {workshopMode === "upgrade" ? <article className="gear-preview">
@@ -692,7 +810,7 @@ function SettingsScreen() {
             <div className="pad-diagram"><i>↑</i><span>←<b>●</b>→</span><i>↓</i></div>
             <div className="face-diagram"><i className="y">Y</i><span><i className="x">X</i><b>●</b><i className="b">B</i></span><i className="a">A</i></div>
           </div>
-          <div className="mapping-list"><span><b>A</b> Confirm / cast Purify</span><span><b>B</b> Back / cast Shield</span><span><b>D-Pad</b> Navigate / target party</span><span><b>Start</b> Pause / menu</span></div>
+          <div className="mapping-list"><span><b>A</b> Confirm / cast Purify</span><span><b>B</b> Back / cast Shield</span><span><b>D-Pad</b> Navigate / target party</span><span><b>Right stick</b> Rotate camera</span><span><b>Start</b> Pause / menu</span></div>
           <div className="control-assurance"><i>✓</i><span><strong>No click-to-focus required</strong><small>Controller input routes through app-level actions.</small></span></div>
         </FrontSurface>
       }
@@ -715,6 +833,8 @@ function ModeScreen({ onLaunch }: { onLaunch: (bossIds: readonly BossId[], diffi
   const selectedBoss = BOSS_DEFINITIONS[selectedBossId];
   const selectedDifficulty = DIFFICULTY_BY_SLUG[selectedDifficultySlug];
   const isPve = modeId === "roguelike-pve";
+  const isRogueTrials = modeId === "rogue-trials";
+  const isPveRun = isPve || isRogueTrials;
   const isDungeon = modeId === "dungeons";
   const selectedBossGroup = BOSS_GROUP_BY_ID[selectedBoss.groupId];
   const visibleBossIds = selectedBossGroup.bossIds;
@@ -723,9 +843,9 @@ function ModeScreen({ onLaunch }: { onLaunch: (bossIds: readonly BossId[], diffi
     selectBoss(BOSS_GROUP_BY_ID[groupId].bossIds[0]);
   };
   const launch = () => {
-    if (isPve) return onLaunch(selectRandomBossPair(), "initiate");
+    if (isPveRun) return onLaunch(selectRandomBossPair(), "initiate");
     if (isDungeon) return onLaunch([selectedBossId], selectedDifficultySlug);
-    setMessage("Online matchmaking connects here when game server is configured.");
+    setMessage("Online matchmaking is not available for this mode yet.");
   };
   const actions = useMemo<MenuAction[]>(() => [
     ...(isDungeon ? BOSS_GROUPS.map((group, index) => {
@@ -775,15 +895,21 @@ function ModeScreen({ onLaunch }: { onLaunch: (bossIds: readonly BossId[], diffi
     })) : []),
     { id: "launch", run: launch, neighbors: isDungeon ? { up: `difficulty-${DIFFICULTIES[DIFFICULTIES.length - 1].slug}` } : { up: "back" } },
     { id: "back", run: () => navigate("home"), neighbors: isDungeon ? { down: `boss-group-${selectedBossGroup.id}` } : { down: "launch" } },
-  ], [bossGridColumns, isDungeon, isPve, modeId, navigate, onLaunch, selectBoss, selectDifficulty, selectedBossGroup, selectedBossId, selectedDifficultySlug, visibleBossIds]);
+  ], [bossGridColumns, isDungeon, isPveRun, modeId, navigate, onLaunch, selectBoss, selectDifficulty, selectedBossGroup, selectedBossId, selectedDifficultySlug, visibleBossIds]);
   const controller = useMenuController(actions, { onBack: () => navigate("home") });
-  const launchLabel = isPve ? "Begin randomized run" : isDungeon ? `Challenge ${selectedBoss.name}` : "Enter matchmaking";
+  const launchLabel = isRogueTrials ? "Begin Rogue Trials" : isPve ? "Begin randomized run" : isDungeon ? `Challenge ${selectedBoss.name}` : "Enter matchmaking";
   const contextRules = isDungeon
     ? [
       [selectedBoss.name, selectedBoss.summary],
       [bossMechanicName(selectedBoss.mechanicIds[0]), selectedBoss.briefing],
       [bossMechanicName(selectedBoss.mechanicIds[1]), "Controller-ready party behavior and full lower-display support."],
     ]
+    : isRogueTrials
+      ? [
+        ["Four dual rounds", "Clear four randomized pairs while drafting one stacking buff after each win."],
+        ["Unseen trio finale", "Round 5 selects three bosses that have not appeared earlier in that run."],
+        ["Trial victory", "Defeat all three final bosses together to complete Rogue Trials."],
+      ]
     : isPve
       ? [
         ["Randomized pair", "Two distinct bosses are selected only when the run begins."],

src/components/GameScene.tsx

@@ -6,7 +6,19 @@ import { getControllerMovement } from "../input/controller";
 import { clone as cloneSkeleton } from "three/examples/jsm/utils/SkeletonUtils.js";
 import { ARENA_CENTER, clampToArena } from "../game/arena";
 import { BOSS_ARCHETYPE_BY_ID } from "../game/bossCatalog";
+import { ALTERNATE_BOSS_CONFIG, BULL_URL, type AlternateBossKind } from "../game/bossVisuals";
 import { bossAnimationCue } from "../game/bosses/mechanicPool";
+import {
+  CAMERA_FOCUS_HEIGHT,
+  CAMERA_LOOK_AHEAD,
+  CAMERA_ORBIT_DISTANCE,
+  DEFAULT_CAMERA_PITCH,
+  DEFAULT_CAMERA_YAW,
+  setCameraRelativeMovement,
+  updateCameraOrbit,
+  type CameraOrbitState,
+  type PlanarMovement,
+} from "../game/cameraOrbit";
 import {
   isActorAnimationOneShot,
   shouldStartActorAnimation,
@@ -17,43 +29,8 @@ import { useGameStore } from "../game/store";
 import type { BossId, MemberId, PulseKind } from "../game/types";
 import { BossRoom } from "./BossRoom";
 import { BossMechanicIndicators } from "./boss/BossMechanicIndicators";
+import { bossCanTrackTarget } from "./boss/bossDeathVisuals";
 
-const BULL_URL = new URL("../assets/game/models/claudecraft/creatures/bull.glb", import.meta.url).href;
-const SANDGLASS_URL = new URL("../assets/game/models/original/bosses/sandglass-scorpion/sandglass-scorpion.glb", import.meta.url).href;
-const CRYSTAL_BAT_MATRIARCH_URL = new URL("../assets/game/models/original/bosses/crystal-bat-matriarch/crystal-bat-matriarch.glb", import.meta.url).href;
-const CRAGCLAW_URL = new URL("../assets/game/models/claudecraft/creatures/crabenemy.glb", import.meta.url).href;
-const MOURNVEIL_URL = new URL("../assets/game/models/claudecraft/creatures/ghost.glb", import.meta.url).href;
-const CROWNSHARD_URL = new URL("../assets/game/models/claudecraft/creatures/golelingevolved.glb", import.meta.url).href;
-const CLAUDE_BOSS_URLS: Record<Exclude<BossId,
-  | "bulldrome"
-  | "sandglass-scorpion"
-  | "cragclaw-crab"
-  | "mournveil-ghost"
-  | "crownshard-golem"
-  | "crystal-bat-matriarch"
->, string> = {
-  "stormwool-alpaca": new URL("../assets/game/models/claudecraft/creatures/alpaca.glb", import.meta.url).href,
-  "cluckhorn-colossus": new URL("../assets/game/models/claudecraft/creatures/chicken_cow.glb", import.meta.url).href,
-  "ashwing-demon": new URL("../assets/game/models/claudecraft/creatures/demon.glb", import.meta.url).href,
-  "riftclaw-demon": new URL("../assets/game/models/claudecraft/creatures/demonalt.glb", import.meta.url).href,
-  "tempestscale-dragon": new URL("../assets/game/models/claudecraft/creatures/dragonevolved.glb", import.meta.url).href,
-  emberfox: new URL("../assets/game/models/claudecraft/creatures/fox.glb", import.meta.url).href,
-  "mirelord-frog": new URL("../assets/game/models/claudecraft/creatures/frog.glb", import.meta.url).href,
-  "stonebreaker-giant": new URL("../assets/game/models/claudecraft/creatures/giant.glb", import.meta.url).href,
-  "glub-sovereign": new URL("../assets/game/models/claudecraft/creatures/glubevolved.glb", import.meta.url).href,
-  "scrapking-goblin": new URL("../assets/game/models/claudecraft/creatures/goblin.glb", import.meta.url).href,
-  "warcaller-orc": new URL("../assets/game/models/claudecraft/creatures/orc.glb", import.meta.url).href,
-  "tuskmaw-orc": new URL("../assets/game/models/claudecraft/creatures/orcenemy.glb", import.meta.url).href,
-  "broodfang-spider": new URL("../assets/game/models/claudecraft/creatures/spider.glb", import.meta.url).href,
-  "silkfang-spider": new URL("../assets/game/models/claudecraft/creatures/spider.glb", import.meta.url).href,
-  "thorncrown-stag": new URL("../assets/game/models/claudecraft/creatures/stag.glb", import.meta.url).href,
-  "sky-totem": new URL("../assets/game/models/claudecraft/creatures/tribal.glb", import.meta.url).href,
-  "razorcrest-raptor": new URL("../assets/game/models/claudecraft/creatures/velociraptor.glb", import.meta.url).href,
-  "bristlequake-boar": new URL("../assets/game/models/claudecraft/creatures/wild_boar.glb", import.meta.url).href,
-  "moonfang-wolf": new URL("../assets/game/models/claudecraft/creatures/wolf.glb", import.meta.url).href,
-  "frostmaw-yeti": new URL("../assets/game/models/claudecraft/creatures/yeti.glb", import.meta.url).href,
-  "rimeclaw-yeti": new URL("../assets/game/models/claudecraft/creatures/yetialt.glb", import.meta.url).href,
-};
 const PARTY_MODEL_URLS: Record<MemberId, string> = {
   aelia: new URL("../assets/game/models/claudecraft/chars/players/druid.glb", import.meta.url).href,
   brann: new URL("../assets/game/models/claudecraft/chars/players/knight.glb", import.meta.url).href,
@@ -428,6 +405,8 @@ function PlayerCharacter() {
   const castingUntil = useRef(0);
   const instantCastTrigger = useRef(0);
   const desiredCameraPosition = useMemo(() => new THREE.Vector3(), []);
+  const cameraOrbit = useRef<CameraOrbitState>({ yaw: DEFAULT_CAMERA_YAW, pitch: DEFAULT_CAMERA_PITCH });
+  const cameraRelativeMovement = useRef<PlanarMovement>({ x: 0, z: 0 });
 
   useEffect(() => {
     const start = useGameStore.getState().partyPositions.aelia;
@@ -451,7 +430,11 @@ function PlayerCharacter() {
       const nudgeX = Number(key === "d") - Number(key === "a");
       const nudgeZ = Number(key === "s") - Number(key === "w");
       if (!nudgeX && !nudgeZ) return;
-      const next = clampToArena([group.current.position.x + nudgeX * 0.18, group.current.position.z + nudgeZ * 0.18]);
+      setCameraRelativeMovement(cameraRelativeMovement.current, nudgeX, nudgeZ, cameraOrbit.current.yaw);
+      const next = clampToArena([
+        group.current.position.x + cameraRelativeMovement.current.x * 0.18,
+        group.current.position.z + cameraRelativeMovement.current.z * 0.18,
+      ]);
       group.current.position.x = next[0];
       group.current.position.z = next[1];
       setPlayerPosition([group.current.position.x, group.current.position.z]);
@@ -476,9 +459,16 @@ function PlayerCharacter() {
       inputX = Number(keys.current.has("d")) - Number(keys.current.has("a"));
       inputZ = Number(keys.current.has("s")) - Number(keys.current.has("w"));
       const controller = getControllerMovement();
-      inputX += controller.x;
+      inputX += controller.moveX;
-      inputZ += controller.y;
+      inputZ += controller.moveY;
     }
+    const controller = getControllerMovement();
+    if (state.phase === "combat" && !state.paused) {
+      updateCameraOrbit(cameraOrbit.current, controller.lookX, controller.lookY, delta);
+    }
+    setCameraRelativeMovement(cameraRelativeMovement.current, inputX, inputZ, cameraOrbit.current.yaw);
+    inputX = cameraRelativeMovement.current.x;
+    inputZ = cameraRelativeMovement.current.z;
     const length = Math.hypot(inputX, inputZ);
     if (length > 0.05) {
       const speed = 4.6 * state.gearModifiers.aelia.moveSpeed * delta / Math.max(1, length);
@@ -518,9 +508,20 @@ function PlayerCharacter() {
             : "idle";
     group.current.position.y = THREE.MathUtils.lerp(group.current.position.y, 0.025, 0.16);
 
-    desiredCameraPosition.set(group.current.position.x * 0.45, 5.1, group.current.position.z + 7.7);
+    const horizontalDistance = Math.cos(cameraOrbit.current.pitch) * CAMERA_ORBIT_DISTANCE;
+    const sinYaw = Math.sin(cameraOrbit.current.yaw);
+    const cosYaw = Math.cos(cameraOrbit.current.yaw);
+    desiredCameraPosition.set(
+      group.current.position.x + sinYaw * horizontalDistance,
+      CAMERA_FOCUS_HEIGHT + Math.sin(cameraOrbit.current.pitch) * CAMERA_ORBIT_DISTANCE,
+      group.current.position.z + cosYaw * horizontalDistance,
+    );
     camera.position.lerp(desiredCameraPosition, 1 - Math.pow(0.002, delta));
-    camera.lookAt(group.current.position.x * 0.55, 0.65, group.current.position.z - 2.8);
+    camera.lookAt(
+      group.current.position.x - sinYaw * CAMERA_LOOK_AHEAD,
+      CAMERA_FOCUS_HEIGHT,
+      group.current.position.z - cosYaw * CAMERA_LOOK_AHEAD,
+    );
 
     broadcastTimer.current += delta;
     if (broadcastTimer.current > 0.15) {
@@ -651,6 +652,7 @@ function BullBoss({ bossIndex }: { bossIndex: number }) {
     const motion = current.motion;
     targetPosition.set(motion.position[0], 0.03, motion.position[1]);
     group.current.position.lerp(targetPosition, 1 - Math.pow(0.00001, delta));
+    if (!bossCanTrackTarget(current.boss.hp)) return;
 
     if (motion.mode === "stacking") {
       group.current.rotation.y += (Math.PI * 2 / 5) * delta;
@@ -678,145 +680,6 @@ function BullBoss({ bossIndex }: { bossIndex: number }) {
   );
 }
 
-type AlternateBossKind = Exclude<ReturnType<typeof useGameStore.getState>["boss"]["id"], "bulldrome">;
-
-interface AlternateBossConfig {
-  url: string;
-  scale: number;
-  idle: string;
-  move: string;
-  attack: string;
-  special: string;
-  death: string;
-  light: string;
-  rotationOffset: number;
-  prototype?: boolean;
-  floating?: boolean;
-}
-
-const ALTERNATE_BOSS_CONFIG: Record<AlternateBossKind, AlternateBossConfig> = {
-  "sandglass-scorpion": {
-    url: SANDGLASS_URL,
-    scale: 0.7,
-    idle: "Idle",
-    move: "Burrow",
-    attack: "Eruption",
-    special: "Hourglass",
-    death: "Death",
-    light: "#e9b94f",
-    rotationOffset: 0,
-  },
-  "cragclaw-crab": {
-    url: CRAGCLAW_URL,
-    scale: 1.2,
-    idle: "Idle",
-    move: "Walk",
-    attack: "Bite_Front",
-    special: "Bite_InPlace",
-    death: "Death",
-    light: "#49d5df",
-    rotationOffset: 0,
-  },
-  "mournveil-ghost": {
-    url: MOURNVEIL_URL,
-    scale: 1.1,
-    idle: "Flying_Idle",
-    move: "Fast_Flying",
-    attack: "Punch",
-    special: "Headbutt",
-    death: "Death",
-    light: "#9d72ff",
-    rotationOffset: 0,
-    floating: true,
-  },
-  "crownshard-golem": {
-    url: CROWNSHARD_URL,
-    scale: 1.15,
-    idle: "Flying_Idle",
-    move: "Fast_Flying",
-    attack: "Punch",
-    special: "Headbutt",
-    death: "Death",
-    light: "#e0bd45",
-    rotationOffset: 0,
-    floating: true,
-  },
-  "crystal-bat-matriarch": {
-    url: CRYSTAL_BAT_MATRIARCH_URL,
-    scale: 0.828,
-    idle: "Idle",
-    move: "Swoop",
-    attack: "SonicPulse",
-    special: "MirrorShatter",
-    death: "Death",
-    light: "#8eeaff",
-    rotationOffset: 0,
-    floating: true,
-  },
-  "stormwool-alpaca": {
-    url: CLAUDE_BOSS_URLS["stormwool-alpaca"], scale: 0.72, idle: "Idle", move: "Gallop", attack: "Attack_Headbutt", special: "Attack_Kick", death: "Death", light: "#8fc7ff", rotationOffset: 0, prototype: true,
-  },
-  "cluckhorn-colossus": {
-    url: CLAUDE_BOSS_URLS["cluckhorn-colossus"], scale: 2.2, idle: "Idle", move: "Run", attack: "Attack", special: "Jump", death: "Death", light: "#f0b85d", rotationOffset: 0, prototype: true,
-  },
-  "ashwing-demon": {
-    url: CLAUDE_BOSS_URLS["ashwing-demon"], scale: 1.2, idle: "Flying_Idle", move: "Fast_Flying", attack: "Punch", special: "Headbutt", death: "Death", light: "#df665d", rotationOffset: 0, prototype: true, floating: true,
-  },
-  "riftclaw-demon": {
-    url: CLAUDE_BOSS_URLS["riftclaw-demon"], scale: 1.35, idle: "Idle", move: "Run", attack: "Punch", special: "Weapon", death: "Death", light: "#d45cff", rotationOffset: 0, prototype: true,
-  },
-  "tempestscale-dragon": {
-    url: CLAUDE_BOSS_URLS["tempestscale-dragon"], scale: 1.2, idle: "Flying_Idle", move: "Fast_Flying", attack: "Punch", special: "Headbutt", death: "Death", light: "#5fc8e8", rotationOffset: 0, prototype: true, floating: true,
-  },
-  emberfox: {
-    url: CLAUDE_BOSS_URLS.emberfox, scale: 1, idle: "Idle", move: "Gallop", attack: "Attack", special: "Gallop_Jump", death: "Death", light: "#ff7b45", rotationOffset: 0, prototype: true,
-  },
-  "mirelord-frog": {
-    url: CLAUDE_BOSS_URLS["mirelord-frog"], scale: 1.4, idle: "Idle", move: "Run", attack: "Punch", special: "Jump", death: "Death", light: "#73c96b", rotationOffset: 0, prototype: true,
-  },
-  "stonebreaker-giant": {
-    url: CLAUDE_BOSS_URLS["stonebreaker-giant"], scale: 1, idle: "Idle", move: "Run", attack: "Attack", special: "Jump", death: "Death", light: "#c89563", rotationOffset: 0, prototype: true,
-  },
-  "glub-sovereign": {
-    url: CLAUDE_BOSS_URLS["glub-sovereign"], scale: 1.2, idle: "Flying_Idle", move: "Fast_Flying", attack: "Punch", special: "Headbutt", death: "Death", light: "#6ce0b8", rotationOffset: 0, prototype: true, floating: true,
-  },
-  "scrapking-goblin": {
-    url: CLAUDE_BOSS_URLS["scrapking-goblin"], scale: 1.5, idle: "Idle", move: "Run", attack: "Attack", special: "Jump", death: "Death", light: "#d7a34b", rotationOffset: 0, prototype: true,
-  },
-  "warcaller-orc": {
-    url: CLAUDE_BOSS_URLS["warcaller-orc"], scale: 1.35, idle: "Idle", move: "Run", attack: "Punch", special: "Weapon", death: "Death", light: "#e4533f", rotationOffset: 0, prototype: true,
-  },
-  "tuskmaw-orc": {
-    url: CLAUDE_BOSS_URLS["tuskmaw-orc"], scale: 1.45, idle: "Idle", move: "Walk", attack: "Bite_Front", special: "Jump", death: "Death", light: "#9eb25d", rotationOffset: 0, prototype: true,
-  },
-  "broodfang-spider": {
-    url: CLAUDE_BOSS_URLS["broodfang-spider"], scale: 1.35, idle: "Spider_Idle", move: "Spider_Walk", attack: "Spider_Attack", special: "Spider_Jump", death: "Spider_Death", light: "#b56cff", rotationOffset: 0, prototype: true,
-  },
-  "silkfang-spider": {
-    url: CLAUDE_BOSS_URLS["silkfang-spider"], scale: 1.35, idle: "Spider_Idle", move: "Spider_Walk", attack: "Spider_Attack", special: "Spider_Jump", death: "Spider_Death", light: "#9d68d8", rotationOffset: 0, prototype: true,
-  },
-  "thorncrown-stag": {
-    url: CLAUDE_BOSS_URLS["thorncrown-stag"], scale: 0.85, idle: "Idle", move: "Gallop", attack: "Attack_Headbutt", special: "Attack_Kick", death: "Death", light: "#7fc46b", rotationOffset: 0, prototype: true,
-  },
-  "sky-totem": {
-    url: CLAUDE_BOSS_URLS["sky-totem"], scale: 1.2, idle: "Flying_Idle", move: "Fast_Flying", attack: "Punch", special: "Headbutt", death: "Death", light: "#69d4d1", rotationOffset: 0, prototype: true, floating: true,
-  },
-  "razorcrest-raptor": {
-    url: CLAUDE_BOSS_URLS["razorcrest-raptor"], scale: 1.1, idle: "Velociraptor_Idle", move: "Velociraptor_Run", attack: "Velociraptor_Attack", special: "Velociraptor_Jump", death: "Velociraptor_Death", light: "#d9c45a", rotationOffset: 0, prototype: true,
-  },
-  "bristlequake-boar": {
-    url: CLAUDE_BOSS_URLS["bristlequake-boar"], scale: 0.475, idle: "Idle_AnimalArmature", move: "Gallop_AnimalArmature", attack: "Attack_Headbutt_AnimalArmature", special: "Attack_Kick_AnimalArmature", death: "Death_AnimalArmature", light: "#d47b45", rotationOffset: 0, prototype: true,
-  },
-  "moonfang-wolf": {
-    url: CLAUDE_BOSS_URLS["moonfang-wolf"], scale: 1.05, idle: "Idle", move: "Gallop", attack: "Attack", special: "Gallop_Jump", death: "Death", light: "#9db9e5", rotationOffset: 0, prototype: true,
-  },
-  "frostmaw-yeti": {
-    url: CLAUDE_BOSS_URLS["frostmaw-yeti"], scale: 1.35, idle: "Idle", move: "Walk", attack: "Bite_Front", special: "Jump", death: "Death", light: "#8ed8ef", rotationOffset: 0, prototype: true,
-  },
-  "rimeclaw-yeti": {
-    url: CLAUDE_BOSS_URLS["rimeclaw-yeti"], scale: 1.35, idle: "Idle", move: "Run", attack: "Punch", special: "Weapon", death: "Death", light: "#75bfe8", rotationOffset: 0, prototype: true,
-  },
-};
 
 function alternateBossClip(kind: AlternateBossKind, motion: ReturnType<typeof useGameStore.getState>["bossMotion"]) {
   const config = ALTERNATE_BOSS_CONFIG[kind];
@@ -879,6 +742,7 @@ function AlternateBoss({ kind, bossIndex }: { kind: AlternateBossKind; bossIndex
     const floatingHeight = config.floating ? 0.2 : 0.03;
     targetPosition.set(motion.position[0], airborne ? 3.2 : burrowed ? -0.58 : floatingHeight, motion.position[1]);
     group.current.position.lerp(targetPosition, 1 - Math.pow(0.00001, delta));
+    if (!bossCanTrackTarget(current.boss.hp)) return;
 
     let targetAngle = Math.atan2(
       state.partyPositions.brann[0] - motion.position[0],

src/components/TopScreen.tsx

@@ -81,7 +81,7 @@ function BossBar() {
   if (phase === "briefing") return null;
   const bosses = [boss, ...additionalBosses.map((entry) => entry.boss)];
   return (
-    <div className={`boss-bar-wrap ${bosses.length > 1 ? "is-dual" : ""}`}>
+    <div className={`boss-bar-wrap ${bosses.length > 1 ? "is-multi" : ""} ${bosses.length === 3 ? "is-trio" : ""}`}>
       {bosses.map((entry) => <div className="boss-bar-entry" key={entry.id}>
         <div className="boss-name"><span>Vault Beast</span><strong>{entry.name}</strong><span>{Math.ceil((entry.hp / entry.maxHp) * 100)}%</span></div>
         <div className="boss-bar"><i style={{ width: `${(entry.hp / entry.maxHp) * 100}%` }} /></div>
@@ -108,6 +108,7 @@ function EncounterCallout() {
 
 function PhaseOverlay() {
   const phase = useGameStore((state) => state.phase);
+  const runMode = useGameStore((state) => state.runMode);
   const primaryBoss = useGameStore((state) => state.boss);
   const additionalBosses = useGameStore((state) => state.additionalBosses);
   if (phase === "intermission") return <BuffDraftPanel className="top-buff-draft" />;
@@ -115,6 +116,9 @@ function PhaseOverlay() {
   const definitions = bosses.map((boss) => BOSS_DEFINITIONS[boss.id]);
   const room = bossRoomFor(primaryBoss.id);
   const bossNames = bosses.map((boss) => boss.name).join(" & ");
+  const briefingMode = runMode === "rogue-trials"
+    ? bosses.length === 3 ? "Rogue Trials · Trio Finale" : "Rogue Trials · Dual Round"
+    : bosses.length > 1 ? "Roguelike PVE · Dual Encounter" : definitions[0].trial;
   if (phase === "combat") return null;
   const title = phase === "briefing"
     ? room.name
@@ -122,7 +126,7 @@ function PhaseOverlay() {
         ? `${bossNames} Broken`
         : "Party Broken";
   const eyebrow = phase === "briefing"
-    ? `${bosses.length > 1 ? "Roguelike PVE · Dual Encounter" : definitions[0].trial} · ${room.biome}`
+    ? `${briefingMode} · ${room.biome}`
     : phase === "victory"
         ? "Encounter Complete"
         : "Encounter Failed";
@@ -193,7 +197,7 @@ export function TopScreen({ onExit }: { onExit?: () => void }) {
       <div className="top-hud">
         <CompactParty />
         <BossBar />
-        <div className="objective-chip"><span>{runMode === "roguelike" ? `Round ${round}` : "Objective"}</span><strong>{bossCount > 1 ? "Defeat both · keep five alive" : "Keep all five alive"}</strong></div>
+        <div className="objective-chip"><span>{runMode !== "encounter" ? `Round ${round}` : "Objective"}</span><strong>{bossCount === 3 ? "Defeat trio · keep five alive" : bossCount === 2 ? "Defeat both · keep five alive" : "Keep all five alive"}</strong></div>
         <EncounterCallout />
         <CastingBar />
         <div className="control-hint"><b>WASD</b> Move <i /> <b>Q / E</b> Target <i /> <b>1–6</b> Cast</div>

src/components/boss/BossMechanicIndicators.tsx

@@ -1,10 +1,12 @@
 import { useFrame } from "@react-three/fiber";
 import { Html } from "@react-three/drei";
-import { useLayoutEffect, useRef, type ComponentType } from "react";
+import { useCallback, useEffect, useLayoutEffect, useRef, useState, type ComponentType } from "react";
 import * as THREE from "three";
 import { BULL_CHARGE, BULL_POUNCE, MEMORY_SEQUENCE, MEMORY_SYMBOLS, SKY_SWEEPER_BREATH } from "../../game/bosses/mechanicPool";
+import { angleTo } from "../../game/geometry";
 import { useGameStore } from "../../game/store";
-import type { BossMotionMode, MemorySymbolId, MemoryTile, PoolTelegraph } from "../../game/types";
+import type { BossMotionMode, BossMotionState, MemorySymbolId, MemoryTile, PoolTelegraph, SoulSiphonState, WorldPosition } from "../../game/types";
+import { BOSS_INDICATOR_DEATH_FADE_MS, advanceBossIndicatorOpacity } from "./bossDeathVisuals";
 
 const CHARGE_MARKERS = [0, 1, 2, 3, 4, 5, 6] as const;
 const STACK_DIRECTIONS = Array.from({ length: 8 }, (_, index) => (index / 8) * Math.PI * 2);
@@ -26,12 +28,91 @@ const INWARD_ARROW_SHAPE = new THREE.Shape()
   .lineTo(-0.29, 0.04)
   .lineTo(-0.13, 0.04)
   .lineTo(-0.13, -0.32);
+const SOUL_SIPHON_GUIDANCE_HEIGHT = 2.2;
+const SOUL_SIPHON_GUIDANCE_COLOR = "#9dff78";
+const SOUL_SIPHON_GUIDANCE_OUTLINE = "#2b210b";
 type GameStoreState = ReturnType<typeof useGameStore.getState>;
 
 function motionAt(state: GameStoreState, bossIndex: number) {
   return bossIndex === 0 ? state.bossMotion : state.additionalBosses[bossIndex - 1]?.motion;
 }
 
+function bossHpAt(state: GameStoreState, bossIndex: number) {
+  return bossIndex === 0 ? state.boss.hp : state.additionalBosses[bossIndex - 1]?.boss.hp ?? 0;
+}
+
+function earliestSoulSiphonInMotion(motion: BossMotionState | undefined, current?: SoulSiphonState) {
+  if (!motion) return current;
+  let earliest = current;
+  for (const telegraph of motion.poolTelegraphs) {
+    const siphon = telegraph.kind === "soul-siphon" && !telegraph.resolved ? telegraph.soulSiphon : undefined;
+    if (siphon && (!earliest || siphon.nextDamageAt < earliest.nextDamageAt)) earliest = siphon;
+  }
+  return earliest;
+}
+
+function activeSoulSiphonGuidance(state: GameStoreState) {
+  if (state.phase !== "combat") return undefined;
+  let earliest = state.boss.hp > 0 ? earliestSoulSiphonInMotion(state.bossMotion) : undefined;
+  for (const entry of state.additionalBosses) {
+    if (entry.boss.hp > 0) earliest = earliestSoulSiphonInMotion(entry.motion, earliest);
+  }
+  return earliest;
+}
+
+function WorldDirectionIndicator({
+  origin,
+  destination,
+  height,
+  color,
+}: {
+  origin: WorldPosition;
+  destination: WorldPosition;
+  height: number;
+  color: string;
+}) {
+  const group = useRef<THREE.Group>(null);
+  const fill = useRef<THREE.MeshBasicMaterial>(null);
+  const reducedMotion = document.documentElement.classList.contains("force-reduced-motion")
+    || window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+
+  useFrame(({ clock }) => {
+    if (!group.current) return;
+    const wave = reducedMotion ? 0.5 : (Math.sin(clock.elapsedTime * 5.2) + 1) * 0.5;
+    group.current.position.set(origin[0], height + (reducedMotion ? 0 : (wave - 0.5) * 0.12), origin[1]);
+    group.current.rotation.y = angleTo(origin, destination) + Math.PI;
+    group.current.scale.setScalar(1.55 + wave * 0.16);
+    if (fill.current) fill.current.opacity = 0.82 + wave * 0.18;
+  });
+
+  return (
+    <group ref={group} position={[origin[0], height, origin[1]]} rotation={[0, angleTo(origin, destination) + Math.PI, 0]}>
+      <mesh rotation={[-Math.PI / 2, 0, 0]} scale={1.28} renderOrder={30}>
+        <shapeGeometry args={[INWARD_ARROW_SHAPE]} />
+        <meshBasicMaterial color={SOUL_SIPHON_GUIDANCE_OUTLINE} transparent opacity={0.92} depthTest={false} depthWrite={false} side={THREE.DoubleSide} />
+      </mesh>
+      <mesh position={[0, 0.012, 0]} rotation={[-Math.PI / 2, 0, 0]} renderOrder={31}>
+        <shapeGeometry args={[INWARD_ARROW_SHAPE]} />
+        <meshBasicMaterial ref={fill} color={color} transparent opacity={1} depthTest={false} depthWrite={false} side={THREE.DoubleSide} />
+      </mesh>
+    </group>
+  );
+}
+
+function SoulSiphonGuidanceIndicator() {
+  const guidance = useGameStore(activeSoulSiphonGuidance);
+  const playerPosition = useGameStore((state) => state.partyPositions.aelia);
+  if (!guidance) return null;
+  return (
+    <WorldDirectionIndicator
+      origin={playerPosition}
+      destination={guidance.wardPosition}
+      height={SOUL_SIPHON_GUIDANCE_HEIGHT}
+      color={SOUL_SIPHON_GUIDANCE_COLOR}
+    />
+  );
+}
+
 export function ChargeLaneIndicator({ bossIndex = 0 }: { bossIndex?: number }) {
   const phase = useGameStore((state) => state.phase);
   const motionMode = useGameStore((state) => motionAt(state, bossIndex)?.mode);
@@ -644,14 +725,63 @@ const BOSS_MECHANIC_INDICATORS: readonly ComponentType<{ bossIndex?: number }>[]
   PooledMechanicIndicators,
 ];
 
+function BossMechanicIndicatorSet({ bossIndex }: { bossIndex: number }) {
+  const defeated = useGameStore((state) => bossHpAt(state, bossIndex) <= 0);
+  const group = useRef<THREE.Group>(null);
+  const opacity = useRef(defeated ? 0 : 1);
+  const patchedMeshes = useRef(new WeakSet<THREE.Mesh>());
+  const [retainIndicators, setRetainIndicators] = useState(!defeated);
+
+  const patchMeshOpacity = useCallback((child: THREE.Object3D) => {
+    if (!(child instanceof THREE.Mesh) || patchedMeshes.current.has(child)) return;
+    patchedMeshes.current.add(child);
+    const previousBeforeRender = child.onBeforeRender;
+    const previousAfterRender = child.onAfterRender;
+    const materials = Array.isArray(child.material) ? child.material : [child.material];
+    const sourceOpacities = new Float32Array(materials.length);
+    child.onBeforeRender = (renderer, scene, camera, geometry, material, renderGroup) => {
+      previousBeforeRender.call(child, renderer, scene, camera, geometry, material, renderGroup);
+      for (let index = 0; index < materials.length; index += 1) {
+        sourceOpacities[index] = materials[index].opacity;
+        materials[index].opacity *= opacity.current;
+      }
+    };
+    child.onAfterRender = (renderer, scene, camera, geometry, material, renderGroup) => {
+      previousAfterRender.call(child, renderer, scene, camera, geometry, material, renderGroup);
+      for (let index = 0; index < materials.length; index += 1) materials[index].opacity = sourceOpacities[index];
+    };
+  }, []);
+
+  useEffect(() => {
+    if (!defeated) {
+      setRetainIndicators(true);
+      return;
+    }
+    const timeout = window.setTimeout(() => setRetainIndicators(false), BOSS_INDICATOR_DEATH_FADE_MS);
+    return () => window.clearTimeout(timeout);
+  }, [defeated]);
+
+  useFrame((_, delta) => {
+    if (!group.current) return;
+    opacity.current = advanceBossIndicatorOpacity(opacity.current, defeated, delta);
+    group.current.visible = opacity.current > 0;
+    group.current.traverse(patchMeshOpacity);
+  });
+
+  return (
+    <group ref={group}>
+      {retainIndicators && BOSS_MECHANIC_INDICATORS.map((Indicator) => <Indicator key={Indicator.name} bossIndex={bossIndex} />)}
+    </group>
+  );
+}
+
 export function BossMechanicIndicators() {
   const bossCount = useGameStore((state) => state.additionalBosses.length + 1);
   return (
     <>
+      <SoulSiphonGuidanceIndicator />
       {Array.from({ length: bossCount }, (_, bossIndex) => (
-        <group key={bossIndex}>
+        <BossMechanicIndicatorSet key={bossIndex} bossIndex={bossIndex} />
-          {BOSS_MECHANIC_INDICATORS.map((Indicator) => <Indicator key={Indicator.name} bossIndex={bossIndex} />)}
-        </group>
       ))}
     </>
   );

src/components/boss/bossDeathVisuals.test.ts

@@ -0,0 +1,21 @@
+import { describe, expect, it } from "vitest";
+import {
+  BOSS_INDICATOR_DEATH_FADE_MS,
+  advanceBossIndicatorOpacity,
+  bossCanTrackTarget,
+} from "./bossDeathVisuals";
+
+describe("boss death visuals", () => {
+  it("stops target tracking as soon as boss health reaches zero", () => {
+    expect(bossCanTrackTarget(1)).toBe(true);
+    expect(bossCanTrackTarget(0)).toBe(false);
+    expect(bossCanTrackTarget(-1)).toBe(false);
+  });
+
+  it("fades mechanic indicators to zero over the death transition", () => {
+    const halfway = advanceBossIndicatorOpacity(1, true, BOSS_INDICATOR_DEATH_FADE_MS / 2_000);
+    expect(halfway).toBeCloseTo(0.5);
+    expect(advanceBossIndicatorOpacity(halfway, true, BOSS_INDICATOR_DEATH_FADE_MS / 2_000)).toBe(0);
+    expect(advanceBossIndicatorOpacity(0.4, false, 1 / 60)).toBe(1);
+  });
+});

src/components/boss/bossDeathVisuals.ts

@@ -0,0 +1,10 @@
+export const BOSS_INDICATOR_DEATH_FADE_MS = 250;
+
+export function bossCanTrackTarget(hp: number) {
+  return hp > 0;
+}
+
+export function advanceBossIndicatorOpacity(current: number, defeated: boolean, deltaSeconds: number) {
+  if (!defeated) return 1;
+  return Math.max(0, current - (deltaSeconds * 1_000) / BOSS_INDICATOR_DEATH_FADE_MS);
+}

src/frontend/accountRepository.test.ts

@@ -1,53 +1,38 @@
-import { describe, expect, it } from "vitest";
+import { describe, expect, it, vi } from "vitest";
-import type { StorageAdapter } from "./saveRepository";
 import { AccountRepository } from "./accountRepository";
+import { OnlineApiError, type OnlineRepository } from "./onlineRepository";
 
-function memoryStorage(): StorageAdapter {
+function onlineStub(overrides: Partial<OnlineRepository> = {}): OnlineRepository {
-  const data = new Map<string, string>();
   return {
-    getItem: (key) => data.get(key) ?? null,
+    register: vi.fn(async (username: string) => ({ id: 1, username })),
-    setItem: (key, value) => { data.set(key, value); },
+    login: vi.fn(async (username: string) => ({ id: 1, username })),
-  };
+    session: vi.fn(async () => null),
+    logout: vi.fn(async () => undefined),
+    ...overrides,
+  } as unknown as OnlineRepository;
 }
 
-const testHasher = async (password: string, salt: string) => {
-  const checksum = [...password].reduce((total, character) => total + character.charCodeAt(0), 0);
-  return `derived:${salt}:${checksum}`;
-};
-
 describe("AccountRepository", () => {
-  it("requires both a username and password", async () => {
+  it("requires both username and password before contacting server", async () => {
-    const repository = new AccountRepository(memoryStorage(), testHasher, () => "salt");
+    const online = onlineStub();
-
+    const repository = new AccountRepository(online);
     await expect(repository.create("", "secret")).resolves.toEqual({ ok: false, reason: "missing-credentials" });
-    await expect(repository.create("healer", "")).resolves.toEqual({ ok: false, reason: "missing-credentials" });
     await expect(repository.authenticate("healer", "")).resolves.toEqual({ ok: false, reason: "missing-credentials" });
+    expect(online.register).not.toHaveBeenCalled();
   });
 
-  it("requires account creation before sign-in", async () => {
+  it("creates and authenticates real server accounts", async () => {
-    const repository = new AccountRepository(memoryStorage(), testHasher, () => "salt");
+    const repository = new AccountRepository(onlineStub());
-
+    await expect(repository.create("Wayfinder", "long-password")).resolves.toEqual({ ok: true, username: "Wayfinder" });
-    await expect(repository.authenticate("new-healer", "secret")).resolves.toEqual({ ok: false, reason: "account-not-found" });
+    await expect(repository.authenticate("Wayfinder", "long-password")).resolves.toEqual({ ok: true, username: "Wayfinder" });
-    await expect(repository.create("new-healer", "secret")).resolves.toEqual({ ok: true, username: "new-healer" });
-    await expect(repository.authenticate("new-healer", "secret")).resolves.toEqual({ ok: true, username: "new-healer" });
   });
 
-  it("rejects an incorrect password and duplicate account names", async () => {
+  it("maps server conflicts, invalid credentials, and outages", async () => {
-    const repository = new AccountRepository(memoryStorage(), testHasher, () => "salt");
+    const conflict = new AccountRepository(onlineStub({ register: vi.fn(async () => { throw new OnlineApiError("exists", 409); }) }));
-    await repository.create("Wayfinder", "correct");
+    await expect(conflict.create("Wayfinder", "long-password")).resolves.toMatchObject({ ok: false, reason: "account-exists" });
-
+    const invalid = new AccountRepository(onlineStub({ login: vi.fn(async () => { throw new OnlineApiError("bad login", 401); }) }));
-    await expect(repository.authenticate("wayfinder", "wrong")).resolves.toEqual({ ok: false, reason: "invalid-password" });
+    await expect(invalid.authenticate("Wayfinder", "wrong-password")).resolves.toMatchObject({ ok: false, reason: "invalid-password" });
-    await expect(repository.create(" wayfinder ", "another")).resolves.toEqual({ ok: false, reason: "account-exists" });
+    const outage = new AccountRepository(onlineStub({ login: vi.fn(async () => { throw new OnlineApiError("offline", 0); }) }));
-  });
+    await expect(outage.authenticate("Wayfinder", "long-password")).resolves.toMatchObject({ ok: false, reason: "server-unavailable" });
-
-  it("persists only a derived password verifier", async () => {
-    const storage = memoryStorage();
-    const repository = new AccountRepository(storage, testHasher, () => "unique-salt");
-    await repository.create("healer", "plaintext-secret");
-
-    const persisted = storage.getItem("i-want-to-heal:accounts:v1") ?? "";
-    expect(persisted).toContain("derived:unique-salt:");
-    expect(persisted).not.toContain("plaintext-secret");
-    expect(JSON.parse(persisted).healer).not.toHaveProperty("password");
   });
 });

src/frontend/accountRepository.ts

@@ -1,132 +1,40 @@
-import type { StorageAdapter } from "./saveRepository";
+import { OnlineApiError, OnlineRepository, onlineRepository } from "./onlineRepository";
-
-const ACCOUNTS_KEY = "i-want-to-heal:accounts:v1";
-const PASSWORD_ITERATIONS = 120_000;
-
-interface AccountRecord {
-  username: string;
-  salt: string;
-  passwordHash: string;
-}
-
-type AccountMap = Record<string, AccountRecord>;
-type PasswordHasher = (password: string, salt: string) => Promise<string>;
 
 export type AccountResult =
   | { ok: true; username: string }
-  | { ok: false; reason: "missing-credentials" | "account-exists" | "account-not-found" | "invalid-password" | "storage-unavailable" };
+  | { ok: false; reason: "missing-credentials" | "account-exists" | "invalid-password" | "server-unavailable" | "invalid-request"; message?: string };
 
-const fallbackMemory = new Map<string, string>();
+function failure(error: unknown): Extract<AccountResult, { ok: false }> {
-const fallbackStorage: StorageAdapter = {
+  if (!(error instanceof OnlineApiError)) return { ok: false, reason: "server-unavailable" };
-  getItem: (key) => fallbackMemory.get(key) ?? null,
+  if (error.status === 0 || error.status >= 500) return { ok: false, reason: "server-unavailable", message: error.message };
-  setItem: (key, value) => { fallbackMemory.set(key, value); },
+  if (error.status === 409) return { ok: false, reason: "account-exists", message: error.message };
-};
+  if (error.status === 401) return { ok: false, reason: "invalid-password", message: error.message };
-
+  return { ok: false, reason: "invalid-request", message: error.message };
-function browserStorage(): StorageAdapter {
-  try {
-    if (typeof localStorage !== "undefined") return localStorage;
-  } catch {
-    // Android WebView can deny storage before its host is ready.
-  }
-  return fallbackStorage;
 }
 
-function encodeBytes(bytes: Uint8Array) {
-  let binary = "";
-  for (const byte of bytes) binary += String.fromCharCode(byte);
-  return btoa(binary);
-}
-
-function decodeBytes(value: string) {
-  const binary = atob(value);
-  return Uint8Array.from(binary, (character) => character.charCodeAt(0));
-}
-
-async function hashPassword(password: string, salt: string) {
-  const key = await crypto.subtle.importKey(
-    "raw",
-    new TextEncoder().encode(password),
-    "PBKDF2",
-    false,
-    ["deriveBits"],
-  );
-  const bits = await crypto.subtle.deriveBits({
-    name: "PBKDF2",
-    hash: "SHA-256",
-    salt: decodeBytes(salt),
-    iterations: PASSWORD_ITERATIONS,
-  }, key, 256);
-  return encodeBytes(new Uint8Array(bits));
-}
-
-function randomSalt() {
-  const salt = new Uint8Array(16);
-  crypto.getRandomValues(salt);
-  return encodeBytes(salt);
-}
-
-function canonicalUsername(username: string) {
-  return username.trim().toLocaleLowerCase();
-}
-
-function parseAccounts(raw: string | null): AccountMap {
-  if (!raw) return {};
-  try {
-    const parsed = JSON.parse(raw) as AccountMap;
-    return parsed && typeof parsed === "object" ? parsed : {};
-  } catch {
-    return {};
-  }
-}
-
-/**
- * Local prototype account registry. Passwords are salted and derived before
- * persistence; replace this adapter with the server authentication API when
- * remote sync leaves local prototype storage.
- */
 export class AccountRepository {
-  constructor(
+  constructor(private readonly online: OnlineRepository = onlineRepository) {}
-    private readonly storage: StorageAdapter = browserStorage(),
-    private readonly hasher: PasswordHasher = hashPassword,
-    private readonly createSalt: () => string = randomSalt,
-  ) {}
-
-  async create(usernameInput: string, password: string): Promise<AccountResult> {
-    const username = usernameInput.trim();
-    const canonical = canonicalUsername(username);
-    if (!canonical || !password) return { ok: false, reason: "missing-credentials" };
-
-    const accounts = this.read();
-    if (accounts[canonical]) return { ok: false, reason: "account-exists" };
 
+  async create(username: string, password: string): Promise<AccountResult> {
+    if (!username.trim() || !password) return { ok: false, reason: "missing-credentials" };
     try {
-      const salt = this.createSalt();
+      const account = await this.online.register(username, password);
-      accounts[canonical] = { username, salt, passwordHash: await this.hasher(password, salt) };
+      return { ok: true, username: account.username };
-      this.storage.setItem(ACCOUNTS_KEY, JSON.stringify(accounts));
+    } catch (error) {
-      return { ok: true, username };
+      return failure(error);
-    } catch {
-      return { ok: false, reason: "storage-unavailable" };
     }
   }
 
-  async authenticate(usernameInput: string, password: string): Promise<AccountResult> {
+  async authenticate(username: string, password: string): Promise<AccountResult> {
-    const canonical = canonicalUsername(usernameInput);
+    if (!username.trim() || !password) return { ok: false, reason: "missing-credentials" };
-    if (!canonical || !password) return { ok: false, reason: "missing-credentials" };
-
-    const account = this.read()[canonical];
-    if (!account) return { ok: false, reason: "account-not-found" };
-
     try {
-      const passwordHash = await this.hasher(password, account.salt);
+      const account = await this.online.login(username, password);
-      return passwordHash === account.passwordHash
+      return { ok: true, username: account.username };
-        ? { ok: true, username: account.username }
+    } catch (error) {
-        : { ok: false, reason: "invalid-password" };
+      return failure(error);
-    } catch {
-      return { ok: false, reason: "storage-unavailable" };
     }
   }
 
-  private read() {
+  session() { return this.online.session(); }
-    return parseAccounts(this.storage.getItem(ACCOUNTS_KEY));
+  logout() { return this.online.logout(); }
-  }
 }

src/frontend/data.test.ts

@@ -7,6 +7,7 @@ import { AVAILABLE_BOSS_IDS, BOSS_GROUPS } from "../game/bossCatalog";
 describe("game mode configuration", () => {
   it("separates randomized PVE from selectable Dungeons", () => {
     expect(MODE_COPY["roguelike-pve"].title).toBe("PVE");
+    expect(MODE_COPY["rogue-trials"].detail).toContain("unseen");
     expect(MODE_COPY.dungeons.title).toBe("Dungeons");
   });
 
@@ -33,4 +34,12 @@ describe("game mode configuration", () => {
       );
     }
   });
+
+  it("derives trophy ownership from the saved boss pet collection", () => {
+    const collections = buildCollections({ dropsFound: {}, petsFound: { "bulldrome-pet": 1 } }, { bulldrome: 37 });
+    const bulldrome = collections.flatMap((group) => group.bosses).find((boss) => boss.bossId === "bulldrome");
+    expect(bulldrome?.pet.count).toBe(1);
+    expect(bulldrome?.pet.chance).toBe("1 in 500");
+    expect(bulldrome?.kills).toBe(37);
+  });
 });

src/frontend/data.ts

@@ -70,7 +70,14 @@ export const MODE_COPY: Record<GameModeId, { eyebrow: string; title: string; des
     title: "PVE",
     description: "Enter without an encounter briefing, adapt to two randomized guardians, and build toward a full roguelike run.",
     detail: "Two bosses selected when the run begins",
-    status: "Playable prototype",
+    status: "Playable now",
+  },
+  "rogue-trials": {
+    eyebrow: "1–4 hunters · five-round PVE trial",
+    title: "Rogue Trials",
+    description: "Build through four randomized dual-boss rounds, then face three bosses together in a final trial.",
+    detail: "Round 5 trio always uses bosses unseen during that run",
+    status: "Playable now",
   },
   dungeons: {
     eyebrow: "1–4 hunters · chosen encounter",
@@ -131,6 +138,7 @@ export function createHunterSave(slotId: SaveSlotId, now: string, hunterName: st
       alliesSaved: 0,
       healingDone: 0,
       bossKills: {},
+      highestRoguelikeRound: 0,
     },
     materials: [] as MaterialStack[],
     collectionLog: createEmptyCollectionLog(),

src/frontend/onlineRepository.ts

@@ -0,0 +1,152 @@
+import { Capacitor } from "@capacitor/core";
+import type { HunterSave, SaveSlotId } from "./types";
+import type { BossId } from "../game/types";
+
+export interface OnlineAccount {
+  id: number;
+  username: string;
+}
+
+export interface OnlineSaveSlot {
+  slotId: SaveSlotId;
+  save: HunterSave;
+  updatedAt: string;
+}
+
+export interface LeaderboardEntry {
+  rank: number;
+  username: string;
+  hunterName: string;
+  slotId: SaveSlotId;
+  value: number;
+}
+
+export interface LeaderboardResult {
+  kind: "boss" | "roguelike";
+  bossId?: BossId;
+  top: LeaderboardEntry[];
+  current: LeaderboardEntry | null;
+}
+
+interface TokenStorage {
+  getItem(key: string): string | null;
+  setItem(key: string, value: string): void;
+  removeItem(key: string): void;
+}
+
+type Requester = typeof fetch;
+
+const TOKEN_KEY = "i-want-to-heal:auth-token:v1";
+const PRODUCTION_API_URL = "https://iwanttoheal.phenomrom.com";
+
+function defaultApiBaseUrl() {
+  const configured = String(import.meta.env.VITE_API_BASE_URL ?? "");
+  if (configured) return configured;
+  return Capacitor.isNativePlatform() ? PRODUCTION_API_URL : "";
+}
+
+function browserStorage(): TokenStorage {
+  if (typeof localStorage !== "undefined") return localStorage;
+  const memory = new Map<string, string>();
+  return {
+    getItem: (key) => memory.get(key) ?? null,
+    setItem: (key, value) => { memory.set(key, value); },
+    removeItem: (key) => { memory.delete(key); },
+  };
+}
+
+export class OnlineApiError extends Error {
+  constructor(message: string, readonly status: number) {
+    super(message);
+  }
+}
+
+export class OnlineRepository {
+  private readonly baseUrl: string;
+
+  constructor(
+    private readonly requester: Requester = (...args) => fetch(...args),
+    private readonly storage: TokenStorage = browserStorage(),
+    baseUrl: string = defaultApiBaseUrl(),
+  ) {
+    this.baseUrl = baseUrl.replace(/\/$/, "");
+  }
+
+  private async request<T>(path: string, init: RequestInit = {}): Promise<T> {
+    const headers = new Headers(init.headers);
+    const token = this.storage.getItem(TOKEN_KEY);
+    if (token) headers.set("Authorization", `Bearer ${token}`);
+    let response: Response;
+    try {
+      response = await this.requester(`${this.baseUrl}${path}`, { ...init, headers });
+    } catch {
+      throw new OnlineApiError("Online server is unreachable.", 0);
+    }
+    const body = await response.json().catch(() => ({})) as { error?: string } & T;
+    if (!response.ok) throw new OnlineApiError(body.error ?? "Online request failed.", response.status);
+    return body;
+  }
+
+  private rememberAuth(result: { account: OnlineAccount; token: string }) {
+    this.storage.setItem(TOKEN_KEY, result.token);
+    return result.account;
+  }
+
+  async register(username: string, password: string): Promise<OnlineAccount> {
+    return this.rememberAuth(await this.request<{ account: OnlineAccount; token: string }>("/api/auth/register", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ username, password }),
+    }));
+  }
+
+  async login(username: string, password: string): Promise<OnlineAccount> {
+    return this.rememberAuth(await this.request<{ account: OnlineAccount; token: string }>("/api/auth/login", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ username, password }),
+    }));
+  }
+
+  async session(): Promise<OnlineAccount | null> {
+    if (!this.storage.getItem(TOKEN_KEY)) return null;
+    try {
+      return (await this.request<{ account: OnlineAccount }>("/api/auth/session")).account;
+    } catch (error) {
+      if (error instanceof OnlineApiError && error.status === 401) this.storage.removeItem(TOKEN_KEY);
+      if (error instanceof OnlineApiError && error.status === 401) return null;
+      throw error;
+    }
+  }
+
+  async logout(): Promise<void> {
+    try { await this.request("/api/auth/logout", { method: "POST" }); }
+    finally { this.storage.removeItem(TOKEN_KEY); }
+  }
+
+  async listSaves(): Promise<OnlineSaveSlot[]> {
+    return (await this.request<{ slots: OnlineSaveSlot[] }>("/api/saves")).slots;
+  }
+
+  async writeSave(save: HunterSave): Promise<HunterSave> {
+    return (await this.request<{ save: HunterSave }>(`/api/saves/${save.slotId}`, {
+      method: "PUT",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ save }),
+    })).save;
+  }
+
+  async readSave(slotId: SaveSlotId): Promise<HunterSave | null> {
+    return (await this.request<{ save: HunterSave | null }>(`/api/saves/${slotId}`)).save;
+  }
+
+  bossLeaderboard(bossId: BossId, slotId: SaveSlotId): Promise<LeaderboardResult> {
+    return this.request(`/api/leaderboards/boss/${encodeURIComponent(bossId)}?slot=${slotId}`);
+  }
+
+  roguelikeLeaderboard(slotId: SaveSlotId): Promise<LeaderboardResult> {
+    return this.request(`/api/leaderboards/roguelike?slot=${slotId}`);
+  }
+}
+
+export const onlineRepository = new OnlineRepository();

src/frontend/saveRepository.test.ts

@@ -16,7 +16,7 @@ describe("SaveRepository", () => {
     const repository = new SaveRepository(memoryStorage(), () => "2026-07-10T12:00:00.000Z");
     repository.create(2, "Seraphine");
 
-    const slots = repository.list(null);
+    const slots = repository.listLocal();
     expect(slots.map((slot) => slot.id)).toEqual([1, 2, 3]);
     expect(slots[1].local?.updatedAt).toBe("2026-07-10T12:00:00.000Z");
     expect(slots[1].local?.hunterName).toBe("Seraphine");
@@ -34,41 +34,30 @@ describe("SaveRepository", () => {
       healers: { ...save.healers, druid: { ...save.healers.druid, level: 99 } },
     }));
 
-    const slots = repository.list(null);
+    const slots = repository.listLocal();
     expect(slots[0].local?.healers.druid.level).toBe(1);
     expect(slots[2].local?.healers.druid.level).toBe(99);
     expect(slots[2].local?.slotId).toBe(3);
   });
 
-  it("uploads local state and can later overwrite it with the online version", () => {
+  it("replaces a local slot with a downloaded server snapshot", () => {
     let now = "2026-07-10T12:00:00.000Z";
     const repository = new SaveRepository(memoryStorage(), () => now);
-    repository.create(1, "Aelia");
+    const serverSave = repository.create(1, "Aelia");
-    now = "2026-07-10T13:00:00.000Z";
+    serverSave.healers.priest.level = 40;
-    repository.upload(1, "healer@example.com");
-    repository.updateLocal(1, (save) => ({
-      ...save,
-      healers: { ...save.healers, priest: { ...save.healers.priest, level: 40 } },
-    }));
-
-    expect(repository.list("healer@example.com")[0].local?.healers.priest.level).toBe(40);
-    expect(repository.list("healer@example.com")[0].online?.healers.priest.level).toBe(1);
-
     now = "2026-07-10T14:00:00.000Z";
-    repository.download(1, "healer@example.com");
+    repository.replaceLocal(serverSave);
-    expect(repository.list("healer@example.com")[0].local?.healers.priest.level).toBe(1);
+    expect(repository.listLocal()[0].local?.healers.priest.level).toBe(40);
-    expect(repository.list("healer@example.com")[0].local?.updatedAt).toBe(now);
+    expect(repository.listLocal()[0].local?.updatedAt).toBe(now);
   });
 
-  it("deletes only the local copy so the online record can restore it", () => {
+  it("deletes the local copy without inventing an online record", () => {
     const repository = new SaveRepository(memoryStorage(), () => "2026-07-10T12:00:00.000Z");
     repository.create(1, "Aelia");
-    repository.upload(1, "healer");
     repository.deleteLocal(1);
-
+    const slot = repository.listLocal()[0];
-    const slot = repository.list("healer")[0];
     expect(slot.local).toBeNull();
-    expect(slot.online).not.toBeNull();
+    expect(slot.online).toBeNull();
   });
 
   it("keeps class progression and inventories independent under one hunter name", () => {
@@ -83,7 +72,7 @@ describe("SaveRepository", () => {
       },
     }));
 
-    const save = repository.list(null)[0].local!;
+    const save = repository.listLocal()[0].local!;
     expect(save.hunterName).toBe("Aelia");
     expect(save.activeClassId).toBe("druid");
     expect(save.healers.druid.level).toBe(8);
@@ -102,7 +91,7 @@ describe("SaveRepository", () => {
       activeClassId: "druid",
       playSeconds: 999,
       healers: Object.fromEntries(Object.entries(created.healers).map(([id, healer]) => [id, { ...healer, level: 27 }])),
-      stats: { totalBossKills: 22, flawlessClears: 9, alliesSaved: 4, healingDone: 1200, bossKills: { bulldrome: 22 } },
+      stats: { totalBossKills: 22, flawlessClears: 9, alliesSaved: 4, healingDone: 1200, bossKills: { bulldrome: 22 }, highestRoguelikeRound: 12 },
       materials: [{ id: "legacy-boss-coin", name: "Legacy coin", quantity: 99, rarity: "common", itemLevel: 1, glyph: "R" }],
       collectionLog: { dropsFound: { "legacy-boss-coin": 99 }, petsFound: { "bulldrome-pet": 1 } },
       gearProgress: Object.fromEntries(Object.entries(created.gearProgress).map(([id, owner]) => [id, {
@@ -113,39 +102,19 @@ describe("SaveRepository", () => {
     } as Record<string, unknown>;
     storage.setItem("i-want-to-heal:saves:local:v1", JSON.stringify({ 1: legacy }));
 
-    const migrated = repository.list(null)[0].local!;
+    const migrated = repository.listLocal()[0].local!;
     expect(migrated.schemaVersion).toBe(5);
     expect(migrated.hunterName).toBe("Legacy");
     expect(migrated.activeClassId).toBe("priest");
     expect(migrated.playSeconds).toBe(0);
     expect(Object.values(migrated.healers).every((healer) => healer.level === 1 && healer.inventory.length > 0)).toBe(true);
-    expect(migrated.stats).toEqual({ totalBossKills: 0, flawlessClears: 0, alliesSaved: 0, healingDone: 0, bossKills: {} });
+    expect(migrated.stats).toEqual({ totalBossKills: 0, flawlessClears: 0, alliesSaved: 0, healingDone: 0, bossKills: {}, highestRoguelikeRound: 0 });
     expect(migrated.materials).toEqual([]);
     expect(migrated.collectionLog).toEqual({ dropsFound: {}, petsFound: {} });
     expect(Object.values(migrated.gearProgress).every((owner) => owner.infusionAbilityId === null && owner.passiveInfusionId === null && Object.values(owner.slots).every((slot) => slot.level === 0))).toBe(true);
     expect(JSON.parse(storage.getItem("i-want-to-heal:saves:local:v1") ?? "{}")["1"].schemaVersion).toBe(5);
   });
 
-  it("resets and persists legacy cloud saves when they are listed", () => {
-    const storage = memoryStorage();
-    const repository = new SaveRepository(storage, () => "2026-07-10T12:00:00.000Z");
-    const created = repository.create(1, "Cloud Legacy");
-    const legacy = {
-      ...created,
-      schemaVersion: 4,
-      stats: { ...created.stats, totalBossKills: 8, bossKills: { bulldrome: 8 } },
-      materials: [{ id: "legacy-boss-coin", name: "Legacy coin", quantity: 8, rarity: "common", itemLevel: 1, glyph: "R" }],
-    };
-    const cloudKey = "i-want-to-heal:saves:cloud:v1:cloud@example.com";
-    storage.setItem(cloudKey, JSON.stringify({ 1: legacy }));
-
-    const online = repository.list("cloud@example.com")[0].online!;
-    expect(online.schemaVersion).toBe(5);
-    expect(online.stats.totalBossKills).toBe(0);
-    expect(online.materials).toEqual([]);
-    expect(JSON.parse(storage.getItem(cloudKey) ?? "{}")["1"].schemaVersion).toBe(5);
-  });
-
   it("preserves valid v5 progression and group-drop inventory", () => {
     const storage = memoryStorage();
     const repository = new SaveRepository(storage, () => "2026-07-10T12:00:00.000Z");
@@ -157,7 +126,7 @@ describe("SaveRepository", () => {
     created.collectionLog = { dropsFound: { [drop.id]: 4 }, petsFound: { "bulldrome-pet": 1 } };
     storage.setItem("i-want-to-heal:saves:local:v1", JSON.stringify({ 1: created }));
 
-    const migrated = repository.list(null)[0].local!;
+    const migrated = repository.listLocal()[0].local!;
     expect(migrated.schemaVersion).toBe(5);
     expect(migrated.healers.priest.level).toBe(8);
     expect(migrated.stats.bossKills).toEqual({ bulldrome: 2 });
@@ -176,7 +145,7 @@ describe("SaveRepository", () => {
     created.gearProgress.brann.passiveInfusionId = "deep-wells" as never;
     storage.setItem("i-want-to-heal:saves:local:v1", JSON.stringify({ 1: created }));
 
-    const migrated = repository.list(null)[0].local!;
+    const migrated = repository.listLocal()[0].local!;
     expect(migrated.schemaVersion).toBe(5);
     expect(migrated.gearProgress.priest.infusionAbilityId).toBe("priest-sanctuary");
     expect(migrated.gearProgress.priest.passiveInfusionId).toBeNull();
@@ -192,7 +161,7 @@ describe("SaveRepository", () => {
       const created = repository.create(1, "Infused");
       created.gearProgress.priest.passiveInfusionId = passiveId;
       storage.setItem("i-want-to-heal:saves:local:v1", JSON.stringify({ 1: created }));
-      expect(repository.list(null)[0].local?.gearProgress.priest.passiveInfusionId).toBe(passiveId);
+      expect(repository.listLocal()[0].local?.gearProgress.priest.passiveInfusionId).toBe(passiveId);
     }
   });
 });

src/frontend/saveRepository.ts

@@ -15,7 +15,6 @@ export interface StorageAdapter {
 type SaveMap = Partial<Record<SaveSlotId, HunterSave>>;
 
 const LOCAL_KEY = "i-want-to-heal:saves:local:v1";
-const CLOUD_KEY = (accountId: string) => `i-want-to-heal:saves:cloud:v1:${accountId.toLowerCase()}`;
 const SLOT_IDS: SaveSlotId[] = [1, 2, 3];
 
 const fallbackMemory = new Map<string, string>();
@@ -150,6 +149,7 @@ function normalizeSave(value: unknown): HunterSave | null {
       alliesSaved: Math.max(0, candidate.stats?.alliesSaved ?? 0),
       healingDone: Math.max(0, candidate.stats?.healingDone ?? 0),
       bossKills,
+      highestRoguelikeRound: Math.max(0, Math.floor(candidate.stats?.highestRoguelikeRound ?? 0)),
     },
     materials: normalizeMaterials(candidate.materials, collectionLog),
     collectionLog,
@@ -181,10 +181,9 @@ export class SaveRepository {
     private readonly now: () => string = () => new Date().toISOString(),
   ) {}
 
-  list(accountId: string | null): SaveSlotState[] {
+  listLocal(): SaveSlotState[] {
     const local = this.read(LOCAL_KEY);
-    const online = accountId ? this.read(CLOUD_KEY(accountId)) : {};
+    return SLOT_IDS.map((id) => ({ id, local: local[id] ?? null, online: null }));
-    return SLOT_IDS.map((id) => ({ id, local: local[id] ?? null, online: online[id] ?? null }));
   }
 
   create(slotId: SaveSlotId, hunterName: string): HunterSave {
@@ -223,23 +222,10 @@ export class SaveRepository {
     return copy;
   }
 
-  upload(slotId: SaveSlotId, accountId: string): HunterSave | null {
+  replaceLocal(save: HunterSave): HunterSave {
-    const local = this.read(LOCAL_KEY)[slotId];
+    const normalized = { ...cloneSave(save), updatedAt: this.now() };
-    if (!local) return null;
+    this.setLocal(normalized);
-    const cloud = this.read(CLOUD_KEY(accountId));
+    return normalized;
-    const uploaded = { ...cloneSave(local), updatedAt: this.now() };
-    cloud[slotId] = uploaded;
-    this.write(CLOUD_KEY(accountId), cloud);
-    this.setLocal(uploaded);
-    return uploaded;
-  }
-
-  download(slotId: SaveSlotId, accountId: string): HunterSave | null {
-    const cloud = this.read(CLOUD_KEY(accountId))[slotId];
-    if (!cloud) return null;
-    const downloaded = { ...cloneSave(cloud), slotId, updatedAt: this.now() };
-    this.setLocal(downloaded);
-    return downloaded;
   }
 
   private setLocal(save: HunterSave): void {

src/frontend/store.ts

@@ -2,6 +2,7 @@ import { create } from "zustand";
 import { DEFAULT_SETTINGS, normalizeHunterName } from "./data";
 import { SaveRepository } from "./saveRepository";
 import { AccountRepository, type AccountResult } from "./accountRepository";
+import { onlineRepository, type OnlineSaveSlot } from "./onlineRepository";
 import type { AppScreen, GameModeId, GameSettings, HunterSave, SaveSlotId, SaveSlotState } from "./types";
 import type { AbilityId, BossId, HealerClassId, InventoryItem, RunBuffId } from "../game/types";
 import { RUN_BUFF_ORDER, RUN_BUFFS } from "../game/roguelike";
@@ -12,10 +13,23 @@ import {
   infusionsForOwner,
 } from "../game/progression/infusions";
 import { normalizeDifficultySlug, rollBossReward, type BossRewardAward, type DifficultySlug } from "../game/progression/loot";
+import { highestRoguelikeRoundAfterDefeat } from "../game/progression/hunterStats";
 
 const repository = new SaveRepository();
 const accounts = new AccountRepository();
 const SETTINGS_KEY = "i-want-to-heal:settings:v1";
+const onlineSaveQueues = new Map<SaveSlotId, Promise<HunterSave>>();
+
+function writeServerSaveSerially(save: HunterSave): Promise<HunterSave> {
+  const previous = onlineSaveQueues.get(save.slotId);
+  const next = (previous ? previous.catch(() => save) : Promise.resolve(save))
+    .then(() => onlineRepository.writeSave(save));
+  onlineSaveQueues.set(save.slotId, next);
+  void next.finally(() => {
+    if (onlineSaveQueues.get(save.slotId) === next) onlineSaveQueues.delete(save.slotId);
+  }).catch(() => undefined);
+  return next;
+}
 
 function loadSettings(): GameSettings {
   try {
@@ -38,14 +52,30 @@ function accountNotice(result: Extract<AccountResult, { ok: false }>, action: "s
   switch (result.reason) {
     case "missing-credentials": return "Enter both username and password.";
     case "account-exists": return "Account already exists. Sign in with its password.";
-    case "account-not-found": return "Account not found. Create an account before enabling online sync.";
     case "invalid-password": return "Username or password is incorrect.";
-    case "storage-unavailable": return action === "create"
+    case "server-unavailable": return "Online server is unreachable. Continue offline or try again.";
-      ? "Account could not be saved on this device. Continue offline or try again."
+    case "invalid-request": return result.message ?? (action === "create" ? "Account could not be created." : "Sign-in failed.");
-      : "Account could not be verified on this device. Continue offline or try again.";
   }
 }
 
+function refreshLocalSlots(current: readonly SaveSlotState[]): SaveSlotState[] {
+  return repository.listLocal().map((slot) => ({
+    ...slot,
+    online: current.find((candidate) => candidate.id === slot.id)?.online ?? null,
+  }));
+}
+
+function mergeServerSlots(serverSlots: readonly OnlineSaveSlot[]): SaveSlotState[] {
+  return repository.listLocal().map((slot) => ({
+    ...slot,
+    online: serverSlots.find((candidate) => candidate.slotId === slot.id)?.save ?? null,
+  }));
+}
+
+function replaceOnlineSlot(current: readonly SaveSlotState[], save: HunterSave): SaveSlotState[] {
+  return refreshLocalSlots(current).map((slot) => slot.id === save.slotId ? { ...slot, online: save } : slot);
+}
+
 export interface FrontendState {
   screen: AppScreen;
   accountId: string | null;
@@ -64,6 +94,7 @@ export interface FrontendState {
   recentRewards: BossRewardAward[];
   settings: GameSettings;
   notice: string;
+  restoreSession: () => Promise<boolean>;
   signIn: (username: string, password: string) => Promise<boolean>;
   createAccount: (username: string, password: string) => Promise<boolean>;
   continueOffline: () => void;
@@ -74,8 +105,8 @@ export interface FrontendState {
   playSlot: (slotId: SaveSlotId) => void;
   deleteSlot: (slotId: SaveSlotId) => void;
   copySlot: (sourceId: SaveSlotId, targetId: SaveSlotId) => void;
-  uploadSlot: (slotId: SaveSlotId) => void;
+  uploadSlot: (slotId: SaveSlotId) => Promise<void>;
-  downloadSlot: (slotId: SaveSlotId) => void;
+  downloadSlot: (slotId: SaveSlotId) => Promise<void>;
   selectMode: (mode: GameModeId) => void;
   selectBoss: (bossId: BossId) => void;
   selectDifficulty: (difficultySlug: DifficultySlug) => void;
@@ -93,6 +124,7 @@ export interface FrontendState {
   updateSetting: <K extends keyof GameSettings>(key: K, value: GameSettings[K]) => void;
   touchActiveSave: () => void;
   recordBossVictory: (bossId: BossId, difficultySlug: DifficultySlug) => BossRewardAward | null;
+  recordRoguelikeDefeat: (round: number) => void;
   clearRecentRewards: () => void;
   clearNotice: () => void;
 }
@@ -104,7 +136,7 @@ function activeSave(slots: SaveSlotState[], activeSlotId: SaveSlotId | null): Hu
 export const useFrontendStore = create<FrontendState>((set, get) => ({
   screen: "login",
   accountId: null,
-  slots: repository.list(null),
+  slots: repository.listLocal(),
   selectedSlotId: 1,
   activeSlotId: null,
   selectedMode: "roguelike-pve",
@@ -120,14 +152,32 @@ export const useFrontendStore = create<FrontendState>((set, get) => ({
   settings: loadSettings(),
   notice: "",
 
+  restoreSession: async () => {
+    try {
+      const account = await accounts.session();
+      if (!account) return false;
+      const serverSlots = await onlineRepository.listSaves();
+      set({ accountId: account.username, slots: mergeServerSlots(serverSlots), screen: "saves", notice: `Online session restored for ${account.username}.` });
+      return true;
+    } catch {
+      return false;
+    }
+  },
+
   signIn: async (username, password) => {
     const result = await accounts.authenticate(username, password);
     if (!result.ok) {
       set({ notice: accountNotice(result, "sign-in") });
       return false;
     }
-    set({ accountId: result.username, slots: repository.list(result.username), screen: "saves", notice: `Online sync connected as ${result.username}.` });
+    try {
-    return true;
+      const serverSlots = await onlineRepository.listSaves();
+      set({ accountId: result.username, slots: mergeServerSlots(serverSlots), screen: "saves", notice: `Online sync connected as ${result.username}.` });
+      return true;
+    } catch {
+      set({ notice: "Signed in, but server saves could not be loaded." });
+      return false;
+    }
   },
   createAccount: async (username, password) => {
     const result = await accounts.create(username, password);
@@ -135,11 +185,20 @@ export const useFrontendStore = create<FrontendState>((set, get) => ({
       set({ notice: accountNotice(result, "create") });
       return false;
     }
-    set({ accountId: result.username, slots: repository.list(result.username), screen: "saves", notice: `Account created. Online sync connected as ${result.username}.` });
+    try {
-    return true;
+      const serverSlots = await onlineRepository.listSaves();
+      set({ accountId: result.username, slots: mergeServerSlots(serverSlots), screen: "saves", notice: `Account created. Online sync connected as ${result.username}.` });
+      return true;
+    } catch {
+      set({ notice: "Account created, but server saves could not be loaded." });
+      return false;
+    }
+  },
+  continueOffline: () => set({ accountId: null, slots: repository.listLocal(), screen: "saves", notice: "Offline saves ready." }),
+  signOut: () => {
+    void accounts.logout();
+    set({ accountId: null, slots: repository.listLocal(), activeSlotId: null, screen: "login", notice: "Signed out. Offline saves remain on this device." });
   },
-  continueOffline: () => set({ accountId: null, slots: repository.list(null), screen: "saves", notice: "Offline saves ready." }),
-  signOut: () => set({ accountId: null, slots: repository.list(null), activeSlotId: null, screen: "login", notice: "Signed out. Offline saves remain on this device." }),
   navigate: (screen) => set({ screen, notice: "" }),
   selectSlot: (selectedSlotId) => set({ selectedSlotId, notice: "" }),
   createSlot: (slotId, rawHunterName) => {
@@ -149,18 +208,18 @@ export const useFrontendStore = create<FrontendState>((set, get) => ({
       return false;
     }
     repository.create(slotId, hunterName);
-    set((state) => ({ slots: repository.list(state.accountId), selectedSlotId: slotId, notice: `${hunterName} created in offline slot ${slotId}.` }));
+    set((state) => ({ slots: refreshLocalSlots(state.slots), selectedSlotId: slotId, notice: `${hunterName} created in offline slot ${slotId}.` }));
     return true;
   },
   playSlot: (slotId) => {
     const local = repository.touch(slotId);
     if (!local) return;
-    set((state) => ({ activeSlotId: slotId, selectedSlotId: slotId, slots: repository.list(state.accountId), screen: "home", notice: "Offline save loaded." }));
+    set((state) => ({ activeSlotId: slotId, selectedSlotId: slotId, slots: refreshLocalSlots(state.slots), screen: "home", notice: "Save loaded." }));
   },
   deleteSlot: (slotId) => {
     repository.deleteLocal(slotId);
     set((state) => ({
-      slots: repository.list(state.accountId),
+      slots: refreshLocalSlots(state.slots),
       activeSlotId: state.activeSlotId === slotId ? null : state.activeSlotId,
       notice: `Local slot ${slotId} deleted. Online copy preserved.`,
     }));
@@ -168,19 +227,36 @@ export const useFrontendStore = create<FrontendState>((set, get) => ({
   copySlot: (sourceId, targetId) => {
     const copy = repository.copyLocal(sourceId, targetId);
     if (!copy) return;
-    set((state) => ({ slots: repository.list(state.accountId), selectedSlotId: targetId, notice: `Slot ${sourceId} copied to slot ${targetId}.` }));
+    set((state) => ({ slots: refreshLocalSlots(state.slots), selectedSlotId: targetId, notice: `Slot ${sourceId} copied to slot ${targetId}.` }));
   },
-  uploadSlot: (slotId) => {
+  uploadSlot: async (slotId) => {
     const { accountId } = get();
     if (!accountId) return set({ notice: "Sign in before syncing online." });
-    const uploaded = repository.upload(slotId, accountId);
+    const local = repository.listLocal().find((slot) => slot.id === slotId)?.local;
-    set({ slots: repository.list(accountId), notice: uploaded ? `Slot ${slotId} synced to server.` : "No offline save to sync." });
+    if (!local) return set({ notice: "No offline save to sync." });
+    try {
+      const uploaded = await writeServerSaveSerially(local);
+      if (get().accountId === accountId) {
+        set((state) => ({ slots: replaceOnlineSlot(state.slots, uploaded), notice: `Slot ${slotId} synced to TrueNAS.` }));
+      }
+    } catch (error) {
+      set({ notice: error instanceof Error ? error.message : "Save upload failed." });
+    }
   },
-  downloadSlot: (slotId) => {
+  downloadSlot: async (slotId) => {
     const { accountId } = get();
     if (!accountId) return set({ notice: "Sign in before downloading an online save." });
-    const downloaded = repository.download(slotId, accountId);
+    try {
-    set({ slots: repository.list(accountId), notice: downloaded ? `Slot ${slotId} overwritten with online version.` : "No online version exists for this slot." });
+      await onlineSaveQueues.get(slotId)?.catch(() => undefined);
+      const serverSave = await onlineRepository.readSave(slotId);
+      if (!serverSave) return set({ notice: "No online version exists for this slot." });
+      const downloaded = repository.replaceLocal(serverSave);
+      if (get().accountId === accountId) {
+        set((state) => ({ slots: replaceOnlineSlot(state.slots, downloaded), notice: `Slot ${slotId} downloaded from TrueNAS.` }));
+      }
+    } catch (error) {
+      set({ notice: error instanceof Error ? error.message : "Save download failed." });
+    }
   },
   selectMode: (selectedMode) => set({ selectedMode, screen: "mode", notice: "" }),
   selectBoss: (selectedBossId) => set({ selectedBossId, notice: "" }),
@@ -218,7 +294,7 @@ export const useFrontendStore = create<FrontendState>((set, get) => ({
         return save;
       }
     });
-    set({ slots: repository.list(accountId), notice: message });
+    set((state) => ({ slots: refreshLocalSlots(state.slots), notice: message }));
     return upgraded;
   },
   equipSelectedInfusion: () => {
@@ -238,7 +314,7 @@ export const useFrontendStore = create<FrontendState>((set, get) => ({
         return save;
       }
     });
-    set({ slots: repository.list(accountId), notice: message });
+    set((state) => ({ slots: refreshLocalSlots(state.slots), notice: message }));
     return equipped;
   },
   equipPassiveInfusion: (passiveId) => {
@@ -257,7 +333,7 @@ export const useFrontendStore = create<FrontendState>((set, get) => ({
         return save;
       }
     });
-    set({ slots: repository.list(accountId), notice: message });
+    set((state) => ({ slots: refreshLocalSlots(state.slots), notice: message }));
     return equipped;
   },
   selectHealerClass: (classId) => {
@@ -266,7 +342,7 @@ export const useFrontendStore = create<FrontendState>((set, get) => ({
     const updated = repository.updateLocal(activeSlotId, (save) => ({ ...save, activeClassId: classId }));
     if (!updated) return;
     set({
-      slots: repository.list(accountId),
+      slots: refreshLocalSlots(get().slots),
       selectedGearOwnerId: classId,
       selectedInfusionId: infusionsForOwner(classId)[0].id,
       notice: `${updated.healers[classId].level > 1 ? "Level " + updated.healers[classId].level + " " : ""}${classId[0].toUpperCase() + classId.slice(1)} selected.`,
@@ -282,7 +358,7 @@ export const useFrontendStore = create<FrontendState>((set, get) => ({
         [save.activeClassId]: { ...save.healers[save.activeClassId], inventory: structuredClone(inventory) },
       },
     }));
-    set({ slots: repository.list(accountId) });
+    set((state) => ({ slots: refreshLocalSlots(state.slots) }));
   },
   updateSetting: (key, value) => set((state) => {
     const settings = { ...state.settings, [key]: value };
@@ -293,10 +369,10 @@ export const useFrontendStore = create<FrontendState>((set, get) => ({
     const { activeSlotId, accountId } = get();
     if (!activeSlotId) return;
     repository.touch(activeSlotId);
-    set({ slots: repository.list(accountId) });
+    set((state) => ({ slots: refreshLocalSlots(state.slots) }));
   },
   recordBossVictory: (bossId, difficultySlug) => {
-    const { activeSlotId, accountId } = get();
+    const { activeSlotId } = get();
     if (!activeSlotId) return null;
     let awarded: BossRewardAward | null = null;
     repository.updateLocal(activeSlotId, (save) => {
@@ -311,17 +387,31 @@ export const useFrontendStore = create<FrontendState>((set, get) => ({
       };
     });
     set((state) => ({
-      slots: repository.list(accountId),
+      slots: refreshLocalSlots(state.slots),
       recentRewards: awarded ? [...state.recentRewards, awarded] : state.recentRewards,
-      notice: awarded ? `${awarded.drop.name} x${awarded.quantity} saved offline.` : "Boss clear saved offline.",
+      notice: awarded ? `${awarded.drop.name} x${awarded.quantity} saved.` : "Boss clear saved.",
     }));
     return awarded;
   },
+  recordRoguelikeDefeat: (round) => {
+    const { activeSlotId } = get();
+    if (!activeSlotId) return;
+    const updated = repository.updateLocal(activeSlotId, (save) => ({
+      ...save,
+      stats: {
+        ...save.stats,
+        highestRoguelikeRound: highestRoguelikeRoundAfterDefeat(save.stats.highestRoguelikeRound, round),
+      },
+    }));
+    if (!updated) return;
+    set((state) => ({ slots: refreshLocalSlots(state.slots) }));
+  },
   clearRecentRewards: () => set({ recentRewards: [] }),
   clearNotice: () => set({ notice: "" }),
 }));
 
 export type FrontendSnapshot = Omit<FrontendState,
+  | "restoreSession"
   | "signIn"
   | "createAccount"
   | "continueOffline"
@@ -351,12 +441,14 @@ export type FrontendSnapshot = Omit<FrontendState,
   | "updateSetting"
   | "touchActiveSave"
   | "recordBossVictory"
+  | "recordRoguelikeDefeat"
   | "clearRecentRewards"
   | "clearNotice"
 >;
 
 export function getFrontendSnapshot(): FrontendSnapshot {
   const {
+    restoreSession: _restoreSession,
     signIn: _signIn,
     createAccount: _createAccount,
     continueOffline: _continueOffline,
@@ -386,6 +478,7 @@ export function getFrontendSnapshot(): FrontendSnapshot {
     updateSetting: _updateSetting,
     touchActiveSave: _touchActiveSave,
     recordBossVictory: _recordBossVictory,
+    recordRoguelikeDefeat: _recordRoguelikeDefeat,
     clearRecentRewards: _clearRecentRewards,
     clearNotice: _clearNotice,
     ...snapshot

src/frontend/types.ts

@@ -5,7 +5,7 @@ import type { CollectionLog, MaterialStack } from "../game/progression/loot";
 
 export type SaveSlotId = 1 | 2 | 3;
 export type AppScreen = "login" | "saves" | "home" | "profile" | "gear" | "settings" | "mode" | "game";
-export type GameModeId = "roguelike-pve" | "dungeons" | "roguelike-pvp" | "stadium-pvp";
+export type GameModeId = "roguelike-pve" | "rogue-trials" | "dungeons" | "roguelike-pvp" | "stadium-pvp";
 
 export interface CollectionDrop {
   id: string;
@@ -41,6 +41,7 @@ export interface HunterStats {
   alliesSaved: number;
   healingDone: number;
   bossKills: Record<string, number>;
+  highestRoguelikeRound: number;
 }
 
 export interface HealerProgress {

src/game/bossVisuals.ts

@@ -0,0 +1,88 @@
+import type { BossId } from "./types";
+
+export type AlternateBossKind = Exclude<BossId, "bulldrome">;
+
+export interface AlternateBossConfig {
+  url: string;
+  scale: number;
+  idle: string;
+  move: string;
+  attack: string;
+  special: string;
+  death: string;
+  light: string;
+  rotationOffset: number;
+  floating?: boolean;
+}
+
+export const BULL_URL = new URL("../assets/game/models/claudecraft/creatures/bull.glb", import.meta.url).href;
+
+const SANDGLASS_URL = new URL("../assets/game/models/original/bosses/sandglass-scorpion/sandglass-scorpion.glb", import.meta.url).href;
+const CRYSTAL_BAT_MATRIARCH_URL = new URL("../assets/game/models/original/bosses/crystal-bat-matriarch/crystal-bat-matriarch.glb", import.meta.url).href;
+const CRAGCLAW_URL = new URL("../assets/game/models/claudecraft/creatures/crabenemy.glb", import.meta.url).href;
+const MOURNVEIL_URL = new URL("../assets/game/models/claudecraft/creatures/ghost.glb", import.meta.url).href;
+const CROWNSHARD_URL = new URL("../assets/game/models/claudecraft/creatures/golelingevolved.glb", import.meta.url).href;
+
+const CLAUDE_BOSS_URLS: Record<Exclude<BossId,
+  | "bulldrome"
+  | "sandglass-scorpion"
+  | "cragclaw-crab"
+  | "mournveil-ghost"
+  | "crownshard-golem"
+  | "crystal-bat-matriarch"
+>, string> = {
+  "stormwool-alpaca": new URL("../assets/game/models/claudecraft/creatures/alpaca.glb", import.meta.url).href,
+  "cluckhorn-colossus": new URL("../assets/game/models/claudecraft/creatures/chicken_cow.glb", import.meta.url).href,
+  "ashwing-demon": new URL("../assets/game/models/claudecraft/creatures/demon.glb", import.meta.url).href,
+  "riftclaw-demon": new URL("../assets/game/models/claudecraft/creatures/demonalt.glb", import.meta.url).href,
+  "tempestscale-dragon": new URL("../assets/game/models/claudecraft/creatures/dragonevolved.glb", import.meta.url).href,
+  emberfox: new URL("../assets/game/models/claudecraft/creatures/fox.glb", import.meta.url).href,
+  "mirelord-frog": new URL("../assets/game/models/claudecraft/creatures/frog.glb", import.meta.url).href,
+  "stonebreaker-giant": new URL("../assets/game/models/claudecraft/creatures/giant.glb", import.meta.url).href,
+  "glub-sovereign": new URL("../assets/game/models/claudecraft/creatures/glubevolved.glb", import.meta.url).href,
+  "scrapking-goblin": new URL("../assets/game/models/claudecraft/creatures/goblin.glb", import.meta.url).href,
+  "warcaller-orc": new URL("../assets/game/models/claudecraft/creatures/orc.glb", import.meta.url).href,
+  "tuskmaw-orc": new URL("../assets/game/models/claudecraft/creatures/orcenemy.glb", import.meta.url).href,
+  "broodfang-spider": new URL("../assets/game/models/claudecraft/creatures/spider.glb", import.meta.url).href,
+  "silkfang-spider": new URL("../assets/game/models/claudecraft/creatures/spider.glb", import.meta.url).href,
+  "thorncrown-stag": new URL("../assets/game/models/claudecraft/creatures/stag.glb", import.meta.url).href,
+  "sky-totem": new URL("../assets/game/models/claudecraft/creatures/tribal.glb", import.meta.url).href,
+  "razorcrest-raptor": new URL("../assets/game/models/claudecraft/creatures/velociraptor.glb", import.meta.url).href,
+  "bristlequake-boar": new URL("../assets/game/models/claudecraft/creatures/wild_boar.glb", import.meta.url).href,
+  "moonfang-wolf": new URL("../assets/game/models/claudecraft/creatures/wolf.glb", import.meta.url).href,
+  "frostmaw-yeti": new URL("../assets/game/models/claudecraft/creatures/yeti.glb", import.meta.url).href,
+  "rimeclaw-yeti": new URL("../assets/game/models/claudecraft/creatures/yetialt.glb", import.meta.url).href,
+};
+
+export const ALTERNATE_BOSS_CONFIG: Record<AlternateBossKind, AlternateBossConfig> = {
+  "sandglass-scorpion": { url: SANDGLASS_URL, scale: 0.7, idle: "Idle", move: "Burrow", attack: "Eruption", special: "Hourglass", death: "Death", light: "#e9b94f", rotationOffset: 0 },
+  "cragclaw-crab": { url: CRAGCLAW_URL, scale: 1.2, idle: "Idle", move: "Walk", attack: "Bite_Front", special: "Bite_InPlace", death: "Death", light: "#49d5df", rotationOffset: 0 },
+  "mournveil-ghost": { url: MOURNVEIL_URL, scale: 1.1, idle: "Flying_Idle", move: "Fast_Flying", attack: "Punch", special: "Headbutt", death: "Death", light: "#9d72ff", rotationOffset: 0, floating: true },
+  "crownshard-golem": { url: CROWNSHARD_URL, scale: 1.15, idle: "Flying_Idle", move: "Fast_Flying", attack: "Punch", special: "Headbutt", death: "Death", light: "#e0bd45", rotationOffset: 0, floating: true },
+  "crystal-bat-matriarch": { url: CRYSTAL_BAT_MATRIARCH_URL, scale: 0.828, idle: "Idle", move: "Swoop", attack: "SonicPulse", special: "MirrorShatter", death: "Death", light: "#8eeaff", rotationOffset: 0, floating: true },
+  "stormwool-alpaca": { url: CLAUDE_BOSS_URLS["stormwool-alpaca"], scale: 0.72, idle: "Idle", move: "Gallop", attack: "Attack_Headbutt", special: "Attack_Kick", death: "Death", light: "#8fc7ff", rotationOffset: 0 },
+  "cluckhorn-colossus": { url: CLAUDE_BOSS_URLS["cluckhorn-colossus"], scale: 2.2, idle: "Idle", move: "Run", attack: "Attack", special: "Jump", death: "Death", light: "#f0b85d", rotationOffset: 0 },
+  "ashwing-demon": { url: CLAUDE_BOSS_URLS["ashwing-demon"], scale: 1.2, idle: "Flying_Idle", move: "Fast_Flying", attack: "Punch", special: "Headbutt", death: "Death", light: "#df665d", rotationOffset: 0, floating: true },
+  "riftclaw-demon": { url: CLAUDE_BOSS_URLS["riftclaw-demon"], scale: 1.35, idle: "Idle", move: "Run", attack: "Punch", special: "Weapon", death: "Death", light: "#d45cff", rotationOffset: 0 },
+  "tempestscale-dragon": { url: CLAUDE_BOSS_URLS["tempestscale-dragon"], scale: 1.2, idle: "Flying_Idle", move: "Fast_Flying", attack: "Punch", special: "Headbutt", death: "Death", light: "#5fc8e8", rotationOffset: 0, floating: true },
+  emberfox: { url: CLAUDE_BOSS_URLS.emberfox, scale: 1, idle: "Idle", move: "Gallop", attack: "Attack", special: "Gallop_Jump", death: "Death", light: "#ff7b45", rotationOffset: 0 },
+  "mirelord-frog": { url: CLAUDE_BOSS_URLS["mirelord-frog"], scale: 1.4, idle: "Idle", move: "Run", attack: "Punch", special: "Jump", death: "Death", light: "#73c96b", rotationOffset: 0 },
+  "stonebreaker-giant": { url: CLAUDE_BOSS_URLS["stonebreaker-giant"], scale: 1, idle: "Idle", move: "Run", attack: "Attack", special: "Jump", death: "Death", light: "#c89563", rotationOffset: 0 },
+  "glub-sovereign": { url: CLAUDE_BOSS_URLS["glub-sovereign"], scale: 1.2, idle: "Flying_Idle", move: "Fast_Flying", attack: "Punch", special: "Headbutt", death: "Death", light: "#6ce0b8", rotationOffset: 0, floating: true },
+  "scrapking-goblin": { url: CLAUDE_BOSS_URLS["scrapking-goblin"], scale: 1.5, idle: "Idle", move: "Run", attack: "Attack", special: "Jump", death: "Death", light: "#d7a34b", rotationOffset: 0 },
+  "warcaller-orc": { url: CLAUDE_BOSS_URLS["warcaller-orc"], scale: 1.35, idle: "Idle", move: "Run", attack: "Punch", special: "Weapon", death: "Death", light: "#e4533f", rotationOffset: 0 },
+  "tuskmaw-orc": { url: CLAUDE_BOSS_URLS["tuskmaw-orc"], scale: 1.45, idle: "Idle", move: "Walk", attack: "Bite_Front", special: "Jump", death: "Death", light: "#9eb25d", rotationOffset: 0 },
+  "broodfang-spider": { url: CLAUDE_BOSS_URLS["broodfang-spider"], scale: 1.35, idle: "Spider_Idle", move: "Spider_Walk", attack: "Spider_Attack", special: "Spider_Jump", death: "Spider_Death", light: "#b56cff", rotationOffset: 0 },
+  "silkfang-spider": { url: CLAUDE_BOSS_URLS["silkfang-spider"], scale: 1.35, idle: "Spider_Idle", move: "Spider_Walk", attack: "Spider_Attack", special: "Spider_Jump", death: "Spider_Death", light: "#9d68d8", rotationOffset: 0 },
+  "thorncrown-stag": { url: CLAUDE_BOSS_URLS["thorncrown-stag"], scale: 0.85, idle: "Idle", move: "Gallop", attack: "Attack_Headbutt", special: "Attack_Kick", death: "Death", light: "#7fc46b", rotationOffset: 0 },
+  "sky-totem": { url: CLAUDE_BOSS_URLS["sky-totem"], scale: 1.2, idle: "Flying_Idle", move: "Fast_Flying", attack: "Punch", special: "Headbutt", death: "Death", light: "#69d4d1", rotationOffset: 0, floating: true },
+  "razorcrest-raptor": { url: CLAUDE_BOSS_URLS["razorcrest-raptor"], scale: 1.1, idle: "Velociraptor_Idle", move: "Velociraptor_Run", attack: "Velociraptor_Attack", special: "Velociraptor_Jump", death: "Velociraptor_Death", light: "#d9c45a", rotationOffset: 0 },
+  "bristlequake-boar": { url: CLAUDE_BOSS_URLS["bristlequake-boar"], scale: 0.475, idle: "Idle_AnimalArmature", move: "Gallop_AnimalArmature", attack: "Attack_Headbutt_AnimalArmature", special: "Attack_Kick_AnimalArmature", death: "Death_AnimalArmature", light: "#d47b45", rotationOffset: 0 },
+  "moonfang-wolf": { url: CLAUDE_BOSS_URLS["moonfang-wolf"], scale: 1.05, idle: "Idle", move: "Gallop", attack: "Attack", special: "Gallop_Jump", death: "Death", light: "#9db9e5", rotationOffset: 0 },
+  "frostmaw-yeti": { url: CLAUDE_BOSS_URLS["frostmaw-yeti"], scale: 1.35, idle: "Idle", move: "Walk", attack: "Bite_Front", special: "Jump", death: "Death", light: "#8ed8ef", rotationOffset: 0 },
+  "rimeclaw-yeti": { url: CLAUDE_BOSS_URLS["rimeclaw-yeti"], scale: 1.35, idle: "Idle", move: "Run", attack: "Punch", special: "Weapon", death: "Death", light: "#75bfe8", rotationOffset: 0 },
+};
+
+export function bossVisualUrl(bossId: BossId): string {
+  return bossId === "bulldrome" ? BULL_URL : ALTERNATE_BOSS_CONFIG[bossId].url;
+}

src/game/bosses/mechanicPool.test.ts

@@ -248,4 +248,14 @@ describe("shared boss mechanic pool", () => {
     expect(cleansed.motion.poolTelegraphs).toHaveLength(0);
     expect(cleansed.events[0].message).toContain("cleansing ward");
   });
+
+  it("deals half-strength ramping Soul Siphon damage and caps the ramp", () => {
+    const result = advanceSoulSiphon(SOUL_SIPHON.tickInterval * 6 + 0.01, soulSiphonTelegraph());
+    const aelia = result.party.find((member) => member.id === "aelia")!;
+
+    expect(SOUL_SIPHON.tickDamage).toBe(3);
+    expect(SOUL_SIPHON.tickRamp).toBe(1);
+    expect(aelia.hp).toBe(freshParty()[0].hp - (3 + 4 + 5 + 6 + 7 + 7));
+    expect(result.motion.poolTelegraphs[0].soulSiphon?.tickCount).toBe(6);
+  });
 });

src/game/bosses/mechanicPool.ts

@@ -127,8 +127,8 @@ export const SOUL_SIPHON = {
   wardDistance: ARENA_RADIUS - 1.05,
   ghostSpeed: 2.6,
   tickInterval: 0.7,
-  tickDamage: 6,
+  tickDamage: 3,
-  tickRamp: 2,
+  tickRamp: 1,
 } as const;
 
 export const MEMORY_SYMBOLS: Record<MemorySymbolId, { label: string; color: string }> = {

src/game/cameraOrbit.test.ts

@@ -0,0 +1,35 @@
+import { describe, expect, it } from "vitest";
+import {
+  DEFAULT_CAMERA_PITCH,
+  MAX_CAMERA_PITCH,
+  MIN_CAMERA_PITCH,
+  setCameraRelativeMovement,
+  updateCameraOrbit,
+} from "./cameraOrbit";
+
+describe("third-person camera orbit", () => {
+  it("rotates horizontal movement with camera yaw", () => {
+    const movement = { x: 0, z: 0 };
+
+    setCameraRelativeMovement(movement, 0, -1, 0);
+    expect(movement.x).toBeCloseTo(0);
+    expect(movement.z).toBeCloseTo(-1);
+
+    setCameraRelativeMovement(movement, 0, -1, Math.PI / 2);
+    expect(movement.x).toBeCloseTo(-1);
+    expect(movement.z).toBeCloseTo(0);
+  });
+
+  it("applies look input and clamps vertical orbit", () => {
+    const orbit = { yaw: 0, pitch: DEFAULT_CAMERA_PITCH };
+
+    updateCameraOrbit(orbit, 1, 0, 1);
+    expect(orbit.yaw).toBeCloseTo(-2.25);
+
+    updateCameraOrbit(orbit, 0, 1, 10);
+    expect(orbit.pitch).toBe(MAX_CAMERA_PITCH);
+
+    updateCameraOrbit(orbit, 0, -1, 10);
+    expect(orbit.pitch).toBe(MIN_CAMERA_PITCH);
+  });
+});

src/game/cameraOrbit.ts

@@ -0,0 +1,49 @@
+export interface CameraOrbitState {
+  yaw: number;
+  pitch: number;
+}
+
+export interface PlanarMovement {
+  x: number;
+  z: number;
+}
+
+export const DEFAULT_CAMERA_YAW = 0;
+export const DEFAULT_CAMERA_PITCH = Math.atan2(4.45, 7.7);
+export const CAMERA_ORBIT_DISTANCE = Math.hypot(4.45, 7.7);
+export const CAMERA_FOCUS_HEIGHT = 0.65;
+export const CAMERA_LOOK_AHEAD = 2.8;
+export const CAMERA_YAW_SPEED = 2.25;
+export const CAMERA_PITCH_SPEED = 1.25;
+export const MIN_CAMERA_PITCH = 0.24;
+export const MAX_CAMERA_PITCH = 0.9;
+
+/** Updates one reusable orbit state without allocating in the render loop. */
+export function updateCameraOrbit(
+  orbit: CameraOrbitState,
+  lookX: number,
+  lookY: number,
+  deltaSeconds: number,
+) {
+  orbit.yaw -= lookX * CAMERA_YAW_SPEED * deltaSeconds;
+  orbit.pitch = Math.min(
+    MAX_CAMERA_PITCH,
+    Math.max(MIN_CAMERA_PITCH, orbit.pitch + lookY * CAMERA_PITCH_SPEED * deltaSeconds),
+  );
+  if (orbit.yaw > Math.PI || orbit.yaw < -Math.PI) {
+    orbit.yaw = Math.atan2(Math.sin(orbit.yaw), Math.cos(orbit.yaw));
+  }
+}
+
+/** Converts left-stick input into world movement relative to current camera yaw. */
+export function setCameraRelativeMovement(
+  output: PlanarMovement,
+  moveX: number,
+  moveY: number,
+  cameraYaw: number,
+) {
+  const sinYaw = Math.sin(cameraYaw);
+  const cosYaw = Math.cos(cameraYaw);
+  output.x = moveX * cosYaw + moveY * sinYaw;
+  output.z = -moveX * sinYaw + moveY * cosYaw;
+}

src/game/healers.ts

@@ -73,7 +73,7 @@ const CLASS_INVENTORIES: Record<HealerClassId, InventoryItem[]> = {
   priest: [
     { id: "priest-censer", name: "Censer of First Light", slot: "Main Hand", rarity: "Rare", icon: "♰", stats: ["+12 Grace", "+8% Mend healing"], effect: "Mend restores 2 mana when it lands on an ally below 50% health.", equipped: true },
     { id: "priest-vestment", name: "Ashwoven Vestment", slot: "Chest", rarity: "Uncommon", icon: "♜", stats: ["+18 Armor", "+6 Spirit"], effect: "Renew ticks have a 10% chance to extend Aegis Shield by 4 absorption.", equipped: true },
-    { id: "priest-phial", name: "Moonwater Phial", slot: "Consumable", rarity: "Common", icon: "⚗", stats: ["Restores 40 mana"], effect: "Single use. Cannot be used during this prototype encounter.", equipped: false },
+    { id: "priest-phial", name: "Moonwater Phial", slot: "Consumable", rarity: "Common", icon: "⚗", stats: ["Restores 40 mana"], effect: "Single use. Cannot be used during this encounter.", equipped: false },
     { id: "priest-sigil", name: "Sigil of Quiet Resolve", slot: "Trinket", rarity: "Rare", icon: "◈", stats: ["+10% Purify range", "+5 Haste"], effect: "Purify grants its target 8 absorption when it removes Ember Brand.", equipped: false },
   ],
   druid: [

src/game/performance.test.ts

@@ -2,9 +2,12 @@ import { describe, expect, it } from "vitest";
 import { useGameStore } from "./store";
 
 describe("runtime performance budgets", () => {
-  it("keeps ten minutes of dual-boss simulation bounded", () => {
+  it.each([
+    { label: "dual-boss", bossIds: ["emberfox", "sandglass-scorpion"] as const, maxElapsedMs: 3_500 },
+    { label: "Rogue Trials trio", bossIds: ["emberfox", "sandglass-scorpion", "tempestscale-dragon"] as const, maxElapsedMs: 5_000 },
+  ])("keeps ten minutes of $label simulation bounded", ({ bossIds, maxElapsedMs }) => {
     const store = useGameStore.getState();
-    store.configureHealer("priest", "Perf", [], ["emberfox", "sandglass-scorpion"]);
+    store.configureHealer("priest", "Perf", [], bossIds);
     store.startEncounter();
     useGameStore.setState((state) => ({
       boss: { ...state.boss, hp: 1_000_000_000, maxHp: 1_000_000_000 },
@@ -36,6 +39,6 @@ describe("runtime performance budgets", () => {
     expect(maxHazards).toBeLessThanOrEqual(64);
     expect(maxDamageEvents).toBeLessThanOrEqual(24);
     expect(maxCombatLog).toBeLessThanOrEqual(12);
-    expect(elapsedMs).toBeLessThan(3_500);
+    expect(elapsedMs).toBeLessThan(maxElapsedMs);
   });
 });

src/game/progression/gear.test.ts

@@ -3,6 +3,7 @@ import { createEncounterGearModifiers } from "./gearEffects";
 import {
   GEAR_RECIPES,
   canAffordGearUpgrade,
+  canUpgradeGearSlot,
   createDefaultGearProgress,
   gearUpgradeCosts,
   upgradeGearSlot,
@@ -46,6 +47,19 @@ describe("IWT2-style gear progression", () => {
     expect(progress.brann.slots.weapon.level).toBe(0);
   });
 
+  it("reports only affordable non-max gear slots as upgradeable", () => {
+    const progress = createDefaultGearProgress();
+    const recipe = GEAR_RECIPES.priest.weapon;
+    const drop = groupDrop(recipe.primaryGroupId, "initiate");
+    const inventory: MaterialStack[] = [{ ...drop, quantity: 2 }];
+
+    expect(canUpgradeGearSlot(progress, inventory, "priest", "weapon")).toBe(true);
+    expect(canUpgradeGearSlot(progress, [], "priest", "weapon")).toBe(false);
+
+    progress.priest.slots.weapon.level = 10;
+    expect(canUpgradeGearSlot(progress, inventory, "priest", "weapon")).toBe(false);
+  });
+
   it("projects rank bonuses without mutating saved progress", () => {
     const progress = createDefaultGearProgress();
     progress.priest.slots.weapon.level = 10;

src/game/progression/gear.ts

@@ -156,6 +156,17 @@ export function canAffordGearUpgrade(inventory: readonly MaterialStack[], costs:
   return costs.every((cost) => (inventory.find((item) => item.id === cost.itemId)?.quantity ?? 0) >= cost.quantity);
 }
 
+export function canUpgradeGearSlot(
+  progress: GearProgress,
+  inventory: readonly MaterialStack[],
+  ownerId: GearOwnerId,
+  slotId: GearSlotId,
+): boolean {
+  const currentLevel = progress[ownerId].slots[slotId].level;
+  return currentLevel < MAX_GEAR_LEVEL
+    && canAffordGearUpgrade(inventory, gearUpgradeCosts(ownerId, slotId, currentLevel));
+}
+
 export function spendGearCosts(inventory: readonly MaterialStack[], costs: readonly GearUpgradeCost[]): MaterialStack[] {
   if (!canAffordGearUpgrade(inventory, costs)) {
     const missing = costs.find((cost) => (inventory.find((item) => item.id === cost.itemId)?.quantity ?? 0) < cost.quantity);

src/game/progression/hunterStats.test.ts

@@ -0,0 +1,15 @@
+import { describe, expect, it } from "vitest";
+import { highestRoguelikeRoundAfterDefeat } from "./hunterStats";
+
+describe("roguelike hunter records", () => {
+  it("records the reached defeat round without lowering a previous best", () => {
+    expect(highestRoguelikeRoundAfterDefeat(0, 1)).toBe(1);
+    expect(highestRoguelikeRoundAfterDefeat(7, 12)).toBe(12);
+    expect(highestRoguelikeRoundAfterDefeat(12, 7)).toBe(12);
+  });
+
+  it("normalizes invalid and fractional round values", () => {
+    expect(highestRoguelikeRoundAfterDefeat(Number.NaN, Number.NaN)).toBe(1);
+    expect(highestRoguelikeRoundAfterDefeat(4.9, 8.9)).toBe(8);
+  });
+});

src/game/progression/hunterStats.ts

@@ -0,0 +1,5 @@
+export function highestRoguelikeRoundAfterDefeat(currentRecord: number, reachedRound: number): number {
+  const normalizedRecord = Math.max(0, Math.floor(Number(currentRecord) || 0));
+  const normalizedRound = Math.max(1, Math.floor(Number(reachedRound) || 1));
+  return Math.max(normalizedRecord, normalizedRound);
+}

src/game/progression/loot.test.ts

@@ -1,6 +1,6 @@
 import { describe, expect, it } from "vitest";
 import { BOSS_GROUPS } from "../bossCatalog";
-import { GROUP_DROP_TABLES, bossGroupDrop, createEmptyCollectionLog, groupDropQuantity, rollBossReward } from "./loot";
+import { BOSS_PET_DROPS, BOSS_PET_DROP_RATE, GROUP_DROP_TABLES, bossGroupDrop, createEmptyCollectionLog, groupDropQuantity, rollBossReward } from "./loot";
 
 describe("group drop tables", () => {
   it("defines five shared drops for every mechanic group", () => {
@@ -36,4 +36,20 @@ describe("group drop tables", () => {
     expect(second.collectionLog.dropsFound[second.award.drop.id]).toBe(5);
     expect(second.award.pet?.id).toBe("bulldrome-pet");
   });
+
+  it("gives every boss pet an exact 1 in 500 independent roll", () => {
+    expect(BOSS_PET_DROP_RATE).toBe(1 / 500);
+    for (const pet of Object.values(BOSS_PET_DROPS)) {
+      expect(pet.dropRate).toBe(1 / 500);
+      expect(pet.chanceLabel).toBe("1 in 500");
+    }
+
+    const hitRolls = [1, 1 / 500 - Number.EPSILON];
+    const hit = rollBossReward("bulldrome", "initiate", [], createEmptyCollectionLog(), () => hitRolls.shift() ?? 1);
+    expect(hit.award.pet?.id).toBe("bulldrome-pet");
+
+    const missRolls = [1, 1 / 500];
+    const miss = rollBossReward("bulldrome", "initiate", [], createEmptyCollectionLog(), () => missRolls.shift() ?? 1);
+    expect(miss.award.pet).toBeNull();
+  });
 });

src/game/roguelike.test.ts

@@ -1,4 +1,5 @@
 import { describe, expect, it } from "vitest";
+import { AVAILABLE_BOSS_IDS } from "./bossCatalog";
 import {
   RUN_BUFF_ORDER,
   RUN_BUFFS,
@@ -8,6 +9,8 @@ import {
   formatRunBuffEffect,
   increaseRunBuffRank,
   selectRandomBossPair,
+  selectRogueTrialsBosses,
+  selectUnseenBosses,
   selectRunBuffDraft,
 } from "./roguelike";
 import type { RunBuffRanks } from "./types";
@@ -75,4 +78,26 @@ describe("roguelike progression", () => {
     expect(pair).not.toContain("bulldrome");
     expect(pair).not.toContain("broodfang-spider");
   });
+
+  it("selects three distinct unseen bosses for Rogue Trials round five", () => {
+    const seen = [
+      "bulldrome",
+      "sandglass-scorpion",
+      "cragclaw-crab",
+      "mournveil-ghost",
+      "crownshard-golem",
+      "crystal-bat-matriarch",
+      "stormwool-alpaca",
+      "cluckhorn-colossus",
+    ] as const;
+    const trio = selectRogueTrialsBosses(5, seen, () => 0);
+
+    expect(trio).toEqual(["ashwing-demon", "riftclaw-demon", "tempestscale-dragon"]);
+    expect(new Set(trio)).toHaveLength(3);
+    expect(trio.every((bossId) => !seen.includes(bossId as typeof seen[number]))).toBe(true);
+  });
+
+  it("fails instead of silently reusing seen bosses when unseen pool is too small", () => {
+    expect(() => selectUnseenBosses(3, AVAILABLE_BOSS_IDS.slice(0, -2))).toThrow(/Cannot select 3 unseen bosses/);
+  });
 });

src/game/roguelike.ts

@@ -204,6 +204,39 @@ export function bossHealthMultiplier(round: number) {
   return 1 + Math.max(0, round - 1) * 0.1;
 }
 
+export const ROGUE_TRIALS_TRIO_ROUND = 5;
+
+export function selectUnseenBosses(
+  count: number,
+  seenBossIds: readonly BossId[] = [],
+  random: () => number = Math.random,
+): BossId[] {
+  const seen = new Set(seenBossIds);
+  const pool = AVAILABLE_BOSS_IDS.filter((bossId) => !seen.has(bossId));
+  const requestedCount = Math.max(0, Math.floor(count));
+  if (pool.length < requestedCount) {
+    throw new Error(`Cannot select ${requestedCount} unseen bosses from ${pool.length} remaining bosses.`);
+  }
+  const bosses: BossId[] = [];
+  while (bosses.length < requestedCount) {
+    const sample = random();
+    const randomValue = Number.isFinite(sample) ? Math.max(0, Math.min(0.999999999, sample)) : 0;
+    const index = Math.floor(randomValue * pool.length);
+    bosses.push(pool[index]);
+    pool.splice(index, 1);
+  }
+  return bosses;
+}
+
+export function selectRogueTrialsBosses(
+  round: number,
+  seenBossIds: readonly BossId[],
+  random: () => number = Math.random,
+): BossId[] {
+  const count = round === ROGUE_TRIALS_TRIO_ROUND ? 3 : 2;
+  return selectUnseenBosses(count, seenBossIds, random);
+}
+
 export function selectRandomBossPair(
   excludedBossIds: readonly BossId[] = [],
   random: () => number = Math.random,

src/game/store.test.ts

@@ -1,7 +1,7 @@
-import { beforeEach, describe, expect, it } from "vitest";
+import { beforeEach, describe, expect, it, vi } from "vitest";
 import { BULL_CHARGE } from "./bossMechanics";
 import { distance, pointToSegmentDistance } from "./geometry";
-import { barrierProtects, useGameStore } from "./store";
+import { RUN_BUFF_INPUT_LOCK_MS, barrierProtects, useGameStore } from "./store";
 import { createClassInventory, HEALER_CLASSES } from "./healers";
 import { dropVenomPool, VENOM_PURGE } from "./bosses/mechanicPool";
 import { ARENA_CENTER, isInsideArena } from "./arena";
@@ -581,6 +581,7 @@ describe("Roguelike rounds", () => {
     expect(useGameStore.getState().time).toBe(intermissionTime);
     const chosenBuffId = useGameStore.getState().draftBuffIds[0]!;
     expect(chosenBuffId).toBeDefined();
+    useGameStore.setState({ runBuffInputUnlockAt: 0 });
     expect(useGameStore.getState().chooseRunBuff(chosenBuffId)).toBe(true);
 
     const roundTwo = useGameStore.getState();
@@ -599,6 +600,34 @@ describe("Roguelike rounds", () => {
     expect(useGameStore.getState().round).toBe(1);
   });
 
+  it("ignores all buff-selection input for 2.5 seconds after the bosses fall", () => {
+    const defeatedAt = 1_000_000;
+    const now = vi.spyOn(Date, "now").mockReturnValue(defeatedAt);
+    useGameStore.setState((state) => ({
+      boss: { ...state.boss, hp: 0 },
+      additionalBosses: state.additionalBosses.map((entry) => ({ ...entry, boss: { ...entry.boss, hp: 0 } })),
+    }));
+
+    useGameStore.getState().tick(0.05);
+    const lockedState = useGameStore.getState();
+    const initialSelection = lockedState.selectedRunBuffId!;
+    const alternateSelection = lockedState.draftBuffIds.find((buffId) => buffId !== initialSelection)!;
+    expect(lockedState.runBuffInputUnlockAt).toBe(defeatedAt + RUN_BUFF_INPUT_LOCK_MS);
+
+    useGameStore.getState().setSelectedRunBuff(alternateSelection);
+    expect(useGameStore.getState().selectedRunBuffId).toBe(initialSelection);
+    expect(useGameStore.getState().chooseRunBuff(initialSelection)).toBe(false);
+
+    now.mockReturnValue(defeatedAt + RUN_BUFF_INPUT_LOCK_MS - 1);
+    expect(useGameStore.getState().chooseRunBuff(initialSelection)).toBe(false);
+
+    now.mockReturnValue(defeatedAt + RUN_BUFF_INPUT_LOCK_MS);
+    useGameStore.getState().setSelectedRunBuff(alternateSelection);
+    expect(useGameStore.getState().selectedRunBuffId).toBe(alternateSelection);
+    expect(useGameStore.getState().chooseRunBuff(alternateSelection)).toBe(true);
+    now.mockRestore();
+  });
+
   it("offers explicit continuation after every buff reaches maximum rank", () => {
     const maxedRanks = Object.fromEntries(RUN_BUFF_ORDER.map((id) => [id, RUN_BUFFS[id].maxRank])) as RunBuffRanks;
     useGameStore.setState({
@@ -607,8 +636,11 @@ describe("Roguelike rounds", () => {
       runModifiers: compileRunModifiers(maxedRanks),
       draftBuffIds: [],
       selectedRunBuffId: null,
+      runBuffInputUnlockAt: Date.now() + RUN_BUFF_INPUT_LOCK_MS,
     });
 
+    expect(useGameStore.getState().continueRoguelikeRound()).toBe(false);
+    useGameStore.setState({ runBuffInputUnlockAt: 0 });
     expect(useGameStore.getState().continueRoguelikeRound()).toBe(true);
     expect(useGameStore.getState().phase).toBe("combat");
     expect(useGameStore.getState().round).toBe(2);
@@ -618,6 +650,82 @@ describe("Roguelike rounds", () => {
   });
 });
 
+describe("Rogue Trials", () => {
+  beforeEach(() => {
+    useGameStore.getState().configureHealer(
+      "priest",
+      "Aelia",
+      createClassInventory("priest"),
+      ["bulldrome", "broodfang-spider"],
+      "rogue-trials",
+    );
+    useGameStore.getState().startEncounter();
+  });
+
+  it("builds toward an unseen three-boss finale on round five", () => {
+    for (let expectedRound = 2; expectedRound <= 5; expectedRound += 1) {
+      const before = useGameStore.getState();
+      const seenBefore = [...before.seenBossIds];
+      useGameStore.setState((state) => ({
+        phase: "intermission",
+        runBuffInputUnlockAt: 0,
+        boss: { ...state.boss, hp: 0 },
+        additionalBosses: state.additionalBosses.map((entry) => ({ ...entry, boss: { ...entry.boss, hp: 0 } })),
+      }));
+
+      const buffId = useGameStore.getState().draftBuffIds[0]!;
+      expect(useGameStore.getState().chooseRunBuff(buffId)).toBe(true);
+      const next = useGameStore.getState();
+      const nextBossIds = [next.boss.id, ...next.additionalBosses.map((entry) => entry.boss.id)];
+      expect(next.round).toBe(expectedRound);
+      expect(nextBossIds).toHaveLength(expectedRound === 5 ? 3 : 2);
+      expect(nextBossIds.every((bossId) => !seenBefore.includes(bossId))).toBe(true);
+    }
+
+    const finale = useGameStore.getState();
+    expect(finale.seenBossIds).toHaveLength(11);
+    expect(finale.additionalBosses).toHaveLength(2);
+  });
+
+  it("ends in victory after all three finale bosses fall", () => {
+    useGameStore.getState().configureHealer(
+      "priest",
+      "Aelia",
+      createClassInventory("priest"),
+      ["ashwing-demon", "riftclaw-demon", "tempestscale-dragon"],
+      "rogue-trials",
+    );
+    useGameStore.getState().startEncounter();
+    useGameStore.setState((state) => ({
+      round: 5,
+      phase: "combat",
+      boss: { ...state.boss, hp: 0 },
+      additionalBosses: state.additionalBosses.map((entry) => ({ ...entry, boss: { ...entry.boss, hp: 0 } })),
+    }));
+
+    useGameStore.getState().tick(0.05);
+    expect(useGameStore.getState().phase).toBe("victory");
+  });
+
+  it("restarts a completed trial with a fresh two-boss first round", () => {
+    useGameStore.getState().configureHealer(
+      "priest",
+      "Aelia",
+      createClassInventory("priest"),
+      ["ashwing-demon", "riftclaw-demon", "tempestscale-dragon"],
+      "rogue-trials",
+    );
+    useGameStore.setState({ round: 5, phase: "victory" });
+
+    useGameStore.getState().restart();
+    const restarted = useGameStore.getState();
+    expect(restarted.round).toBe(1);
+    expect(restarted.phase).toBe("briefing");
+    expect(restarted.additionalBosses).toHaveLength(1);
+    expect(restarted.seenBossIds).toHaveLength(2);
+  });
+});
+
 describe("shared arena boundary", () => {
   beforeEach(() => {
     useGameStore.getState().configureHealer("priest", "Aelia", createClassInventory("priest"));

src/game/store.ts

@@ -24,6 +24,8 @@ import {
   runAbilityManaCost,
   selectRunBuffDraft,
   selectRandomBossPair,
+  selectRogueTrialsBosses,
+  ROGUE_TRIALS_TRIO_ROUND,
   type CompiledRunModifiers,
 } from "./roguelike";
 import { createDefaultGearProgress, type GearProgress } from "./progression/gear";
@@ -72,9 +74,11 @@ export interface GameState {
   phase: GamePhase;
   runMode: RunMode;
   round: number;
+  seenBossIds: BossId[];
   runBuffRanks: RunBuffRanks;
   draftBuffIds: RunBuffId[];
   selectedRunBuffId: RunBuffId | null;
+  runBuffInputUnlockAt: number;
   passiveRunBuffId: RunBuffId | null;
   runModifiers: CompiledRunModifiers;
   healingMultiplier: number;
@@ -131,19 +135,20 @@ const emptyCooldowns = (): Record<AbilityId, number> => ({
 });
 
 export const GLOBAL_COOLDOWN_SECONDS = 0.5;
+export const RUN_BUFF_INPUT_LOCK_MS = 2_500;
 
 export const BARRIER_RADIUS = 3;
 export const BARRIER_DAMAGE_REDUCTION = 0.3;
 
 const normalizeBossIds = (bossIds: BossId | readonly BossId[] = "bulldrome"): BossId[] => {
   const requested = typeof bossIds === "string" ? [bossIds] : [...bossIds];
-  const unique = requested.filter((bossId, index) => requested.indexOf(bossId) === index).slice(0, 2);
+  const unique = requested.filter((bossId, index) => requested.indexOf(bossId) === index).slice(0, 3);
   return unique.length ? unique : ["bulldrome"];
 };
 
 function createEncounterMotion(bossId: BossId, index: number, count: number): BossMotionState {
   const motion = cloneMotion(createBossMotionState(bossId));
-  const offset = count > 1 ? (index === 0 ? -2.65 : 2.65) : 0;
+  const offset = count === 3 ? [-3.7, 0, 3.7][index] : count === 2 ? [-2.65, 2.65][index] : 0;
   motion.formationOffsetX = offset;
   motion.position[0] += offset;
   motion.chargeStart[0] += offset;
@@ -280,6 +285,7 @@ function initialState(
   runBuffRanks: RunBuffRanks = {},
   gearProgress: GearProgress = createDefaultGearProgress(),
   requestedDifficultySlug: DifficultySlug = "initiate",
+  seenBossIds: readonly BossId[] = [],
 ) {
   const difficultySlug = normalizeDifficultySlug(requestedDifficultySlug);
   const difficulty = DIFFICULTY_BY_SLUG[difficultySlug];
@@ -294,7 +300,7 @@ function initialState(
   const gearModifiers = createEncounterGearModifiers(gearProgress, healerClassId);
   const passiveInfusionId = passiveInfusionUnlocked(gearProgress) ? gearProgress[healerClassId].passiveInfusionId : null;
   const runModifiers = compileRunModifiers(runBuffRanks, passiveInfusionId);
-  const draftBuffIds = runMode === "roguelike" ? selectRunBuffDraft(runBuffRanks, passiveInfusionId) : [];
+  const draftBuffIds = runMode !== "encounter" ? selectRunBuffDraft(runBuffRanks, passiveInfusionId) : [];
   const party = applyGearHealth(freshParty(healerClassId, playerName), gearModifiers);
   const maxMana = 100;
   return {
@@ -306,9 +312,11 @@ function initialState(
     phase: "briefing" as GamePhase,
     runMode,
     round,
+    seenBossIds: [...new Set([...seenBossIds, ...bossIds])],
     runBuffRanks: { ...runBuffRanks },
     draftBuffIds,
     selectedRunBuffId: draftBuffIds[0] ?? null,
+    runBuffInputUnlockAt: 0,
     passiveRunBuffId: passiveInfusionId,
     runModifiers,
     healingMultiplier: gearModifiers.aelia.healingPower,
@@ -348,10 +356,10 @@ export const useGameStore = create<GameState>((set, get) => ({
   },
 
   startEncounter: () => {
-    const { healerClassId, playerName, inventory, boss, additionalBosses, runMode, round, runBuffRanks, gearProgress, difficultySlug } = get();
+    const { healerClassId, playerName, inventory, boss, additionalBosses, runMode, round, runBuffRanks, gearProgress, difficultySlug, seenBossIds } = get();
     const bossIds = [boss.id, ...additionalBosses.map((entry) => entry.boss.id)];
     set({
-      ...initialState(healerClassId, playerName, inventory, bossIds, runMode, round, runBuffRanks, gearProgress, difficultySlug),
+      ...initialState(healerClassId, playerName, inventory, bossIds, runMode, round, runBuffRanks, gearProgress, difficultySlug, seenBossIds),
       phase: "combat",
       activeTab: "combat",
       combatLog: [{ id: Date.now(), time: 0, message: `${bossIds.map((bossId) => BOSS_DEFINITIONS[bossId].name).join(" and ")} engaged.`, tone: "danger" }],
@@ -360,7 +368,10 @@ export const useGameStore = create<GameState>((set, get) => ({
 
   restart: () => {
     const { healerClassId, playerName, inventory, boss, additionalBosses, runMode, gearProgress, difficultySlug } = get();
-    set(initialState(healerClassId, playerName, inventory, [boss.id, ...additionalBosses.map((entry) => entry.boss.id)], runMode, 1, {}, gearProgress, difficultySlug));
+    const bossIds = runMode === "rogue-trials"
+      ? selectRandomBossPair()
+      : [boss.id, ...additionalBosses.map((entry) => entry.boss.id)];
+    set(initialState(healerClassId, playerName, inventory, bossIds, runMode, 1, {}, gearProgress, difficultySlug));
   },
 
   selectMember: (selectedMemberId) => set({ selectedMemberId }),
@@ -380,20 +391,24 @@ export const useGameStore = create<GameState>((set, get) => ({
   togglePause: () => set((state) => ({ paused: !state.paused, pauseSelection: "resume" })),
   setPauseSelection: (pauseSelection) => set({ pauseSelection }),
   setSelectedRunBuff: (selectedRunBuffId) => set((state) =>
-    state.phase === "intermission" && state.draftBuffIds.includes(selectedRunBuffId)
+    state.phase === "intermission"
+      && !isRunBuffInputLocked(state)
+      && state.draftBuffIds.includes(selectedRunBuffId)
       ? { selectedRunBuffId }
       : state
   ),
   chooseRunBuff: (buffId) => {
     const state = get();
-    if (state.phase !== "intermission" || !state.draftBuffIds.includes(buffId)) return false;
+    if (state.phase !== "intermission" || isRunBuffInputLocked(state) || !state.draftBuffIds.includes(buffId)) return false;
     const runBuffRanks = increaseRunBuffRank(state.runBuffRanks, buffId);
     const round = state.round + 1;
     const previousBossIds = [state.boss.id, ...state.additionalBosses.map((entry) => entry.boss.id)];
-    const bossIds = selectRandomBossPair(previousBossIds);
+    const bossIds = state.runMode === "rogue-trials"
+      ? selectRogueTrialsBosses(round, state.seenBossIds)
+      : selectRandomBossPair(previousBossIds);
     const abilityName = HEALER_CLASSES[state.healerClassId].abilities[RUN_BUFFS[buffId].abilityId].name;
     set({
-      ...initialState(state.healerClassId, state.playerName, state.inventory, bossIds, "roguelike", round, runBuffRanks, state.gearProgress, state.difficultySlug),
+      ...initialState(state.healerClassId, state.playerName, state.inventory, bossIds, state.runMode, round, runBuffRanks, state.gearProgress, state.difficultySlug, state.seenBossIds),
       phase: "combat",
       activeTab: "combat",
       combatLog: [{
@@ -407,12 +422,14 @@ export const useGameStore = create<GameState>((set, get) => ({
   },
   continueRoguelikeRound: () => {
     const state = get();
-    if (state.phase !== "intermission" || state.draftBuffIds.length > 0) return false;
+    if (state.phase !== "intermission" || isRunBuffInputLocked(state) || state.draftBuffIds.length > 0) return false;
     const round = state.round + 1;
     const previousBossIds = [state.boss.id, ...state.additionalBosses.map((entry) => entry.boss.id)];
-    const bossIds = selectRandomBossPair(previousBossIds);
+    const bossIds = state.runMode === "rogue-trials"
+      ? selectRogueTrialsBosses(round, state.seenBossIds)
+      : selectRandomBossPair(previousBossIds);
     set({
-      ...initialState(state.healerClassId, state.playerName, state.inventory, bossIds, "roguelike", round, state.runBuffRanks, state.gearProgress, state.difficultySlug),
+      ...initialState(state.healerClassId, state.playerName, state.inventory, bossIds, state.runMode, round, state.runBuffRanks, state.gearProgress, state.difficultySlug, state.seenBossIds),
       phase: "combat",
       activeTab: "combat",
       combatLog: [{
@@ -721,8 +738,11 @@ export const useGameStore = create<GameState>((set, get) => ({
     const tank = party.find((member) => member.id === "brann")!;
     const healer = party.find((member) => member.id === "aelia")!;
     let phase: GamePhase = state.phase;
+    let runBuffInputUnlockAt = state.runBuffInputUnlockAt;
     if (encounterBosses.every((entry) => entry.boss.hp <= 0)) {
-      phase = state.runMode === "roguelike" ? "intermission" : "victory";
+      const rogueTrialsComplete = state.runMode === "rogue-trials" && state.round === ROGUE_TRIALS_TRIO_ROUND;
+      phase = state.runMode !== "encounter" && !rogueTrialsComplete ? "intermission" : "victory";
+      if (phase === "intermission") runBuffInputUnlockAt = Date.now() + RUN_BUFF_INPUT_LOCK_MS;
       combatLog = addLog(combatLog, time, `${encounterBosses.map((entry) => entry.boss.name).join(" and ")} fall. Party survives.`, "good");
     } else if (tank.hp <= 0 || healer.hp <= 0) {
       phase = "defeat";
@@ -739,6 +759,7 @@ export const useGameStore = create<GameState>((set, get) => ({
       partyPositions,
       bossMotion,
       phase,
+      runBuffInputUnlockAt,
       mana: Math.min(state.maxMana, state.mana + 3.2 * (time - oldTime)),
       activeCast,
       combatLog,
@@ -794,6 +815,13 @@ export function abilityRemaining(abilityId: AbilityId, time: number, cooldowns:
   return Math.max(0, cooldowns[abilityId] - time);
 }
 
+export function isRunBuffInputLocked(
+  state: Pick<GameState, "phase" | "runBuffInputUnlockAt">,
+  now = Date.now(),
+) {
+  return state.phase === "intermission" && now < state.runBuffInputUnlockAt;
+}
+
 export { upcomingMechanic };
 
 export function upcomingEncounterMechanic(state: Pick<GameState, "boss" | "bossMotion" | "additionalBosses" | "time">) {

src/game/types.ts

@@ -61,7 +61,7 @@ export type BossMechanicId =
   | "soul-siphon";
 export type BossAnimationCue = "idle" | "move" | "attack" | "special";
 export type GamePhase = "briefing" | "combat" | "intermission" | "victory" | "defeat";
-export type RunMode = "encounter" | "roguelike";
+export type RunMode = "encounter" | "roguelike" | "rogue-trials";
 export type RunBuffId =
   | "mend-echo"
   | "mend-efficiency"

src/game/useGameLoop.ts

@@ -1,7 +1,7 @@
 import { useEffect, useRef } from "react";
 import { subscribeControllerToken } from "../input/controller";
 import { ABILITY_ORDER } from "./data";
-import { useGameStore } from "./store";
+import { isRunBuffInputLocked, useGameStore } from "./store";
 import type { AbilityId } from "./types";
 
 function cycleRunBuff(direction: 1 | -1) {
@@ -43,6 +43,7 @@ export function useActionBindings(enabled = true, onExit?: () => void) {
       }
       if (store.phase === "intermission") {
         if (["arrowleft", "arrowup", "arrowright", "arrowdown", "enter"].includes(key)) event.preventDefault();
+        if (isRunBuffInputLocked(store)) return;
         if (key === "arrowleft" || key === "arrowup") cycleRunBuff(-1);
         if (key === "arrowright" || key === "arrowdown") cycleRunBuff(1);
         if (key === "enter") {
@@ -99,6 +100,7 @@ export function useActionBindings(enabled = true, onExit?: () => void) {
       return;
     }
     if (store.phase === "intermission") {
+      if (isRunBuffInputLocked(store)) return;
       if (["Button12", "Button14", "Axis0-", "Axis1-"].includes(token)) cycleRunBuff(-1);
       if (["Button13", "Button15", "Axis0+", "Axis1+"].includes(token)) cycleRunBuff(1);
       if (!repeat && token === "Button0") {

src/input/controller.test.ts

@@ -10,18 +10,18 @@ describe("controller movement normalization", () => {
   beforeEach(() => resetControllerState());
 
   it("ignores dead-zone noise and quantizes analog jitter", () => {
-    const updates: Array<{ x: number; y: number }> = [];
+    const updates: Array<{ moveX: number; moveY: number; lookX: number; lookY: number }> = [];
     const unsubscribe = subscribeControllerMovement((movement) => {
-      updates.push({ x: movement.x, y: movement.y });
+      updates.push({ ...movement });
     });
 
-    setExternalControllerMovement({ x: 0.08, y: -0.1 });
+    setExternalControllerMovement({ moveX: 0.08, moveY: -0.1, lookX: 0.11, lookY: -0.02 });
     expect(updates).toHaveLength(0);
 
-    setExternalControllerMovement({ x: 0.5001, y: -0.5001 });
+    setExternalControllerMovement({ moveX: 0.5001, moveY: -0.5001, lookX: 0.2501, lookY: -0.2501 });
-    setExternalControllerMovement({ x: 0.5002, y: -0.5002 });
+    setExternalControllerMovement({ moveX: 0.5002, moveY: -0.5002, lookX: 0.2502, lookY: -0.2502 });
-    expect(updates).toEqual([{ x: 0.5, y: -0.5 }]);
+    expect(updates).toEqual([{ moveX: 0.5, moveY: -0.5, lookX: 0.25, lookY: -0.25 }]);
-    expect(getControllerMovement()).toEqual({ x: 0.5, y: -0.5 });
+    expect(getControllerMovement()).toEqual({ moveX: 0.5, moveY: -0.5, lookX: 0.25, lookY: -0.25 });
 
     unsubscribe();
   });

src/input/controller.ts

@@ -6,8 +6,10 @@ export interface ControllerTokenEvent {
 }
 
 export interface ControllerMovement {
-  x: number;
+  moveX: number;
-  y: number;
+  moveY: number;
+  lookX: number;
+  lookY: number;
 }
 
 type TokenListener = (event: ControllerTokenEvent) => void;
@@ -30,7 +32,7 @@ const repeatAt = new Map<string, number>();
 const lastNativeTokenAt = new Map<string, number>();
 let previousTokens = new Set<string>();
 let currentTokens = new Set<string>();
-let movement: ControllerMovement = { x: 0, y: 0 };
+let movement: ControllerMovement = { moveX: 0, moveY: 0, lookX: 0, lookY: 0 };
 let stopService: (() => void) | null = null;
 let dispatchDepth = 0;
 
@@ -97,14 +99,25 @@ export function getControllerMovement(): Readonly<ControllerMovement> {
 }
 
 export function setExternalControllerMovement(next: ControllerMovement) {
-  setExternalControllerAxes(next.x, next.y);
+  setExternalControllerAxes(next.moveX, next.moveY, next.lookX, next.lookY);
 }
 
-function setExternalControllerAxes(nextX: number, nextY: number) {
+function normalizedAxis(value: number) {
-  const x = Math.abs(nextX) >= 0.12 ? Math.round(nextX * MOVEMENT_AXIS_STEPS) / MOVEMENT_AXIS_STEPS : 0;
+  return Math.abs(value) >= 0.12 ? Math.round(value * MOVEMENT_AXIS_STEPS) / MOVEMENT_AXIS_STEPS : 0;
-  const y = Math.abs(nextY) >= 0.12 ? Math.round(nextY * MOVEMENT_AXIS_STEPS) / MOVEMENT_AXIS_STEPS : 0;
+}
-  if (x === movement.x && y === movement.y) return;
+
-  movement = { x, y };
+function setExternalControllerAxes(nextMoveX: number, nextMoveY: number, nextLookX: number, nextLookY: number) {
+  const moveX = normalizedAxis(nextMoveX);
+  const moveY = normalizedAxis(nextMoveY);
+  const lookX = normalizedAxis(nextLookX);
+  const lookY = normalizedAxis(nextLookY);
+  if (
+    moveX === movement.moveX
+    && moveY === movement.moveY
+    && lookX === movement.lookX
+    && lookY === movement.lookY
+  ) return;
+  movement = { moveX, moveY, lookX, lookY };
   for (const listener of movementListeners) listener(movement);
 }
 
@@ -113,7 +126,7 @@ export function resetControllerState() {
   currentTokens.clear();
   repeatAt.clear();
   lastNativeTokenAt.clear();
-  setExternalControllerAxes(0, 0);
+  setExternalControllerAxes(0, 0, 0, 0);
 }
 
 export function startControllerInput() {
@@ -153,7 +166,12 @@ export function startControllerInput() {
       hadConnectedGamepad = false;
     } else {
       hadConnectedGamepad = true;
-      setExternalControllerAxes(gamepad.axes[0] ?? 0, gamepad.axes[1] ?? 0);
+      setExternalControllerAxes(
+        gamepad.axes[0] ?? 0,
+        gamepad.axes[1] ?? 0,
+        gamepad.axes[2] ?? 0,
+        gamepad.axes[3] ?? 0,
+      );
       tokensFor(gamepad, currentTokens);
       for (const token of currentTokens) {
         const pressed = !previousTokens.has(token);

src/platform/BottomDisplayApp.tsx

@@ -77,11 +77,11 @@ export function BottomDisplayApp() {
     const sentControllerIds = new Set<string>();
     let controllerSequence = 0;
     let receivingControllerEcho = false;
-    let latestMovement = { x: 0, y: 0 };
+    let latestMovement = { moveX: 0, moveY: 0, lookX: 0, lookY: 0 };
     const movementPublisher = createRateLimitedPublisher(() => {
       channel.postMessage({
         type: "controller-motion",
-        movement: { x: latestMovement.x, y: latestMovement.y },
+        movement: { ...latestMovement },
       } satisfies DualScreenMessage);
     }, CONTROLLER_MOTION_SYNC_INTERVAL_MS);
     const announceReady = () => channel.postMessage({ type: "companion-ready" } satisfies DualScreenMessage);
@@ -94,6 +94,7 @@ export function BottomDisplayApp() {
       if (!isControllerDispatchActive()) channel.postMessage({ type: "frontend-command", command } satisfies DualScreenMessage);
     };
     useFrontendStore.setState({
+      restoreSession: () => Promise.resolve(false),
       signIn: (username, password) => {
         postFrontend({ name: "signIn", username, password });
         return Promise.resolve(false);
@@ -113,8 +114,14 @@ export function BottomDisplayApp() {
       playSlot: (slotId) => postFrontend({ name: "playSlot", slotId }),
       deleteSlot: (slotId) => postFrontend({ name: "deleteSlot", slotId }),
       copySlot: (sourceId, targetId) => postFrontend({ name: "copySlot", sourceId, targetId }),
-      uploadSlot: (slotId) => postFrontend({ name: "uploadSlot", slotId }),
+      uploadSlot: (slotId) => {
-      downloadSlot: (slotId) => postFrontend({ name: "downloadSlot", slotId }),
+        postFrontend({ name: "uploadSlot", slotId });
+        return Promise.resolve();
+      },
+      downloadSlot: (slotId) => {
+        postFrontend({ name: "downloadSlot", slotId });
+        return Promise.resolve();
+      },
       selectMode: (mode) => postFrontend({ name: "selectMode", mode }),
       selectBoss: (bossId) => postFrontend({ name: "selectBoss", bossId }),
       selectDifficulty: (difficultySlug) => postFrontend({ name: "selectDifficulty", difficultySlug }),

src/platform/useThorDualScreen.ts

@@ -92,7 +92,7 @@ export function useAuthoritativeDualScreenSync() {
         companionReady = false;
         lastPublishedGame = undefined;
         gamePublisher.cancel();
-        setExternalControllerMovement({ x: 0, y: 0 });
+        setExternalControllerMovement({ moveX: 0, moveY: 0, lookX: 0, lookY: 0 });
       } else if (event.data.type === "controller-token") {
         receivingRelayedToken = true;
         emitControllerToken(event.data.event);

src/styles.css

@@ -52,13 +52,13 @@ button:focus-visible {
   outline-offset: 2px;
 }
 
-.prototype-shell {
+.app-shell {
   width: 100%;
   min-height: 100vh;
   padding: 22px 24px 70px;
 }
 
-.prototype-header {
+.app-header {
   width: min(var(--thor-main-css-width), 100%);
   margin: 0 auto 16px;
   display: flex;
@@ -69,31 +69,31 @@ button:focus-visible {
   letter-spacing: 0.13em;
 }
 
-.prototype-header div {
+.app-header div {
   display: grid;
 }
 
-.prototype-header span,
+.app-header span,
-.prototype-header p {
+.app-header p {
   font-size: 11px;
   font-weight: 600;
   margin: 0;
 }
 
-.prototype-header strong {
+.app-header strong {
   color: var(--ink);
   font-family: "Cinzel", Georgia, serif;
   font-size: 19px;
   letter-spacing: 0.05em;
 }
 
-.prototype-header p {
+.app-header p {
   display: flex;
   align-items: center;
   gap: 8px;
 }
 
-.prototype-header p i {
+.app-header p i {
   width: 3px;
   height: 3px;
   border-radius: 50%;
@@ -366,10 +366,13 @@ button:focus-visible {
   transform: translateX(-50%);
 }
 
-.boss-bar-wrap.is-dual { top: 2.2%; width: 39%; display: grid; gap: 3px; }
+.boss-bar-wrap.is-multi { top: 2.2%; width: 39%; display: grid; gap: 3px; }
-.boss-bar-wrap.is-dual .boss-name strong { font-size: 10px; }
+.boss-bar-wrap.is-multi .boss-name strong { font-size: 10px; }
-.boss-bar-wrap.is-dual .boss-name { font-size: 6px; }
+.boss-bar-wrap.is-multi .boss-name { font-size: 6px; }
-.boss-bar-wrap.is-dual .boss-bar { height: 6px; margin-top: 2px; padding: 1px; }
+.boss-bar-wrap.is-multi .boss-bar { height: 6px; margin-top: 2px; padding: 1px; }
+.boss-bar-wrap.is-trio { top: 1.1%; width: 42%; gap: 2px; }
+.boss-bar-wrap.is-trio .boss-name strong { font-size: 8px; }
+.boss-bar-wrap.is-trio .boss-bar { height: 5px; margin-top: 1px; }
 
 .boss-name {
   display: grid;
@@ -1134,6 +1137,8 @@ button:focus-visible {
   text-align: left;
 }
 .buff-choice-grid button.is-controller-focused { outline: 2px solid var(--gold-strong); outline-offset: 2px; transform: translateY(-2px); }
+.buff-draft.is-input-locked .buff-choice-grid button { cursor: default; filter: saturate(0.55) brightness(0.78); }
+.buff-draft.is-input-locked .buff-choice-grid button.is-controller-focused { outline-color: #60726b; transform: none; }
 .buff-choice-grid button > i { grid-row: 1 / 3; width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid var(--buff-accent); color: var(--buff-accent); font-family: "Cinzel", serif; font-size: 16px; font-style: normal; }
 .buff-choice-grid button > span { min-width: 0; display: grid; }
 .buff-choice-grid button small { color: var(--buff-accent); font-size: 6px; letter-spacing: 0.1em; text-transform: uppercase; }
@@ -1278,9 +1283,9 @@ button:focus-visible {
 }
 
 @media (max-width: 760px) {
-  .prototype-shell { padding: 10px 7px 45px; }
+  .app-shell { padding: 10px 7px 45px; }
-  .prototype-header { padding: 0 4px; }
+  .app-header { padding: 0 4px; }
-  .prototype-header p { display: none; }
+  .app-header p { display: none; }
   .screen-label span { font-size: 8px; }
   .screen-label small { display: none; }
   .display { box-shadow: 0 0 0 3px #080d0c, 0 0 0 4px rgba(152, 181, 171, 0.1), 0 12px 35px rgba(0,0,0,0.55); }
@@ -1324,7 +1329,7 @@ button:focus-visible {
 .native-platform,
 .native-platform body,
 .native-platform #root,
-.native-platform .prototype-shell,
+.native-platform .app-shell,
 .native-platform .device-frame {
   width: 100%;
   height: 100%;
@@ -1332,11 +1337,11 @@ button:focus-visible {
   overflow: hidden;
 }
 
-.native-platform .prototype-shell {
+.native-platform .app-shell {
   padding: 0;
 }
 
-.native-platform .prototype-header,
+.native-platform .app-header,
 .native-platform .screen-label,
 .native-platform .hinge {
   display: none;
@@ -1753,7 +1758,7 @@ button:focus-visible {
 .home-title { padding: 17px 2px 12px; }
 .home-title span { color: var(--gold); font-size: 8px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; }
 .home-title h1 { margin: 2px 0 0; font-family: "Cinzel", serif; font-size: 25px; font-weight: 500; }
-.mode-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, 84px); gap: 10px; }
+.mode-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(2, 78px); gap: 10px; }
 .mode-card { position: relative; display: grid; grid-template-columns: 54px 1fr 17px; align-items: center; gap: 12px; padding: 13px; overflow: hidden; text-align: left; }
 .mode-card::after { position: absolute; inset: 0; content: ""; background: linear-gradient(110deg, rgba(69,153,131,0.13), transparent 60%); pointer-events: none; }
 .mode-card.is-wide { grid-row: 1 / 3; }
@@ -1811,6 +1816,10 @@ button:focus-visible {
 /* Profile */
 
 .profile-surface { padding: 0 30px; }
+.profile-header { grid-template-columns: 190px minmax(0, 1fr) auto auto; }
+.profile-view-tabs { display: flex; gap: 4px; }
+.profile-view-tabs button { min-height: 28px; padding: 5px 9px; color: #80948c; font-size: 8px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
+.profile-view-tabs button.is-selected { border-color: var(--gold); color: var(--gold-strong); background: linear-gradient(180deg, rgba(102,82,30,.28), rgba(37,29,12,.18)); }
 .collection-heading { display: flex; align-items: end; justify-content: space-between; padding: 16px 2px 10px; }
 .collection-heading > span { display: grid; }
 .collection-heading small { color: var(--gold); font-size: 8px; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; }
@@ -1832,18 +1841,70 @@ button:focus-visible {
 .collection-note > span { display: flex; align-items: baseline; gap: 8px; }
 .collection-note strong { font-size: 9px; }
 .collection-note small { color: #758a82; font-size: 8px; }
+.trophy-heading { padding-top: 11px; }
+.trophy-case { display: grid; gap: 10px; }
+.trophy-count-1 { grid-template-columns: 1fr; }
+.trophy-count-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+.trophy-count-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
+.trophy-count-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
+.trophy-count-1 .boss-trophy { width: min(280px, 100%); justify-self: center; }
+.boss-trophy { --boss-accent: var(--gold); position: relative; min-width: 0; height: 326px; overflow: hidden; border: 1px solid #43574f; border-top: 2px solid #6e8079; background: radial-gradient(circle at 50% 18%, color-mix(in srgb, var(--boss-accent) 18%, transparent), transparent 47%), linear-gradient(180deg, #0b1815, #07100e); box-shadow: inset 0 0 30px rgba(0,0,0,.55); }
+.boss-trophy::before { content: ""; position: absolute; inset: 7px; z-index: 2; border: 1px solid rgba(198,218,210,.1); pointer-events: none; }
+.boss-trophy.is-owned { border-color: color-mix(in srgb, var(--boss-accent) 68%, #d6bf79); box-shadow: inset 0 0 30px rgba(0,0,0,.42), 0 0 15px color-mix(in srgb, var(--boss-accent) 24%, transparent); }
+.boss-trophy.is-locked { border-color: #3b4844; background: linear-gradient(180deg, #111715, #080d0c); }
+.trophy-portrait { position: relative; height: 224px; overflow: hidden; border-bottom: 1px solid rgba(180,207,197,.16); background: radial-gradient(ellipse at 50% 68%, color-mix(in srgb, var(--boss-accent) 18%, transparent), transparent 48%); }
+.trophy-portrait canvas { position: relative; z-index: 1; display: block; width: 100% !important; height: 100% !important; pointer-events: none; }
+.trophy-portrait > span { position: absolute; right: 12px; bottom: 7px; z-index: 2; color: color-mix(in srgb, var(--boss-accent) 78%, #fff); font: 19px "Cinzel", serif; opacity: .72; }
+.boss-trophy.is-locked .trophy-portrait canvas { filter: grayscale(1) brightness(.36) contrast(1.18); opacity: .7; }
+.boss-trophy.is-locked .trophy-portrait::after { content: ""; position: absolute; inset: 0; z-index: 1; background: repeating-linear-gradient(135deg, rgba(8,12,11,.25) 0 5px, rgba(23,28,26,.16) 5px 10px); pointer-events: none; }
+.boss-trophy.is-locked .trophy-portrait > span { color: #75817d; opacity: .42; }
+.trophy-plaque { position: absolute; right: 10px; bottom: 12px; left: 10px; display: grid; }
+.trophy-plaque small { color: color-mix(in srgb, var(--boss-accent) 78%, #d8d0b4); font-size: 7px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
+.boss-trophy.is-locked .trophy-plaque small { color: #69756f; }
+.trophy-plaque strong { margin-top: 2px; overflow: hidden; font-family: "Cinzel", serif; font-size: 12px; font-weight: 500; line-height: 1.15; text-overflow: ellipsis; white-space: nowrap; }
+.trophy-plaque span { margin-top: 5px; color: #768981; font-size: 8px; text-transform: uppercase; }
+.trophy-state { position: absolute; top: 13px; left: 13px; z-index: 3; padding: 3px 6px; border: 1px solid color-mix(in srgb, var(--boss-accent) 58%, #716d5d); color: #fff0bb; background: rgba(9,17,14,.82); font-size: 7px; letter-spacing: .12em; text-transform: uppercase; }
+.boss-trophy.is-locked .trophy-state { border-color: #56615d; color: #8b9893; background: rgba(12,16,15,.86); }
+.trophy-note { margin-top: 8px; }
+.boss-stats-heading { padding-top: 10px; }
+.boss-stats-layout { height: 331px; display: grid; grid-template-columns: minmax(235px, .78fr) minmax(0, 1.22fr); gap: 11px; }
+.boss-stat-selector { min-width: 0; display: grid; align-content: start; gap: 5px; }
+.boss-stat-selector button { width: 100%; min-height: 52px; display: grid; grid-template-columns: 30px minmax(0, 1fr) 32px; align-items: center; gap: 8px; padding: 6px 9px; text-align: left; }
+.boss-stat-selector button.is-selected { border-color: var(--gold); box-shadow: inset 3px 0 var(--gold); background: linear-gradient(90deg, rgba(93,73,23,.27), rgba(8,18,15,.88)); }
+.boss-stat-selector button > i { width: 27px; height: 27px; display: grid; place-items: center; border: 1px solid #496159; color: var(--gold); font-style: normal; }
+.boss-stat-selector button > span { min-width: 0; display: grid; }
+.boss-stat-selector strong { overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
+.boss-stat-selector small { overflow: hidden; color: #6f837b; font-size: 7px; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
+.boss-stat-selector button > b { color: var(--gold-strong); font-family: "Cinzel", serif; font-size: 16px; text-align: right; }
+.leaderboard-panel { min-width: 0; overflow: hidden; border: 1px solid #435950; background: linear-gradient(180deg, rgba(11,25,21,.94), rgba(5,13,11,.94)); }
+.leaderboard-panel > header { height: 53px; display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; border-bottom: 1px solid var(--line); background: rgba(59,47,17,.16); }
+.leaderboard-panel > header span { min-width: 0; display: grid; }
+.leaderboard-panel > header small { color: var(--gold); font-size: 7px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
+.leaderboard-panel > header strong { overflow: hidden; font: 500 13px "Cinzel", serif; text-overflow: ellipsis; white-space: nowrap; }
+.leaderboard-panel > header > b { color: #88a79b; font-size: 8px; text-transform: uppercase; }
+.leaderboard-rows { min-height: 218px; padding: 4px 8px; }
+.leaderboard-rows > div, .leaderboard-self { min-height: 40px; display: grid; grid-template-columns: 34px minmax(0, 1fr) 44px; align-items: center; gap: 8px; padding: 4px 7px; border-bottom: 1px solid rgba(164,195,184,.1); }
+.leaderboard-rows > div.is-you { background: rgba(102,81,24,.2); }
+.leaderboard-rows > div > b, .leaderboard-self > b { color: var(--gold); font: 600 12px "Cinzel", serif; }
+.leaderboard-rows span, .leaderboard-self span { min-width: 0; display: grid; }
+.leaderboard-rows strong, .leaderboard-self strong { overflow: hidden; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
+.leaderboard-rows small, .leaderboard-self small { color: #6d8179; font-size: 6px; text-transform: uppercase; }
+.leaderboard-rows em, .leaderboard-self em { color: #e8f3ee; font: 500 15px "Cinzel", serif; font-style: normal; text-align: right; }
+.leaderboard-self { min-height: 48px; margin: 0 8px 7px; border: 1px solid rgba(232,200,114,.33); background: rgba(79,62,19,.2); }
+.leaderboard-status, .leaderboard-empty { min-height: 218px; display: grid; place-items: center; padding: 20px; color: #71867e; font-size: 9px; text-align: center; text-transform: uppercase; }
+.leaderboard-empty { min-height: 200px !important; border: 0 !important; }
 .profile-context { padding: 0 5.5% 18px; }
 .profile-context .context-header { margin: 0 -5.8%; }
-.profile-stats { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--line); }
+.profile-stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-bottom: 1px solid var(--line); }
-.profile-stats span { display: grid; padding: 12px 9px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
+.profile-stats span { min-width: 0; display: grid; padding: 8px 6px; border-right: 1px solid var(--line); }
-.profile-stats span:nth-child(even) { border-right: 0; }
+.profile-stats span:last-child { border-right: 0; }
 .profile-stats small { color: #6d8179; font-size: clamp(7px, 1.5cqw, 9px); text-transform: uppercase; }
-.profile-stats strong { color: var(--gold-strong); font-family: "Cinzel", serif; font-size: clamp(16px, 3.3cqw, 20px); font-weight: 500; }
+.profile-stats strong { color: var(--gold-strong); font-family: "Cinzel", serif; font-size: clamp(14px, 2.8cqw, 17px); font-weight: 500; }
-.boss-log { margin-top: 13px; }
+.boss-log { margin-top: 7px; }
 .boss-log > span { color: #6c8179; font-size: 8px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
-.boss-log button { width: 100%; min-height: 52px; display: grid; grid-template-columns: 34px 1fr 30px; align-items: center; gap: 10px; margin-top: 7px; padding: 7px 10px; text-align: left; }
+.boss-log button { width: 100%; min-height: 36px; display: grid; grid-template-columns: 28px 1fr 30px; align-items: center; gap: 7px; margin-top: 3px; padding: 3px 8px; text-align: left; }
 .boss-log button.is-selected { border-left: 2px solid var(--gold); background: linear-gradient(90deg, rgba(91,75,31,0.22), rgba(8,21,17,0.85)); }
-.boss-log button > i { width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid #4d635b; color: var(--gold); font-style: normal; }
+.boss-log button > i { width: 25px; height: 25px; display: grid; place-items: center; border: 1px solid #4d635b; color: var(--gold); font-style: normal; }
 .boss-log button > span { display: grid; }
 .boss-log strong { font-size: clamp(10px, 2.15cqw, 13px); }
 .boss-log small { color: #687d75; font-size: clamp(7px, 1.45cqw, 9px); text-transform: uppercase; }
@@ -2005,6 +2066,9 @@ button:focus-visible {
   .front-screen-header { height: 44px; grid-template-columns: 125px 1fr auto; gap: 7px; }
   .front-screen-header h1 { font-size: 11px; }
   .save-surface, .home-surface, .profile-surface, .settings-surface, .mode-surface { padding-right: 12px; padding-left: 12px; }
+  .profile-header { grid-template-columns: 125px minmax(0, 1fr) auto auto; }
+  .profile-view-tabs { gap: 2px; }
+  .profile-view-tabs button { min-height: 22px; padding: 3px 5px; font-size: 5px; }
   .save-slot-grid { height: calc(100% - 75px); gap: 5px; }
   .save-slot { height: 84%; padding: 7px 5px; }
   .slot-portrait { width: 36px; height: 36px; margin-top: 7px; font-size: 14px; }
@@ -2054,6 +2118,40 @@ button:focus-visible {
   .collection-drop > p { right: 5px; bottom: 4px; left: 5px; padding-top: 3px; }
   .collection-note { margin-top: 5px; padding: 3px 5px; }
   .collection-note strong, .collection-note small { font-size: 5px; }
+  .trophy-heading { padding-top: 4px; }
+  .trophy-case { gap: 5px; }
+  .trophy-count-1 .boss-trophy { width: min(180px, 100%); }
+  .boss-trophy { height: 211px; }
+  .boss-trophy::before { inset: 3px; }
+  .trophy-portrait { height: 140px; }
+  .trophy-portrait > span { right: 6px; bottom: 3px; font-size: 10px; }
+  .trophy-plaque { right: 5px; bottom: 6px; left: 5px; }
+  .trophy-plaque small, .trophy-state { font-size: 4px; }
+  .trophy-plaque strong { font-size: 7px; }
+  .trophy-plaque span { margin-top: 2px; font-size: 4px; }
+  .trophy-state { top: 6px; left: 6px; padding: 2px 3px; }
+  .trophy-note { margin-top: 4px; }
+  .boss-stats-heading { padding-top: 3px; }
+  .boss-stats-layout { height: 213px; grid-template-columns: minmax(138px, .82fr) minmax(0, 1.18fr); gap: 4px; }
+  .boss-stat-selector { gap: 2px; }
+  .boss-stat-selector button { min-height: 34px; grid-template-columns: 18px minmax(0, 1fr) 18px; gap: 3px; padding: 2px 4px; }
+  .boss-stat-selector button > i { width: 16px; height: 16px; font-size: 7px; }
+  .boss-stat-selector strong { font-size: 6px; }
+  .boss-stat-selector small { font-size: 4px; }
+  .boss-stat-selector button > b { font-size: 9px; }
+  .leaderboard-panel > header { height: 35px; padding: 3px 6px; }
+  .leaderboard-panel > header small { font-size: 4px; }
+  .leaderboard-panel > header strong { font-size: 7px; }
+  .leaderboard-panel > header > b { font-size: 4px; }
+  .leaderboard-rows { min-height: 139px; padding: 2px 4px; }
+  .leaderboard-rows > div, .leaderboard-self { min-height: 25px; grid-template-columns: 20px minmax(0, 1fr) 24px; gap: 3px; padding: 2px 3px; }
+  .leaderboard-rows > div > b, .leaderboard-self > b { font-size: 7px; }
+  .leaderboard-rows strong, .leaderboard-self strong { font-size: 5px; }
+  .leaderboard-rows small, .leaderboard-self small { font-size: 3px; }
+  .leaderboard-rows em, .leaderboard-self em { font-size: 8px; }
+  .leaderboard-self { min-height: 29px; margin: 0 4px 3px; }
+  .leaderboard-status, .leaderboard-empty { min-height: 139px; padding: 7px; font-size: 5px; }
+  .leaderboard-empty { min-height: 130px !important; }
   .settings-layout { gap: 7px; padding-top: 7px; }
   .volume-setting { height: 98px; padding: 7px; }
   .volume-setting strong { font-size: 8px; }
@@ -2141,6 +2239,10 @@ button:focus-visible {
 .gear-slot-list button > i { width: 24px; height: 24px; display: grid; place-items: center; border: 1px solid #3d554c; color: #8fc4b1; font-style: normal; }
 .gear-owner-list button.is-selected,
 .gear-slot-list button.is-selected { border-color: var(--gold); box-shadow: inset 3px 0 var(--gold); background: rgba(72,58,21,.16); }
+.gear-owner-list button.is-upgrade-ready,
+.gear-slot-list button.is-upgrade-ready { border-color: #65e6a8; box-shadow: inset 3px 0 #65e6a8, 0 0 12px rgba(101,230,168,.28); background: rgba(29,103,72,.2); }
+.gear-owner-list button.is-upgrade-ready.is-selected,
+.gear-slot-list button.is-upgrade-ready.is-selected { box-shadow: inset 3px 0 var(--gold), 0 0 0 1px rgba(101,230,168,.35), 0 0 12px rgba(101,230,168,.28); }
 .gear-preview { padding: 16px; border: 1px solid var(--line); background: radial-gradient(circle at 70% 20%, rgba(232,200,114,.1), transparent 45%), rgba(7,18,15,.84); }
 .gear-preview > span { color: var(--gold); font-size: 7px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
 .gear-preview h2 { margin: 8px 0; font: 500 17px "Cinzel", serif; }

src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

vite.config.ts

@@ -9,6 +9,9 @@ export default defineConfig({
     port: 4173,
     strictPort: true,
     allowedHosts: ["iwanttoheal.phenomrom.com"],
+    proxy: {
+      "/api": "http://127.0.0.1:4174",
+    },
   },
   preview: {
     host: "0.0.0.0",
@@ -18,5 +21,6 @@ export default defineConfig({
   },
   test: {
     environment: "node",
+    include: ["src/**/*.test.ts"],
   },
 });