Android build v1.1.2

android/app/build.gradle

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

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

@@ -4,6 +4,7 @@ import android.content.Intent;
 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;
@@ -37,6 +38,18 @@ public abstract class ControllerBridgeActivity extends BridgeActivity {
         if (hasFocus) enableImmersiveMode();
     }
 
+    @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() {
         if (bridge == null || getIntent() == null) return;
         String initialUrl = getIntent().getStringExtra(EXTRA_INITIAL_URL);
@@ -86,7 +99,10 @@ public abstract class ControllerBridgeActivity extends BridgeActivity {
                 "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;

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,

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,7 +2300,15 @@ function completeRoguelike(database, characterId, accountId, runMetrics) {
     ? 'pvp-boss-quarter-level'
     : runMetrics?.experienceMode === 'pvp-fight-twelfth-level'
       ? 'pvp-fight-twelfth-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)
@@ -2412,6 +2411,36 @@ function completeRoguelike(database, characterId, accountId, runMetrics) {
         WHERE experience_required <= ?
       `).get(newExperience).level
     }
+  } else if (
+    experienceMode === 'pvp-match-win-half-level'
+    || experienceMode === 'pvp-stadium-round-win-quarter-level'
+    || experienceMode === 'pvp-stadium-round-loss-tenth-level'
+    || experienceMode === 'pvp-stadium-match-half-level'
+  ) {
+    const currentLevelFloor = database.prepare(`
+      SELECT experience_required AS experienceRequired
+      FROM level_progression
+      WHERE level = ?
+    `).get(newLevel).experienceRequired
+    const nextLevelExperience = newLevel >= maxLevel
+      ? maxExperience
+      : database.prepare(`
+        SELECT experience_required AS experienceRequired
+        FROM level_progression
+        WHERE level = ?
+      `).get(newLevel + 1).experienceRequired
+    const levelBand = Math.max(1, nextLevelExperience - currentLevelFloor)
+    const rewardRate = experienceMode === 'pvp-stadium-round-win-quarter-level'
+      ? 0.25
+      : experienceMode === 'pvp-stadium-round-loss-tenth-level'
+        ? 0.1
+        : 0.5
+    newExperience = Math.min(maxExperience, newExperience + Math.round(levelBand * rewardRate))
+    newLevel = database.prepare(`
+      SELECT MAX(level) AS level
+      FROM level_progression
+      WHERE experience_required <= ?
+    `).get(newExperience).level
   } else {
     const baseExperienceReward = Math.round(
       dungeon.experienceReward * dungeon.experienceMultiplier * (encountersCleared / 3),
@@ -2564,7 +2593,7 @@ function cleanupPvpMemory(now = Date.now()) {
 }
 
 function validatePvpContentType(value) {
-  if (value !== 'dungeon' && value !== 'raid') {
+  if (value !== 'dungeon' && value !== 'raid' && value !== 'stadium') {
     throw new Error('The PvP content type is invalid.')
   }
   return value
@@ -2736,7 +2765,7 @@ function requirePvpMatchForSession(session, matchId) {
 
 function updatePvpMatchState(session, matchId, payload) {
   const { match, side } = requirePvpMatchForSession(session, matchId)
-  const status = ['playing', 'upgrade-choice', 'won', 'lost'].includes(payload.status)
+  const status = ['playing', 'upgrade-choice', 'shop', 'won', 'lost'].includes(payload.status)
     ? payload.status
     : 'playing'
   const progress = {
@@ -2747,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
@@ -2762,6 +2804,8 @@ function submitPvpUpgradeChoice(session, matchId, payload) {
     encounterIndex,
     buffId: String(payload.buffId ?? ''),
     debuffId: String(payload.debuffId ?? ''),
+    purchases: Array.isArray(payload.purchases) ? payload.purchases.map((purchase) => String(purchase)) : [],
+    shopReady: Boolean(payload.shopReady),
   }
   match.updatedAt = Date.now()
   return pvpSnapshot(match)

src/App.css

@@ -18,6 +18,14 @@
   box-sizing: border-box;
 }
 
+.sr-only {
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  position: absolute;
+  width: 1px;
+}
+
 button {
   font: inherit;
 }
@@ -618,6 +626,7 @@ textarea:focus-visible,
 .dual-top-member {
   background: var(--panel-light);
   border: 2px solid #0a0b0e;
+  contain: layout paint style;
   min-height: 120px;
   outline: 2px solid #3a3944;
   padding: 14px;
@@ -778,6 +787,10 @@ textarea:focus-visible,
   min-height: 0;
 }
 
+.dual-top-main.stadium-dual-top {
+  grid-template-rows: auto auto minmax(0, 1fr) auto;
+}
+
 .dual-top-main .dual-top-enemy,
 .dual-top-main .dual-top-party,
 .dual-top-main .dual-top-log {
@@ -971,6 +984,7 @@ textarea:focus-visible,
 .dual-opponent-member {
   background: var(--panel-light);
   border: 2px solid #0a0b0e;
+  contain: layout paint style;
   min-width: 0;
   outline: 2px solid #3a3944;
   padding: 9px;
@@ -5280,6 +5294,7 @@ h2 {
   display: block;
   height: 100%;
   transition: width 180ms linear;
+  will-change: width;
 }
 
 .enemy-health {
@@ -5355,6 +5370,7 @@ h2 {
 .party-member {
   background: var(--panel-light);
   border: 2px solid #0a0b0e;
+  contain: layout style;
   color: var(--ink);
   cursor: pointer;
   min-height: 92px;
@@ -5553,6 +5569,7 @@ h2 {
   text-shadow: 1px 1px #102016;
   top: 28px;
   transform: translateX(-50%);
+  will-change: opacity, transform;
   white-space: nowrap;
 }
 
@@ -5755,6 +5772,7 @@ h2 {
 .spell {
   background: var(--panel-light);
   border: 2px solid #090a0d;
+  contain: layout paint style;
   color: var(--ink);
   cursor: pointer;
   min-height: 112px;
@@ -5888,6 +5906,33 @@ h2 {
   z-index: 10;
 }
 
+.pvp-round-countdown {
+  align-items: center;
+  background: rgba(5, 5, 8, 0.55);
+  display: flex;
+  inset: 0;
+  justify-content: center;
+  position: fixed;
+  z-index: 9;
+}
+
+.pvp-round-countdown > div {
+  background: var(--panel);
+  border: 3px solid #0b0c0f;
+  box-shadow: 8px 8px 0 #050507;
+  min-width: 220px;
+  outline: 2px solid var(--gold);
+  padding: 28px;
+  text-align: center;
+}
+
+.pvp-round-countdown h2 {
+  color: var(--gold);
+  font-size: clamp(48px, 8vw, 92px);
+  line-height: 1;
+  margin-top: 8px;
+}
+
 .result-screen > div,
 .pause-screen > div {
   background: var(--panel);
@@ -6372,6 +6417,150 @@ h2 {
   box-shadow: inset 0 0 0 2px #6e5727;
 }
 
+.stadium-screen {
+  min-height: 100dvh;
+}
+
+.stadium-board {
+  display: grid;
+  gap: 14px;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+  min-height: calc(100dvh - 72px);
+}
+
+.stadium-header,
+.stadium-pressure-panel {
+  align-items: center;
+  background: var(--panel);
+  border: 3px solid #0c0d11;
+  box-shadow: 4px 4px 0 #08090c;
+  display: flex;
+  grid-column: 1 / -1;
+  justify-content: space-between;
+  outline: 2px solid var(--edge);
+  padding: 12px 16px;
+}
+
+.stadium-header h2 {
+  font-size: 20px;
+}
+
+.stadium-header > strong {
+  color: var(--gold);
+  font-family: 'Press Start 2P', monospace;
+  font-size: 26px;
+}
+
+.stadium-header p,
+.stadium-header small,
+.stadium-pressure-panel span {
+  color: var(--muted);
+  font-size: 13px;
+}
+
+.stadium-pressure-panel strong {
+  color: var(--ink);
+  font-family: 'Press Start 2P', monospace;
+  font-size: 16px;
+}
+
+.stadium-side {
+  min-height: 0;
+}
+
+.stadium-shop-dialog {
+  max-width: 1180px !important;
+  padding: 16px !important;
+  text-align: left !important;
+  width: min(1180px, calc(100vw - 32px));
+}
+
+.stadium-shop-summary {
+  color: var(--muted);
+  display: flex;
+  flex-wrap: wrap;
+  font-family: 'Press Start 2P', monospace;
+  font-size: 12px;
+  gap: 16px;
+  margin-bottom: 12px;
+}
+
+.stadium-shop-layout {
+  display: grid;
+  gap: 14px;
+  grid-template-columns: 240px minmax(0, 1fr);
+}
+
+.stadium-shop-tabs {
+  display: grid;
+  gap: 8px;
+}
+
+.stadium-shop-tabs button,
+.stadium-shop-grid button {
+  background: #303545;
+  border: 2px solid #0b0c0f;
+  color: var(--ink);
+  cursor: pointer;
+  font-family: 'Press Start 2P', monospace;
+  outline: 2px solid #4d4c58;
+}
+
+.stadium-shop-tabs button {
+  font-size: 9px;
+  margin: 0;
+  padding: 10px;
+  text-align: left;
+}
+
+.stadium-shop-tabs button.active {
+  background: #303427;
+  outline-color: var(--gold);
+}
+
+.stadium-shop-layout h3 {
+  font-size: 15px;
+  margin-bottom: 10px;
+}
+
+.stadium-shop-grid {
+  display: grid;
+  gap: 10px;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+
+.stadium-shop-grid button {
+  display: grid;
+  gap: 10px;
+  margin: 0;
+  min-height: 128px;
+  padding: 14px;
+  text-align: left;
+}
+
+.stadium-shop-grid button:disabled {
+  cursor: not-allowed;
+  opacity: 0.58;
+}
+
+.stadium-shop-grid strong {
+  color: #fff0b8;
+  font-size: 11px;
+  line-height: 1.35;
+}
+
+.stadium-shop-grid small,
+.stadium-shop-layout p {
+  color: #f0e8d2;
+  font-family: 'VT323', monospace;
+  font-size: 22px;
+  line-height: 1.05;
+}
+
+.dual-opponent-progress.stadium {
+  grid-template-columns: 1fr 1fr;
+}
+
 .result-screen button,
 .pause-screen button {
   background: var(--gold);
@@ -6884,11 +7073,24 @@ h2 {
   }
 
   .pvp-board,
+  .stadium-board,
+  .stadium-shop-layout,
   .pvp-choice-columns,
   .pvp-choice-columns .upgrade-choice-grid {
     grid-template-columns: 1fr;
   }
 
+  .stadium-header,
+  .stadium-pressure-panel,
+  .stadium-shop-summary {
+    align-items: stretch;
+    flex-direction: column;
+  }
+
+  .stadium-shop-grid {
+    grid-template-columns: 1fr;
+  }
+
   .active-target-card,
   .mana-wrap {
     width: 100%;

src/App.tsx

@@ -1,12 +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 { TalentScreen } from './components/TalentScreen'
-import { SettingsScreen } from './components/SettingsScreen'
 import {
   loadCpuPvpLeaderboard,
   type CpuPvpLeaderboardEntry,
@@ -27,6 +21,14 @@ import {
 } from './gameRepository'
 import { focusFirstControl } from './input.tsx'
 
+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'
   | 'dungeons'
@@ -66,6 +68,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'
@@ -147,9 +160,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)
@@ -223,52 +365,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') {
-    const pvpPool = profile.dungeons
-      .filter((candidate) => candidate.contentType === pvpContentType)
-      .flatMap((candidate) => candidate.encounters)
+    if (pvpContentType === 'stadium') {
+      return (
+        <Suspense fallback={<ScreenLoading />}>
+          <PvpStadiumScreen
+            gameMode={gameMode}
+            onExit={() => {
+              setRoguelikeVariant('pvp')
+              setScreen('roguelike')
+            }}
+            onProfileUpdated={setProfile}
+            profile={profile}
+          />
+        </Suspense>
+      )
+    }
     return (
-      <PvPRoguelikeScreen
-        contentType={pvpContentType}
-        encounterPool={pvpPool}
-        gameMode={gameMode}
-        onExit={() => {
-          setCpuLeaderboard(loadCpuPvpLeaderboard(pvpContentType))
-          setRoguelikeVariant('pvp')
-          setScreen('roguelike')
-        }}
-        onProfileUpdated={setProfile}
-        profile={profile}
-      />
+      <Suspense fallback={<ScreenLoading />}>
+        <PvPRoguelikeScreen
+          contentType={pvpContentType}
+          encounterPool={pvpPool}
+          gameMode={gameMode}
+          onExit={() => {
+            setCpuLeaderboard(loadCpuPvpLeaderboard(pvpContentType))
+            setRoguelikeVariant('pvp')
+            setScreen('roguelike')
+          }}
+          onProfileUpdated={setProfile}
+          profile={profile}
+        />
+      </Suspense>
     )
   }
 
@@ -279,13 +430,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]
@@ -299,47 +444,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' : ''}`}>
@@ -547,6 +660,13 @@ function App() {
                   >
                     Raid
                   </button>
+                  <button
+                    className={`text-button ${pvpContentType === 'stadium' ? 'active' : ''}`}
+                    onClick={() => setPvpContentType('stadium')}
+                    type="button"
+                  >
+                    Stadium
+                  </button>
                 </div>
               </div>
               <div className="menu-card pvp-queue-panel">
@@ -554,9 +674,11 @@ function App() {
                 <div>
                   <strong>{gameMode === 'offline' ? 'Offline CPU Match' : 'Queue Then CPU Fallback'}</strong>
                   <small>
-                    {gameMode === 'offline'
-                      ? 'Offline mode always places you against a random CPU 1-5.'
-                      : 'Online mode searches briefly. If nobody is queued, a random CPU 1-5 takes the slot.'}
+                    {pvpContentType === 'stadium'
+                      ? 'Best-of-5 survival with dampening, equalized gear, and after-round buff buying.'
+                      : gameMode === 'offline'
+                        ? 'Offline mode always places you against a random CPU 1-5.'
+                        : 'Online mode searches briefly. If nobody is queued, a random CPU 1-5 takes the slot.'}
                   </small>
                 </div>
                 <button
@@ -572,7 +694,7 @@ function App() {
                 <div className="equipment-heading toggle-heading">
                   <div>
                     <p className="eyebrow">CPU Leaderboard</p>
-                    <h2>{pvpContentType === 'raid' ? 'Raid Clash' : 'Dungeon Clash'}</h2>
+                    <h2>{pvpContentType === 'stadium' ? 'Stadium' : pvpContentType === 'raid' ? 'Raid Clash' : 'Dungeon Clash'}</h2>
                   </div>
                 </div>
                 <div className="leaderboard-table">
@@ -828,9 +950,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">
@@ -914,8 +1034,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>
@@ -927,9 +1046,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.'
@@ -948,33 +1065,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/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,21 @@
+import type { Spell } from '../game'
+
+export function canCastSpell(
+  spell: Spell,
+  resource: number,
+  cooldowns: Record<string, number>,
+  resourceCost: number,
+) {
+  return resource >= resourceCost && (cooldowns[spell.id] ?? 0) <= 0
+}
+
+export function putSpellOnCooldown(
+  cooldowns: Record<string, number>,
+  spell: Spell,
+  cooldownMultiplier = 1,
+) {
+  return {
+    ...cooldowns,
+    [spell.id]: spell.cooldown * cooldownMultiplier,
+  }
+}

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,153 @@
+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'
+
+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={{ width: `${(member.health / maxHealth) * 100}%` }} />
+        {member.shield > 0 && <i style={{ width: `${(member.shield / maxHealth) * 100}%` }} />}
+        {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/SpellBars.tsx

@@ -0,0 +1,131 @@
+import { memo } from 'react'
+import type { ControllerIconStyle } from '../input'
+import type { Spell } from '../game'
+import { ControllerBindingLabel } from './ControllerIcons'
+
+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={{ width: `${(resource / maxResource) * 100}%` }} /></div>
+    </div>
+  )
+})
+
+export const SpellButton = memo(function SpellButton({
+  spell,
+  binding,
+  iconStyle,
+  resourceName,
+  disabled,
+  onCast,
+  emptyKeyPrefix = 'empty',
+}: {
+  spell: SpellSlot
+  binding?: string
+  iconStyle: ControllerIconStyle
+  resourceName: string
+  disabled?: 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"
+      disabled={disabled}
+      key={spell.id}
+      onClick={() => onCast(spell)}
+      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',
+}: {
+  spells: SpellSlot[]
+  bindings: Record<string, string>
+  iconStyle: ControllerIconStyle
+  resource: number
+  resourceName: string
+  canCast: boolean
+  onCast: (spell: Spell) => void
+  className?: string
+}) {
+  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}
+            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/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,
@@ -21,11 +21,15 @@ import {
   type InputAction,
 } from './input'
 import { ControllerBindingLabel } from './components/ControllerIcons'
+import { PartyMemberFrame } from './components/PartyFrames'
+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,7 +46,6 @@ export type DualScreenCombatState = {
   opponentName?: string
   opponentClassName?: string
   opponentParty?: PartyMember[]
-  opponentResource?: number
   opponentEnemyHealth?: number
   opponentBuffSummary?: string
   opponentDebuffSummary?: string
@@ -53,20 +56,26 @@ export type DualScreenCombatState = {
   }>
   partySize: number
   selectedId: string
-  log: CombatLogEntry[]
   status: 'playing' | 'won' | 'lost' | 'part-complete' | 'marathon-choice' | 'upgrade-choice'
   resource: number
   maxResource: number
   resourceName: string
   playerIsAlive: boolean
   spells: Array<(Spell & { slotIndex: number; remaining: number }) | null>
-  activeDevice: 'pc' | 'controller'
   bindings: Record<InputAction, string>
   controllerIconStyle: ControllerIconStyle
   directPartyTargeting: boolean
   paused: boolean
   targetGroup: 0 | 1 | 2
   speedMultiplier: 1 | 2
+  stadium?: {
+    dampeningPercent: number
+    roundIndex: number
+    playerWins: number
+    opponentWins: number
+    survivalSeconds: number
+    opponentSurvivalSeconds: number
+  }
 }
 
 export type DualScreenWorkshopState = {
@@ -131,11 +140,9 @@ 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')}`
 }
 
 export function DualScreenProvider({ children }: { children: ReactNode }) {
@@ -301,19 +308,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(
@@ -446,43 +453,44 @@ export function DualScreenBottomDisplay() {
           {state.opponentParty && <small>{state.opponentClassName}</small>}
         </div>
         <div className="dual-controls-progress">
-          <span>{state.opponentParty ? 'Live PvP' : `Encounter ${state.encounterIndex + 1}/${state.encounterCount}`}</span>
+          <span>{state.stadium ? `Round ${state.stadium.roundIndex} | ${state.stadium.playerWins}-${state.stadium.opponentWins}` : state.opponentParty ? 'Live PvP' : `Encounter ${state.encounterIndex + 1}/${state.encounterCount}`}</span>
         </div>
       </header>
 
       {state.opponentParty ? (
         <>
-          <section className="dual-opponent-progress">
-            <div>
-              <p className="eyebrow">Opponent Clear</p>
-              <strong>{Math.max(0, Math.floor(state.opponentEnemyHealth ?? 0))} / {state.encounterMaxHealth}</strong>
-            </div>
-            <div className="bar enemy-health boss-bar">
-              <span style={{ width: `${Math.max(0, ((state.opponentEnemyHealth ?? 0) / state.encounterMaxHealth) * 100)}%` }} />
-            </div>
-          </section>
+          {state.stadium ? (
+            <section className="dual-opponent-progress stadium">
+              <div>
+                <p className="eyebrow">Dampening</p>
+                <strong>{state.stadium.dampeningPercent}%</strong>
+              </div>
+              <div>
+                <p className="eyebrow">Survival</p>
+                <strong>{formatDualTime(state.stadium.opponentSurvivalSeconds)}</strong>
+              </div>
+            </section>
+          ) : (
+            <section className="dual-opponent-progress">
+              <div>
+                <p className="eyebrow">Opponent Clear</p>
+                <strong>{Math.max(0, Math.floor(state.opponentEnemyHealth ?? 0))} / {state.encounterMaxHealth}</strong>
+              </div>
+              <div className="bar enemy-health boss-bar">
+                <span style={{ width: `${Math.max(0, ((state.opponentEnemyHealth ?? 0) / state.encounterMaxHealth) * 100)}%` }} />
+              </div>
+            </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>
 
@@ -613,6 +621,10 @@ export function DualScreenTopCombat({
     0,
     (state.encounterHealth / state.encounterMaxHealth) * 100,
   )
+  const floatingTextsByMember = useMemo(
+    () => groupFloatingTextsByMember(state.floatingTexts),
+    [state.floatingTexts],
+  )
 
   return (
     <div className="dual-top-main">
@@ -641,44 +653,17 @@ 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>

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'
+      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,56 +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 talentEffectCapacity(level: number) {
   return Math.min(4, Math.max(0, Math.floor(level / 5)))
 }
@@ -610,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,
@@ -1176,7 +1125,15 @@ function createLocalRepository(store: LocalSaveStore): GameRepository {
           profile.maxLevel,
           highestOtherClassLevel(save),
         )
-        : 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/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,104 @@
+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
+}
+
+const FLOATING_TEXT_CLEANUP_INTERVAL_MS = 100
+
+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 clearFloatingTexts = useCallback(() => {
+    expirationsRef.current.clear()
+    setFloatingTexts([])
+  }, [])
+
+  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))
+  }, [durationMs])
+
+  useEffect(() => {
+    const timer = window.setInterval(() => {
+      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) return
+      setFloatingTexts((current) => current.filter((text) => expirationsRef.current.has(text.id)))
+    }, FLOATING_TEXT_CLEANUP_INTERVAL_MS)
+    return () => window.clearInterval(timer)
+  }, [])
+
+  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/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'
@@ -125,6 +126,12 @@ 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), input:not(:disabled), select:not(:disabled), textarea:not(:disabled), [tabindex]:not([tabindex="-1"])'
+const GAMEPAD_COMBAT_POLL_MS = 1000 / 60
+const GAMEPAD_MENU_POLL_MS = 1000 / 30
+const GAMEPAD_BROWSER_DISCONNECTED_POLL_MS = 250
+
+let lastControllerFocus: HTMLElement | null = null
 
 type CaptureState = {
   device: InputDevice
@@ -234,25 +241,41 @@ function focusableElements() {
   ).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"])',
-    ),
+    scope.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTOR),
   ).filter(isVisible)
 }
 
+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
+}
+
 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
@@ -279,7 +302,7 @@ function moveFocus(action: InputAction) {
 
   const next = ranked[0]?.candidate
   if (!next) return
-  next.focus({ preventScroll: true })
+  focusControl(next)
 }
 
 function hasUiOverlay() {
@@ -381,6 +404,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
@@ -403,6 +434,7 @@ export function InputProvider({ children }: { children: ReactNode }) {
   const keyboardInputRef = useRef(keyboardInput)
   const previousTokensRef = useRef(new Set<string>())
   const repeatRef = useRef<Record<string, number>>({})
+  const gamepadConnectedRef = useRef(Capacitor.isNativePlatform())
 
   useEffect(() => {
     bindingsRef.current = bindings
@@ -456,12 +488,12 @@ export function InputProvider({ children }: { children: ReactNode }) {
     if (action.startsWith('navigate')) {
       if (uiOverlay || !combatActive) 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 HTMLElement
+        active
         && active.matches('button:not(:disabled), [role="button"]')
         && isVisible(active)
       ) {
@@ -581,6 +613,29 @@ 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) => {
+      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
@@ -595,16 +650,17 @@ export function InputProvider({ children }: { children: ReactNode }) {
       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)
+      const activeControl = currentFocusableControl(candidates)
       if (
-        (!activeIsUsable || document.activeElement === document.body)
+        (!activeControl || document.activeElement === document.body)
         && !keyboardInputRef.current
         && !captureRef.current
       ) {
-        focusFirstControl()
+        if (activeControl) {
+          focusControl(activeControl)
+        } else {
+          focusFirstControl()
+        }
       }
     }
     const observer = new MutationObserver(() => {
@@ -621,9 +677,21 @@ export function InputProvider({ children }: { children: ReactNode }) {
   }, [])
 
   useEffect(() => {
-    let frame = 0
-    const poll = (time: number) => {
-      const gamepad = Array.from(navigator.getGamepads?.() ?? []).find(Boolean)
+    let timer = 0
+    const nextDelay = () => {
+      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
 
@@ -649,10 +717,24 @@ 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())
+    }
+    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)
     }
-    frame = window.requestAnimationFrame(poll)
-    return () => window.cancelAnimationFrame(frame)
   }, [assignBinding, dispatchControllerToken])
 
   const contextValue = useMemo<InputContextValue>(() => ({

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'
+    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/pvpRoguelike.ts

@@ -1,8 +1,9 @@
 import { requestGameApiJson } from './gameRepository'
 
-export type PvpContentType = 'dungeon' | 'raid'
+export type PvpContentType = 'dungeon' | 'raid' | 'stadium'
 export type CpuDifficulty = 1 | 2 | 3 | 4 | 5
 export type PvpMatchSide = 'a' | 'b'
+export type PvpMatchStatus = 'playing' | 'upgrade-choice' | 'shop' | 'won' | 'lost'
 
 export type PvpPlayerInfo = {
   side: PvpMatchSide
@@ -16,6 +17,8 @@ export type PvpUpgradeChoicePayload = {
   encounterIndex: number
   buffId: string
   debuffId: string
+  purchases?: string[]
+  shopReady?: boolean
 }
 
 export type PvpMatchSnapshot<TSideState = unknown> = {
@@ -25,7 +28,7 @@ export type PvpMatchSnapshot<TSideState = unknown> = {
   createdAt: number
   players: Record<PvpMatchSide, PvpPlayerInfo>
   states: Partial<Record<PvpMatchSide, TSideState>>
-  statuses: Partial<Record<PvpMatchSide, 'playing' | 'upgrade-choice' | 'won' | 'lost'>>
+  statuses: Partial<Record<PvpMatchSide, PvpMatchStatus>>
   progress: Partial<Record<PvpMatchSide, {
     stage: number
     encounterIndex: number
@@ -143,7 +146,7 @@ export function publishPvpMatchState<TSideState>(
   matchId: string,
   payload: {
     state: TSideState
-    status: 'playing' | 'upgrade-choice' | 'won' | 'lost'
+    status: PvpMatchStatus
     stage: number
     encounterIndex: number
     encountersCleared: number

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