Android build v1.1.17

AGENTS.md

@@ -1,9 +1,51 @@
 # Project Notes
 
+## Target Hardware: AYN Thor
+
 - AYN Thor main display: 6-inch AMOLED, 1920 x 1080, 120Hz.
 - AYN Thor secondary display: 3.92-inch AMOLED, 1240 x 1080, 60Hz.
 - AYN Thor UI sizing must be designed against Android CSS/layout viewport, not physical framebuffer pixels.
 - Approximate Thor CSS viewports: main display 960 x 540, secondary display 620 x 540.
 - Test top-screen UI only against the main display viewport, and bottom-screen UI only against the secondary display viewport.
-- User rebuilds app; do not rebuild APK unless explicitly requested.
+
+## Input Requirements
+
+- Every game screen, menu, dialog, overlay, and gameplay interaction must be fully navigable by controller at all times.
+- Any time a screen, menu, dialog, overlay, or gameplay interaction is added or changed, verify controller navigation still works for that surface before considering the work complete.
+- Controller navigation must not depend on touch, mouse, keyboard, or hidden developer-only shortcuts.
+- Focus state must always be visible and predictable when controller navigation is active.
+- Avoid interaction patterns that trap focus, lose focus, or require precise pointer input.
+
+## Architecture Requirements
+
+- Keep systems modular and scoped by responsibility.
+- Prefer small reusable modules/components over large files with mixed concerns.
+- Keep shared game logic independent from platform-specific web or mobile wrappers whenever practical.
 - Apply game changes to both web version and mobile app version.
+
+## I Want To Heal 1 vs I Want To Heal 2
+
+- I Want To Heal 1 is the existing healer-first menu/combat game. Preserve its current progression, saves, inventories, collection logs, combat screens, and content unless the user explicitly asks to change IWT1.
+- I Want To Heal 2 is the new 2D boss-arena version. Keep IWT2 code, content, save data, inventories, character levels, and collection logs separate from IWT1 so the two modes are not confused.
+- The app should offer a game-select screen before the main menu: `I Want To Heal 1` launches the old version, and `I Want To Heal 2` launches the new 2D version.
+- Both games must remain usable from the same Android APK and from `iwanttoheal.phenomrom.com`.
+- Prefer an explicit folder split for IWT2, such as `src/modes/iwt2/`, with subfolders for screens, simulation, rendering, content, and save/repository code.
+- Keep IWT2 simulation state independent from rendering. Arena movement, AI, boss attacks, collisions, damage, stun/knockdown, progression, inventory, and collection logs should live in pure TypeScript modules where practical.
+- IWT2 rendering can use a 2D canvas/game runtime, but renderer objects must not become the source of truth for saveable gameplay state.
+- IWT2 needs continuous movement input: left analog stick on AYN Thor and WASD on keyboard. Do not rely only on existing menu-style navigation actions for arena movement.
+- IWT2 menus, dialogs, inventory, collection log, pause overlays, and game-select screen must still follow controller navigation requirements.
+- IWT2 boss mechanics and indicators must be modular. Add reusable hit-shape, damage/status, telegraph/indicator, hazard, and marker primitives under `src/modes/iwt2/sim/` or `src/modes/iwt2/render/` instead of hardcoding boss-specific rules in Phaser scenes. Boss AI may compose these primitives, but renderer code should draw sim-owned indicators generically.
+- First IWT2 boss conversion target: Bulldrome. Bulldrome should have normal melee tank damage, a charge across the arena that damages and knocks down/stuns hit players for 0.75 seconds, and every 3rd charge should be followed by an AoE ground slam around the boss that also damages and knocks down/stuns hit players for 0.75 seconds.
+- IWT2 starter party fantasy: player-controlled healer plus visible party members moving in the arena. Paladin tank holds aggro; ranger fires arrows; mage fires fireballs; rogue flanks; warrior fights in melee. Each class should have a distinct icon and color scheme.
+
+## Performance Requirements
+
+- Treat CPU, GPU, memory, battery, and startup cost as first-class constraints.
+- Avoid unnecessary per-frame allocations, polling, timers, layout work, and re-renders.
+- Keep assets sized appropriately for Thor displays; do not ship oversized textures, images, audio, or data blobs without need.
+- Prefer event-driven updates and cached calculations for UI and game systems.
+- Profile or measure when changing hot paths, rendering, animation, input handling, asset loading, or persistent state.
+
+## Build Requirements
+
+- User rebuilds app; do not rebuild APK unless explicitly requested.

android/app/build.gradle

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

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

@@ -0,0 +1,51 @@
+package com.warren.iwanttoheal;
+
+import android.view.Display;
+import android.view.Window;
+import android.view.WindowManager;
+
+final class AndroidDisplayPerformance {
+
+    private static final float TARGET_REFRESH_RATE = 60.0f;
+
+    private AndroidDisplayPerformance() {}
+
+    static void preferBatteryRefreshRate(Window window, Display display) {
+        if (window == null || display == null) return;
+        Display.Mode currentMode = display.getMode();
+        Display.Mode selectedMode = closestBatteryMode(display, currentMode);
+        if (selectedMode == null) return;
+
+        WindowManager.LayoutParams attributes = window.getAttributes();
+        if (attributes.preferredDisplayModeId == selectedMode.getModeId()) return;
+        attributes.preferredDisplayModeId = selectedMode.getModeId();
+        window.setAttributes(attributes);
+    }
+
+    private static Display.Mode closestBatteryMode(Display display, Display.Mode currentMode) {
+        Display.Mode selectedMode = null;
+        float selectedScore = Float.MAX_VALUE;
+
+        for (Display.Mode mode : display.getSupportedModes()) {
+            if (
+                currentMode != null
+                    && (
+                        mode.getPhysicalWidth() != currentMode.getPhysicalWidth()
+                            || mode.getPhysicalHeight() != currentMode.getPhysicalHeight()
+                    )
+            ) {
+                continue;
+            }
+
+            float refreshRate = mode.getRefreshRate();
+            float score = Math.abs(refreshRate - TARGET_REFRESH_RATE);
+            if (refreshRate > TARGET_REFRESH_RATE + 0.5f) score += 1000.0f;
+            if (score < selectedScore) {
+                selectedMode = mode;
+                selectedScore = score;
+            }
+        }
+
+        return selectedMode;
+    }
+}

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

@@ -1,25 +1,45 @@
 package com.warren.iwanttoheal;
 
 import android.content.Intent;
+import android.content.SharedPreferences;
+import android.content.pm.PackageInfo;
+import android.content.pm.PackageManager;
+import android.os.Build;
 import android.os.Bundle;
 import android.os.SystemClock;
+import android.view.InputDevice;
 import android.view.KeyEvent;
+import android.view.MotionEvent;
 import android.view.View;
 import com.getcapacitor.BridgeActivity;
 import java.io.File;
+import java.util.HashMap;
+import java.util.HashSet;
+import java.util.Map;
+import java.util.Set;
 
 public abstract class ControllerBridgeActivity extends BridgeActivity {
 
     public static final String EXTRA_INITIAL_URL = "com.warren.iwanttoheal.INITIAL_URL";
-    private static final long DPAD_THROTTLE_MS = 220;
-    private long lastDpadDispatchAt = 0;
+    private static final String PREFS_NAME = "com.warren.iwanttoheal.performance";
+    private static final String CACHE_CLEARED_VERSION_KEY = "webview_cache_cleared_version";
+    private static final float AXIS_DEAD_ZONE = 0.45f;
+    private static final long DPAD_THROTTLE_MS = 55;
+    private final long[] lastDpadDispatchAt = new long[16];
+    private final Set<String> activeMotionTokens = new HashSet<>();
+    private final Map<String, Long> lastMotionDispatchAt = new HashMap<>();
 
     @Override
     public void onCreate(Bundle savedInstanceState) {
-        clearWebViewServiceWorkers();
+        boolean shouldClearWebViewCache = shouldClearWebViewCacheForCurrentVersion();
+        if (shouldClearWebViewCache) clearWebViewServiceWorkers();
         super.onCreate(savedInstanceState);
+        AndroidDisplayPerformance.preferBatteryRefreshRate(getWindow(), getWindowManager().getDefaultDisplay());
         if (bridge != null) {
-            bridge.getWebView().clearCache(true);
+            if (shouldClearWebViewCache) {
+                bridge.getWebView().clearCache(true);
+                markWebViewCacheClearedForCurrentVersion();
+            }
         }
         loadIntentUrl();
     }
@@ -34,7 +54,25 @@ public abstract class ControllerBridgeActivity extends BridgeActivity {
     @Override
     public void onWindowFocusChanged(boolean hasFocus) {
         super.onWindowFocusChanged(hasFocus);
-        if (hasFocus) enableImmersiveMode();
+        if (hasFocus) {
+            enableImmersiveMode();
+            AndroidDisplayPerformance.preferBatteryRefreshRate(
+                getWindow(),
+                getWindowManager().getDefaultDisplay()
+            );
+        }
+    }
+
+    @Override
+    public boolean dispatchTouchEvent(MotionEvent event) {
+        if (
+            event.getActionMasked() == MotionEvent.ACTION_DOWN
+                && bridge != null
+                && bridge.getWebView() != null
+        ) {
+            bridge.getWebView().requestFocus();
+        }
+        return super.dispatchTouchEvent(event);
     }
 
     private void loadIntentUrl() {
@@ -61,6 +99,34 @@ public abstract class ControllerBridgeActivity extends BridgeActivity {
         deleteIfExists(new File(webViewData, "Service Worker"));
     }
 
+    private boolean shouldClearWebViewCacheForCurrentVersion() {
+        return performancePreferences().getLong(CACHE_CLEARED_VERSION_KEY, -1L)
+            != currentVersionCode();
+    }
+
+    private void markWebViewCacheClearedForCurrentVersion() {
+        performancePreferences()
+            .edit()
+            .putLong(CACHE_CLEARED_VERSION_KEY, currentVersionCode())
+            .apply();
+    }
+
+    private SharedPreferences performancePreferences() {
+        return getSharedPreferences(PREFS_NAME, MODE_PRIVATE);
+    }
+
+    private long currentVersionCode() {
+        try {
+            PackageInfo packageInfo = getPackageManager().getPackageInfo(getPackageName(), 0);
+            if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.P) {
+                return packageInfo.getLongVersionCode();
+            }
+            return packageInfo.versionCode;
+        } catch (PackageManager.NameNotFoundException exception) {
+            return -1L;
+        }
+    }
+
     private void deleteIfExists(File file) {
         if (!file.exists()) return;
         if (file.isDirectory()) {
@@ -81,21 +147,104 @@ public abstract class ControllerBridgeActivity extends BridgeActivity {
 
         if (event.getAction() == KeyEvent.ACTION_DOWN) {
             boolean repeat = event.getRepeatCount() > 0;
-            if (isDpadToken(token) && shouldThrottleDpad()) return true;
-            String script =
-                "window.dispatchEvent(new CustomEvent('ashen-halls-native-controller',"
-                    + "{detail:{token:'" + token + "',repeat:" + repeat + "}}));";
-            bridge.getWebView().post(
-                () -> bridge.getWebView().evaluateJavascript(script, null)
-            );
+            if (isDpadToken(token) && shouldThrottleDpad(token)) return true;
+            dispatchNativeControllerToken(token, repeat);
         }
         return true;
     }
 
-    private boolean shouldThrottleDpad() {
+    @Override
+    public boolean dispatchGenericMotionEvent(MotionEvent event) {
+        if (
+            bridge == null
+                || event.getActionMasked() != MotionEvent.ACTION_MOVE
+                || !isControllerMotionEvent(event)
+        ) {
+            return super.dispatchGenericMotionEvent(event);
+        }
+
+        Set<String> currentTokens = new HashSet<>();
+        addAxisTokens(
+            currentTokens,
+            event.getAxisValue(MotionEvent.AXIS_HAT_X),
+            "Button14",
+            "Button15"
+        );
+        addAxisTokens(
+            currentTokens,
+            event.getAxisValue(MotionEvent.AXIS_HAT_Y),
+            "Button12",
+            "Button13"
+        );
+        addAxisTokens(
+            currentTokens,
+            event.getAxisValue(MotionEvent.AXIS_X),
+            "Axis0-",
+            "Axis0+"
+        );
+        addAxisTokens(
+            currentTokens,
+            event.getAxisValue(MotionEvent.AXIS_Y),
+            "Axis1-",
+            "Axis1+"
+        );
+
+        boolean hadMotionTokens = !activeMotionTokens.isEmpty();
         long now = SystemClock.uptimeMillis();
-        if (now - lastDpadDispatchAt < DPAD_THROTTLE_MS) return true;
-        lastDpadDispatchAt = now;
+        for (String token : currentTokens) {
+            boolean repeat = activeMotionTokens.contains(token);
+            long lastDispatchAt = lastMotionDispatchAt.containsKey(token)
+                ? lastMotionDispatchAt.get(token)
+                : 0L;
+            if (!repeat || now - lastDispatchAt >= DPAD_THROTTLE_MS) {
+                dispatchNativeControllerToken(token, repeat);
+                lastMotionDispatchAt.put(token, now);
+            }
+        }
+        activeMotionTokens.clear();
+        activeMotionTokens.addAll(currentTokens);
+
+        if (currentTokens.isEmpty() && !hadMotionTokens) {
+            return super.dispatchGenericMotionEvent(event);
+        }
+        return true;
+    }
+
+    private boolean isControllerMotionEvent(MotionEvent event) {
+        int source = event.getSource();
+        return (source & InputDevice.SOURCE_JOYSTICK) == InputDevice.SOURCE_JOYSTICK
+            || (source & InputDevice.SOURCE_DPAD) == InputDevice.SOURCE_DPAD
+            || (source & InputDevice.SOURCE_GAMEPAD) == InputDevice.SOURCE_GAMEPAD;
+    }
+
+    private void addAxisTokens(
+        Set<String> tokens,
+        float value,
+        String negativeToken,
+        String positiveToken
+    ) {
+        if (value <= -AXIS_DEAD_ZONE) tokens.add(negativeToken);
+        if (value >= AXIS_DEAD_ZONE) tokens.add(positiveToken);
+    }
+
+    private void dispatchNativeControllerToken(String token, boolean repeat) {
+        if (bridge == null || bridge.getWebView() == null) return;
+        String script =
+            "window.dispatchEvent(new CustomEvent('ashen-halls-native-controller',"
+                + "{detail:{token:'" + token + "',repeat:" + repeat + "}}));";
+        bridge.getWebView().post(
+            () -> {
+                bridge.getWebView().requestFocus();
+                bridge.getWebView().evaluateJavascript(script, null);
+            }
+        );
+    }
+
+    private boolean shouldThrottleDpad(String token) {
+        int buttonIndex = Integer.parseInt(token.substring("Button".length()));
+        long now = SystemClock.uptimeMillis();
+        if (now - lastDpadDispatchAt[buttonIndex] < DPAD_THROTTLE_MS) return true;
+        lastDpadDispatchAt[buttonIndex] = now;
         return false;
     }
 
@@ -109,10 +258,13 @@ public abstract class ControllerBridgeActivity extends BridgeActivity {
     private String controllerToken(int keyCode) {
         switch (keyCode) {
             case KeyEvent.KEYCODE_BUTTON_A:
+            case KeyEvent.KEYCODE_DPAD_CENTER:
             case KeyEvent.KEYCODE_ENTER:
+            case KeyEvent.KEYCODE_NUMPAD_ENTER:
                 return "Button0";
             case KeyEvent.KEYCODE_BUTTON_B:
             case KeyEvent.KEYCODE_BACK:
+            case KeyEvent.KEYCODE_ESCAPE:
                 return "Button1";
             case KeyEvent.KEYCODE_BUTTON_X:
                 return "Button2";

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

@@ -259,9 +259,11 @@ public class DualScreenPlugin extends Plugin {
     private final class TopDisplayPresentation extends Presentation {
 
         private final String initialUrl;
+        private final Display display;
 
         TopDisplayPresentation(Context context, Display display, String initialUrl) {
             super(context, display);
+            this.display = display;
             this.initialUrl = initialUrl;
         }
 
@@ -277,6 +279,7 @@ public class DualScreenPlugin extends Plugin {
                     | View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION
                     | View.SYSTEM_UI_FLAG_LAYOUT_STABLE
             );
+            AndroidDisplayPerformance.preferBatteryRefreshRate(getWindow(), display);
 
             FrameLayout container = new FrameLayout(getContext());
             container.setBackgroundColor(Color.BLACK);

db/schema.sql

@@ -169,7 +169,8 @@ CREATE TABLE IF NOT EXISTS accounts (
   completed_dungeon_parts INTEGER NOT NULL DEFAULT 0,
   completed_raid_phases INTEGER NOT NULL DEFAULT 0,
   created_ip TEXT NOT NULL,
-  created_at TEXT NOT NULL DEFAULT CURRENT_TIMESTAMP
+  created_at TEXT NOT NULL DEFAULT CURRENT_TIMESTAMP,
+  last_saved_at TEXT NOT NULL DEFAULT CURRENT_TIMESTAMP
 );
 
 CREATE TABLE IF NOT EXISTS account_ip_allowances (
@@ -254,6 +255,75 @@ CREATE TABLE IF NOT EXISTS character_inventory (
   PRIMARY KEY (character_id, item_id)
 );
 
+CREATE TABLE IF NOT EXISTS character_boss_stats (
+  character_id INTEGER NOT NULL REFERENCES characters(id) ON DELETE CASCADE,
+  encounter_id INTEGER NOT NULL REFERENCES encounters(id) ON DELETE CASCADE,
+  kills INTEGER NOT NULL DEFAULT 0 CHECK (kills >= 0),
+  pet_quantity INTEGER NOT NULL DEFAULT 0 CHECK (pet_quantity >= 0),
+  PRIMARY KEY (character_id, encounter_id)
+);
+
+CREATE TABLE IF NOT EXISTS character_pvp_stats (
+  character_id INTEGER PRIMARY KEY REFERENCES characters(id) ON DELETE CASCADE,
+  matches_played INTEGER NOT NULL DEFAULT 0 CHECK (matches_played >= 0),
+  matches_won INTEGER NOT NULL DEFAULT 0 CHECK (matches_won >= 0)
+);
+
+CREATE TABLE IF NOT EXISTS action_characters (
+  id INTEGER PRIMARY KEY,
+  account_id INTEGER REFERENCES accounts(id) ON DELETE CASCADE,
+  class_id INTEGER NOT NULL REFERENCES classes(id),
+  name TEXT NOT NULL,
+  level INTEGER NOT NULL DEFAULT 1,
+  experience INTEGER NOT NULL DEFAULT 0,
+  bulldrome_coins INTEGER NOT NULL DEFAULT 0,
+  bulldrome_normal_clears INTEGER NOT NULL DEFAULT 0,
+  bulldrome_hard_clears INTEGER NOT NULL DEFAULT 0,
+  created_at TEXT NOT NULL DEFAULT CURRENT_TIMESTAMP,
+  UNIQUE (account_id, class_id)
+);
+
+CREATE TABLE IF NOT EXISTS action_gear_items (
+  id INTEGER PRIMARY KEY,
+  slug TEXT NOT NULL,
+  name TEXT NOT NULL,
+  slot TEXT NOT NULL CHECK (slot IN ('weapon', 'helmet', 'chest', 'gloves', 'boots', 'pants', 'ring', 'necklace', 'trinket')),
+  item_level INTEGER NOT NULL CHECK (item_level BETWEEN 1 AND 5),
+  source TEXT NOT NULL DEFAULT 'bulldrome',
+  created_at TEXT NOT NULL DEFAULT CURRENT_TIMESTAMP
+);
+
+CREATE TABLE IF NOT EXISTS action_character_inventory (
+  id INTEGER PRIMARY KEY,
+  action_character_id INTEGER NOT NULL REFERENCES action_characters(id) ON DELETE CASCADE,
+  item_id INTEGER REFERENCES items(id),
+  action_gear_item_id INTEGER REFERENCES action_gear_items(id),
+  quantity INTEGER NOT NULL DEFAULT 1 CHECK (quantity > 0),
+  equipped INTEGER NOT NULL DEFAULT 0 CHECK (equipped IN (0, 1))
+);
+
+CREATE TABLE IF NOT EXISTS action_dungeon_runs (
+  id INTEGER PRIMARY KEY,
+  action_character_id INTEGER NOT NULL REFERENCES action_characters(id) ON DELETE CASCADE,
+  dungeon_id INTEGER NOT NULL REFERENCES dungeons(id),
+  difficulty TEXT NOT NULL CHECK (difficulty IN ('normal', 'hard')),
+  result TEXT NOT NULL CHECK (result IN ('clear', 'wipe')),
+  coins_awarded INTEGER NOT NULL DEFAULT 0,
+  duration_seconds INTEGER NOT NULL DEFAULT 0,
+  completed_at TEXT NOT NULL DEFAULT CURRENT_TIMESTAMP
+);
+
+CREATE TABLE IF NOT EXISTS action_encounter_loot_rolls (
+  id INTEGER PRIMARY KEY,
+  action_character_id INTEGER NOT NULL REFERENCES action_characters(id) ON DELETE CASCADE,
+  dungeon_run_id INTEGER REFERENCES action_dungeon_runs(id) ON DELETE CASCADE,
+  encounter_id INTEGER NOT NULL REFERENCES encounters(id),
+  item_id INTEGER NOT NULL REFERENCES items(id),
+  quantity INTEGER NOT NULL DEFAULT 1 CHECK (quantity > 0),
+  difficulty TEXT NOT NULL CHECK (difficulty IN ('normal', 'hard')),
+  created_at TEXT NOT NULL DEFAULT CURRENT_TIMESTAMP
+);
+
 CREATE TABLE IF NOT EXISTS encounter_loot_rolls (
   id INTEGER PRIMARY KEY,
   character_id INTEGER NOT NULL REFERENCES characters(id) ON DELETE CASCADE,

docs/ui-mockups/pvp-dungeon-pc-layout.svg

@@ -0,0 +1,59 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1440" height="900" viewBox="0 0 1440 900">
+  <defs>
+    <linearGradient id="bg" x1="0" x2="1" y1="0" y2="1"><stop offset="0" stop-color="#111827"/><stop offset="1" stop-color="#2f1f16"/></linearGradient>
+    <style>
+      text{font-family:Inter,Arial,sans-serif;fill:#f8f1df}.muted{fill:#c8bca6;font-size:20px}.tiny{fill:#d8cab1;font-size:16px}.title{font-size:30px;font-weight:800}.label{font-size:19px;font-weight:700}.panel{fill:#1b2433;stroke:#6f5535;stroke-width:2;rx:12}.tile{fill:#253244;stroke:#7d6743;stroke-width:2;rx:10}.selected{fill:#31483b;stroke:#d7aa45;stroke-width:4;rx:10}.bar-bg{fill:#2a3444;rx:8}.hp{fill:#5ed17a;rx:8}.danger{fill:#d96b55;rx:8}.mana{fill:#63a9ff;rx:8}.button{fill:#d7aa45;rx:10}.spell{fill:#273449;stroke:#8d7349;stroke-width:2;rx:10}
+    </style>
+  </defs>
+  <rect width="1440" height="900" fill="url(#bg)"/>
+  <text x="48" y="64" class="title">PC Dungeon PvP Roguelike</text>
+  <text x="48" y="96" class="muted">Dungeon party = 6 members per side. Upgrade timer auto-picks at 0s.</text>
+
+  <rect x="36" y="132" width="402" height="704" class="panel"/>
+  <text x="64" y="176" class="title">You</text><text x="64" y="204" class="muted">Mira - Priest</text>
+  <text x="64" y="252" class="label">Party Health</text>
+  <g transform="translate(64 278)">
+    <rect width="150" height="82" class="selected"/><text x="16" y="31" class="label">Tank</text><text x="106" y="31" class="tiny">82%</text><rect x="16" y="52" width="118" height="12" class="bar-bg"/><rect x="16" y="52" width="97" height="12" class="hp"/>
+    <rect x="170" width="150" height="82" class="tile"/><text x="186" y="31" class="label">Mira</text><text x="276" y="31" class="tiny">74%</text><rect x="186" y="52" width="118" height="12" class="bar-bg"/><rect x="186" y="52" width="87" height="12" class="hp"/>
+    <rect y="104" width="150" height="82" class="tile"/><text x="16" y="135" class="label">DPS</text><text x="106" y="135" class="tiny">55%</text><rect x="16" y="156" width="118" height="12" class="bar-bg"/><rect x="16" y="156" width="65" height="12" class="danger"/>
+    <rect x="170" y="104" width="150" height="82" class="tile"/><text x="186" y="135" class="label">DPS</text><text x="276" y="135" class="tiny">92%</text><rect x="186" y="156" width="118" height="12" class="bar-bg"/><rect x="186" y="156" width="109" height="12" class="hp"/>
+    <rect y="208" width="150" height="82" class="tile"/><text x="16" y="239" class="label">DPS</text><text x="106" y="239" class="tiny">66%</text><rect x="16" y="260" width="118" height="12" class="bar-bg"/><rect x="16" y="260" width="78" height="12" class="hp"/>
+    <rect x="170" y="208" width="150" height="82" class="tile"/><text x="186" y="239" class="label">DPS</text><text x="276" y="239" class="tiny">41%</text><rect x="186" y="260" width="118" height="12" class="bar-bg"/><rect x="186" y="260" width="48" height="12" class="danger"/>
+  </g>
+  <text x="64" y="626" class="tiny">Buffs: Wide Radiance x1</text><text x="64" y="654" class="tiny">Debuffs: Mana Squeeze x1</text>
+
+  <rect x="472" y="132" width="496" height="704" class="panel"/>
+  <text x="504" y="176" class="title">Stage 15 Boss</text><text x="504" y="204" class="muted">Bulldrome Guardian</text>
+  <text x="504" y="260" class="label">Your Clear</text><rect x="504" y="278" width="400" height="24" class="bar-bg"/><rect x="504" y="278" width="176" height="24" class="danger"/>
+  <text x="504" y="342" class="label">Astra Clear</text><rect x="504" y="360" width="400" height="24" class="bar-bg"/><rect x="504" y="360" width="246" height="24" class="danger"/>
+  <g transform="translate(520 436)">
+    <rect width="400" height="260" fill="#161f2c" stroke="#d7aa45" stroke-width="3" rx="14"/>
+    <text x="32" y="44" class="title">Choose Edge</text><text x="274" y="44" class="title">07.4s</text>
+    <text x="32" y="88" class="label">Self Buff</text><text x="210" y="88" class="label">Opponent Debuff</text>
+    <rect x="32" y="112" width="150" height="52" class="selected"/><text x="46" y="145" class="tiny">+1 Target</text>
+    <rect x="32" y="178" width="150" height="52" class="tile"/><text x="46" y="211" class="tiny">-25% Cost</text>
+    <rect x="210" y="112" width="150" height="52" class="tile"/><text x="224" y="145" class="tiny">Cost Up</text>
+    <rect x="210" y="178" width="150" height="52" class="selected"/><text x="224" y="211" class="tiny">Mana Squeeze</text>
+  </g>
+  <g transform="translate(520 728)">
+    <rect width="56" height="52" class="spell"/><text x="22" y="34" font-size="24" font-weight="800">+</text>
+    <rect x="68" width="56" height="52" class="spell"/><text x="88" y="34" font-size="24" font-weight="800">R</text>
+    <rect x="136" width="56" height="52" class="spell"/><text x="156" y="34" font-size="24" font-weight="800">S</text>
+    <rect x="204" width="56" height="52" class="spell"/><text x="224" y="34" font-size="24" font-weight="800">G</text>
+    <rect x="272" width="56" height="52" class="spell"/><text x="292" y="34" font-size="24" font-weight="800">C</text>
+    <rect x="340" width="56" height="52" class="spell"/><text x="360" y="34" font-size="24" font-weight="800">B</text>
+  </g>
+
+  <rect x="1002" y="132" width="402" height="704" class="panel"/>
+  <text x="1030" y="176" class="title">Opponent</text><text x="1030" y="204" class="muted">Astra - Druid</text>
+  <text x="1030" y="252" class="label">Opponent Party</text>
+  <g transform="translate(1030 278)">
+    <rect width="150" height="82" class="tile"/><text x="16" y="31" class="label">Tank</text><text x="106" y="31" class="tiny">59%</text><rect x="16" y="52" width="118" height="12" class="bar-bg"/><rect x="16" y="52" width="70" height="12" class="danger"/>
+    <rect x="170" width="150" height="82" class="tile"/><text x="186" y="31" class="label">Astra</text><text x="276" y="31" class="tiny">88%</text><rect x="186" y="52" width="118" height="12" class="bar-bg"/><rect x="186" y="52" width="104" height="12" class="hp"/>
+    <rect y="104" width="150" height="82" class="tile"/><text x="16" y="135" class="label">DPS</text><text x="106" y="135" class="tiny">73%</text><rect x="16" y="156" width="118" height="12" class="bar-bg"/><rect x="16" y="156" width="86" height="12" class="hp"/>
+    <rect x="170" y="104" width="150" height="82" class="tile"/><text x="186" y="135" class="label">DPS</text><text x="276" y="135" class="tiny">42%</text><rect x="186" y="156" width="118" height="12" class="bar-bg"/><rect x="186" y="156" width="50" height="12" class="danger"/>
+    <rect y="208" width="150" height="82" class="tile"/><text x="16" y="239" class="label">DPS</text><text x="106" y="239" class="tiny">91%</text><rect x="16" y="260" width="118" height="12" class="bar-bg"/><rect x="16" y="260" width="107" height="12" class="hp"/>
+    <rect x="170" y="208" width="150" height="82" class="tile"/><text x="186" y="239" class="label">DPS</text><text x="276" y="239" class="tiny">66%</text><rect x="186" y="260" width="118" height="12" class="bar-bg"/><rect x="186" y="260" width="78" height="12" class="hp"/>
+  </g>
+  <text x="1030" y="626" class="tiny">Buffs: Dense Shields x1</text><text x="1030" y="654" class="tiny">Debuffs: Cost Up x1</text>
+</svg>

docs/ui-mockups/pvp-dungeon-thor-main.svg

@@ -0,0 +1,30 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="960" height="540" viewBox="0 0 960 540">
+  <defs>
+    <linearGradient id="bg" x1="0" x2="1" y1="0" y2="1"><stop offset="0" stop-color="#101827"/><stop offset="1" stop-color="#271a12"/></linearGradient>
+    <style>
+      text{font-family:Inter,Arial,sans-serif;fill:#f8f1df}.muted{fill:#c8bca6;font-size:15px}.title{font-size:24px;font-weight:800}.label{font-size:16px;font-weight:700}.panel{fill:#1b2433;stroke:#6f5535;stroke-width:2;rx:10}.tile{fill:#253244;stroke:#7d6743;stroke-width:2;rx:8}.selected{fill:#31483b;stroke:#d7aa45;stroke-width:4;rx:8}.bar-bg{fill:#2a3444;rx:7}.hp{fill:#5ed17a;rx:7}.danger{fill:#d96b55;rx:7}.mana{fill:#63a9ff;rx:7}.spell{fill:#273449;stroke:#8d7349;stroke-width:2;rx:10}.ready{fill:#31483b;stroke:#d7aa45;stroke-width:3;rx:10}
+    </style>
+  </defs>
+  <rect width="960" height="540" fill="url(#bg)"/>
+  <text x="24" y="38" class="title">Thor Main - Dungeon PvP</text>
+  <text x="24" y="62" class="muted">Dungeon party shows exactly 6 members. Opponent health stays on bottom screen.</text>
+  <rect x="24" y="86" width="912" height="350" class="panel"/>
+  <text x="52" y="124" class="title">Mira Party</text><text x="760" y="124" class="label">Stage 15 Boss</text>
+  <rect x="760" y="140" width="132" height="16" class="bar-bg"/><rect x="760" y="140" width="58" height="16" class="danger"/>
+  <g transform="translate(52 164)">
+    <rect width="132" height="96" class="selected"/><text x="16" y="28" class="label">Tank</text><text x="16" y="52" class="muted">82 / 100</text><rect x="16" y="68" width="100" height="12" class="bar-bg"/><rect x="16" y="68" width="82" height="12" class="hp"/>
+    <rect x="150" width="132" height="96" class="tile"/><text x="166" y="28" class="label">Mira</text><text x="166" y="52" class="muted">74 / 100</text><rect x="166" y="68" width="100" height="12" class="bar-bg"/><rect x="166" y="68" width="74" height="12" class="hp"/>
+    <rect x="300" width="132" height="96" class="tile"/><text x="316" y="28" class="label">DPS</text><text x="316" y="52" class="muted">55 / 100</text><rect x="316" y="68" width="100" height="12" class="bar-bg"/><rect x="316" y="68" width="55" height="12" class="danger"/>
+    <rect y="116" width="132" height="96" class="tile"/><text x="16" y="144" class="label">DPS</text><text x="16" y="168" class="muted">92 / 100</text><rect x="16" y="184" width="100" height="12" class="bar-bg"/><rect x="16" y="184" width="92" height="12" class="hp"/>
+    <rect x="150" y="116" width="132" height="96" class="tile"/><text x="166" y="144" class="label">DPS</text><text x="166" y="168" class="muted">66 / 100</text><rect x="166" y="184" width="100" height="12" class="bar-bg"/><rect x="166" y="184" width="66" height="12" class="hp"/>
+    <rect x="300" y="116" width="132" height="96" class="tile"/><text x="316" y="144" class="label">DPS</text><text x="316" y="168" class="muted">41 / 100</text><rect x="316" y="184" width="100" height="12" class="bar-bg"/><rect x="316" y="184" width="41" height="12" class="danger"/>
+  </g>
+  <rect x="24" y="452" width="912" height="68" class="panel"/>
+  <rect x="48" y="468" width="52" height="40" class="ready"/><text x="66" y="496" font-size="22" font-weight="800">+</text>
+  <rect x="112" y="468" width="52" height="40" class="spell"/><text x="129" y="496" font-size="22" font-weight="800">R</text><text x="143" y="483" font-size="12">3</text>
+  <rect x="176" y="468" width="52" height="40" class="spell"/><text x="194" y="496" font-size="22" font-weight="800">S</text><text x="207" y="483" font-size="12">8</text>
+  <rect x="240" y="468" width="52" height="40" class="ready"/><text x="258" y="496" font-size="22" font-weight="800">G</text>
+  <rect x="304" y="468" width="52" height="40" class="spell"/><text x="322" y="496" font-size="22" font-weight="800">C</text><text x="335" y="483" font-size="12">5</text>
+  <rect x="368" y="468" width="52" height="40" class="ready"/><text x="386" y="496" font-size="22" font-weight="800">B</text>
+  <text x="650" y="480" class="label">Mana 73 / 100</text><rect x="650" y="492" width="240" height="14" class="bar-bg"/><rect x="650" y="492" width="175" height="14" class="mana"/>
+</svg>

docs/ui-mockups/pvp-raid-pc-layout.svg

@@ -0,0 +1,62 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1440" height="900" viewBox="0 0 1440 900">
+  <defs>
+    <linearGradient id="bg" x1="0" x2="1" y1="0" y2="1"><stop offset="0" stop-color="#111827"/><stop offset="1" stop-color="#2f1f16"/></linearGradient>
+    <style>
+      text{font-family:Inter,Arial,sans-serif;fill:#f8f1df}.muted{fill:#c8bca6;font-size:20px}.tiny{fill:#d8cab1;font-size:14px}.title{font-size:30px;font-weight:800}.label{font-size:18px;font-weight:700}.panel{fill:#1b2433;stroke:#6f5535;stroke-width:2;rx:12}.tile{fill:#253244;stroke:#7d6743;stroke-width:2;rx:8}.bar-bg{fill:#2a3444;rx:7}.hp{fill:#5ed17a;rx:7}.danger{fill:#d96b55;rx:7}.spell{fill:#273449;stroke:#8d7349;stroke-width:2;rx:10}.selected{fill:#31483b;stroke:#d7aa45;stroke-width:3;rx:8}
+    </style>
+  </defs>
+  <rect width="1440" height="900" fill="url(#bg)"/>
+  <text x="48" y="64" class="title">PC Raid PvP Roguelike</text>
+  <text x="48" y="96" class="muted">Raid party = compact roster. Opponent panel mirrors raid health without crowding center.</text>
+  <rect x="36" y="132" width="430" height="704" class="panel"/>
+  <text x="64" y="176" class="title">You</text><text x="64" y="204" class="muted">Mira Raid Group</text>
+  <g transform="translate(64 238)">
+    <rect width="104" height="56" class="selected"/><text x="10" y="24" class="tiny">Tank 82%</text><rect x="10" y="36" width="84" height="8" class="bar-bg"/><rect x="10" y="36" width="69" height="8" class="hp"/>
+    <rect x="116" width="104" height="56" class="tile"/><text x="126" y="24" class="tiny">Mira 74%</text><rect x="126" y="36" width="84" height="8" class="bar-bg"/><rect x="126" y="36" width="62" height="8" class="hp"/>
+    <rect x="232" width="104" height="56" class="tile"/><text x="242" y="24" class="tiny">DPS 55%</text><rect x="242" y="36" width="84" height="8" class="bar-bg"/><rect x="242" y="36" width="46" height="8" class="danger"/>
+    <rect y="72" width="104" height="56" class="tile"/><text x="10" y="96" class="tiny">DPS 92%</text><rect x="10" y="108" width="84" height="8" class="bar-bg"/><rect x="10" y="108" width="77" height="8" class="hp"/>
+    <rect x="116" y="72" width="104" height="56" class="tile"/><text x="126" y="96" class="tiny">DPS 66%</text><rect x="126" y="108" width="84" height="8" class="bar-bg"/><rect x="126" y="108" width="55" height="8" class="hp"/>
+    <rect x="232" y="72" width="104" height="56" class="tile"/><text x="242" y="96" class="tiny">DPS 41%</text><rect x="242" y="108" width="84" height="8" class="bar-bg"/><rect x="242" y="108" width="34" height="8" class="danger"/>
+    <rect y="144" width="104" height="56" class="tile"/><text x="10" y="168" class="tiny">DPS 88%</text><rect x="10" y="180" width="84" height="8" class="bar-bg"/><rect x="10" y="180" width="74" height="8" class="hp"/>
+    <rect x="116" y="144" width="104" height="56" class="tile"/><text x="126" y="168" class="tiny">DPS 63%</text><rect x="126" y="180" width="84" height="8" class="bar-bg"/><rect x="126" y="180" width="53" height="8" class="hp"/>
+    <rect x="232" y="144" width="104" height="56" class="tile"/><text x="242" y="168" class="tiny">DPS 77%</text><rect x="242" y="180" width="84" height="8" class="bar-bg"/><rect x="242" y="180" width="65" height="8" class="hp"/>
+    <rect y="216" width="104" height="56" class="tile"/><text x="10" y="240" class="tiny">DPS 49%</text><rect x="10" y="252" width="84" height="8" class="bar-bg"/><rect x="10" y="252" width="41" height="8" class="danger"/>
+    <rect x="116" y="216" width="104" height="56" class="tile"/><text x="126" y="240" class="tiny">DPS 96%</text><rect x="126" y="252" width="84" height="8" class="bar-bg"/><rect x="126" y="252" width="81" height="8" class="hp"/>
+    <rect x="232" y="216" width="104" height="56" class="tile"/><text x="242" y="240" class="tiny">DPS 70%</text><rect x="242" y="252" width="84" height="8" class="bar-bg"/><rect x="242" y="252" width="59" height="8" class="hp"/>
+  </g>
+  <text x="64" y="590" class="tiny">Direct target group: 1 / 2</text><text x="64" y="620" class="tiny">Buffs: Wide Radiance x1</text>
+
+  <rect x="502" y="132" width="436" height="704" class="panel"/>
+  <text x="534" y="176" class="title">Raid Stage 20 Boss</text><text x="534" y="204" class="muted">Ashen Warden</text>
+  <text x="534" y="260" class="label">Your Clear</text><rect x="534" y="278" width="340" height="24" class="bar-bg"/><rect x="534" y="278" width="176" height="24" class="danger"/>
+  <text x="534" y="342" class="label">Astra Clear</text><rect x="534" y="360" width="340" height="24" class="bar-bg"/><rect x="534" y="360" width="218" height="24" class="danger"/>
+  <rect x="534" y="438" width="340" height="220" fill="#161f2c" stroke="#d7aa45" stroke-width="3" rx="14"/>
+  <text x="558" y="482" class="title">Choose Edge</text><text x="766" y="482" class="title">10.0s</text>
+  <rect x="558" y="520" width="132" height="48" class="selected"/><text x="572" y="551" class="tiny">Raid Heal +</text>
+  <rect x="708" y="520" width="132" height="48" class="tile"/><text x="722" y="551" class="tiny">Mana Squeeze</text>
+  <rect x="558" y="584" width="132" height="48" class="tile"/><text x="572" y="615" class="tiny">Shield Boost</text>
+  <rect x="708" y="584" width="132" height="48" class="selected"/><text x="722" y="615" class="tiny">Cooldown Up</text>
+  <g transform="translate(534 724)">
+    <rect width="48" height="48" class="spell"/><text x="18" y="32" font-size="22" font-weight="800">+</text>
+    <rect x="60" width="48" height="48" class="spell"/><text x="77" y="32" font-size="22" font-weight="800">R</text>
+    <rect x="120" width="48" height="48" class="spell"/><text x="137" y="32" font-size="22" font-weight="800">S</text>
+    <rect x="180" width="48" height="48" class="spell"/><text x="197" y="32" font-size="22" font-weight="800">G</text>
+    <rect x="240" width="48" height="48" class="spell"/><text x="257" y="32" font-size="22" font-weight="800">C</text>
+    <rect x="300" width="48" height="48" class="spell"/><text x="317" y="32" font-size="22" font-weight="800">B</text>
+  </g>
+
+  <rect x="974" y="132" width="430" height="704" class="panel"/>
+  <text x="1002" y="176" class="title">Opponent Raid</text><text x="1002" y="204" class="muted">Astra Group</text>
+  <g transform="translate(1002 238)">
+    <rect width="104" height="56" class="tile"/><text x="10" y="24" class="tiny">Tank 61%</text><rect x="10" y="36" width="84" height="8" class="bar-bg"/><rect x="10" y="36" width="51" height="8" class="danger"/>
+    <rect x="116" width="104" height="56" class="tile"/><text x="126" y="24" class="tiny">Astra 89%</text><rect x="126" y="36" width="84" height="8" class="bar-bg"/><rect x="126" y="36" width="75" height="8" class="hp"/>
+    <rect x="232" width="104" height="56" class="tile"/><text x="242" y="24" class="tiny">DPS 73%</text><rect x="242" y="36" width="84" height="8" class="bar-bg"/><rect x="242" y="36" width="61" height="8" class="hp"/>
+    <rect y="72" width="104" height="56" class="tile"/><text x="10" y="96" class="tiny">DPS 42%</text><rect x="10" y="108" width="84" height="8" class="bar-bg"/><rect x="10" y="108" width="35" height="8" class="danger"/>
+    <rect x="116" y="72" width="104" height="56" class="tile"/><text x="126" y="96" class="tiny">DPS 91%</text><rect x="126" y="108" width="84" height="8" class="bar-bg"/><rect x="126" y="108" width="76" height="8" class="hp"/>
+    <rect x="232" y="72" width="104" height="56" class="tile"/><text x="242" y="96" class="tiny">DPS 66%</text><rect x="242" y="108" width="84" height="8" class="bar-bg"/><rect x="242" y="108" width="55" height="8" class="hp"/>
+    <rect y="144" width="104" height="56" class="tile"/><text x="10" y="168" class="tiny">DPS 79%</text><rect x="10" y="180" width="84" height="8" class="bar-bg"/><rect x="10" y="180" width="66" height="8" class="hp"/>
+    <rect x="116" y="144" width="104" height="56" class="tile"/><text x="126" y="168" class="tiny">DPS 58%</text><rect x="126" y="180" width="84" height="8" class="bar-bg"/><rect x="126" y="180" width="49" height="8" class="danger"/>
+    <rect x="232" y="144" width="104" height="56" class="tile"/><text x="242" y="168" class="tiny">DPS 84%</text><rect x="242" y="180" width="84" height="8" class="bar-bg"/><rect x="242" y="180" width="71" height="8" class="hp"/>
+  </g>
+  <text x="1002" y="590" class="tiny">Opponent buffs/debuffs visible here</text><text x="1002" y="620" class="tiny">Raid bottom screen can scroll second group if needed</text>
+</svg>

docs/ui-mockups/pvp-raid-thor-main.svg

@@ -0,0 +1,36 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="960" height="540" viewBox="0 0 960 540">
+  <defs>
+    <linearGradient id="bg" x1="0" x2="1" y1="0" y2="1"><stop offset="0" stop-color="#101827"/><stop offset="1" stop-color="#271a12"/></linearGradient>
+    <style>
+      text{font-family:Inter,Arial,sans-serif;fill:#f8f1df}.muted{fill:#c8bca6;font-size:15px}.title{font-size:24px;font-weight:800}.label{font-size:15px;font-weight:700}.panel{fill:#1b2433;stroke:#6f5535;stroke-width:2;rx:10}.tile{fill:#253244;stroke:#7d6743;stroke-width:2;rx:8}.selected{fill:#31483b;stroke:#d7aa45;stroke-width:4;rx:8}.bar-bg{fill:#2a3444;rx:7}.hp{fill:#5ed17a;rx:7}.danger{fill:#d96b55;rx:7}.mana{fill:#63a9ff;rx:7}.spell{fill:#273449;stroke:#8d7349;stroke-width:2;rx:10}.ready{fill:#31483b;stroke:#d7aa45;stroke-width:3;rx:10}
+    </style>
+  </defs>
+  <rect width="960" height="540" fill="url(#bg)"/>
+  <text x="24" y="38" class="title">Thor Main - Raid PvP</text>
+  <text x="24" y="62" class="muted">Raid party uses compact tiles plus target group toggle. Bottom screen mirrors opponent raid.</text>
+  <rect x="24" y="86" width="912" height="350" class="panel"/>
+  <text x="52" y="122" class="title">Mira Raid</text><text x="214" y="122" class="muted">Target Group 1 / 2</text>
+  <text x="760" y="122" class="label">Raid Boss</text><rect x="760" y="138" width="132" height="16" class="bar-bg"/><rect x="760" y="138" width="72" height="16" class="danger"/>
+  <g transform="translate(52 156)">
+    <rect width="104" height="72" class="selected"/><text x="12" y="28" class="label">Tank</text><text x="62" y="28" class="muted">82%</text><rect x="12" y="46" width="80" height="10" class="bar-bg"/><rect x="12" y="46" width="66" height="10" class="hp"/>
+    <rect x="118" width="104" height="72" class="tile"/><text x="130" y="28" class="label">Mira</text><text x="180" y="28" class="muted">74%</text><rect x="130" y="46" width="80" height="10" class="bar-bg"/><rect x="130" y="46" width="59" height="10" class="hp"/>
+    <rect x="236" width="104" height="72" class="tile"/><text x="248" y="28" class="label">DPS</text><text x="298" y="28" class="muted">55%</text><rect x="248" y="46" width="80" height="10" class="bar-bg"/><rect x="248" y="46" width="44" height="10" class="danger"/>
+    <rect x="354" width="104" height="72" class="tile"/><text x="366" y="28" class="label">DPS</text><text x="416" y="28" class="muted">92%</text><rect x="366" y="46" width="80" height="10" class="bar-bg"/><rect x="366" y="46" width="74" height="10" class="hp"/>
+    <rect x="472" width="104" height="72" class="tile"/><text x="484" y="28" class="label">DPS</text><text x="534" y="28" class="muted">66%</text><rect x="484" y="46" width="80" height="10" class="bar-bg"/><rect x="484" y="46" width="53" height="10" class="hp"/>
+    <rect x="590" width="104" height="72" class="tile"/><text x="602" y="28" class="label">DPS</text><text x="652" y="28" class="muted">41%</text><rect x="602" y="46" width="80" height="10" class="bar-bg"/><rect x="602" y="46" width="33" height="10" class="danger"/>
+    <rect y="92" width="104" height="72" class="tile"/><text x="12" y="120" class="label">DPS</text><text x="62" y="120" class="muted">88%</text><rect x="12" y="138" width="80" height="10" class="bar-bg"/><rect x="12" y="138" width="70" height="10" class="hp"/>
+    <rect x="118" y="92" width="104" height="72" class="tile"/><text x="130" y="120" class="label">DPS</text><text x="180" y="120" class="muted">63%</text><rect x="130" y="138" width="80" height="10" class="bar-bg"/><rect x="130" y="138" width="50" height="10" class="hp"/>
+    <rect x="236" y="92" width="104" height="72" class="tile"/><text x="248" y="120" class="label">DPS</text><text x="298" y="120" class="muted">77%</text><rect x="248" y="138" width="80" height="10" class="bar-bg"/><rect x="248" y="138" width="62" height="10" class="hp"/>
+    <rect x="354" y="92" width="104" height="72" class="tile"/><text x="366" y="120" class="label">DPS</text><text x="416" y="120" class="muted">49%</text><rect x="366" y="138" width="80" height="10" class="bar-bg"/><rect x="366" y="138" width="39" height="10" class="danger"/>
+    <rect x="472" y="92" width="104" height="72" class="tile"/><text x="484" y="120" class="label">DPS</text><text x="534" y="120" class="muted">96%</text><rect x="484" y="138" width="80" height="10" class="bar-bg"/><rect x="484" y="138" width="77" height="10" class="hp"/>
+    <rect x="590" y="92" width="104" height="72" class="tile"/><text x="602" y="120" class="label">DPS</text><text x="652" y="120" class="muted">70%</text><rect x="602" y="138" width="80" height="10" class="bar-bg"/><rect x="602" y="138" width="56" height="10" class="hp"/>
+  </g>
+  <rect x="24" y="452" width="912" height="68" class="panel"/>
+  <rect x="48" y="468" width="52" height="40" class="ready"/><text x="66" y="496" font-size="22" font-weight="800">+</text>
+  <rect x="112" y="468" width="52" height="40" class="spell"/><text x="129" y="496" font-size="22" font-weight="800">R</text><text x="143" y="483" font-size="12">3</text>
+  <rect x="176" y="468" width="52" height="40" class="spell"/><text x="194" y="496" font-size="22" font-weight="800">S</text><text x="207" y="483" font-size="12">8</text>
+  <rect x="240" y="468" width="52" height="40" class="ready"/><text x="258" y="496" font-size="22" font-weight="800">G</text>
+  <rect x="304" y="468" width="52" height="40" class="spell"/><text x="322" y="496" font-size="22" font-weight="800">C</text><text x="335" y="483" font-size="12">5</text>
+  <rect x="368" y="468" width="52" height="40" class="ready"/><text x="386" y="496" font-size="22" font-weight="800">B</text>
+  <text x="650" y="480" class="label">Mana 73 / 100</text><rect x="650" y="492" width="240" height="14" class="bar-bg"/><rect x="650" y="492" width="175" height="14" class="mana"/>
+</svg>

docs/ui-mockups/pvp-thor-bottom.svg

@@ -0,0 +1,41 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="620" height="540" viewBox="0 0 620 540">
+  <defs>
+    <linearGradient id="bg" x1="0" x2="1" y1="0" y2="1">
+      <stop offset="0" stop-color="#101827"/>
+      <stop offset="1" stop-color="#271a12"/>
+    </linearGradient>
+    <style>
+      text { font-family: Inter, Arial, sans-serif; fill: #f8f1df; }
+      .muted { fill: #c8bca6; font-size: 14px; }
+      .title { font-size: 22px; font-weight: 800; }
+      .label { font-size: 15px; font-weight: 700; }
+      .panel { fill: #1b2433; stroke: #6f5535; stroke-width: 2; rx: 10; }
+      .tile { fill: #253244; stroke: #7d6743; stroke-width: 2; rx: 8; }
+      .bar-bg { fill: #2a3444; rx: 7; }
+      .hp { fill: #5ed17a; rx: 7; }
+      .danger { fill: #d96b55; rx: 7; }
+      .mana { fill: #63a9ff; rx: 7; }
+    </style>
+  </defs>
+  <rect width="620" height="540" fill="url(#bg)"/>
+  <text x="20" y="36" class="title">Thor Bottom Screen - Opponent View</text>
+  <text x="20" y="60" class="muted">Secondary display shows real opponent health/progress.</text>
+  <rect x="20" y="82" width="580" height="424" class="panel"/>
+  <text x="44" y="122" class="title">Astra</text>
+  <text x="44" y="146" class="muted">Druid - live opponent</text>
+  <text x="376" y="122" class="label">Opponent Clear</text>
+  <rect x="376" y="136" width="172" height="16" class="bar-bg"/><rect x="376" y="136" width="106" height="16" class="danger"/>
+  <text x="44" y="192" class="label">Opponent Party Health</text>
+  <g transform="translate(44 216)">
+    <rect width="158" height="72" class="tile"/><text x="14" y="26" class="label">Tank</text><text x="104" y="26" class="muted">59%</text><rect x="14" y="44" width="128" height="12" class="bar-bg"/><rect x="14" y="44" width="76" height="12" class="danger"/>
+    <rect x="176" width="158" height="72" class="tile"/><text x="190" y="26" class="label">Astra</text><text x="280" y="26" class="muted">88%</text><rect x="190" y="44" width="128" height="12" class="bar-bg"/><rect x="190" y="44" width="113" height="12" class="hp"/>
+    <rect x="352" width="158" height="72" class="tile"/><text x="366" y="26" class="label">DPS</text><text x="456" y="26" class="muted">73%</text><rect x="366" y="44" width="128" height="12" class="bar-bg"/><rect x="366" y="44" width="93" height="12" class="hp"/>
+    <rect y="92" width="158" height="72" class="tile"/><text x="14" y="118" class="label">DPS</text><text x="104" y="118" class="muted">42%</text><rect x="14" y="136" width="128" height="12" class="bar-bg"/><rect x="14" y="136" width="54" height="12" class="danger"/>
+    <rect x="176" y="92" width="158" height="72" class="tile"/><text x="190" y="118" class="label">DPS</text><text x="280" y="118" class="muted">91%</text><rect x="190" y="136" width="128" height="12" class="bar-bg"/><rect x="190" y="136" width="116" height="12" class="hp"/>
+    <rect x="352" y="92" width="158" height="72" class="tile"/><text x="366" y="118" class="label">DPS</text><text x="456" y="118" class="muted">66%</text><rect x="366" y="136" width="128" height="12" class="bar-bg"/><rect x="366" y="136" width="84" height="12" class="hp"/>
+  </g>
+  <text x="44" y="420" class="label">Mana 86 / 100</text>
+  <rect x="154" y="408" width="214" height="16" class="bar-bg"/><rect x="154" y="408" width="184" height="16" class="mana"/>
+  <text x="44" y="462" class="muted">Buffs: Dense Shields x1</text>
+  <text x="318" y="462" class="muted">Debuffs: Cost Up x1</text>
+</svg>

package-lock.json

@@ -10,12 +10,14 @@
       "dependencies": {
         "@capacitor/android": "^8.4.0",
         "@capacitor/core": "^8.4.0",
+        "phaser": "^4.2.0",
         "react": "^19.2.6",
         "react-dom": "^19.2.6"
       },
       "devDependencies": {
         "@capacitor/cli": "^8.4.0",
         "@eslint/js": "^10.0.1",
+        "@playwright/test": "^1.61.1",
         "@types/node": "^24.12.3",
         "@types/react": "^19.2.14",
         "@types/react-dom": "^19.2.3",
@@ -801,6 +803,22 @@
         "url": "https://github.com/sponsors/Boshen"
       }
     },
+    "node_modules/@playwright/test": {
+      "version": "1.61.1",
+      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.61.1.tgz",
+      "integrity": "sha512-8nKv6+0RJSL9FE4jYOEGXnPeM/Hg12qZpmqzZjRh3qM0Y7c3z1mrOTfFLids72RDQYVh9WpLEfR5WdpNX4fkig==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "playwright": "1.61.1"
+      },
+      "bin": {
+        "playwright": "cli.js"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/@rolldown/binding-android-arm64": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/@rolldown/binding-android-arm64/-/binding-android-arm64-1.0.3.tgz",
@@ -2013,6 +2031,12 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/eventemitter3": {
+      "version": "5.0.4",
+      "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-5.0.4.tgz",
+      "integrity": "sha512-mlsTRyGaPBjPedk6Bvw+aqbsXDtoAyAzm5MO7JgU+yVRyMQ5O8bD4Kcci7BS85f93veegeCPkL8R4GLClnjLFw==",
+      "license": "MIT"
+    },
     "node_modules/fast-deep-equal": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
@@ -2952,6 +2976,15 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/phaser": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/phaser/-/phaser-4.2.0.tgz",
+      "integrity": "sha512-9nSQZs4CJ9+V96i2mRC3BBStBcsQWGJJBRpdFYSbpL40/i/QM+wLofaCYMsxNyDk8WJOlHGZUh3uVRKa7lj6yg==",
+      "license": "MIT",
+      "dependencies": {
+        "eventemitter3": "^5.0.4"
+      }
+    },
     "node_modules/picocolors": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
@@ -2972,6 +3005,53 @@
         "url": "https://github.com/sponsors/jonschlinkert"
       }
     },
+    "node_modules/playwright": {
+      "version": "1.61.1",
+      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.61.1.tgz",
+      "integrity": "sha512-DWnY5o3YbLWK4GovuAVwpqL+1VwGNdUGrRr++8j8PtQQzvAVZUIMjKQ90fY689sEJZJBbZVw1rXaOKSTitkzPQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "playwright-core": "1.61.1"
+      },
+      "bin": {
+        "playwright": "cli.js"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "optionalDependencies": {
+        "fsevents": "2.3.2"
+      }
+    },
+    "node_modules/playwright-core": {
+      "version": "1.61.1",
+      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.61.1.tgz",
+      "integrity": "sha512-h7Qlt6m4REp25qvIdvbDtVmD4LqVXfpRxhORv9L0jzETM05p4fuPJ3dKyuSXQxDSbXnmS79HAgi9589lGSpLkg==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "bin": {
+        "playwright-core": "cli.js"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/playwright/node_modules/fsevents": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
+      "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
     "node_modules/plist": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/plist/-/plist-3.1.1.tgz",

package.json

@@ -12,6 +12,8 @@
     "android:open": "cap open android",
     "android:apk": "npm run android:sync && cd android && ./gradlew clean assembleDebug",
     "android:apk:truenas": "VITE_API_BASE_URL=https://iwanttoheal.phenomrom.com npm run android:apk",
+    "release:gui": "python3 scripts/release_game.py",
+    "release:cli": "python3 scripts/release_game_cli.py",
     "accounts:ip": "node scripts/manage-ip-allowance.mjs",
     "db:backup": "node scripts/backup-db.mjs",
     "db:init": "node scripts/init-db.mjs",
@@ -26,12 +28,14 @@
   "dependencies": {
     "@capacitor/android": "^8.4.0",
     "@capacitor/core": "^8.4.0",
+    "phaser": "^4.2.0",
     "react": "^19.2.6",
     "react-dom": "^19.2.6"
   },
   "devDependencies": {
     "@capacitor/cli": "^8.4.0",
     "@eslint/js": "^10.0.1",
+    "@playwright/test": "^1.61.1",
     "@types/node": "^24.12.3",
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",

scripts/init-db.mjs

@@ -241,6 +241,12 @@ addColumnIfMissing('encounters', 'image_url', "TEXT NOT NULL DEFAULT '/boss-plac
 
 addColumnIfMissing('accounts', 'completed_dungeon_parts', 'INTEGER NOT NULL DEFAULT 0')
 addColumnIfMissing('accounts', 'completed_raid_phases', 'INTEGER NOT NULL DEFAULT 0')
+addColumnIfMissing('accounts', 'last_saved_at', 'TEXT')
+database.prepare(`
+  UPDATE accounts
+  SET last_saved_at = COALESCE(NULLIF(last_saved_at, ''), created_at, CURRENT_TIMESTAMP)
+  WHERE last_saved_at IS NULL OR last_saved_at = ''
+`).run()
 addColumnIfMissing('sessions', 'active_character_id', 'INTEGER REFERENCES characters(id)')
 
 migrateCharacterAccountConstraint()

scripts/release_game.py

@@ -0,0 +1,502 @@
+#!/usr/bin/env python3
+from __future__ import annotations
+
+import json
+import os
+import queue
+import re
+import subprocess
+import sys
+import threading
+import time
+import urllib.error
+import urllib.parse
+import urllib.request
+from dataclasses import dataclass
+from getpass import getpass
+from pathlib import Path
+from typing import Callable
+
+try:
+    import tkinter as tk
+    from tkinter import messagebox, ttk
+except ImportError:
+    tk = None
+    messagebox = None
+    ttk = None
+
+
+REPO_ROOT = Path(__file__).resolve().parents[1]
+GRADLE_FILE = REPO_ROOT / "android" / "app" / "build.gradle"
+DEFAULT_JAVA_HOME = "/Applications/Android Studio.app/Contents/jbr/Contents/Home"
+DEFAULT_API_BASE_URL = "https://iwanttoheal.phenomrom.com"
+DEFAULT_GITEA_URL = "https://git.whoagland.com"
+DEFAULT_GITEA_OWNER = "phenom"
+DEFAULT_GITEA_REPO = "i-want-to-heal"
+DEFAULT_BRANCH = "main"
+DEFAULT_TRUENAS_PATH = "/mnt/usbssds/apps/iwanttoheal/app"
+DEFAULT_DB_PATH = "/mnt/usbssds/apps/iwanttoheal/data/game.db"
+
+
+class ReleaseError(RuntimeError):
+    pass
+
+
+@dataclass(frozen=True)
+class ReleaseConfig:
+    version: str
+    token: str
+    api_base_url: str
+    java_home: str
+    gitea_url: str
+    gitea_owner: str
+    gitea_repo: str
+    branch: str
+    truenas_path: str
+    truenas_db_path: str
+    restart_command: str
+    run_build: bool
+    run_commit_push: bool
+    run_release: bool
+    run_truenas_pull: bool
+    run_truenas_backup: bool
+    run_restart: bool
+
+
+def read_current_version() -> str:
+    text = GRADLE_FILE.read_text()
+    match = re.search(r'versionName\s+"([^"]+)"', text)
+    return match.group(1) if match else ""
+
+
+def run_command(
+    args: list[str],
+    *,
+    cwd: Path,
+    env: dict[str, str] | None,
+    log: Callable[[str], None],
+) -> None:
+    log(f"$ {' '.join(args)}")
+    proc = subprocess.Popen(
+        args,
+        cwd=cwd,
+        env=env,
+        stdout=subprocess.PIPE,
+        stderr=subprocess.STDOUT,
+        text=True,
+        bufsize=1,
+    )
+    assert proc.stdout is not None
+    for line in proc.stdout:
+        log(line.rstrip("\n"))
+    code = proc.wait()
+    if code != 0:
+        raise ReleaseError(f"Command failed ({code}): {' '.join(args)}")
+
+
+def update_gradle_version(version: str, log: Callable[[str], None]) -> int:
+    text = GRADLE_FILE.read_text()
+    code_match = re.search(r"versionCode\s+(\d+)", text)
+    if not code_match:
+        raise ReleaseError(f"Could not find versionCode in {GRADLE_FILE}")
+
+    next_code = int(code_match.group(1)) + 1
+    text = re.sub(r"versionCode\s+\d+", f"versionCode {next_code}", text, count=1)
+    text = re.sub(r'versionName\s+"[^"]+"', f'versionName "{version}"', text, count=1)
+    GRADLE_FILE.write_text(text)
+    log(f"Android version set: versionName {version}, versionCode {next_code}")
+    return next_code
+
+
+def build_apk(config: ReleaseConfig, log: Callable[[str], None]) -> Path:
+    update_gradle_version(config.version, log)
+    env = os.environ.copy()
+    env["JAVA_HOME"] = config.java_home
+    env["PATH"] = f"{config.java_home}/bin:{env.get('PATH', '')}"
+    env["VITE_API_BASE_URL"] = config.api_base_url
+
+    run_command(["npm", "run", "android:sync"], cwd=REPO_ROOT, env=env, log=log)
+    run_command(["./gradlew", "clean", "assembleDebug"], cwd=REPO_ROOT / "android", env=env, log=log)
+
+    apk_source = REPO_ROOT / "android" / "app" / "build" / "outputs" / "apk" / "debug" / "app-debug.apk"
+    if not apk_source.exists():
+        raise ReleaseError(f"APK not found: {apk_source}")
+    apk_target = REPO_ROOT / f"IWantToHeal-Thor-v{config.version}.apk"
+    apk_target.write_bytes(apk_source.read_bytes())
+    log(f"APK copied: {apk_target.name} ({apk_target.stat().st_size:,} bytes)")
+    return apk_target
+
+
+def commit_and_push(config: ReleaseConfig, log: Callable[[str], None]) -> None:
+    message = f"Android build v{config.version}"
+    run_command(["git", "add", "."], cwd=REPO_ROOT, env=None, log=log)
+    run_command(["git", "commit", "-m", message], cwd=REPO_ROOT, env=None, log=log)
+    run_command(["git", "push", "origin", config.branch], cwd=REPO_ROOT, env=None, log=log)
+
+
+def gitea_request(
+    config: ReleaseConfig,
+    method: str,
+    path: str,
+    *,
+    body: bytes | None = None,
+    content_type: str | None = None,
+) -> tuple[int, bytes]:
+    url = config.gitea_url.rstrip("/") + path
+    headers = {"Authorization": f"token {config.token}"}
+    if content_type:
+        headers["Content-Type"] = content_type
+    req = urllib.request.Request(url, data=body, headers=headers, method=method)
+    try:
+        with urllib.request.urlopen(req) as resp:
+            return resp.status, resp.read()
+    except urllib.error.HTTPError as exc:
+        data = exc.read()
+        return exc.code, data
+
+
+def parse_json_response(status: int, data: bytes, action: str) -> dict:
+    try:
+        parsed = json.loads(data.decode("utf-8") or "{}")
+    except json.JSONDecodeError as exc:
+        raise ReleaseError(f"{action} failed ({status}): {data.decode('utf-8', 'replace')}") from exc
+    if status >= 400:
+        raise ReleaseError(f"{action} failed ({status}): {parsed}")
+    if not isinstance(parsed, dict):
+        raise ReleaseError(f"{action} returned unexpected JSON: {parsed}")
+    return parsed
+
+
+def find_or_create_release(config: ReleaseConfig, log: Callable[[str], None]) -> int:
+    repo_path = f"/api/v1/repos/{config.gitea_owner}/{config.gitea_repo}"
+    tag = f"v{config.version}"
+    tag_path = repo_path + "/releases/tags/" + urllib.parse.quote(tag, safe="")
+    status, data = gitea_request(config, "GET", tag_path)
+    if status == 200:
+        release = parse_json_response(status, data, "Find release")
+        release_id = release.get("id")
+        if not release_id:
+            raise ReleaseError(f"Existing release missing id: {release}")
+        log(f"Gitea release exists: {tag} (id {release_id})")
+        return int(release_id)
+    if status != 404:
+        parse_json_response(status, data, "Find release")
+
+    payload = {
+        "tag_name": tag,
+        "target_commitish": config.branch,
+        "name": tag,
+        "body": f"I Want to Heal Android build v{config.version}",
+        "draft": False,
+        "prerelease": False,
+    }
+    status, data = gitea_request(
+        config,
+        "POST",
+        repo_path + "/releases",
+        body=json.dumps(payload).encode("utf-8"),
+        content_type="application/json",
+    )
+    release = parse_json_response(status, data, "Create release")
+    release_id = release.get("id")
+    if not release_id:
+        raise ReleaseError(f"Created release missing id: {release}")
+    log(f"Gitea release created: {tag} (id {release_id})")
+    return int(release_id)
+
+
+def upload_release_asset(config: ReleaseConfig, log: Callable[[str], None]) -> None:
+    apk_path = REPO_ROOT / f"IWantToHeal-Thor-v{config.version}.apk"
+    if not apk_path.exists():
+        raise ReleaseError(f"APK not found for release upload: {apk_path}")
+    release_id = find_or_create_release(config, log)
+
+    boundary = f"----iwanttoheal{int(time.time() * 1000)}"
+    header = (
+        f"--{boundary}\r\n"
+        f'Content-Disposition: form-data; name="attachment"; filename="{apk_path.name}"\r\n'
+        "Content-Type: application/vnd.android.package-archive\r\n\r\n"
+    ).encode("utf-8")
+    footer = f"\r\n--{boundary}--\r\n".encode("utf-8")
+    body = header + apk_path.read_bytes() + footer
+    asset_name = urllib.parse.quote(apk_path.name)
+    path = (
+        f"/api/v1/repos/{config.gitea_owner}/{config.gitea_repo}"
+        f"/releases/{release_id}/assets?name={asset_name}"
+    )
+    status, data = gitea_request(
+        config,
+        "POST",
+        path,
+        body=body,
+        content_type=f"multipart/form-data; boundary={boundary}",
+    )
+    if status == 409:
+        raise ReleaseError(f"Release asset already exists: {apk_path.name}")
+    parse_json_response(status, data, "Upload release asset")
+    log(f"Gitea asset uploaded: {apk_path.name}")
+
+
+def update_truenas(config: ReleaseConfig, log: Callable[[str], None]) -> None:
+    app_path = Path(config.truenas_path)
+    if not app_path.exists():
+        raise ReleaseError(f"TrueNAS path not found: {app_path}")
+    run_command(["git", "pull"], cwd=app_path, env=None, log=log)
+
+    if config.run_truenas_backup:
+        db_path = Path(config.truenas_db_path)
+        if not db_path.exists():
+            raise ReleaseError(f"TrueNAS database not found: {db_path}")
+        stamp = time.strftime("%Y%m%d-%H%M%S")
+        backup_path = db_path.with_name(f"game-before-update-{stamp}.db")
+        backup_path.write_bytes(db_path.read_bytes())
+        log(f"TrueNAS database backup copied: {backup_path}")
+
+    if config.run_restart:
+        if not config.restart_command.strip():
+            raise ReleaseError("Restart command is empty")
+        run_command(["sh", "-lc", config.restart_command], cwd=app_path, env=None, log=log)
+
+
+def validate_config(config: ReleaseConfig) -> None:
+    if not re.fullmatch(r"\d+\.\d+\.\d+(?:[-+][0-9A-Za-z.-]+)?", config.version):
+        raise ReleaseError("Version must look like 1.1.2")
+    if config.run_release and not config.token:
+        raise ReleaseError("Gitea token required for release step")
+    if config.run_restart and not config.run_truenas_pull:
+        raise ReleaseError("Restart needs TrueNAS update step enabled")
+
+
+def prompt_text(label: str, default: str = "", *, secret: bool = False) -> str:
+    prompt = f"{label}"
+    if default:
+        prompt += f" [{default}]"
+    prompt += ": "
+    try:
+        value = getpass(prompt) if secret else input(prompt)
+    except EOFError:
+        value = ""
+    return value.strip() or default
+
+
+def prompt_bool(label: str, default: bool) -> bool:
+    suffix = "Y/n" if default else "y/N"
+    try:
+        value = input(f"{label} [{suffix}]: ").strip().lower()
+    except EOFError:
+        value = ""
+    if not value:
+        return default
+    return value in {"y", "yes", "true", "1"}
+
+
+def run_release_steps(config: ReleaseConfig, log: Callable[[str], None]) -> None:
+    if config.run_build:
+        build_apk(config, log)
+    if config.run_commit_push:
+        commit_and_push(config, log)
+    if config.run_release:
+        upload_release_asset(config, log)
+    if config.run_truenas_pull:
+        update_truenas(config, log)
+
+
+def cli_main() -> int:
+    print("Tkinter not available. CLI mode.")
+    current_version = read_current_version()
+    config = ReleaseConfig(
+        version=prompt_text("Version", current_version),
+        token=prompt_text("Gitea token", secret=True),
+        api_base_url=prompt_text("API base URL", DEFAULT_API_BASE_URL),
+        java_home=prompt_text("JAVA_HOME", DEFAULT_JAVA_HOME),
+        gitea_url=prompt_text("Gitea URL", DEFAULT_GITEA_URL),
+        gitea_owner=prompt_text("Gitea owner", DEFAULT_GITEA_OWNER),
+        gitea_repo=prompt_text("Gitea repo", DEFAULT_GITEA_REPO),
+        branch=prompt_text("Git branch", DEFAULT_BRANCH),
+        truenas_path=prompt_text("TrueNAS app path", DEFAULT_TRUENAS_PATH),
+        truenas_db_path=prompt_text("TrueNAS DB path", DEFAULT_DB_PATH),
+        restart_command=prompt_text("Restart command"),
+        run_build=prompt_bool("Build APK", True),
+        run_commit_push=prompt_bool("Commit + push", True),
+        run_release=prompt_bool("Create Gitea release", True),
+        run_truenas_pull=prompt_bool("TrueNAS pull", True),
+        run_truenas_backup=prompt_bool("Backup DB", True),
+        run_restart=prompt_bool("Restart", False),
+    )
+    validate_config(config)
+    run_release_steps(config, print)
+    print("Release steps complete")
+    return 0
+
+
+if tk is not None and ttk is not None and messagebox is not None:
+
+    class ReleaseApp(ttk.Frame):
+        def __init__(self, root: tk.Tk) -> None:
+            super().__init__(root, padding=12)
+            self.root = root
+            self.log_queue: queue.Queue[tuple[str, str]] = queue.Queue()
+            self.worker: threading.Thread | None = None
+            self.vars: dict[str, tk.Variable] = {}
+            self.grid(sticky="nsew")
+            root.title("I Want to Heal Release Tool")
+            root.geometry("920x720")
+            root.columnconfigure(0, weight=1)
+            root.rowconfigure(0, weight=1)
+            self.columnconfigure(1, weight=1)
+            self.rowconfigure(13, weight=1)
+            self._build_form()
+            self.after(100, self._drain_log_queue)
+
+        def _var(self, name: str, value: object = "") -> tk.Variable:
+            if isinstance(value, bool):
+                var: tk.Variable = tk.BooleanVar(value=value)
+            else:
+                var = tk.StringVar(value=str(value))
+            self.vars[name] = var
+            return var
+
+        def _build_form(self) -> None:
+            current_version = read_current_version()
+            fields = [
+                ("Version", "version", current_version),
+                ("Gitea token", "token", ""),
+                ("API base URL", "api_base_url", DEFAULT_API_BASE_URL),
+                ("JAVA_HOME", "java_home", DEFAULT_JAVA_HOME),
+                ("Gitea URL", "gitea_url", DEFAULT_GITEA_URL),
+                ("Gitea owner", "gitea_owner", DEFAULT_GITEA_OWNER),
+                ("Gitea repo", "gitea_repo", DEFAULT_GITEA_REPO),
+                ("Git branch", "branch", DEFAULT_BRANCH),
+                ("TrueNAS app path", "truenas_path", DEFAULT_TRUENAS_PATH),
+                ("TrueNAS DB path", "truenas_db_path", DEFAULT_DB_PATH),
+                ("Restart command", "restart_command", ""),
+            ]
+            for row, (label, name, value) in enumerate(fields):
+                ttk.Label(self, text=label).grid(row=row, column=0, sticky="w", pady=3)
+                entry = ttk.Entry(self, textvariable=self._var(name, value), show="*" if name == "token" else "")
+                entry.grid(row=row, column=1, sticky="ew", pady=3)
+
+            checks = ttk.Frame(self)
+            checks.grid(row=11, column=0, columnspan=2, sticky="ew", pady=(10, 4))
+            check_data = [
+                ("Build APK", "run_build", True),
+                ("Commit + push", "run_commit_push", True),
+                ("Create Gitea release", "run_release", True),
+                ("TrueNAS pull", "run_truenas_pull", True),
+                ("Backup DB", "run_truenas_backup", True),
+                ("Restart", "run_restart", False),
+            ]
+            for index, (text, name, value) in enumerate(check_data):
+                ttk.Checkbutton(checks, text=text, variable=self._var(name, value)).grid(
+                    row=0, column=index, padx=(0, 14), sticky="w"
+                )
+
+            buttons = ttk.Frame(self)
+            buttons.grid(row=12, column=0, columnspan=2, sticky="ew", pady=(6, 8))
+            self.run_button = ttk.Button(buttons, text="Run Selected Steps", command=self.run_release)
+            self.run_button.pack(side="left")
+            ttk.Button(buttons, text="Start Admin Server", command=self.start_admin).pack(side="left", padx=8)
+
+            self.log_text = tk.Text(self, height=18, wrap="word")
+            self.log_text.grid(row=13, column=0, columnspan=2, sticky="nsew")
+            scroll = ttk.Scrollbar(self, command=self.log_text.yview)
+            scroll.grid(row=13, column=2, sticky="ns")
+            self.log_text.configure(yscrollcommand=scroll.set)
+
+        def config_from_form(self) -> ReleaseConfig:
+            get = lambda name: str(self.vars[name].get()).strip()
+            get_bool = lambda name: bool(self.vars[name].get())
+            return ReleaseConfig(
+                version=get("version"),
+                token=get("token"),
+                api_base_url=get("api_base_url"),
+                java_home=get("java_home"),
+                gitea_url=get("gitea_url"),
+                gitea_owner=get("gitea_owner"),
+                gitea_repo=get("gitea_repo"),
+                branch=get("branch"),
+                truenas_path=get("truenas_path"),
+                truenas_db_path=get("truenas_db_path"),
+                restart_command=get("restart_command"),
+                run_build=get_bool("run_build"),
+                run_commit_push=get_bool("run_commit_push"),
+                run_release=get_bool("run_release"),
+                run_truenas_pull=get_bool("run_truenas_pull"),
+                run_truenas_backup=get_bool("run_truenas_backup"),
+                run_restart=get_bool("run_restart"),
+            )
+
+        def log(self, message: str) -> None:
+            self.log_queue.put(("log", message))
+
+        def _drain_log_queue(self) -> None:
+            try:
+                while True:
+                    kind, message = self.log_queue.get_nowait()
+                    if kind == "done":
+                        self.run_button.configure(state="normal")
+                        if message:
+                            messagebox.showinfo("Release tool", message)
+                    elif kind == "error":
+                        self.run_button.configure(state="normal")
+                        messagebox.showerror("Release failed", message)
+                    else:
+                        self.log_text.insert("end", message + "\n")
+                        self.log_text.see("end")
+            except queue.Empty:
+                pass
+            self.after(100, self._drain_log_queue)
+
+        def run_release(self) -> None:
+            if self.worker and self.worker.is_alive():
+                return
+            try:
+                config = self.config_from_form()
+                validate_config(config)
+            except ReleaseError as exc:
+                messagebox.showerror("Invalid settings", str(exc))
+                return
+            self.run_button.configure(state="disabled")
+            self.log_text.delete("1.0", "end")
+            self.worker = threading.Thread(target=self._run_release_worker, args=(config,), daemon=True)
+            self.worker.start()
+
+        def _run_release_worker(self, config: ReleaseConfig) -> None:
+            try:
+                run_release_steps(config, self.log)
+                self.log_queue.put(("done", "Release steps complete"))
+            except Exception as exc:
+                self.log_queue.put(("error", str(exc)))
+
+        def start_admin(self) -> None:
+            if self.worker and self.worker.is_alive():
+                messagebox.showerror("Busy", "Release steps are still running")
+                return
+            self.log_text.delete("1.0", "end")
+            self.run_button.configure(state="disabled")
+            self.worker = threading.Thread(target=self._start_admin_worker, daemon=True)
+            self.worker.start()
+
+        def _start_admin_worker(self) -> None:
+            try:
+                self.log("Admin URL: http://127.0.0.1:4174")
+                run_command(["npm", "run", "admin:start"], cwd=REPO_ROOT, env=None, log=self.log)
+                self.log_queue.put(("done", "Admin server stopped"))
+            except Exception as exc:
+                self.log_queue.put(("error", str(exc)))
+
+
+def main() -> int:
+    if not GRADLE_FILE.exists():
+        print(f"Missing Gradle file: {GRADLE_FILE}", file=sys.stderr)
+        return 1
+    if tk is None:
+        return cli_main()
+    root = tk.Tk()
+    ReleaseApp(root)
+    root.mainloop()
+    return 0
+
+
+if __name__ == "__main__":
+    raise SystemExit(main())

scripts/release_game_cli.py

@@ -0,0 +1,304 @@
+#!/usr/bin/env python3
+from __future__ import annotations
+
+import argparse
+import json
+import os
+import re
+import shutil
+import sqlite3
+import subprocess
+import sys
+import urllib.error
+import urllib.parse
+import urllib.request
+from datetime import datetime
+from pathlib import Path
+
+
+REPO_ROOT = Path(__file__).resolve().parents[1]
+GRADLE_FILE = REPO_ROOT / "android" / "app" / "build.gradle"
+JAVA_HOME = "/Applications/Android Studio.app/Contents/jbr/Contents/Home"
+API_BASE_URL = "https://iwanttoheal.phenomrom.com"
+GITEA_URL = "https://git.whoagland.com"
+GITEA_OWNER = "phenom"
+GITEA_REPO = "i-want-to-heal"
+GITEA_TOKEN = "ed2db3fd54546e9658377d0551b3fc3961583f1d"
+BRANCH = "main"
+TRUENAS_PATH = Path("/mnt/usbssds/apps/iwanttoheal/app")
+PLAYER_DATA_TABLES = [
+    "encounter_loot_roll_items",
+    "encounter_loot_rolls",
+    "dungeon_runs",
+    "character_pvp_stats",
+    "character_boss_stats",
+    "character_inventory",
+    "character_talents",
+    "character_ability_slots",
+    "action_encounter_loot_rolls",
+    "action_dungeon_runs",
+    "action_character_inventory",
+    "action_gear_items",
+    "action_characters",
+    "sessions",
+    "characters",
+    "accounts",
+]
+
+
+def run(args: list[str], *, cwd: Path, env: dict[str, str] | None = None) -> None:
+    print(f"$ {' '.join(args)}", flush=True)
+    subprocess.run(args, cwd=cwd, env=env, check=True)
+
+
+def parse_args(argv: list[str]) -> argparse.Namespace:
+    parser = argparse.ArgumentParser(description="Build and publish an Android release.")
+    parser.add_argument(
+        "--reset-player-data",
+        action="store_true",
+        help="After release, back up the database and delete all accounts, characters, sessions, runs, loot, inventory, and PvP stats.",
+    )
+    parser.add_argument(
+        "--reset-db",
+        type=Path,
+        help="SQLite game.db path to reset. Defaults to mounted TrueNAS data/game.db when present, otherwise local data/game.db.",
+    )
+    parser.add_argument(
+        "--yes-reset",
+        action="store_true",
+        help="Skip the RESET confirmation when used with --reset-player-data.",
+    )
+    args = parser.parse_args(argv)
+    if args.yes_reset and not args.reset_player_data:
+        parser.error("--yes-reset requires --reset-player-data")
+    return args
+
+
+def prompt_version() -> str:
+    current = GRADLE_FILE.read_text()
+    match = re.search(r'versionName\s+"([^"]+)"', current)
+    current_version = match.group(1) if match else ""
+    suffix = f" [{current_version}]" if current_version else ""
+    version = input(f"Version{suffix}: ").strip() or current_version
+    if not re.fullmatch(r"\d+\.\d+\.\d+(?:[-+][0-9A-Za-z.-]+)?", version):
+        raise SystemExit("Version must look like 1.1.2")
+    return version
+
+
+def update_gradle_version(version: str) -> None:
+    text = GRADLE_FILE.read_text()
+    code_match = re.search(r"versionCode\s+(\d+)", text)
+    if not code_match:
+        raise SystemExit(f"Could not find versionCode in {GRADLE_FILE}")
+
+    next_code = int(code_match.group(1)) + 1
+    text = re.sub(r"versionCode\s+\d+", f"versionCode {next_code}", text, count=1)
+    text = re.sub(r'versionName\s+"[^"]+"', f'versionName "{version}"', text, count=1)
+    GRADLE_FILE.write_text(text)
+    print(f"Android version: {version}, versionCode: {next_code}")
+
+
+def build_apk(version: str) -> Path:
+    update_gradle_version(version)
+    env = os.environ.copy()
+    env["JAVA_HOME"] = JAVA_HOME
+    env["PATH"] = f"{JAVA_HOME}/bin:{env.get('PATH', '')}"
+    env["VITE_API_BASE_URL"] = API_BASE_URL
+
+    run(["npm", "run", "android:sync"], cwd=REPO_ROOT, env=env)
+    run(["./gradlew", "clean", "assembleDebug"], cwd=REPO_ROOT / "android", env=env)
+
+    source = REPO_ROOT / "android" / "app" / "build" / "outputs" / "apk" / "debug" / "app-debug.apk"
+    apk = REPO_ROOT / f"IWantToHeal-Thor-v{version}.apk"
+    shutil.copy2(source, apk)
+    print(f"APK: {apk}")
+    return apk
+
+
+def commit_and_push(version: str) -> None:
+    run(["git", "add", "."], cwd=REPO_ROOT)
+    run(["git", "commit", "-m", f"Android build v{version}"], cwd=REPO_ROOT)
+    run(["git", "push", "origin", BRANCH], cwd=REPO_ROOT)
+
+
+def request_json(method: str, path: str, token: str, data: dict | None = None) -> dict:
+    body = json.dumps(data).encode("utf-8") if data is not None else None
+    headers = {"Authorization": f"token {token}", "Content-Type": "application/json"}
+    req = urllib.request.Request(GITEA_URL + path, data=body, headers=headers, method=method)
+    try:
+        with urllib.request.urlopen(req) as resp:
+            return json.loads(resp.read().decode("utf-8"))
+    except urllib.error.HTTPError as exc:
+        detail = exc.read().decode("utf-8", "replace")
+        raise SystemExit(f"Gitea {method} failed ({exc.code}): {detail}") from exc
+
+
+def upload_asset(path: str, token: str, apk: Path) -> dict:
+    boundary = "----iwanttoheal-release-boundary"
+    body = (
+        f"--{boundary}\r\n"
+        f'Content-Disposition: form-data; name="attachment"; filename="{apk.name}"\r\n'
+        "Content-Type: application/vnd.android.package-archive\r\n\r\n"
+    ).encode("utf-8")
+    body += apk.read_bytes()
+    body += f"\r\n--{boundary}--\r\n".encode("utf-8")
+    headers = {
+        "Authorization": f"token {token}",
+        "Content-Type": f"multipart/form-data; boundary={boundary}",
+    }
+    req = urllib.request.Request(GITEA_URL + path, data=body, headers=headers, method="POST")
+    try:
+        with urllib.request.urlopen(req) as resp:
+            return json.loads(resp.read().decode("utf-8"))
+    except urllib.error.HTTPError as exc:
+        detail = exc.read().decode("utf-8", "replace")
+        raise SystemExit(f"Gitea asset upload failed ({exc.code}): {detail}") from exc
+
+
+def create_gitea_release(version: str, apk: Path) -> None:
+    token = GITEA_TOKEN.strip()
+    if not token or token == "PASTE_YOUR_GITEA_TOKEN_HERE":
+        raise SystemExit("Set GITEA_TOKEN near top of scripts/release_game_cli.py")
+
+    repo_path = f"/api/v1/repos/{GITEA_OWNER}/{GITEA_REPO}"
+    release = request_json(
+        "POST",
+        repo_path + "/releases",
+        token,
+        {
+            "tag_name": f"v{version}",
+            "target_commitish": BRANCH,
+            "name": f"v{version}",
+            "body": f"I Want to Heal Android build v{version}",
+            "draft": False,
+            "prerelease": False,
+        },
+    )
+    release_id = release.get("id")
+    if not release_id:
+        raise SystemExit(f"Gitea release missing id: {release}")
+
+    asset_name = urllib.parse.quote(apk.name)
+    upload_asset(f"{repo_path}/releases/{release_id}/assets?name={asset_name}", token, apk)
+    print(f"Gitea release uploaded: v{version}")
+
+
+def update_truenas() -> None:
+    if TRUENAS_PATH.exists():
+        run(["git", "pull"], cwd=TRUENAS_PATH)
+        print("Restart app in TrueNAS UI.")
+        return
+
+    print("TrueNAS path not mounted here. Run on TrueNAS:")
+    print(f"cd {TRUENAS_PATH}")
+    print("git pull")
+    print("Then restart app in TrueNAS UI.")
+
+
+def default_reset_database_path() -> Path:
+    truenas_database = TRUENAS_PATH / "data" / "game.db"
+    if truenas_database.exists():
+        return truenas_database
+    return REPO_ROOT / "data" / "game.db"
+
+
+def table_exists(database: sqlite3.Connection, table: str) -> bool:
+    return database.execute(
+        "SELECT 1 FROM sqlite_master WHERE type = 'table' AND name = ?",
+        (table,),
+    ).fetchone() is not None
+
+
+def count_rows(database: sqlite3.Connection, table: str) -> int:
+    if not table_exists(database, table):
+        return 0
+    return int(database.execute(f'SELECT COUNT(*) FROM "{table}"').fetchone()[0])
+
+
+def backup_database(database_path: Path) -> Path:
+    backup_dir = database_path.parent / "backups"
+    backup_dir.mkdir(parents=True, exist_ok=True)
+    timestamp = datetime.now().strftime("%Y%m%d-%H%M%S")
+    backup_path = backup_dir / f"{database_path.stem}-pre-player-reset-{timestamp}{database_path.suffix}"
+
+    source = sqlite3.connect(database_path)
+    try:
+        destination = sqlite3.connect(backup_path)
+        try:
+            source.backup(destination)
+        finally:
+            destination.close()
+    finally:
+        source.close()
+
+    return backup_path
+
+
+def reset_player_data(database_path: Path, *, assume_yes: bool) -> None:
+    database_path = database_path.expanduser().resolve()
+    if not database_path.exists():
+        raise SystemExit(f"Database not found: {database_path}")
+
+    if not assume_yes:
+        print(f"Reset target: {database_path}")
+        confirmation = input("Type RESET to delete all accounts/characters/player data: ").strip()
+        if confirmation != "RESET":
+            raise SystemExit("Player data reset cancelled.")
+
+    backup_path = backup_database(database_path)
+    database = sqlite3.connect(database_path)
+    try:
+        before = {
+            "accounts": count_rows(database, "accounts"),
+            "characters": count_rows(database, "characters"),
+            "action_characters": count_rows(database, "action_characters"),
+            "dungeon_runs": count_rows(database, "dungeon_runs"),
+            "encounter_loot_rolls": count_rows(database, "encounter_loot_rolls"),
+        }
+        database.execute("PRAGMA foreign_keys = ON")
+        database.execute("BEGIN")
+        try:
+            for table in PLAYER_DATA_TABLES:
+                if table_exists(database, table):
+                    database.execute(f'DELETE FROM "{table}"')
+            database.execute("COMMIT")
+        except Exception:
+            database.execute("ROLLBACK")
+            raise
+
+        after_accounts = count_rows(database, "accounts")
+        after_characters = count_rows(database, "characters")
+        if after_accounts or after_characters:
+            raise SystemExit(
+                f"Player data reset incomplete: {after_accounts} accounts, {after_characters} characters remain."
+            )
+
+        print(f"Database backup: {backup_path}")
+        print(
+            "Player data reset: "
+            f"{before['accounts']} accounts, "
+            f"{before['characters']} characters, "
+            f"{before['action_characters']} action characters, "
+            f"{before['dungeon_runs']} dungeon runs, "
+            f"{before['encounter_loot_rolls']} loot rolls removed."
+        )
+    finally:
+        database.close()
+
+
+def main(argv: list[str] | None = None) -> int:
+    args = parse_args(sys.argv[1:] if argv is None else argv)
+    os.chdir(REPO_ROOT)
+    version = prompt_version()
+    apk = build_apk(version)
+    commit_and_push(version)
+    create_gitea_release(version, apk)
+    update_truenas()
+    if args.reset_player_data:
+        reset_player_data(args.reset_db or default_reset_database_path(), assume_yes=args.yes_reset)
+    print("Done.")
+    return 0
+
+
+if __name__ == "__main__":
+    raise SystemExit(main())

server/admin.mjs

@@ -1,4 +1,4 @@
-import { createReadStream, existsSync, mkdirSync, statSync, writeFileSync } from 'node:fs'
+import { createReadStream, existsSync, mkdirSync, readdirSync, readFileSync, statSync, writeFileSync } from 'node:fs'
 import { createServer } from 'node:http'
 import { randomBytes } from 'node:crypto'
 import { extname, resolve, sep } from 'node:path'
@@ -10,6 +10,7 @@ const port = Number(process.env.ADMIN_PORT ?? 4174)
 const databasePath = fileURLToPath(new URL('../data/game.db', import.meta.url))
 const distPath = fileURLToPath(new URL('../dist', import.meta.url))
 const adminOverridesPath = fileURLToPath(new URL('../db/admin-overrides.sql', import.meta.url))
+const iwt2BalanceOverridesPath = fileURLToPath(new URL('../src/modes/iwt2/content/balanceOverrides.ts', import.meta.url))
 const bossImageDirectory = fileURLToPath(new URL('../data/uploads/bosses/', import.meta.url))
 const itemImageDirectory = fileURLToPath(new URL('../data/uploads/items/', import.meta.url))
 const dungeonImageDirectory = fileURLToPath(new URL('../data/uploads/dungeons/', import.meta.url))
@@ -248,6 +249,89 @@ function saveDungeonImage(database, dungeonId, payload) {
   return imageUrl
 }
 
+function readIwt2BalanceOverrides() {
+  if (!existsSync(iwt2BalanceOverridesPath)) return { bosses: {} }
+  const source = readFileSync(iwt2BalanceOverridesPath, 'utf8')
+  const exportIndex = source.indexOf('IWT2_BALANCE_OVERRIDES')
+  const objectStart = source.indexOf('{', exportIndex)
+  const objectEnd = source.lastIndexOf('}')
+  if (exportIndex < 0 || objectStart < 0 || objectEnd <= objectStart) return { bosses: {} }
+  try {
+    const parsed = JSON.parse(source.slice(objectStart, objectEnd + 1))
+    return sanitizeIwt2BalanceOverrides(parsed)
+  } catch {
+    return { bosses: {} }
+  }
+}
+
+function sanitizeIwt2BalanceOverrides(value) {
+  const overrides = { bosses: {} }
+  const bosses = value && typeof value === 'object' && value.bosses && typeof value.bosses === 'object'
+    ? value.bosses
+    : {}
+  for (const bossId of ['bulldrome', 'yian-kut-ku']) {
+    const boss = bosses[bossId]
+    if (!boss || typeof boss !== 'object') continue
+    const nextBoss = {}
+    if (Number.isFinite(Number(boss.maxHealth))) nextBoss.maxHealth = Math.max(1, Math.round(Number(boss.maxHealth)))
+    if (bossId === 'yian-kut-ku' && Number.isFinite(Number(boss.birdHealth))) {
+      nextBoss.birdHealth = Math.max(1, Math.round(Number(boss.birdHealth)))
+    }
+    if (Object.keys(nextBoss).length > 0) overrides.bosses[bossId] = nextBoss
+  }
+  return overrides
+}
+
+function writeIwt2BalanceOverrides(overrides) {
+  const source = [
+    "import type { Iwt2BalanceOverrides } from './bosses'",
+    '',
+    '// Generated by local admin panel. Commit this file with intended IWT2 balance changes.',
+    `export const IWT2_BALANCE_OVERRIDES: Iwt2BalanceOverrides = ${JSON.stringify(sanitizeIwt2BalanceOverrides(overrides), null, 2)}`,
+    '',
+  ].join('\n')
+  writeFileSync(iwt2BalanceOverridesPath, source, { mode: 0o644 })
+}
+
+function updateIwt2EntityHp(entityId, payload) {
+  const maxHealth = Number(payload.maxHealth)
+  if (!Number.isFinite(maxHealth) || maxHealth <= 0) throw new Error('HP must be greater than zero.')
+  const roundedHealth = Math.round(maxHealth)
+  const overrides = readIwt2BalanceOverrides()
+  const bosses = { ...(overrides.bosses ?? {}) }
+  if (entityId === 'bulldrome' || entityId === 'yian-kut-ku') {
+    bosses[entityId] = {
+      ...(bosses[entityId] ?? {}),
+      maxHealth: roundedHealth,
+    }
+  } else if (entityId === 'yian-kut-ku:yian-bird' || entityId === 'yian-bird') {
+    bosses['yian-kut-ku'] = {
+      ...(bosses['yian-kut-ku'] ?? {}),
+      birdHealth: roundedHealth,
+    }
+  } else {
+    throw new Error('IWT2 entity not found.')
+  }
+  const nextOverrides = sanitizeIwt2BalanceOverrides({ bosses })
+  writeIwt2BalanceOverrides(nextOverrides)
+  return nextOverrides
+}
+
+function listIwt2BossAssets() {
+  if (!existsSync(bossImageDirectory)) return []
+  return readdirSync(bossImageDirectory, { withFileTypes: true })
+    .filter((entry) => entry.isFile() && bossImageContentTypes[extname(entry.name).toLowerCase()])
+    .map((entry) => {
+      const imagePath = resolve(bossImageDirectory, entry.name)
+      return {
+        filename: entry.name,
+        size: statSync(imagePath).size,
+        url: `/api/boss-images/${entry.name}`,
+      }
+    })
+    .sort((a, b) => a.filename.localeCompare(b.filename))
+}
+
 function sendFile(response, filePath) {
   const contentTypes = {
     '.css': 'text/css; charset=utf-8',
@@ -308,6 +392,22 @@ const server = createServer(async (request, response) => {
       return
     }
 
+    if (request.url === '/api/admin/iwt2/data' && request.method === 'GET') {
+      sendJson(response, 200, {
+        balanceOverrides: readIwt2BalanceOverrides(),
+        bossAssets: listIwt2BossAssets(),
+      })
+      return
+    }
+
+    const iwt2HpMatch = request.url.match(/^\/api\/admin\/iwt2\/entities\/([^/]+)\/hp$/)
+    if (iwt2HpMatch && request.method === 'PUT') {
+      const payload = await readJson(request)
+      const balanceOverrides = updateIwt2EntityHp(decodeURIComponent(iwt2HpMatch[1]), payload)
+      sendJson(response, 200, { ok: true, balanceOverrides })
+      return
+    }
+
     if (!existsSync(databasePath)) {
       sendJson(response, 503, { error: 'Database missing. Run npm run db:init.' })
       return

server/catalog.mjs

@@ -55,6 +55,12 @@ export function normalizeCatalogProfile(profile) {
     })),
     craftingRecipes: profile.craftingRecipes.map(normalizeRecipe),
     dungeons: profile.dungeons.map(normalizeDungeon),
+    hunterStats: {
+      bossKills: {},
+      bossPets: {},
+      pvpMatchesPlayed: 0,
+      pvpMatchesWon: 0,
+    },
   }
 }
 

server/game-api.mjs

@@ -10,6 +10,11 @@ import { isIP } from 'node:net'
 import { extname, resolve, sep } from 'node:path'
 import { DatabaseSync } from 'node:sqlite'
 import { catalogPayload } from './catalog.mjs'
+import {
+  catchUpExperienceReward as catchUpExperienceRewardForTarget,
+  coinDropQuantity,
+  roguelikeCoinItemLevel,
+} from '../src/shared/rewardRules.mjs'
 
 const databasePath = fileURLToPath(new URL('../data/game.db', import.meta.url))
 const bossImageDirectory = fileURLToPath(new URL('../data/uploads/bosses/', import.meta.url))
@@ -27,6 +32,39 @@ const directCraftItemLevels = new Set([1, 10, 20, 25])
 const sessionCookieName = 'chronicle_session'
 const sessionLifetimeSeconds = 60 * 60 * 24 * 30
 const rateLimitBuckets = new Map()
+const pvpQueue = new Map()
+const pvpMatches = new Map()
+const pvpQueueTtlMs = 15 * 1000
+const pvpMatchTtlMs = 60 * 60 * 1000
+
+function addColumnIfMissing(database, table, column, definition) {
+  const columns = database.prepare(`PRAGMA table_info(${table})`).all()
+  if (!columns.some((candidate) => candidate.name === column)) {
+    database.exec(`ALTER TABLE ${table} ADD COLUMN ${column} ${definition}`)
+  }
+}
+
+function ensureRuntimeMigrations(database) {
+  addColumnIfMissing(database, 'accounts', 'last_saved_at', 'TEXT')
+  database.prepare(`
+    UPDATE accounts
+    SET last_saved_at = COALESCE(NULLIF(last_saved_at, ''), created_at, CURRENT_TIMESTAMP)
+    WHERE last_saved_at IS NULL OR last_saved_at = ''
+  `).run()
+}
+
+function sqliteDateFromMs(value) {
+  const timestamp = Number(value)
+  if (!Number.isFinite(timestamp) || timestamp <= 0) {
+    return new Date().toISOString()
+  }
+  return new Date(timestamp).toISOString()
+}
+
+function epochMsFromSqliteDate(value) {
+  const timestamp = Date.parse(String(value ?? ''))
+  return Number.isFinite(timestamp) ? timestamp : 0
+}
 
 function sendJson(response, status, body, headers = {}) {
   response.statusCode = status
@@ -35,6 +73,19 @@ function sendJson(response, status, body, headers = {}) {
   response.end(JSON.stringify(body))
 }
 
+function touchAccountSave(database, accountId) {
+  database.prepare(`
+    UPDATE accounts
+    SET last_saved_at = CURRENT_TIMESTAMP
+    WHERE id = ?
+  `).run(accountId)
+}
+
+function sendMutatingResult(response, database, accountId, body) {
+  touchAccountSave(database, accountId)
+  sendJson(response, 200, body)
+}
+
 function configuredCorsOrigins() {
   return String(process.env.CORS_ORIGINS ?? process.env.AUTH_CORS_ORIGINS ?? '')
     .split(',')
@@ -247,10 +298,7 @@ function catchUpExperienceReward(database, accountId, characterId, baseReward, c
     FROM level_progression
     WHERE level = ?
   `).get(targetLevel)?.experienceRequired ?? currentExperience
-  const gap = Math.max(0, targetExperience - currentExperience)
-  if (gap <= 0) return baseReward
-  const doubledBase = Math.min(baseReward, Math.ceil(gap / 2))
-  return doubledBase * 2 + (baseReward - doubledBase)
+  return catchUpExperienceRewardForTarget(baseReward, currentExperience, targetExperience)
 }
 
 function normalizeUsername(value) {
@@ -349,10 +397,13 @@ function currentSession(database, request) {
       accounts.id AS accountId,
       accounts.username,
       characters.id AS characterId,
-      characters.class_id AS classId
+      characters.class_id AS classId,
+      characters.name AS characterName,
+      classes.name AS className
     FROM sessions
     JOIN accounts ON accounts.id = sessions.account_id
     JOIN characters ON characters.id = sessions.active_character_id
+    JOIN classes ON classes.id = characters.class_id
     WHERE sessions.token_hash = ?
       AND sessions.expires_at > CURRENT_TIMESTAMP
   `).get(tokenHash(token)) ?? null
@@ -806,6 +857,21 @@ export function getProfile(database, characterId, accountId) {
       AND completed_parts >= 1
     GROUP BY dungeon_id
   `).all(characterId).map((row) => [row.dungeonId, row.count]))
+  const bossStatRows = database.prepare(`
+    SELECT
+      encounter_id AS encounterId,
+      kills,
+      pet_quantity AS petQuantity
+    FROM character_boss_stats
+    WHERE character_id = ?
+  `).all(characterId)
+  const pvpStats = database.prepare(`
+    SELECT
+      matches_played AS matchesPlayed,
+      matches_won AS matchesWon
+    FROM character_pvp_stats
+    WHERE character_id = ?
+  `).get(characterId)
 
   const settings = Object.fromEntries(
     database.prepare('SELECT key, value FROM game_settings').all()
@@ -921,6 +987,12 @@ export function getProfile(database, characterId, accountId) {
           .map((run) => ({ ...run, rank: Number(run.rank) })),
       },
     })),
+    hunterStats: {
+      bossKills: Object.fromEntries(bossStatRows.map((row) => [String(row.encounterId), row.kills])),
+      bossPets: Object.fromEntries(bossStatRows.map((row) => [String(row.encounterId), row.petQuantity])),
+      pvpMatchesPlayed: pvpStats?.matchesPlayed ?? 0,
+      pvpMatchesWon: pvpStats?.matchesWon ?? 0,
+    },
   }
 }
 
@@ -997,7 +1069,8 @@ function buildSyncSave(database, accountId, activeCharacterId) {
   const account = database.prepare(`
     SELECT
       completed_dungeon_parts AS completedDungeonParts,
-      completed_raid_phases AS completedRaidPhases
+      completed_raid_phases AS completedRaidPhases,
+      last_saved_at AS lastSavedAt
     FROM accounts
     WHERE id = ?
   `).get(accountId)
@@ -1016,8 +1089,19 @@ function buildSyncSave(database, accountId, activeCharacterId) {
   const characterName = characters.find((candidate) => candidate.id === activeCharacterId)?.name
     ?? characters[0]?.name
     ?? 'Mira'
+  const bossStats = database.prepare(`
+    SELECT encounter_id AS encounterId, kills, pet_quantity AS petQuantity
+    FROM character_boss_stats
+    WHERE character_id = ?
+  `).all(activeCharacterId)
+  const pvpStats = database.prepare(`
+    SELECT matches_played AS matchesPlayed, matches_won AS matchesWon
+    FROM character_pvp_stats
+    WHERE character_id = ?
+  `).get(activeCharacterId)
   return {
-    version: 3,
+    version: 4,
+    updatedAt: epochMsFromSqliteDate(account?.lastSavedAt),
     characterName,
     activeClassId,
     completedDungeonParts: account?.completedDungeonParts ?? 0,
@@ -1029,6 +1113,10 @@ function buildSyncSave(database, accountId, activeCharacterId) {
       ]),
     ),
     lootRolls: {},
+    bossKills: Object.fromEntries(bossStats.map((row) => [String(row.encounterId), row.kills])),
+    bossPets: Object.fromEntries(bossStats.map((row) => [String(row.encounterId), row.petQuantity])),
+    pvpMatchesPlayed: pvpStats?.matchesPlayed ?? 0,
+    pvpMatchesWon: pvpStats?.matchesWon ?? 0,
   }
 }
 
@@ -1043,7 +1131,7 @@ function importSyncSave(database, accountId, activeCharacterId, payload) {
   if (
     !save
     || typeof save !== 'object'
-    || Number(save.version) !== 3
+    || (Number(save.version) !== 4 && Number(save.version) !== 3)
     || typeof save.characterName !== 'string'
     || !save.characters
     || typeof save.characters !== 'object'
@@ -1120,11 +1208,12 @@ function importSyncSave(database, accountId, activeCharacterId, payload) {
 
     database.prepare(`
       UPDATE accounts
-      SET completed_dungeon_parts = ?, completed_raid_phases = ?
+      SET completed_dungeon_parts = ?, completed_raid_phases = ?, last_saved_at = ?
       WHERE id = ?
     `).run(
       clampInteger(save.completedDungeonParts, 0, 0, 3),
       clampInteger(save.completedRaidPhases, 0, 0, 3),
+      sqliteDateFromMs(save.updatedAt),
       accountId,
     )
 
@@ -1140,6 +1229,10 @@ function importSyncSave(database, accountId, activeCharacterId, payload) {
       INSERT INTO character_inventory (character_id, item_id, quantity, equipped)
       VALUES (?, ?, ?, ?)
     `)
+    const insertBossStats = database.prepare(`
+      INSERT INTO character_boss_stats (character_id, encounter_id, kills, pet_quantity)
+      VALUES (?, ?, ?, ?)
+    `)
 
     for (const classId of classIds) {
       const local = save.characters[classId]
@@ -1204,6 +1297,14 @@ function importSyncSave(database, accountId, activeCharacterId, payload) {
         DELETE FROM character_inventory
         WHERE character_id = ?
       `).run(characterId)
+      database.prepare(`
+        DELETE FROM character_boss_stats
+        WHERE character_id = ?
+      `).run(characterId)
+      database.prepare(`
+        DELETE FROM character_pvp_stats
+        WHERE character_id = ?
+      `).run(characterId)
       const inventoryByItemId = new Map()
       const equippedSlots = new Set()
       for (const item of Array.isArray(local.inventory) ? local.inventory : []) {
@@ -1226,6 +1327,34 @@ function importSyncSave(database, accountId, activeCharacterId, payload) {
       for (const [itemId, itemState] of inventoryByItemId) {
         insertInventory.run(characterId, itemId, itemState.quantity, itemState.equipped ? 1 : 0)
       }
+      if (classId === Number(save.activeClassId)) {
+        const bossKills = save.bossKills && typeof save.bossKills === 'object' ? save.bossKills : {}
+        const bossPets = save.bossPets && typeof save.bossPets === 'object' ? save.bossPets : {}
+        for (const [encounterId, rawKills] of Object.entries(bossKills)) {
+          const id = Number(encounterId)
+          if (!Number.isInteger(id)) continue
+          insertBossStats.run(
+            characterId,
+            id,
+            clampInteger(rawKills, 0, 0, 1000000),
+            clampInteger(bossPets[encounterId], 0, 0, 1000000),
+          )
+        }
+        for (const [encounterId, rawPets] of Object.entries(bossPets)) {
+          if (Object.hasOwn(bossKills, encounterId)) continue
+          const id = Number(encounterId)
+          if (!Number.isInteger(id)) continue
+          insertBossStats.run(characterId, id, 0, clampInteger(rawPets, 0, 0, 1000000))
+        }
+        database.prepare(`
+          INSERT INTO character_pvp_stats (character_id, matches_played, matches_won)
+          VALUES (?, ?, ?)
+        `).run(
+          characterId,
+          clampInteger(save.pvpMatchesPlayed, 0, 0, 1000000),
+          clampInteger(save.pvpMatchesWon, 0, 0, 1000000),
+        )
+      }
     }
 
     let syncedClassId = clampInteger(
@@ -1338,17 +1467,6 @@ function formatLootRoll(database, context, record, dropChance) {
   }
 }
 
-function coinDropQuantity() {
-  const roll = Math.random()
-  if (roll < 0.15) return 3
-  if (roll < 0.5) return 2
-  return 1
-}
-
-function roguelikeCoinItemLevel(stage) {
-  return Math.min(25, 5 + Math.max(0, Math.floor(stage / 5)) * 5)
-}
-
 function awardRoguelikeCoin(database, characterId, sourceEncounterId, stage) {
   if (!sourceEncounterId || !stage) return null
   const coin = database.prepare(`
@@ -2300,7 +2418,18 @@ function completeRoguelike(database, characterId, accountId, runMetrics) {
   const bossesCleared = Number(runMetrics?.bossesCleared ?? Math.floor(encountersCleared / 3))
   const experienceMode = runMetrics?.experienceMode === 'pvp-boss-quarter-level'
     ? 'pvp-boss-quarter-level'
-    : 'default'
+    : runMetrics?.experienceMode === 'pvp-fight-twelfth-level'
+      ? 'pvp-fight-twelfth-level'
+      : runMetrics?.experienceMode === 'pvp-match-win-half-level'
+        ? 'pvp-match-win-half-level'
+        : runMetrics?.experienceMode === 'pvp-stadium-round-win-quarter-level'
+          ? 'pvp-stadium-round-win-quarter-level'
+          : runMetrics?.experienceMode === 'pvp-stadium-round-loss-tenth-level'
+            ? 'pvp-stadium-round-loss-tenth-level'
+            : runMetrics?.experienceMode === 'pvp-stadium-match-half-level'
+              ? 'pvp-stadium-match-half-level'
+              : 'default'
+  const fightsCleared = Number(runMetrics?.fightsCleared ?? encountersCleared)
   const resourceSpent = Number(runMetrics?.resourceSpent)
   const durationSeconds = Number(runMetrics?.durationSeconds)
   if (!Number.isInteger(dungeonId) || dungeonId < 1) {
@@ -2315,6 +2444,9 @@ function completeRoguelike(database, characterId, accountId, runMetrics) {
   if (!Number.isInteger(bossesCleared) || bossesCleared < 0 || bossesCleared > 100000) {
     throw new Error('The roguelike boss total is invalid.')
   }
+  if (!Number.isInteger(fightsCleared) || fightsCleared < 0 || fightsCleared > 100000) {
+    throw new Error('The roguelike fight total is invalid.')
+  }
   if (!Number.isInteger(resourceSpent) || resourceSpent < 0 || resourceSpent > 100000) {
     throw new Error('The run resource total is invalid.')
   }
@@ -2367,14 +2499,15 @@ function completeRoguelike(database, characterId, accountId, runMetrics) {
   `).get(maxLevel).experienceRequired
   let newExperience = character.experience
   let newLevel = character.level
-  if (experienceMode === 'pvp-boss-quarter-level') {
+  if (experienceMode === 'pvp-boss-quarter-level' || experienceMode === 'pvp-fight-twelfth-level') {
     const catchUpTargetLevel = database.prepare(`
       SELECT COALESCE(MAX(level), 0) AS level
       FROM characters
       WHERE account_id = ?
         AND id != ?
     `).get(accountId, characterId).level
-    for (let bossIndex = 0; bossIndex < bossesCleared && newExperience < maxExperience; bossIndex += 1) {
+    const rewardUnits = experienceMode === 'pvp-boss-quarter-level' ? bossesCleared : fightsCleared
+    for (let rewardIndex = 0; rewardIndex < rewardUnits && newExperience < maxExperience; rewardIndex += 1) {
       const currentLevelFloor = database.prepare(`
         SELECT experience_required AS experienceRequired
         FROM level_progression
@@ -2388,7 +2521,9 @@ function completeRoguelike(database, characterId, accountId, runMetrics) {
           WHERE level = ?
         `).get(newLevel + 1).experienceRequired
       const levelBand = Math.max(1, nextLevelExperience - currentLevelFloor)
-      const rewardRate = catchUpTargetLevel > newLevel ? 0.5 : 0.25
+      const rewardRate = experienceMode === 'pvp-boss-quarter-level'
+        ? (catchUpTargetLevel > newLevel ? 0.5 : 0.25)
+        : (catchUpTargetLevel > newLevel ? 1 / 6 : 1 / 12)
       newExperience = Math.min(maxExperience, newExperience + Math.round(levelBand * rewardRate))
       newLevel = database.prepare(`
         SELECT MAX(level) AS level
@@ -2396,6 +2531,36 @@ function completeRoguelike(database, characterId, accountId, runMetrics) {
         WHERE experience_required <= ?
       `).get(newExperience).level
     }
+  } else if (
+    experienceMode === 'pvp-match-win-half-level'
+    || experienceMode === 'pvp-stadium-round-win-quarter-level'
+    || experienceMode === 'pvp-stadium-round-loss-tenth-level'
+    || experienceMode === 'pvp-stadium-match-half-level'
+  ) {
+    const currentLevelFloor = database.prepare(`
+      SELECT experience_required AS experienceRequired
+      FROM level_progression
+      WHERE level = ?
+    `).get(newLevel).experienceRequired
+    const nextLevelExperience = newLevel >= maxLevel
+      ? maxExperience
+      : database.prepare(`
+        SELECT experience_required AS experienceRequired
+        FROM level_progression
+        WHERE level = ?
+      `).get(newLevel + 1).experienceRequired
+    const levelBand = Math.max(1, nextLevelExperience - currentLevelFloor)
+    const rewardRate = experienceMode === 'pvp-stadium-round-win-quarter-level'
+      ? 0.25
+      : experienceMode === 'pvp-stadium-round-loss-tenth-level'
+        ? 0.1
+        : 0.5
+    newExperience = Math.min(maxExperience, newExperience + Math.round(levelBand * rewardRate))
+    newLevel = database.prepare(`
+      SELECT MAX(level) AS level
+      FROM level_progression
+      WHERE experience_required <= ?
+    `).get(newExperience).level
   } else {
     const baseExperienceReward = Math.round(
       dungeon.experienceReward * dungeon.experienceMultiplier * (encountersCleared / 3),
@@ -2538,6 +2703,261 @@ function saveProfile(database, characterId, accountId, payload) {
   }
 }
 
+function cleanupPvpMemory(now = Date.now()) {
+  for (const [ticketId, ticket] of pvpQueue.entries()) {
+    if (now - ticket.updatedAt > pvpQueueTtlMs) pvpQueue.delete(ticketId)
+  }
+  for (const [matchId, match] of pvpMatches.entries()) {
+    if (now - match.updatedAt > pvpMatchTtlMs) pvpMatches.delete(matchId)
+  }
+}
+
+function validatePvpContentType(value) {
+  if (value !== 'dungeon' && value !== 'raid' && value !== 'stadium') {
+    throw new Error('The PvP content type is invalid.')
+  }
+  return value
+}
+
+function validatePvpStartStage(value) {
+  const startStage = Number(value)
+  if (!Number.isInteger(startStage) || startStage < 1 || startStage > 1000) {
+    throw new Error('The PvP start stage is invalid.')
+  }
+  return startStage
+}
+
+function pvpPlayerInfo(session) {
+  return {
+    accountId: session.accountId,
+    characterId: session.characterId,
+    characterName: session.characterName,
+    className: session.className,
+  }
+}
+
+function pvpSnapshot(match) {
+  return {
+    id: match.id,
+    contentType: match.contentType,
+    startStage: match.startStage,
+    createdAt: match.createdAt,
+    players: match.players,
+    states: match.states,
+    statuses: match.statuses,
+    progress: match.progress,
+    upgradeChoices: match.upgradeChoices,
+    rematchRequests: match.rematchRequests,
+    updatedAt: match.updatedAt,
+  }
+}
+
+function createPvpMatch(contentType, startStage, players, now = Date.now()) {
+  const matchId = randomBytes(12).toString('base64url')
+  const match = {
+    id: matchId,
+    contentType,
+    startStage,
+    createdAt: now,
+    players,
+    states: {},
+    statuses: {},
+    progress: {},
+    upgradeChoices: {},
+    rematchRequests: {},
+    updatedAt: now,
+  }
+  pvpMatches.set(matchId, match)
+  return match
+}
+
+function joinPvpQueue(session, payload) {
+  const now = Date.now()
+  cleanupPvpMemory(now)
+  const contentType = validatePvpContentType(payload.contentType)
+  const startStage = validatePvpStartStage(payload.startStage)
+  const existingTicket = [...pvpQueue.values()].find((ticket) =>
+    ticket.accountId === session.accountId
+      && ticket.characterId === session.characterId
+      && ticket.contentType === contentType
+      && ticket.startStage === startStage
+  )
+  if (existingTicket?.matchId) {
+    const match = pvpMatches.get(existingTicket.matchId)
+    if (match) {
+      const side = match.players.a.accountId === session.accountId ? 'a' : 'b'
+      return { ticketId: existingTicket.id, status: 'matched', side, match: pvpSnapshot(match) }
+    }
+  }
+
+  const opponent = [...pvpQueue.values()]
+    .filter((ticket) =>
+      !ticket.matchId
+        && ticket.contentType === contentType
+        && ticket.startStage === startStage
+        && ticket.accountId !== session.accountId
+    )
+    .sort((left, right) => left.createdAt - right.createdAt)[0]
+  const player = pvpPlayerInfo(session)
+  if (opponent) {
+    const match = createPvpMatch(contentType, startStage, {
+      a: { side: 'a', ...opponent.player },
+      b: { side: 'b', ...player },
+    }, now)
+    opponent.matchId = match.id
+    opponent.updatedAt = now
+    const ticketId = randomBytes(12).toString('base64url')
+    pvpQueue.set(ticketId, {
+      id: ticketId,
+      accountId: session.accountId,
+      characterId: session.characterId,
+      contentType,
+      startStage,
+      player,
+      matchId: match.id,
+      createdAt: now,
+      updatedAt: now,
+    })
+    return { ticketId, status: 'matched', side: 'b', match: pvpSnapshot(match) }
+  }
+
+  if (existingTicket) {
+    existingTicket.updatedAt = now
+    return { ticketId: existingTicket.id, status: 'waiting' }
+  }
+
+  const ticketId = randomBytes(12).toString('base64url')
+  pvpQueue.set(ticketId, {
+    id: ticketId,
+    accountId: session.accountId,
+    characterId: session.characterId,
+    contentType,
+    startStage,
+    player,
+    createdAt: now,
+    updatedAt: now,
+  })
+  return { ticketId, status: 'waiting' }
+}
+
+function checkPvpQueue(session, ticketId) {
+  cleanupPvpMemory()
+  const ticket = pvpQueue.get(ticketId)
+  if (!ticket || ticket.accountId !== session.accountId) {
+    const error = new Error('PvP queue ticket not found.')
+    error.status = 404
+    throw error
+  }
+  ticket.updatedAt = Date.now()
+  if (!ticket.matchId) return { ticketId, status: 'waiting' }
+  const match = pvpMatches.get(ticket.matchId)
+  if (!match) return { ticketId, status: 'waiting' }
+  const side = match.players.a.accountId === session.accountId ? 'a' : 'b'
+  return { ticketId, status: 'matched', side, match: pvpSnapshot(match) }
+}
+
+function cancelPvpQueue(session, ticketId) {
+  const ticket = pvpQueue.get(ticketId)
+  if (ticket && ticket.accountId === session.accountId && !ticket.matchId) {
+    pvpQueue.delete(ticketId)
+  }
+  return { ok: true }
+}
+
+function requirePvpMatchForSession(session, matchId) {
+  cleanupPvpMemory()
+  const match = pvpMatches.get(matchId)
+  if (!match) {
+    const error = new Error('PvP match not found.')
+    error.status = 404
+    throw error
+  }
+  const side = match.players.a.accountId === session.accountId ? 'a'
+    : match.players.b.accountId === session.accountId ? 'b'
+      : null
+  if (!side) {
+    const error = new Error('That PvP match belongs to another account.')
+    error.status = 403
+    throw error
+  }
+  return { match, side }
+}
+
+function updatePvpMatchState(session, matchId, payload) {
+  const { match, side } = requirePvpMatchForSession(session, matchId)
+  const status = ['playing', 'upgrade-choice', 'shop', 'won', 'lost'].includes(payload.status)
+    ? payload.status
+    : 'playing'
+  const progress = {
+    stage: validatePvpStartStage(payload.stage),
+    encounterIndex: Math.max(0, Math.floor(Number(payload.encounterIndex) || 0)),
+    encountersCleared: Math.max(0, Math.floor(Number(payload.encountersCleared) || 0)),
+    enemyHealth: Math.max(0, Number(payload.enemyHealth) || 0),
+    alive: Boolean(payload.alive),
+    elapsedTicks: Math.max(0, Math.floor(Number(payload.elapsedTicks) || 0)),
+  }
+  const currentProgress = match.progress[side]
+  if (
+    currentProgress
+    && (
+      progress.stage < currentProgress.stage
+      || (
+        progress.stage === currentProgress.stage
+        && progress.encounterIndex < currentProgress.encounterIndex
+      )
+    )
+  ) {
+    return pvpSnapshot(match)
+  }
+  match.states[side] = payload.state ?? null
+  match.statuses[side] = status
+  match.progress[side] = progress
+  match.updatedAt = Date.now()
+  return pvpSnapshot(match)
+}
+
+function submitPvpUpgradeChoice(session, matchId, payload) {
+  const { match, side } = requirePvpMatchForSession(session, matchId)
+  const encounterIndex = Math.max(0, Math.floor(Number(payload.encounterIndex) || 0))
+  if (!match.upgradeChoices[side]) match.upgradeChoices[side] = {}
+  match.upgradeChoices[side][String(encounterIndex)] = {
+    encounterIndex,
+    buffId: String(payload.buffId ?? ''),
+    debuffId: String(payload.debuffId ?? ''),
+    purchases: Array.isArray(payload.purchases) ? payload.purchases.map((purchase) => String(purchase)) : [],
+    shopReady: Boolean(payload.shopReady),
+  }
+  match.updatedAt = Date.now()
+  return pvpSnapshot(match)
+}
+
+function requestPvpRematch(session, matchId) {
+  const { match, side } = requirePvpMatchForSession(session, matchId)
+  if (match.nextMatchId) {
+    const nextMatch = pvpMatches.get(match.nextMatchId)
+    if (nextMatch) return { status: 'matched', side, match: pvpSnapshot(nextMatch) }
+  }
+  match.rematchRequests = match.rematchRequests ?? {}
+  match.rematchRequests[side] = true
+  match.updatedAt = Date.now()
+  const opponentSide = side === 'a' ? 'b' : 'a'
+  if (!match.rematchRequests[opponentSide]) {
+    return { status: 'waiting', match: pvpSnapshot(match), side }
+  }
+  const nextMatch = createPvpMatch(
+    match.contentType,
+    match.startStage,
+    {
+      a: match.players.a,
+      b: match.players.b,
+    },
+    Date.now(),
+  )
+  match.nextMatchId = nextMatch.id
+  match.updatedAt = Date.now()
+  return { status: 'matched', side, match: pvpSnapshot(nextMatch) }
+}
+
 export function gameApiPlugin() {
   return {
     name: 'ashen-halls-game-api',
@@ -2629,6 +3049,7 @@ export async function handleAuthApiRequest(request, response, next = null) {
 
   const database = new DatabaseSync(databasePath)
   database.exec('PRAGMA foreign_keys = ON')
+  ensureRuntimeMigrations(database)
 
   try {
     const ip = requestIp(request)
@@ -2685,10 +3106,11 @@ export async function handleApiRequest(request, response, next) {
 
   const database = new DatabaseSync(databasePath)
   database.exec('PRAGMA foreign_keys = ON')
+  ensureRuntimeMigrations(database)
 
   try {
     const ip = requestIp(request)
-    consumeRateLimit(`api:${ip}`, 240, 60 * 1000)
+    consumeRateLimit(`api:${ip}`, 900, 60 * 1000)
     database.prepare(`
       DELETE FROM sessions WHERE expires_at <= CURRENT_TIMESTAMP
     `).run()
@@ -2723,16 +3145,60 @@ export async function handleApiRequest(request, response, next) {
     if (request.url === '/api/profile' && request.method === 'PUT') {
       const payload = await readJson(request)
       const newCharacterId = saveProfile(database, session.characterId, session.accountId, payload)
-      sendJson(response, 200, getProfile(database, newCharacterId, session.accountId))
+      sendMutatingResult(response, database, session.accountId, getProfile(database, newCharacterId, session.accountId))
+      return
+    }
+
+    if (request.url === '/api/pvp/queue' && request.method === 'POST') {
+      const payload = await readJson(request)
+      sendJson(response, 200, joinPvpQueue(session, payload))
+      return
+    }
+
+    const pvpQueueTicket = request.url.match(/^\/api\/pvp\/queue\/([A-Za-z0-9_-]+)$/)
+    if (pvpQueueTicket && request.method === 'GET') {
+      sendJson(response, 200, checkPvpQueue(session, pvpQueueTicket[1]))
+      return
+    }
+
+    if (pvpQueueTicket && request.method === 'DELETE') {
+      sendJson(response, 200, cancelPvpQueue(session, pvpQueueTicket[1]))
+      return
+    }
+
+    const pvpMatchState = request.url.match(/^\/api\/pvp\/matches\/([A-Za-z0-9_-]+)\/state$/)
+    if (pvpMatchState && request.method === 'POST') {
+      const payload = await readJson(request, 128 * 1024)
+      sendJson(response, 200, updatePvpMatchState(session, pvpMatchState[1], payload))
+      return
+    }
+
+    const pvpUpgradeChoice = request.url.match(/^\/api\/pvp\/matches\/([A-Za-z0-9_-]+)\/upgrade-choice$/)
+    if (pvpUpgradeChoice && request.method === 'POST') {
+      const payload = await readJson(request)
+      sendJson(response, 200, submitPvpUpgradeChoice(session, pvpUpgradeChoice[1], payload))
+      return
+    }
+
+    const pvpRematch = request.url.match(/^\/api\/pvp\/matches\/([A-Za-z0-9_-]+)\/rematch$/)
+    if (pvpRematch && request.method === 'POST') {
+      sendJson(response, 200, requestPvpRematch(session, pvpRematch[1]))
+      return
+    }
+
+    const pvpMatch = request.url.match(/^\/api\/pvp\/matches\/([A-Za-z0-9_-]+)$/)
+    if (pvpMatch && request.method === 'GET') {
+      sendJson(response, 200, pvpSnapshot(requirePvpMatchForSession(session, pvpMatch[1]).match))
       return
     }
 
     const dungeonCompletion = request.url.match(/^\/api\/dungeons\/(\d+)\/complete$/)
     if (dungeonCompletion && request.method === 'POST') {
       const payload = await readJson(request)
-      sendJson(
+      sendMutatingResult(
         response,
-        200,
+        database,
+        session.accountId,
         completeDungeon(
           database,
           session.characterId,
@@ -2747,9 +3213,10 @@ export async function handleApiRequest(request, response, next) {
 
     if (request.url === '/api/roguelike/complete' && request.method === 'POST') {
       const payload = await readJson(request)
-      sendJson(
+      sendMutatingResult(
         response,
-        200,
+        database,
+        session.accountId,
         completeRoguelike(database, session.characterId, session.accountId, payload),
       )
       return
@@ -2757,24 +3224,26 @@ export async function handleApiRequest(request, response, next) {
 
     const talentAllocation = request.url.match(/^\/api\/talents\/(\d+)\/allocate$/)
     if (talentAllocation && request.method === 'POST') {
-      sendJson(
+      sendMutatingResult(
         response,
-        200,
+        database,
+        session.accountId,
         allocateTalent(database, session.characterId, Number(talentAllocation[1])),
       )
       return
     }
 
     if (request.url === '/api/talents/reset' && request.method === 'POST') {
-      sendJson(response, 200, resetTalents(database, session.characterId))
+      sendMutatingResult(response, database, session.accountId, resetTalents(database, session.characterId))
       return
     }
 
     const itemEquip = request.url.match(/^\/api\/equipment\/(\d+)\/equip$/)
     if (itemEquip && request.method === 'POST') {
-      sendJson(
+      sendMutatingResult(
         response,
-        200,
+        database,
+        session.accountId,
         equipItem(database, session.characterId, Number(itemEquip[1])),
       )
       return
@@ -2782,9 +3251,10 @@ export async function handleApiRequest(request, response, next) {
 
     const itemDiscard = request.url.match(/^\/api\/equipment\/(\d+)\/discard-extra$/)
     if (itemDiscard && request.method === 'POST') {
-      sendJson(
+      sendMutatingResult(
         response,
-        200,
+        database,
+        session.accountId,
         discardExtraItem(database, session.characterId, Number(itemDiscard[1])),
       )
       return
@@ -2792,9 +3262,10 @@ export async function handleApiRequest(request, response, next) {
 
     const itemBreakdown = request.url.match(/^\/api\/equipment\/(\d+)\/breakdown$/)
     if (itemBreakdown && request.method === 'POST') {
-      sendJson(
+      sendMutatingResult(
         response,
-        200,
+        database,
+        session.accountId,
         breakdownItem(database, session.characterId, Number(itemBreakdown[1])),
       )
       return
@@ -2802,9 +3273,10 @@ export async function handleApiRequest(request, response, next) {
 
     const recipeCraft = request.url.match(/^\/api\/crafting\/recipes\/(\d+)\/craft$/)
     if (recipeCraft && request.method === 'POST') {
-      sendJson(
+      sendMutatingResult(
         response,
-        200,
+        database,
+        session.accountId,
         craftItem(database, session.characterId, Number(recipeCraft[1])),
       )
       return
@@ -2812,9 +3284,10 @@ export async function handleApiRequest(request, response, next) {
 
     const itemUpgrade = request.url.match(/^\/api\/items\/(\d+)\/upgrade$/)
     if (itemUpgrade && request.method === 'POST') {
-      sendJson(
+      sendMutatingResult(
         response,
-        200,
+        database,
+        session.accountId,
         upgradeItem(database, session.characterId, Number(itemUpgrade[1])),
       )
       return
@@ -2823,9 +3296,10 @@ export async function handleApiRequest(request, response, next) {
     const encounterLootRoll = request.url.match(/^\/api\/encounters\/(\d+)\/loot-roll$/)
     if (encounterLootRoll && request.method === 'POST') {
       const payload = await readJson(request)
-      sendJson(
+      sendMutatingResult(
         response,
-        200,
+        database,
+        session.accountId,
         rollEncounterLoot(
           database,
           session.characterId,

src/admin.tsx

@@ -3,9 +3,12 @@ import { createRoot } from 'react-dom/client'
 import './index.css'
 import './App.css'
 import { AdminScreen } from './components/AdminScreen'
+import { InputProvider } from './input'
 
 createRoot(document.getElementById('root')!).render(
   <StrictMode>
-    <AdminScreen onBack={() => window.close()} />
+    <InputProvider>
+      <AdminScreen onBack={() => window.close()} />
+    </InputProvider>
   </StrictMode>,
 )

src/combat/README.md

@@ -0,0 +1,116 @@
+# Combat Modules
+
+Shared combat code is split by responsibility:
+
+- `spellEffects.ts` owns spell target plans and the shared spell-effect applier.
+- `combatEngine.ts` owns repeated per-member tick math: damage reduction, shields, HoTs, poison, debuff timers, and bounce-heal jumps.
+- `combatPresentation.ts` owns UI-facing caps and grouping for combat logs and floating combat text.
+- Screen files provide `SpellEffectProfile` objects for mode-specific numbers.
+- `spellCasting.ts` owns cast readiness and cooldown writes.
+- `pvpSpellCasting.ts` owns the shared PvP cast pipeline: readiness validation, live target validation, effect application, floating-heal emission, and side-state writes.
+- `combatTick.ts` owns small tick helpers such as resource regeneration and cooldown decay.
+- `cpuAi.ts` owns CPU healer timing, mistake rolls, spell choice, and turn execution.
+- `stackCounts.ts` owns stacked buff/upgrade count maps and summaries.
+- `spellModifiers.ts` owns stack-based spell modifiers such as cost, cooldown, extra targets, free casts, and power multipliers.
+- `combatStateTransitions.ts` owns shared combat state writes such as applying a completed cast to party, resource, cooldown, and free-cast fields.
+- `stadiumLifecycle.ts` owns pure Stadium round/shop decisions: round outcome resolution, shop point awards, and CPU purchase selection.
+- `pvpRoguelikeLifecycle.ts` owns pure PvP roguelike lifecycle decisions: live snapshot outcomes, combat tick outcomes, upgrade-complete checks, and next-stage progression.
+- `pvpRoguelikeUpgrades.ts` owns PvP roguelike upgrade application, revive cleanup, party recovery, resource restore, cooldown reset, and next enemy health setup.
+- `pvpRoguelikeMatchSetup.ts` owns PvP roguelike match-start side creation, first segment setup, live opponent naming, and shared reset defaults.
+- `stadiumMatchSetup.ts` owns Stadium starter side creation, local/live match setup, live opponent naming, and shared reset defaults.
+- `pveRoguelikeRunSetup.ts` owns PvE combat-state creation and roguelike run reset defaults.
+- `rewardSummaries.ts` owns reward summary initialization, unlocked ability merging, XP/level/talent accumulation, and PvP roguelike boss loot accumulation.
+- `dualScreenPayloads.ts` owns dual-screen combat payload construction and mode-specific status normalization.
+- `pvpLiveLifecycle.ts` owns live PvP polling, local progress publication, and rematch request state.
+
+## SpellEffectProfile
+
+Use a profile when spell behavior is the same shape but different by mode.
+
+Examples:
+
+- PvE stores Renew-style effects in `hotEffects`; PvP modes mostly use `hotTicks`.
+- Stadium applies dampening through profile power callbacks.
+- PvE cleanse intentionally does not emit floating heal text; PvP modes do.
+- Shield ratios such as Radiance `0.3`, Mend `0.5`, and Stadium group shield `0.5` belong in profiles.
+
+When adding a spell rule, prefer adding a named profile field or callback instead of branching in screen components.
+
+## StackCounts
+
+Use `createStackCounts` once per party state, upgrade list, or cast snapshot when repeated math needs stack totals. Then pass the map to spell cost, cooldown, target, and effect helpers. This keeps stacked upgrade behavior consistent and avoids repeated `filter`/scan work in combat render and cast paths.
+
+## Spell Modifiers
+
+Use `spellModifiers.ts` for stacked upgrade math instead of open-coded exponent formulas in screen components. Screens still own mode-specific IDs, but shared helpers own the math:
+
+- slot cost/cooldown reducers default to `0.75 ** stacks`.
+- opponent slot penalties default to `1.25 ** stacks`.
+- power boosts default to `1.25 ** stacks`.
+- free-cast checks use a named stack modifier and the mode's existing `freeCastReady` rules.
+
+## State Transitions
+
+Use `applyCastStateUpdate` after a spell effect profile returns the next party. Screens can still prepare mode-specific cooldown adjustments before the spell cooldown lands, but the final resource spend, cooldown write, party replacement, and free-cast progress should go through the transition helper.
+
+## PvP Spell Casting
+
+Use `applyPvpSpellCast` after a PvP screen builds its mode-specific target plan and `SpellEffectProfile`. Keep balance inputs such as roguelike effects, Stadium dampening, shop buffs, cooldown tweaks, and free-cast flags in the screen; let the helper own the repeated validate/apply/emit/write pipeline.
+
+## CPU AI
+
+Use `runCpuHealTurn` for PvP CPU turns. Screens still own mode-specific behavior tables and apply-spell adapters, while `cpuAi.ts` owns timing checks, mistake rolls, action selection, and invoking the selected spell.
+
+## Stadium Lifecycle
+
+Use `resolveStadiumRound` for win/loss/tie decisions instead of open-coding score checks in `PvpStadiumScreen`. Use `stadiumShopPointsForOutcome` and `chooseStadiumCpuPurchases` for shop setup so player and CPU point rules stay in one place.
+
+## PvP Roguelike Lifecycle
+
+Use `resolvePvpRoguelikeCombatOutcome` after each tick advances both sides. Use `resolvePvpRoguelikeLiveSnapshot` when a live match snapshot arrives. Use `nextPvpRoguelikeStage` after upgrade choices to decide whether to continue, advance stage, or complete the match. Components should execute the returned intent with React setters instead of duplicating the decision tree.
+
+## PvP Roguelike Upgrades
+
+Use `applyPvpRoguelikeUpgradeChoice` to apply selected buffs, incoming debuffs, and revive-buff debuff cleanup. Use `preparePvpRoguelikeNextEncounter` after progression chooses the next encounter so recovery, 25% resource restore, cooldown reset, and enemy health setup stay consistent between live and CPU matches.
+
+## PvP Roguelike Match Setup
+
+Use `createPvpRoguelikeMatchStart` for local/CPU starts and `createPvpRoguelikeLiveMatchStart` for live matches. These helpers build starter sides, set first encounter health, name live opponents, and provide reset defaults so rematch, checkpoint start, and queue fallback do not duplicate initial state construction.
+
+## Stadium Match Setup
+
+Use `createStadiumMatchStart` for queue/CPU starts, `createStadiumLiveMatchStart` for live matches, and `createStadiumStarterSide` for advancing to the next round. These helpers reset party state, carry purchased buffs and round wins where needed, and provide shared reset defaults for queue, rematch, and live match starts.
+
+## PvE Run Setup
+
+Use `createPveCombatState` for initial single-player combat state and `createPveRoguelikeRunStart` when resetting a run. This keeps party cloning, resource setup, enemy health, cooldown/free-cast reset, and UI reset defaults in one place.
+
+## Reward Summaries
+
+Use `createEmptyRewardSummary`, `createEmptyPvpRunSummary`, `mergeDungeonRewardSummary`, and `mergePvpRunRewardSummary` instead of open-coding reward accumulation in screens. This keeps XP, level, talent points, unlocked abilities, and boss loot merge behavior consistent.
+
+Presentation components for these summaries live in `components/RewardPanels.tsx`: use `RewardXpSummary`, `BonusItemReward`, `LootRollList`, and `PvpRunLootList` instead of duplicating reward JSX in result screens.
+
+## Dual-Screen Payloads
+
+Use the builders in `dualScreenPayloads.ts` when publishing combat state to the secondary display. Keep render-derived arrays such as stripped floating text and opponent summaries memoized before calling the builder, then let the builder normalize mode status values like queueing, countdown, and Stadium shop into the bottom-screen status model.
+
+## Live PvP Sync
+
+Use `usePvpLiveMatchSync` for live match polling and rematch controls. Screens should provide only mode-specific progress payloads and opponent snapshot rules; the hook owns publish/poll intervals, rematch pending state, expiry, and error messages.
+
+## Timers
+
+Use `useRoundCountdown` for PvP round starts and `useDeadlineTimer` for mode deadlines such as PvP roguelike upgrade choice and Stadium shop. Keep countdown expiry behavior mode-specific, but avoid open-coded interval refs and `Date.now()` loops in screens.
+
+## Floating Combat Text
+
+Use `useFloatingCombatText` for single-sided combat screens and `useSidedFloatingCombatText` for PvP screens. The hooks own IDs, expiry cleanup, member grouping, side filtering, and dual-screen text stripping so screens only emit heal events.
+
+## Party Targeting
+
+Use `usePartyTargeting` for combat-screen navigation wrappers. Keep raw grid/direct selection rules in `combat/targeting.ts`; the hook owns relative, directional, and direct target callbacks around the current party ref, selected-id ref, grid columns, living-target flags, and target group.
+
+## Render Allocation
+
+Keep repeated combat-render derivations memoized near their source state: active input bindings, stack summaries, visible shop choices, enemy health segments, and stripped floating text payloads. Avoid calling summary helpers or `bindings[lastDevice]` repeatedly inside JSX loops.

src/combat/combatEngine.ts

@@ -0,0 +1,170 @@
+import type { PartyMember } from '../game'
+import {
+  clamp,
+  healAmount,
+  memberHotEffects,
+  tickHotEffects,
+} from './rules'
+
+export type MemberTickInput = {
+  member: PartyMember
+  party: PartyMember[]
+  damage: number
+  hotHealing: number
+  hotTicks: 'effects' | 'ticks'
+  healingMultiplier?: number
+  damageReductionMultiplier?: number
+  damageReductionRounding?: 'round' | 'ceil'
+  shieldedDamageMultiplier?: number
+  applyDebuff?: {
+    label: string
+    ticks: number
+  }
+  applyPoisonStacks?: boolean
+  poisonDamage?: (stacks: number) => number
+  applyMaxHealthPenaltyTicks?: number
+  applyHealingReductionTicks?: number
+  decrementDamageReduction?: boolean
+  useBounceHeals?: boolean
+  jumpTarget?: () => PartyMember | undefined
+}
+
+export type MemberTickResult = {
+  member: PartyMember
+  floatingHeal: number
+  jumpedBounceHeals: Array<{
+    targetId: string
+    heal: NonNullable<PartyMember['bounceHeals']>[number]
+  }>
+}
+
+/**
+ * Applies one combat tick to a party member. Screen-level engines still decide
+ * who is targeted and when fights end; this helper owns repeated health math:
+ * damage reduction, shields, HoT healing, debuff timers, poison, and bounce heals.
+ */
+export function advanceMemberTick({
+  member,
+  party,
+  damage,
+  hotHealing,
+  hotTicks,
+  healingMultiplier = 1,
+  damageReductionMultiplier = 0.5,
+  damageReductionRounding = 'round',
+  shieldedDamageMultiplier,
+  applyDebuff,
+  applyPoisonStacks = false,
+  poisonDamage = () => 0,
+  applyMaxHealthPenaltyTicks,
+  applyHealingReductionTicks,
+  decrementDamageReduction = false,
+  useBounceHeals = false,
+  jumpTarget,
+}: MemberTickInput): MemberTickResult {
+  if (member.health <= 0) {
+    return { member, floatingHeal: 0, jumpedBounceHeals: [] }
+  }
+
+  let nextDamage = damage
+  const nextPoisonStacks = applyPoisonStacks
+    ? Math.max(1, (member.poisonStacks ?? 0) + 1)
+    : member.poisonStacks ?? 0
+  if (nextPoisonStacks > 0) nextDamage += poisonDamage(nextPoisonStacks)
+
+  if ((member.damageReductionTicks ?? 0) > 0) {
+    const reducedDamage = nextDamage * damageReductionMultiplier
+    nextDamage = damageReductionRounding === 'ceil'
+      ? Math.ceil(reducedDamage)
+      : Math.round(reducedDamage)
+  }
+  if (member.shield > 0 && shieldedDamageMultiplier !== undefined) {
+    nextDamage = Math.round(nextDamage * shieldedDamageMultiplier)
+  }
+
+  const absorbed = Math.min(member.shield, nextDamage)
+  const hotEffects = hotTicks === 'effects' ? memberHotEffects(member) : []
+  let healing = hotTicks === 'effects'
+    ? hotEffects.reduce((total, effect) => total + healAmount(member, effect.power, healingMultiplier), 0)
+    : member.hotTicks > 0 ? healAmount(member, hotHealing, healingMultiplier) : 0
+
+  let nextBounceHeals = [...(member.bounceHeals ?? [])]
+  const jumpedBounceHeals: MemberTickResult['jumpedBounceHeals'] = []
+  if (useBounceHeals && nextDamage > 0 && nextBounceHeals.length > 0) {
+    nextBounceHeals = nextBounceHeals.flatMap((effect) => {
+      healing += healAmount(member, effect.power, healingMultiplier)
+      const nextCharges = effect.charges - 1
+      if (nextCharges <= 0) return []
+      const target = jumpTarget?.() ?? party.find((candidate) => candidate.health > 0 && candidate.id !== member.id) ?? member
+      jumpedBounceHeals.push({
+        targetId: target.id,
+        heal: { ...effect, charges: nextCharges },
+      })
+      return []
+    })
+  }
+
+  const nextMaxHealthPenaltyTicks = applyMaxHealthPenaltyTicks !== undefined
+    ? applyMaxHealthPenaltyTicks
+    : Math.max(0, (member.maxHealthPenaltyTicks ?? 0) - 1)
+  const nextHealingReductionTicks = applyHealingReductionTicks !== undefined
+    ? applyHealingReductionTicks
+    : Math.max(0, (member.healingReductionTicks ?? 0) - 1)
+  const nextDebuffTicks = applyDebuff
+    ? applyDebuff.ticks
+    : Math.max(0, (member.debuffTicks ?? 0) - 1)
+  const nextEffectiveMaxHealth = Math.max(1, Math.round(
+    member.maxHealth * (nextMaxHealthPenaltyTicks > 0 ? 0.75 : 1),
+  ))
+
+  return {
+    member: {
+      ...member,
+      health: clamp(
+        clamp(member.health + healing, 0, nextEffectiveMaxHealth) - nextDamage + absorbed,
+        0,
+        nextEffectiveMaxHealth,
+      ),
+      shield: Math.max(0, member.shield - nextDamage),
+      hotTicks: hotTicks === 'effects' ? 0 : Math.max(0, member.hotTicks - 1),
+      hotEffects: hotTicks === 'effects' ? tickHotEffects(hotEffects) : member.hotEffects,
+      bounceHeals: useBounceHeals ? nextBounceHeals : member.bounceHeals,
+      damageReductionTicks: decrementDamageReduction
+        ? Math.max(0, (member.damageReductionTicks ?? 0) - 1)
+        : member.damageReductionTicks,
+      debuff: nextDebuffTicks > 0
+        ? applyDebuff?.label ?? member.debuff
+        : undefined,
+      debuffTicks: nextDebuffTicks > 0 ? nextDebuffTicks : undefined,
+      poisonStacks: nextPoisonStacks,
+      maxHealthPenaltyTicks: nextMaxHealthPenaltyTicks,
+      healingReductionTicks: nextHealingReductionTicks,
+    },
+    floatingHeal: healing,
+    jumpedBounceHeals,
+  }
+}
+
+export function attachJumpedBounceHeals(
+  party: PartyMember[],
+  jumpedBounceHeals: MemberTickResult['jumpedBounceHeals'],
+) {
+  if (jumpedBounceHeals.length === 0) return party
+  const jumpedByTarget = new Map<string, NonNullable<PartyMember['bounceHeals']>>()
+  for (const jump of jumpedBounceHeals) {
+    const current = jumpedByTarget.get(jump.targetId)
+    if (current) current.push(jump.heal)
+    else jumpedByTarget.set(jump.targetId, [jump.heal])
+  }
+  return party.map((member) => {
+    const jumped = jumpedByTarget.get(member.id)
+    if (!jumped || jumped.length === 0) return member
+    return {
+      ...member,
+      bounceHeals: [
+        ...(member.bounceHeals ?? []),
+        ...jumped,
+      ],
+    }
+  })
+}

src/combat/combatPresentation.ts

@@ -0,0 +1,41 @@
+import type { CombatLogEntry } from '../game'
+
+export type BasicFloatingCombatText = {
+  id: number
+  memberId: string
+  value: number
+}
+
+export const DEFAULT_COMBAT_LOG_LIMIT = 60
+export const STADIUM_COMBAT_LOG_LIMIT = 70
+export const DEFAULT_FLOATING_TEXT_LIMIT = 48
+
+export function appendCombatLog(
+  current: CombatLogEntry[],
+  entry: CombatLogEntry,
+  limit = DEFAULT_COMBAT_LOG_LIMIT,
+) {
+  return [entry, ...current].slice(0, limit)
+}
+
+export function appendFloatingText<T extends BasicFloatingCombatText>(
+  current: T[],
+  entry: T,
+  limit = DEFAULT_FLOATING_TEXT_LIMIT,
+) {
+  return [...current, entry].slice(-limit)
+}
+
+export function groupFloatingTextsByMember<T extends BasicFloatingCombatText>(texts: T[]) {
+  const groups = new Map<string, T[]>()
+  texts.forEach((entry) => {
+    const current = groups.get(entry.memberId)
+    if (current) current.push(entry)
+    else groups.set(entry.memberId, [entry])
+  })
+  return groups
+}
+
+export function stripFloatingTextSide<T extends BasicFloatingCombatText>(texts: T[]): BasicFloatingCombatText[] {
+  return texts.map(({ id, memberId, value }) => ({ id, memberId, value }))
+}

src/combat/combatStateTransitions.ts

@@ -0,0 +1,50 @@
+import type { PartyMember, Spell } from '../game'
+import { putSpellOnCooldown } from './spellCasting'
+import { advanceFreeCastProgress } from './spellEffects'
+
+export type CastStateFields<TParty extends readonly PartyMember[] = PartyMember[]> = {
+  party: TParty
+  resource: number
+  cooldowns: Record<string, number>
+  castsTowardFree: number
+  freeCastReady: boolean
+}
+
+export function applyCastStateUpdate<
+  TParty extends readonly PartyMember[],
+  TState extends CastStateFields<TParty>,
+>({
+  current,
+  party,
+  spell,
+  resourceCost,
+  cooldownMultiplier = 1,
+  cooldowns = current.cooldowns,
+  freeCast = { enabled: false, wasReady: false },
+}: {
+  current: TState
+  party: TParty
+  spell: Spell
+  resourceCost: number
+  cooldownMultiplier?: number
+  cooldowns?: Record<string, number>
+  freeCast?: {
+    enabled: boolean
+    wasReady: boolean
+  }
+}) {
+  const freeCastProgress = advanceFreeCastProgress({
+    enabled: freeCast.enabled,
+    wasReady: freeCast.wasReady,
+    castsTowardFree: current.castsTowardFree,
+  })
+
+  return {
+    ...current,
+    party,
+    resource: current.resource - resourceCost,
+    cooldowns: putSpellOnCooldown(cooldowns, spell, cooldownMultiplier),
+    castsTowardFree: freeCastProgress.castsTowardFree,
+    freeCastReady: freeCastProgress.freeCastReady,
+  }
+}

src/combat/combatTick.ts

@@ -0,0 +1,17 @@
+import { clamp } from './rules'
+
+export function tickSeconds(tickMs: number) {
+  return tickMs / 1000
+}
+
+export function advanceCooldowns(cooldowns: Record<string, number>, elapsedSeconds: number) {
+  const nextCooldowns: Record<string, number> = {}
+  for (const id in cooldowns) {
+    nextCooldowns[id] = Math.max(0, cooldowns[id] - elapsedSeconds)
+  }
+  return nextCooldowns
+}
+
+export function regenerateResource(resource: number, amount: number, maxResource: number) {
+  return clamp(resource + amount, 0, maxResource)
+}

src/combat/cpuAi.ts

@@ -0,0 +1,112 @@
+import type { PartyMember, Spell } from '../game'
+import { effectiveMaxHealth } from './rules'
+
+export type CpuHealBehavior = {
+  directHealThreshold: number
+  groupHealThreshold: number
+  hotThreshold: number
+  shieldThreshold: number
+}
+
+export type CpuTurnBehavior = CpuHealBehavior & {
+  actionEveryTicks: number
+  mistakeChance: number
+}
+
+export function shouldCpuAct({
+  elapsedTicks,
+  behavior,
+}: {
+  elapsedTicks: number
+  behavior: CpuTurnBehavior
+}) {
+  return elapsedTicks % behavior.actionEveryTicks === 0 && Math.random() >= behavior.mistakeChance
+}
+
+export function chooseCpuHealActions({
+  party,
+  spells,
+  behavior,
+  preferSlots = false,
+}: {
+  party: PartyMember[]
+  spells: Spell[]
+  behavior: CpuHealBehavior
+  preferSlots?: boolean
+}) {
+  let livingCount = 0
+  let healthRatioTotal = 0
+  let lowest: PartyMember | null = null
+  let tank: PartyMember | null = null
+  let cleanseTarget: PartyMember | null = null
+  let renewTarget: PartyMember | null = null
+  let shieldTarget: PartyMember | null = null
+  let woundedCount = 0
+
+  for (const member of party) {
+    if (member.health <= 0) continue
+    livingCount += 1
+    const ratio = member.health / effectiveMaxHealth(member)
+    healthRatioTotal += ratio
+    if (!lowest || ratio < lowest.health / effectiveMaxHealth(lowest)) lowest = member
+    if (!tank && member.role === 'Tank') tank = member
+    if (!cleanseTarget && (member.debuff || (member.poisonStacks ?? 0) > 0)) cleanseTarget = member
+    if (!renewTarget && member.hotTicks <= 1 && ratio < behavior.hotThreshold) renewTarget = member
+    if (!shieldTarget && member.role === 'Tank' && member.shield <= 5 && ratio < behavior.shieldThreshold) {
+      shieldTarget = member
+    }
+    if (ratio < behavior.directHealThreshold) woundedCount += 1
+  }
+
+  if (!lowest || livingCount === 0) return []
+  const averageHealth = healthRatioTotal / livingCount
+  const spellByKind = (kind: Spell['kind']) => spells.find((candidate) => candidate.kind === kind)
+  const spellBySlot = (slot: string) => spells.find((candidate) => candidate.key === slot)
+  const direct = preferSlots ? spellBySlot('1') : spellByKind('direct')
+  const hot = preferSlots ? spellBySlot('2') : spellByKind('hot')
+  const group = preferSlots ? spellBySlot('3') : spellByKind('group')
+  const shield = preferSlots ? spellBySlot('4') : spellByKind('shield')
+  const cleanse = preferSlots ? spellBySlot('5') : spellByKind('cleanse')
+  const ordered: Array<{ spell: Spell | undefined; targetId: string | null }> = [
+    { spell: cleanseTarget ? cleanse : undefined, targetId: cleanseTarget?.id ?? null },
+    { spell: averageHealth < behavior.groupHealThreshold ? group : undefined, targetId: lowest.id },
+    { spell: shieldTarget ? shield : undefined, targetId: shieldTarget?.id ?? null },
+    { spell: woundedCount > 0 ? direct : undefined, targetId: lowest.id },
+    { spell: renewTarget ? hot : undefined, targetId: renewTarget?.id ?? null },
+    { spell: tank ? direct : undefined, targetId: tank?.id ?? null },
+  ]
+
+  return ordered
+    .filter((action): action is { spell: Spell; targetId: string } => Boolean(action.spell && action.targetId))
+}
+
+export function chooseCpuHealAction(options: Parameters<typeof chooseCpuHealActions>[0]) {
+  return chooseCpuHealActions(options)[0] ?? null
+}
+
+export function runCpuHealTurn<TSide>({
+  side,
+  elapsedTicks,
+  spells,
+  behavior,
+  preferSlots = false,
+  applySpell,
+}: {
+  side: TSide & { party: PartyMember[] }
+  elapsedTicks: number
+  spells: Spell[]
+  behavior: CpuTurnBehavior
+  preferSlots?: boolean
+  applySpell: (side: TSide, spell: Spell, targetId: string) => void
+}) {
+  if (!shouldCpuAct({ elapsedTicks, behavior })) return false
+  const action = chooseCpuHealAction({
+    party: side.party,
+    spells,
+    behavior,
+    preferSlots,
+  })
+  if (!action) return false
+  applySpell(side, action.spell, action.targetId)
+  return true
+}

src/combat/dualScreenPayloads.ts

@@ -0,0 +1,35 @@
+import type { DualScreenCombatState } from '../dualScreen'
+
+export function buildCombatDualScreenState(state: DualScreenCombatState): DualScreenCombatState {
+  return state
+}
+
+export function buildPvpRoguelikeDualScreenState({
+  status,
+  ...state
+}: Omit<DualScreenCombatState, 'status'> & {
+  status: DualScreenCombatState['status'] | 'queueing' | 'round-countdown'
+}): DualScreenCombatState {
+  return {
+    ...state,
+    status: status === 'queueing' || status === 'round-countdown' ? 'playing' : status,
+  }
+}
+
+export function buildStadiumDualScreenState({
+  status,
+  ...state
+}: Omit<DualScreenCombatState, 'status' | 'targetGroup' | 'speedMultiplier'> & {
+  status: DualScreenCombatState['status'] | 'queueing' | 'round-countdown' | 'shop'
+}): DualScreenCombatState {
+  return {
+    ...state,
+    status: status === 'queueing' || status === 'round-countdown'
+      ? 'playing'
+      : status === 'shop'
+        ? 'upgrade-choice'
+        : status,
+    targetGroup: 0,
+    speedMultiplier: 1,
+  }
+}

src/combat/encounters.ts

@@ -0,0 +1,71 @@
+import type { DungeonEncounter } from '../profile'
+import { chooseRandom } from './rules'
+
+export function encounterThreat(encounter: DungeonEncounter) {
+  return (
+    encounter.maxHealth
+    + encounter.damage * 18
+    + encounter.tankDamage * 10
+    + encounter.partyDamage * 18
+  )
+}
+
+export function buildRoguelikeSegment<TMechanic extends string, TExtra extends object = object>({
+  pool,
+  stage,
+  mechanics,
+  trashCandidateCount,
+  bossCandidateCount,
+  healthScale,
+  damageScale,
+  partyDamageScale,
+  idBase,
+  bossDescription,
+  bossName,
+  fallbackBossFirst = false,
+  extraFields,
+}: {
+  pool: DungeonEncounter[]
+  stage: number
+  mechanics: TMechanic[]
+  trashCandidateCount: (trashCount: number) => number
+  bossCandidateCount: (bossCount: number) => number
+  healthScale: number
+  damageScale: number
+  partyDamageScale: number
+  idBase: number
+  bossDescription: (mechanics: TMechanic[]) => string
+  bossName?: (encounter: DungeonEncounter) => string
+  fallbackBossFirst?: boolean
+  extraFields?: (encounter: DungeonEncounter, isBoss: boolean, mechanics: TMechanic[]) => TExtra
+}) {
+  const trashPool = [...pool.filter((encounter) => !encounter.isBoss)]
+    .sort((left, right) => encounterThreat(left) - encounterThreat(right))
+  const bossPool = [...pool.filter((encounter) => encounter.isBoss)]
+    .sort((left, right) => encounterThreat(left) - encounterThreat(right))
+  const selectedTrash = chooseRandom(trashPool.slice(0, trashCandidateCount(trashPool.length)), 2)
+  const selectedBoss = chooseRandom(bossPool.slice(0, bossCandidateCount(bossPool.length)), 1)[0]
+    ?? (fallbackBossFirst ? bossPool[0] : trashPool[0])
+    ?? trashPool[0]
+    ?? pool[0]
+  const selectedMechanics = mechanics
+
+  return [...selectedTrash, selectedBoss].map((encounter, index) => {
+    const isBoss = index === 2
+    return {
+      ...encounter,
+      id: idBase + stage * 10 + index,
+      sequence: (stage - 1) * 3 + index + 1,
+      isBoss,
+      encounterType: isBoss ? 'boss' : 'trash',
+      enemyName: isBoss ? (bossName?.(encounter) ?? `${encounter.enemyName} ${stage}`) : encounter.enemyName,
+      description: isBoss ? bossDescription(selectedMechanics) : encounter.description,
+      maxHealth: Math.round(encounter.maxHealth * healthScale),
+      damage: Math.round(encounter.damage * damageScale),
+      tankDamage: Math.round(encounter.tankDamage * damageScale),
+      partyDamage: Math.round(encounter.partyDamage * partyDamageScale),
+      lootTables: [],
+      ...(extraFields?.(encounter, isBoss, selectedMechanics) ?? {} as TExtra),
+    }
+  })
+}

src/combat/pveRoguelikeRunSetup.ts

@@ -0,0 +1,74 @@
+import type { PartyMember } from '../game'
+
+export type PveCombatState = {
+  party: PartyMember[]
+  resource: number
+  enemyHealth: number
+  cooldowns: Record<string, number>
+  elapsedTicks: number
+  castsTowardFree: number
+  freeCastReady: boolean
+}
+
+export function createPveCombatState<TEncounter extends { maxHealth: number }>({
+  partyTemplate,
+  maxResource,
+  encounter,
+  enemyCount,
+}: {
+  partyTemplate: readonly PartyMember[]
+  maxResource: number
+  encounter: TEncounter
+  enemyCount: number
+}): PveCombatState {
+  return {
+    party: partyTemplate.map((member) => ({ ...member })),
+    resource: maxResource,
+    enemyHealth: encounter.maxHealth * enemyCount,
+    cooldowns: {},
+    elapsedTicks: 0,
+    castsTowardFree: 0,
+    freeCastReady: false,
+  }
+}
+
+export function createPveRoguelikeRunStart<TEncounter extends { maxHealth: number }>({
+  partyTemplate,
+  maxResource,
+  encounters,
+  initialEncounterIndex,
+  enemyCount,
+}: {
+  partyTemplate: readonly PartyMember[]
+  maxResource: number
+  encounters: readonly TEncounter[]
+  initialEncounterIndex: number
+  enemyCount: number
+}) {
+  return {
+    combatState: createPveCombatState({
+      partyTemplate,
+      maxResource,
+      encounter: encounters[initialEncounterIndex],
+      enemyCount,
+    }),
+    defaults: {
+      roguelikeStage: 1,
+      selectedId: partyTemplate[0].id,
+      encounterIndex: initialEncounterIndex,
+      status: 'playing' as const,
+      paused: false,
+      targetGroup: 0 as const,
+      reward: null,
+      rewardError: '',
+      lootRolls: [],
+      showEndLog: false,
+      floatingTexts: [],
+      roguelikeUpgrades: [],
+      upgradeChoices: [],
+      marathonBossesDefeated: 0,
+      resourceSpent: 0,
+      log: { text: 'A new run begins.', tone: 'system' as const },
+    },
+  }
+}

src/combat/pvpRoguelikeLifecycle.ts

@@ -0,0 +1,153 @@
+export type PvpRoguelikeStatus = 'queueing' | 'round-countdown' | 'playing' | 'upgrade-choice' | 'won' | 'lost'
+export type PvpRoguelikeLogTone = 'system' | 'heal' | 'danger' | 'loot'
+
+export type PvpRoguelikeCombatOutcome =
+  | {
+    type: 'none'
+  }
+  | {
+    type: 'lost'
+    status: 'lost'
+    log: { text: string; tone: PvpRoguelikeLogTone }
+  }
+  | {
+    type: 'won'
+    status: 'won'
+    markOpponentDefeated: boolean
+    log: { text: string; tone: PvpRoguelikeLogTone }
+  }
+  | {
+    type: 'upgrade-choice'
+    status: 'upgrade-choice'
+    log: { text: string; tone: PvpRoguelikeLogTone }
+  }
+
+export function resolvePvpRoguelikeCombatOutcome({
+  playerAlive,
+  opponentAlive,
+  playerCleared,
+  encounterIsBoss,
+  encounterName,
+  opponentDefeated,
+  liveMatchActive,
+  opponentLabel,
+}: {
+  playerAlive: boolean
+  opponentAlive: boolean
+  playerCleared: boolean
+  encounterIsBoss: boolean
+  encounterName: string
+  opponentDefeated: boolean
+  liveMatchActive: boolean
+  opponentLabel: string
+}): PvpRoguelikeCombatOutcome {
+  if (!playerAlive) {
+    return {
+      type: 'lost',
+      status: 'lost',
+      log: { text: 'Your party fell first.', tone: 'danger' },
+    }
+  }
+  if (!liveMatchActive && !opponentAlive && !opponentDefeated) {
+    return {
+      type: 'won',
+      status: 'won',
+      markOpponentDefeated: true,
+      log: { text: `${opponentLabel} fell. Match complete.`, tone: 'loot' },
+    }
+  }
+  if (!playerCleared) return { type: 'none' }
+  if (encounterIsBoss && opponentDefeated) {
+    return {
+      type: 'won',
+      status: 'won',
+      markOpponentDefeated: false,
+      log: { text: `${opponentLabel} defeated. Match complete.`, tone: 'loot' },
+    }
+  }
+  return {
+    type: 'upgrade-choice',
+    status: 'upgrade-choice',
+    log: { text: `${encounterName} cleared. Choose your next edge.`, tone: 'loot' },
+  }
+}
+
+export function resolvePvpRoguelikeLiveSnapshot({
+  currentStatus,
+  opponentStatus,
+  opponentAlive,
+  alreadyLoggedOpponentDone,
+  opponentName,
+}: {
+  currentStatus: PvpRoguelikeStatus
+  opponentStatus?: string
+  opponentAlive?: boolean
+  alreadyLoggedOpponentDone: boolean
+  opponentName: string
+}) {
+  if (currentStatus === 'won' || currentStatus === 'lost') return { type: 'none' as const }
+  if ((opponentStatus === 'lost' || opponentAlive === false) && !alreadyLoggedOpponentDone) {
+    return {
+      type: 'won' as const,
+      status: 'won' as const,
+      markOpponentDefeated: true,
+      log: { text: `${opponentName} fell. Match complete.`, tone: 'loot' as const },
+    }
+  }
+  if (opponentStatus === 'won') {
+    return {
+      type: 'lost' as const,
+      status: 'lost' as const,
+      log: { text: `${opponentName} finished first.`, tone: 'danger' as const },
+    }
+  }
+  return { type: 'none' as const }
+}
+
+export function resolvePvpRoguelikeUpgradeCompletion({
+  clearedBoss,
+  opponentDefeated,
+  opponentLabel,
+}: {
+  clearedBoss: boolean
+  opponentDefeated: boolean
+  opponentLabel: string
+}) {
+  if (!clearedBoss || !opponentDefeated) return { type: 'none' as const }
+  return {
+    type: 'won' as const,
+    status: 'won' as const,
+    log: { text: `${opponentLabel} defeated. Match complete.`, tone: 'loot' as const },
+  }
+}
+
+export function nextPvpRoguelikeStage<TEncounter>({
+  clearedBoss,
+  stage,
+  encounterIndex,
+  encounters,
+  nextSegment,
+}: {
+  clearedBoss: boolean
+  stage: number
+  encounterIndex: number
+  encounters: readonly TEncounter[]
+  nextSegment: readonly TEncounter[]
+}) {
+  const nextStage = clearedBoss ? stage + 1 : stage
+  const nextEncounter = clearedBoss ? nextSegment[0] : encounters[encounterIndex + 1]
+  if (!nextEncounter) {
+    return {
+      type: 'complete' as const,
+      status: 'won' as const,
+      log: { text: 'No further encounters remain.', tone: 'loot' as const },
+    }
+  }
+  return {
+    type: 'next' as const,
+    nextStage,
+    nextEncounter,
+    nextEncounterIndex: encounterIndex + 1,
+    appendSegment: clearedBoss,
+  }
+}

src/combat/pvpRoguelikeMatchSetup.ts

@@ -0,0 +1,140 @@
+import type { PartyMember } from '../game'
+import type { PvpMatchSnapshot, PvpMatchSide } from '../pvpRoguelike'
+
+export type PvpRoguelikeSetupSide<TBuff extends string, TDebuff extends string> = {
+  party: PartyMember[]
+  resource: number
+  cooldowns: Record<string, number>
+  enemyHealth: number
+  buffs: TBuff[]
+  debuffs: TDebuff[]
+  castsTowardFree: number
+  freeCastReady: boolean
+}
+
+export type PvpRoguelikeLiveMatchSetup = {
+  id: string
+  side: PvpMatchSide
+  opponentSide: PvpMatchSide
+  opponentName: string
+  opponentClassName: string
+}
+
+export function createPvpRoguelikeStarterSide<TBuff extends string, TDebuff extends string>(
+  partyTemplate: readonly PartyMember[],
+  maxResource: number,
+): PvpRoguelikeSetupSide<TBuff, TDebuff> {
+  return {
+    party: partyTemplate.map((member) => ({ ...member })),
+    resource: maxResource,
+    cooldowns: {},
+    enemyHealth: 0,
+    buffs: [],
+    debuffs: [],
+    castsTowardFree: 0,
+    freeCastReady: false,
+  }
+}
+
+export function createPvpRoguelikeMatchStart<
+  TBuff extends string,
+  TDebuff extends string,
+  TEncounter extends { maxHealth: number },
+>({
+  startStage,
+  encounterPool,
+  buildSegment,
+  partyTemplate,
+  opponentPartyTemplate,
+  maxResource,
+  upgradeChoiceSeconds,
+}: {
+  startStage: number
+  encounterPool: readonly TEncounter[]
+  buildSegment: (pool: readonly TEncounter[], stage: number) => TEncounter[]
+  partyTemplate: readonly PartyMember[]
+  opponentPartyTemplate: readonly PartyMember[]
+  maxResource: number
+  upgradeChoiceSeconds: number
+}) {
+  const firstSegment = buildSegment(encounterPool, startStage)
+  const firstEncounter = firstSegment[0]
+  const playerSide = createPvpRoguelikeStarterSide<TBuff, TDebuff>(partyTemplate, maxResource)
+  const opponentSide = createPvpRoguelikeStarterSide<TBuff, TDebuff>(opponentPartyTemplate, maxResource)
+  playerSide.enemyHealth = firstEncounter.maxHealth
+  opponentSide.enemyHealth = firstEncounter.maxHealth
+
+  return {
+    startStage,
+    firstSegment,
+    firstEncounter,
+    playerSide,
+    opponentSide,
+    defaults: {
+      encounterIndex: 0,
+      elapsedTicks: 0,
+      encountersCleared: 0,
+      paused: false,
+      targetGroup: 0 as const,
+      upgradeTimeLeft: upgradeChoiceSeconds,
+      liveUpgradePending: false,
+      rewardError: '',
+      showEndLog: false,
+    },
+  }
+}
+
+export function createPvpRoguelikeLiveMatchStart<
+  TBuff extends string,
+  TDebuff extends string,
+  TEncounter extends { maxHealth: number },
+>({
+  match,
+  side,
+  encounterPool,
+  buildSegment,
+  partyTemplate,
+  opponentPartyTemplate,
+  maxResource,
+  upgradeChoiceSeconds,
+  message,
+}: {
+  match: PvpMatchSnapshot<PvpRoguelikeSetupSide<TBuff, TDebuff>>
+  side: PvpMatchSide
+  encounterPool: readonly TEncounter[]
+  buildSegment: (pool: readonly TEncounter[], stage: number) => TEncounter[]
+  partyTemplate: readonly PartyMember[]
+  opponentPartyTemplate: readonly PartyMember[]
+  maxResource: number
+  upgradeChoiceSeconds: number
+  message?: string
+}) {
+  const opponentSideId: PvpMatchSide = side === 'a' ? 'b' : 'a'
+  const opponent = match.players[opponentSideId]
+  const opponentTemplate = opponentPartyTemplate.map((member) => ({
+    ...member,
+    name: member.id === 'mira' ? opponent.characterName : member.name,
+  }))
+  const setup = createPvpRoguelikeMatchStart<TBuff, TDebuff, TEncounter>({
+    startStage: match.startStage,
+    encounterPool,
+    buildSegment,
+    partyTemplate,
+    opponentPartyTemplate: opponentTemplate,
+    maxResource,
+    upgradeChoiceSeconds,
+  })
+  const liveMatch: PvpRoguelikeLiveMatchSetup = {
+    id: match.id,
+    side,
+    opponentSide: opponentSideId,
+    opponentName: opponent.characterName,
+    opponentClassName: opponent.className,
+  }
+
+  return {
+    ...setup,
+    liveMatch,
+    logText: message ?? `${opponent.characterName} found. Stage ${match.startStage} begins.`,
+  }
+}

src/combat/pvpRoguelikeUpgrades.ts

@@ -0,0 +1,77 @@
+import type { PartyMember } from '../game'
+
+export type PvpRoguelikeUpgradeSide<TBuff extends string, TDebuff extends string> = {
+  party: PartyMember[]
+  resource: number
+  cooldowns: Record<string, number>
+  enemyHealth: number
+  buffs: TBuff[]
+  debuffs: TDebuff[]
+}
+
+function removeRandomItem<T>(items: readonly T[], random = Math.random) {
+  if (items.length === 0) return [...items]
+  const removedIndex = Math.floor(random() * items.length)
+  return items.filter((_, index) => index !== removedIndex)
+}
+
+export function recoverPartyForNextPvpRoguelikeEncounter(party: readonly PartyMember[]) {
+  return party.map((member) => ({
+    ...member,
+    health: member.maxHealth,
+    debuff: undefined,
+    debuffTicks: undefined,
+    poisonStacks: undefined,
+    maxHealthPenaltyTicks: undefined,
+    healingReductionTicks: undefined,
+  }))
+}
+
+export function applyPvpRoguelikeUpgradeChoice<
+  TBuff extends string,
+  TDebuff extends string,
+  TSide extends PvpRoguelikeUpgradeSide<TBuff, TDebuff>,
+>({
+  side,
+  buffId,
+  incomingDebuffId,
+  reviveBuffId,
+  random,
+}: {
+  side: TSide
+  buffId: TBuff
+  incomingDebuffId?: TDebuff
+  reviveBuffId: TBuff
+  random?: () => number
+}) {
+  const reviveSelected = buffId === reviveBuffId
+  const nextBuffs = reviveSelected ? side.buffs : [...side.buffs, buffId]
+  const nextDebuffs = incomingDebuffId ? [...side.debuffs, incomingDebuffId] : side.debuffs
+  return {
+    ...side,
+    buffs: nextBuffs,
+    debuffs: reviveSelected ? removeRandomItem(nextDebuffs, random) : nextDebuffs,
+  }
+}
+
+export function preparePvpRoguelikeNextEncounter<
+  TBuff extends string,
+  TDebuff extends string,
+  TSide extends PvpRoguelikeUpgradeSide<TBuff, TDebuff>,
+>({
+  side,
+  maxResource,
+  enemyMaxHealth,
+}: {
+  side: TSide
+  maxResource: number
+  enemyMaxHealth: number
+}) {
+  return {
+    ...side,
+    party: recoverPartyForNextPvpRoguelikeEncounter(side.party),
+    resource: maxResource,
+    cooldowns: {},
+    enemyHealth: enemyMaxHealth,
+  }
+}

src/combat/pvpSpellCasting.ts

@@ -0,0 +1,58 @@
+import type { PartyMember, Spell } from '../game'
+import { applyCastStateUpdate, type CastStateFields } from './combatStateTransitions'
+import { canCastSpell } from './spellCasting'
+import { applySpellEffectProfile, type SpellEffectProfile, type SpellTargetPlan } from './spellEffects'
+
+export function applyPvpSpellCast<TState extends CastStateFields<PartyMember[]>>({
+  current,
+  spell,
+  targetId,
+  resourceCost,
+  targetPlan,
+  profile,
+  setCurrent,
+  emitFloatingHeal,
+  cooldownMultiplier = 1,
+  cooldowns,
+  freeCast,
+}: {
+  current: TState
+  spell: Spell
+  targetId: string
+  resourceCost: number
+  targetPlan: SpellTargetPlan
+  profile: SpellEffectProfile
+  setCurrent: (next: TState) => void
+  emitFloatingHeal: (memberId: string, value: number) => void
+  cooldownMultiplier?: number
+  cooldowns?: Record<string, number>
+  freeCast?: {
+    enabled: boolean
+    wasReady: boolean
+  }
+}) {
+  if (!canCastSpell(spell, current.resource, current.cooldowns, resourceCost)) return false
+  const target = current.party.find((member) => member.id === targetId && member.health > 0)
+  if (!target) return false
+
+  const { party: nextParty, floatingHeals } = applySpellEffectProfile({
+    party: current.party,
+    spell,
+    targetId,
+    plan: targetPlan,
+    profile,
+  })
+  floatingHeals.forEach((event) => emitFloatingHeal(event.memberId, event.value))
+
+  const nextState = applyCastStateUpdate({
+    current,
+    party: nextParty,
+    cooldowns,
+    spell,
+    resourceCost,
+    cooldownMultiplier,
+    freeCast,
+  })
+  setCurrent(nextState)
+  return true
+}

src/combat/rewardSummaries.ts

@@ -0,0 +1,70 @@
+import type { DungeonReward } from '../profile'
+
+export type RewardSummaryBase = {
+  experienceGained: number
+  previousLevel: number | null
+  newLevel: number | null
+  levelsGained: number
+  talentPointsGained: number
+  unlockedAbilities: DungeonReward['unlockedAbilities']
+}
+
+export type PvpRunRewardSummary = RewardSummaryBase & {
+  bossesKilled: number
+  loot: Array<NonNullable<DungeonReward['bonusItem']>>
+}
+
+export function createEmptyRewardSummary(): RewardSummaryBase {
+  return {
+    experienceGained: 0,
+    previousLevel: null,
+    newLevel: null,
+    levelsGained: 0,
+    talentPointsGained: 0,
+    unlockedAbilities: [],
+  }
+}
+
+export function createEmptyPvpRunSummary(): PvpRunRewardSummary {
+  return {
+    bossesKilled: 0,
+    ...createEmptyRewardSummary(),
+    loot: [],
+  }
+}
+
+export function mergeUnlockedAbilities(
+  current: DungeonReward['unlockedAbilities'],
+  next: DungeonReward['unlockedAbilities'],
+) {
+  const unlockedById = new Map(current.map((ability) => [ability.id, ability]))
+  next.forEach((ability) => unlockedById.set(ability.id, ability))
+  return Array.from(unlockedById.values())
+}
+
+export function mergeDungeonRewardSummary<TSummary extends RewardSummaryBase>(
+  current: TSummary,
+  reward: DungeonReward,
+) {
+  return {
+    ...current,
+    experienceGained: current.experienceGained + reward.experienceGained,
+    previousLevel: current.previousLevel ?? reward.previousLevel,
+    newLevel: reward.newLevel,
+    levelsGained: current.levelsGained + reward.levelsGained,
+    talentPointsGained: current.talentPointsGained + reward.talentPointsGained,
+    unlockedAbilities: mergeUnlockedAbilities(current.unlockedAbilities, reward.unlockedAbilities),
+  }
+}
+
+export function mergePvpRunRewardSummary(
+  current: PvpRunRewardSummary,
+  reward: DungeonReward,
+  { bossKilled }: { bossKilled: boolean },
+) {
+  return {
+    ...mergeDungeonRewardSummary(current, reward),
+    bossesKilled: current.bossesKilled + (bossKilled ? 1 : 0),
+    loot: reward.bonusItem ? [...current.loot, reward.bonusItem] : current.loot,
+  }
+}

src/combat/roguelikeUpgrades.ts

@@ -0,0 +1,81 @@
+import type { Spell } from '../game'
+import { createStackCounts, summarizeStackCounts } from './stackCounts'
+
+export type UpgradeChoice<T extends string> = {
+  id: T
+  name: string
+  description: string
+}
+
+export function slotLabel(slot: string, spells: Spell[], labelMode: 'ability' | 'slot') {
+  const spell = spells.find((candidate) => candidate.key === slot)
+  if (labelMode === 'ability' && spell) return spell.name
+  return `Slot ${slot}`
+}
+
+export function buildSelfSlotUpgradeChoices<T extends string>({
+  slots,
+  spells,
+  labelMode,
+  idPrefix = 'slot',
+}: {
+  slots: readonly string[]
+  spells: Spell[]
+  labelMode: 'ability' | 'slot'
+  idPrefix?: string
+}) {
+  return slots.flatMap((slot) => {
+    const label = slotLabel(slot, spells, labelMode)
+    return [
+      {
+        id: `${idPrefix}${slot}-extra-target` as T,
+        name: `${label}: +1 target`,
+        description: `${label} affects 1 additional ally when possible.`,
+      },
+      {
+        id: `${idPrefix}${slot}-cost-down` as T,
+        name: `${label}: -25% cost`,
+        description: `${label} costs 25% less resource.`,
+      },
+      {
+        id: `${idPrefix}${slot}-cooldown-down` as T,
+        name: `${label}: -25% cooldown`,
+        description: `${label} recharges 25% faster.`,
+      },
+    ]
+  })
+}
+
+export function buildOpponentSlotDebuffChoices<T extends string>({
+  slots,
+  spells,
+  labelMode,
+}: {
+  slots: readonly string[]
+  spells: Spell[]
+  labelMode: 'ability' | 'slot'
+}) {
+  return slots.flatMap((slot) => {
+    const label = slotLabel(slot, spells, labelMode)
+    return [
+      {
+        id: `opp-slot${slot}-cost-up` as T,
+        name: `${label}: +25% cost`,
+        description: `Opponent ${label.toLowerCase()} costs 25% more resource.`,
+      },
+      {
+        id: `opp-slot${slot}-cooldown-up` as T,
+        name: `${label}: +25% cooldown`,
+        description: `Opponent ${label.toLowerCase()} recharges 25% slower.`,
+      },
+    ]
+  })
+}
+
+export function summarizeChoiceStacks<T extends string>(
+  items: T[],
+  catalog: Array<UpgradeChoice<T>>,
+  emptyLabel = '',
+) {
+  return summarizeStackCounts(createStackCounts(items), catalog, emptyLabel)
+}

src/combat/rules.ts

@@ -0,0 +1,132 @@
+import type { PartyMember, Spell } from '../game'
+import type { Ability } from '../profile'
+import { createStackCounts, stackCount } from './stackCounts'
+
+export const DEFAULT_TICK_MS = 700
+
+export function clamp(value: number, min: number, max: number) {
+  return Math.min(max, Math.max(min, value))
+}
+
+export function chooseRandom<T>(items: T[], count: number) {
+  const pool = [...items]
+  const result: T[] = []
+  while (pool.length > 0 && result.length < count) {
+    const index = Math.floor(Math.random() * pool.length)
+    result.push(pool.splice(index, 1)[0])
+  }
+  return result
+}
+
+export function effectiveMaxHealth(member: PartyMember) {
+  return Math.max(
+    1,
+    Math.round(member.maxHealth * (member.maxHealthPenaltyTicks && member.maxHealthPenaltyTicks > 0 ? 0.75 : 1)),
+  )
+}
+
+export function healAmount(member: PartyMember, amount: number, multiplier = 1) {
+  return Math.round(amount * (member.healingReductionTicks && member.healingReductionTicks > 0 ? 0.75 : 1) * multiplier)
+}
+
+export function healMember(member: PartyMember, amount: number, multiplier = 1) {
+  return clamp(member.health + healAmount(member, amount, multiplier), 0, effectiveMaxHealth(member))
+}
+
+export function memberHotEffects(member: PartyMember) {
+  if (member.hotEffects?.length) return member.hotEffects
+  return member.hotTicks > 0
+    ? [{ id: 'legacy-renew', spellId: 'legacy-renew', label: 'Renew', ticks: member.hotTicks, power: 6 }]
+    : []
+}
+
+export function effectId(prefix: string) {
+  return `${prefix}-${globalThis.crypto?.randomUUID?.() ?? `${Date.now()}-${Math.random()}`}`
+}
+
+export function addHotEffect(member: PartyMember, spell: Spell, ticks = 5) {
+  const nextEffect = {
+    id: effectId(spell.id),
+    spellId: spell.id,
+    label: spell.name,
+    ticks,
+    power: Math.max(1, Math.round(spell.power / 2)),
+  }
+  const currentEffects = memberHotEffects(member).filter((effect) => effect.spellId !== spell.id)
+  return [...currentEffects, nextEffect]
+}
+
+export function addBounceHeal(member: PartyMember, spell: Spell) {
+  return [
+    ...(member.bounceHeals ?? []),
+    {
+      id: effectId(spell.id),
+      label: spell.name,
+      charges: 4,
+      power: spell.power,
+    },
+  ]
+}
+
+export function tickHotEffects(effects: PartyMember['hotEffects']) {
+  return (effects ?? [])
+    .map((effect) => ({ ...effect, ticks: effect.ticks - 1 }))
+    .filter((effect) => effect.ticks > 0)
+}
+
+export function formatEffectTime(ticks: number, tickMs = DEFAULT_TICK_MS) {
+  const seconds = (ticks * tickMs) / 1000
+  return Number.isInteger(seconds) ? `${seconds}s` : `${seconds.toFixed(1)}s`
+}
+
+export function buffStacks<T extends string>(items: readonly T[], id: T) {
+  return stackCount(createStackCounts(items), id)
+}
+
+export function createLogEntry(nextLogId: { current: number }, text: string, tone: 'system' | 'heal' | 'danger' | 'loot') {
+  return { id: nextLogId.current++, text, tone }
+}
+
+export function toCombatSpell(ability: Ability, key: string, healingPower = 0): Spell {
+  const kinds: Record<string, Spell['kind']> = {
+    direct_heal: 'direct',
+    direct_hot: 'direct',
+    heal_over_time: 'hot',
+    party_heal: 'group',
+    party_hot: 'group',
+    party_absorb: 'group',
+    absorb: 'shield',
+    damage_reduction: 'damage_reduction',
+    bounce_heal: 'bounce_heal',
+    cleanse: 'cleanse',
+  }
+  return {
+    id: String(ability.id),
+    key,
+    name: ability.name,
+    description: ability.description,
+    cost: ability.cost,
+    cooldown: ability.cooldown,
+    power: ability.power + healingPower,
+    glyph: ability.glyph,
+    kind: kinds[ability.spellType] ?? 'direct',
+    effectType: ability.spellType,
+  }
+}
+
+export function resetParty(partyTemplate: PartyMember[]) {
+  return partyTemplate.map((member) => ({
+    ...member,
+    health: member.maxHealth,
+    shield: 0,
+    hotTicks: 0,
+    hotEffects: undefined,
+    debuff: undefined,
+    debuffTicks: undefined,
+    poisonStacks: undefined,
+    maxHealthPenaltyTicks: undefined,
+    healingReductionTicks: undefined,
+    damageReductionTicks: undefined,
+    bounceHeals: undefined,
+  }))
+}

src/combat/spellCasting.ts

@@ -0,0 +1,79 @@
+import type { Spell } from '../game'
+
+export function cooldownNow() {
+  return Date.now()
+}
+
+export function cooldownRemaining(
+  cooldowns: Record<string, number>,
+  spellId: string,
+  now = cooldownNow(),
+) {
+  return Math.max(0, ((cooldowns[spellId] ?? 0) - now) / 1000)
+}
+
+export function hasActiveCooldowns(
+  cooldowns: Record<string, number>,
+  now = cooldownNow(),
+) {
+  return Object.values(cooldowns).some((readyAtMs) => readyAtMs > now)
+}
+
+export function pruneExpiredCooldowns(
+  cooldowns: Record<string, number>,
+  now = cooldownNow(),
+) {
+  let changed = false
+  const nextCooldowns: Record<string, number> = {}
+  for (const id in cooldowns) {
+    if (cooldowns[id] <= now) {
+      changed = true
+      continue
+    }
+    nextCooldowns[id] = cooldowns[id]
+  }
+  return changed ? nextCooldowns : cooldowns
+}
+
+export function reduceCooldown(
+  cooldowns: Record<string, number>,
+  spellId: string,
+  seconds: number,
+  now = cooldownNow(),
+) {
+  const readyAtMs = cooldowns[spellId]
+  if (!readyAtMs || readyAtMs <= now) return cooldowns
+  const nextReadyAtMs = readyAtMs - seconds * 1000
+  const nextCooldowns = { ...cooldowns }
+  if (nextReadyAtMs <= now) delete nextCooldowns[spellId]
+  else nextCooldowns[spellId] = nextReadyAtMs
+  return nextCooldowns
+}
+
+export function canCastSpell(
+  spell: Spell,
+  resource: number,
+  cooldowns: Record<string, number>,
+  resourceCost: number,
+  now = cooldownNow(),
+) {
+  return resource >= resourceCost && cooldownRemaining(cooldowns, spell.id, now) <= 0
+}
+
+export function putSpellOnCooldown(
+  cooldowns: Record<string, number>,
+  spell: Spell,
+  cooldownMultiplier = 1,
+  now = cooldownNow(),
+) {
+  const cooldownMs = spell.cooldown * cooldownMultiplier * 1000
+  if (cooldownMs <= 0) {
+    const nextCooldowns = { ...cooldowns }
+    delete nextCooldowns[spell.id]
+    return nextCooldowns
+  }
+  return {
+    ...cooldowns,
+    [spell.id]: now + cooldownMs,
+  }
+}

src/combat/spellEffects.ts

@@ -0,0 +1,363 @@
+import { DEFAULT_GROUP_HEAL_TARGETS, groupHealTargets, type PartyMember, type Spell } from '../game'
+import { addBounceHeal, addHotEffect } from './rules'
+
+export type SpellTargetBucket = 'direct' | 'hot' | 'shield' | 'damageReduction'
+
+export type SpellTargetPlan = {
+  directTargets: Set<string>
+  hotTargets: Set<string>
+  shieldTargets: Set<string>
+  damageReductionTargets: Set<string>
+  groupTargets: Set<string>
+}
+
+export type ExtraTargetMode = Partial<Record<Spell['kind'], SpellTargetBucket>>
+
+function hasBlockedId(blockedIds: Iterable<string>, id: string) {
+  if (blockedIds instanceof Set) return blockedIds.has(id)
+  for (const blockedId of blockedIds) {
+    if (blockedId === id) return true
+  }
+  return false
+}
+
+export function lowestHealthExtraTarget(party: PartyMember[], blockedIds: Iterable<string>) {
+  let target: PartyMember | undefined
+  let targetRatio = Number.POSITIVE_INFINITY
+  for (const member of party) {
+    if (member.health <= 0 || hasBlockedId(blockedIds, member.id)) continue
+    const healthRatio = member.health / member.maxHealth
+    if (healthRatio < targetRatio) {
+      target = member
+      targetRatio = healthRatio
+    }
+  }
+  return target
+}
+
+export function addLowestHealthExtraTarget(
+  plan: SpellTargetPlan,
+  party: PartyMember[],
+  bucket: SpellTargetBucket,
+) {
+  const targetSet = bucket === 'direct'
+    ? plan.directTargets
+    : bucket === 'hot'
+      ? plan.hotTargets
+      : bucket === 'shield'
+        ? plan.shieldTargets
+        : plan.damageReductionTargets
+  const extra = lowestHealthExtraTarget(party, targetSet)
+  if (extra) targetSet.add(extra.id)
+}
+
+export function buildSpellTargetPlan({
+  party,
+  spell,
+  targetId,
+  extraTargets,
+  directTarget,
+  hotTarget,
+  shieldTarget,
+  damageReductionTarget,
+  groupTargetCount = DEFAULT_GROUP_HEAL_TARGETS,
+  extraTargetMode,
+  beforeExtraTargetBuckets = [],
+}: {
+  party: PartyMember[]
+  spell: Spell
+  targetId: string
+  extraTargets: number
+  directTarget: boolean
+  hotTarget: boolean
+  shieldTarget: boolean
+  damageReductionTarget?: boolean
+  groupTargetCount?: number
+  extraTargetMode: ExtraTargetMode
+  beforeExtraTargetBuckets?: SpellTargetBucket[]
+}): SpellTargetPlan {
+  const plan: SpellTargetPlan = {
+    directTargets: new Set(directTarget ? [targetId] : []),
+    hotTargets: new Set(hotTarget ? [targetId] : []),
+    shieldTargets: new Set(shieldTarget ? [targetId] : []),
+    damageReductionTargets: new Set(damageReductionTarget ? [targetId] : []),
+    groupTargets: new Set(
+      spell.kind === 'group'
+        ? groupHealTargets(party, groupTargetCount).map((member) => member.id)
+        : [],
+    ),
+  }
+
+  beforeExtraTargetBuckets.forEach((bucket) => {
+    addLowestHealthExtraTarget(plan, party, bucket)
+  })
+
+  const bucket = extraTargetMode[spell.kind] ?? 'direct'
+  for (let index = 0; index < extraTargets; index += 1) {
+    if (spell.kind === 'group') break
+    addLowestHealthExtraTarget(plan, party, bucket)
+  }
+
+  return plan
+}
+
+export function clearNegativeEffects(member: PartyMember) {
+  return {
+    ...member,
+    debuff: undefined,
+    debuffTicks: undefined,
+    poisonStacks: undefined,
+    maxHealthPenaltyTicks: undefined,
+    healingReductionTicks: undefined,
+  }
+}
+
+export type FloatingHealEvent = {
+  memberId: string
+  value: number
+}
+
+export type SpellEffectProfile = {
+  /**
+   * Profiles keep mode-specific spell math out of screen components. PvE uses
+   * stacked HoT effect objects; PvP modes mostly use legacy hotTicks. Stadium
+   * also applies dampening through the power callbacks below.
+   */
+  modeName: string
+  heal: (member: PartyMember, power: number, multiplier: number) => number
+  healingMultiplier: (member: PartyMember) => number
+  power: {
+    direct: (spell: Spell) => number
+    cleanse: (spell: Spell) => number
+    groupHeal: (spell: Spell) => number
+    groupAbsorb: (spell: Spell) => number
+    shield: (sourcePower: number, strength?: number) => number
+  }
+  hot: {
+    mode: 'effects' | 'ticks'
+    defaultTicks: number
+    groupTicks: number
+    radianceTicks: number
+    merge: 'replace' | 'max'
+    groupMerge?: 'replace' | 'max'
+  }
+  effects: {
+    renewSpell?: Spell | null
+    shieldSpell?: Spell | null
+    groupAbsorbOnly: (spell: Spell) => boolean
+    groupHotOnly: (spell: Spell) => boolean
+    groupAppliesShield: (spell: Spell) => boolean
+    groupAppliesHot: (spell: Spell) => boolean
+    shieldAppliesHot: (spell: Spell) => boolean
+    hotSpellForDirect: (spell: Spell) => Spell
+  }
+  ratios: {
+    groupShield: number
+    directShield: number
+  }
+  damageReductionTicks: number
+  floatingHeals: {
+    group: boolean
+    direct: boolean
+    cleanse: boolean
+  }
+  bounceHeals: boolean
+}
+
+function applyHot(
+  member: PartyMember,
+  spell: Spell,
+  profile: SpellEffectProfile,
+  ticks = profile.hot.defaultTicks,
+  merge = profile.hot.merge,
+) {
+  if (profile.hot.mode === 'effects') {
+    return {
+      ...member,
+      hotTicks: 0,
+      hotEffects: addHotEffect(member, spell, ticks),
+    }
+  }
+  return {
+    ...member,
+    hotTicks: merge === 'max'
+      ? Math.max(member.hotTicks, ticks)
+      : ticks,
+  }
+}
+
+function recordFloatingHeal(
+  events: FloatingHealEvent[],
+  enabled: boolean,
+  member: PartyMember,
+  nextHealth: number,
+) {
+  if (enabled && nextHealth > member.health) {
+    events.push({ memberId: member.id, value: nextHealth - member.health })
+  }
+}
+
+export function applySpellEffectProfile({
+  party,
+  spell,
+  targetId,
+  plan,
+  profile,
+}: {
+  party: PartyMember[]
+  spell: Spell
+  targetId: string
+  plan: SpellTargetPlan
+  profile: SpellEffectProfile
+}) {
+  const floatingHeals: FloatingHealEvent[] = []
+  const nextParty = party.map((member) => {
+    if (member.health <= 0) return member
+
+    if (spell.kind === 'group') {
+      if (!plan.groupTargets.has(member.id)) return member
+      const isGroupAbsorb = profile.effects.groupAbsorbOnly(spell)
+      if (profile.effects.groupHotOnly(spell)) {
+        return applyHot(member, spell, profile, profile.hot.groupTicks, profile.hot.groupMerge)
+      }
+
+      const power = isGroupAbsorb
+        ? profile.power.groupAbsorb(spell)
+        : profile.power.groupHeal(spell)
+      const nextHealth = isGroupAbsorb
+        ? member.health
+        : profile.heal(member, power, profile.healingMultiplier(member))
+      recordFloatingHeal(floatingHeals, profile.floatingHeals.group, member, nextHealth)
+
+      let nextMember: PartyMember = {
+        ...member,
+        health: nextHealth,
+        shield: profile.effects.groupAppliesShield(spell)
+          ? Math.max(
+            member.shield,
+            isGroupAbsorb
+              ? power
+              : profile.power.shield(
+                profile.effects.shieldSpell?.power ?? spell.power,
+                profile.ratios.groupShield,
+              ),
+          )
+          : member.shield,
+      }
+      if (profile.effects.groupAppliesHot(spell) && profile.effects.renewSpell) {
+        nextMember = applyHot(nextMember, profile.effects.renewSpell, profile, profile.hot.radianceTicks, profile.hot.groupMerge)
+      } else if (profile.effects.groupAppliesHot(spell)) {
+        nextMember = applyHot(nextMember, spell, profile, profile.hot.groupTicks, profile.hot.groupMerge)
+      }
+      return nextMember
+    }
+
+    if (
+      !plan.directTargets.has(member.id)
+      && !plan.hotTargets.has(member.id)
+      && !plan.shieldTargets.has(member.id)
+      && !plan.damageReductionTargets.has(member.id)
+      && !(member.id === targetId && spell.kind === 'bounce_heal' && profile.bounceHeals)
+    ) return member
+
+    if (spell.kind === 'shield') {
+      let nextMember: PartyMember = {
+        ...member,
+        shield: Math.max(member.shield, profile.power.shield(spell.power)),
+      }
+      if (plan.hotTargets.has(member.id) || profile.effects.shieldAppliesHot(spell)) {
+        nextMember = applyHot(nextMember, profile.effects.renewSpell ?? spell, profile)
+      }
+      return nextMember
+    }
+
+    if (spell.kind === 'damage_reduction') {
+      return {
+        ...member,
+        damageReductionTicks: profile.hot.merge === 'max'
+          ? Math.max(member.damageReductionTicks ?? 0, profile.damageReductionTicks)
+          : profile.damageReductionTicks,
+        hotTicks: plan.hotTargets.has(member.id)
+          ? (profile.hot.merge === 'max'
+            ? Math.max(member.hotTicks, profile.hot.defaultTicks)
+            : profile.hot.defaultTicks)
+          : member.hotTicks,
+      }
+    }
+
+    if (spell.kind === 'bounce_heal' && profile.bounceHeals) {
+      return { ...member, bounceHeals: addBounceHeal(member, spell) }
+    }
+
+    if (spell.kind === 'cleanse') {
+      const nextHealth = profile.heal(member, profile.power.cleanse(spell), profile.healingMultiplier(member))
+      recordFloatingHeal(floatingHeals, profile.floatingHeals.cleanse, member, nextHealth)
+      let nextMember: PartyMember = {
+        ...clearNegativeEffects(member),
+        health: nextHealth,
+        shield: plan.shieldTargets.has(member.id)
+          ? Math.max(
+            member.shield,
+            profile.power.shield(profile.effects.shieldSpell?.power ?? spell.power),
+          )
+          : member.shield,
+      }
+      if (plan.hotTargets.has(member.id)) {
+        nextMember = applyHot(nextMember, profile.effects.renewSpell ?? spell, profile)
+      }
+      return nextMember
+    }
+
+    const nextHealth = plan.directTargets.has(member.id)
+      ? profile.heal(member, profile.power.direct(spell), profile.healingMultiplier(member))
+      : member.health
+    recordFloatingHeal(floatingHeals, profile.floatingHeals.direct, member, nextHealth)
+    let nextMember: PartyMember = {
+      ...member,
+      health: nextHealth,
+      shield: plan.shieldTargets.has(member.id)
+        ? Math.max(
+          member.shield,
+          profile.power.shield(
+            profile.effects.shieldSpell?.power ?? spell.power,
+            profile.ratios.directShield,
+          ),
+        )
+        : member.shield,
+    }
+    if (plan.hotTargets.has(member.id)) {
+      nextMember = applyHot(nextMember, profile.effects.hotSpellForDirect(spell), profile)
+    }
+    return nextMember
+  })
+
+  return { party: nextParty, floatingHeals }
+}
+
+export function advanceFreeCastProgress({
+  enabled,
+  wasReady,
+  castsTowardFree,
+}: {
+  enabled: boolean
+  wasReady: boolean
+  castsTowardFree: number
+}) {
+  if (!enabled) {
+    return {
+      castsTowardFree,
+      freeCastReady: wasReady,
+    }
+  }
+  if (wasReady) {
+    return {
+      castsTowardFree: 0,
+      freeCastReady: false,
+    }
+  }
+  const nextCasts = castsTowardFree + 1
+  return {
+    castsTowardFree: nextCasts >= 5 ? 0 : nextCasts,
+    freeCastReady: nextCasts >= 5,
+  }
+}

src/combat/spellModifiers.ts

@@ -0,0 +1,81 @@
+import type { Spell } from '../game'
+import { stackCount, type StackCounts } from './stackCounts'
+
+export type SlotModifier<T extends string> = {
+  stacks: StackCounts<T>
+  id: (slot: string) => T
+  multiplier?: number
+}
+
+export type StackModifier<T extends string> = {
+  stacks: StackCounts<T>
+  id: T
+  multiplier?: number
+}
+
+function slotKey(spell: Spell) {
+  return String(spell.key)
+}
+
+function slotModifierStacks<T extends string>(spell: Spell, modifier?: SlotModifier<T>) {
+  return modifier ? stackCount(modifier.stacks, modifier.id(slotKey(spell))) : 0
+}
+
+function stackModifierStacks<T extends string>(modifier?: StackModifier<T>) {
+  return modifier ? stackCount(modifier.stacks, modifier.id) : 0
+}
+
+function stackMultiplier<T extends string>(modifier?: StackModifier<T>) {
+  if (!modifier) return 1
+  return (modifier.multiplier ?? 1.25) ** stackModifierStacks(modifier)
+}
+
+export function spellSlotMultiplier<TPositive extends string, TNegative extends string = never>(
+  spell: Spell,
+  positive?: SlotModifier<TPositive>,
+  negative?: SlotModifier<TNegative>,
+) {
+  const positiveMultiplier = (positive?.multiplier ?? 0.75) ** slotModifierStacks(spell, positive)
+  const negativeMultiplier = (negative?.multiplier ?? 1.25) ** slotModifierStacks(spell, negative)
+  return positiveMultiplier * negativeMultiplier
+}
+
+export function spellCooldownMultiplier<TPositive extends string, TNegative extends string = never>(
+  spell: Spell,
+  cooldownDown?: SlotModifier<TPositive>,
+  cooldownUp?: SlotModifier<TNegative>,
+) {
+  return spellSlotMultiplier(spell, cooldownDown, cooldownUp)
+}
+
+export function spellResourceCost<TPositive extends string, TNegative extends string = never>({
+  spell,
+  costDown,
+  costUp,
+  freeCastReady = false,
+  freeCast,
+}: {
+  spell: Spell
+  costDown?: SlotModifier<TPositive>
+  costUp?: SlotModifier<TNegative>
+  freeCastReady?: boolean
+  freeCast?: StackModifier<TPositive>
+}) {
+  if (freeCastReady && stackModifierStacks(freeCast) > 0) return 0
+  return Math.ceil(spell.cost * spellSlotMultiplier(spell, costDown, costUp))
+}
+
+export function spellExtraTargets<T extends string>(
+  spell: Spell,
+  extraTarget: SlotModifier<T>,
+) {
+  return slotModifierStacks(spell, extraTarget)
+}
+
+export function spellPowerMultiplier<T extends string>(modifier: StackModifier<T>) {
+  return stackMultiplier(modifier)
+}
+
+export function hasSpellStack<T extends string>(modifier: StackModifier<T>) {
+  return stackModifierStacks(modifier) > 0
+}

src/combat/stackCounts.ts

@@ -0,0 +1,25 @@
+export type StackCounts<T extends string> = ReadonlyMap<T, number>
+
+export function createStackCounts<T extends string>(items: readonly T[]): StackCounts<T> {
+  const counts = new Map<T, number>()
+  items.forEach((item) => counts.set(item, (counts.get(item) ?? 0) + 1))
+  return counts
+}
+
+export function stackCount<T extends string>(counts: StackCounts<T>, id: T) {
+  return counts.get(id) ?? 0
+}
+
+export function summarizeStackCounts<T extends string, TChoice extends { id: T; name: string }>(
+  counts: StackCounts<T>,
+  catalog: readonly TChoice[],
+  emptyLabel = '',
+) {
+  const summary = Array.from(counts.entries())
+    .map(([id, count]) => {
+      const label = catalog.find((choice) => choice.id === id)?.name ?? id
+      return count > 1 ? `${label} x${count}` : label
+    })
+    .join(', ')
+  return summary || emptyLabel
+}

src/combat/stadiumLifecycle.ts

@@ -0,0 +1,81 @@
+export type StadiumRoundOutcome = 'win' | 'loss' | 'tie'
+export type StadiumWins = {
+  player: number
+  opponent: number
+}
+export type StadiumRoundStatus = 'playing' | 'shop' | 'won' | 'lost'
+export type StadiumExperienceMode =
+  | 'pvp-stadium-round-win-quarter-level'
+  | 'pvp-stadium-round-loss-tenth-level'
+  | 'pvp-stadium-match-half-level'
+
+export const DEFAULT_STADIUM_WIN_ROUNDS = 3
+
+export function stadiumShopPointsForOutcome(outcome: StadiumRoundOutcome, side: 'player' | 'opponent') {
+  if (side === 'player') return outcome === 'loss' ? 4 : 3
+  return outcome === 'win' ? 4 : 3
+}
+
+export function resolveStadiumRound({
+  outcome,
+  roundIndex,
+  wins,
+  winRounds = DEFAULT_STADIUM_WIN_ROUNDS,
+}: {
+  outcome: StadiumRoundOutcome
+  roundIndex: number
+  wins: StadiumWins
+  winRounds?: number
+}) {
+  const roundExperienceMode: StadiumExperienceMode = outcome === 'loss'
+    ? 'pvp-stadium-round-loss-tenth-level'
+    : 'pvp-stadium-round-win-quarter-level'
+  const logTone = outcome === 'loss' ? 'danger' as const : 'loot' as const
+  const nextWins = {
+    player: wins.player + (outcome === 'win' ? 1 : 0),
+    opponent: wins.opponent + (outcome === 'loss' ? 1 : 0),
+  }
+  const status: StadiumRoundStatus = nextWins.player >= winRounds
+    ? 'won'
+    : nextWins.opponent >= winRounds
+      ? 'lost'
+      : 'shop'
+
+  return {
+    nextWins,
+    status,
+    playerRoundStatus: status,
+    roundExperience: {
+      key: `round-${roundIndex}-${outcome}`,
+      mode: roundExperienceMode,
+    },
+    matchExperience: status === 'won'
+      ? { key: 'match-win', mode: 'pvp-stadium-match-half-level' as StadiumExperienceMode }
+      : null,
+    log: {
+      text: outcome === 'win'
+        ? `Round ${roundIndex} won.`
+        : outcome === 'loss'
+          ? `Round ${roundIndex} lost.`
+          : `Round ${roundIndex} tied.`,
+      tone: logTone,
+    },
+  }
+}
+
+export function chooseStadiumCpuPurchases<TId extends string, TBuff extends { id: TId; cost: number }>(
+  catalog: readonly TBuff[],
+  points: number,
+  random = Math.random,
+) {
+  let remaining = points
+  const purchases: TId[] = []
+  while (remaining > 0) {
+    const affordable = catalog.filter((buff) => buff.cost <= remaining)
+    if (affordable.length === 0) break
+    const selected = affordable[Math.floor(random() * affordable.length)]
+    purchases.push(selected.id)
+    remaining -= selected.cost
+  }
+  return purchases
+}

src/combat/stadiumMatchSetup.ts

@@ -0,0 +1,124 @@
+import type { PartyMember } from '../game'
+import type { PvpMatchSnapshot, PvpMatchSide } from '../pvpRoguelike'
+import { resetParty } from './rules'
+import type { StadiumRoundOutcome, StadiumWins } from './stadiumLifecycle'
+
+export type StadiumSetupSide<TBuff extends string> = {
+  party: PartyMember[]
+  resource: number
+  cooldowns: Record<string, number>
+  buffs: TBuff[]
+  castsTowardFree: number
+  freeCastReady: boolean
+  survivalSeconds: number
+  dampeningPercent: number
+  roundIndex: number
+  roundWins: number
+  roundStatus: 'playing' | 'shop' | 'won' | 'lost'
+  lastRoundOutcome?: StadiumRoundOutcome
+  shopReady: boolean
+}
+
+export type StadiumLiveMatchSetup = {
+  id: string
+  side: PvpMatchSide
+  opponentSide: PvpMatchSide
+  opponentName: string
+  opponentClassName: string
+}
+
+export function createStadiumStarterSide<TBuff extends string>({
+  partyTemplate,
+  maxResource,
+  roundIndex,
+  buffs = [],
+  roundWins = 0,
+}: {
+  partyTemplate: readonly PartyMember[]
+  maxResource: number
+  roundIndex: number
+  buffs?: TBuff[]
+  roundWins?: number
+}): StadiumSetupSide<TBuff> {
+  return {
+    party: resetParty([...partyTemplate]),
+    resource: maxResource,
+    cooldowns: {},
+    buffs,
+    castsTowardFree: 0,
+    freeCastReady: false,
+    survivalSeconds: 0,
+    dampeningPercent: 0,
+    roundIndex,
+    roundWins,
+    roundStatus: 'playing',
+    shopReady: false,
+  }
+}
+
+export function createStadiumMatchStart<TBuff extends string>({
+  partyTemplate,
+  opponentPartyTemplate,
+  maxResource,
+}: {
+  partyTemplate: readonly PartyMember[]
+  opponentPartyTemplate: readonly PartyMember[]
+  maxResource: number
+}) {
+  const roundIndex = 1
+  return {
+    playerSide: createStadiumStarterSide<TBuff>({ partyTemplate, maxResource, roundIndex }),
+    opponentSide: createStadiumStarterSide<TBuff>({ partyTemplate: opponentPartyTemplate, maxResource, roundIndex }),
+    defaults: {
+      roundIndex,
+      roundWins: { player: 0, opponent: 0 } satisfies StadiumWins,
+      elapsedTicks: 0,
+      shopPoints: 0,
+      shopReady: false,
+      paused: false,
+      rewardError: '',
+      showEndLog: false,
+    },
+  }
+}
+
+export function createStadiumLiveMatchStart<TBuff extends string>({
+  match,
+  side,
+  partyTemplate,
+  opponentPartyTemplate,
+  maxResource,
+  message,
+}: {
+  match: PvpMatchSnapshot<StadiumSetupSide<TBuff>>
+  side: PvpMatchSide
+  partyTemplate: readonly PartyMember[]
+  opponentPartyTemplate: readonly PartyMember[]
+  maxResource: number
+  message?: string
+}) {
+  const opponentSideId: PvpMatchSide = side === 'a' ? 'b' : 'a'
+  const opponent = match.players[opponentSideId]
+  const opponentTemplate = opponentPartyTemplate.map((member) => ({
+    ...member,
+    name: member.id === 'mira' ? opponent.characterName : member.name,
+  }))
+  const setup = createStadiumMatchStart<TBuff>({
+    partyTemplate,
+    opponentPartyTemplate: opponentTemplate,
+    maxResource,
+  })
+  const liveMatch: StadiumLiveMatchSetup = {
+    id: match.id,
+    side,
+    opponentSide: opponentSideId,
+    opponentName: opponent.characterName,
+    opponentClassName: opponent.className,
+  }
+
+  return {
+    ...setup,
+    liveMatch,
+    logText: message ?? `${opponent.characterName} found. Stadium begins.`,
+  }
+}

src/combat/targeting.ts

@@ -0,0 +1,98 @@
+import type { PartyMember } from '../game'
+
+export type NavigateAction = 'navigateLeft' | 'navigateRight' | 'navigateUp' | 'navigateDown'
+
+type TargetOptions = {
+  livingOnly?: boolean
+}
+
+function canTarget(member: PartyMember, options: TargetOptions) {
+  return !options.livingOnly || member.health > 0
+}
+
+export function selectRelativePartyTarget(
+  party: PartyMember[],
+  selectedId: string,
+  direction: -1 | 1,
+  options: TargetOptions = {},
+) {
+  const candidates = party.filter((member) => canTarget(member, options))
+  if (candidates.length === 0) return null
+  const currentIndex = candidates.findIndex((member) => member.id === selectedId)
+  const nextIndex = currentIndex < 0
+    ? 0
+    : (currentIndex + direction + candidates.length) % candidates.length
+  return candidates[nextIndex]?.id ?? null
+}
+
+export function selectDirectionalPartyTarget(
+  party: PartyMember[],
+  selectedId: string,
+  action: NavigateAction,
+  columns: number,
+  options: TargetOptions = {},
+) {
+  const currentIndex = party.findIndex((member) => member.id === selectedId)
+  if (currentIndex < 0) {
+    return party.find((member) => canTarget(member, options))?.id ?? null
+  }
+  const currentRow = Math.floor(currentIndex / columns)
+  const currentColumn = currentIndex % columns
+  const horizontal = action === 'navigateLeft' || action === 'navigateRight'
+  const candidate = party
+    .map((member, index) => ({
+      member,
+      index,
+      row: Math.floor(index / columns),
+      column: index % columns,
+    }))
+    .filter(({ member, index, row, column }) => {
+      if (!canTarget(member, options) || index === currentIndex) return false
+      if (action === 'navigateLeft') return row === currentRow && column < currentColumn
+      if (action === 'navigateRight') return row === currentRow && column > currentColumn
+      if (action === 'navigateUp') return row < currentRow
+      return row > currentRow
+    })
+    .sort((left, right) => {
+      const leftPrimary = horizontal
+        ? Math.abs(left.column - currentColumn)
+        : Math.abs(left.row - currentRow)
+      const rightPrimary = horizontal
+        ? Math.abs(right.column - currentColumn)
+        : Math.abs(right.row - currentRow)
+      const leftSecondary = horizontal ? 0 : Math.abs(left.column - currentColumn)
+      const rightSecondary = horizontal ? 0 : Math.abs(right.column - currentColumn)
+      return leftPrimary - rightPrimary || leftSecondary - rightSecondary
+    })[0]
+  return candidate?.member.id ?? null
+}
+
+export function selectDirectPartyTarget(
+  party: PartyMember[],
+  slot: number,
+  options: TargetOptions & {
+    targetGroup?: number
+    groupSize?: number
+  } = {},
+) {
+  const groupSize = options.groupSize ?? 6
+  const index = slot + (options.targetGroup ?? 0) * groupSize
+  const member = party[index]
+  return member && canTarget(member, options) ? member.id : null
+}
+
+export function nextTargetGroupSelection(
+  party: PartyMember[],
+  selectedId: string,
+  currentGroup: number,
+  groupSize = 6,
+) {
+  const groupCount = Math.max(1, Math.ceil(party.length / groupSize))
+  const nextGroup = (currentGroup + 1) % groupCount
+  const selectedIndex = party.findIndex((member) => member.id === selectedId)
+  const slot = selectedIndex < 0 ? 0 : selectedIndex % groupSize
+  return {
+    group: nextGroup,
+    selectedId: party[slot + nextGroup * groupSize]?.id ?? null,
+  }
+}

src/components/AdminScreen.tsx

@@ -1,5 +1,11 @@
 import { useEffect, useState } from 'react'
 import type { CSSProperties, Dispatch, SetStateAction } from 'react'
+import {
+  IWT2_BOSS_METADATA,
+  type Iwt2BalanceOverrides,
+  type Iwt2BossId,
+  type Iwt2BossMetadata,
+} from '../modes/iwt2/content/bosses'
 
 type AdminItem = {
   id: number
@@ -130,7 +136,38 @@ type AdminData = {
   classes: AdminClass[]
 }
 
-type AdminTab = 'items' | 'dungeons' | 'encounters' | 'loot' | 'crafting' | 'upgrades' | 'classes'
+type Iwt2AdminAsset = {
+  filename: string
+  size: number
+  url: string
+}
+
+type Iwt2AdminData = {
+  balanceOverrides: Iwt2BalanceOverrides
+  bossAssets: Iwt2AdminAsset[]
+}
+
+type Iwt2AdminAttack = {
+  name: string
+  frequency: string
+  damage: string
+  details: string
+}
+
+type Iwt2AdminEntityRow = {
+  id: string
+  bossId: Iwt2BossId
+  kind: 'boss' | 'mob'
+  name: string
+  slug: string
+  icon: string
+  color: string
+  maxHealth: number
+  attacks: Iwt2AdminAttack[]
+  assets: Iwt2AdminAsset[]
+}
+
+type AdminTab = 'items' | 'dungeons' | 'encounters' | 'loot' | 'crafting' | 'upgrades' | 'classes' | 'iwt2'
 type SavingState = Record<string, boolean>
 type SetData = Dispatch<SetStateAction<AdminData | null>>
 type SetSaving = Dispatch<SetStateAction<SavingState>>
@@ -144,6 +181,7 @@ const tabs: { id: AdminTab; label: string }[] = [
   { id: 'crafting', label: 'Crafting' },
   { id: 'upgrades', label: 'Upgrades' },
   { id: 'classes', label: 'Classes' },
+  { id: 'iwt2', label: 'IWT2' },
 ]
 
 async function fetchJson<T>(url: string, init?: RequestInit): Promise<T> {
@@ -189,6 +227,7 @@ export function AdminScreen({ onBack }: { onBack: () => void }) {
       {tab === 'crafting' && <CraftingTab data={data} setData={setData} setSaving={setSaving} saving={saving} />}
       {tab === 'upgrades' && <UpgradesTab data={data} setData={setData} setSaving={setSaving} saving={saving} />}
       {tab === 'classes' && <ClassesTab data={data} />}
+      {tab === 'iwt2' && <Iwt2AdminTab />}
     </section>
   )
 }
@@ -1155,6 +1194,196 @@ function ClassesTab({ data }: { data: AdminData }) {
   )
 }
 
+function Iwt2AdminTab() {
+  const [metadata, setMetadata] = useState<Record<Iwt2BossId, Iwt2BossMetadata>>(IWT2_BOSS_METADATA)
+  const [adminData, setAdminData] = useState<Iwt2AdminData | null>(null)
+  const [error, setError] = useState('')
+  const [selectedEntityId, setSelectedEntityId] = useState<string>('bulldrome')
+  const [draftHp, setDraftHp] = useState<Record<string, string>>({})
+  const [saving, setSaving] = useState<Record<string, boolean>>({})
+
+  useEffect(() => {
+    fetchJson<Iwt2AdminData>(`${API}/iwt2/data`)
+      .then((result) => {
+        setAdminData(result)
+        setMetadata(applyIwt2AdminOverrides(IWT2_BOSS_METADATA, result.balanceOverrides))
+      })
+      .catch((e: unknown) => {
+        setError(e instanceof Error ? e.message : 'Failed to load IWT2 admin data')
+        setAdminData({ balanceOverrides: { bosses: {} }, bossAssets: [] })
+      })
+  }, [])
+
+  const rows = createIwt2AdminRows(metadata, adminData?.bossAssets ?? [])
+  const selectedRow = rows.find((row) => row.id === selectedEntityId) ?? rows[0]
+
+  async function saveHp(row: Iwt2AdminEntityRow) {
+    const value = Number(draftHp[row.id] ?? row.maxHealth)
+    if (!Number.isFinite(value) || value <= 0) {
+      alert('HP must be greater than zero.')
+      return
+    }
+    const nextHealth = Math.round(value)
+    setSaving((prev) => ({ ...prev, [row.id]: true }))
+    try {
+      await fetchJson(`${API}/iwt2/entities/${encodeURIComponent(row.id)}/hp`, jsonRequest('PUT', { maxHealth: nextHealth }))
+      setMetadata((current) => {
+        const boss = current[row.bossId]
+        return {
+          ...current,
+          [row.bossId]: row.kind === 'boss'
+            ? { ...boss, maxHealth: nextHealth }
+            : { ...boss, birdHealth: nextHealth },
+        }
+      })
+      setDraftHp((prev) => {
+        const next = { ...prev }
+        delete next[row.id]
+        return next
+      })
+    } catch (e: unknown) {
+      alert(e instanceof Error ? e.message : 'Save failed')
+    } finally {
+      setSaving((prev) => ({ ...prev, [row.id]: false }))
+    }
+  }
+
+  return (
+    <div className="admin-panel iwt2-admin-panel">
+      {error && <p className="error-message">{error}</p>}
+      <div className="iwt2-admin-summary">
+        <span>{rows.length} mobs / bosses</span>
+        <span>{adminData?.bossAssets.length ?? 0} uploaded boss assets</span>
+        <span>HP edits write to IWT2 balance overrides</span>
+      </div>
+      <div className="iwt2-admin-layout">
+        <aside className="iwt2-admin-entity-list" aria-label="IWT2 mobs and bosses">
+          {rows.map((row) => (
+            <button
+              className={selectedRow?.id === row.id ? 'active' : ''}
+              key={row.id}
+              onClick={() => setSelectedEntityId(row.id)}
+              type="button"
+            >
+              <span className="iwt2-admin-token" style={{ '--iwt2-entity-color': row.color } as CSSProperties}>{row.icon}</span>
+              <span>
+                <strong>{row.name}</strong>
+                <small>{row.kind} · {row.maxHealth} hp · {row.attacks.length} attacks</small>
+              </span>
+            </button>
+          ))}
+        </aside>
+        {selectedRow && (
+          <Iwt2AdminDetail
+            draftHp={draftHp}
+            row={selectedRow}
+            saveHp={saveHp}
+            saving={saving}
+            setDraftHp={setDraftHp}
+          />
+        )}
+      </div>
+    </div>
+  )
+}
+
+function Iwt2AdminDetail({
+  draftHp,
+  row,
+  saveHp,
+  saving,
+  setDraftHp,
+}: {
+  draftHp: Record<string, string>
+  row: Iwt2AdminEntityRow
+  saveHp: (row: Iwt2AdminEntityRow) => void
+  saving: Record<string, boolean>
+  setDraftHp: Dispatch<SetStateAction<Record<string, string>>>
+}) {
+  const value = draftHp[row.id] ?? String(row.maxHealth)
+  const changed = Number(value) !== row.maxHealth
+
+  return (
+    <section className="iwt2-admin-detail">
+      <header className="iwt2-admin-detail-hero">
+        <span className="iwt2-admin-token" style={{ '--iwt2-entity-color': row.color } as CSSProperties}>{row.icon}</span>
+        <div>
+          <p className="eyebrow">{row.kind}</p>
+          <h2>{row.name}</h2>
+          <small>{row.slug} · source boss: {row.bossId}</small>
+        </div>
+      </header>
+
+      <label className="iwt2-admin-hp">
+        HP
+        <input
+          min="1"
+          step="1"
+          type="number"
+          value={value}
+          onChange={(event) => setDraftHp((prev) => ({ ...prev, [row.id]: event.target.value }))}
+        />
+        <button
+          className="primary-button"
+          disabled={!changed || saving[row.id]}
+          onClick={() => saveHp(row)}
+          type="button"
+        >
+          {saving[row.id] ? 'Saving...' : 'Save HP'}
+        </button>
+      </label>
+
+      <section className="iwt2-admin-section">
+        <div className="iwt2-admin-section-heading">
+          <h3>Assets</h3>
+          <span>{row.assets.length} uploaded</span>
+        </div>
+        <div className="iwt2-admin-assets">
+          <div className="iwt2-admin-swatch" style={{ '--iwt2-entity-color': row.color } as CSSProperties}>
+            <span>{row.icon}</span>
+            <strong>Runtime Token</strong>
+            <small>Icon and color used by current arena renderer.</small>
+          </div>
+          {row.assets.length > 0 ? row.assets.map((asset) => {
+            const label = iwt2AssetLabel(asset.filename)
+            return (
+              <a href={asset.url} key={asset.filename} target="_blank" rel="noreferrer">
+                <img src={asset.url} alt={`${row.name} ${label}`} />
+                <strong>{label}</strong>
+                <small>{asset.filename}</small>
+              </a>
+            )
+          }) : (
+            <p className="admin-item-desc">No uploaded raster asset matched. Runtime uses shape, icon, and color.</p>
+          )}
+        </div>
+      </section>
+
+      <section className="iwt2-admin-section">
+        <div className="iwt2-admin-section-heading">
+          <h3>Attacks</h3>
+          <span>{row.attacks.length} mechanics</span>
+        </div>
+        <div className="iwt2-admin-attacks">
+          <div className="iwt2-admin-attack-head">
+            <span>Attack</span>
+            <span>Frequency</span>
+            <span>Damage</span>
+          </div>
+          {row.attacks.map((attack) => (
+            <div className="iwt2-admin-attack-row" key={`${row.id}-${attack.name}`}>
+              <strong>{attack.name}</strong>
+              <span>{attack.frequency}</span>
+              <span>{attack.damage}</span>
+              <small>{attack.details}</small>
+            </div>
+          ))}
+        </div>
+      </section>
+    </section>
+  )
+}
+
 function jsonRequest(method: 'POST' | 'PUT', body: unknown): RequestInit {
   return {
     method,
@@ -1163,6 +1392,133 @@ function jsonRequest(method: 'POST' | 'PUT', body: unknown): RequestInit {
   }
 }
 
+function applyIwt2AdminOverrides(
+  metadata: Record<Iwt2BossId, Iwt2BossMetadata>,
+  overrides: Iwt2BalanceOverrides,
+): Record<Iwt2BossId, Iwt2BossMetadata> {
+  return (Object.keys(metadata) as Iwt2BossId[]).reduce((nextMetadata, bossId) => ({
+    ...nextMetadata,
+    [bossId]: {
+      ...metadata[bossId],
+      ...overrides.bosses?.[bossId],
+    },
+  }), {} as Record<Iwt2BossId, Iwt2BossMetadata>)
+}
+
+function createIwt2AdminRows(
+  metadata: Record<Iwt2BossId, Iwt2BossMetadata>,
+  bossAssets: Iwt2AdminAsset[],
+): Iwt2AdminEntityRow[] {
+  const bosses = Object.values(metadata).map((boss): Iwt2AdminEntityRow => ({
+    assets: assetsForIwt2Boss(boss.id, bossAssets),
+    attacks: bossAttacks(boss),
+    bossId: boss.id,
+    color: boss.color,
+    icon: boss.icon,
+    id: boss.id,
+    kind: 'boss',
+    maxHealth: boss.maxHealth,
+    name: boss.name,
+    slug: boss.id,
+  }))
+  const yian = metadata['yian-kut-ku']
+  if (!yian.birdHealth) return bosses
+  return [
+    ...bosses,
+    {
+      assets: [],
+      attacks: yianBirdAttacks(yian),
+      bossId: yian.id,
+      color: '#f0b84f',
+      icon: 'v',
+      id: `${yian.id}:yian-bird`,
+      kind: 'mob',
+      maxHealth: yian.birdHealth,
+      name: 'Yian Kut Ku Hatchling',
+      slug: 'yian-bird',
+    },
+  ]
+}
+
+function bossAttacks(boss: Iwt2BossMetadata): Iwt2AdminAttack[] {
+  const attacks: Iwt2AdminAttack[] = [{
+    damage: `${boss.meleeDamage}`,
+    details: `Range ${boss.meleeRange}px`,
+    frequency: `${formatSeconds(boss.meleeCooldown)} cooldown`,
+    name: 'Melee',
+  }]
+  if (boss.chargeCooldown > 0) {
+    attacks.push({
+      damage: `${boss.chargeDamage}`,
+      details: `${formatSeconds(boss.chargeWindup)} windup, ${formatSeconds(boss.chargeStunSeconds)} stun / knockdown`,
+      frequency: `${formatSeconds(boss.chargeCooldown)} cooldown`,
+      name: 'Charge',
+    })
+  }
+  if (boss.slamDamage > 0) {
+    attacks.push({
+      damage: `${boss.slamDamage}`,
+      details: `${boss.slamRadius}px radius, ${formatSeconds(boss.slamStunSeconds)} stun / knockdown`,
+      frequency: 'Every 3rd charge',
+      name: 'Ground Slam',
+    })
+  }
+  if (boss.fireballCooldown && boss.fireballDamage) {
+    attacks.push({
+      damage: `${boss.fireballDamage} hit + ${boss.firePuddleDamage ?? 0}/tick puddle`,
+      details: `${boss.firePuddleRadius ?? 0}px puddle for ${formatSeconds(boss.firePuddleSeconds ?? 0)}`,
+      frequency: `${formatSeconds(boss.fireballCooldown)} cooldown`,
+      name: 'Fireball',
+    })
+  }
+  if (boss.birdWaveThresholds?.length) {
+    attacks.push({
+      damage: `${boss.birdContactDamage ?? 0} contact`,
+      details: `${boss.birdWaveThresholds.map((threshold) => `${Math.round(threshold * 100)}%`).join(', ')} HP thresholds`,
+      frequency: 'Health threshold',
+      name: 'Bird Wave',
+    })
+  }
+  return attacks
+}
+
+function yianBirdAttacks(boss: Iwt2BossMetadata): Iwt2AdminAttack[] {
+  return [
+    {
+      damage: `${boss.birdContactDamage ?? 0}`,
+      details: `Contact radius ${boss.birdRadius ?? 0}px`,
+      frequency: '1.15s cooldown',
+      name: 'Peck',
+    },
+    {
+      damage: '10',
+      details: `${formatSeconds(boss.birdFlightWindup ?? 0)} windup, ${formatSeconds(boss.birdStunSeconds ?? 0)} stun`,
+      frequency: `${formatSeconds(boss.birdFlightCooldown ?? 0)} cooldown`,
+      name: 'Flight Lane',
+    },
+  ]
+}
+
+function assetsForIwt2Boss(bossId: Iwt2BossId, bossAssets: Iwt2AdminAsset[]): Iwt2AdminAsset[] {
+  const terms = bossId.split('-').filter((part) => part.length > 2)
+  return bossAssets.filter((asset) => {
+    const filename = asset.filename.toLowerCase()
+    return filename.includes(bossId) || terms.some((term) => filename.includes(term))
+  })
+}
+
+function iwt2AssetLabel(filename: string) {
+  const normalized = filename.toLowerCase()
+  if (normalized.includes('approach')) return 'Approach Illustration'
+  if (normalized.includes('guardians')) return 'Party Encounter Art'
+  if (normalized.includes('boss')) return 'Boss Portrait'
+  return 'Primary Boss Art'
+}
+
+function formatSeconds(value: number) {
+  return `${Number.isInteger(value) ? value.toFixed(0) : value.toFixed(2).replace(/0$/, '')}s`
+}
+
 function fileToDataUrl(file: File) {
   return new Promise<string>((resolve, reject) => {
     const reader = new FileReader()

src/components/ControllerIcons.tsx

@@ -1,4 +1,4 @@
-import type { CSSProperties } from 'react'
+import { memo, type CSSProperties } from 'react'
 import {
   bindingLabel,
   compactBindingLabel,
@@ -31,7 +31,7 @@ function faceButtonFor(binding: string, iconStyle: ControllerIconStyle) {
   return FACE_BUTTONS[iconStyle][Number(binding.slice(6))] ?? null
 }
 
-function FaceIcon({
+const FaceIcon = memo(function FaceIcon({
   color,
   iconStyle,
   label,
@@ -52,9 +52,9 @@ function FaceIcon({
       {label}
     </span>
   )
-}
+})
 
-export function ControllerBindingLabel({
+export const ControllerBindingLabel = memo(function ControllerBindingLabel({
   binding,
   compact = false,
   iconStyle,
@@ -78,9 +78,9 @@ export function ControllerBindingLabel({
   }
 
   return <>{compact ? compactBindingLabel(binding, iconStyle) : title}</>
-}
+})
 
-export function ControllerStylePreview({ iconStyle }: { iconStyle: ControllerIconStyle }) {
+export const ControllerStylePreview = memo(function ControllerStylePreview({ iconStyle }: { iconStyle: ControllerIconStyle }) {
   return (
     <span className="controller-style-preview" aria-hidden="true">
       {[0, 1, 2, 3].map((button) => {
@@ -99,4 +99,4 @@ export function ControllerStylePreview({ iconStyle }: { iconStyle: ControllerIco
       })}
     </span>
   )
-}
+})

src/components/CustomizeScreen.tsx

@@ -1,10 +1,11 @@
-import { useEffect, useMemo, useRef, useState } from 'react'
+import { useEffect, useMemo, useRef, useState, type CSSProperties } from 'react'
 import {
   saveProfile,
   type CharacterProfile,
   type GameClass,
 } from '../profile'
 import { useDualScreen, useDualScreenWorkshopPublisher, type DualScreenWorkshopState } from '../dualScreen'
+import { useGameAction, type InputAction } from '../input'
 import { EquipmentScreen } from './EquipmentScreen'
 import { TalentScreen } from './TalentScreen'
 
@@ -14,20 +15,121 @@ type Props = {
   onSaved: (profile: CharacterProfile) => void
 }
 
+type CustomizeTab = 'equipment' | 'crafting' | 'talents' | 'class'
+
+type CustomizeNavEntry =
+  | { kind: 'back'; key: string; row: number; column: number }
+  | { kind: 'tab'; key: string; row: number; column: number; tab: CustomizeTab }
+  | { kind: 'class'; key: string; row: number; column: number; classId: number }
+  | { kind: 'slot'; key: string; row: number; column: number; slotIndex: number }
+  | { kind: 'clear'; key: string; row: number; column: number }
+  | { kind: 'abilityPagePrev'; key: string; row: number; column: number }
+  | { kind: 'abilityPageNext'; key: string; row: number; column: number }
+  | { kind: 'ability'; key: string; row: number; column: number; abilityId: number }
+  | { kind: 'save'; key: string; row: number; column: number }
+
+const CUSTOMIZE_TABS: Array<{ key: CustomizeTab; label: string }> = [
+  { key: 'equipment', label: 'Equipment' },
+  { key: 'crafting', label: 'Crafting' },
+  { key: 'talents', label: 'Talents' },
+  { key: 'class', label: 'Class' },
+]
+
+const CLASS_PICKER_COLUMN = 0
+const CLASS_CONTENT_COLUMN = 2
+const ABILITY_LIBRARY_COLUMNS = 5
+const ABILITY_LIBRARY_PAGE_SIZE = 10
+
 export function CustomizeScreen({ profile, onBack, onSaved }: Props) {
-  const [activeTab, setActiveTab] = useState<'equipment' | 'crafting' | 'talents' | 'class'>('class')
+  const [activeTab, setActiveTab] = useState<CustomizeTab>('class')
   const { enabled: dualScreenEnabled } = useDualScreen()
   const [classId, setClassId] = useState(profile.character.classId)
   const [slots, setSlots] = useState<Array<number | null>>(profile.abilitySlots)
   const [selectedSlot, setSelectedSlot] = useState(0)
+  const [selectedNavKey, setSelectedNavKey] = useState('tab:class')
+  const [abilityPage, setAbilityPage] = useState(0)
   const [message, setMessage] = useState('')
   const [saving, setSaving] = useState(false)
   const scrollRef = useRef<number>(0)
+  const navRefs = useRef<Record<string, HTMLElement | null>>({})
   const gameClass = profile.classes.find((candidate) => candidate.id === classId)!
   const abilityMap = useMemo(
     () => new Map(gameClass.spells.map((ability) => [ability.id, ability])),
     [gameClass],
   )
+  const abilityPageCount = Math.max(1, Math.ceil(gameClass.spells.length / ABILITY_LIBRARY_PAGE_SIZE))
+  const currentAbilityPage = Math.min(abilityPage, abilityPageCount - 1)
+  const visibleAbilities = useMemo(
+    () => gameClass.spells.slice(
+      currentAbilityPage * ABILITY_LIBRARY_PAGE_SIZE,
+      currentAbilityPage * ABILITY_LIBRARY_PAGE_SIZE + ABILITY_LIBRARY_PAGE_SIZE,
+    ),
+    [currentAbilityPage, gameClass.spells],
+  )
+  const classNavActive = activeTab === 'class'
+  const navEntries = useMemo<CustomizeNavEntry[]>(() => {
+    const entries: CustomizeNavEntry[] = [
+      { kind: 'back', key: 'back', row: 0, column: 0 },
+      ...CUSTOMIZE_TABS.map((tab, index) => ({
+        kind: 'tab' as const,
+        key: `tab:${tab.key}`,
+        row: 0,
+        column: index + 1,
+        tab: tab.key,
+      })),
+    ]
+    if (activeTab !== 'class') return entries
+
+    entries.push(
+      ...profile.classes.map((candidate, index) => ({
+        kind: 'class' as const,
+        key: `class:${candidate.id}`,
+        row: index + 1,
+        column: CLASS_PICKER_COLUMN,
+        classId: candidate.id,
+      })),
+      ...slots.map((_, index) => ({
+        kind: 'slot' as const,
+        key: `slot:${index}`,
+        row: 1,
+        column: CLASS_CONTENT_COLUMN + index,
+        slotIndex: index,
+      })),
+      { kind: 'clear', key: 'clear-slot', row: 2, column: CLASS_CONTENT_COLUMN + 4 },
+      ...(abilityPageCount > 1 && currentAbilityPage > 0
+        ? [{ kind: 'abilityPagePrev' as const, key: 'ability-page-prev', row: 2, column: CLASS_CONTENT_COLUMN + 2 }]
+        : []),
+      ...(abilityPageCount > 1 && currentAbilityPage < abilityPageCount - 1
+        ? [{ kind: 'abilityPageNext' as const, key: 'ability-page-next', row: 2, column: CLASS_CONTENT_COLUMN + 3 }]
+        : []),
+      ...visibleAbilities
+        .filter((ability) => ability.unlockLevel <= profile.character.level)
+        .map((ability, index) => ({
+          kind: 'ability' as const,
+          key: `ability:${ability.id}`,
+          row: Math.floor(index / ABILITY_LIBRARY_COLUMNS) + 3,
+          column: CLASS_CONTENT_COLUMN + (index % ABILITY_LIBRARY_COLUMNS),
+          abilityId: ability.id,
+        })),
+    )
+    if (!saving) {
+      entries.push({ kind: 'save', key: 'save', row: 99, column: CLASS_CONTENT_COLUMN + 4 })
+    }
+    return entries
+  }, [abilityPageCount, activeTab, currentAbilityPage, profile.character.level, profile.classes, saving, slots, visibleAbilities])
+  const activeEntry = navEntries.find((entry) => entry.key === selectedNavKey)
+    ?? navEntries.find((entry) => entry.key === `tab:${activeTab}`)
+    ?? navEntries[0]
+
+  function selected(entryKey: string) {
+    return classNavActive && activeEntry?.key === entryKey
+  }
+
+  function navRef(entryKey: string) {
+    return (node: HTMLElement | null) => {
+      navRefs.current[entryKey] = node
+    }
+  }
 
   useEffect(() => {
     window.scrollTo(0, scrollRef.current)
@@ -45,9 +147,15 @@ export function CustomizeScreen({ profile, onBack, onSaved }: Props) {
     setClassId(nextClass.id)
     setSlots([...starterAbilities, ...Array(6 - starterAbilities.length).fill(null)])
     setSelectedSlot(0)
+    setAbilityPage(0)
     setMessage('')
   }
 
+  function selectTab(tab: CustomizeTab) {
+    setActiveTab(tab)
+    setSelectedNavKey(`tab:${tab}`)
+  }
+
   function equipAbility(abilityId: number) {
     if (slots.includes(abilityId)) {
       setMessage('That ability is already equipped.')
@@ -65,6 +173,66 @@ export function CustomizeScreen({ profile, onBack, onSaved }: Props) {
     )
   }
 
+  function moveSelection(action: InputAction) {
+    if (!action.startsWith('navigate') || navEntries.length === 0 || !activeEntry) return
+    const activeIndex = Math.max(0, navEntries.findIndex((entry) => entry.key === activeEntry.key))
+    const candidates = navEntries
+      .map((entry, index) => ({ entry, index }))
+      .filter(({ index }) => index !== activeIndex)
+      .filter(({ entry }) => {
+        if (action === 'navigateLeft') return entry.column < activeEntry.column
+        if (action === 'navigateRight') return entry.column > activeEntry.column
+        if (action === 'navigateUp') return entry.row < activeEntry.row
+        return entry.row > activeEntry.row
+      })
+    if (candidates.length === 0) return
+    candidates.sort((a, b) => {
+      const aPrimary = Math.abs(a.entry.row - activeEntry.row) + Math.abs(a.entry.column - activeEntry.column)
+      const bPrimary = Math.abs(b.entry.row - activeEntry.row) + Math.abs(b.entry.column - activeEntry.column)
+      const aSecondary = action === 'navigateLeft' || action === 'navigateRight'
+        ? Math.abs(a.entry.row - activeEntry.row)
+        : Math.abs(a.entry.column - activeEntry.column)
+      const bSecondary = action === 'navigateLeft' || action === 'navigateRight'
+        ? Math.abs(b.entry.row - activeEntry.row)
+        : Math.abs(b.entry.column - activeEntry.column)
+      return aPrimary - bPrimary || aSecondary - bSecondary || a.index - b.index
+    })
+    setSelectedNavKey(candidates[0]?.entry.key ?? activeEntry.key)
+  }
+
+  function openEntry(entry: CustomizeNavEntry | undefined) {
+    if (!entry) return
+    if (entry.kind === 'back') onBack()
+    else if (entry.kind === 'tab') selectTab(entry.tab)
+    else if (entry.kind === 'class') {
+      const nextClass = profile.classes.find((candidate) => candidate.id === entry.classId)
+      if (nextClass) chooseClass(nextClass)
+    } else if (entry.kind === 'slot') setSelectedSlot(entry.slotIndex)
+    else if (entry.kind === 'clear') clearSlot()
+    else if (entry.kind === 'abilityPagePrev') setAbilityPage((page) => Math.max(0, page - 1))
+    else if (entry.kind === 'abilityPageNext') setAbilityPage((page) => Math.min(abilityPageCount - 1, page + 1))
+    else if (entry.kind === 'ability') equipAbility(entry.abilityId)
+    else if (entry.kind === 'save') void persistChanges()
+  }
+
+  useEffect(() => {
+    if (!classNavActive) return
+    navRefs.current[activeEntry?.key ?? '']?.scrollIntoView({ block: 'nearest', inline: 'nearest' })
+  }, [activeEntry, classNavActive])
+
+  useGameAction((action, device) => {
+    if (device !== 'controller' || !classNavActive) return
+    if (action === 'back') {
+      onBack()
+      return
+    }
+    if (action === 'confirm') {
+      openEntry(activeEntry)
+      return
+    }
+    moveSelection(action)
+  })
+
   const classWorkshopState = useMemo<DualScreenWorkshopState | null>(() => {
     if (activeTab !== 'class') return null
     return {
@@ -104,28 +272,46 @@ export function CustomizeScreen({ profile, onBack, onSaved }: Props) {
   }
 
   return (
-    <section className="content-screen customize-screen">
+    <section className="content-screen customize-screen" data-game-nav-active={classNavActive ? 'true' : undefined}>
       <div className="screen-heading customize-heading">
         <div>
           <p className="eyebrow">Character Workshop</p>
           <h1>Customize Character</h1>
         </div>
-        <button className="back-button" onClick={onBack} type="button">Back</button>
+        <button
+          className={`back-button ${selected('back') ? 'game-selected' : ''}`}
+          data-controller-nav={classNavActive ? 'skip' : undefined}
+          data-game-selected={selected('back') ? 'true' : undefined}
+          onClick={onBack}
+          onPointerDown={() => setSelectedNavKey('back')}
+          ref={navRef('back')}
+          type="button"
+        >
+          Back
+        </button>
       </div>
 
       <div className="customize-tabs" role="tablist" aria-label="Customize character sections">
-        <button className="back-button customize-tab-back" onClick={onBack} type="button">Back</button>
-        {([
-          { key: 'equipment', label: 'Equipment' },
-          { key: 'crafting', label: 'Crafting' },
-          { key: 'talents', label: 'Talents' },
-          { key: 'class', label: 'Class' },
-        ] as const).map((tab) => (
+        <button
+          className={`back-button customize-tab-back ${selected('back') ? 'game-selected' : ''}`}
+          data-controller-nav={classNavActive ? 'skip' : undefined}
+          data-game-selected={selected('back') ? 'true' : undefined}
+          onClick={onBack}
+          onPointerDown={() => setSelectedNavKey('back')}
+          type="button"
+        >
+          Back
+        </button>
+        {CUSTOMIZE_TABS.map((tab) => (
           <button
             aria-selected={activeTab === tab.key}
-            className={activeTab === tab.key ? 'active' : ''}
+            className={`${activeTab === tab.key ? 'active' : ''} ${selected(`tab:${tab.key}`) ? 'game-selected' : ''}`}
+            data-controller-nav={classNavActive ? 'skip' : undefined}
+            data-game-selected={selected(`tab:${tab.key}`) ? 'true' : undefined}
             key={tab.key}
-            onClick={() => setActiveTab(tab.key)}
+            onClick={() => selectTab(tab.key)}
+            onPointerDown={() => setSelectedNavKey(`tab:${tab.key}`)}
+            ref={navRef(`tab:${tab.key}`)}
             role="tab"
             type="button"
           >
@@ -168,10 +354,14 @@ export function CustomizeScreen({ profile, onBack, onSaved }: Props) {
             <p className="eyebrow">Healing Class</p>
             {profile.classes.map((candidate) => (
               <button
-                className={candidate.id === classId ? 'active' : ''}
+                className={`${candidate.id === classId ? 'active' : ''} ${selected(`class:${candidate.id}`) ? 'game-selected' : ''}`}
+                data-controller-nav="skip"
+                data-game-selected={selected(`class:${candidate.id}`) ? 'true' : undefined}
                 key={candidate.id}
                 onClick={() => chooseClass(candidate)}
-                style={{ '--class-color': candidate.themeColor } as React.CSSProperties}
+                onPointerDown={() => setSelectedNavKey(`class:${candidate.id}`)}
+                ref={navRef(`class:${candidate.id}`)}
+                style={{ '--class-color': candidate.themeColor } as CSSProperties}
                 type="button"
               >
                 <span>{candidate.name[0]}</span>
@@ -211,9 +401,13 @@ export function CustomizeScreen({ profile, onBack, onSaved }: Props) {
                 const ability = abilityId ? abilityMap.get(abilityId) : undefined
                 return (
                   <button
-                    className={selectedSlot === index ? 'selected' : ''}
+                    className={`${selectedSlot === index ? 'selected' : ''} ${selected(`slot:${index}`) ? 'game-selected' : ''}`}
+                    data-controller-nav="skip"
+                    data-game-selected={selected(`slot:${index}`) ? 'true' : undefined}
                     key={index}
                     onClick={() => setSelectedSlot(index)}
+                    onPointerDown={() => setSelectedNavKey(`slot:${index}`)}
+                    ref={navRef(`slot:${index}`)}
                     type="button"
                   >
                     <kbd>{index + 1}</kbd>
@@ -229,19 +423,64 @@ export function CustomizeScreen({ profile, onBack, onSaved }: Props) {
                 <p className="eyebrow">Class Abilities</p>
                 <h2>Ability Library</h2>
               </div>
-              <button className="text-button" onClick={clearSlot} type="button">Clear Selected Slot</button>
+              <div className="ability-library-actions">
+                {abilityPageCount > 1 && (
+                  <div className="ability-library-pager">
+                    <button
+                      className={`text-button ${selected('ability-page-prev') ? 'game-selected' : ''}`}
+                      data-controller-nav="skip"
+                      data-game-selected={selected('ability-page-prev') ? 'true' : undefined}
+                      disabled={currentAbilityPage === 0}
+                      onClick={() => setAbilityPage((page) => Math.max(0, page - 1))}
+                      onPointerDown={() => setSelectedNavKey('ability-page-prev')}
+                      ref={navRef('ability-page-prev')}
+                      type="button"
+                    >
+                      Prev
+                    </button>
+                    <span>{currentAbilityPage + 1}/{abilityPageCount}</span>
+                    <button
+                      className={`text-button ${selected('ability-page-next') ? 'game-selected' : ''}`}
+                      data-controller-nav="skip"
+                      data-game-selected={selected('ability-page-next') ? 'true' : undefined}
+                      disabled={currentAbilityPage >= abilityPageCount - 1}
+                      onClick={() => setAbilityPage((page) => Math.min(abilityPageCount - 1, page + 1))}
+                      onPointerDown={() => setSelectedNavKey('ability-page-next')}
+                      ref={navRef('ability-page-next')}
+                      type="button"
+                    >
+                      Next
+                    </button>
+                  </div>
+                )}
+                <button
+                  className={`text-button ${selected('clear-slot') ? 'game-selected' : ''}`}
+                  data-controller-nav="skip"
+                  data-game-selected={selected('clear-slot') ? 'true' : undefined}
+                  onClick={clearSlot}
+                  onPointerDown={() => setSelectedNavKey('clear-slot')}
+                  ref={navRef('clear-slot')}
+                  type="button"
+                >
+                  Clear Selected Slot
+                </button>
+              </div>
             </div>
 
             <div className="ability-library">
-              {gameClass.spells.map((ability) => {
+              {visibleAbilities.map((ability) => {
                 const locked = ability.unlockLevel > profile.character.level
                 const equipped = slots.includes(ability.id)
                 return (
                   <button
-                    className={`${locked ? 'locked' : ''} ${equipped ? 'equipped' : ''}`}
+                    className={`${locked ? 'locked' : ''} ${equipped ? 'equipped' : ''} ${selected(`ability:${ability.id}`) ? 'game-selected' : ''}`}
+                    data-controller-nav="skip"
+                    data-game-selected={selected(`ability:${ability.id}`) ? 'true' : undefined}
                     disabled={locked}
                     key={ability.id}
                     onClick={() => equipAbility(ability.id)}
+                    onPointerDown={() => setSelectedNavKey(`ability:${ability.id}`)}
+                    ref={navRef(`ability:${ability.id}`)}
                     type="button"
                   >
                     <span>{locked ? 'L' : ability.glyph}</span>
@@ -258,9 +497,13 @@ export function CustomizeScreen({ profile, onBack, onSaved }: Props) {
             <div className="save-row">
               <span>{message}</span>
               <button
-                className="primary-button"
+                className={`primary-button ${selected('save') ? 'game-selected' : ''}`}
+                data-controller-nav="skip"
+                data-game-selected={selected('save') ? 'true' : undefined}
                 disabled={saving}
                 onClick={persistChanges}
+                onPointerDown={() => setSelectedNavKey('save')}
+                ref={navRef('save')}
                 type="button"
               >
                 {saving ? 'Saving...' : 'Save Character'}

src/components/EquipmentScreen.tsx

@@ -84,6 +84,7 @@ export function EquipmentScreen({
   const [upgrading, setUpgrading] = useState(false)
   const [showSetBonuses, setShowSetBonuses] = useState(false)
   const [equipmentTab, setEquipmentTab] = useState<'equipment' | 'crafting'>(mode ?? 'equipment')
+  const activeEquipmentTab = mode ?? equipmentTab
   const [inventoryPage, setInventoryPage] = useState(0)
   const [recipePage, setRecipePage] = useState(0)
   const [message, setMessage] = useState('')
@@ -97,10 +98,6 @@ export function EquipmentScreen({
   const [selectedRecipeId, setSelectedRecipeId] = useState<number | null>(
     firstRecipe?.id ?? null,
   )
-  const selectedRecipe = profile.craftingRecipes.find((recipe) => recipe.id === selectedRecipeId)
-  const selectedRecipeRequiresUpgrade = selectedRecipe
-    ? !DIRECT_CRAFT_ITEM_LEVELS.has(selectedRecipe.item.itemLevel)
-    : false
   const selectedItemRecipe = selectedItem
     ? profile.craftingRecipes.find((recipe) => recipe.item.id === selectedItem.id)
     : undefined
@@ -132,9 +129,10 @@ export function EquipmentScreen({
     1,
     Math.ceil(visibleInventory.length / EQUIPMENT_LIST_PAGE_SIZE),
   )
+  const activeInventoryPage = Math.min(inventoryPage, inventoryPageCount - 1)
   const inventoryPageItems = visibleInventory.slice(
-    inventoryPage * EQUIPMENT_LIST_PAGE_SIZE,
-    (inventoryPage + 1) * EQUIPMENT_LIST_PAGE_SIZE,
+    activeInventoryPage * EQUIPMENT_LIST_PAGE_SIZE,
+    (activeInventoryPage + 1) * EQUIPMENT_LIST_PAGE_SIZE,
   )
 
   const [slotFilter, setSlotFilter] = useState<EquipmentSlot | 'all'>('all')
@@ -172,42 +170,28 @@ export function EquipmentScreen({
     1,
     Math.ceil(filteredRecipes.length / CRAFTING_LIST_PAGE_SIZE),
   )
+  const activeRecipePage = Math.min(recipePage, recipePageCount - 1)
   const recipePageItems = filteredRecipes.slice(
-    recipePage * CRAFTING_LIST_PAGE_SIZE,
-    (recipePage + 1) * CRAFTING_LIST_PAGE_SIZE,
+    activeRecipePage * CRAFTING_LIST_PAGE_SIZE,
+    (activeRecipePage + 1) * CRAFTING_LIST_PAGE_SIZE,
   )
+  const activeSelectedRecipeId = filteredRecipes.some((recipe) => recipe.id === selectedRecipeId)
+    ? selectedRecipeId
+    : filteredRecipes[0]?.id ?? null
+  const selectedRecipe = profile.craftingRecipes.find((recipe) => recipe.id === activeSelectedRecipeId)
+  const selectedRecipeRequiresUpgrade = selectedRecipe
+    ? !DIRECT_CRAFT_ITEM_LEVELS.has(selectedRecipe.item.itemLevel)
+    : false
 
   useEffect(() => {
     window.scrollTo(0, scrollRef.current)
   }, [profile])
 
   useEffect(() => {
-    setInventoryPage((current) => Math.min(current, inventoryPageCount - 1))
-  }, [inventoryPageCount])
-
-  useEffect(() => {
-    setRecipePage((current) => Math.min(current, recipePageCount - 1))
-  }, [recipePageCount])
-
-  useEffect(() => {
-    if (filteredRecipes.length === 0) {
-      setSelectedRecipeId(null)
-      return
-    }
-    if (!filteredRecipes.some((recipe) => recipe.id === selectedRecipeId)) {
-      setSelectedRecipeId(filteredRecipes[0].id)
-    }
-  }, [filteredRecipes, selectedRecipeId])
-
-  useEffect(() => {
-    if (equipmentTab === 'crafting') {
+    if (activeEquipmentTab === 'crafting') {
       loadProfile().then((fresh) => onUpdated(fresh)).catch(() => {})
     }
-  }, [equipmentTab])
-
-  useEffect(() => {
-    if (mode) setEquipmentTab(mode)
-  }, [mode])
+  }, [activeEquipmentTab, onUpdated])
 
   function saveScroll() {
     scrollRef.current = window.scrollY
@@ -330,7 +314,7 @@ export function EquipmentScreen({
   }
 
   const workshopState = useMemo<DualScreenWorkshopState>(() => {
-    if (equipmentTab === 'crafting') {
+    if (activeEquipmentTab === 'crafting') {
       if (!selectedRecipe) {
         return {
           mode: 'crafting',
@@ -416,7 +400,7 @@ export function EquipmentScreen({
             : []),
         ],
     }
-  }, [comparisonItem, equipmentTab, selectedItem, selectedRecipe, upgradeRecipe])
+  }, [activeEquipmentTab, comparisonItem, selectedItem, selectedRecipe, upgradeRecipe])
 
   useDualScreenWorkshopPublisher(workshopState, dualScreenEnabled)
 
@@ -449,14 +433,14 @@ export function EquipmentScreen({
       {showModeTabs && (
         <nav className="equipment-tabs">
           <button
-            className={`equipment-tab ${equipmentTab === 'equipment' ? 'active' : ''}`}
+            className={`equipment-tab ${activeEquipmentTab === 'equipment' ? 'active' : ''}`}
             onClick={() => setEquipmentTab('equipment')}
             type="button"
           >
             Equipment
           </button>
           <button
-            className={`equipment-tab ${equipmentTab === 'crafting' ? 'active' : ''}`}
+            className={`equipment-tab ${activeEquipmentTab === 'crafting' ? 'active' : ''}`}
             onClick={() => setEquipmentTab('crafting')}
             type="button"
           >
@@ -465,7 +449,7 @@ export function EquipmentScreen({
         </nav>
       )}
 
-      {equipmentTab === 'equipment' ? (
+      {activeEquipmentTab === 'equipment' ? (
         <>
           <section className="item-comparison">
             {selectedItem ? (
@@ -577,11 +561,11 @@ export function EquipmentScreen({
               </div>
               {visibleInventory.length > EQUIPMENT_LIST_PAGE_SIZE && (
                 <ListPager
-                  label={`Page ${inventoryPage + 1} / ${inventoryPageCount}`}
-                  onNext={() => setInventoryPage((current) => Math.min(inventoryPageCount - 1, current + 1))}
-                  onPrevious={() => setInventoryPage((current) => Math.max(0, current - 1))}
-                  nextDisabled={inventoryPage >= inventoryPageCount - 1}
-                  previousDisabled={inventoryPage <= 0}
+                  label={`Page ${activeInventoryPage + 1} / ${inventoryPageCount}`}
+                  onNext={() => setInventoryPage(Math.min(inventoryPageCount - 1, activeInventoryPage + 1))}
+                  onPrevious={() => setInventoryPage(Math.max(0, activeInventoryPage - 1))}
+                  nextDisabled={activeInventoryPage >= inventoryPageCount - 1}
+                  previousDisabled={activeInventoryPage <= 0}
                 />
               )}
             </section>
@@ -666,7 +650,7 @@ export function EquipmentScreen({
                 <EquipmentHeading
                   eyebrow="Available Gear"
                   title={slotFilter === 'all' ? 'Craftable Gear' : SLOT_LABELS[slotFilter]}
-                  detail={`Page ${recipePage + 1}/${recipePageCount}`}
+                  detail={`Page ${activeRecipePage + 1}/${recipePageCount}`}
                 />
                 {filteredRecipes.length === 0 ? (
                   <p className="inventory-empty">No recipes match filters.</p>
@@ -674,7 +658,7 @@ export function EquipmentScreen({
                   <div className="crafting-list">
                   {recipePageItems.map((recipe) => (
                     <button
-                      className={`${selectedRecipeId === recipe.id ? 'selected' : ''} rarity-${recipe.item.rarity}`}
+                      className={`${activeSelectedRecipeId === recipe.id ? 'selected' : ''} rarity-${recipe.item.rarity}`}
                       key={recipe.id}
                       onClick={() => setSelectedRecipeId(recipe.id)}
                       type="button"
@@ -696,11 +680,11 @@ export function EquipmentScreen({
                 )}
                 {filteredRecipes.length > CRAFTING_LIST_PAGE_SIZE && (
                   <ListPager
-                    label={`Page ${recipePage + 1} / ${recipePageCount}`}
-                    onNext={() => setRecipePage((current) => Math.min(recipePageCount - 1, current + 1))}
-                    onPrevious={() => setRecipePage((current) => Math.max(0, current - 1))}
-                    nextDisabled={recipePage >= recipePageCount - 1}
-                    previousDisabled={recipePage <= 0}
+                    label={`Page ${activeRecipePage + 1} / ${recipePageCount}`}
+                    onNext={() => setRecipePage(Math.min(recipePageCount - 1, activeRecipePage + 1))}
+                    onPrevious={() => setRecipePage(Math.max(0, activeRecipePage - 1))}
+                    nextDisabled={activeRecipePage >= recipePageCount - 1}
+                    previousDisabled={activeRecipePage <= 0}
                   />
                 )}
                 <div className="crafting-action-row">
@@ -748,7 +732,7 @@ export function EquipmentScreen({
         </section>
       )}
 
-      {equipmentTab === 'equipment' && profile.setBonuses.length > 0 && (
+      {activeEquipmentTab === 'equipment' && profile.setBonuses.length > 0 && (
         <section className="set-bonus-panel">
           <div className="equipment-heading toggle-heading">
             <div>
@@ -784,11 +768,11 @@ export function EquipmentScreen({
   )
 
   if (embedded) {
-    return <div className={`equipment-screen embedded-screen ${equipmentTab === 'crafting' ? 'crafting-active' : ''}`}>{content}</div>
+    return <div className={`equipment-screen embedded-screen ${activeEquipmentTab === 'crafting' ? 'crafting-active' : ''}`}>{content}</div>
   }
 
   return (
-    <section className={`content-screen equipment-screen ${equipmentTab === 'crafting' ? 'crafting-active' : ''}`}>
+    <section className={`content-screen equipment-screen ${activeEquipmentTab === 'crafting' ? 'crafting-active' : ''}`}>
       {content}
     </section>
   )

src/components/HunterProfileScreen.tsx

@@ -0,0 +1,408 @@
+import { useEffect, useMemo, useRef, useState } from 'react'
+import type { CharacterProfile, DungeonEncounter } from '../profile'
+import { useDualScreen, useDualScreenWorkshopPublisher, type DualScreenWorkshopState } from '../dualScreen'
+import { useGameAction, type InputAction } from '../input'
+
+type HunterProfileScreenProps = {
+  profile: CharacterProfile
+  onBack: () => void
+}
+
+type BossEntry = {
+  encounter: DungeonEncounter
+  dungeonId: number
+  dungeonName: string
+  contentType: 'dungeon' | 'raid'
+}
+
+type CollectionItem = {
+  key: string
+  glyph: string
+  name: string
+  chance: string
+  quantity: number
+  rarity: 'stat' | 'common' | 'uncommon' | 'rare' | 'epic' | 'legendary'
+  source: string
+}
+
+type HunterProfileTab = 'stats' | 'collection'
+
+type HunterProfileNavEntry =
+  | { kind: 'back'; key: string; row: number; column: number }
+  | { kind: 'tab'; key: string; row: number; column: number; tab: HunterProfileTab }
+  | { kind: 'stat'; key: string; row: number; column: number; index: number }
+  | { kind: 'boss'; key: string; row: number; column: number; bossId: number }
+  | { kind: 'item'; key: string; row: number; column: number; itemKey: string }
+
+const HUNTER_PROFILE_DROP_COLUMNS = 6
+
+function bossInitials(name: string) {
+  return name
+    .split(/\s+/)
+    .filter(Boolean)
+    .slice(0, 2)
+    .map((part) => part[0]?.toUpperCase() ?? '')
+    .join('')
+}
+
+function dropChanceLabel(chance: number) {
+  if (chance <= 0) return 'Unavailable'
+  const denominator = Math.round(1 / chance)
+  if (denominator >= 10) return `1 in ${denominator}`
+  return `${Math.round(chance * 100)}%`
+}
+
+function purplePetKey(encounterId: number) {
+  return `purple:${encounterId}`
+}
+
+export function HunterProfileScreen({ profile, onBack }: HunterProfileScreenProps) {
+  const [activeTab, setActiveTab] = useState<HunterProfileTab>('stats')
+  const [selectedIndex, setSelectedIndex] = useState(1)
+  const screenRef = useRef<HTMLElement | null>(null)
+  const { enabled: dualScreenEnabled } = useDualScreen()
+  const bosses = useMemo<BossEntry[]>(() => profile.dungeons.flatMap((dungeon) =>
+    dungeon.encounters
+      .filter((encounter) => encounter.isBoss)
+      .map((encounter) => ({
+        encounter,
+        dungeonId: dungeon.id,
+        dungeonName: dungeon.name,
+        contentType: dungeon.contentType,
+      })),
+  ), [profile.dungeons])
+  const [selectedBossId, setSelectedBossId] = useState(() => bosses[0]?.encounter.id ?? 0)
+  const [focusedItemKey, setFocusedItemKey] = useState<string | null>(null)
+  const selectedBoss = bosses.find((boss) => boss.encounter.id === selectedBossId) ?? bosses[0]
+  const bossKills = useMemo(() => profile.hunterStats?.bossKills ?? {}, [profile.hunterStats?.bossKills])
+  const bossPets = useMemo(() => profile.hunterStats?.bossPets ?? {}, [profile.hunterStats?.bossPets])
+  const inventoryQuantities = useMemo(
+    () => new Map(profile.inventory.map((item) => [item.id, item.quantity])),
+    [profile.inventory],
+  )
+  const totalBossKills = bosses.reduce((total, boss) => total + (bossKills[String(boss.encounter.id)] ?? 0), 0)
+  const mostKilledBoss = bosses.reduce<BossEntry | null>((best, boss) => {
+    if (!best) return boss
+    return (bossKills[String(boss.encounter.id)] ?? 0) > (bossKills[String(best.encounter.id)] ?? 0)
+      ? boss
+      : best
+  }, null)
+  const matchesPlayed = profile.hunterStats?.pvpMatchesPlayed ?? 0
+  const matchesWon = profile.hunterStats?.pvpMatchesWon ?? 0
+  const winRate = matchesPlayed > 0 ? Math.round((matchesWon / matchesPlayed) * 100) : 0
+  const collectionItems = useMemo<CollectionItem[]>(() => {
+    if (!selectedBoss) return []
+    return [
+      {
+        key: `kills:${selectedBoss.encounter.id}`,
+        glyph: 'K',
+        name: 'Boss Kills',
+        chance: 'Defeats',
+        quantity: bossKills[String(selectedBoss.encounter.id)] ?? 0,
+        rarity: 'stat',
+        source: selectedBoss.encounter.enemyName,
+      },
+      ...selectedBoss.encounter.lootTables.map((drop) => ({
+        key: `drop:${drop.difficultyId}:${drop.id}`,
+        glyph: drop.glyph,
+        name: drop.name,
+        chance: dropChanceLabel(drop.dropChance),
+        quantity: inventoryQuantities.get(drop.id) ?? 0,
+        rarity: drop.rarity,
+        source: selectedBoss.encounter.enemyName,
+      })),
+      {
+        key: `pet:${selectedBoss.encounter.id}`,
+        glyph: '*',
+        name: `${selectedBoss.encounter.enemyName} Pet`,
+        chance: '1 in 500',
+        quantity: bossPets[String(selectedBoss.encounter.id)] ?? 0,
+        rarity: 'legendary',
+        source: selectedBoss.encounter.enemyName,
+      },
+      {
+        key: `purple-pet:${selectedBoss.encounter.id}`,
+        glyph: 'P',
+        name: `Purple ${selectedBoss.encounter.enemyName} Pet`,
+        chance: '1 in 500',
+        quantity: bossPets[purplePetKey(selectedBoss.encounter.id)] ?? 0,
+        rarity: 'epic',
+        source: `${selectedBoss.encounter.enemyName} Roguelike`,
+      },
+    ]
+  }, [bossKills, bossPets, inventoryQuantities, selectedBoss])
+  const statTiles = useMemo(() => [
+    {
+      key: 'stat:total-kills',
+      label: 'Total Boss Kills',
+      value: totalBossKills,
+    },
+    {
+      key: 'stat:most-killed',
+      label: 'Most Killed Boss',
+      value: totalBossKills > 0 && mostKilledBoss ? mostKilledBoss.encounter.enemyName : 'None',
+      detail: totalBossKills > 0 && mostKilledBoss ? `${bossKills[String(mostKilledBoss.encounter.id)] ?? 0} kills` : '0 kills',
+    },
+    {
+      key: 'stat:pvp-matches',
+      label: 'PvP Matches',
+      value: matchesPlayed,
+    },
+    {
+      key: 'stat:pvp-wins',
+      label: 'PvP Wins',
+      value: matchesWon,
+    },
+    {
+      key: 'stat:pvp-win-rate',
+      label: 'PvP Win Rate',
+      value: `${winRate}%`,
+    },
+  ], [bossKills, matchesPlayed, matchesWon, mostKilledBoss, totalBossKills, winRate])
+  const focusedItem = collectionItems.find((item) => item.key === focusedItemKey) ?? collectionItems[0] ?? null
+  const navEntries = useMemo<HunterProfileNavEntry[]>(() => {
+    const entries: HunterProfileNavEntry[] = [
+      { kind: 'back', key: 'back', row: 0, column: 0 },
+      { kind: 'tab', key: 'tab:stats', row: 0, column: 1, tab: 'stats' },
+      { kind: 'tab', key: 'tab:collection', row: 0, column: 2, tab: 'collection' },
+    ]
+    if (activeTab === 'stats') {
+      entries.push(...statTiles.map((tile, index) => ({
+        kind: 'stat' as const,
+        key: tile.key,
+        row: 1,
+        column: index,
+        index,
+      })))
+    } else {
+      entries.push(
+        ...bosses.map((boss, index) => ({
+          kind: 'boss' as const,
+          key: `boss:${boss.encounter.id}`,
+          row: index + 1,
+          column: 0,
+          bossId: boss.encounter.id,
+        })),
+        ...collectionItems.map((item, index) => ({
+          kind: 'item' as const,
+          key: `item:${item.key}`,
+          row: Math.floor(index / HUNTER_PROFILE_DROP_COLUMNS) + 1,
+          column: (index % HUNTER_PROFILE_DROP_COLUMNS) + 1,
+          itemKey: item.key,
+        })),
+      )
+    }
+    return entries
+  }, [activeTab, bosses, collectionItems, statTiles])
+  const activeIndex = Math.min(selectedIndex, Math.max(0, navEntries.length - 1))
+  const activeEntry = navEntries[activeIndex]
+  const itemDetailState = useMemo<DualScreenWorkshopState | null>(() => {
+    if (activeTab !== 'collection' || !selectedBoss || !focusedItem) return null
+    return {
+      mode: 'collection',
+      title: focusedItem.name,
+      subtitle: selectedBoss.encounter.enemyName,
+      summary: `Owned x${focusedItem.quantity}`,
+      items: [
+        {
+          glyph: focusedItem.glyph,
+          title: 'Drop Rate',
+          meta: focusedItem.chance,
+          detail: focusedItem.source,
+          status: focusedItem.quantity > 0 ? 'Collected' : 'Missing',
+        },
+        {
+          title: 'Boss Kills',
+          meta: `${bossKills[String(selectedBoss.encounter.id)] ?? 0}`,
+          detail: selectedBoss.dungeonName,
+        },
+      ],
+    }
+  }, [activeTab, bossKills, focusedItem, selectedBoss])
+  useDualScreenWorkshopPublisher(itemDetailState, dualScreenEnabled)
+
+  function selected(entryKey: string) {
+    return activeEntry?.key === entryKey
+  }
+
+  function selectKey(entryKey: string) {
+    const index = navEntries.findIndex((entry) => entry.key === entryKey)
+    if (index >= 0) setSelectedIndex(index)
+  }
+
+  function selectTab(tab: HunterProfileTab) {
+    setActiveTab(tab)
+    setSelectedIndex(tab === 'stats' ? 1 : 2)
+  }
+
+  function selectBoss(bossId: number) {
+    setSelectedBossId(bossId)
+    setFocusedItemKey(null)
+  }
+
+  function moveSelection(action: InputAction) {
+    if (!action.startsWith('navigate') || navEntries.length === 0) return
+    setSelectedIndex((current) => {
+      const bounded = Math.min(current, navEntries.length - 1)
+      const active = navEntries[bounded]
+      if (!active) return 0
+      const candidates = navEntries
+        .map((entry, index) => ({ entry, index }))
+        .filter(({ index }) => index !== bounded)
+        .filter(({ entry }) => {
+          if (action === 'navigateLeft') return entry.column < active.column
+          if (action === 'navigateRight') return entry.column > active.column
+          if (action === 'navigateUp') return entry.row < active.row
+          return entry.row > active.row
+        })
+      if (candidates.length === 0) return bounded
+      candidates.sort((a, b) => {
+        const aPrimary = Math.abs(a.entry.row - active.row) + Math.abs(a.entry.column - active.column)
+        const bPrimary = Math.abs(b.entry.row - active.row) + Math.abs(b.entry.column - active.column)
+        const aSecondary = action === 'navigateLeft' || action === 'navigateRight'
+          ? Math.abs(a.entry.row - active.row)
+          : Math.abs(a.entry.column - active.column)
+        const bSecondary = action === 'navigateLeft' || action === 'navigateRight'
+          ? Math.abs(b.entry.row - active.row)
+          : Math.abs(b.entry.column - active.column)
+        return aPrimary - bPrimary || aSecondary - bSecondary || a.index - b.index
+      })
+      return candidates[0]?.index ?? bounded
+    })
+  }
+
+  function openEntry(entry: HunterProfileNavEntry | undefined) {
+    if (!entry) return
+    if (entry.kind === 'back') onBack()
+    else if (entry.kind === 'tab') selectTab(entry.tab)
+    else if (entry.kind === 'boss') selectBoss(entry.bossId)
+    else if (entry.kind === 'item') setFocusedItemKey(entry.itemKey)
+  }
+
+  useEffect(() => {
+    if (!activeEntry) return
+    screenRef.current
+      ?.querySelector<HTMLElement>('[data-game-selected="true"]')
+      ?.scrollIntoView({ block: 'nearest', inline: 'nearest' })
+  }, [activeEntry])
+
+  useGameAction((action, inputDevice) => {
+    if (inputDevice !== 'controller') return
+    if (action === 'back') {
+      onBack()
+      return
+    }
+    if (action === 'confirm') {
+      openEntry(activeEntry)
+      return
+    }
+    moveSelection(action)
+  })
+
+  return (
+    <section className="content-screen hunter-profile-screen" data-game-nav-active="true" ref={screenRef}>
+      <div className="screen-heading hunter-profile-heading">
+        <div className="equipment-tabs hunter-profile-tabs" role="tablist" aria-label="Hunter profile tabs">
+          <button
+            className={`equipment-tab ${activeTab === 'stats' ? 'active' : ''} ${selected('tab:stats') ? 'game-selected' : ''}`}
+            data-controller-nav="skip"
+            data-game-selected={selected('tab:stats') ? 'true' : undefined}
+            onClick={() => selectTab('stats')}
+            onPointerDown={() => selectKey('tab:stats')}
+            type="button"
+            role="tab"
+            aria-selected={activeTab === 'stats'}
+          >
+            Stats
+          </button>
+          <button
+            className={`equipment-tab ${activeTab === 'collection' ? 'active' : ''} ${selected('tab:collection') ? 'game-selected' : ''}`}
+            data-controller-nav="skip"
+            data-game-selected={selected('tab:collection') ? 'true' : undefined}
+            onClick={() => selectTab('collection')}
+            onPointerDown={() => selectKey('tab:collection')}
+            type="button"
+            role="tab"
+            aria-selected={activeTab === 'collection'}
+          >
+            Collection Log
+          </button>
+        </div>
+        <button
+          className={`back-button ${selected('back') ? 'game-selected' : ''}`}
+          data-controller-nav="skip"
+          data-game-selected={selected('back') ? 'true' : undefined}
+          onClick={onBack}
+          onPointerDown={() => selectKey('back')}
+          type="button"
+        >
+          Back
+        </button>
+      </div>
+
+      {activeTab === 'stats' && (
+        <div className="hunter-stat-grid">
+          {statTiles.map((tile) => (
+            <article
+              className={`hunter-stat-tile ${selected(tile.key) ? 'game-selected' : ''}`}
+              data-game-selected={selected(tile.key) ? 'true' : undefined}
+              key={tile.key}
+              onPointerDown={() => selectKey(tile.key)}
+            >
+              <span>{tile.label}</span>
+              <strong>{tile.value}</strong>
+              {tile.detail && <small>{tile.detail}</small>}
+            </article>
+          ))}
+        </div>
+      )}
+
+      {activeTab === 'collection' && (
+        <div className="collection-log-layout">
+          <div className="collection-boss-list" aria-label="Bosses">
+            {bosses.map((boss) => {
+              return (
+                <button
+                  className={`collection-boss-button ${selectedBoss?.encounter.id === boss.encounter.id ? 'selected' : ''} ${selected(`boss:${boss.encounter.id}`) ? 'game-selected' : ''}`}
+                  data-controller-nav="skip"
+                  data-game-selected={selected(`boss:${boss.encounter.id}`) ? 'true' : undefined}
+                  key={boss.encounter.id}
+                  onClick={() => selectBoss(boss.encounter.id)}
+                  onPointerDown={() => selectKey(`boss:${boss.encounter.id}`)}
+                  type="button"
+                >
+                  <span>{bossInitials(boss.encounter.enemyName)}</span>
+                  <strong>{boss.encounter.enemyName}</strong>
+                </button>
+              )
+            })}
+          </div>
+
+          {selectedBoss && (
+            <article className="collection-boss-detail">
+              <div className="collection-drop-list">
+                {collectionItems.map((item) => (
+                  <button
+                    className={`collection-drop-row collection-rarity-${item.rarity} ${item.quantity <= 0 ? 'missing' : 'owned'} ${selected(`item:${item.key}`) ? 'game-selected' : ''}`}
+                    data-controller-nav="skip"
+                    data-game-selected={selected(`item:${item.key}`) ? 'true' : undefined}
+                    key={item.key}
+                    onClick={() => setFocusedItemKey(item.key)}
+                    onFocus={() => setFocusedItemKey(item.key)}
+                    onPointerDown={() => selectKey(`item:${item.key}`)}
+                    type="button"
+                  >
+                    <span>{item.glyph}</span>
+                    <strong>{item.name}</strong>
+                    <small>{item.chance}</small>
+                    <b>x{item.quantity}</b>
+                  </button>
+                ))}
+              </div>
+            </article>
+          )}
+        </div>
+      )}
+    </section>
+  )
+}

src/components/PartyFrames.tsx

@@ -0,0 +1,154 @@
+import { memo, type ElementType, type ReactNode } from 'react'
+import type { ControllerIconStyle } from '../input'
+import type { PartyMember } from '../game'
+import {
+  effectiveMaxHealth,
+  formatEffectTime,
+  memberHotEffects,
+} from '../combat/rules'
+import { ControllerBindingLabel } from './ControllerIcons'
+import { barFillStyle } from './barStyles'
+
+export type FloatingCombatText = {
+  id: number
+  memberId: string
+  value: number
+}
+
+type MemberEffectMode = 'full' | 'compact' | 'timed-basic'
+
+const MemberEffects = memo(function MemberEffects({
+  member,
+  mode,
+}: {
+  member: PartyMember
+  mode: MemberEffectMode
+}) {
+  if (mode === 'compact') {
+    return (
+      <div className="member-effects">
+        {memberHotEffects(member).map((effect) => (
+          <span className="buff" key={effect.id}>{effect.label}</span>
+        ))}
+        {member.shield > 0 && <span className="buff">Shield {Math.ceil(member.shield)}</span>}
+        {member.debuff && <span className="debuff">{member.debuff}</span>}
+      </div>
+    )
+  }
+
+  if (mode === 'timed-basic') {
+    return (
+      <div className="member-effects">
+        {member.hotTicks > 0 && <span className="buff">Renew {formatEffectTime(member.hotTicks)}</span>}
+        {member.shield > 0 && <span className="buff">Shield {Math.ceil(member.shield)}</span>}
+        {member.debuff && member.debuffTicks && <span className="debuff">{member.debuff} {formatEffectTime(member.debuffTicks)}</span>}
+        {(member.poisonStacks ?? 0) > 0 && <span className="debuff">Poison {member.poisonStacks}</span>}
+        {(member.maxHealthPenaltyTicks ?? 0) > 0 && <span className="debuff">Max HP -25% {formatEffectTime(member.maxHealthPenaltyTicks ?? 0)}</span>}
+        {(member.healingReductionTicks ?? 0) > 0 && <span className="debuff">Healing -25% {formatEffectTime(member.healingReductionTicks ?? 0)}</span>}
+      </div>
+    )
+  }
+
+  return (
+    <div className="member-effects">
+      {memberHotEffects(member).map((effect) => (
+        <span className="buff" key={effect.id}>{effect.label} {formatEffectTime(effect.ticks)}</span>
+      ))}
+      {member.shield > 0 && <span className="buff">Shield {Math.ceil(member.shield)}</span>}
+      {(member.damageReductionTicks ?? 0) > 0 && <span className="buff">Barkskin {formatEffectTime(member.damageReductionTicks ?? 0)}</span>}
+      {(member.bounceHeals ?? []).map((effect) => (
+        <span className="buff" key={effect.id}>{effect.label} {effect.charges}</span>
+      ))}
+      {member.debuff && member.debuffTicks && <span className="debuff">{member.debuff} {formatEffectTime(member.debuffTicks)}</span>}
+      {(member.poisonStacks ?? 0) > 0 && <span className="debuff">Poison {member.poisonStacks}</span>}
+      {(member.maxHealthPenaltyTicks ?? 0) > 0 && <span className="debuff">Max HP -25% {formatEffectTime(member.maxHealthPenaltyTicks ?? 0)}</span>}
+      {(member.healingReductionTicks ?? 0) > 0 && <span className="debuff">Healing -25% {formatEffectTime(member.healingReductionTicks ?? 0)}</span>}
+    </div>
+  )
+})
+
+export const PartyMemberFrame = memo(function PartyMemberFrame({
+  as,
+  member,
+  selected = false,
+  baseClassName = 'party-member',
+  selectedClassName = 'selected',
+  deadClassName = 'dead',
+  effectMode = 'full',
+  floatingTexts = [],
+  showTargetMarker = false,
+  showHeaderHealth = true,
+  showHealthText = false,
+  targetBinding,
+  controllerIconStyle,
+  onSelect,
+  children,
+}: {
+  as?: ElementType
+  member: PartyMember
+  selected?: boolean
+  baseClassName?: string
+  selectedClassName?: string
+  deadClassName?: string
+  effectMode?: MemberEffectMode
+  floatingTexts?: FloatingCombatText[]
+  showTargetMarker?: boolean
+  showHeaderHealth?: boolean
+  showHealthText?: boolean
+  targetBinding?: string | null
+  controllerIconStyle?: ControllerIconStyle
+  onSelect?: (id: string) => void
+  children?: ReactNode
+}) {
+  const Component = as ?? (onSelect ? 'button' : 'div')
+  const maxHealth = effectiveMaxHealth(member)
+  const className = [
+    baseClassName,
+    selected ? selectedClassName : '',
+    member.health <= 0 ? deadClassName : '',
+  ].filter(Boolean).join(' ')
+  const action = targetBinding ? {
+    binding: targetBinding,
+    iconStyle: controllerIconStyle ?? 'playstation',
+  } : null
+
+  return (
+    <Component
+      className={className}
+      data-party-member-id={member.id}
+      onClick={onSelect ? () => onSelect(member.id) : undefined}
+      aria-pressed={onSelect ? selected : undefined}
+      type={Component === 'button' ? 'button' : undefined}
+    >
+      {showTargetMarker && (
+        <span className="target-marker" aria-hidden="true">
+          <i />
+          Target
+        </span>
+      )}
+      <div className="member-header">
+        <span className={`role role-${member.role.toLowerCase()}`}>{member.role[0]}</span>
+        <strong>{member.name}</strong>
+        {showHeaderHealth && <small>{Math.ceil(member.health)} / {maxHealth}</small>}
+      </div>
+      <div className="bar member-health">
+        <span style={barFillStyle((member.health / maxHealth) * 100)} />
+        {member.shield > 0 && <i style={barFillStyle((member.shield / maxHealth) * 100, 'right')} />}
+        {showHealthText && <em className="health-text">{Math.floor(member.health)} / {maxHealth}</em>}
+      </div>
+      <div className="floating-combat-texts" aria-hidden="true">
+        {floatingTexts.map((entry) => <span className="floating-heal" key={entry.id}>+{entry.value}</span>)}
+      </div>
+      {action && (
+        <div className="member-target-key">
+          <ControllerBindingLabel
+            binding={action.binding}
+            iconStyle={action.iconStyle}
+          />
+        </div>
+      )}
+      <MemberEffects member={member} mode={effectMode} />
+      {children}
+    </Component>
+  )
+})

src/components/ResultScreen.tsx

@@ -0,0 +1,68 @@
+import type { ReactNode } from 'react'
+import type { CombatLogEntry } from '../game'
+import { RematchControls, ResultLogToggle } from './RewardPanels'
+
+type ResultAction = {
+  label: string
+  onClick: () => void
+  className?: string
+  disabled?: boolean
+}
+
+type ResultRematch = {
+  visible: boolean
+  requested: boolean
+  message: string
+  onRematch: () => void
+}
+
+export function ResultScreen({
+  eyebrow,
+  title,
+  children,
+  log,
+  showLog,
+  onToggleLog,
+  rematch,
+  actions,
+}: {
+  eyebrow: string
+  title: string
+  children?: ReactNode
+  log?: CombatLogEntry[]
+  showLog?: boolean
+  onToggleLog?: () => void
+  rematch?: ResultRematch
+  actions?: ResultAction[]
+}) {
+  return (
+    <div className="result-screen">
+      <div>
+        <p className="eyebrow">{eyebrow}</p>
+        <h2>{title}</h2>
+        {children}
+        {log && onToggleLog && (
+          <ResultLogToggle log={log} showEndLog={Boolean(showLog)} onToggle={onToggleLog} />
+        )}
+        {rematch?.visible && (
+          <RematchControls
+            requested={rematch.requested}
+            message={rematch.message}
+            onRematch={rematch.onRematch}
+          />
+        )}
+        {actions?.map((action) => (
+          <button
+            className={action.className}
+            disabled={action.disabled}
+            key={action.label}
+            onClick={action.onClick}
+            type="button"
+          >
+            {action.label}
+          </button>
+        ))}
+      </div>
+    </div>
+  )
+}

src/components/RewardPanels.tsx

@@ -0,0 +1,188 @@
+import type { CombatLogEntry } from '../game'
+import type { DungeonReward, LootRoll } from '../profile'
+
+type BonusItem = NonNullable<DungeonReward['bonusItem']>
+
+export function LevelGain({
+  previousLevel,
+  newLevel,
+  talentPointsGained,
+}: {
+  previousLevel: number | null
+  newLevel: number | null
+  talentPointsGained: number
+}) {
+  if (!previousLevel || !newLevel || talentPointsGained <= 0) return null
+  return (
+    <p className="level-gain">
+      Level {previousLevel} to {newLevel}
+      <small>+{talentPointsGained} talent point</small>
+    </p>
+  )
+}
+
+export function AbilityUnlocks({
+  abilities,
+}: {
+  abilities: DungeonReward['unlockedAbilities']
+}) {
+  return (
+    <>
+      {abilities.map((ability) => (
+        <p className="ability-unlock" key={ability.id}>
+          <span>{ability.glyph}</span>
+          Ability Unlocked: {ability.name}
+        </p>
+      ))}
+    </>
+  )
+}
+
+export function RewardXpSummary({
+  reward,
+}: {
+  reward: {
+    experienceGained: number
+    previousLevel: number | null
+    newLevel: number | null
+    talentPointsGained: number
+    unlockedAbilities: DungeonReward['unlockedAbilities']
+  }
+}) {
+  return (
+    <>
+      <p>+{reward.experienceGained} XP</p>
+      <LevelGain previousLevel={reward.previousLevel} newLevel={reward.newLevel} talentPointsGained={reward.talentPointsGained} />
+      <AbilityUnlocks abilities={reward.unlockedAbilities} />
+    </>
+  )
+}
+
+export function BonusItemReward({
+  item,
+  eyebrow,
+  compact = false,
+}: {
+  item?: BonusItem | null
+  eyebrow?: string
+  compact?: boolean
+}) {
+  if (!item) return null
+  if (compact) {
+    return (
+      <p className="ability-unlock">
+        <span>{item.glyph}</span>
+        {item.name} x{item.quantity}
+        {item.duplicate ? ` (owned x${item.quantityAfter})` : ''}
+      </p>
+    )
+  }
+  return (
+    <div className="bonus-item">
+      {eyebrow && <p className="eyebrow">{eyebrow}</p>}
+      <div className="bonus-item-detail">
+        <span>{item.glyph}</span>
+        <strong className={`rarity-${item.rarity}`}>{item.name}</strong>
+        <small>Item Level {item.itemLevel} x{item.quantity}</small>
+        {item.duplicate && <small> (owned x{item.quantityAfter})</small>}
+      </div>
+    </div>
+  )
+}
+
+export function LootRollList({
+  rolls,
+  expectedRolls,
+}: {
+  rolls: LootRoll[]
+  expectedRolls: number
+}) {
+  return (
+    <div className="run-loot-rolls">
+      {rolls.map((roll) => (
+        <div className={roll.dropped || roll.petAwarded ? 'dropped' : 'empty'} key={roll.encounterId}>
+          <strong>{roll.encounterName}</strong>
+          <span>
+            {[
+              ...roll.items.map((item) => `${item.glyph} ${item.name} x${item.quantity}${item.duplicate ? ` (owned x${item.quantityAfter})` : ''}`),
+              ...(roll.petAwarded
+                ? [`* ${roll.petAwarded.petName}${roll.petAwarded.duplicate ? ` (owned x${roll.petAwarded.quantityAfter})` : ''}`]
+                : []),
+            ].join(', ') || 'No components dropped'}
+          </span>
+        </div>
+      ))}
+      {rolls.length < expectedRolls && <small>Finishing loot rolls...</small>}
+    </div>
+  )
+}
+
+export function PvpRunLootList({
+  loot,
+}: {
+  loot: BonusItem[]
+}) {
+  return (
+    <div className="run-loot-rolls">
+      {loot.length > 0 ? loot.map((item, index) => (
+        <div className="dropped" key={`${item.id}-${index}`}>
+          <strong>Boss {index + 1}</strong>
+          <span>
+            {item.glyph} {item.name} x{item.quantity}
+            {item.duplicate ? ` (owned x${item.quantityAfter})` : ''}
+          </span>
+        </div>
+      )) : (
+        <div>
+          <strong>Loot</strong>
+          <span>No boss loot awarded</span>
+        </div>
+      )}
+    </div>
+  )
+}
+
+export function ResultLogToggle({
+  log,
+  showEndLog,
+  onToggle,
+}: {
+  log: CombatLogEntry[]
+  showEndLog: boolean
+  onToggle: () => void
+}) {
+  if (log.length === 0) return null
+  return (
+    <>
+      <button className="secondary-result-button" onClick={onToggle} type="button">
+        {showEndLog ? 'Hide Combat Log' : 'View Combat Log'}
+      </button>
+      {showEndLog && (
+        <div className="result-log">
+          {log.slice().reverse().map((entry) => (
+            <div className={`log-entry ${entry.tone}`} key={entry.id}>{entry.text}</div>
+          ))}
+        </div>
+      )}
+    </>
+  )
+}
+
+export function RematchControls({
+  requested,
+  message,
+  onRematch,
+}: {
+  requested: boolean
+  message: string
+  onRematch: () => void
+}) {
+  return (
+    <>
+      <button disabled={requested} onClick={onRematch} type="button">
+        {requested ? 'Waiting for Rematch' : 'Rematch'}
+      </button>
+      {message && <p>{message}</p>}
+    </>
+  )
+}

src/components/SettingsScreen.tsx

@@ -1,20 +1,16 @@
-import { useEffect, useState } from 'react'
+import { useEffect, useMemo, useRef, useState } from 'react'
 import {
   ACTION_LABELS,
   INPUT_ACTIONS,
   useInput,
+  useGameAction,
+  type InputAction,
   type InputDevice,
 } from '../input'
 import {
   ControllerBindingLabel,
   ControllerStylePreview,
 } from './ControllerIcons'
-
-const CONTROLLER_STYLE_LABELS = {
-  xbox: 'Xbox',
-  playstation: 'PlayStation',
-  nintendo: 'Nintendo',
-} as const
 import { useDualScreen } from '../dualScreen'
 import {
   getNativeDisplays,
@@ -22,21 +18,62 @@ import {
   type AndroidDisplay,
 } from '../nativeDualScreen'
 
+type SettingsTab = 'display' | 'input' | 'bindings'
+
+type SettingsNavEntry =
+  | { kind: 'back'; key: string; row: number; column: number }
+  | { kind: 'tab'; key: string; row: number; column: number; tab: SettingsTab }
+  | { kind: 'dualToggle'; key: string; row: number; column: number }
+  | { kind: 'openCompanion'; key: string; row: number; column: number }
+  | { kind: 'directTargeting'; key: string; row: number; column: number }
+  | { kind: 'touchLock'; key: string; row: number; column: number }
+  | { kind: 'iconStyle'; key: string; row: number; column: number; style: keyof typeof CONTROLLER_STYLE_LABELS }
+  | { kind: 'device'; key: string; row: number; column: number; device: InputDevice }
+  | { kind: 'binding'; key: string; row: number; column: number; action: InputAction }
+  | { kind: 'resetBindings'; key: string; row: number; column: number }
+
+const CONTROLLER_STYLE_LABELS = {
+  xbox: 'Xbox',
+  playstation: 'PlayStation',
+  nintendo: 'Nintendo',
+} as const
+
+const SETTINGS_TAB_ORDER = ['display', 'input', 'bindings'] as const
+const SETTINGS_TAB_LABELS: Record<SettingsTab, string> = {
+  display: 'Display',
+  input: 'Input',
+  bindings: 'Bindings',
+}
+const SETTINGS_BINDING_COLUMNS = 2
+const DIRECT_TARGET_ACTIONS = new Set<InputAction>([
+  'targetParty1',
+  'targetParty2',
+  'targetParty3',
+  'targetParty4',
+  'targetParty5',
+  'targetParty6',
+  'toggleTargetGroup',
+])
+
 export function SettingsScreen({ onBack }: { onBack: () => void }) {
   const [device, setDevice] = useState<InputDevice>('controller')
-  const [settingsTab, setSettingsTab] = useState<'display' | 'input' | 'bindings'>('display')
+  const [settingsTab, setSettingsTab] = useState<SettingsTab>('display')
+  const [selectedIndex, setSelectedIndex] = useState(1)
   const [displayMessage, setDisplayMessage] = useState('')
   const [androidDisplays, setAndroidDisplays] = useState<AndroidDisplay[]>([])
+  const navRefs = useRef<Record<string, HTMLElement | null>>({})
   const {
     bindings,
     capture,
     controllerIconStyle,
     directPartyTargeting,
+    combatTouchLocked,
     beginCapture,
     cancelCapture,
     resetBindings,
     setControllerIconStyle,
     setDirectPartyTargeting,
+    setCombatTouchLocked,
   } = useInput()
   const {
     enabled: dualScreenEnabled,
@@ -45,20 +82,141 @@ export function SettingsScreen({ onBack }: { onBack: () => void }) {
     openTopDisplay,
   } = useDualScreen()
   const nativeDualScreen = hasNativeDualScreenBridge()
-  const directTargetActions = new Set([
-    'targetParty1',
-    'targetParty2',
-    'targetParty3',
-    'targetParty4',
-    'targetParty5',
-    'targetParty6',
-    'toggleTargetGroup',
-  ])
-  const visibleActions = INPUT_ACTIONS.filter((action) => (
+  const visibleActions = useMemo(() => INPUT_ACTIONS.filter((action) => (
     directPartyTargeting
       ? action !== 'previousTarget' && action !== 'nextTarget'
-      : !directTargetActions.has(action)
-  ))
+      : !DIRECT_TARGET_ACTIONS.has(action)
+  )), [directPartyTargeting])
+  const navEntries = useMemo<SettingsNavEntry[]>(() => {
+    const entries: SettingsNavEntry[] = [
+      { kind: 'back', key: 'back', row: 0, column: 0 },
+      ...SETTINGS_TAB_ORDER.map((tab, index) => ({
+        kind: 'tab' as const,
+        key: `tab:${tab}`,
+        row: 0,
+        column: index + 1,
+        tab,
+      })),
+    ]
+    if (settingsTab === 'display') {
+      entries.push(
+        { kind: 'dualToggle', key: 'display:dual-toggle', row: 1, column: 1 },
+        { kind: 'openCompanion', key: 'display:open-companion', row: 1, column: 2 },
+      )
+    } else if (settingsTab === 'input') {
+      entries.push(
+        { kind: 'directTargeting', key: 'input:direct-targeting', row: 1, column: 1 },
+        { kind: 'touchLock', key: 'input:touch-lock', row: 1, column: 2 },
+        { kind: 'iconStyle', key: 'input:icons:xbox', row: 2, column: 0, style: 'xbox' },
+        { kind: 'iconStyle', key: 'input:icons:playstation', row: 2, column: 1, style: 'playstation' },
+        { kind: 'iconStyle', key: 'input:icons:nintendo', row: 2, column: 2, style: 'nintendo' },
+      )
+    } else {
+      entries.push(
+        { kind: 'device', key: 'bindings:device:controller', row: 1, column: 0, device: 'controller' },
+        { kind: 'device', key: 'bindings:device:pc', row: 1, column: 1, device: 'pc' },
+        ...visibleActions.map((action, index) => ({
+          kind: 'binding' as const,
+          key: `bindings:action:${action}`,
+          row: Math.floor(index / SETTINGS_BINDING_COLUMNS) + 2,
+          column: index % SETTINGS_BINDING_COLUMNS,
+          action,
+        })),
+        {
+          kind: 'resetBindings',
+          key: 'bindings:reset',
+          row: Math.floor((visibleActions.length - 1) / SETTINGS_BINDING_COLUMNS) + 3,
+          column: 1,
+        },
+      )
+    }
+    return entries
+  }, [settingsTab, visibleActions])
+  const activeIndex = Math.min(selectedIndex, Math.max(0, navEntries.length - 1))
+  const activeEntry = navEntries[activeIndex]
+
+  function selected(entryKey: string) {
+    return activeEntry?.key === entryKey
+  }
+
+  function navRef(entryKey: string) {
+    return (node: HTMLElement | null) => {
+      navRefs.current[entryKey] = node
+    }
+  }
+
+  function selectKey(entryKey: string) {
+    const index = navEntries.findIndex((entry) => entry.key === entryKey)
+    if (index >= 0) setSelectedIndex(index)
+  }
+
+  function selectTab(tab: SettingsTab) {
+    setSettingsTab(tab)
+    const tabIndex = SETTINGS_TAB_ORDER.indexOf(tab)
+    setSelectedIndex(tabIndex + 1)
+  }
+
+  function firstContentKey(tab: SettingsTab) {
+    if (tab === 'display') return 'display:dual-toggle'
+    if (tab === 'input') return 'input:direct-targeting'
+    return 'bindings:device:controller'
+  }
+
+  function moveSelection(action: InputAction) {
+    if (!action.startsWith('navigate') || navEntries.length === 0) return
+    setSelectedIndex((current) => {
+      const bounded = Math.min(current, navEntries.length - 1)
+      const active = navEntries[bounded]
+      if (!active) return 0
+      if (action === 'navigateDown' && active.row === 0) {
+        const nextIndex = navEntries.findIndex((entry) => entry.key === firstContentKey(settingsTab))
+        if (nextIndex >= 0) return nextIndex
+      }
+      if (action === 'navigateUp' && active.row === 1) {
+        const tabIndex = navEntries.findIndex((entry) => entry.key === `tab:${settingsTab}`)
+        if (tabIndex >= 0) return tabIndex
+      }
+      const candidates = navEntries
+        .map((entry, index) => ({ entry, index }))
+        .filter(({ index }) => index !== bounded)
+        .filter(({ entry }) => {
+          if (action === 'navigateLeft') return entry.column < active.column
+          if (action === 'navigateRight') return entry.column > active.column
+          if (action === 'navigateUp') return entry.row < active.row
+          return entry.row > active.row
+        })
+      if (candidates.length === 0) return bounded
+      candidates.sort((a, b) => {
+        const aPrimary = Math.abs(a.entry.row - active.row) + Math.abs(a.entry.column - active.column)
+        const bPrimary = Math.abs(b.entry.row - active.row) + Math.abs(b.entry.column - active.column)
+        const aSecondary = action === 'navigateLeft' || action === 'navigateRight'
+          ? Math.abs(a.entry.row - active.row)
+          : Math.abs(a.entry.column - active.column)
+        const bSecondary = action === 'navigateLeft' || action === 'navigateRight'
+          ? Math.abs(b.entry.row - active.row)
+          : Math.abs(b.entry.column - active.column)
+        return aPrimary - bPrimary || aSecondary - bSecondary || a.index - b.index
+      })
+      return candidates[0]?.index ?? bounded
+    })
+  }
+
+  function openEntry(entry: SettingsNavEntry | undefined) {
+    if (!entry) return
+    if (entry.kind === 'back') onBack()
+    else if (entry.kind === 'tab') selectTab(entry.tab)
+    else if (entry.kind === 'dualToggle') {
+      setDualScreenEnabled(!dualScreenEnabled)
+      setDisplayMessage('')
+    } else if (entry.kind === 'openCompanion') {
+      void launchTopDisplay()
+    } else if (entry.kind === 'directTargeting') setDirectPartyTargeting(!directPartyTargeting)
+    else if (entry.kind === 'touchLock') setCombatTouchLocked(!combatTouchLocked)
+    else if (entry.kind === 'iconStyle') setControllerIconStyle(entry.style)
+    else if (entry.kind === 'device') setDevice(entry.device)
+    else if (entry.kind === 'binding') beginCapture(device, entry.action)
+    else if (entry.kind === 'resetBindings') resetBindings(device)
+  }
 
   async function refreshNativeDisplays() {
     if (!nativeDualScreen) return
@@ -77,6 +235,24 @@ export function SettingsScreen({ onBack }: { onBack: () => void }) {
       .catch(() => setAndroidDisplays([]))
   }, [nativeDualScreen])
 
+  useEffect(() => {
+    if (!activeEntry) return
+    navRefs.current[activeEntry.key]?.scrollIntoView({ block: 'nearest', inline: 'nearest' })
+  }, [activeEntry])
+
+  useGameAction((action, inputDevice) => {
+    if (inputDevice !== 'controller' || capture) return
+    if (action === 'back') {
+      onBack()
+      return
+    }
+    if (action === 'confirm') {
+      openEntry(activeEntry)
+      return
+    }
+    moveSelection(action)
+  })
+
   async function launchTopDisplay() {
     const opened = await openTopDisplay()
     setDisplayMessage(opened
@@ -88,34 +264,39 @@ export function SettingsScreen({ onBack }: { onBack: () => void }) {
   }
 
   return (
-    <section className="content-screen settings-screen">
-      <div className="screen-heading">
-        <div>
-          <p className="eyebrow">Game Options</p>
-          <h1>Settings</h1>
-        </div>
-        <button className="back-button" onClick={onBack} type="button">Back</button>
+    <section className="content-screen settings-screen" data-game-nav-active={capture ? undefined : 'true'}>
+      <div className="settings-nav">
+        <button
+          className={`back-button settings-back-button ${selected('back') ? 'game-selected' : ''}`}
+          data-controller-nav="skip"
+          data-game-selected={selected('back') ? 'true' : undefined}
+          onClick={onBack}
+          onPointerDown={() => selectKey('back')}
+          ref={navRef('back')}
+          type="button"
+        >
+          Back
+        </button>
+        <nav className="settings-tabs" role="tablist" aria-label="Settings sections">
+          {SETTINGS_TAB_ORDER.map((tab) => (
+            <button
+              aria-selected={settingsTab === tab}
+              className={`${settingsTab === tab ? 'selected' : ''} ${selected(`tab:${tab}`) ? 'game-selected' : ''}`}
+              data-controller-nav="skip"
+              data-game-selected={selected(`tab:${tab}`) ? 'true' : undefined}
+              key={tab}
+              onClick={() => selectTab(tab)}
+              onPointerDown={() => selectKey(`tab:${tab}`)}
+              ref={navRef(`tab:${tab}`)}
+              role="tab"
+              type="button"
+            >
+              {SETTINGS_TAB_LABELS[tab]}
+            </button>
+          ))}
+        </nav>
       </div>
 
-      <nav className="settings-tabs" role="tablist" aria-label="Settings sections">
-        {([
-          { key: 'display', label: 'Display' },
-          { key: 'input', label: 'Input' },
-          { key: 'bindings', label: 'Bindings' },
-        ] as const).map((tab) => (
-          <button
-            aria-selected={settingsTab === tab.key}
-            className={settingsTab === tab.key ? 'selected' : ''}
-            key={tab.key}
-            onClick={() => setSettingsTab(tab.key)}
-            role="tab"
-            type="button"
-          >
-            {tab.label}
-          </button>
-        ))}
-      </nav>
-
       {settingsTab === 'display' && (
         <section className="dual-screen-settings settings-tab-panel">
           <div>
@@ -128,16 +309,28 @@ export function SettingsScreen({ onBack }: { onBack: () => void }) {
           </div>
           <div className="dual-screen-actions">
             <button
-              className={dualScreenEnabled ? 'selected' : ''}
+              className={`${dualScreenEnabled ? 'selected' : ''} ${selected('display:dual-toggle') ? 'game-selected' : ''}`}
+              data-controller-nav="skip"
+              data-game-selected={selected('display:dual-toggle') ? 'true' : undefined}
               onClick={() => {
                 setDualScreenEnabled(!dualScreenEnabled)
                 setDisplayMessage('')
               }}
+              onPointerDown={() => selectKey('display:dual-toggle')}
+              ref={navRef('display:dual-toggle')}
               type="button"
             >
               {dualScreenEnabled ? 'Dual-Screen Enabled' : 'Enable Dual-Screen'}
             </button>
-            <button onClick={launchTopDisplay} type="button">
+            <button
+              className={selected('display:open-companion') ? 'game-selected' : ''}
+              data-controller-nav="skip"
+              data-game-selected={selected('display:open-companion') ? 'true' : undefined}
+              onClick={launchTopDisplay}
+              onPointerDown={() => selectKey('display:open-companion')}
+              ref={navRef('display:open-companion')}
+              type="button"
+            >
               {topDisplayConnected ? 'Companion Connected' : 'Open Companion Display'}
             </button>
           </div>
@@ -174,20 +367,40 @@ export function SettingsScreen({ onBack }: { onBack: () => void }) {
           </div>
           <button
             aria-pressed={directPartyTargeting}
-            className={directPartyTargeting ? 'selected' : ''}
+            className={`${directPartyTargeting ? 'selected' : ''} ${selected('input:direct-targeting') ? 'game-selected' : ''}`}
+            data-controller-nav="skip"
+            data-game-selected={selected('input:direct-targeting') ? 'true' : undefined}
             onClick={() => setDirectPartyTargeting(!directPartyTargeting)}
+            onPointerDown={() => selectKey('input:direct-targeting')}
+            ref={navRef('input:direct-targeting')}
             type="button"
           >
             {directPartyTargeting ? 'Direct Targeting On' : 'Direct Targeting Off'}
           </button>
+          <button
+            aria-pressed={combatTouchLocked}
+            className={`${combatTouchLocked ? 'selected' : ''} ${selected('input:touch-lock') ? 'game-selected' : ''}`}
+            data-controller-nav="skip"
+            data-game-selected={selected('input:touch-lock') ? 'true' : undefined}
+            onClick={() => setCombatTouchLocked(!combatTouchLocked)}
+            onPointerDown={() => selectKey('input:touch-lock')}
+            ref={navRef('input:touch-lock')}
+            type="button"
+          >
+            {combatTouchLocked ? 'Combat Touch Locked' : 'Combat Touch Unlocked'}
+          </button>
           <div className="controller-icon-options">
             <span>Controller Icons</span>
             {(['xbox', 'playstation', 'nintendo'] as const).map((style) => (
               <button
                 aria-pressed={controllerIconStyle === style}
-                className={controllerIconStyle === style ? 'selected' : ''}
+                className={`${controllerIconStyle === style ? 'selected' : ''} ${selected(`input:icons:${style}`) ? 'game-selected' : ''}`}
+                data-controller-nav="skip"
+                data-game-selected={selected(`input:icons:${style}`) ? 'true' : undefined}
                 key={style}
                 onClick={() => setControllerIconStyle(style)}
+                onPointerDown={() => selectKey(`input:icons:${style}`)}
+                ref={navRef(`input:icons:${style}`)}
                 type="button"
               >
                 <ControllerStylePreview iconStyle={style} />
@@ -210,15 +423,23 @@ export function SettingsScreen({ onBack }: { onBack: () => void }) {
 
           <div className="binding-tabs">
             <button
-              className={device === 'controller' ? 'selected' : ''}
+              className={`${device === 'controller' ? 'selected' : ''} ${selected('bindings:device:controller') ? 'game-selected' : ''}`}
+              data-controller-nav="skip"
+              data-game-selected={selected('bindings:device:controller') ? 'true' : undefined}
               onClick={() => setDevice('controller')}
+              onPointerDown={() => selectKey('bindings:device:controller')}
+              ref={navRef('bindings:device:controller')}
               type="button"
             >
               Controller
             </button>
             <button
-              className={device === 'pc' ? 'selected' : ''}
+              className={`${device === 'pc' ? 'selected' : ''} ${selected('bindings:device:pc') ? 'game-selected' : ''}`}
+              data-controller-nav="skip"
+              data-game-selected={selected('bindings:device:pc') ? 'true' : undefined}
               onClick={() => setDevice('pc')}
+              onPointerDown={() => selectKey('bindings:device:pc')}
+              ref={navRef('bindings:device:pc')}
               type="button"
             >
               PC
@@ -228,9 +449,13 @@ export function SettingsScreen({ onBack }: { onBack: () => void }) {
           <div className="binding-list">
             {visibleActions.map((action) => (
               <button
-                className={capture?.device === device && capture.action === action ? 'listening' : ''}
+                className={`${capture?.device === device && capture.action === action ? 'listening' : ''} ${selected(`bindings:action:${action}`) ? 'game-selected' : ''}`}
+                data-controller-nav="skip"
+                data-game-selected={selected(`bindings:action:${action}`) ? 'true' : undefined}
                 key={action}
                 onClick={() => beginCapture(device, action)}
+                onPointerDown={() => selectKey(`bindings:action:${action}`)}
+                ref={navRef(`bindings:action:${action}`)}
                 type="button"
               >
                 <span>{ACTION_LABELS[action]}</span>
@@ -250,7 +475,15 @@ export function SettingsScreen({ onBack }: { onBack: () => void }) {
 
           <footer className="settings-footer">
             <span>Bindings are saved automatically on this device.</span>
-            <button className="text-button" onClick={() => resetBindings(device)} type="button">
+            <button
+              className={`text-button ${selected('bindings:reset') ? 'game-selected' : ''}`}
+              data-controller-nav="skip"
+              data-game-selected={selected('bindings:reset') ? 'true' : undefined}
+              onClick={() => resetBindings(device)}
+              onPointerDown={() => selectKey('bindings:reset')}
+              ref={navRef('bindings:reset')}
+              type="button"
+            >
               Reset {device === 'pc' ? 'PC' : 'Controller'} Defaults
             </button>
           </footer>

src/components/SpellBars.tsx

@@ -0,0 +1,139 @@
+import { memo } from 'react'
+import type { ControllerIconStyle } from '../input'
+import type { Spell } from '../game'
+import { ControllerBindingLabel } from './ControllerIcons'
+import { barFillStyle } from './barStyles'
+
+export type SpellSlot = (Spell & {
+  cost: number
+  remaining: number
+  slotIndex: number
+}) | null
+
+export const ResourceBar = memo(function ResourceBar({
+  resource,
+  maxResource,
+  resourceName,
+  speedMultiplier,
+  unavailableText,
+}: {
+  resource: number
+  maxResource: number
+  resourceName: string
+  speedMultiplier?: 1 | 2
+  unavailableText?: string
+}) {
+  return (
+    <div className="mana-wrap party-mana-wrap">
+      <span>
+        {unavailableText ?? `${resourceName} ${Math.floor(resource)} / ${maxResource}`}
+      </span>
+      {speedMultiplier === 2 && <strong className="speed-badge">2x speed</strong>}
+      <div className="bar mana-bar"><span style={barFillStyle((resource / maxResource) * 100)} /></div>
+    </div>
+  )
+})
+
+export const SpellButton = memo(function SpellButton({
+  spell,
+  binding,
+  iconStyle,
+  resourceName,
+  disabled,
+  focusable = true,
+  onCast,
+  emptyKeyPrefix = 'empty',
+}: {
+  spell: SpellSlot
+  binding?: string
+  iconStyle: ControllerIconStyle
+  resourceName: string
+  disabled?: boolean
+  focusable?: boolean
+  onCast: (spell: Spell) => void
+  emptyKeyPrefix?: string
+}) {
+  if (!spell) {
+    return (
+      <div className="spell empty-spell" key={emptyKeyPrefix}>
+        <kbd>{emptyKeyPrefix}</kbd><strong>Empty</strong>
+      </div>
+    )
+  }
+  return (
+    <button
+      className="spell"
+      data-controller-nav={focusable ? undefined : 'skip'}
+      disabled={disabled}
+      key={spell.id}
+      onClick={() => onCast(spell)}
+      tabIndex={focusable ? undefined : -1}
+      title={spell.description}
+      type="button"
+    >
+      <kbd>
+        {binding
+          ? (
+            <ControllerBindingLabel
+              binding={binding}
+              compact
+              iconStyle={iconStyle}
+            />
+          )
+          : spell.slotIndex + 1}
+      </kbd>
+      <span className={`spell-icon spell-${spell.kind}`}>{spell.glyph}</span>
+      <strong>{spell.name}</strong>
+      <small>{spell.cost} {resourceName}</small>
+      {spell.remaining > 0 && <i>{spell.remaining.toFixed(1)}</i>}
+    </button>
+  )
+})
+
+export const SpellBar = memo(function SpellBar({
+  spells,
+  bindings,
+  iconStyle,
+  resource,
+  resourceName,
+  canCast,
+  onCast,
+  className = 'spell-bar six-slots vertical-spell-bar',
+  focusable = true,
+}: {
+  spells: SpellSlot[]
+  bindings: Record<string, string>
+  iconStyle: ControllerIconStyle
+  resource: number
+  resourceName: string
+  canCast: boolean
+  onCast: (spell: Spell) => void
+  className?: string
+  focusable?: boolean
+}) {
+  return (
+    <div className={className}>
+      {spells.map((spell, slotIndex) => {
+        if (!spell) {
+          return (
+            <div className="spell empty-spell" key={`empty-${slotIndex}`}>
+              <kbd>{slotIndex + 1}</kbd><strong>Empty</strong>
+            </div>
+          )
+        }
+        return (
+          <SpellButton
+            binding={bindings[`ability${slotIndex + 1}`]}
+            disabled={!canCast || resource < spell.cost || spell.remaining > 0}
+            focusable={focusable}
+            iconStyle={iconStyle}
+            key={spell.id}
+            onCast={onCast}
+            resourceName={resourceName}
+            spell={spell}
+          />
+        )
+      })}
+    </div>
+  )
+})

src/components/TalentScreen.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useRef, useState } from 'react'
+import { useEffect, useRef, useState } from 'react'
 import {
   allocateTalent,
   resetTalents,
@@ -57,24 +57,16 @@ export function TalentScreen({ profile, onBack, onUpdated, embedded = false }: P
     ?? gameClass.talents[0]
     ?? null
   const effectPageCount = Math.max(1, Math.ceil(gameClass.talents.length / EFFECTS_PER_PAGE))
+  const activeEffectPage = Math.min(effectPage, effectPageCount - 1)
   const visibleTalents = gameClass.talents.slice(
-    effectPage * EFFECTS_PER_PAGE,
-    effectPage * EFFECTS_PER_PAGE + EFFECTS_PER_PAGE,
+    activeEffectPage * EFFECTS_PER_PAGE,
+    activeEffectPage * EFFECTS_PER_PAGE + EFFECTS_PER_PAGE,
   )
 
   useEffect(() => {
     window.scrollTo(0, scrollRef.current)
   }, [profile])
 
-  useEffect(() => {
-    if (selectedTalentId && gameClass.talents.some((talent) => talent.id === selectedTalentId)) return
-    setSelectedTalentId(selectedTalent?.id ?? null)
-  }, [gameClass.talents, selectedTalent?.id, selectedTalentId])
-
-  useEffect(() => {
-    setEffectPage((page) => Math.min(page, effectPageCount - 1))
-  }, [effectPageCount])
-
   function saveScroll() {
     scrollRef.current = window.scrollY
   }
@@ -123,9 +115,8 @@ export function TalentScreen({ profile, onBack, onUpdated, embedded = false }: P
     }
   }
 
-  const workshopState = useMemo<DualScreenWorkshopState | null>(() => {
-    if (!isEffectClass) return null
-    return {
+  const workshopState: DualScreenWorkshopState | null = isEffectClass
+    ? {
       mode: 'talents',
       title: 'Spell Effects',
       subtitle: `${selectedEffects.length}/${capacity} active`,
@@ -140,7 +131,7 @@ export function TalentScreen({ profile, onBack, onUpdated, embedded = false }: P
         status: talent.rank > 0 ? 'Selected' : '',
       })),
     }
-  }, [capacity, gameClass.talents, isEffectClass, selectedEffects.length, selectedTalent])
+    : null
 
   useDualScreenWorkshopPublisher(workshopState, dualScreenEnabled)
 
@@ -265,16 +256,16 @@ export function TalentScreen({ profile, onBack, onUpdated, embedded = false }: P
             {effectPageCount > 1 && (
               <div className="effect-pager">
                 <button
-                  disabled={effectPage === 0}
-                  onClick={() => setEffectPage((page) => Math.max(0, page - 1))}
+                  disabled={activeEffectPage === 0}
+                  onClick={() => setEffectPage(Math.max(0, activeEffectPage - 1))}
                   type="button"
                 >
                   Prev
                 </button>
-                <span>{effectPage + 1}/{effectPageCount}</span>
+                <span>{activeEffectPage + 1}/{effectPageCount}</span>
                 <button
-                  disabled={effectPage >= effectPageCount - 1}
-                  onClick={() => setEffectPage((page) => Math.min(effectPageCount - 1, page + 1))}
+                  disabled={activeEffectPage >= effectPageCount - 1}
+                  onClick={() => setEffectPage(Math.min(effectPageCount - 1, activeEffectPage + 1))}
                   type="button"
                 >
                   Next

src/components/barStyles.ts

@@ -0,0 +1,16 @@
+import type { CSSProperties } from 'react'
+
+function clampScale(value: number) {
+  if (!Number.isFinite(value)) return 0
+  return Math.min(1, Math.max(0, value))
+}
+
+export function barFillStyle(
+  percent: number,
+  origin: 'left' | 'right' = 'left',
+): CSSProperties {
+  return {
+    transform: `scaleX(${clampScale(percent / 100)})`,
+    transformOrigin: `${origin} center`,
+  }
+}

src/dualScreen.tsx

@@ -9,7 +9,7 @@ import {
   useState,
   type ReactNode,
 } from 'react'
-import type { CombatLogEntry, PartyMember, Spell } from './game'
+import type { PartyMember, Spell } from './game'
 import {
   getNativeDisplays,
   hasNativeDualScreenBridge,
@@ -19,13 +19,19 @@ import {
   dispatchExternalGameAction,
   type ControllerIconStyle,
   type InputAction,
+  useGameAction,
 } from './input'
 import { ControllerBindingLabel } from './components/ControllerIcons'
+import { PartyMemberFrame } from './components/PartyFrames'
+import { barFillStyle } from './components/barStyles'
+import { groupFloatingTextsByMember } from './combat/combatPresentation'
 
 const STORAGE_KEY = 'ashen-halls-dual-screen-enabled'
 const SNAPSHOT_KEY = 'ashen-halls-dual-screen-snapshot'
 const STARTUP_CHOICE_KEY = 'ashen-halls-dual-screen-startup-choice'
 const CHANNEL_NAME = 'ashen-halls-dual-screen'
+const COMBAT_PUBLISH_INTERVAL_MS = 100
+const COMBAT_SNAPSHOT_INTERVAL_MS = 1000
 
 export type DualScreenCombatState = {
   difficultyName: string
@@ -39,6 +45,15 @@ export type DualScreenCombatState = {
   encounterIndex: number
   encounterCount: number
   party: PartyMember[]
+  opponentName?: string
+  opponentClassName?: string
+  opponentParty?: PartyMember[]
+  opponentEnemyHealth?: number
+  opponentResource?: number
+  opponentMaxResource?: number
+  opponentResourceName?: string
+  opponentBuffSummary?: string
+  opponentDebuffSummary?: string
   floatingTexts: Array<{
     id: number
     memberId: string
@@ -46,24 +61,30 @@ export type DualScreenCombatState = {
   }>
   partySize: number
   selectedId: string
-  log: CombatLogEntry[]
   status: 'playing' | 'won' | 'lost' | 'part-complete' | 'marathon-choice' | 'upgrade-choice'
   resource: number
   maxResource: number
   resourceName: string
   playerIsAlive: boolean
   spells: Array<(Spell & { slotIndex: number; remaining: number }) | null>
-  activeDevice: 'pc' | 'controller'
   bindings: Record<InputAction, string>
   controllerIconStyle: ControllerIconStyle
   directPartyTargeting: boolean
   paused: boolean
   targetGroup: 0 | 1 | 2
   speedMultiplier: 1 | 2
+  stadium?: {
+    dampeningPercent: number
+    roundIndex: number
+    playerWins: number
+    opponentWins: number
+    survivalSeconds: number
+    opponentSurvivalSeconds: number
+  }
 }
 
 export type DualScreenWorkshopState = {
-  mode: 'class' | 'equipment' | 'crafting' | 'talents'
+  mode: 'class' | 'equipment' | 'crafting' | 'talents' | 'collection'
   title: string
   subtitle: string
   summary?: string
@@ -76,14 +97,34 @@ export type DualScreenWorkshopState = {
   }>
 }
 
+export type DualScreenSetupState = {
+  contentType: 'dungeon' | 'raid'
+  title: string
+  subtitle: string
+  description: string
+  initials: string
+  difficultyName: string
+  itemLevel: number
+  experience: number
+  lockedReason?: string
+  stats: {
+    health: string
+    damage: string
+    xp: string
+    loot: string
+  }
+}
+
 type DualScreenMessage =
   | { type: 'combat-state'; state: DualScreenCombatState }
   | { type: 'workshop-state'; state: DualScreenWorkshopState }
+  | { type: 'setup-state'; state: DualScreenSetupState }
   | { type: 'companion-ready' }
   | { type: 'companion-heartbeat' }
   | { type: 'control-action'; action: InputAction }
   | { type: 'combat-ended' }
   | { type: 'workshop-ended' }
+  | { type: 'setup-ended' }
 
 type DualScreenContextValue = {
   enabled: boolean
@@ -124,11 +165,27 @@ function loadRecentSnapshot() {
   }
 }
 
-function memberHotEffects(member: PartyMember) {
-  if (member.hotEffects?.length) return member.hotEffects
-  return member.hotTicks > 0
-    ? [{ id: 'legacy-renew', spellId: 'legacy-renew', label: 'Renew', ticks: member.hotTicks, power: 6 }]
-    : []
+function formatDualTime(seconds: number) {
+  const total = Math.max(0, Math.floor(seconds))
+  return `${Math.floor(total / 60)}:${String(total % 60).padStart(2, '0')}`
+}
+
+function shouldRelayBottomAction(
+  action: InputAction,
+  state: DualScreenCombatState | null,
+) {
+  if (!state) return false
+  if (action === 'confirm' || action === 'toggleTouchLock') return false
+  if (state.status === 'playing') return true
+  return action === 'pause' || action === 'back'
+}
+
+function shouldRelaySetupAction(
+  action: InputAction,
+  state: DualScreenSetupState | null,
+) {
+  if (!state) return false
+  return action.startsWith('navigate') || action === 'confirm' || action === 'back'
 }
 
 export function DualScreenProvider({ children }: { children: ReactNode }) {
@@ -294,19 +351,19 @@ export function useDualScreenPublisher(
       }
     }
     publish()
+    saveSnapshot(stateRef.current)
+    const publishTimer = window.setInterval(publish, COMBAT_PUBLISH_INTERVAL_MS)
+    const snapshotTimer = window.setInterval(() => {
+      saveSnapshot(stateRef.current)
+    }, COMBAT_SNAPSHOT_INTERVAL_MS)
     return () => {
+      window.clearInterval(publishTimer)
+      window.clearInterval(snapshotTimer)
+      saveSnapshot(stateRef.current)
       channel.postMessage({ type: 'combat-ended' } satisfies DualScreenMessage)
       channel.close()
     }
   }, [enabled])
-
-  useEffect(() => {
-    if (!enabled) return
-    saveSnapshot(state)
-    const channel = createChannel()
-    channel?.postMessage({ type: 'combat-state', state } satisfies DualScreenMessage)
-    channel?.close()
-  }, [enabled, state])
 }
 
 export function useDualScreenWorkshopPublisher(
@@ -332,6 +389,9 @@ export function useDualScreenWorkshopPublisher(
     }
     channel.onmessage = (event: MessageEvent<DualScreenMessage>) => {
       if (event.data.type === 'companion-ready') publish()
+      if (event.data.type === 'control-action') {
+        dispatchExternalGameAction(event.data.action, 'controller')
+      }
     }
     publish()
     return () => {
@@ -348,9 +408,53 @@ export function useDualScreenWorkshopPublisher(
   }, [enabled, state])
 }
 
+export function useDualScreenSetupPublisher(
+  state: DualScreenSetupState | null,
+  enabled: boolean,
+) {
+  const stateRef = useRef(state)
+  useEffect(() => {
+    stateRef.current = state
+  }, [state])
+
+  useEffect(() => {
+    if (!enabled || !state) return
+    const channel = createChannel()
+    if (!channel) return
+    const publish = () => {
+      if (stateRef.current) {
+        channel.postMessage({
+          type: 'setup-state',
+          state: stateRef.current,
+        } satisfies DualScreenMessage)
+      }
+    }
+    channel.onmessage = (event: MessageEvent<DualScreenMessage>) => {
+      if (event.data.type === 'companion-ready') publish()
+      if (event.data.type === 'control-action') {
+        dispatchExternalGameAction(event.data.action, 'controller')
+      }
+    }
+    publish()
+    return () => {
+      channel.postMessage({ type: 'setup-ended' } satisfies DualScreenMessage)
+      channel.close()
+    }
+  }, [enabled, state])
+
+  useEffect(() => {
+    const channel = createChannel()
+    if (!enabled || !channel) return
+    if (state) channel.postMessage({ type: 'setup-state', state } satisfies DualScreenMessage)
+    else channel.postMessage({ type: 'setup-ended' } satisfies DualScreenMessage)
+    channel.close()
+  }, [enabled, state])
+}
+
 export function DualScreenBottomDisplay() {
   const [state, setState] = useState<DualScreenCombatState | null>(loadRecentSnapshot)
   const [workshopState, setWorkshopState] = useState<DualScreenWorkshopState | null>(null)
+  const [setupState, setSetupState] = useState<DualScreenSetupState | null>(null)
 
   useEffect(() => {
     const channel = createChannel()
@@ -360,13 +464,21 @@ export function DualScreenBottomDisplay() {
       if (event.data.type === 'combat-state') {
         setState(event.data.state)
         setWorkshopState(null)
+        setSetupState(null)
       }
       if (event.data.type === 'workshop-state') {
         setWorkshopState(event.data.state)
         setState(null)
+        setSetupState(null)
+      }
+      if (event.data.type === 'setup-state') {
+        setSetupState(event.data.state)
+        setState(null)
+        setWorkshopState(null)
       }
       if (event.data.type === 'combat-ended') setState(null)
       if (event.data.type === 'workshop-ended') setWorkshopState(null)
+      if (event.data.type === 'setup-ended') setSetupState(null)
     }
     announce()
     const timer = window.setInterval(() => {
@@ -384,6 +496,14 @@ export function DualScreenBottomDisplay() {
     channel?.close()
   }
 
+  useGameAction((action) => {
+    if (
+      !shouldRelayBottomAction(action, state)
+      && !shouldRelaySetupAction(action, setupState)
+    ) return
+    sendAction(action)
+  })
+
   if (!state && workshopState) {
     return (
       <main className="dual-bottom-display workshop-bottom-display">
@@ -418,6 +538,42 @@ export function DualScreenBottomDisplay() {
     )
   }
 
+  if (!state && setupState) {
+    return (
+      <main className="dual-bottom-display setup-bottom-display">
+        <header className="dual-controls-header">
+          <div>
+            <p className="eyebrow">{setupState.contentType}</p>
+            <h1>{setupState.title}</h1>
+            <small>{setupState.subtitle}</small>
+          </div>
+          <div className="dual-controls-progress">
+            <span>{setupState.difficultyName}</span>
+            <span>iLvl {setupState.itemLevel}</span>
+            <span>{setupState.experience} XP</span>
+          </div>
+        </header>
+        <section className="setup-bottom-summary">
+          <span className={`dungeon-art ${setupState.contentType === 'raid' ? 'raid-art' : ''}`}>
+            {setupState.initials}
+          </span>
+          <div>
+            <p className="eyebrow">Selected Run</p>
+            <h2>{setupState.title}</h2>
+            <p>{setupState.description}</p>
+            {setupState.lockedReason && <small>{setupState.lockedReason}</small>}
+          </div>
+        </section>
+        <dl className="setup-bottom-stats">
+          <div><dt>Health</dt><dd>{setupState.stats.health}</dd></div>
+          <div><dt>Damage</dt><dd>{setupState.stats.damage}</dd></div>
+          <div><dt>XP</dt><dd>{setupState.stats.xp}</dd></div>
+          <div><dt>Loot</dt><dd>{setupState.stats.loot}</dd></div>
+        </dl>
+      </main>
+    )
+  }
+
   if (!state) {
     return (
       <main className="dual-bottom-display dual-bottom-waiting">
@@ -431,17 +587,77 @@ export function DualScreenBottomDisplay() {
   }
 
   return (
-    <main className="dual-bottom-display">
+    <main
+      className={`dual-bottom-display ${state.opponentParty ? 'pvp-opponent-bottom-display' : ''}`}
+      data-combat-active={state.status === 'playing' && !state.paused ? 'true' : 'false'}
+    >
       <header className="dual-controls-header">
         <div>
-          <p className="eyebrow">{state.difficultyName} {state.contentName}</p>
-          <h1>{state.dungeonName}</h1>
+          <p className="eyebrow">{state.opponentParty ? 'Opponent View' : `${state.difficultyName} ${state.contentName}`}</p>
+          <h1>{state.opponentParty ? state.opponentName : state.dungeonName}</h1>
+          {state.opponentParty && <small>{state.opponentClassName}</small>}
         </div>
         <div className="dual-controls-progress">
-          <span>Encounter {state.encounterIndex + 1}/{state.encounterCount}</span>
+          <span>{state.stadium ? `Round ${state.stadium.roundIndex} | ${state.stadium.playerWins}-${state.stadium.opponentWins}` : state.opponentParty ? 'Live PvP' : `Encounter ${state.encounterIndex + 1}/${state.encounterCount}`}</span>
         </div>
       </header>
 
+      {state.opponentParty ? (
+        <>
+          {state.stadium ? (
+            <section className="dual-opponent-progress stadium">
+              <div>
+                <p className="eyebrow">Dampening</p>
+                <strong>{state.stadium.dampeningPercent}%</strong>
+              </div>
+              <div>
+                <p className="eyebrow">Survival</p>
+                <strong>{formatDualTime(state.stadium.opponentSurvivalSeconds)}</strong>
+              </div>
+            </section>
+          ) : (
+            <section className="dual-opponent-progress">
+              <div>
+                <p className="eyebrow">Opponent Clear</p>
+                <strong>{Math.max(0, Math.floor(state.opponentEnemyHealth ?? 0))} / {state.encounterMaxHealth}</strong>
+              </div>
+              <div className="bar enemy-health boss-bar">
+                <span style={barFillStyle(((state.opponentEnemyHealth ?? 0) / state.encounterMaxHealth) * 100)} />
+              </div>
+              {typeof state.opponentResource === 'number' && state.opponentMaxResource ? (
+                <>
+                  <div>
+                    <p className="eyebrow">{state.opponentResourceName ?? state.resourceName}</p>
+                    <strong>{Math.floor(state.opponentResource)} / {state.opponentMaxResource}</strong>
+                  </div>
+                  <div className="bar mana-bar">
+                    <span style={barFillStyle((state.opponentResource / state.opponentMaxResource) * 100)} />
+                  </div>
+                </>
+              ) : null}
+            </section>
+          )}
+
+          <section className={`dual-opponent-party-grid ${state.opponentParty.length > 6 ? 'raid' : ''}`}>
+            {state.opponentParty.map((member) => (
+              <PartyMemberFrame
+                as="article"
+                baseClassName="dual-opponent-member"
+                effectMode="compact"
+                key={member.id}
+                member={member}
+              />
+            ))}
+          </section>
+
+          <section className="dual-opponent-effects">
+            <span>Buffs: {state.opponentBuffSummary || 'none'}</span>
+            <span>Debuffs: {state.opponentDebuffSummary || 'none'}</span>
+          </section>
+        </>
+      ) : (
+        <>
+
       <section className="dual-controls-resource">
         <div>
           <p className="eyebrow">Active Target</p>
@@ -453,7 +669,7 @@ export function DualScreenBottomDisplay() {
           <span>{state.resourceName} {Math.floor(state.resource)} / {state.maxResource}</span>
           {state.speedMultiplier === 2 && <strong className="speed-badge">2x speed</strong>}
           <div className="bar mana-bar">
-            <span style={{ width: `${(state.resource / state.maxResource) * 100}%` }} />
+            <span style={barFillStyle((state.resource / state.maxResource) * 100)} />
           </div>
         </div>
       </section>
@@ -542,6 +758,8 @@ export function DualScreenBottomDisplay() {
           )
         })}
       </section>
+        </>
+      )}
     </main>
   )
 }
@@ -549,17 +767,50 @@ export function DualScreenBottomDisplay() {
 export function DualScreenTopCombat({
   state,
   onSelectTarget,
+  onCastSpell,
 }: {
   state: DualScreenCombatState
   onSelectTarget: (id: string) => void
+  onCastSpell?: (spell: Spell) => void
 }) {
   const enemyPercent = Math.max(
     0,
     (state.encounterHealth / state.encounterMaxHealth) * 100,
   )
+  const floatingTextsByMember = useMemo(
+    () => groupFloatingTextsByMember(state.floatingTexts),
+    [state.floatingTexts],
+  )
+
+  const spellButtons = state.spells.map((spell, slotIndex) => {
+    if (!spell) return <div className="dual-top-spell empty" key={`empty-${slotIndex}`} />
+    const percent = spell.remaining > 0
+      ? Math.min(100, (spell.remaining / Math.max(1, spell.cooldown)) * 100)
+      : 0
+    return (
+      <button
+        className="dual-top-spell"
+        data-controller-nav={state.opponentParty ? 'skip' : undefined}
+        disabled={
+          !state.playerIsAlive
+          || state.resource < spell.cost
+          || spell.remaining > 0
+          || state.status !== 'playing'
+          || state.paused
+        }
+        key={spell.id}
+        onClick={() => onCastSpell?.(spell)}
+        type="button"
+      >
+        <span className={`spell-icon spell-${spell.kind}`}>{spell.glyph}</span>
+        {spell.remaining > 0 && <i style={{ height: `${percent}%` }} />}
+        {spell.remaining > 0 && <small>{spell.remaining.toFixed(0)}</small>}
+      </button>
+    )
+  })
 
   return (
-    <div className="dual-top-main">
+    <div className={`dual-top-main ${state.opponentParty ? 'pvp-roguelike-dual-top' : ''}`}>
       <section className="dual-top-enemy">
         <div className="enemy-portrait" aria-hidden="true">
           {state.encounterIsBoss ? 'B' : 'M'}
@@ -570,10 +821,25 @@ export function DualScreenTopCombat({
             <span>{Math.ceil(state.encounterHealth)} / {state.encounterMaxHealth}</span>
           </div>
           <div className="bar enemy-health">
-            <span style={{ width: `${enemyPercent}%` }} />
+            <span style={barFillStyle(enemyPercent)} />
           </div>
-          <p>{state.encounterDescription}</p>
+          {state.opponentParty && (
+            <div className="dual-top-resource">
+              <strong>{state.resourceName} {Math.floor(state.resource)} / {state.maxResource}</strong>
+              <div className="bar mana-bar">
+                <span style={barFillStyle((state.resource / state.maxResource) * 100)} />
+              </div>
+            </div>
+          )}
+          {!state.opponentParty && <p>{state.encounterDescription}</p>}
         </div>
+        {state.opponentParty && (
+          <div className="dual-top-side-status">
+            <div className="dual-top-cooldowns" aria-label="Cooldowns">
+              {spellButtons}
+            </div>
+          </div>
+        )}
       </section>
 
       <section className="dual-top-party">
@@ -585,50 +851,34 @@ export function DualScreenTopCombat({
             const inCurrentTargetGroup = index >= groupStart && index < groupStart + 6
             const targetBinding = state.directPartyTargeting && inCurrentTargetGroup ? state.bindings[targetAction] : null
             return (
-              <button
-                className={`dual-top-member ${state.selectedId === member.id ? 'selected' : ''} ${member.health <= 0 ? 'dead' : ''}`}
-                data-party-member-id={member.id}
+              <PartyMemberFrame
+                baseClassName="dual-top-member"
+                controllerIconStyle={state.controllerIconStyle}
+                effectMode="compact"
+                floatingTexts={floatingTextsByMember.get(member.id) ?? []}
                 key={member.id}
-                onClick={() => onSelectTarget(member.id)}
-                type="button"
-              >
-                <div className="member-header">
-                  <span className={`role role-${member.role.toLowerCase()}`}>{member.role[0]}</span>
-                  <strong>{member.name}</strong>
-                  <small>{Math.ceil(member.health)} / {member.maxHealth}</small>
-                </div>
-                <div className="bar member-health">
-                  <span style={{ width: `${(member.health / member.maxHealth) * 100}%` }} />
-                  {member.shield > 0 && (
-                    <i style={{ width: `${(member.shield / member.maxHealth) * 100}%` }} />
-                  )}
-                  <em className="health-text">{Math.ceil(member.health)} / {member.maxHealth}</em>
-                </div>
-                <div className="floating-combat-texts" aria-hidden="true">
-                  {state.floatingTexts
-                    .filter((entry) => entry.memberId === member.id)
-                    .map((entry) => <span className="floating-heal" key={entry.id}>+{entry.value}</span>)}
-                </div>
-                {state.directPartyTargeting && targetBinding && (
-                  <div className="member-target-key">
-                    <ControllerBindingLabel
-                      binding={targetBinding}
-                      iconStyle={state.controllerIconStyle}
-                    />
-                  </div>
-                )}
-                <div className="member-effects">
-                  {memberHotEffects(member).map((effect) => (
-                    <span className="buff" key={effect.id}>{effect.label}</span>
-                  ))}
-                  {member.debuff && <span className="debuff">{member.debuff}</span>}
-                </div>
-              </button>
+                member={member}
+                onSelect={onSelectTarget}
+                selected={state.selectedId === member.id}
+                targetBinding={targetBinding}
+              />
             )
           })}
         </div>
       </section>
 
+      {!state.opponentParty && (
+        <section className="dual-top-spell-strip">
+          {spellButtons}
+          <div className="dual-top-resource">
+            <strong>{state.resourceName} {Math.floor(state.resource)} / {state.maxResource}</strong>
+            <div className="bar mana-bar">
+              <span style={barFillStyle((state.resource / state.maxResource) * 100)} />
+            </div>
+          </div>
+        </section>
+      )}
+
     </div>
   )
 }

src/game.ts

@@ -184,17 +184,25 @@ export const ENCOUNTERS: Encounter[] = [
 ]
 
 export function partyDamageOutput(party: PartyMember[], baseDamage: number) {
-  const livingCount = party.filter((member) => member.health > 0).length
+  let livingCount = 0
+  for (const member of party) {
+    if (member.health > 0) livingCount += 1
+  }
   return Math.round(baseDamage * (livingCount / Math.max(1, party.length)))
 }
 
 export function tankPressureTargets(party: PartyMember[]) {
-  const living = party.filter((member) => member.health > 0)
-  const tanks = living.filter((member) => member.role === 'Tank')
+  const tanks: PartyMember[] = []
+  let damageDealer: PartyMember | undefined
+  for (const member of party) {
+    if (member.health <= 0) continue
+    if (member.role === 'Tank') {
+      tanks.push(member)
+    } else if (member.role === 'Damage' && (!damageDealer || member.health > damageDealer.health)) {
+      damageDealer = member
+    }
+  }
   if (tanks.length > 0) return { targets: tanks, multiplier: 1 }
-  const damageDealer = living
-    .filter((member) => member.role === 'Damage')
-    .sort((left, right) => right.health - left.health)[0]
   return {
     targets: damageDealer ? [damageDealer] : [],
     multiplier: TANKLESS_DAMAGE_MULTIPLIER,
@@ -202,8 +210,19 @@ export function tankPressureTargets(party: PartyMember[]) {
 }
 
 export function groupHealTargets(party: PartyMember[], targetCount = DEFAULT_GROUP_HEAL_TARGETS) {
-  return party
-    .filter((member) => member.health > 0)
-    .sort((left, right) => (left.health / left.maxHealth) - (right.health / right.maxHealth))
-    .slice(0, targetCount)
+  const targets: PartyMember[] = []
+  for (const member of party) {
+    if (member.health <= 0) continue
+    const healthRatio = member.health / member.maxHealth
+    let insertAt = targets.length
+    while (
+      insertAt > 0
+      && healthRatio < targets[insertAt - 1].health / targets[insertAt - 1].maxHealth
+    ) {
+      insertAt -= 1
+    }
+    targets.splice(insertAt, 0, member)
+    if (targets.length > targetCount) targets.pop()
+  }
+  return targets
 }

src/gameRepository.ts

@@ -1,5 +1,14 @@
 import starterProfile from './offline-starter-profile.json'
 import { bundledCatalogHash } from './offline-catalog-meta'
+import {
+  catchUpExperienceReward as catchUpExperienceRewardForTarget,
+  coinDropQuantity,
+  experienceForLevel,
+  roguelikeCoinItemLevel,
+  scaledCurrentLevelExperience,
+  scaledPvpBossExperience,
+  scaledPvpFightExperience,
+} from './shared/rewardRules.mjs'
 import type {
   Account,
   AuthSession,
@@ -8,6 +17,7 @@ import type {
   LootRoll,
   Item,
   EquipmentSlot,
+  PetAward,
 } from './profile'
 
 export type GameMode = 'online' | 'offline'
@@ -37,7 +47,8 @@ export interface GameRepository {
     durationSeconds: number,
     options?: {
       bossesCleared?: number
-      experienceMode?: 'default' | 'pvp-boss-quarter-level'
+      experienceMode?: 'default' | 'pvp-boss-quarter-level' | 'pvp-fight-twelfth-level' | 'pvp-match-win-half-level' | 'pvp-stadium-round-win-quarter-level' | 'pvp-stadium-round-loss-tenth-level' | 'pvp-stadium-match-half-level'
+      fightsCleared?: number
       lootSourceEncounterId?: number
       roguelikeStage?: number
     },
@@ -54,6 +65,14 @@ export interface GameRepository {
     difficultyId: number,
     runToken: string,
   ): Promise<LootRoll>
+  recordBossKill(
+    encounterId: number,
+    options?: { petVariant?: 'normal' | 'purple' },
+  ): Promise<{
+    profile: CharacterProfile
+    petAwarded: PetAward | null
+  }>
+  recordPvpMatch(won: boolean): Promise<CharacterProfile>
 }
 
 type CharacterData = {
@@ -66,7 +85,8 @@ type CharacterData = {
 }
 
 type OfflineSave = {
-  version: 3
+  version: 4
+  updatedAt: number
   characterName: string
   activeClassId: number
   completedDungeonParts: number
@@ -74,6 +94,10 @@ type OfflineSave = {
   dungeonCompletions?: Record<string, number>
   characters: Record<number, CharacterData>
   lootRolls: Record<string, LootRoll>
+  bossKills: Record<string, number>
+  bossPets: Record<string, number>
+  pvpMatchesPlayed: number
+  pvpMatchesWon: number
 }
 
 type OnlineCache = {
@@ -94,6 +118,22 @@ export type CloudSyncStatus = {
   dirty: boolean
 }
 
+export type CloudSaveAge = 'server-newer' | 'local-newer' | 'same' | 'unknown'
+
+export type CloudSaveSummary = {
+  updatedAt: number | null
+  characterName: string
+  activeClassId: number
+}
+
+export type CloudSyncComparison = {
+  relation: CloudSaveAge
+  local: CloudSaveSummary
+  server: CloudSaveSummary
+}
+
+export type CloudSyncChoice = 'local' | 'server'
+
 type RepositoryMode = 'online' | 'offline-local' | 'offline-cached'
 
 type NetworkError = Error & {
@@ -114,11 +154,37 @@ const catalogBundleKey = 'chronicle.catalog.bundleHash.v1'
 const authTokenKey = 'chronicle.authToken.v1'
 const offlineAccount = { id: -1, username: 'Offline' }
 const ABILITY_SLOT_COUNT = 6
+const BOSS_PET_DROP_RATE = 1 / 500
+let activeCatalogCache: CatalogCache | null = null
 
 function clone<T>(value: T): T {
   return structuredClone(value)
 }
 
+function normalizedSaveTimestamp(value: unknown): number {
+  const timestamp = Number(value)
+  return Number.isFinite(timestamp) && timestamp > 0 ? timestamp : 0
+}
+
+function stampSave(save: OfflineSave, updatedAt = Date.now()): OfflineSave {
+  save.updatedAt = updatedAt
+  return save
+}
+
+function saveSummary(save: OfflineSave): CloudSaveSummary {
+  return {
+    updatedAt: save.updatedAt > 0 ? save.updatedAt : null,
+    characterName: save.characterName,
+    activeClassId: save.activeClassId,
+  }
+}
+
+function compareSaveAge(local: OfflineSave, server: OfflineSave): CloudSaveAge {
+  if (local.updatedAt <= 0 || server.updatedAt <= 0) return 'unknown'
+  if (Math.abs(local.updatedAt - server.updatedAt) < 1000) return 'same'
+  return server.updatedAt > local.updatedAt ? 'server-newer' : 'local-newer'
+}
+
 function toGameMode(mode: RepositoryMode): GameMode {
   return mode === 'online' ? 'online' : 'offline'
 }
@@ -164,7 +230,8 @@ function upgradeV1Save(v1: { profile: CharacterProfile; lootRolls: Record<string
     }
   }
   return {
-    version: 3,
+    version: 4,
+    updatedAt: 0,
     characterName: p.character.name,
     activeClassId: p.character.classId,
     completedDungeonParts: p.completedDungeonParts,
@@ -174,14 +241,35 @@ function upgradeV1Save(v1: { profile: CharacterProfile; lootRolls: Record<string
     ),
     characters,
     lootRolls: v1.lootRolls ?? {},
+    bossKills: p.hunterStats?.bossKills ?? {},
+    bossPets: p.hunterStats?.bossPets ?? {},
+    pvpMatchesPlayed: p.hunterStats?.pvpMatchesPlayed ?? 0,
+    pvpMatchesWon: p.hunterStats?.pvpMatchesWon ?? 0,
   }
 }
 
-function upgradeV2Save(v2: Omit<OfflineSave, 'version' | 'completedRaidPhases'> & { version: 2 }): OfflineSave {
+function upgradeV2Save(v2: Omit<OfflineSave, 'version' | 'completedRaidPhases' | 'bossKills' | 'bossPets' | 'pvpMatchesPlayed' | 'pvpMatchesWon'> & { version: 2 }): OfflineSave {
   return normalizeSaveAbilitySlots({
     ...v2,
-    version: 3,
+    version: 4,
+    updatedAt: normalizedSaveTimestamp((v2 as { updatedAt?: unknown }).updatedAt),
     completedRaidPhases: 0,
+    bossKills: {},
+    bossPets: {},
+    pvpMatchesPlayed: 0,
+    pvpMatchesWon: 0,
+  })
+}
+
+function upgradeV3Save(v3: Omit<OfflineSave, 'version' | 'bossKills' | 'bossPets' | 'pvpMatchesPlayed' | 'pvpMatchesWon'> & { version: 3 }): OfflineSave {
+  return normalizeSaveAbilitySlots({
+    ...v3,
+    version: 4,
+    updatedAt: normalizedSaveTimestamp((v3 as { updatedAt?: unknown }).updatedAt),
+    bossKills: {},
+    bossPets: {},
+    pvpMatchesPlayed: 0,
+    pvpMatchesWon: 0,
   })
 }
 
@@ -200,6 +288,7 @@ function normalizeAbilitySlots(abilitySlots: unknown): Array<number | null> {
 }
 
 function normalizeSaveAbilitySlots(save: OfflineSave): OfflineSave {
+  save.updatedAt = normalizedSaveTimestamp(save.updatedAt)
   for (const character of Object.values(save.characters)) {
     character.abilitySlots = normalizeAbilitySlots(character.abilitySlots)
   }
@@ -213,9 +302,12 @@ function normalizeOfflineSave(raw: unknown): OfflineSave | null {
     profile?: CharacterProfile
     lootRolls?: Record<string, LootRoll>
   }
-  if (candidate.version === 3) return normalizeSaveAbilitySlots(candidate as OfflineSave)
+  if (candidate.version === 4) return normalizeSaveAbilitySlots(candidate as OfflineSave)
+  if (candidate.version === 3) {
+    return upgradeV3Save(candidate as Omit<OfflineSave, 'version' | 'bossKills' | 'bossPets' | 'pvpMatchesPlayed' | 'pvpMatchesWon'> & { version: 3 })
+  }
   if (candidate.version === 2) {
-    return upgradeV2Save(candidate as Omit<OfflineSave, 'version' | 'completedRaidPhases'> & { version: 2 })
+    return upgradeV2Save(candidate as Omit<OfflineSave, 'version' | 'completedRaidPhases' | 'bossKills' | 'bossPets' | 'pvpMatchesPlayed' | 'pvpMatchesWon'> & { version: 2 })
   }
   if (candidate.version === 1 && candidate.profile) {
     return normalizeSaveAbilitySlots(upgradeV1Save(candidate as { profile: CharacterProfile; lootRolls: Record<string, LootRoll> }))
@@ -230,7 +322,7 @@ function readSaveKey(key: string): OfflineSave | null {
     const raw = JSON.parse(serialized)
     const save = normalizeOfflineSave(raw)
     if (!save) return null
-    if (raw.version !== 3) {
+    if (raw.version !== 4) {
       localStorage.setItem(key, JSON.stringify(save))
     }
     return save
@@ -273,7 +365,7 @@ function readOnlineCache(): OnlineCache | null {
       save,
       dirty: Boolean(raw.dirty),
     }
-    if ((raw.save as { version?: number } | undefined)?.version !== 3) {
+    if ((raw.save as { version?: number } | undefined)?.version !== 4) {
       writeOnlineCache(cache)
     }
     return cache
@@ -302,6 +394,7 @@ function readCatalogCache(): CatalogCache | null {
   if (localStorage.getItem(catalogBundleKey) !== bundledCatalogHash) {
     localStorage.removeItem(catalogCacheKey)
     localStorage.setItem(catalogBundleKey, bundledCatalogHash)
+    activeCatalogCache = null
     return null
   }
   const serialized = localStorage.getItem(catalogCacheKey)
@@ -318,10 +411,13 @@ function readCatalogCache(): CatalogCache | null {
 function writeCatalogCache(cache: CatalogCache) {
   localStorage.setItem(catalogBundleKey, bundledCatalogHash)
   localStorage.setItem(catalogCacheKey, JSON.stringify(cache))
+  activeCatalogCache = cache
 }
 
 function activeCatalog(): CatalogCache {
-  return readCatalogCache() ?? bundledCatalog()
+  if (activeCatalogCache) return activeCatalogCache
+  activeCatalogCache = readCatalogCache() ?? bundledCatalog()
+  return activeCatalogCache
 }
 
 function buildProfile(save: OfflineSave): CharacterProfile {
@@ -365,6 +461,12 @@ function buildProfile(save: OfflineSave): CharacterProfile {
     ...dungeon,
     completionCount: save.dungeonCompletions?.[String(dungeon.id)] ?? dungeon.completionCount ?? 0,
   }))
+  static_.hunterStats = {
+    bossKills: clone(save.bossKills ?? {}),
+    bossPets: clone(save.bossPets ?? {}),
+    pvpMatchesPlayed: save.pvpMatchesPlayed ?? 0,
+    pvpMatchesWon: save.pvpMatchesWon ?? 0,
+  }
 
   return static_
 }
@@ -453,10 +555,6 @@ function selectUpgradeRecipe(
   return candidates.find((recipe) => recipe.item.itemLevel === nextItemLevel)
 }
 
-function experienceForLevel(level: number) {
-  return (level - 1) * (level - 1) * 100
-}
-
 function catchUpExperienceReward(
   baseReward: number,
   currentExperience: number,
@@ -464,11 +562,11 @@ function catchUpExperienceReward(
   targetLevel: number,
 ) {
   if (targetLevel <= currentLevel) return baseReward
-  const targetExperience = experienceForLevel(targetLevel)
-  const gap = Math.max(0, targetExperience - currentExperience)
-  if (gap <= 0) return baseReward
-  const doubledBase = Math.min(baseReward, Math.ceil(gap / 2))
-  return doubledBase * 2 + (baseReward - doubledBase)
+  return catchUpExperienceRewardForTarget(
+    baseReward,
+    currentExperience,
+    experienceForLevel(targetLevel),
+  )
 }
 
 function highestOtherClassLevel(save: OfflineSave) {
@@ -478,31 +576,6 @@ function highestOtherClassLevel(save: OfflineSave) {
     .reduce((highest, [, character]) => Math.max(highest, character.level), 0)
 }
 
-function scaledPvpBossExperience(
-  startingExperience: number,
-  startingLevel: number,
-  bossesCleared: number,
-  maxLevel: number,
-  targetLevel = startingLevel,
-) {
-  let experience = startingExperience
-  let level = startingLevel
-  const maxExperience = experienceForLevel(maxLevel)
-  for (let bossIndex = 0; bossIndex < bossesCleared && experience < maxExperience; bossIndex += 1) {
-    const currentLevelFloor = experienceForLevel(level)
-    const nextLevelExperience = level >= maxLevel
-      ? maxExperience
-      : experienceForLevel(level + 1)
-    const levelBand = Math.max(1, nextLevelExperience - currentLevelFloor)
-    const rewardRate = targetLevel > level ? 0.5 : 0.25
-    experience = Math.min(maxExperience, experience + Math.round(levelBand * rewardRate))
-    while (level < maxLevel && experienceForLevel(level + 1) <= experience) {
-      level += 1
-    }
-  }
-  return { experience, level }
-}
-
 function talentEffectCapacity(level: number) {
   return Math.min(4, Math.max(0, Math.floor(level / 5)))
 }
@@ -561,7 +634,8 @@ function mergeProfileIntoSave(profile: CharacterProfile, existingSave?: OfflineS
     inventory: clone(profile.inventory),
   }
   return {
-    version: 3,
+    version: 4,
+    updatedAt: existingSave?.updatedAt ?? Date.now(),
     characterName: profile.character.name,
     activeClassId: profile.character.classId,
     completedDungeonParts: profile.completedDungeonParts,
@@ -571,6 +645,10 @@ function mergeProfileIntoSave(profile: CharacterProfile, existingSave?: OfflineS
     ),
     characters,
     lootRolls: clone(existingSave?.lootRolls ?? {}),
+    bossKills: clone(profile.hunterStats?.bossKills ?? existingSave?.bossKills ?? {}),
+    bossPets: clone(profile.hunterStats?.bossPets ?? existingSave?.bossPets ?? {}),
+    pvpMatchesPlayed: profile.hunterStats?.pvpMatchesPlayed ?? existingSave?.pvpMatchesPlayed ?? 0,
+    pvpMatchesWon: profile.hunterStats?.pvpMatchesWon ?? existingSave?.pvpMatchesWon ?? 0,
   }
 }
 
@@ -584,15 +662,48 @@ function rollWeightedLootEntry<T extends { dropWeight: number }>(entries: T[]):
   return entries[entries.length - 1]
 }
 
-function coinDropQuantity() {
-  const roll = Math.random()
-  if (roll < 0.15) return 3
-  if (roll < 0.5) return 2
-  return 1
+function bossPetName(encounterName: string) {
+  return `${encounterName} Pet`
 }
 
-function roguelikeCoinItemLevel(stage: number) {
-  return Math.min(25, 5 + Math.max(0, Math.floor(stage / 5)) * 5)
+function purpleBossPetName(encounterName: string) {
+  return `Purple ${encounterName} Pet`
+}
+
+function maybeAwardBossPet(
+  save: OfflineSave,
+  encounter: { id: number; enemyName: string },
+  variant: 'normal' | 'purple' = 'normal',
+): PetAward | null {
+  if (Math.random() >= BOSS_PET_DROP_RATE) return null
+  const key = variant === 'purple' ? `purple:${encounter.id}` : String(encounter.id)
+  const previousQuantity = save.bossPets?.[key] ?? 0
+  save.bossPets = {
+    ...(save.bossPets ?? {}),
+    [key]: previousQuantity + 1,
+  }
+  return {
+    encounterId: encounter.id,
+    petName: variant === 'purple'
+      ? purpleBossPetName(encounter.enemyName)
+      : bossPetName(encounter.enemyName),
+    quantity: 1,
+    duplicate: previousQuantity > 0,
+    quantityAfter: previousQuantity + 1,
+  }
+}
+
+function recordBossKillInSave(
+  save: OfflineSave,
+  encounter: { id: number; enemyName: string },
+  options?: { petVariant?: 'normal' | 'purple' },
+): PetAward | null {
+  const key = String(encounter.id)
+  save.bossKills = {
+    ...(save.bossKills ?? {}),
+    [key]: (save.bossKills?.[key] ?? 0) + 1,
+  }
+  return maybeAwardBossPet(save, encounter, options?.petVariant ?? 'normal')
 }
 
 function awardRoguelikeCoin(
@@ -671,7 +782,7 @@ function getApiBaseUrl(path: string): string {
   return ''
 }
 
-async function requestJson<T>(path: string, init?: RequestInit): Promise<T> {
+export async function requestGameApiJson<T>(path: string, init?: RequestInit): Promise<T> {
   const baseUrl = getApiBaseUrl(path)
   const url = baseUrl ? `${baseUrl}${path}` : path
   const headers = new Headers(init?.headers)
@@ -696,6 +807,10 @@ async function requestJson<T>(path: string, init?: RequestInit): Promise<T> {
   return body
 }
 
+async function requestJson<T>(path: string, init?: RequestInit): Promise<T> {
+  return requestGameApiJson(path, init)
+}
+
 function isNetworkError(reason: unknown): reason is NetworkError {
   return reason instanceof Error && Boolean((reason as NetworkError).network)
 }
@@ -906,6 +1021,10 @@ const serverRepository: GameRepository = {
     cachedOnlineLocalRepository.upgradeItem(itemId),
   rollEncounterLoot: (encounterId, difficultyId, runToken) =>
     cachedOnlineLocalRepository.rollEncounterLoot(encounterId, difficultyId, runToken),
+  recordBossKill: (encounterId, options) =>
+    cachedOnlineLocalRepository.recordBossKill(encounterId, options),
+  recordPvpMatch: (won) =>
+    cachedOnlineLocalRepository.recordPvpMatch(won),
 }
 
 function emptyCharacterData(classId: number): CharacterData {
@@ -935,6 +1054,10 @@ function requireStoredSave(store: LocalSaveStore): OfflineSave {
   return save
 }
 
+function writeStoreSave(store: LocalSaveStore, save: OfflineSave) {
+  store.writeSave(stampSave(save))
+}
+
 function createLocalRepository(store: LocalSaveStore): GameRepository {
   return {
     async loadSession() {
@@ -982,7 +1105,7 @@ function createLocalRepository(store: LocalSaveStore): GameRepository {
       }
       save.characters[classId].abilitySlots = slots
       save.activeClassId = classId
-      store.writeSave(save)
+      writeStoreSave(store, save)
       return buildProfile(save)
     },
     async completeDungeon(dungeonId, difficultyId, resourceSpent, durationSeconds, completedPart, startPart, partDurationSeconds, hardMode) {
@@ -1088,7 +1211,7 @@ function createLocalRepository(store: LocalSaveStore): GameRepository {
       }
     }
 
-      store.writeSave(save)
+      writeStoreSave(store, save)
     const updatedProfile = buildProfile(save)
 
     return {
@@ -1138,7 +1261,23 @@ function createLocalRepository(store: LocalSaveStore): GameRepository {
     const bossesCleared = Math.max(0, Math.floor(options?.bossesCleared ?? encountersCleared / 3))
     const scaledReward = options?.experienceMode === 'pvp-boss-quarter-level'
       ? scaledPvpBossExperience(previousExperience, previousLevel, bossesCleared, profile.maxLevel, highestOtherClassLevel(save))
-      : null
+      : options?.experienceMode === 'pvp-fight-twelfth-level'
+        ? scaledPvpFightExperience(
+          previousExperience,
+          previousLevel,
+          Math.max(0, Math.floor(options.fightsCleared ?? encountersCleared)),
+          profile.maxLevel,
+          highestOtherClassLevel(save),
+        )
+        : options?.experienceMode === 'pvp-match-win-half-level'
+          ? scaledCurrentLevelExperience(previousExperience, previousLevel, profile.maxLevel, 0.5)
+          : options?.experienceMode === 'pvp-stadium-round-win-quarter-level'
+            ? scaledCurrentLevelExperience(previousExperience, previousLevel, profile.maxLevel, 0.25)
+            : options?.experienceMode === 'pvp-stadium-round-loss-tenth-level'
+              ? scaledCurrentLevelExperience(previousExperience, previousLevel, profile.maxLevel, 0.1)
+              : options?.experienceMode === 'pvp-stadium-match-half-level'
+                ? scaledCurrentLevelExperience(previousExperience, previousLevel, profile.maxLevel, 0.5)
+                : null
     const baseRoguelikeReward = Math.round(dungeon.experienceReward * difficulty.experienceMultiplier * (encountersCleared / 3))
     const newExperience = scaledReward
       ? scaledReward.experience
@@ -1177,6 +1316,17 @@ function createLocalRepository(store: LocalSaveStore): GameRepository {
       profile.maxTalentPoints,
       cd.talentPoints + levelsGained,
     )
+    let petAwarded: PetAward | null = null
+    if (options?.lootSourceEncounterId) {
+      const sourceEncounter = profile.dungeons
+        .flatMap((candidate) => candidate.encounters)
+        .find((candidate) => candidate.id === options.lootSourceEncounterId && candidate.isBoss)
+      if (sourceEncounter) {
+        petAwarded = recordBossKillInSave(save, sourceEncounter, {
+          petVariant: 'purple',
+        })
+      }
+    }
     const bonusItem = awardRoguelikeCoin(
       profile,
       options?.lootSourceEncounterId,
@@ -1184,7 +1334,7 @@ function createLocalRepository(store: LocalSaveStore): GameRepository {
     )
     cd.inventory = profile.inventory
 
-      store.writeSave(save)
+      writeStoreSave(store, save)
     const updatedProfile = buildProfile(save)
 
     return {
@@ -1201,6 +1351,7 @@ function createLocalRepository(store: LocalSaveStore): GameRepository {
       averageItemLevel: updatedProfile.gearStats.averageItemLevel,
       unlockedAbilities,
       bonusItem,
+      petAwarded,
       profile: updatedProfile,
     }
     },
@@ -1238,7 +1389,7 @@ function createLocalRepository(store: LocalSaveStore): GameRepository {
         }
         cd.talentRanks[String(talentId)] = 1
       }
-      store.writeSave(save)
+      writeStoreSave(store, save)
       return buildProfile(save)
     }
     if (cd.talentPoints <= 0) {
@@ -1266,7 +1417,7 @@ function createLocalRepository(store: LocalSaveStore): GameRepository {
     }
     cd.talentRanks[String(talentId)] = (cd.talentRanks[String(talentId)] ?? 0) + 1
     cd.talentPoints -= 1
-      store.writeSave(save)
+      writeStoreSave(store, save)
       return buildProfile(save)
     },
     async resetTalents() {
@@ -1289,7 +1440,7 @@ function createLocalRepository(store: LocalSaveStore): GameRepository {
         cd.talentPoints + refunded,
       )
     }
-      store.writeSave(save)
+      writeStoreSave(store, save)
       return buildProfile(save)
     },
     async equipItem(itemId) {
@@ -1301,7 +1452,7 @@ function createLocalRepository(store: LocalSaveStore): GameRepository {
       if (candidate.slot === item.slot) candidate.equipped = candidate.id === item.id
     }
     save.characters[save.activeClassId].inventory = profile.inventory
-      store.writeSave(save)
+      writeStoreSave(store, save)
       return buildProfile(save)
     },
     async discardExtraItem(itemId) {
@@ -1312,7 +1463,7 @@ function createLocalRepository(store: LocalSaveStore): GameRepository {
     if (item.quantity <= 1) throw new Error('Only extra copies can be discarded.')
     item.quantity -= 1
     save.characters[save.activeClassId].inventory = profile.inventory
-      store.writeSave(save)
+      writeStoreSave(store, save)
       return buildProfile(save)
     },
     async breakdownItem(itemId) {
@@ -1355,7 +1506,7 @@ function createLocalRepository(store: LocalSaveStore): GameRepository {
     }
 
     save.characters[save.activeClassId].inventory = profile.inventory
-      store.writeSave(save)
+      writeStoreSave(store, save)
       return buildProfile(save)
     },
     async craftItem(recipeId) {
@@ -1383,7 +1534,7 @@ function createLocalRepository(store: LocalSaveStore): GameRepository {
 
     addInventoryItem(profile.inventory, recipe.item, 1)
     save.characters[save.activeClassId].inventory = profile.inventory
-      store.writeSave(save)
+      writeStoreSave(store, save)
       return buildProfile(save)
     },
     async upgradeItem(itemId) {
@@ -1426,7 +1577,7 @@ function createLocalRepository(store: LocalSaveStore): GameRepository {
       if (upgraded) upgraded.equipped = true
     }
     save.characters[save.activeClassId].inventory = profile.inventory
-      store.writeSave(save)
+      writeStoreSave(store, save)
       return buildProfile(save)
     },
     async rollEncounterLoot(encounterId, difficultyId, runToken) {
@@ -1451,6 +1602,9 @@ function createLocalRepository(store: LocalSaveStore): GameRepository {
       throw new Error('This encounter has no configured loot.')
     }
     const dropChance = entries[0].dropChance
+    const petAwarded = encounter.isBoss
+      ? recordBossKillInSave(save, encounter)
+      : null
     const items: LootRoll['items'] = []
 
     const selectedQuantities = new Map<number, { entry: typeof entries[number]; quantity: number }>()
@@ -1502,12 +1656,36 @@ function createLocalRepository(store: LocalSaveStore): GameRepository {
       awarded: Boolean(item),
       duplicate: items.some((candidate) => candidate.duplicate),
       quantityAfter: item?.quantityAfter ?? 0,
+      petAwarded,
     }
     save.lootRolls[rollKey] = result
     save.characters[save.activeClassId].inventory = profile.inventory
-      store.writeSave(save)
+      writeStoreSave(store, save)
       return clone(result)
     },
+    async recordBossKill(encounterId, options) {
+      const save = requireStoredSave(store)
+      const profile = buildProfile(save)
+      const encounter = profile.dungeons
+        .flatMap((dungeon) => dungeon.encounters)
+        .find((candidate) => candidate.id === encounterId && candidate.isBoss)
+      if (!encounter) throw new Error('Boss encounter not found.')
+      const petAwarded = recordBossKillInSave(save, encounter, {
+        petVariant: options?.petVariant ?? 'normal',
+      })
+      writeStoreSave(store, save)
+      return {
+        profile: buildProfile(save),
+        petAwarded,
+      }
+    },
+    async recordPvpMatch(won) {
+      const save = requireStoredSave(store)
+      save.pvpMatchesPlayed = (save.pvpMatchesPlayed ?? 0) + 1
+      if (won) save.pvpMatchesWon = (save.pvpMatchesWon ?? 0) + 1
+      writeStoreSave(store, save)
+      return buildProfile(save)
+    },
   }
 }
 
@@ -1586,6 +1764,10 @@ const cachedOnlineRepository: GameRepository = {
   upgradeItem: (itemId) => cachedOnlineLocalRepository.upgradeItem(itemId),
   rollEncounterLoot: (encounterId, difficultyId, runToken) =>
     cachedOnlineLocalRepository.rollEncounterLoot(encounterId, difficultyId, runToken),
+  recordBossKill: (encounterId, options) =>
+    cachedOnlineLocalRepository.recordBossKill(encounterId, options),
+  recordPvpMatch: (won) =>
+    cachedOnlineLocalRepository.recordPvpMatch(won),
 }
 
 export function getGameMode(): GameMode {
@@ -1618,6 +1800,49 @@ export async function syncCloudSave(): Promise<CharacterProfile> {
   return buildProfile(synced.save)
 }
 
+export async function previewCloudSaveSync(): Promise<CloudSyncComparison> {
+  const cache = readOnlineCache()
+  if (!cache) {
+    throw new Error('No signed-in save is available for cloud sync.')
+  }
+  await refreshCatalogFromServer()
+  const serverSave = await loadServerSyncSave()
+  return {
+    relation: compareSaveAge(cache.save, serverSave),
+    local: saveSummary(cache.save),
+    server: saveSummary(serverSave),
+  }
+}
+
+export async function applyCloudSaveSync(choice: CloudSyncChoice): Promise<CharacterProfile> {
+  const cache = readOnlineCache()
+  if (!cache) {
+    throw new Error('No signed-in save is available for cloud sync.')
+  }
+  await refreshCatalogFromServer()
+  if (choice === 'server') {
+    const serverSave = await loadServerSyncSave()
+    writeOnlineCache({
+      version: 1,
+      account: cache.account,
+      save: serverSave,
+      dirty: false,
+    })
+    writeMode('online')
+    return buildProfile(serverSave)
+  }
+  const synced = await pushServerSyncSave(cache.save)
+  await refreshCatalogFromServer()
+  writeOnlineCache({
+    version: 1,
+    account: cache.account,
+    save: synced.save,
+    dirty: false,
+  })
+  writeMode('online')
+  return buildProfile(synced.save)
+}
+
 export function selectOnlineMode() {
   writeMode('online')
 }
@@ -1632,13 +1857,18 @@ export function createOfflineCharacter(characterName: string): AuthSession {
     characters[cid] = emptyCharacterData(cid)
   }
   const save: OfflineSave = {
-    version: 3,
+    version: 4,
+    updatedAt: Date.now(),
     characterName: name,
     activeClassId: 1,
     completedDungeonParts: 0,
     completedRaidPhases: 0,
     characters,
     lootRolls: {},
+    bossKills: {},
+    bossPets: {},
+    pvpMatchesPlayed: 0,
+    pvpMatchesWon: 0,
   }
   writeOfflineSave(save)
   writeMode('offline-local')

src/hooks/useCooldownClock.ts

@@ -0,0 +1,36 @@
+import { useEffect, useState } from 'react'
+import { cooldownNow, hasActiveCooldowns } from '../combat/spellCasting'
+
+export function useCooldownClock(
+  cooldowns: Record<string, number>,
+  active: boolean,
+  intervalMs = 100,
+) {
+  const [now, setNow] = useState(cooldownNow)
+
+  useEffect(() => {
+    if (!active || !hasActiveCooldowns(cooldowns)) return undefined
+
+    let timer = 0
+    let startTimer = 0
+    const tick = () => {
+      const nextNow = cooldownNow()
+      setNow(nextNow)
+      if (timer && !hasActiveCooldowns(cooldowns, nextNow)) {
+        window.clearInterval(timer)
+        timer = 0
+      }
+    }
+
+    startTimer = window.setTimeout(() => {
+      tick()
+      timer = window.setInterval(tick, intervalMs)
+    }, 0)
+    return () => {
+      window.clearTimeout(startTimer)
+      if (timer) window.clearInterval(timer)
+    }
+  }, [active, cooldowns, intervalMs])
+
+  return now
+}

src/hooks/useCountdownTimer.ts

@@ -0,0 +1,91 @@
+import { useCallback, useEffect, useRef, useState } from 'react'
+
+type DeadlineTimerOptions = {
+  initialSeconds: number
+  active: boolean
+  intervalMs?: number
+  onExpire: () => void
+}
+
+type RoundCountdownOptions = {
+  seconds: number
+  active: boolean
+  intervalMs?: number
+  onComplete: () => void
+}
+
+export function useDeadlineTimer({
+  initialSeconds,
+  active,
+  intervalMs = 100,
+  onExpire,
+}: DeadlineTimerOptions) {
+  const [timeLeft, setTimeLeft] = useState(initialSeconds)
+  const deadlineRef = useRef(0)
+  const timerRef = useRef<number | null>(null)
+  const onExpireRef = useRef(onExpire)
+
+  useEffect(() => {
+    onExpireRef.current = onExpire
+  }, [onExpire])
+
+  const clearTimer = useCallback(() => {
+    if (timerRef.current === null) return
+    window.clearInterval(timerRef.current)
+    timerRef.current = null
+  }, [])
+
+  const tick = useCallback(() => {
+    if (deadlineRef.current <= 0) return
+    const remaining = Math.max(0, (deadlineRef.current - Date.now()) / 1000)
+    setTimeLeft(remaining)
+    if (remaining > 0) return
+    deadlineRef.current = 0
+    clearTimer()
+    onExpireRef.current()
+  }, [clearTimer])
+
+  const start = useCallback((seconds = initialSeconds) => {
+    clearTimer()
+    deadlineRef.current = Date.now() + seconds * 1000
+    setTimeLeft(seconds)
+    timerRef.current = window.setInterval(tick, intervalMs)
+  }, [clearTimer, initialSeconds, intervalMs, tick])
+
+  const clear = useCallback(() => {
+    deadlineRef.current = 0
+    clearTimer()
+  }, [clearTimer])
+
+  const reset = useCallback((seconds = initialSeconds) => {
+    clear()
+    setTimeLeft(seconds)
+  }, [clear, initialSeconds])
+
+  useEffect(() => {
+    if (!active) clearTimer()
+  }, [active, clearTimer])
+
+  useEffect(() => () => clearTimer(), [clearTimer])
+
+  return {
+    timeLeft,
+    start,
+    clear,
+    reset,
+  }
+}
+
+export function useRoundCountdown({
+  seconds,
+  active,
+  intervalMs = 100,
+  onComplete,
+}: RoundCountdownOptions) {
+  return useDeadlineTimer({
+    initialSeconds: seconds,
+    active,
+    intervalMs,
+    onExpire: onComplete,
+  })
+}

src/hooks/useFloatingCombatText.ts

@@ -0,0 +1,126 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import {
+  appendFloatingText,
+  groupFloatingTextsByMember,
+  stripFloatingTextSide,
+  type BasicFloatingCombatText,
+} from '../combat/combatPresentation'
+
+type FloatingSide = 'player' | 'cpu'
+type SideFloatingCombatText = BasicFloatingCombatText & {
+  side: FloatingSide
+}
+
+type FloatingCombatTextOptions = {
+  durationMs?: number
+}
+
+export function useFloatingCombatText<TText extends BasicFloatingCombatText>({
+  durationMs = 900,
+}: FloatingCombatTextOptions = {}) {
+  const [floatingTexts, setFloatingTexts] = useState<TText[]>([])
+  const nextId = useRef(1)
+  const expirationsRef = useRef(new Map<number, number>())
+  const cleanupTimerRef = useRef<number | null>(null)
+
+  const clearCleanupTimer = useCallback(() => {
+    if (cleanupTimerRef.current === null) return
+    window.clearTimeout(cleanupTimerRef.current)
+    cleanupTimerRef.current = null
+  }, [])
+
+  const scheduleCleanup = useCallback(() => {
+    function scheduleNext() {
+      clearCleanupTimer()
+      let nextExpiry = Infinity
+      for (const expiresAt of expirationsRef.current.values()) {
+        nextExpiry = Math.min(nextExpiry, expiresAt)
+      }
+      if (!Number.isFinite(nextExpiry)) return
+
+      cleanupTimerRef.current = window.setTimeout(() => {
+        cleanupTimerRef.current = null
+        const now = performance.now()
+        let removed = false
+        for (const [id, expiresAt] of expirationsRef.current) {
+          if (expiresAt > now) continue
+          expirationsRef.current.delete(id)
+          removed = true
+        }
+        if (removed) {
+          setFloatingTexts((current) => current.filter((text) => expirationsRef.current.has(text.id)))
+        }
+        scheduleNext()
+      }, Math.max(0, nextExpiry - performance.now()))
+    }
+
+    scheduleNext()
+  }, [clearCleanupTimer])
+
+  const clearFloatingTexts = useCallback(() => {
+    clearCleanupTimer()
+    expirationsRef.current.clear()
+    setFloatingTexts([])
+  }, [clearCleanupTimer])
+
+  const addFloatingText = useCallback((entry: Omit<TText, 'id'>) => {
+    if (entry.value <= 0) return
+    const id = nextId.current++
+    expirationsRef.current.set(id, performance.now() + durationMs)
+    setFloatingTexts((current) => appendFloatingText(current, { ...entry, id } as TText))
+    scheduleCleanup()
+  }, [durationMs, scheduleCleanup])
+
+  useEffect(() => () => clearCleanupTimer(), [clearCleanupTimer])
+
+  const floatingTextsByMember = useMemo(
+    () => groupFloatingTextsByMember(floatingTexts),
+    [floatingTexts],
+  )
+
+  return {
+    floatingTexts,
+    floatingTextsByMember,
+    addFloatingText,
+    clearFloatingTexts,
+  }
+}
+
+export function useSidedFloatingCombatText(options?: FloatingCombatTextOptions) {
+  const {
+    floatingTexts,
+    addFloatingText,
+    clearFloatingTexts,
+  } = useFloatingCombatText<SideFloatingCombatText>(options)
+  const playerFloatingTexts = useMemo(
+    () => floatingTexts.filter((entry) => entry.side === 'player'),
+    [floatingTexts],
+  )
+  const cpuFloatingTexts = useMemo(
+    () => floatingTexts.filter((entry) => entry.side === 'cpu'),
+    [floatingTexts],
+  )
+  const playerFloatingTextsByMember = useMemo(
+    () => groupFloatingTextsByMember(playerFloatingTexts),
+    [playerFloatingTexts],
+  )
+  const cpuFloatingTextsByMember = useMemo(
+    () => groupFloatingTextsByMember(cpuFloatingTexts),
+    [cpuFloatingTexts],
+  )
+  const dualScreenFloatingTexts = useMemo(
+    () => stripFloatingTextSide(playerFloatingTexts),
+    [playerFloatingTexts],
+  )
+
+  return {
+    floatingTexts,
+    playerFloatingTexts,
+    cpuFloatingTexts,
+    playerFloatingTextsByMember,
+    cpuFloatingTextsByMember,
+    dualScreenFloatingTexts,
+    addFloatingText,
+    clearFloatingTexts,
+  }
+}