Android build v1.1.6

android/app/build.gradle

@@ -7,8 +7,8 @@ android {
         applicationId "com.warren.iwanttoheal"
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
-        versionCode 78
-        versionName "1.0.59"
+        versionCode 85
+        versionName "1.1.6"
         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,9 +1,14 @@
 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.KeyEvent;
+import android.view.MotionEvent;
 import android.view.View;
 import com.getcapacitor.BridgeActivity;
 import java.io.File;
@@ -11,15 +16,22 @@ import java.io.File;
 public abstract class ControllerBridgeActivity extends BridgeActivity {
 
     public static final String EXTRA_INITIAL_URL = "com.warren.iwanttoheal.INITIAL_URL";
-    private static final long DPAD_THROTTLE_MS = 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 long DPAD_THROTTLE_MS = 55;
+    private final long[] lastDpadDispatchAt = new long[16];
 
     @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 +46,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 +91,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 +139,25 @@ public abstract class ControllerBridgeActivity extends BridgeActivity {
 
         if (event.getAction() == KeyEvent.ACTION_DOWN) {
             boolean repeat = event.getRepeatCount() > 0;
-            if (isDpadToken(token) && shouldThrottleDpad()) return true;
+            if (isDpadToken(token) && shouldThrottleDpad(token)) 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)
+                () -> {
+                    bridge.getWebView().requestFocus();
+                    bridge.getWebView().evaluateJavascript(script, null);
+                }
             );
         }
         return true;
     }
 
-    private boolean shouldThrottleDpad() {
+    private boolean shouldThrottleDpad(String token) {
+        int buttonIndex = Integer.parseInt(token.substring("Button".length()));
         long now = SystemClock.uptimeMillis();
-        if (now - lastDpadDispatchAt < DPAD_THROTTLE_MS) return true;
-        lastDpadDispatchAt = now;
+        if (now - lastDpadDispatchAt[buttonIndex] < DPAD_THROTTLE_MS) return true;
+        lastDpadDispatchAt[buttonIndex] = now;
         return false;
     }
 

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

@@ -254,6 +254,61 @@ CREATE TABLE IF NOT EXISTS character_inventory (
   PRIMARY KEY (character_id, item_id)
 );
 
+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,

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",

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,166 @@
+#!/usr/bin/env python3
+from __future__ import annotations
+
+import json
+import os
+import re
+import shutil
+import subprocess
+import sys
+import urllib.error
+import urllib.parse
+import urllib.request
+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")
+
+
+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 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 main() -> int:
+    os.chdir(REPO_ROOT)
+    version = prompt_version()
+    apk = build_apk(version)
+    commit_and_push(version)
+    create_gitea_release(version, apk)
+    update_truenas()
+    print("Done.")
+    return 0
+
+
+if __name__ == "__main__":
+    raise SystemExit(main())

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))
@@ -251,10 +256,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) {
@@ -1345,17 +1347,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(`
@@ -2309,13 +2300,15 @@ function completeRoguelike(database, characterId, accountId, runMetrics) {
     ? 'pvp-boss-quarter-level'
     : runMetrics?.experienceMode === 'pvp-fight-twelfth-level'
       ? 'pvp-fight-twelfth-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'
+      : 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)
@@ -2419,7 +2412,8 @@ function completeRoguelike(database, characterId, accountId, runMetrics) {
       `).get(newExperience).level
     }
   } else if (
-    experienceMode === 'pvp-stadium-round-win-quarter-level'
+    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'
   ) {
@@ -2782,6 +2776,19 @@ function updatePvpMatchState(session, matchId, payload) {
     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

src/App.tsx

@@ -1,13 +1,6 @@
-import { useEffect, useState } from 'react'
+import { lazy, Suspense, useEffect, useMemo, useState } from 'react'
 import './App.css'
-import { CombatScreen } from './components/CombatScreen'
 import { AuthScreen } from './components/AuthScreen'
-import { CustomizeScreen } from './components/CustomizeScreen'
-import { EquipmentScreen } from './components/EquipmentScreen'
-import { PvPRoguelikeScreen } from './components/PvpRoguelikeScreen'
-import { PvpStadiumScreen } from './components/PvpStadiumScreen'
-import { TalentScreen } from './components/TalentScreen'
-import { SettingsScreen } from './components/SettingsScreen'
 import {
   loadCpuPvpLeaderboard,
   type CpuPvpLeaderboardEntry,
@@ -27,6 +20,15 @@ import {
   type GameMode,
 } from './gameRepository'
 import { focusFirstControl } from './input.tsx'
+import { barFillStyle } from './components/barStyles'
+
+const CombatScreen = lazy(() => import('./components/CombatScreen').then((module) => ({ default: module.CombatScreen })))
+const CustomizeScreen = lazy(() => import('./components/CustomizeScreen').then((module) => ({ default: module.CustomizeScreen })))
+const EquipmentScreen = lazy(() => import('./components/EquipmentScreen').then((module) => ({ default: module.EquipmentScreen })))
+const PvPRoguelikeScreen = lazy(() => import('./components/PvpRoguelikeScreen').then((module) => ({ default: module.PvPRoguelikeScreen })))
+const PvpStadiumScreen = lazy(() => import('./components/PvpStadiumScreen').then((module) => ({ default: module.PvpStadiumScreen })))
+const TalentScreen = lazy(() => import('./components/TalentScreen').then((module) => ({ default: module.TalentScreen })))
+const SettingsScreen = lazy(() => import('./components/SettingsScreen').then((module) => ({ default: module.SettingsScreen })))
 
 type Screen =
   | 'menu'
@@ -67,6 +69,17 @@ function activityInitials(name: string) {
     .join('')
 }
 
+function ScreenLoading() {
+  return (
+    <main className="game-shell">
+      <section className="message-panel">
+        <p className="eyebrow">Opening Chronicle</p>
+        <h1>Loading...</h1>
+      </section>
+    </main>
+  )
+}
+
 type RoguelikeUpgradeTiming = 'boss' | 'encounter'
 type RoguelikeVariant = 'pve' | 'pvp'
 type RoguelikeAbilityLabelMode = 'ability' | 'slot'
@@ -148,9 +161,138 @@ function App() {
   const [cpuLeaderboard, setCpuLeaderboard] = useState<CpuPvpLeaderboardEntry[]>([])
 
   useEffect(() => {
-    setCpuLeaderboard(loadCpuPvpLeaderboard(pvpContentType))
+    const frame = window.requestAnimationFrame(() => {
+      setCpuLeaderboard(loadCpuPvpLeaderboard(pvpContentType))
+    })
+    return () => window.cancelAnimationFrame(frame)
   }, [pvpContentType, screen, roguelikeVariant])
 
+  const profileDungeons = profile?.dungeons
+  const dungeonOptions = useMemo(
+    () => profileDungeons?.filter((candidate) => candidate.contentType === 'dungeon') ?? [],
+    [profileDungeons],
+  )
+  const raidOptions = useMemo(
+    () => profileDungeons?.filter((candidate) => candidate.contentType === 'raid') ?? [],
+    [profileDungeons],
+  )
+  const selectedDungeonOption = useMemo(
+    () => dungeonOptions.find((candidate) => candidate.id === selectedDungeonId) ?? dungeonOptions[0],
+    [dungeonOptions, selectedDungeonId],
+  )
+  const selectedRaidOption = useMemo(
+    () => raidOptions.find((candidate) => candidate.id === selectedRaidId) ?? raidOptions[0],
+    [raidOptions, selectedRaidId],
+  )
+  const activityOptions = useMemo(
+    () => screen === 'raids' ? raidOptions : dungeonOptions,
+    [dungeonOptions, raidOptions, screen],
+  )
+  const combatDungeonOption = useMemo(
+    () => {
+      if (!profileDungeons) return undefined
+      return combatContentId < 0
+        ? profileDungeons.find((candidate) => candidate.contentType === roguelikeKind) ?? profileDungeons[0]
+        : profileDungeons.find((candidate) => candidate.id === combatContentId) ?? profileDungeons[0]
+    },
+    [combatContentId, profileDungeons, roguelikeKind],
+  )
+  const combatDifficultyOption = useMemo(
+    () => combatDungeonOption?.difficulties.find(
+      (candidate) => candidate.id === selectedDifficultyId,
+    ) ?? combatDungeonOption?.difficulties[0],
+    [combatDungeonOption, selectedDifficultyId],
+  )
+  const roguelikePool = useMemo(
+    () => profileDungeons
+      ?.filter((candidate) => candidate.contentType === roguelikeKind)
+      .flatMap((candidate) => candidate.encounters) ?? [],
+    [profileDungeons, roguelikeKind],
+  )
+  const pvpPool = useMemo(
+    () => profileDungeons
+      ?.filter((candidate) => candidate.contentType === pvpContentType)
+      .flatMap((candidate) => candidate.encounters) ?? [],
+    [profileDungeons, pvpContentType],
+  )
+  const tierOptions = useMemo(
+    () => activityOptions
+      .flatMap((option) => option.difficulties)
+      .filter((difficulty, index, all) => (
+        all.findIndex((candidate) => candidate.droppedItemLevel === difficulty.droppedItemLevel) === index
+      ))
+      .sort((a, b) => a.droppedItemLevel - b.droppedItemLevel),
+    [activityOptions],
+  )
+  const savedDifficulty = useMemo(
+    () => profileDungeons
+      ?.flatMap((option) => option.difficulties)
+      .find((candidate) => candidate.id === selectedDifficultyId),
+    [profileDungeons, selectedDifficultyId],
+  )
+  const selectedTier = useMemo(
+    () => {
+      const characterLevel = profile?.character.level ?? 0
+      const savedTier = tierOptions.find((candidate) => (
+        candidate.droppedItemLevel === savedDifficulty?.droppedItemLevel
+        && characterLevel >= candidate.unlockLevel
+      ))
+      if (savedTier) return savedTier
+      for (let index = tierOptions.length - 1; index >= 0; index -= 1) {
+        if (characterLevel >= tierOptions[index].unlockLevel) return tierOptions[index]
+      }
+      return tierOptions[0]
+    },
+    [profile?.character.level, savedDifficulty?.droppedItemLevel, tierOptions],
+  )
+  const selectedTierItemLevel = selectedTier?.droppedItemLevel ?? 0
+  const activityPageCount = Math.max(1, Math.ceil(activityOptions.length / ACTIVITY_PAGE_SIZE))
+  const currentActivityPage = Math.min(activityPage, activityPageCount - 1)
+  const pagedActivityOptions = useMemo(
+    () => activityOptions.slice(
+      currentActivityPage * ACTIVITY_PAGE_SIZE,
+      currentActivityPage * ACTIVITY_PAGE_SIZE + ACTIVITY_PAGE_SIZE,
+    ),
+    [activityOptions, currentActivityPage],
+  )
+  const selectedActivityOption = useMemo(
+    () => {
+      const fallback = screen === 'raids' && selectedRaidOption ? selectedRaidOption : selectedDungeonOption
+      const selectedActivityId = screen === 'raids' && selectedRaidOption ? selectedRaidOption.id : selectedDungeonOption?.id
+      return activityOptions.find((candidate) => candidate.id === selectedActivityId)
+        ?? activityOptions[0]
+        ?? fallback
+    },
+    [activityOptions, screen, selectedDungeonOption, selectedRaidOption],
+  )
+  const selectedDifficultyOption = useMemo(
+    () => selectedActivityOption?.difficulties.find(
+      (candidate) => candidate.droppedItemLevel === selectedTierItemLevel,
+    ) ?? selectedActivityOption?.difficulties[0],
+    [selectedActivityOption, selectedTierItemLevel],
+  )
+  const lootPreviewEncounters = useMemo(
+    () => [...(selectedActivityOption?.encounters ?? [])]
+      .filter((encounter) => encounter.isBoss)
+      .sort((a, b) => lootSort === 'boss'
+        ? a.enemyName.localeCompare(b.enemyName) || a.sequence - b.sequence
+        : a.sequence - b.sequence),
+    [lootSort, selectedActivityOption?.encounters],
+  )
+  const lootPreviewByEncounterId = useMemo(
+    () => new Map(lootPreviewEncounters.map((encounter) => [
+      encounter.id,
+      encounter.lootTables.filter((entry) => entry.difficultyId === selectedDifficultyOption?.id),
+    ])),
+    [lootPreviewEncounters, selectedDifficultyOption?.id],
+  )
+  const leaderboardEntries = useMemo(
+    () => selectedActivityOption?.leaderboards[leaderboardCategory].filter(
+      (entry) => entry.difficultyId === selectedDifficultyOption?.id,
+    ) ?? [],
+    [leaderboardCategory, selectedActivityOption?.leaderboards, selectedDifficultyOption?.id],
+  )
+
   function acceptSession(session: AuthSession) {
     setAccount(session.account)
     setProfile(session.profile)
@@ -224,65 +366,61 @@ function App() {
   }
 
   if (screen === 'combat') {
-    const dungeon = combatContentId < 0
-      ? profile.dungeons.find((candidate) => candidate.contentType === roguelikeKind) ?? profile.dungeons[0]
-      : profile.dungeons.find((candidate) => candidate.id === combatContentId) ?? profile.dungeons[0]
-    const difficulty = dungeon.difficulties.find(
-      (candidate) => candidate.id === selectedDifficultyId,
-    ) ?? dungeon.difficulties[0]
-    const roguelikePool = profile.dungeons
-      .filter((candidate) => candidate.contentType === roguelikeKind)
-      .flatMap((candidate) => candidate.encounters)
+    const dungeon = combatDungeonOption ?? profile.dungeons[0]
+    const difficulty = combatDifficultyOption ?? dungeon.difficulties[0]
     return (
-      <CombatScreen
-        difficulty={difficulty}
-        dungeon={dungeon}
-        hardMode={false}
-        marathonMode={selectedMarathonMode && combatContentId > 0}
-        profile={profile}
-        roguelikeMode={combatContentId < 0 ? roguelikeKind : undefined}
-        roguelikeUpgradeTiming={combatContentId < 0 ? roguelikeUpgradeTiming : undefined}
-        roguelikeAbilityLabelMode={combatContentId < 0 ? roguelikeAbilityLabelMode : undefined}
-        roguelikeEncounterPool={combatContentId < 0 ? roguelikePool : undefined}
-        startPart={1}
-        onExit={() => {
-          setScreen(combatContentId < 0 ? 'roguelike' : dungeon.contentType === 'raid' ? 'raids' : 'dungeons')
-        }}
-        onProfileUpdated={setProfile}
-      />
+      <Suspense fallback={<ScreenLoading />}>
+        <CombatScreen
+          difficulty={difficulty}
+          dungeon={dungeon}
+          hardMode={false}
+          marathonMode={selectedMarathonMode && combatContentId > 0}
+          profile={profile}
+          roguelikeMode={combatContentId < 0 ? roguelikeKind : undefined}
+          roguelikeUpgradeTiming={combatContentId < 0 ? roguelikeUpgradeTiming : undefined}
+          roguelikeAbilityLabelMode={combatContentId < 0 ? roguelikeAbilityLabelMode : undefined}
+          roguelikeEncounterPool={combatContentId < 0 ? roguelikePool : undefined}
+          startPart={1}
+          onExit={() => {
+            setScreen(combatContentId < 0 ? 'roguelike' : dungeon.contentType === 'raid' ? 'raids' : 'dungeons')
+          }}
+          onProfileUpdated={setProfile}
+        />
+      </Suspense>
     )
   }
 
   if (screen === 'pvp') {
     if (pvpContentType === 'stadium') {
       return (
-        <PvpStadiumScreen
+        <Suspense fallback={<ScreenLoading />}>
+          <PvpStadiumScreen
+            gameMode={gameMode}
+            onExit={() => {
+              setRoguelikeVariant('pvp')
+              setScreen('roguelike')
+            }}
+            onProfileUpdated={setProfile}
+            profile={profile}
+          />
+        </Suspense>
+      )
+    }
+    return (
+      <Suspense fallback={<ScreenLoading />}>
+        <PvPRoguelikeScreen
+          contentType={pvpContentType}
+          encounterPool={pvpPool}
           gameMode={gameMode}
           onExit={() => {
+            setCpuLeaderboard(loadCpuPvpLeaderboard(pvpContentType))
             setRoguelikeVariant('pvp')
             setScreen('roguelike')
           }}
           onProfileUpdated={setProfile}
           profile={profile}
         />
-      )
-    }
-    const pvpPool = profile.dungeons
-      .filter((candidate) => candidate.contentType === pvpContentType)
-      .flatMap((candidate) => candidate.encounters)
-    return (
-      <PvPRoguelikeScreen
-        contentType={pvpContentType}
-        encounterPool={pvpPool}
-        gameMode={gameMode}
-        onExit={() => {
-          setCpuLeaderboard(loadCpuPvpLeaderboard(pvpContentType))
-          setRoguelikeVariant('pvp')
-          setScreen('roguelike')
-        }}
-        onProfileUpdated={setProfile}
-        profile={profile}
-      />
+      </Suspense>
     )
   }
 
@@ -293,13 +431,7 @@ function App() {
   const experiencePercent = profile.character.level >= profile.maxLevel
     ? 100
     : Math.min(100, (experienceIntoLevel / experienceForLevel) * 100)
-  const dungeonOptions = profile.dungeons.filter((candidate) => candidate.contentType === 'dungeon')
-  const raidOptions = profile.dungeons.filter((candidate) => candidate.contentType === 'raid')
-  const dungeon = dungeonOptions.find((candidate) => candidate.id === selectedDungeonId)
-    ?? dungeonOptions[0]!
-  const raid = raidOptions.find((candidate) => candidate.id === selectedRaidId)
-    ?? raidOptions[0]
-  const activityOptions = screen === 'raids' ? raidOptions : dungeonOptions
+  const dungeon = selectedDungeonOption ?? profile.dungeons[0]!
   const startPveRoguelike = () => {
     const baseDungeon = dungeonOptions[0]
     const baseRaid = raidOptions[0]
@@ -313,47 +445,15 @@ function App() {
     setSelectedMarathonMode(false)
     setScreen('combat')
   }
-  const tierOptions = activityOptions
-    .flatMap((option) => option.difficulties)
-    .filter((difficulty, index, all) => (
-      all.findIndex((candidate) => candidate.droppedItemLevel === difficulty.droppedItemLevel) === index
-    ))
-    .sort((a, b) => a.droppedItemLevel - b.droppedItemLevel)
-  const savedDifficulty = profile.dungeons
-    .flatMap((option) => option.difficulties)
-    .find((candidate) => candidate.id === selectedDifficultyId)
-  const selectedTier = tierOptions.find((candidate) => (
-    candidate.droppedItemLevel === savedDifficulty?.droppedItemLevel
-    && profile.character.level >= candidate.unlockLevel
-  ))
-    ?? tierOptions.slice().reverse().find((candidate) => profile.character.level >= candidate.unlockLevel)
-    ?? tierOptions[0]
-  const selectedTierItemLevel = selectedTier?.droppedItemLevel ?? 0
-  const activityPageCount = Math.max(1, Math.ceil(activityOptions.length / ACTIVITY_PAGE_SIZE))
-  const currentActivityPage = Math.min(activityPage, activityPageCount - 1)
-  const pagedActivityOptions = activityOptions.slice(
-    currentActivityPage * ACTIVITY_PAGE_SIZE,
-    currentActivityPage * ACTIVITY_PAGE_SIZE + ACTIVITY_PAGE_SIZE,
-  )
   const activityPageStart = activityOptions.length === 0
     ? 0
     : currentActivityPage * ACTIVITY_PAGE_SIZE + 1
   const activityPageEnd = Math.min(activityOptions.length, (currentActivityPage + 1) * ACTIVITY_PAGE_SIZE)
-  const selectedActivityId = screen === 'raids' && raid ? raid.id : dungeon.id
-  const activity = activityOptions.find((candidate) => candidate.id === selectedActivityId)
-    ?? activityOptions[0]
-    ?? (screen === 'raids' && raid ? raid : dungeon)
-  const selectedDifficulty = activity.difficulties.find(
-    (candidate) => candidate.droppedItemLevel === selectedTierItemLevel,
-  ) ?? activity.difficulties[0]
+  const activity = selectedActivityOption ?? dungeon
+  const selectedDifficulty = selectedDifficultyOption ?? activity.difficulties[0]
   const difficultyLocked = profile.character.level < selectedDifficulty.unlockLevel
   const cloudSync = getCloudSyncStatus()
   const canShowCloudSync = account.id !== -1 && cloudSync.available
-  const lootPreviewEncounters = [...activity.encounters]
-    .filter((encounter) => encounter.isBoss)
-    .sort((a, b) => lootSort === 'boss'
-      ? a.enemyName.localeCompare(b.enemyName) || a.sequence - b.sequence
-      : a.sequence - b.sequence)
 
   return (
     <main className={`game-shell ${screen === 'dungeons' || screen === 'raids' ? 'dungeon-shell' : ''} ${screen === 'customize' ? 'workshop-shell' : ''}`}>
@@ -370,7 +470,7 @@ function App() {
           <small>Level {profile.character.level}</small>
           <small>Item Level {profile.gearStats.averageItemLevel.toFixed(1)}</small>
           <div className="header-xp" title={`${profile.character.experience} total experience`}>
-            <span style={{ width: `${experiencePercent}%` }} />
+            <span style={barFillStyle(experiencePercent)} />
           </div>
           <button className="logout-button" onClick={signOut} type="button">
             {gameMode === 'offline' ? 'Leave Offline' : `Sign Out ${account.username}`}
@@ -851,9 +951,7 @@ function App() {
                 </p>
                 <div className="loot-preview-grid">
                   {lootPreviewEncounters.map((encounter) => {
-                    const loot = encounter.lootTables.filter(
-                      (entry) => entry.difficultyId === selectedDifficulty.id,
-                    )
+                    const loot = lootPreviewByEncounterId.get(encounter.id) ?? []
                     return (
                       <article key={encounter.id}>
                         <div className="loot-encounter-title">
@@ -937,8 +1035,7 @@ function App() {
                     <span>Resource</span>
                     <span>Time</span>
                   </div>
-                  {activity.leaderboards[leaderboardCategory]
-                    .filter((entry) => entry.difficultyId === selectedDifficulty.id)
+                  {leaderboardEntries
                     .map((entry) => (
                       <div className="leaderboard-row" key={`${entry.rank}-${entry.completedAt}`}>
                         <strong>#{entry.rank}</strong>
@@ -950,9 +1047,7 @@ function App() {
                         <span>{entry.durationSeconds}s</span>
                       </div>
                     ))}
-                  {activity.leaderboards[leaderboardCategory].filter(
-                    (entry) => entry.difficultyId === selectedDifficulty.id,
-                  ).length === 0 && (
+                  {leaderboardEntries.length === 0 && (
                     <div className="leaderboard-empty">
                       {gameMode === 'offline'
                         ? 'Connect with an online character to compete in rankings.'
@@ -971,33 +1066,35 @@ function App() {
         </section>
       )}
 
-      {screen === 'customize' && (
-        <CustomizeScreen
-          profile={profile}
-          onBack={() => setScreen('menu')}
-          onSaved={setProfile}
-        />
-      )}
+      <Suspense fallback={<ScreenLoading />}>
+        {screen === 'customize' && (
+          <CustomizeScreen
+            profile={profile}
+            onBack={() => setScreen('menu')}
+            onSaved={setProfile}
+          />
+        )}
 
-      {screen === 'talents' && (
-        <TalentScreen
-          profile={profile}
-          onBack={() => setScreen('menu')}
-          onUpdated={setProfile}
-        />
-      )}
+        {screen === 'talents' && (
+          <TalentScreen
+            profile={profile}
+            onBack={() => setScreen('menu')}
+            onUpdated={setProfile}
+          />
+        )}
 
-      {screen === 'equipment' && (
-        <EquipmentScreen
-          profile={profile}
-          onBack={() => setScreen('menu')}
-          onUpdated={setProfile}
-        />
-      )}
+        {screen === 'equipment' && (
+          <EquipmentScreen
+            profile={profile}
+            onBack={() => setScreen('menu')}
+            onUpdated={setProfile}
+          />
+        )}
 
-      {screen === 'settings' && (
-        <SettingsScreen onBack={() => setScreen('menu')} />
-      )}
+        {screen === 'settings' && (
+          <SettingsScreen onBack={() => setScreen('menu')} />
+        )}
+      </Suspense>
 
     </main>
   )

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/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/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/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 ?? 'xbox',
+  } : 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,187 @@
+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 ? 'dropped' : 'empty'} key={roll.encounterId}>
+          <strong>{roll.encounterName}</strong>
+          <span>
+            {roll.items.length > 0
+              ? roll.items
+                .map((item) => `${item.glyph} ${item.name} x${item.quantity}${item.duplicate ? ` (owned x${item.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

@@ -32,11 +32,13 @@ export function SettingsScreen({ onBack }: { onBack: () => void }) {
     capture,
     controllerIconStyle,
     directPartyTargeting,
+    combatTouchLocked,
     beginCapture,
     cancelCapture,
     resetBindings,
     setControllerIconStyle,
     setDirectPartyTargeting,
+    setCombatTouchLocked,
   } = useInput()
   const {
     enabled: dualScreenEnabled,
@@ -180,6 +182,14 @@ export function SettingsScreen({ onBack }: { onBack: () => void }) {
           >
             {directPartyTargeting ? 'Direct Targeting On' : 'Direct Targeting Off'}
           </button>
+          <button
+            aria-pressed={combatTouchLocked}
+            className={combatTouchLocked ? 'selected' : ''}
+            onClick={() => setCombatTouchLocked(!combatTouchLocked)}
+            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) => (

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
@@ -42,8 +48,10 @@ export type DualScreenCombatState = {
   opponentName?: string
   opponentClassName?: string
   opponentParty?: PartyMember[]
-  opponentResource?: number
   opponentEnemyHealth?: number
+  opponentResource?: number
+  opponentMaxResource?: number
+  opponentResourceName?: string
   opponentBuffSummary?: string
   opponentDebuffSummary?: string
   floatingTexts: Array<{
@@ -53,14 +61,12 @@ 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
@@ -139,13 +145,6 @@ 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')}`
@@ -314,19 +313,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(
@@ -404,6 +403,12 @@ export function DualScreenBottomDisplay() {
     channel?.close()
   }
 
+  useGameAction((action) => {
+    if (!state || state.opponentParty) return
+    if (action === 'confirm' || action === 'back' || action === 'toggleTouchLock') return
+    sendAction(action)
+  })
+
   if (!state && workshopState) {
     return (
       <main className="dual-bottom-display workshop-bottom-display">
@@ -451,7 +456,10 @@ export function DualScreenBottomDisplay() {
   }
 
   return (
-    <main className={`dual-bottom-display ${state.opponentParty ? 'pvp-opponent-bottom-display' : ''}`}>
+    <main
+      className={`dual-bottom-display ${state.opponentParty ? 'pvp-opponent-bottom-display' : ''}`}
+      data-combat-active={!state.opponentParty && state.status === 'playing' && !state.paused ? 'true' : 'false'}
+    >
       <header className="dual-controls-header">
         <div>
           <p className="eyebrow">{state.opponentParty ? 'Opponent View' : `${state.difficultyName} ${state.contentName}`}</p>
@@ -483,32 +491,31 @@ export function DualScreenBottomDisplay() {
                 <strong>{Math.max(0, Math.floor(state.opponentEnemyHealth ?? 0))} / {state.encounterMaxHealth}</strong>
               </div>
               <div className="bar enemy-health boss-bar">
-                <span style={{ width: `${Math.max(0, ((state.opponentEnemyHealth ?? 0) / state.encounterMaxHealth) * 100)}%` }} />
+                <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) => (
-              <article className={`dual-opponent-member ${member.health <= 0 ? 'dead' : ''}`} key={member.id}>
-                <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}%` }} />
-                  )}
-                </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>
-              </article>
+              <PartyMemberFrame
+                as="article"
+                baseClassName="dual-opponent-member"
+                effectMode="compact"
+                key={member.id}
+                member={member}
+              />
             ))}
           </section>
 
@@ -531,7 +538,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>
@@ -639,9 +646,40 @@ export function DualScreenTopCombat({
     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'}
@@ -652,10 +690,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">
@@ -667,82 +720,33 @@ 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}%` }} />
-                  )}
-                </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>
 
-      <section className="dual-top-spell-strip">
-        {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"
-              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>
-          )
-        })}
-        <div className="dual-top-resource">
-          <strong>{state.resourceName} {Math.floor(state.resource)} / {state.maxResource}</strong>
-          <div className="bar mana-bar">
-            <span style={{ width: `${(state.resource / state.maxResource) * 100}%` }} />
+      {!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>
-        </div>
-      </section>
+        </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,
@@ -37,7 +46,7 @@ export interface GameRepository {
     durationSeconds: number,
     options?: {
       bossesCleared?: number
-      experienceMode?: 'default' | 'pvp-boss-quarter-level' | 'pvp-fight-twelfth-level' | 'pvp-stadium-round-win-quarter-level' | 'pvp-stadium-round-loss-tenth-level' | 'pvp-stadium-match-half-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
@@ -115,6 +124,7 @@ const catalogBundleKey = 'chronicle.catalog.bundleHash.v1'
 const authTokenKey = 'chronicle.authToken.v1'
 const offlineAccount = { id: -1, username: 'Offline' }
 const ABILITY_SLOT_COUNT = 6
+let activeCatalogCache: CatalogCache | null = null
 
 function clone<T>(value: T): T {
   return structuredClone(value)
@@ -303,6 +313,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)
@@ -319,10 +330,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 {
@@ -454,10 +468,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,
@@ -465,11 +475,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) {
@@ -479,77 +489,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 scaledPvpFightExperience(
-  startingExperience: number,
-  startingLevel: number,
-  fightsCleared: number,
-  maxLevel: number,
-  targetLevel = startingLevel,
-) {
-  let experience = startingExperience
-  let level = startingLevel
-  const maxExperience = experienceForLevel(maxLevel)
-  for (let fightIndex = 0; fightIndex < fightsCleared && experience < maxExperience; fightIndex += 1) {
-    const currentLevelFloor = experienceForLevel(level)
-    const nextLevelExperience = level >= maxLevel
-      ? maxExperience
-      : experienceForLevel(level + 1)
-    const levelBand = Math.max(1, nextLevelExperience - currentLevelFloor)
-    const rewardRate = targetLevel > level ? 1 / 6 : 1 / 12
-    experience = Math.min(maxExperience, experience + Math.round(levelBand * rewardRate))
-    while (level < maxLevel && experienceForLevel(level + 1) <= experience) {
-      level += 1
-    }
-  }
-  return { experience, level }
-}
-
-function scaledCurrentLevelExperience(
-  startingExperience: number,
-  startingLevel: number,
-  maxLevel: number,
-  rate: number,
-) {
-  let experience = startingExperience
-  let level = startingLevel
-  const maxExperience = experienceForLevel(maxLevel)
-  const currentLevelFloor = experienceForLevel(level)
-  const nextLevelExperience = level >= maxLevel
-    ? maxExperience
-    : experienceForLevel(level + 1)
-  const levelBand = Math.max(1, nextLevelExperience - currentLevelFloor)
-  experience = Math.min(maxExperience, experience + Math.round(levelBand * rate))
-  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)))
 }
@@ -631,17 +570,6 @@ 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 roguelikeCoinItemLevel(stage: number) {
-  return Math.min(25, 5 + Math.max(0, Math.floor(stage / 5)) * 5)
-}
-
 function awardRoguelikeCoin(
   profile: CharacterProfile,
   sourceEncounterId: number | undefined,
@@ -1197,13 +1125,15 @@ function createLocalRepository(store: LocalSaveStore): GameRepository {
           profile.maxLevel,
           highestOtherClassLevel(save),
         )
-        : 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
+        : 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

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,
+  }
+}

src/hooks/usePartyTargeting.ts

@@ -0,0 +1,65 @@
+import { useCallback, type RefObject } from 'react'
+import type { PartyMember } from '../game'
+import {
+  selectDirectionalPartyTarget,
+  selectDirectPartyTarget,
+  selectRelativePartyTarget,
+  type NavigateAction,
+} from '../combat/targeting'
+import type { InputAction } from '../input'
+
+type PartyTargetingOptions = {
+  getParty: () => PartyMember[]
+  selectedIdRef: RefObject<string>
+  setSelectedTargetId: (id: string) => void
+  columns: number
+  livingOnly?: boolean
+  relativeLivingOnly?: boolean
+  directionalLivingOnly?: boolean
+  directLivingOnly?: boolean
+  directTargetGroup?: number
+}
+
+export function usePartyTargeting({
+  getParty,
+  selectedIdRef,
+  setSelectedTargetId,
+  columns,
+  livingOnly = true,
+  relativeLivingOnly = livingOnly,
+  directionalLivingOnly = livingOnly,
+  directLivingOnly = livingOnly,
+  directTargetGroup = 0,
+}: PartyTargetingOptions) {
+  const selectRelativeTarget = useCallback((direction: -1 | 1) => {
+    const targetId = selectRelativePartyTarget(getParty(), selectedIdRef.current, direction, {
+      livingOnly: relativeLivingOnly,
+    })
+    if (targetId) setSelectedTargetId(targetId)
+  }, [getParty, relativeLivingOnly, selectedIdRef, setSelectedTargetId])
+
+  const selectDirectionalTarget = useCallback((action: InputAction) => {
+    const targetId = selectDirectionalPartyTarget(
+      getParty(),
+      selectedIdRef.current,
+      action as NavigateAction,
+      columns,
+      { livingOnly: directionalLivingOnly },
+    )
+    if (targetId) setSelectedTargetId(targetId)
+  }, [columns, directionalLivingOnly, getParty, selectedIdRef, setSelectedTargetId])
+
+  const selectDirectTarget = useCallback((slot: number) => {
+    const targetId = selectDirectPartyTarget(getParty(), slot, {
+      livingOnly: directLivingOnly,
+      targetGroup: directTargetGroup,
+    })
+    if (targetId) setSelectedTargetId(targetId)
+  }, [directLivingOnly, directTargetGroup, getParty, setSelectedTargetId])
+
+  return {
+    selectRelativeTarget,
+    selectDirectionalTarget,
+    selectDirectTarget,
+  }
+}

src/hooks/useSpellSlots.ts

@@ -0,0 +1,38 @@
+import { useMemo } from 'react'
+import type { Spell } from '../game'
+import type { SpellSlot } from '../components/SpellBars'
+import { cooldownRemaining } from '../combat/spellCasting'
+import { useCooldownClock } from './useCooldownClock'
+
+type UseSpellSlotsOptions = {
+  spells: readonly Spell[]
+  cooldowns: Record<string, number>
+  active: boolean
+  cost: (spell: Spell) => number
+  abilitySlots?: readonly (number | null)[]
+}
+
+export function useSpellSlots({
+  spells,
+  cooldowns,
+  active,
+  cost,
+  abilitySlots,
+}: UseSpellSlotsOptions) {
+  const now = useCooldownClock(cooldowns, active)
+
+  return useMemo<SpellSlot[]>(() => {
+    const slotCount = abilitySlots?.length ?? spells.length
+    return Array.from({ length: slotCount }, (_, slotIndex) => {
+      if (abilitySlots && !abilitySlots[slotIndex]) return null
+      const spell = spells[slotIndex]
+      if (!spell) return null
+      return {
+        ...spell,
+        cost: cost(spell),
+        slotIndex,
+        remaining: cooldownRemaining(cooldowns, spell.id, now),
+      }
+    })
+  }, [abilitySlots, cooldowns, cost, now, spells])
+}

src/index.css

@@ -3,7 +3,9 @@
     linear-gradient(rgba(8, 9, 12, 0.88), rgba(8, 9, 12, 0.88)),
     repeating-linear-gradient(0deg, #171922 0 2px, #11131a 2px 4px);
   color: #f4eed8;
-  font-family: 'VT323', Consolas, monospace;
+  --body-font: ui-monospace, 'Roboto Mono', 'Droid Sans Mono', Consolas, monospace;
+  --pixel-font: ui-monospace, 'Roboto Mono', 'Droid Sans Mono', Consolas, monospace;
+  font-family: var(--body-font);
   font-synthesis: none;
   text-rendering: optimizeLegibility;
 }

src/input.tsx

@@ -9,6 +9,7 @@ import {
   useState,
   type ReactNode,
 } from 'react'
+import { Capacitor } from '@capacitor/core'
 
 export type InputDevice = 'pc' | 'controller'
 export type ControllerIconStyle = 'xbox' | 'playstation' | 'nintendo'
@@ -36,6 +37,7 @@ export const INPUT_ACTIONS = [
   'targetParty6',
   'toggleTargetGroup',
   'toggleSpeed',
+  'toggleTouchLock',
   'pause',
 ] as const
 
@@ -65,6 +67,7 @@ export const ACTION_LABELS: Record<InputAction, string> = {
   targetParty6: 'Target Party Member 6',
   toggleTargetGroup: 'Switch Raid Target Group',
   toggleSpeed: 'Toggle 2x Speed',
+  toggleTouchLock: 'Toggle Combat Touch Lock',
   pause: 'Pause Menu',
 }
 
@@ -92,6 +95,7 @@ export const DEFAULT_BINDINGS: Record<InputDevice, InputBindings> = {
     targetParty6: 'F6',
     toggleTargetGroup: 'Tab',
     toggleSpeed: 'Backquote',
+    toggleTouchLock: 'F7',
     pause: 'Escape',
   },
   controller: {
@@ -114,9 +118,10 @@ export const DEFAULT_BINDINGS: Record<InputDevice, InputBindings> = {
     targetParty3: 'Button15',
     targetParty4: 'Button13',
     targetParty5: 'Button4',
-    targetParty6: 'Button10',
-    toggleTargetGroup: 'Button6',
+    targetParty6: 'Button6',
+    toggleTargetGroup: 'Button8',
     toggleSpeed: 'Button11',
+    toggleTouchLock: 'Button10',
     pause: 'Button9',
   },
 }
@@ -125,6 +130,22 @@ const STORAGE_KEY = 'ashen-halls-input-bindings-v1'
 const PREFERENCES_STORAGE_KEY = 'ashen-halls-input-preferences-v1'
 const GAME_ACTION_EVENT = 'ashen-halls-game-action'
 const NATIVE_CONTROLLER_EVENT = 'ashen-halls-native-controller'
+const FOCUSABLE_SELECTOR = 'button:not(:disabled):not([data-controller-nav="skip"]), input:not(:disabled):not([data-controller-nav="skip"]), select:not(:disabled):not([data-controller-nav="skip"]), textarea:not(:disabled):not([data-controller-nav="skip"]), [tabindex]:not([tabindex="-1"]):not([data-controller-nav="skip"])'
+const MAIN_CONTENT_SELECTOR = '.menu-screen, .content-screen, .dungeon-run-screen'
+const HEADER_CONTENT_SELECTOR = '.app-header'
+const GAMEPAD_COMBAT_POLL_MS = 1000 / 60
+const GAMEPAD_MENU_POLL_MS = 1000 / 30
+const GAMEPAD_BROWSER_DISCONNECTED_POLL_MS = 250
+const CONTROLLER_REPEAT_INITIAL_MS = 260
+const CONTROLLER_REPEAT_MS = 85
+const DPAD_NAV_ACTIONS: Partial<Record<string, InputAction>> = {
+  Button12: 'navigateUp',
+  Button13: 'navigateDown',
+  Button14: 'navigateLeft',
+  Button15: 'navigateRight',
+}
+
+let lastControllerFocus: HTMLElement | null = null
 
 type CaptureState = {
   device: InputDevice
@@ -137,11 +158,13 @@ type InputContextValue = {
   lastDevice: InputDevice
   controllerIconStyle: ControllerIconStyle
   directPartyTargeting: boolean
+  combatTouchLocked: boolean
   beginCapture: (device: InputDevice, action: InputAction) => void
   cancelCapture: () => void
   resetBindings: (device: InputDevice) => void
   setControllerIconStyle: (style: ControllerIconStyle) => void
   setDirectPartyTargeting: (enabled: boolean) => void
+  setCombatTouchLocked: (locked: boolean) => void
 }
 
 const InputContext = createContext<InputContextValue | null>(null)
@@ -180,6 +203,21 @@ function loadBindings(): Record<InputDevice, InputBindings> {
     if (savedController?.targetParty6 === 'Button11') {
       controller.targetParty6 = DEFAULT_BINDINGS.controller.targetParty6
     }
+    if (
+      savedController?.targetParty6 === undefined
+      || savedController.targetParty6 === 'Button10'
+    ) {
+      controller.targetParty6 = DEFAULT_BINDINGS.controller.targetParty6
+    }
+    if (
+      savedController?.toggleTargetGroup === undefined
+      || savedController.toggleTargetGroup === 'Button6'
+    ) {
+      controller.toggleTargetGroup = DEFAULT_BINDINGS.controller.toggleTargetGroup
+    }
+    if (savedController?.toggleTouchLock === undefined) {
+      controller.toggleTouchLock = DEFAULT_BINDINGS.controller.toggleTouchLock
+    }
     return {
       pc: { ...DEFAULT_BINDINGS.pc, ...saved.pc },
       controller,
@@ -194,15 +232,18 @@ function loadPreferences() {
     const saved = JSON.parse(localStorage.getItem(PREFERENCES_STORAGE_KEY) ?? '{}') as {
       controllerIconStyle?: ControllerIconStyle
       directPartyTargeting?: boolean
+      combatTouchLocked?: boolean
     }
     return {
       controllerIconStyle: saved.controllerIconStyle ?? 'xbox',
       directPartyTargeting: saved.directPartyTargeting ?? false,
+      combatTouchLocked: saved.combatTouchLocked ?? Capacitor.isNativePlatform(),
     }
   } catch {
     return {
       controllerIconStyle: 'xbox' as ControllerIconStyle,
       directPartyTargeting: false,
+      combatTouchLocked: Capacitor.isNativePlatform(),
     }
   }
 }
@@ -216,6 +257,7 @@ function bindingGroup(action: InputAction) {
   if (action.startsWith('targetParty') || action === 'toggleTargetGroup') return 'direct-targeting'
   if (action === 'previousTarget' || action === 'nextTarget') return 'relative-targeting'
   if (action === 'pause') return 'pause'
+  if (action === 'toggleTouchLock' || action === 'toggleSpeed') return 'system'
   return 'navigation'
 }
 
@@ -224,6 +266,16 @@ function isVisible(element: HTMLElement) {
   return element.getClientRects().length > 0
 }
 
+function focusableDescendants(scope: ParentNode) {
+  return Array.from(
+    scope.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTOR),
+  ).filter(isVisible)
+}
+
+function uniqueElements(elements: HTMLElement[]) {
+  return elements.filter((element, index) => elements.indexOf(element) === index)
+}
+
 function focusableElements() {
   const keyboard = document.querySelector<HTMLElement>('.controller-keyboard')
   const pauseMenu = document.querySelector<HTMLElement>('.pause-screen')
@@ -232,27 +284,72 @@ function focusableElements() {
       '.result-screen, .binding-capture, .dual-startup-prompt',
     ),
   ).find(isVisible)
-  const scope: ParentNode = keyboard ?? pauseMenu ?? dialog ?? document
-  return Array.from(
-    scope.querySelectorAll<HTMLElement>(
-      'button:not(:disabled), input:not(:disabled), select:not(:disabled), textarea:not(:disabled), [tabindex]:not([tabindex="-1"])',
-    ),
+  const mainContent = Array.from(
+    document.querySelectorAll<HTMLElement>(MAIN_CONTENT_SELECTOR),
+  ).find(isVisible)
+  const overlay = keyboard ?? pauseMenu ?? dialog
+  if (overlay) return focusableDescendants(overlay)
+  const visibleHeaders = Array.from(
+    document.querySelectorAll<HTMLElement>(HEADER_CONTENT_SELECTOR),
   ).filter(isVisible)
+  if (!mainContent) return visibleHeaders.length > 0 ? [] : focusableDescendants(document)
+  const headerControls = visibleHeaders.flatMap(
+    (header) => focusableDescendants(header),
+  )
+  return uniqueElements([
+    ...focusableDescendants(mainContent),
+    ...headerControls,
+  ])
+}
+
+function rememberFocusableControl(element: HTMLElement) {
+  lastControllerFocus = element
+}
+
+function focusControl(element: HTMLElement) {
+  rememberFocusableControl(element)
+  element.focus({ preventScroll: true })
+}
+
+function currentFocusableControl(candidates = focusableElements()) {
+  const active = document.activeElement
+  if (active instanceof HTMLElement && candidates.includes(active)) {
+    rememberFocusableControl(active)
+    return active
+  }
+  if (lastControllerFocus && candidates.includes(lastControllerFocus) && isVisible(lastControllerFocus)) {
+    return lastControllerFocus
+  }
+  return null
+}
+
+function rangeDistance(startA: number, endA: number, startB: number, endB: number) {
+  if (endA < startB) return startB - endA
+  if (endB < startA) return startA - endB
+  return 0
+}
+
+function changeSelectOption(select: HTMLSelectElement, direction: -1 | 1) {
+  const options = Array.from(select.options).filter((option) => !option.disabled)
+  const currentIndex = options.findIndex((option) => option.index === select.selectedIndex)
+  const nextOption = options[currentIndex + direction]
+  if (!nextOption) return false
+  select.selectedIndex = nextOption.index
+  select.dispatchEvent(new Event('input', { bubbles: true }))
+  select.dispatchEvent(new Event('change', { bubbles: true }))
+  return true
 }
 
 export function focusFirstControl() {
   const first = focusableElements()[0]
-  first?.focus({ preventScroll: true })
+  if (first) focusControl(first)
   return first
 }
 
 function moveFocus(action: InputAction) {
   const candidates = focusableElements()
   if (candidates.length === 0) return
-  const current = document.activeElement instanceof HTMLElement
-    && candidates.includes(document.activeElement)
-    ? document.activeElement
-    : null
+  const current = currentFocusableControl(candidates)
   if (!current) {
     focusFirstControl()
     return
@@ -263,23 +360,50 @@ function moveFocus(action: InputAction) {
   const currentY = currentRect.top + currentRect.height / 2
   const vertical = action === 'navigateUp' || action === 'navigateDown'
   const direction = action === 'navigateUp' || action === 'navigateLeft' ? -1 : 1
+  const currentIndex = candidates.indexOf(current)
+
+  const adjacent = candidates[currentIndex + direction]
+  const fallbackToAdjacent = () => {
+    if (adjacent) focusControl(adjacent)
+  }
 
   const ranked = candidates
     .filter((candidate) => candidate !== current)
-    .map((candidate) => {
+    .map((candidate, index) => {
       const rect = candidate.getBoundingClientRect()
       const x = rect.left + rect.width / 2
       const y = rect.top + rect.height / 2
-      const primary = vertical ? y - currentY : x - currentX
-      const secondary = vertical ? Math.abs(x - currentX) : Math.abs(y - currentY)
-      return { candidate, primary, score: Math.abs(primary) + secondary * 2.5 }
+      const primary = vertical
+        ? direction > 0
+          ? rect.top - currentRect.bottom
+          : currentRect.top - rect.bottom
+        : direction > 0
+          ? rect.left - currentRect.right
+          : currentRect.left - rect.right
+      const secondary = vertical
+        ? rangeDistance(currentRect.left, currentRect.right, rect.left, rect.right)
+        : rangeDistance(currentRect.top, currentRect.bottom, rect.top, rect.bottom)
+      return {
+        candidate,
+        index,
+        primary,
+        secondary,
+        score: Math.max(0, primary) + secondary * 2.5 + (vertical ? Math.abs(x - currentX) : Math.abs(y - currentY)) * 0.1,
+      }
     })
-    .filter(({ primary }) => Math.sign(primary) === direction)
-    .sort((a, b) => a.score - b.score)
+    .filter(({ primary }) => primary >= -4)
+  const sameRowHorizontal = !vertical
+    ? ranked.filter(({ secondary }) => secondary === 0)
+    : ranked
+  if (sameRowHorizontal.length === 0) {
+    fallbackToAdjacent()
+    return
+  }
+  sameRowHorizontal.sort((a, b) => a.score - b.score || a.secondary - b.secondary || a.index - b.index)
 
-  const next = ranked[0]?.candidate
+  const next = sameRowHorizontal[0]?.candidate
   if (!next) return
-  next.focus({ preventScroll: true })
+  focusControl(next)
 }
 
 function hasUiOverlay() {
@@ -381,6 +505,14 @@ function gamepadTokens(gamepad: Gamepad) {
   return tokens
 }
 
+function isCombatActive() {
+  return Boolean(document.querySelector('[data-combat-active="true"]'))
+}
+
+function firstConnectedGamepad() {
+  return Array.from(navigator.getGamepads?.() ?? []).find(Boolean) ?? null
+}
+
 function setInputValue(input: HTMLInputElement | HTMLTextAreaElement, nextValue: string) {
   const prototype = input instanceof HTMLTextAreaElement
     ? HTMLTextAreaElement.prototype
@@ -397,12 +529,15 @@ export function InputProvider({ children }: { children: ReactNode }) {
   const [preferences, setPreferences] = useState(loadPreferences)
   const [keyboardInput, setKeyboardInput] = useState<HTMLInputElement | HTMLTextAreaElement | null>(null)
   const [keyboardShift, setKeyboardShift] = useState(false)
+  const [touchLockMessage, setTouchLockMessage] = useState('')
   const bindingsRef = useRef(bindings)
   const preferencesRef = useRef(preferences)
   const captureRef = useRef(capture)
   const keyboardInputRef = useRef(keyboardInput)
   const previousTokensRef = useRef(new Set<string>())
   const repeatRef = useRef<Record<string, number>>({})
+  const gamepadConnectedRef = useRef(Capacitor.isNativePlatform())
+  const touchLockMessageTimerRef = useRef(0)
 
   useEffect(() => {
     bindingsRef.current = bindings
@@ -453,15 +588,40 @@ export function InputProvider({ children }: { children: ReactNode }) {
     setLastDevice(device)
     document.documentElement.dataset.inputDevice = device
 
-    if (action.startsWith('navigate')) {
-      if (uiOverlay || !combatActive) moveFocus(action)
+    if (action === 'toggleTouchLock') {
+      setPreferences((current) => ({
+        ...current,
+        combatTouchLocked: !current.combatTouchLocked,
+      }))
+      window.clearTimeout(touchLockMessageTimerRef.current)
+      const nextLocked = !preferencesRef.current.combatTouchLocked
+      setTouchLockMessage(`Combat touch ${nextLocked ? 'locked' : 'unlocked'}`)
+      touchLockMessageTimerRef.current = window.setTimeout(() => {
+        setTouchLockMessage('')
+      }, 1400)
+    } else if (action.startsWith('navigate')) {
+      if (uiOverlay || !combatActive) {
+        const active = currentFocusableControl()
+        if (
+          active instanceof HTMLSelectElement
+          && (action === 'navigateUp' || action === 'navigateDown')
+          && changeSelectOption(active, action === 'navigateUp' ? -1 : 1)
+        ) {
+          return
+        }
+        moveFocus(action)
+      }
     } else if (action === 'confirm') {
-      const active = document.activeElement
+      const active = currentFocusableControl()
       if (isTextInput(active)) {
         setKeyboardInput(active)
         window.requestAnimationFrame(() => focusFirstControl())
+      } else if (active instanceof HTMLSelectElement) {
+        const select = active as HTMLSelectElement & { showPicker?: () => void }
+        if (select.showPicker) select.showPicker()
+        else active.click()
       } else if (
-        active instanceof HTMLElement
+        active
         && active.matches('button:not(:disabled), [role="button"]')
         && isVisible(active)
       ) {
@@ -496,12 +656,6 @@ export function InputProvider({ children }: { children: ReactNode }) {
       document.querySelector('[data-combat-active="true"]'),
     )
     const uiOverlay = hasUiOverlay()
-    const menuDpadActions: Partial<Record<string, InputAction>> = {
-      Button12: 'navigateUp',
-      Button13: 'navigateDown',
-      Button14: 'navigateLeft',
-      Button15: 'navigateRight',
-    }
     const uiPriority = [
       'navigateUp',
       'navigateDown',
@@ -519,8 +673,10 @@ export function InputProvider({ children }: { children: ReactNode }) {
       'targetParty6',
       'toggleTargetGroup',
       'toggleSpeed',
+      'toggleTouchLock',
     ] satisfies InputAction[]
     const combatPriority = [
+      'toggleTouchLock',
       'pause',
       'toggleSpeed',
       'ability1',
@@ -536,18 +692,18 @@ export function InputProvider({ children }: { children: ReactNode }) {
       'navigateLeft',
       'navigateRight',
     ] satisfies InputAction[]
-    const action = menuDpadActions[token] && (!combatActive || uiOverlay)
-      ? menuDpadActions[token]
+    const action = DPAD_NAV_ACTIONS[token] && (!combatActive || uiOverlay)
+      ? DPAD_NAV_ACTIONS[token]
       : uiOverlay
       ? uiPriority.find((candidate) => bindingsRef.current.controller[candidate] === token)
       : combatActive && preferencesRef.current.directPartyTargeting
       ? [...directTargetActions, ...combatPriority].find(
           (candidate) => bindingsRef.current.controller[candidate] === token,
         )
-      : combatActive && menuDpadActions[token]
-        ? menuDpadActions[token]
-      : !combatActive && menuDpadActions[token]
-      ? menuDpadActions[token]
+      : combatActive && DPAD_NAV_ACTIONS[token]
+        ? DPAD_NAV_ACTIONS[token]
+      : !combatActive && DPAD_NAV_ACTIONS[token]
+      ? DPAD_NAV_ACTIONS[token]
       : (combatActive ? combatPriority : INPUT_ACTIONS).find(
           (candidate) => bindingsRef.current.controller[candidate] === token,
         )
@@ -581,6 +737,31 @@ export function InputProvider({ children }: { children: ReactNode }) {
     return () => window.removeEventListener('keydown', onKeyDown)
   }, [assignBinding, dispatchAction])
 
+  useEffect(() => {
+    const onFocusIn = (event: FocusEvent) => {
+      const target = event.target
+      if (!(target instanceof HTMLElement)) return
+      if (!target.matches(FOCUSABLE_SELECTOR) || !isVisible(target)) return
+      rememberFocusableControl(target)
+    }
+    const onPointerDown = (event: PointerEvent) => {
+      if (event.pointerType !== 'touch') {
+        document.documentElement.dataset.inputDevice = 'pc'
+      }
+      const target = event.target
+      if (!(target instanceof Element)) return
+      const control = target.closest<HTMLElement>(FOCUSABLE_SELECTOR)
+      if (!control || !isVisible(control)) return
+      rememberFocusableControl(control)
+    }
+    document.addEventListener('focusin', onFocusIn)
+    document.addEventListener('pointerdown', onPointerDown, { capture: true })
+    return () => {
+      document.removeEventListener('focusin', onFocusIn)
+      document.removeEventListener('pointerdown', onPointerDown, { capture: true })
+    }
+  }, [])
+
   useEffect(() => {
     const listener = (event: Event) => {
       const detail = (event as CustomEvent<{ token: string; repeat?: boolean }>).detail
@@ -590,40 +771,74 @@ export function InputProvider({ children }: { children: ReactNode }) {
     return () => window.removeEventListener(NATIVE_CONTROLLER_EVENT, listener)
   }, [dispatchControllerToken])
 
-  useEffect(() => {
-    const ensureFocus = () => {
-      const combatActive = document.querySelector('[data-combat-active="true"]')
-      if (combatActive) return
-      const candidates = focusableElements()
-      const active = document.activeElement
-      const activeIsUsable = active instanceof HTMLElement
-        && candidates.includes(active)
-        && isVisible(active)
-      if (
-        (!activeIsUsable || document.activeElement === document.body)
-        && !keyboardInputRef.current
-        && !captureRef.current
-      ) {
-        focusFirstControl()
-      }
-    }
-    const observer = new MutationObserver(() => {
-      window.requestAnimationFrame(ensureFocus)
-    })
-    observer.observe(document.getElementById('root') ?? document.body, {
-      attributes: true,
-      attributeFilter: ['aria-hidden', 'class', 'disabled', 'hidden', 'style'],
-      childList: true,
-      subtree: true,
-    })
-    window.requestAnimationFrame(ensureFocus)
-    return () => observer.disconnect()
+  useEffect(() => () => {
+    window.clearTimeout(touchLockMessageTimerRef.current)
   }, [])
 
   useEffect(() => {
-    let frame = 0
-    const poll = (time: number) => {
-      const gamepad = Array.from(navigator.getGamepads?.() ?? []).find(Boolean)
+    let focusFrame = 0
+    const ensureFocus = () => {
+      focusFrame = 0
+      const combatActive = document.querySelector('[data-combat-active="true"]')
+      if (combatActive) return
+      const candidates = focusableElements()
+      const activeControl = currentFocusableControl(candidates)
+      if (
+        (!activeControl || document.activeElement === document.body)
+        && !keyboardInputRef.current
+        && !captureRef.current
+      ) {
+        if (activeControl) {
+          focusControl(activeControl)
+        } else {
+          focusFirstControl()
+        }
+      }
+    }
+    const scheduleEnsureFocus = () => {
+      if (focusFrame) return
+      focusFrame = window.requestAnimationFrame(ensureFocus)
+    }
+    const observer = new MutationObserver(() => {
+      scheduleEnsureFocus()
+    })
+    observer.observe(document.getElementById('root') ?? document.body, {
+      attributes: true,
+      attributeFilter: ['aria-hidden', 'class', 'disabled', 'hidden'],
+      childList: true,
+      subtree: true,
+    })
+    scheduleEnsureFocus()
+    return () => {
+      if (focusFrame) window.cancelAnimationFrame(focusFrame)
+      observer.disconnect()
+    }
+  }, [])
+
+  useEffect(() => {
+    let timer = 0
+    if (Capacitor.isNativePlatform() && capture?.device !== 'controller') {
+      previousTokensRef.current = new Set()
+      repeatRef.current = {}
+      return undefined
+    }
+    const nextDelay = () => {
+      if (Capacitor.isNativePlatform()) {
+        return GAMEPAD_COMBAT_POLL_MS
+      }
+      if (!Capacitor.isNativePlatform() && !gamepadConnectedRef.current) {
+        return GAMEPAD_BROWSER_DISCONNECTED_POLL_MS
+      }
+      return isCombatActive() ? GAMEPAD_COMBAT_POLL_MS : GAMEPAD_MENU_POLL_MS
+    }
+    const clearControllerState = () => {
+      previousTokensRef.current = new Set()
+      repeatRef.current = {}
+    }
+    const poll = () => {
+      const time = performance.now()
+      const gamepad = firstConnectedGamepad()
+      gamepadConnectedRef.current = Capacitor.isNativePlatform() || Boolean(gamepad)
       const currentTokens = gamepad ? gamepadTokens(gamepad) : new Set<string>()
       const previousTokens = previousTokensRef.current
 
@@ -637,11 +852,11 @@ export function InputProvider({ children }: { children: ReactNode }) {
         const action = INPUT_ACTIONS.find(
           (candidate) => bindingsRef.current.controller[candidate] === token,
         )
-        const canRepeat = action?.startsWith('navigate') ?? false
+        const canRepeat = Boolean(action?.startsWith('navigate') || DPAD_NAV_ACTIONS[token])
         const nextRepeat = repeatRef.current[token] ?? 0
         if (pressed || (canRepeat && time >= nextRepeat)) {
           dispatchControllerToken(token, !pressed)
-          repeatRef.current[token] = time + (pressed ? 360 : 125)
+          repeatRef.current[token] = time + (pressed ? CONTROLLER_REPEAT_INITIAL_MS : CONTROLLER_REPEAT_MS)
         }
       })
 
@@ -649,11 +864,57 @@ export function InputProvider({ children }: { children: ReactNode }) {
         if (!currentTokens.has(token)) delete repeatRef.current[token]
       })
       previousTokensRef.current = currentTokens
-      frame = window.requestAnimationFrame(poll)
+      if (!gamepad) clearControllerState()
+      timer = window.setTimeout(poll, nextDelay())
     }
-    frame = window.requestAnimationFrame(poll)
-    return () => window.cancelAnimationFrame(frame)
-  }, [assignBinding, dispatchControllerToken])
+    const onGamepadConnected = () => {
+      gamepadConnectedRef.current = true
+    }
+    const onGamepadDisconnected = () => {
+      gamepadConnectedRef.current = Boolean(firstConnectedGamepad())
+      if (!gamepadConnectedRef.current) clearControllerState()
+    }
+    window.addEventListener('gamepadconnected', onGamepadConnected)
+    window.addEventListener('gamepaddisconnected', onGamepadDisconnected)
+    timer = window.setTimeout(poll, 0)
+    return () => {
+      window.clearTimeout(timer)
+      window.removeEventListener('gamepadconnected', onGamepadConnected)
+      window.removeEventListener('gamepaddisconnected', onGamepadDisconnected)
+    }
+  }, [assignBinding, capture, dispatchControllerToken])
+
+  useEffect(() => {
+    const shouldBlockTouch = () => (
+      Capacitor.isNativePlatform()
+      && preferencesRef.current.combatTouchLocked
+      && isCombatActive()
+      && !hasUiOverlay()
+    )
+    const blockTouch = (event: Event) => {
+      if (
+        typeof PointerEvent !== 'undefined'
+        && event instanceof PointerEvent
+        && event.pointerType !== 'touch'
+      ) return
+      if (!shouldBlockTouch()) return
+      event.preventDefault()
+      event.stopImmediatePropagation()
+    }
+    const options = { capture: true, passive: false }
+    document.addEventListener('pointerdown', blockTouch, options)
+    document.addEventListener('pointerup', blockTouch, options)
+    document.addEventListener('touchstart', blockTouch, options)
+    document.addEventListener('touchmove', blockTouch, options)
+    document.addEventListener('touchend', blockTouch, options)
+    return () => {
+      document.removeEventListener('pointerdown', blockTouch, options)
+      document.removeEventListener('pointerup', blockTouch, options)
+      document.removeEventListener('touchstart', blockTouch, options)
+      document.removeEventListener('touchmove', blockTouch, options)
+      document.removeEventListener('touchend', blockTouch, options)
+    }
+  }, [])
 
   const contextValue = useMemo<InputContextValue>(() => ({
     bindings,
@@ -661,6 +922,7 @@ export function InputProvider({ children }: { children: ReactNode }) {
     lastDevice,
     controllerIconStyle: preferences.controllerIconStyle,
     directPartyTargeting: preferences.directPartyTargeting,
+    combatTouchLocked: preferences.combatTouchLocked,
     beginCapture: (device, action) => setCapture({ device, action }),
     cancelCapture: () => setCapture(null),
     resetBindings: (device) => setBindings((current) => ({
@@ -675,6 +937,10 @@ export function InputProvider({ children }: { children: ReactNode }) {
       ...current,
       directPartyTargeting,
     })),
+    setCombatTouchLocked: (combatTouchLocked) => setPreferences((current) => ({
+      ...current,
+      combatTouchLocked,
+    })),
   }), [bindings, capture, lastDevice, preferences])
 
   function typeKeyboardKey(key: string) {
@@ -739,6 +1005,11 @@ export function InputProvider({ children }: { children: ReactNode }) {
           </section>
         </div>
       )}
+      {touchLockMessage && (
+        <div className="combat-touch-lock-status" aria-live="polite">
+          {touchLockMessage}
+        </div>
+      )}
     </InputContext.Provider>
   )
 }

src/main.tsx

@@ -9,7 +9,9 @@ import { DualScreenBottomDisplay, DualScreenProvider, DualScreenStartupPrompt }
 createRoot(document.getElementById('root')!).render(
   <StrictMode>
     {new URLSearchParams(window.location.search).get('display') === 'bottom' ? (
-      <DualScreenBottomDisplay />
+      <InputProvider>
+        <DualScreenBottomDisplay />
+      </InputProvider>
     ) : (
       <DualScreenProvider>
         <DualScreenStartupPrompt />

src/profile.ts

@@ -349,7 +349,7 @@ export async function completeRoguelike(
   durationSeconds: number,
   options?: {
     bossesCleared?: number
-    experienceMode?: 'default' | 'pvp-boss-quarter-level' | 'pvp-fight-twelfth-level' | 'pvp-stadium-round-win-quarter-level' | 'pvp-stadium-round-loss-tenth-level' | 'pvp-stadium-match-half-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

src/pvpLiveLifecycle.ts

@@ -0,0 +1,221 @@
+import { useCallback, useEffect, useRef, useState } from 'react'
+import {
+  publishPvpMatchState,
+  requestPvpRematch,
+  type PvpMatchSnapshot,
+  type PvpMatchSide,
+  type PvpMatchStatus,
+  type PvpRematchResponse,
+} from './pvpRoguelike'
+
+export type LiveMatchProgressPayload<TSideState> = {
+  state: TSideState
+  status: PvpMatchStatus
+  stage: number
+  encounterIndex: number
+  encountersCleared: number
+  enemyHealth: number
+  alive: boolean
+  elapsedTicks: number
+}
+
+type StartLiveMatchSyncOptions<TSideState> = {
+  matchId: string
+  intervalMs?: number
+  getPayload: () => LiveMatchProgressPayload<TSideState>
+  onSnapshot: (snapshot: PvpMatchSnapshot<TSideState>) => void
+  onError?: (reason: unknown) => void
+}
+
+type RequestLiveRematchOptions<TSideState> = {
+  matchId: string
+  maxPendingAttempts?: number
+  maxFailureAttempts?: number
+  pendingDelayMs?: number
+  failureDelayMs?: number
+  onMatched: (result: Required<Pick<PvpRematchResponse<TSideState>, 'match' | 'side'>>) => void
+  onExpired: () => void
+  onFailure: (reason: unknown) => void
+}
+
+type LivePvpMatchBase = {
+  id: string
+  opponentName: string
+}
+
+type UsePvpLiveMatchSyncOptions<TSideState, TLiveMatch extends LivePvpMatchBase> = {
+  liveMatch: TLiveMatch | null
+  syncEnabled: boolean
+  getPayload: (liveMatch: TLiveMatch) => LiveMatchProgressPayload<TSideState>
+  onSnapshot: (snapshot: PvpMatchSnapshot<TSideState>, liveMatch: TLiveMatch) => void
+  onError?: (reason: unknown) => void
+  startLiveMatch: (match: PvpMatchSnapshot<TSideState>, side: PvpMatchSide, message?: string) => void
+}
+
+type RematchState = {
+  matchId: string | null
+  requested: boolean
+  message: string
+}
+
+/**
+ * React wrapper for live PvP state sync and rematch UX. Mode screens provide
+ * payload and snapshot rules; shared polling and rematch state live here.
+ */
+export function usePvpLiveMatchSync<TSideState, TLiveMatch extends LivePvpMatchBase>({
+  liveMatch,
+  syncEnabled,
+  getPayload,
+  onSnapshot,
+  onError,
+  startLiveMatch,
+}: UsePvpLiveMatchSyncOptions<TSideState, TLiveMatch>) {
+  const [rematchState, setRematchState] = useState<RematchState>({
+    matchId: null,
+    requested: false,
+    message: '',
+  })
+  const getPayloadRef = useRef(getPayload)
+  const onSnapshotRef = useRef(onSnapshot)
+  const onErrorRef = useRef(onError)
+  const startLiveMatchRef = useRef(startLiveMatch)
+  const liveMatchId = liveMatch?.id
+
+  useEffect(() => {
+    getPayloadRef.current = getPayload
+    onSnapshotRef.current = onSnapshot
+    onErrorRef.current = onError
+    startLiveMatchRef.current = startLiveMatch
+  }, [getPayload, onError, onSnapshot, startLiveMatch])
+
+  useEffect(() => {
+    if (!liveMatch || !syncEnabled) return undefined
+    return startLiveMatchSync<TSideState>({
+      matchId: liveMatch.id,
+      getPayload: () => getPayloadRef.current(liveMatch),
+      onSnapshot: (snapshot) => onSnapshotRef.current(snapshot, liveMatch),
+      onError: (reason) => onErrorRef.current?.(reason),
+    })
+  }, [liveMatch, syncEnabled])
+
+  const handleRematch = useCallback(() => {
+    if (!liveMatch || (rematchState.matchId === liveMatch.id && rematchState.requested)) return undefined
+    const { id, opponentName } = liveMatch
+    setRematchState({
+      matchId: id,
+      requested: true,
+      message: `Waiting for ${opponentName} to rematch...`,
+    })
+    return requestLiveRematch<TSideState>({
+      matchId: id,
+      onMatched: (result) => {
+        startLiveMatchRef.current(result.match, result.side, `Rematch against ${opponentName} begins.`)
+      },
+      onExpired: () => {
+        setRematchState({ matchId: id, requested: false, message: 'Rematch expired.' })
+      },
+      onFailure: (reason) => {
+        setRematchState({
+          matchId: id,
+          requested: false,
+          message: reason instanceof Error ? reason.message : 'Unable to request rematch.',
+        })
+      },
+    })
+  }, [liveMatch, rematchState.matchId, rematchState.requested])
+
+  const currentRematchState = rematchState.matchId === liveMatchId
+    ? rematchState
+    : { matchId: liveMatchId ?? null, requested: false, message: '' }
+
+  return {
+    rematchRequested: currentRematchState.requested,
+    rematchMessage: currentRematchState.message,
+    handleRematch,
+  }
+}
+
+/**
+ * Polls the backend rematch endpoint until both players accept, the request
+ * expires, or repeated network failures make the rematch unavailable.
+ */
+export function requestLiveRematch<TSideState>({
+  matchId,
+  maxPendingAttempts = 180,
+  maxFailureAttempts = 10,
+  pendingDelayMs = 700,
+  failureDelayMs = 900,
+  onMatched,
+  onExpired,
+  onFailure,
+}: RequestLiveRematchOptions<TSideState>) {
+  let cancelled = false
+  let attempts = 0
+
+  const schedule = (callback: () => void, delay: number) => {
+    window.setTimeout(callback, delay)
+  }
+
+  const handleResponse = (result: PvpRematchResponse<TSideState>) => {
+    if (cancelled) return
+    if (result.status === 'matched' && result.match && result.side) {
+      onMatched({ match: result.match, side: result.side })
+      return
+    }
+    attempts += 1
+    if (attempts >= maxPendingAttempts) {
+      onExpired()
+      return
+    }
+    schedule(pollRematch, pendingDelayMs)
+  }
+
+  const pollRematch = () => {
+    requestPvpRematch<TSideState>(matchId)
+      .then(handleResponse)
+      .catch((reason: unknown) => {
+        if (cancelled) return
+        attempts += 1
+        if (attempts >= maxFailureAttempts) {
+          onFailure(reason)
+          return
+        }
+        schedule(pollRematch, failureDelayMs)
+      })
+  }
+
+  pollRematch()
+  return () => {
+    cancelled = true
+  }
+}
+
+/**
+ * Publishes local live-match progress and polls opponent state on a fixed
+ * interval. Mode-specific snapshot handling stays in the caller.
+ */
+export function startLiveMatchSync<TSideState>({
+  matchId,
+  intervalMs = 700,
+  getPayload,
+  onSnapshot,
+  onError = () => undefined,
+}: StartLiveMatchSyncOptions<TSideState>) {
+  let stopped = false
+  const syncMatch = () => {
+    publishPvpMatchState<TSideState>(matchId, getPayload())
+      .then((snapshot) => {
+        if (!stopped) onSnapshot(snapshot)
+      })
+      .catch((reason: unknown) => {
+        if (!stopped) onError(reason)
+      })
+  }
+
+  syncMatch()
+  const timer = window.setInterval(syncMatch, intervalMs)
+  return () => {
+    stopped = true
+    window.clearInterval(timer)
+  }
+}

src/pvpQueueLifecycle.ts

@@ -0,0 +1,107 @@
+import {
+  cancelPvpQueue,
+  checkPvpQueue,
+  joinPvpQueue,
+  randomCpuDifficulty,
+  type CpuDifficulty,
+  type PvpContentType,
+  type PvpMatchSnapshot,
+  type PvpMatchSide,
+} from './pvpRoguelike'
+import type { GameMode } from './gameRepository'
+
+export function startPvpQueueWithCpuFallback<TSideState>({
+  contentType,
+  startStage,
+  gameMode,
+  liveMatchActive,
+  onSearching,
+  onCpuMatch,
+  onLiveMatch,
+  messages,
+}: {
+  contentType: PvpContentType
+  startStage: number
+  gameMode: GameMode
+  liveMatchActive: () => boolean
+  onSearching: (message: string) => void
+  onCpuMatch: (difficulty: CpuDifficulty, message: string) => void
+  onLiveMatch: (match: PvpMatchSnapshot<TSideState>, side: PvpMatchSide, message: string) => void
+  messages: {
+    offline: (difficulty: CpuDifficulty) => string
+    searching: string
+    notFound: (difficulty: CpuDifficulty) => string
+    unavailable: (difficulty: CpuDifficulty) => string
+    liveFound: (match: PvpMatchSnapshot<TSideState>, side: PvpMatchSide) => string
+  }
+}) {
+  if (gameMode === 'offline') {
+    const difficulty = randomCpuDifficulty()
+    const timer = window.setTimeout(() => {
+      onCpuMatch(difficulty, messages.offline(difficulty))
+    }, 500)
+    return () => window.clearTimeout(timer)
+  }
+
+  let cancelled = false
+  let ticketId = ''
+  let pollTimer: number | undefined
+  onSearching(messages.searching)
+
+  const beginLiveMatch = (match: PvpMatchSnapshot<TSideState>, side: PvpMatchSide) => {
+    if (cancelled) return
+    onLiveMatch(match, side, messages.liveFound(match, side))
+  }
+
+  const fallbackTimer = window.setTimeout(() => {
+    if (cancelled || liveMatchActive()) return
+    cancelled = true
+    if (ticketId) cancelPvpQueue(ticketId).catch(() => undefined)
+    const difficulty = randomCpuDifficulty()
+    onCpuMatch(difficulty, messages.notFound(difficulty))
+  }, 5000)
+
+  const pollQueue = () => {
+    if (!ticketId || cancelled) return
+    checkPvpQueue<TSideState>(ticketId)
+      .then((result) => {
+        if (cancelled) return
+        if (result.status === 'matched' && result.match && result.side) {
+          window.clearTimeout(fallbackTimer)
+          if (pollTimer) window.clearTimeout(pollTimer)
+          beginLiveMatch(result.match, result.side)
+          return
+        }
+        pollTimer = window.setTimeout(pollQueue, 500)
+      })
+      .catch(() => {
+        if (!cancelled) pollTimer = window.setTimeout(pollQueue, 700)
+      })
+  }
+
+  joinPvpQueue<TSideState>(contentType, startStage)
+    .then((result) => {
+      if (cancelled) return
+      ticketId = result.ticketId
+      if (result.status === 'matched' && result.match && result.side) {
+        window.clearTimeout(fallbackTimer)
+        beginLiveMatch(result.match, result.side)
+        return
+      }
+      pollTimer = window.setTimeout(pollQueue, 500)
+    })
+    .catch(() => {
+      if (cancelled) return
+      window.clearTimeout(fallbackTimer)
+      cancelled = true
+      const difficulty = randomCpuDifficulty()
+      onCpuMatch(difficulty, messages.unavailable(difficulty))
+    })
+
+  return () => {
+    cancelled = true
+    window.clearTimeout(fallbackTimer)
+    if (pollTimer) window.clearTimeout(pollTimer)
+    if (ticketId && !liveMatchActive()) cancelPvpQueue(ticketId).catch(() => undefined)
+  }
+}

src/shared/rewardRules.d.mts

@@ -0,0 +1,31 @@
+export function experienceForLevel(level: number): number
+export function catchUpExperienceReward(
+  baseReward: number,
+  currentExperience: number,
+  targetExperience: number,
+): number
+export function scaledPvpBossExperience(
+  startingExperience: number,
+  startingLevel: number,
+  bossesCleared: number,
+  maxLevel: number,
+  targetLevel?: number,
+  levelExperience?: (level: number) => number,
+): { experience: number; level: number }
+export function scaledPvpFightExperience(
+  startingExperience: number,
+  startingLevel: number,
+  fightsCleared: number,
+  maxLevel: number,
+  targetLevel?: number,
+  levelExperience?: (level: number) => number,
+): { experience: number; level: number }
+export function scaledCurrentLevelExperience(
+  startingExperience: number,
+  startingLevel: number,
+  maxLevel: number,
+  rate: number,
+  levelExperience?: (level: number) => number,
+): { experience: number; level: number }
+export function coinDropQuantity(): number
+export function roguelikeCoinItemLevel(stage: number): number

src/shared/rewardRules.mjs

@@ -0,0 +1,95 @@
+export function experienceForLevel(level) {
+  return 100 * (level - 1) ** 2
+}
+
+export function catchUpExperienceReward(baseReward, currentExperience, targetExperience) {
+  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)
+}
+
+export function scaledPvpBossExperience(
+  startingExperience,
+  startingLevel,
+  bossesCleared,
+  maxLevel,
+  targetLevel = startingLevel,
+  levelExperience = experienceForLevel,
+) {
+  let experience = startingExperience
+  let level = startingLevel
+  const maxExperience = levelExperience(maxLevel)
+  for (let bossIndex = 0; bossIndex < bossesCleared && experience < maxExperience; bossIndex += 1) {
+    const currentLevelFloor = levelExperience(level)
+    const nextLevelExperience = level >= maxLevel
+      ? maxExperience
+      : levelExperience(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 && levelExperience(level + 1) <= experience) {
+      level += 1
+    }
+  }
+  return { experience, level }
+}
+
+export function scaledPvpFightExperience(
+  startingExperience,
+  startingLevel,
+  fightsCleared,
+  maxLevel,
+  targetLevel = startingLevel,
+  levelExperience = experienceForLevel,
+) {
+  let experience = startingExperience
+  let level = startingLevel
+  const maxExperience = levelExperience(maxLevel)
+  for (let fightIndex = 0; fightIndex < fightsCleared && experience < maxExperience; fightIndex += 1) {
+    const currentLevelFloor = levelExperience(level)
+    const nextLevelExperience = level >= maxLevel
+      ? maxExperience
+      : levelExperience(level + 1)
+    const levelBand = Math.max(1, nextLevelExperience - currentLevelFloor)
+    const rewardRate = targetLevel > level ? 1 / 6 : 1 / 12
+    experience = Math.min(maxExperience, experience + Math.round(levelBand * rewardRate))
+    while (level < maxLevel && levelExperience(level + 1) <= experience) {
+      level += 1
+    }
+  }
+  return { experience, level }
+}
+
+export function scaledCurrentLevelExperience(
+  startingExperience,
+  startingLevel,
+  maxLevel,
+  rate,
+  levelExperience = experienceForLevel,
+) {
+  let experience = startingExperience
+  let level = startingLevel
+  const maxExperience = levelExperience(maxLevel)
+  const currentLevelFloor = levelExperience(level)
+  const nextLevelExperience = level >= maxLevel
+    ? maxExperience
+    : levelExperience(level + 1)
+  const levelBand = Math.max(1, nextLevelExperience - currentLevelFloor)
+  experience = Math.min(maxExperience, experience + Math.round(levelBand * rate))
+  while (level < maxLevel && levelExperience(level + 1) <= experience) {
+    level += 1
+  }
+  return { experience, level }
+}
+
+export function coinDropQuantity() {
+  const roll = Math.random()
+  if (roll < 0.15) return 3
+  if (roll < 0.5) return 2
+  return 1
+}
+
+export function roguelikeCoinItemLevel(stage) {
+  return Math.min(25, 5 + Math.max(0, Math.floor(stage / 5)) * 5)
+}